辅材修正，详情页迭代，产品图片加载

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>