|
|
@@ -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>
|
