From 5f8eac35235cbef58241bfe4925d21dec0c7a6d8 Mon Sep 17 00:00:00 2001
From: zlwu <704541015@qq.com>
Date: Wed, 20 May 2026 00:56:53 +0800
Subject: [PATCH] feat(production): add cell product management page

---
 .../views/production/cell-product/index.vue   | 605 ++++++++++++++++++
 1 file changed, 605 insertions(+)
 create mode 100644 web-admin/src/views/production/cell-product/index.vue

diff --git a/web-admin/src/views/production/cell-product/index.vue b/web-admin/src/views/production/cell-product/index.vue
new file mode 100644
index 000000000..22e94a240
--- /dev/null
+++ b/web-admin/src/views/production/cell-product/index.vue
@@ -0,0 +1,605 @@
+<!-- 细胞产品库 -->
+<!-- eslint-disable vue/no-v-model-argument -->
+<template>
+  <div class="page-container">
+    <header class="page-head">
+      <h1>细胞产品库</h1>
+      <p class="page-desc">管理细胞产品的入库、出库与库存信息。</p>
+    </header>
+
+    <section class="panel">
+      <div class="panel-top">
+        <h2 class="title-bar-heading">产品列表</h2>
+      </div>
+
+      <div class="filter-block">
+        <el-form :model="searchForm" class="filter-form" @submit.prevent>
+          <div class="filter-grid">
+            <el-form-item label="关键词">
+              <el-input
+                v-model="searchForm.keyword"
+                placeholder="产品编码/名称/批次号"
+                clearable
+              />
+            </el-form-item>
+            <el-form-item label="产品状态">
+              <el-select
+                v-model="searchForm.productStatus"
+                placeholder="全部"
+                clearable
+                style="width: 100%"
+              >
+                <el-option label="在库" value="zk" />
+                <el-option label="已出库" value="yc" />
+                <el-option label="已使用" value="ysy" />
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="filter-actions-row">
+            <span class="filter-hint">按产品编码、名称、批次号模糊查询。</span>
+            <div class="filter-actions-end">
+              <el-button class="btn-ghost" @click="handleReset">
+                <el-icon><RefreshLeft /></el-icon>重置
+              </el-button>
+              <el-button class="btn-main" type="primary" @click="handleSearch">
+                <el-icon><Search /></el-icon>搜索
+              </el-button>
+            </div>
+          </div>
+        </el-form>
+      </div>
+
+      <div class="list-toolbar">
+        <div class="list-toolbar-row">
+          <div class="list-toolbar-selected">
+            已选 <span class="sel-num">{{ selectedRows.length }}</span> 项
+          </div>
+          <el-button class="btn-main" type="primary" @click="handleAdd">
+            <el-icon><Plus /></el-icon>
+            新增产品
+          </el-button>
+          <el-button
+            class="btn-ghost"
+            type="danger"
+            :disabled="selectedRows.length === 0"
+            @click="handleBatchDelete"
+          >
+            批量删除
+          </el-button>
+        </div>
+      </div>
+
+      <div class="list-body list-wrap">
+        <el-table
+          class="list-table"
+          :data="tableData"
+          v-loading="loading"
+          stripe
+          row-key="id"
+          @selection-change="handleSelectionChange"
+          @row-dblclick="handleView"
+        >
+          <el-table-column
+            type="selection"
+            width="55"
+            align="center"
+            header-align="center"
+          />
+          <el-table-column
+            type="index"
+            label="序号"
+            width="68"
+            align="center"
+            header-align="center"
+            :index="(index) => (pagination.page - 1) * pagination.pageSize + index + 1"
+          />
+          <el-table-column
+            prop="productCode"
+            label="产品编码"
+            min-width="130"
+            align="center"
+          />
+          <el-table-column
+            prop="productName"
+            label="产品名称"
+            min-width="140"
+            align="center"
+          />
+          <el-table-column
+            prop="productTypeName"
+            label="产品类型"
+            min-width="120"
+            align="center"
+          >
+            <template #default="{ row }">
+              {{ row.productTypeName || '—' }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="specName"
+            label="规格"
+            min-width="110"
+            align="center"
+          >
+            <template #default="{ row }">
+              {{ row.specName || '—' }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="batchNo"
+            label="批次号"
+            min-width="130"
+            align="center"
+          />
+          <el-table-column
+            prop="storageSlotName"
+            label="储物格位置"
+            min-width="120"
+            align="center"
+          >
+            <template #default="{ row }">
+              {{ row.storageSlotName || '—' }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="productStatus"
+            label="状态"
+            width="100"
+            align="center"
+          >
+            <template #default="{ row }">
+              <el-tag
+                :type="productStatusTag(row.productStatus).type"
+                size="small"
+              >
+                {{ productStatusTag(row.productStatus).label }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="expiryDate"
+            label="有效期"
+            min-width="120"
+            align="center"
+          >
+            <template #default="{ row }">
+              {{ row.expiryDate || '—' }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            width="320"
+            fixed="right"
+            align="center"
+          >
+            <template #default="{ row }">
+              <el-button class="btn-op-item" @click="handleView(row)">
+                <el-icon><View /></el-icon>查看
+              </el-button>
+              <el-button class="btn-op-item primary" @click="handleEdit(row)">
+                编辑
+              </el-button>
+              <el-button class="btn-op-item" @click="handleDelete(row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pagination list-pager-bar">
+          <el-pagination
+            :current-page="pagination.page"
+            :page-size="pagination.pageSize"
+            :total="pagination.total"
+            :page-sizes="[10, 20, 50]"
+            layout="total, sizes, prev, pager, next"
+            @size-change="(val) => ((pagination.page = 1), (pagination.pageSize = val), loadData())"
+            @current-change="(val) => ((pagination.page = val), loadData())"
+          />
+        </div>
+      </div>
+
+      <!-- 新增/编辑弹窗 -->
+      <el-dialog
+        v-model="dialogVisible"
+        :title="dialogTitle"
+        width="680px"
+        class="dialog-form-layout"
+        align-center
+        destroy-on-close
+        :close-on-click-modal="false"
+      >
+        <el-form
+          ref="formRef"
+          :model="formData"
+          :rules="formRules"
+          label-position="top"
+          class="cell-product-dialog-form"
+          scroll-to-error
+          :scroll-into-view-options="{ behavior: 'smooth', block: 'center' }"
+        >
+          <div class="form-grid-2">
+            <el-form-item label="产品编码" prop="productCode">
+              <el-input v-model="formData.productCode" placeholder="请输入产品编码" />
+            </el-form-item>
+            <el-form-item label="产品名称" prop="productName">
+              <el-input v-model="formData.productName" placeholder="请输入产品名称" />
+            </el-form-item>
+            <el-form-item label="产品类型" prop="productTypeId">
+              <el-select
+                v-model="formData.productTypeId"
+                placeholder="请选择产品类型"
+                clearable
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in productTypeOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="规格" prop="specId">
+              <el-select
+                v-model="formData.specId"
+                placeholder="请选择规格"
+                clearable
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in specOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="批次号" prop="batchNo">
+              <el-input v-model="formData.batchNo" placeholder="请输入批次号" />
+            </el-form-item>
+            <el-form-item label="储物格位置" prop="storageSlotId">
+              <el-select
+                v-model="formData.storageSlotId"
+                placeholder="请选择储物格"
+                clearable
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in storageSlotOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="数量" prop="quantity">
+              <el-input-number
+                v-model="formData.quantity"
+                :min="0"
+                :precision="0"
+                controls-position="right"
+                style="width: 100%"
+              />
+            </el-form-item>
+            <el-form-item label="单位">
+              <el-input v-model="formData.unit" placeholder="如：份、袋" />
+            </el-form-item>
+            <el-form-item label="有效期" prop="expiryDate">
+              <el-date-picker
+                v-model="formData.expiryDate"
+                type="date"
+                placeholder="请选择有效期"
+                value-format="YYYY-MM-DD"
+                style="width: 100%"
+              />
+            </el-form-item>
+            <el-form-item label="产品图片">
+              <el-input
+                v-model="formData.productImages"
+                placeholder="图片URL，多张用逗号分隔"
+              />
+            </el-form-item>
+            <el-form-item label="备注" class="form-col-span-2">
+              <el-input
+                v-model="formData.remark"
+                type="textarea"
+                :rows="3"
+                placeholder="可选"
+              />
+            </el-form-item>
+          </div>
+        </el-form>
+        <template #footer>
+          <el-button class="btn-ghost" @click="dialogVisible = false">
+            <el-icon><Close /></el-icon>
+            取消
+          </el-button>
+          <el-button
+            class="btn-main"
+            type="primary"
+            :loading="submitLoading"
+            @click="handleSubmit"
+          >
+            <el-icon><Check /></el-icon>
+            确定
+          </el-button>
+        </template>
+      </el-dialog>
+
+      <!-- 查看弹窗 -->
+      <SystemViewDialog
+        v-model:visible="viewVisible"
+        :title="viewRow?.productName || '产品详情'"
+        :icon="Box"
+        :meta="viewRow?.productCode || ''"
+        :sections="viewSections"
+      />
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, reactive, computed, onMounted } from 'vue'
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  import {
+    Plus,
+    Close,
+    Check,
+    View,
+    Search,
+    RefreshLeft,
+    Box,
+  } from '@element-plus/icons-vue'
+  import SystemViewDialog from '@/components/business/system-view-dialog/index.vue'
+  import { withFullscreenLoading, fullscreenLoadingText } from '@/utils/fullscreen-loading'
+  import {
+    fetchCellProductList,
+    fetchCellProductDetail,
+    fetchCreateCellProduct,
+    fetchUpdateCellProduct,
+    fetchDeleteCellProduct,
+  } from '@/api/cell-product'
+
+  defineOptions({ name: 'ProductionCellProduct' })
+
+  /* ---- 产品状态 Tag 映射 ---- */
+  function productStatusTag(status: string) {
+    const map: Record<string, { label: string; type: string }> = {
+      zk: { label: '在库', type: 'success' },
+      yc: { label: '已出库', type: 'warning' },
+      ysy: { label: '已使用', type: 'info' },
+    }
+    return map[status] || { label: status, type: 'info' }
+  }
+
+  /* ---- 搜索 & 分页 ---- */
+  const searchForm = reactive({ keyword: '', productStatus: '' })
+  const tableData = ref<any[]>([])
+  const selectedRows = ref<any[]>([])
+  const loading = ref(false)
+  const pagination = reactive({ page: 1, pageSize: 10, total: 0 })
+
+  /* ---- 弹窗状态 ---- */
+  const dialogVisible = ref(false)
+  const dialogTitle = ref('新增产品')
+  const isEdit = ref(false)
+  const submitLoading = ref(false)
+  const formRef = ref()
+  const editingId = ref<string | null>(null)
+
+  /* ---- 查看弹窗 ---- */
+  const viewVisible = ref(false)
+  const viewRow = ref<any>(null)
+
+  /* ---- 下拉选项（占位，后续对接真实接口） ---- */
+  const productTypeOptions = ref<Array<{ id: string; name: string }>>([])
+  const specOptions = ref<Array<{ id: string; name: string }>>([])
+  const storageSlotOptions = ref<Array<{ id: string; name: string }>>([])
+
+  /* ---- 表单 ---- */
+  const formData = reactive({
+    productCode: '',
+    productName: '',
+    productTypeId: '',
+    specId: '',
+    batchNo: '',
+    storageSlotId: '',
+    quantity: 0,
+    unit: '',
+    expiryDate: '',
+    productImages: '',
+    remark: '',
+  })
+
+  const formRules = {
+    productCode: [{ required: true, message: '请输入产品编码', trigger: 'blur' }],
+    productName: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
+    batchNo: [{ required: true, message: '请输入批次号', trigger: 'blur' }],
+  }
+
+  /* ---- 选择 ---- */
+  function handleSelectionChange(rows: any[]) {
+    selectedRows.value = rows
+  }
+
+  /* ---- 查看弹窗 sections ---- */
+  const viewSections = computed(() => {
+    if (!viewRow.value) return []
+    const row = viewRow.value
+    return [
+      {
+        title: '基本信息',
+        fields: [
+          { label: '产品编码', value: row.productCode },
+          { label: '产品名称', value: row.productName },
+          { label: '产品类型', value: row.productTypeName || '—' },
+          { label: '规格', value: row.specName || '—' },
+          { label: '批次号', value: row.batchNo },
+          { label: '储物格位置', value: row.storageSlotName || '—' },
+          {
+            label: '状态',
+            value: productStatusTag(row.productStatus).label,
+            tagType: productStatusTag(row.productStatus).type,
+          },
+          { label: '数量', value: row.quantity ?? '—' },
+          { label: '单位', value: row.unit || '—' },
+          { label: '有效期', value: row.expiryDate || '—' },
+          { label: '备注', value: row.remark || '—', span: true },
+        ],
+      },
+    ]
+  })
+
+  /* ---- 数据加载 ---- */
+  async function loadData() {
+    loading.value = true
+    try {
+      const res = await fetchCellProductList({
+        page: pagination.page,
+        pageSize: pagination.pageSize,
+        keyword: searchForm.keyword || undefined,
+      })
+      tableData.value = res.list || []
+      pagination.total = res.total ?? 0
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function handleSearch() {
+    pagination.page = 1
+    loadData()
+  }
+
+  function handleReset() {
+    searchForm.keyword = ''
+    searchForm.productStatus = ''
+    pagination.page = 1
+    loadData()
+  }
+
+  /* ---- 表单重置 ---- */
+  function resetForm() {
+    formData.productCode = ''
+    formData.productName = ''
+    formData.productTypeId = ''
+    formData.specId = ''
+    formData.batchNo = ''
+    formData.storageSlotId = ''
+    formData.quantity = 0
+    formData.unit = ''
+    formData.expiryDate = ''
+    formData.productImages = ''
+    formData.remark = ''
+    editingId.value = null
+  }
+
+  /* ---- 新增 ---- */
+  function handleAdd() {
+    isEdit.value = false
+    dialogTitle.value = '新增产品'
+    resetForm()
+    dialogVisible.value = true
+    formRef.value?.clearValidate?.()
+  }
+
+  /* ---- 编辑 ---- */
+  function handleEdit(row: any) {
+    isEdit.value = true
+    dialogTitle.value = '编辑产品'
+    editingId.value = row.id
+    formData.productCode = row.productCode || ''
+    formData.productName = row.productName || ''
+    formData.productTypeId = row.productTypeId || ''
+    formData.specId = row.specId || ''
+    formData.batchNo = row.batchNo || ''
+    formData.storageSlotId = row.storageSlotId || ''
+    formData.quantity = row.quantity ?? 0
+    formData.unit = row.unit || ''
+    formData.expiryDate = row.expiryDate || ''
+    formData.productImages = row.productImages || ''
+    formData.remark = row.remark || ''
+    dialogVisible.value = true
+    formRef.value?.clearValidate?.()
+  }
+
+  /* ---- 提交 ---- */
+  async function handleSubmit() {
+    await formRef.value?.validate?.()
+    submitLoading.value = true
+    try {
+      const payload = {
+        productCode: formData.productCode.trim(),
+        productName: formData.productName.trim(),
+        productTypeId: formData.productTypeId || undefined,
+        specId: formData.specId || undefined,
+        batchNo: formData.batchNo.trim(),
+        storageSlotId: formData.storageSlotId || undefined,
+        quantity: formData.quantity,
+        unit: formData.unit?.trim() || undefined,
+        expiryDate: formData.expiryDate || undefined,
+        productImages: formData.productImages?.trim() || undefined,
+        remark: formData.remark?.trim() || undefined,
+      }
+      if (isEdit.value && editingId.value) {
+        await fetchUpdateCellProduct(editingId.value, payload)
+      } else {
+        await fetchCreateCellProduct(payload)
+      }
+      ElMessage.success(isEdit.value ? '更新成功' : '创建成功')
+      dialogVisible.value = false
+      await loadData()
+    } catch {
+      /* 校验或接口错误已由全局处理 */
+    } finally {
+      submitLoading.value = false
+    }
+  }
+
+  /* ---- 查看 ---- */
+  async function handleView(row: any) {
+    try {
+      const detail = await fetchCellProductDetail(row.id)
+      viewRow.value = detail || row
+    } catch {
+      viewRow.value = row
+    }
+    viewVisible.value = true
+  }
+
+  /* ---- 删除 ---- */
+  async function handleDelete(row: any) {
+    await ElMessageBox.confirm('确定要删除该产品吗？', '提示', { type: 'warning' })
+    await fetchDeleteCellProduct(row.id)
+    ElMessage.success('删除成功')
+    await loadData()
+  }
+
+  async function handleBatchDelete() {
+    const ids = selectedRows.value.map((r) => r.id)
+    if (!ids.length) return
+    await ElMessageBox.confirm(`确定删除选中的 ${ids.length} 个产品吗？`, '提示', {
+      type: 'warning',
+    })
+    await withFullscreenLoading(async () => {
+      for (const id of ids) {
+        await fetchDeleteCellProduct(id)
+      }
+      ElMessage.success('批量删除成功')
+      selectedRows.value = []
+      await loadData()
+    }, fullscreenLoadingText.batchDelete)
+  }
+
+  onMounted(() => {
+    loadData()
+  })
+</script>
+
+<style scoped lang="scss">
+  .cell-product-dialog-form {
+    :deep(.el-form-item) {
+      margin-bottom: 0;
+    }
+  }
+</style>