zhican/zhican/admin/src/views/hygiene-supply/raw-storage/index.vue

<template>
  <div class="page-container">
    <a-page-header title="毛菜入库" subtitle="原始食材入库管理与登记" />
    <RelatedModules :links="relatedLinks" />

    <a-card>
      <!-- 工具栏 -->
      <a-row :gutter="16" style="margin-bottom: 16px" align="middle">
        <a-col :span="6">
          <a-input-search v-model:value="searchText" placeholder="搜索食材/批次号/供应商" allow-clear />
        </a-col>
        <a-col :span="4">
          <a-select v-model:value="statusFilter" style="width: 100%" placeholder="状态筛选">
            <a-select-option value="">全部状态</a-select-option>
            <a-select-option value="stored">已入库</a-select-option>
            <a-select-option value="processing">进行中</a-select-option>
            <a-select-option value="pending">待处理</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="14" style="text-align: right">
          <a-button type="primary" @click="modalVisible = true">
            <template #icon><PlusOutlined /></template>
            新增入库
          </a-button>
        </a-col>
      </a-row>

      <a-table
        :columns="columns"
        :data-source="filteredData"
        :pagination="{ pageSize: 10, showSizeChanger: true, showTotal: (t: number) => `共 ${t} 条` }"
        row-key="id"
        size="middle"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'status'">
            <a-tag :color="statusMap[record.status]?.color">{{ statusMap[record.status]?.text }}</a-tag>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 新增入库 Modal -->
    <a-modal
      v-model:open="modalVisible"
      title="新增入库登记"
      @ok="handleSubmit"
      :width="560"
    >
      <a-form :model="formState" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="食材名称" required>
          <a-select v-model:value="formState.material" placeholder="请选择食材">
            <a-select-option v-for="m in materialOptions" :key="m" :value="m">{{ m }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="供应商" required>
          <a-select v-model:value="formState.supplier" placeholder="请选择供应商">
            <a-select-option v-for="s in supplierOptions" :key="s" :value="s">{{ s }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="数量(kg)" required>
          <a-input-number v-model:value="formState.quantity" :min="1" style="width: 100%" />
        </a-form-item>
        <a-form-item label="入库仓位" required>
          <a-select v-model:value="formState.warehouse" placeholder="请选择仓位">
            <a-select-option value="毛菜仓A">毛菜仓A</a-select-option>
            <a-select-option value="毛菜仓B">毛菜仓B</a-select-option>
            <a-select-option value="冷库C">冷库C</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea v-model:value="formState.remark" :rows="2" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import { genRawStorageData, statusMap } from '@/mock/data'
import RelatedModules from '@/components/common/RelatedModules.vue'

const relatedLinks = [
  { key: 'harvest-storage', label: '收成入库', color: 'green', arrow: '←' },
  { key: 'procurement-mgmt', label: '采供管理', color: 'green', arrow: '←' },
  { key: 'hygiene-test', label: '卫生检测', color: 'orange', arrow: '↔' },
  { key: 'clean-process', label: '净菜加工', color: 'blue', arrow: '→' },
]

const tableData = ref(genRawStorageData(28))
const searchText = ref('')
const statusFilter = ref('')
const modalVisible = ref(false)

const materialOptions = ['白菜', '萝卜', '番茄', '黄瓜', '茄子', '青椒', '猪里脊', '鸡胸肉']
const supplierOptions = ['绿源农业', '丰禾食品', '天然牧场', '鲜美水产', '有机之家']

const formState = reactive({
  material: undefined as string | undefined,
  supplier: undefined as string | undefined,
  quantity: 100,
  warehouse: undefined as string | undefined,
  remark: '',
})

const filteredData = computed(() => {
  return tableData.value.filter(item => {
    if (searchText.value) {
      const kw = searchText.value.toLowerCase()
      if (
        !item.material.toLowerCase().includes(kw) &&
        !item.batchNo.toLowerCase().includes(kw) &&
        !item.supplier.toLowerCase().includes(kw)
      ) return false
    }
    if (statusFilter.value && item.status !== statusFilter.value) return false
    return true
  })
})

const columns = [
  { title: '批次号', dataIndex: 'batchNo', width: 160 },
  { title: '食材名', dataIndex: 'material', width: 100 },
  { title: '供应商', dataIndex: 'supplier', width: 110 },
  { title: '数量', dataIndex: 'quantity', width: 90 },
  { title: '接收日期', dataIndex: 'receiveDate', width: 110 },
  { title: '仓位', dataIndex: 'warehouse', width: 100 },
  { title: '温度', dataIndex: 'temperature', width: 80 },
  { title: '保质期', dataIndex: 'shelfLife', width: 80 },
  { title: '状态', dataIndex: 'status', width: 90 },
  { title: '接收人', dataIndex: 'receiver', width: 100 },
]

function handleSubmit() {
  if (!formState.material || !formState.supplier || !formState.warehouse) {
    message.warning('请填写完整信息')
    return
  }
  message.success('入库登记成功')
  modalVisible.value = false
  formState.material = undefined
  formState.supplier = undefined
  formState.warehouse = undefined
  formState.quantity = 100
  formState.remark = ''
}
</script>