From d02ef34751915cfba3460cb3389318787c04516c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=B1=E6=98=8A=E5=A4=A9?=
 <15984976+n2319_0@user.noreply.gitee.com>
Date: Wed, 22 Apr 2026 18:33:04 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BE=85=E6=9D=90=E4=BF=AE=E6=AD=A3=EF=BC=8C?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E8=BF=AD=E4=BB=A3=EF=BC=8C=E4=BA=A7?=
 =?UTF-8?q?=E5=93=81=E5=9B=BE=E7=89=87=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../service/impl/MatProductServiceImpl.java   |   1 +
 .../resources/mapper/MatProductMapper.xml     |   1 +
 gear-ui3/src/router/index.js                  |  17 +-
 gear-ui3/src/views/mat/auxiliary/index.vue    | 464 ++++++++++++++++++
 gear-ui3/src/views/mat/product/detail.vue     | 360 ++++++++++++++
 gear-ui3/src/views/mat/product/index.vue      | 403 ++++-----------
 6 files changed, 934 insertions(+), 312 deletions(-)
 create mode 100644 gear-ui3/src/views/mat/auxiliary/index.vue
 create mode 100644 gear-ui3/src/views/mat/product/detail.vue

diff --git a/gear-mat/src/main/java/com/gear/mat/service/impl/MatProductServiceImpl.java b/gear-mat/src/main/java/com/gear/mat/service/impl/MatProductServiceImpl.java
index afe0903..aac4f11 100644
--- a/gear-mat/src/main/java/com/gear/mat/service/impl/MatProductServiceImpl.java
+++ b/gear-mat/src/main/java/com/gear/mat/service/impl/MatProductServiceImpl.java
@@ -112,6 +112,7 @@ public class MatProductServiceImpl implements IMatProductService {
         productWithMaterialsVo.setModel(productVo.getModel());
         productWithMaterialsVo.setUnitPrice(productVo.getUnitPrice());
         productWithMaterialsVo.setRemark(productVo.getRemark());
+//        productWithMaterialsVo.setProductImages(productVo.getProductImages());
 
         // 查询并设置关联的配料信息
         List<MatProductMaterialRelationVo> relations = productMaterialRelationService.queryList(
diff --git a/gear-mat/src/main/resources/mapper/MatProductMapper.xml b/gear-mat/src/main/resources/mapper/MatProductMapper.xml
index d5e4bbb..a251c4e 100644
--- a/gear-mat/src/main/resources/mapper/MatProductMapper.xml
+++ b/gear-mat/src/main/resources/mapper/MatProductMapper.xml
@@ -16,6 +16,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         <result property="updateTime" column="update_time"/>
         <result property="updateBy" column="update_by"/>
         <result property="remark" column="remark"/>
+<!--        <result property="productImages" column="product_images"/>-->
     </resultMap>
 
 
diff --git a/gear-ui3/src/router/index.js b/gear-ui3/src/router/index.js
index ce17be9..38d6233 100644
--- a/gear-ui3/src/router/index.js
+++ b/gear-ui3/src/router/index.js
@@ -70,20 +70,7 @@ export const constantRoutes = [
       }
     ]
   },
-  {
-    path: '/user',
-    component: Layout,
-    hidden: true,
-    redirect: 'noredirect',
-    children: [
-      {
-        path: 'profile/:activeTab?',
-        component: () => import('@/views/system/user/profile/index'),
-        name: 'Profile',
-        meta: { title: '个人中心', icon: 'user' }
-      }
-    ]
-  }
+  {    path: '/user',    component: Layout,    hidden: true,    redirect: 'noredirect',    children: [      {        path: 'profile/:activeTab?',        component: () => import('@/views/system/user/profile/index'),        name: 'Profile',        meta: { title: '个人中心', icon: 'user' }      }    ]  },  {    path: '/mat/product',    component: Layout,    hidden: true,    children: [      {        path: 'detail/:id(\\d+)',        component: () => import('@/views/mat/product/detail'),        name: 'ProductDetail',        meta: { title: '产品详情', activeMenu: '/mat/product' }      }    ]  }
 ]
 
 // 动态路由，基于用户权限动态去加载
@@ -151,7 +138,7 @@ export const dynamicRoutes = [
     permissions: ['tool:gen:edit'],
     children: [
       {
-        path: 'index/:tableId(\\d+)',
+        path: 'index/:tableId(\d+)',
         component: () => import('@/views/tool/gen/editTable'),
         name: 'GenEdit',
         meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
diff --git a/gear-ui3/src/views/mat/auxiliary/index.vue b/gear-ui3/src/views/mat/auxiliary/index.vue
new file mode 100644
index 0000000..e0e94cd
--- /dev/null
+++ b/gear-ui3/src/views/mat/auxiliary/index.vue
@@ -0,0 +1,464 @@
+<!-- 辅料管理 -->
+ <template> 
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="辅料名称" prop="materialName">
+        <el-input v-model="queryParams.materialName" placeholder="请输入辅料名称" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="辅料规格" prop="spec">
+        <el-input v-model="queryParams.spec" placeholder="请输入辅料规格" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="辅料型号" prop="model">
+        <el-input v-model="queryParams.model" placeholder="请输入辅料型号" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="厂家" prop="factory">
+        <el-input v-model="queryParams.factory" placeholder="请输入厂家" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+      <!-- <el-form-item label="计量单位 个/公斤/米等" prop="unit">
+        <el-input v-model="queryParams.unit" placeholder="请输入计量单位 个/公斤/米等" clearable @keyup.enter="handleQuery" />
+      </el-form-item>
+      <el-form-item label="现存库存" prop="currentStock">
+        <el-input v-model="queryParams.currentStock" placeholder="请输入现存库存" clearable @keyup.enter="handleQuery" />
+      </el-form-item> -->
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="materialList" @selection-change="handleSelectionChange" @row-click="handleRowClick">
+      <el-table-column type="selection" width="55" align="center" />
+      <!-- <el-table-column label="辅料ID 主键" align="center" prop="materialId" v-if="true" /> -->
+      <el-table-column label="辅料名称" align="center" prop="materialName" />
+      <el-table-column label="物料类型" align="center" prop="materialType">
+        <template #default="scope">
+          {{ scope.row.materialType === 1 ? '辅料' : '原料' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="辅料规格" align="center" prop="spec" />
+      <el-table-column label="辅料型号" align="center" prop="model" />
+      <el-table-column label="厂家" align="center" prop="factory" />
+      <el-table-column label="计量单位" align="center" prop="unit" />
+      <el-table-column label="现存库存" align="center" prop="currentStock">
+        <template #default="scope">
+          {{ formatDecimal(scope.row.currentStock) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="在途数量" align="center" prop="inTransitNum">
+        <template #default="scope">
+          {{ formatDecimal(scope.row.inTransitNum) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Plus" @click="handleIn(scope.row)">入库</el-button>
+          <el-button link type="primary" icon="Minus" @click="handleOut(scope.row)">出库</el-button>
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize" @pagination="getList" />
+
+    <!-- 添加或修改辅料基础信息对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="materialRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="辅料名称" prop="materialName">
+          <el-input v-model="form.materialName" placeholder="请输入辅料名称" />
+        </el-form-item>
+        <el-form-item label="物料类型" prop="materialType">
+          <el-select v-model="form.materialType" placeholder="请选择物料类型" disabled>
+            <el-option label="辅料" value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="辅料规格" prop="spec">
+          <el-input v-model="form.spec" placeholder="请输入辅料规格" />
+        </el-form-item>
+        <el-form-item label="辅料型号" prop="model">
+          <el-input v-model="form.model" placeholder="请输入辅料型号" />
+        </el-form-item>
+        <el-form-item label="厂家" prop="factory">
+          <el-input v-model="form.factory" placeholder="请输入厂家" />
+        </el-form-item>
+        <el-form-item label="计量单位" prop="unit">
+          <el-input v-model="form.unit" placeholder="请输入计量单位" />
+        </el-form-item>
+        <!-- <el-form-item label="现存库存" prop="currentStock">
+          <el-input v-model="form.currentStock" placeholder="请输入现存库存" />
+        </el-form-item> -->
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <el-dialog title="入库" v-model="inOpen" width="500px" append-to-body>
+      <el-form ref="materialInRef" :model="inForm" label-width="80px">
+        <el-form-item label="辅料" prop="materialId">
+          <raw-selector ref="rawSelector" v-model="inForm.materialId" placeholder="请选择辅料" />
+        </el-form-item>
+        <el-form-item label="入库数量" prop="inNum">
+          <el-input v-model="inForm.inNum" placeholder="请输入入库数量" />
+        </el-form-item>
+        <el-form-item label="入库单价" prop="inPrice">
+          <el-input v-model="inForm.inPrice" placeholder="请输入入库单价" />
+        </el-form-item>
+        <el-form-item label="入库时间" prop="inTime">
+          <el-date-picker clearable v-model="inForm.inTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="请选择实际入库时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="操作人" prop="operator">
+          <el-input v-model="inForm.operator" placeholder="请输入入库操作人" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="inForm.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitFormIn">确 定</el-button>
+          <el-button @click="cancelIn">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <el-dialog title="出库" v-model="outOpen" width="500px" append-to-body>
+      <el-form ref="materialOutRef" :model="outForm" label-width="80px">
+        <el-form-item label="出库单号" prop="outNo">
+          <el-input v-model="outForm.outNo" placeholder="请输入出库单号" />
+        </el-form-item>
+        <el-form-item label="辅料" prop="materialId">
+          <raw-selector ref="rawSelector" v-model="outForm.materialId" placeholder="请选择辅料" />
+        </el-form-item>
+        <el-form-item label="出库数量" prop="outNum">
+          <el-input v-model="outForm.outNum" placeholder="请输入出库数量" />
+        </el-form-item>
+        <el-form-item label="出库原因" prop="outReason">
+          <el-input v-model="outForm.outReason" placeholder="请输入出库原因" />
+        </el-form-item>
+        <el-form-item label="操作人" prop="operator">
+          <el-input v-model="outForm.operator" placeholder="请输入操作人" />
+        </el-form-item>
+        <el-form-item label="出库时间" prop="outTime">
+          <el-date-picker clearable v-model="outForm.outTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="请选择实际出库时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="outForm.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitFormOut">确 定</el-button>
+          <el-button @click="cancelOut">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+
+    <Price :materialId="currentMaterialId" ref="priceRef" />
+  </div>
+</template>
+
+<script setup name="AuxiliaryMaterial">
+import { listMaterial, getMaterial, delMaterial, addMaterial, updateMaterial } from "@/api/mat/material";
+import { addPurchaseInDetail } from "@/api/mat/purchaseInDetail";
+import { addMaterialOut } from "@/api/mat/materialOut";
+import Price from "@/views/mat/components/price.vue";
+import RawSelector from "@/components/RawSelector/index.vue";
+import { formatDecimal } from '@/utils/gear'
+
+import useUserStore from '@/store/modules/user'
+
+const userStore = useUserStore()
+
+const { proxy } = getCurrentInstance();
+
+const materialList = ref([]);
+const open = ref(false);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+
+const inForm = ref({});
+const outForm = ref({});
+const inOpen = ref(false);
+const outOpen = ref(false);
+
+const currentMaterialId = ref(null);
+
+function handleRowClick(row) {
+  currentMaterialId.value = row.materialId;
+}
+
+const priceHistoryList = ref([]);
+
+const nickName = computed(() => userStore.nickName)
+
+
+const formatterTime = (time) => {
+  return proxy.parseTime(time, '{y}-{m}-{d}')
+}
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    materialName: undefined,
+    spec: undefined,
+    model: undefined,
+    factory: undefined,
+    unit: undefined,
+    currentStock: undefined,
+    materialType: 1, // 固定为辅料
+  },
+  rules: {
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询辅料基础信息列表 */
+function getList() {
+  loading.value = true;
+  listMaterial(queryParams.value).then(response => {
+    materialList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    materialId: null,
+    materialName: null,
+    materialType: 1, // 固定为辅料
+    spec: null,
+    model: null,
+    factory: null,
+    unit: null,
+    currentStock: null,
+    delFlag: null,
+    createTime: null,
+    createBy: null,
+    updateTime: null,
+    updateBy: null,
+    remark: null
+  };
+  proxy.resetForm("materialRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  queryParams.value.materialType = 1; // 重置后仍为辅料
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.materialId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加辅料基础信息";
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  loading.value = true
+  reset();
+  const _materialId = row.materialId || ids.value
+  getMaterial(_materialId).then(response => {
+    loading.value = false;
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改辅料基础信息";
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["materialRef"].validate(valid => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.materialId != null) {
+        updateMaterial(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        }).finally(() => {
+          buttonLoading.value = false;
+        });
+      } else {
+        addMaterial(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        }).finally(() => {
+          buttonLoading.value = false;
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _materialIds = row.materialId || ids.value;
+  proxy.$modal.confirm('是否确认删除辅料基础信息编号为"' + _materialIds + '"的数据项？').then(function () {
+    loading.value = true;
+    return delMaterial(_materialIds);
+  }).then(() => {
+    loading.value = true;
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {
+  }).finally(() => {
+    loading.value = false;
+  });
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('mat/material/export', {
+    ...queryParams.value
+  }, `auxiliary_material_${new Date().getTime()}.xlsx`)
+}
+
+function handleIn(row) {
+  const inTime = proxy.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
+  inOpen.value = true;
+
+  inForm.value = {
+    detailId: null,
+    purchaseId: null,
+    materialId: row.materialId,
+    inNum: null,
+    inPrice: null,
+    inAmount: null,
+    inTime: inTime,
+    operator: nickName,
+    delFlag: null,
+    createTime: null,
+    createBy: null,
+    updateTime: null,
+    updateBy: null,
+    remark: null
+  };
+  proxy.resetForm("materialInRef");
+}
+
+function cancelIn() {
+  inOpen.value = false;
+}
+
+const priceRef = ref(null);
+
+function submitFormIn() {
+  loading.value = true;
+  buttonLoading.value = true;
+  addPurchaseInDetail(inForm.value).then(response => {
+    proxy.$modal.msgSuccess("新增成功");
+    inOpen.value = false;
+    getList();
+    priceRef.value.getListChart();
+  }).finally(() => {
+    buttonLoading.value = false;
+    loading.value = false;
+  });
+}
+
+function handleOut(row) {
+  const outNo = proxy.parseTime(new Date(), '{y}{m}{d}{hh}{i}{s}')
+  const outTime = proxy.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
+  outOpen.value = true;
+
+  outForm.value = {
+    outId: null,
+    outNo: outNo,
+    materialId: row.materialId,
+    outNum: null,
+    outReason: null,
+    operator: nickName,
+    outTime: outTime,
+    delFlag: null,
+    createTime: null,
+    createBy: null,
+    updateTime: null,
+    updateBy: null,
+    remark: null
+  };
+  proxy.resetForm("materialOutRef");
+}
+
+function cancelOut() {
+  outOpen.value = false;
+}
+
+function submitFormOut() {
+  loading.value = true;
+  buttonLoading.value = true;
+  addMaterialOut(outForm.value).then(response => {
+    proxy.$modal.msgSuccess("新增成功");
+    outOpen.value = false;
+    getList();
+  }).finally(() => {
+    buttonLoading.value = false;
+    loading.value = false;
+  });
+}
+
+getList();
+</script>
\ No newline at end of file
diff --git a/gear-ui3/src/views/mat/product/detail.vue b/gear-ui3/src/views/mat/product/detail.vue
new file mode 100644
index 0000000..18f0bfc
--- /dev/null
+++ b/gear-ui3/src/views/mat/product/detail.vue
@@ -0,0 +1,360 @@
+<template>
+  <div class="app-container">
+    <el-card class="mb20">
+      <template #header>
+        <div class="card-header">
+          <span>{{ productDetail.productName }} - 产品详情</span>
+          <el-button type="primary" plain size="small" @click="handleBack">返回列表</el-button>
+        </div>
+      </template>
+      <div class="product-info">
+        <div class="info-item">
+          <span class="label">产品名称：</span>
+          <span class="value">{{ productDetail.productName }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">产品规格：</span>
+          <span class="value">{{ productDetail.spec }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">产品型号：</span>
+          <span class="value">{{ productDetail.model }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">产品单价：</span>
+          <span class="value">{{ formatDecimal(productDetail.unitPrice) }} 元</span>
+        </div>
+        <div class="info-item">
+          <span class="label">备注：</span>
+          <span class="value">{{ productDetail.remark || '无' }}</span>
+        </div>
+      </div>
+      <!-- 产品附加属性 -->
+      <div class="product-addition" v-if="productAdditionList.length > 0">
+        <h4>产品附加属性</h4>
+        <el-table :data="productAdditionList" style="width: 100%" border>
+          <el-table-column prop="attrName" label="属性名" width="150" />
+          <el-table-column prop="attrValue" label="属性值" />
+        </el-table>
+      </div>
+      <div class="product-images" v-if="productDetail.productImages && productDetail.productImages.trim()">
+        <h4>产品图片</h4>
+        <div class="image-list">
+          <el-image
+            v-for="(image, index) in productDetail.productImages.split(',').filter(img => img.trim())"
+            :key="index"
+            :src="image"
+            :preview-src-list="productDetail.productImages.split(',').filter(img => img.trim())"
+            style="width: 100px; height: 100px; margin-right: 10px;"
+          />
+        </div>
+      </div>
+    </el-card>
+
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <span>材料明细</span>
+        </div>
+      </template>
+      
+      <!-- 主材部分 -->
+      <div class="material-section">
+        <h3 class="section-title">主材</h3>
+        <el-table :data="mainMaterials" style="width: 100%" border>
+          <el-table-column prop="materialName" label="配料名称" width="150" />
+          <el-table-column prop="spec" label="材料规格" width="150" />
+          <el-table-column prop="quantity" label="数量" width="100" align="center" />
+          <el-table-column prop="price" label="价格" width="100" align="center">
+            <template #default="scope">
+              {{ formatDecimal(scope.row.price) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="subtotal" label="小计" width="100" align="center">
+            <template #default="scope">
+              {{ formatDecimal(scope.row.subtotal) }}
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="section-summary" v-if="mainMaterials.length > 0">
+          <span>主材小计：{{ formatDecimal(mainMaterials.reduce((sum, item) => sum + item.subtotal, 0)) }} 元</span>
+        </div>
+      </div>
+
+      <!-- 辅材部分 -->
+      <div class="material-section">
+        <h3 class="section-title">辅材</h3>
+        <el-table :data="auxiliaryMaterials" style="width: 100%" border>
+          <el-table-column prop="materialName" label="配料名称" width="150" />
+          <el-table-column prop="spec" label="材料规格" width="150" />
+          <el-table-column prop="quantity" label="数量" width="100" align="center" />
+          <el-table-column prop="price" label="价格" width="100" align="center">
+            <template #default="scope">
+              {{ formatDecimal(scope.row.price) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="subtotal" label="小计" width="100" align="center">
+            <template #default="scope">
+              {{ formatDecimal(scope.row.subtotal) }}
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="section-summary" v-if="auxiliaryMaterials.length > 0">
+          <span>辅材小计：{{ formatDecimal(auxiliaryMaterials.reduce((sum, item) => sum + item.subtotal, 0)) }} 元</span>
+        </div>
+      </div>
+
+      <!-- 工本部分 -->
+      <div class="material-section">
+        <h3 class="section-title">工本</h3>
+        <el-table :data="laborMaterials" style="width: 100%" border>
+          <el-table-column prop="materialName" label="项目名称" width="150" />
+          <el-table-column prop="spec" label="规格" width="150" />
+          <el-table-column prop="quantity" label="数量" width="100" align="center" />
+          <el-table-column prop="price" label="价格" width="100" align="center">
+            <template #default="scope">
+              {{ formatDecimal(scope.row.price) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="subtotal" label="小计" width="100" align="center">
+            <template #default="scope">
+              {{ formatDecimal(scope.row.subtotal) }}
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="section-summary" v-if="laborMaterials.length > 0">
+          <span>工本小计：{{ formatDecimal(laborMaterials.reduce((sum, item) => sum + item.subtotal, 0)) }} 元</span>
+        </div>
+      </div>
+
+      <!-- 总计部分 -->
+      <div class="total-section">
+        <div class="total-item">
+          <span class="total-label">合计：</span>
+          <span class="total-value">{{ formatDecimal(totalAmount) }} 元</span>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup name="ProductDetail">
+import { ref, computed, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { getProduct } from "@/api/mat/product";
+import { listProductMaterialRelation } from "@/api/mat/productMaterialRelation";
+import { getMaterial } from "@/api/mat/material";
+import { listProductAddition } from "@/api/mat/productAddition";
+import { formatDecimal } from '@/utils/gear';
+
+const router = useRouter();
+const route = useRoute();
+
+const productDetail = ref({});
+const loading = ref(true);
+const materialLoading = ref(false);
+const additionLoading = ref(false);
+
+// 材料明细数据
+const productMaterialRelationList = ref([]);
+
+// 产品附加属性数据
+const productAdditionList = ref([]);
+
+// 计算主材、辅材和工本
+const mainMaterials = computed(() => {
+  // 主材（材料类型为2）
+  return productMaterialRelationList.value
+    .filter(item => item.material && item.material.materialType === 2)
+    .map(item => ({
+      materialName: item.material.materialName,
+      spec: item.material.spec,
+      quantity: item.materialNum + (item.material.unit || ''),
+      price: item.material.unitPrice || 0,
+      subtotal: (item.materialNum * (item.material.unitPrice || 0)) || 0
+    }));
+});
+
+const auxiliaryMaterials = computed(() => {
+  // 辅材（材料类型为1）
+  return productMaterialRelationList.value
+    .filter(item => item.material && item.material.materialType === 1)
+    .map(item => ({
+      materialName: item.material.materialName,
+      spec: item.material.spec,
+      quantity: item.materialNum + (item.material.unit || ''),
+      price: item.material.unitPrice || 0,
+      subtotal: (item.materialNum * (item.material.unitPrice || 0)) || 0
+    }));
+});
+
+const laborMaterials = computed(() => {
+  // 工本（材料类型为3）
+  return productMaterialRelationList.value
+    .filter(item => item.material && item.material.materialType === 3)
+    .map(item => ({
+      materialName: item.material.materialName,
+      spec: item.material.spec,
+      quantity: item.materialNum + (item.material.unit || ''),
+      price: item.material.unitPrice || 0,
+      subtotal: (item.materialNum * (item.material.unitPrice || 0)) || 0
+    }));
+});
+
+// 计算总金额
+const totalAmount = computed(() => {
+  const mainTotal = mainMaterials.value.reduce((sum, item) => sum + item.subtotal, 0);
+  const auxiliaryTotal = auxiliaryMaterials.value.reduce((sum, item) => sum + item.subtotal, 0);
+  const laborTotal = laborMaterials.value.reduce((sum, item) => sum + item.subtotal, 0);
+  return mainTotal + auxiliaryTotal + laborTotal;
+});
+
+// 获取产品详情
+function getProductDetail() {
+  const productId = route.params.id;
+  if (productId) {
+    loading.value = true;
+    getProduct(productId).then(response => {
+      productDetail.value = response.data;
+      loading.value = false;
+      // 获取材料明细
+      getMaterialDetail(productId);
+      // 获取产品附加属性
+      getProductAddition(productId);
+    }).catch(error => {
+      console.error('获取产品详情失败:', error);
+      loading.value = false;
+    });
+  }
+}
+
+// 获取产品附加属性
+function getProductAddition(productId) {
+  additionLoading.value = true;
+  listProductAddition({ productId }).then(response => {
+    productAdditionList.value = response.rows || [];
+    additionLoading.value = false;
+  }).catch(error => {
+    console.error('获取产品附加属性失败:', error);
+    additionLoading.value = false;
+  });
+}
+
+// 获取材料明细
+function getMaterialDetail(productId) {
+  materialLoading.value = true;
+  listProductMaterialRelation({ productId }).then(response => {
+    const relations = response.rows;
+    // 为每个配方项获取物料详细信息，包括物料类型
+    const promises = relations.map(item => {
+      return getMaterial(item.materialId).then(materialResponse => {
+        item.material = materialResponse.data;
+        return item;
+      });
+    });
+    return Promise.all(promises);
+  }).then(relationsWithMaterial => {
+    productMaterialRelationList.value = relationsWithMaterial;
+    materialLoading.value = false;
+  }).catch(error => {
+    console.error('获取材料明细失败:', error);
+    materialLoading.value = false;
+  });
+}
+
+// 返回列表
+function handleBack() {
+  router.back();
+}
+
+onMounted(() => {
+  getProductDetail();
+});
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.product-info {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin: 20px 0;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.label {
+  font-weight: bold;
+  min-width: 80px;
+}
+
+.product-images {
+  margin-top: 20px;
+}
+
+.image-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.material-section {
+  margin: 20px 0;
+}
+
+.section-title {
+  background-color: #f5f7fa;
+  padding: 10px;
+  border-left: 4px solid #409eff;
+  margin-bottom: 10px;
+}
+
+.section-summary {
+  text-align: right;
+  padding: 10px;
+  background-color: #f9f9f9;
+  border-top: 1px solid #e4e7ed;
+  margin-top: -1px;
+  font-weight: bold;
+}
+
+.total-section {
+  margin-top: 30px;
+  padding: 20px;
+  background-color: #f0f9eb;
+  border: 1px solid #b7eb8f;
+  border-radius: 4px;
+}
+
+.total-item {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 20px;
+}
+
+.total-label {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.total-value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #f56c6c;
+}
+</style>
\ No newline at end of file
diff --git a/gear-ui3/src/views/mat/product/index.vue b/gear-ui3/src/views/mat/product/index.vue
index 7a3f2c6..807fca6 100644
--- a/gear-ui3/src/views/mat/product/index.vue
+++ b/gear-ui3/src/views/mat/product/index.vue
@@ -47,12 +47,14 @@
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="产品图片" align="center" prop="productImages">
         <template #default="scope">
-          <div v-if="scope.row.productImages" class="image-preview">
+          <div v-if="scope.row.productImages && scope.row.productImages.trim()" class="image-preview">
             <el-image
               v-for="(image, index) in scope.row.productImages.split(',')"
               :key="index"
               :src="image"
               :preview-src-list="scope.row.productImages.split(',')"
+              :z-index="9999"
+              :preview-teleported="true"
               style="width: 40px; height: 40px; margin-right: 8px;"
             />
           </div>
@@ -64,6 +66,7 @@
           <el-button link type="primary" icon="Plus" @click="handleBom(scope.row)">配方</el-button>
           <el-button link type="primary" icon="View" @click="handleDetail(scope.row)">详情</el-button>
           <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
+          <el-button link type="primary" icon="Setting" @click="handleAddition(scope.row)">附加属性</el-button>
           <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
         </template>
       </el-table-column>
@@ -123,6 +126,36 @@
       <bom :productId="currentProductId" @close="bomOpen = false" />
     </el-dialog>
 
+    <!-- 产品附加属性对话框 -->
+    <el-dialog title="产品附加属性" v-model="additionOpen" width="600px" append-to-body>
+      <div class="addition-container">
+        <el-button type="primary" icon="Plus" @click="addAdditionItem" style="margin-bottom: 10px">添加属性</el-button>
+        <el-table :data="additionList" style="width: 100%" border>
+          <el-table-column prop="attrName" label="属性名" width="150">
+            <template #default="scope">
+              <el-input v-model="scope.row.attrName" placeholder="请输入属性名" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="attrValue" label="属性值">
+            <template #default="scope">
+              <el-input v-model="scope.row.attrValue" placeholder="请输入属性值" />
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="100" align="center">
+            <template #default="scope">
+              <el-button link type="danger" icon="Delete" @click="removeAdditionItem(scope.$index)" />
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="saveAdditions">保存</el-button>
+          <el-button @click="additionOpen = false">取消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
     <!-- 将这个表格改为始终吸底，且外层容器可以拖拽调节高度 -->
     <!-- <StickyDragContainer v-if="currentProduct.productId" :parent-ref="appContainer"> -->
       <div v-if="currentProduct.productId">
@@ -146,190 +179,26 @@
 
     <!-- </StickyDragContainer> -->
 
-    <!-- 产品详情弹窗 -->
-    <el-dialog :title="currentProductDetail.productName + ' - 产品详情'" v-model="detailOpen" width="900px" append-to-body>
-      <!-- 产品信息和图片容器 -->
-      <div class="product-header">
-        <!-- 产品基本信息 -->
-        <div class="product-info">
-          <h3 class="section-title">产品信息</h3>
-          <div class="info-content">
-            <div class="info-row">
-              <span class="label">品名：</span>
-              <span class="value">{{ currentProductDetail.productName }}</span>
-            </div>
-            <div class="info-row">
-              <span class="label">产品规格：</span>
-              <span class="value">{{ currentProductDetail.spec }}</span>
-            </div>
-            <div class="info-row">
-              <span class="label">产品型号：</span>
-              <span class="value">{{ currentProductDetail.model }}</span>
-            </div>
-            <div class="info-row">
-              <span class="label">产品单价：</span>
-              <span class="value">{{ formatDecimal(currentProductDetail.unitPrice) }} 元</span>
-            </div>
-            <div class="info-row">
-              <span class="label">备注：</span>
-              <span class="value">{{ currentProductDetail.remark || '无' }}</span>
-            </div>
-          </div>
-        </div>
 
-        <!-- 产品图片 -->
-        <div class="product-images" v-if="currentProductDetail.productImages">
-          <h3 class="section-title">产品图片</h3>
-          <div class="image-list">
-            <el-image
-              v-for="(image, index) in currentProductDetail.productImages.split(',')"
-              :key="index"
-              :src="image"
-              :preview-src-list="currentProductDetail.productImages.split(',')"
-              style="width: 150px; height: 150px; margin-right: 15px;"
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- 材料明细 -->
-      <div class="material-detail">
-        <h3 class="section-title">材料明细</h3>
-        
-        <!-- 主材部分 -->
-        <div class="material-category" v-if="rawMaterials.length > 0">
-          <h4 class="category-title">主材</h4>
-          <el-table v-loading="materialLoading" :data="rawMaterials" style="width: 100%" border>
-            <el-table-column label="材料名称" width="150">
-              <template #default="scope">
-                <Raw :data="scope.row" :materialId="scope.row.materialId" />
-              </template>
-            </el-table-column>
-            <el-table-column label="材料规格" width="200">
-              <template #default="scope">
-                {{ scope.row.material?.spec || '-' }}
-              </template>
-            </el-table-column>
-            <el-table-column label="数量" width="100" align="center">
-              <template #default="scope">
-                {{ formatDecimal(scope.row.materialNum) }}
-              </template>
-            </el-table-column>
-            <el-table-column label="价格" width="100" align="center">
-              <template #default="scope">
-                {{ formatDecimal(scope.row.material?.unitPrice || 0) }}
-              </template>
-            </el-table-column>
-            <el-table-column label="备注" />
-          </el-table>
-        </div>
-
-        <!-- 辅材部分 -->
-        <div class="material-category" v-if="auxiliaryMaterials.length > 0">
-          <h4 class="category-title">辅材</h4>
-          <el-table v-loading="materialLoading" :data="auxiliaryMaterials" style="width: 100%" border>
-            <el-table-column label="材料名称" width="150">
-              <template #default="scope">
-                <Raw :data="scope.row" :materialId="scope.row.materialId" />
-              </template>
-            </el-table-column>
-            <el-table-column label="材料规格" width="200">
-              <template #default="scope">
-                {{ scope.row.material?.spec || '-' }}
-              </template>
-            </el-table-column>
-            <el-table-column label="数量" width="100" align="center">
-              <template #default="scope">
-                {{ formatDecimal(scope.row.materialNum) }}
-              </template>
-            </el-table-column>
-            <el-table-column label="价格" width="100" align="center">
-              <template #default="scope">
-                {{ formatDecimal(scope.row.material?.unitPrice || 0) }}
-              </template>
-            </el-table-column>
-            <el-table-column label="备注" />
-          </el-table>
-        </div>
-
-        <!-- 无数据提示 -->
-        <div v-if="productMaterialRelationList.length === 0">
-          <el-empty description="暂无配方数据" />
-        </div>
-      </div>
-
-      <!-- 总计部分 -->
-      <div class="total-section">
-        <div class="total-item">
-          <span class="total-label">产品总价：</span>
-          <span class="total-value">{{ formatDecimal(currentProductDetail.unitPrice || 0) }} 元</span>
-        </div>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script setup name="Product">
 import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
 import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/mat/product";
 import { listProductMaterialRelation } from "@/api/mat/productMaterialRelation";
 import { getMaterial } from "@/api/mat/material";
+import { listProductAddition, addProductAddition, updateProductAddition, delProductAddition } from "@/api/mat/productAddition";
 import bom from "@/views/mat/components/bom.vue";
 import StickyDragContainer from "@/components/StickyDragContainer/index.vue";
 import Raw from '@/components/Renderer/Raw.vue';
 import { formatDecimal } from '@/utils/gear';
 import { getToken } from '@/utils/auth';
 
+const router = useRouter();
 const bomOpen = ref(false);
-const detailOpen = ref(false);
-const currentProductDetail = ref({});
-
-// 配方数据
-const productMaterialRelationList = ref([]);
-const materialLoading = ref(false);
-
-// 计算总金额
-const totalAmount = computed(() => {
-  return productMaterialRelationList.value.reduce((sum, item) => {
-    // 假设每个物料都有价格，实际项目中需要从物料数据中获取
-    const price = item.material?.unitPrice || 0;
-    const quantity = item.materialNum || 0;
-    return sum + (price * quantity);
-  }, 0);
-});
-
-// 分离原料和辅料
-const rawMaterials = computed(() => {
-  // 原料（主材）：materialType === 2
-  return productMaterialRelationList.value.filter(item => {
-    return item && item.material && item.material.materialType === 2;
-  });
-});
-
-const auxiliaryMaterials = computed(() => {
-  // 辅料：materialType === 1
-  return productMaterialRelationList.value.filter(item => {
-    return item && item.material && item.material.materialType === 1;
-  });
-});
-
-// 计算原料总金额
-const rawMaterialsTotal = computed(() => {
-  return rawMaterials.value.reduce((sum, item) => {
-    const price = item.material?.unitPrice || 0;
-    const quantity = item.materialNum || 0;
-    return sum + (price * quantity);
-  }, 0);
-});
-
-// 计算辅料总金额
-const auxiliaryMaterialsTotal = computed(() => {
-  return auxiliaryMaterials.value.reduce((sum, item) => {
-    const price = item.material?.unitPrice || 0;
-    const quantity = item.materialNum || 0;
-    return sum + (price * quantity);
-  }, 0);
-});
+const additionOpen = ref(false);
 
 const { proxy } = getCurrentInstance();
 
@@ -347,6 +216,7 @@ const currentProductId = ref(null);
 const currentProduct = ref({});
 const appContainer = ref(null);
 const imageFileList = ref([]);
+const additionList = ref([]);
 const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + '/system/oss/upload');
 const headers = ref({ Authorization: "Bearer " + getToken() });
 
@@ -473,7 +343,8 @@ function handleImageRemove(uploadFile, uploadFiles) {
     const index = images.indexOf(imageUrl);
     if (index > -1) {
       images.splice(index, 1);
-      form.value.productImages = images.join(',');
+      // 当所有图片都被删除时，设置为null而不是空字符串
+      form.value.productImages = images.length > 0 ? images.join(',') : null;
     }
   }
 }
@@ -552,140 +423,73 @@ function handleRowClick(row) {
 }
 
 function handleDetail(row) {
-  loading.value = true;
-  materialLoading.value = true;
-  // 获取产品详情
-  getProduct(row.productId).then(response => {
-    currentProductDetail.value = response.data;
-    // 获取配方数据
-    return listProductMaterialRelation({ productId: row.productId });
-  }).then(response => {
-    const relations = response.rows;
-    // 为每个配方项获取物料详细信息，包括物料类型
-    const promises = relations.map(item => {
-      return getMaterial(item.materialId).then(materialResponse => {
-        item.material = materialResponse.data;
-        return item;
-      });
-    });
-    return Promise.all(promises);
-  }).then(relationsWithMaterial => {
-    productMaterialRelationList.value = relationsWithMaterial;
-    detailOpen.value = true;
-  }).catch(error => {
-    console.error('获取数据失败:', error);
-  }).finally(() => {
-    loading.value = false;
-    materialLoading.value = false;
+  // 跳转到产品详情页
+  router.push(`/mat/product/detail/${row.productId}`);
+}
+
+function handleAddition(row) {
+  currentProductId.value = row.productId;
+  // 清空附加属性列表
+  additionList.value = [];
+  // 获取已有的附加属性数据
+  listProductAddition({ productId: row.productId }).then(response => {
+    if (response.code === 200) {
+      additionList.value = response.rows || [];
+    }
   });
+  additionOpen.value = true;
+}
+
+function addAdditionItem() {
+  additionList.value.push({ attrName: '', attrValue: '' });
+}
+
+function removeAdditionItem(index) {
+  additionList.value.splice(index, 1);
+}
+
+function saveAdditions() {
+  // 过滤掉空的属性项
+  const validAdditions = additionList.value.filter(item => item.attrName && item.attrName.trim());
+  
+  // 保存附加属性
+  validAdditions.forEach(item => {
+    const additionData = {
+      productId: currentProductId.value,
+      attrName: item.attrName.trim(),
+      attrValue: item.attrValue ? item.attrValue.trim() : ''
+    };
+    
+    // 如果有addId，则是更新操作
+    if (item.addId) {
+      additionData.addId = item.addId;
+      // 调用API更新附加属性
+      updateProductAddition(additionData).then(response => {
+        if (response.code === 200) {
+          proxy.$modal.msgSuccess('保存成功');
+        } else {
+          proxy.$modal.msgError('保存失败');
+        }
+      });
+    } else {
+      // 调用API新增附加属性
+      addProductAddition(additionData).then(response => {
+        if (response.code === 200) {
+          proxy.$modal.msgSuccess('保存成功');
+        } else {
+          proxy.$modal.msgError('保存失败');
+        }
+      });
+    }
+  });
+  
+  additionOpen.value = false;
 }
 
 getList();
 </script>
 
 <style scoped>
-/* 产品信息和图片容器 */
-.product-header {
-  display: flex;
-  margin: 20px 0;
-  gap: 30px;
-}
-
-/* 产品图片部分 */
-.product-images {
-  flex-shrink: 0;
-  width: 200px;
-}
-
-.image-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 15px;
-  margin-top: 10px;
-}
-
-/* 产品信息部分 */
-.product-info {
-  flex: 1;
-}
-
-.section-title {
-  font-size: 16px;
-  font-weight: bold;
-  margin-bottom: 15px;
-  padding-bottom: 8px;
-  border-bottom: 2px solid #409eff;
-  color: #303133;
-}
-
-.info-content {
-  padding: 10px 0;
-}
-
-.info-row {
-  margin-bottom: 10px;
-  line-height: 1.5;
-}
-
-.label {
-  font-weight: bold;
-  margin-right: 15px;
-  width: 100px;
-  display: inline-block;
-  color: #606266;
-}
-
-.value {
-  color: #303133;
-}
-
-/* 材料明细部分 */
-.material-detail {
-  margin: 20px 0;
-}
-
-.material-category {
-  margin-bottom: 20px;
-}
-
-.category-title {
-  font-size: 14px;
-  font-weight: bold;
-  margin-bottom: 10px;
-  padding: 8px 15px;
-  background-color: #ecf5ff;
-  color: #409eff;
-  border-left: 4px solid #409eff;
-}
-
-/* 总计部分 */
-.total-section {
-  margin-top: 30px;
-  padding: 20px;
-  background-color: #f0f9eb;
-  border: 1px solid #b7eb8f;
-  border-radius: 4px;
-}
-
-.total-item {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 20px;
-}
-
-.total-label {
-  font-size: 18px;
-  font-weight: bold;
-  color: #606266;
-}
-
-.total-value {
-  font-size: 24px;
-  font-weight: bold;
-  color: #f56c6c;
-}
-
 /* 表格样式 */
 :deep(.el-table th) {
   background-color: #f5f7fa;
@@ -700,4 +504,9 @@ getList();
 :deep(.el-table td) {
   vertical-align: middle;
 }
+
+/* 图片预览层样式 */
+:deep(.el-image-viewer__wrapper) {
+  z-index: 9999 !important;
+}
 </style>