update:修改副图新增和副图修改逻辑

src/views/product/goodsImg/imgEdit.vue

@@ -6,81 +6,79 @@
     :close-on-click-modal="false"
     @close="handleClose"
   >
-     <div class="edit-tip">
+    <div class="edit-tip">
-    正在编辑商品: <strong>{{ formData.name }}</strong> 
+      正在编辑商品: <strong>{{ formData.name }}</strong> 
-    (条码: {{ formData.barcode || '无条码' }})
+      (条码: {{ formData.barcode || '无条码' }})
-  </div>
+    </div>
 
     <el-form ref="editForm" :model="formData" label-width="100px" label-position="right">
       <!-- 主图编辑 -->
-      <!-- <el-form-item label="当前主图">
-        <el-image
-          v-if="formData.thumb"
-          :src="formData.thumb"
-          style="width: 100px; height: 100px; object-fit: cover; border: 1px solid #eee;"
-          :preview-src-list="[formData.thumb, ...getSubImages(formData.product_image_list)]"
-        />
-        <span v-else class="text-gray-500">暂无主图</span>
-      </el-form-item> -->
-
       <el-form-item
-        label="上传新主图"
+        label="商品主图"
         prop="newThumb"
         :rules="[
-          { required: true, message: '请上传新的商品主图', trigger: 'change' }
+          { required: true, message: '请上传商品主图', trigger: 'change' }
         ]"
       >
         <upload
-            height="100px"
+          height="100px"
-            :image="formData.newThumb"
+          :image="formData.newThumb"
-            width="100px"
+          width="100px"
-            @upImage="handleMainImageUpload"
+          @upImage="handleMainImageUpload"
         />
         <div class="el-form-item__error" style="padding-top: 10px;">
           <span>支持 JPG, PNG 格式，建议尺寸 800x800px</span>
         </div>
       </el-form-item>
 
-      <!-- 副图编辑 -->
+      <el-form-item label="商品副图">
-      <!-- <el-form-item label="商品副图">
         <div class="sub-images-container">
-      <div v-for="(item, index) in formData.product_image_list" :key="item.id || index" class="sub-image-item">
+          <!-- 副图列表 -->
-        <upload
+          <div v-for="(item, index) in formData.product_image_list" :key="item.id || `sub_${index}`" class="sub-image-item">
-          v-if="item.uploadNew"
+            <el-image
-          height="80px"
+              :src="item.imageUrl"
-          :image="item.newImageUrl || item.imageUrl"
+              style="width: 80px; height: 80px; object-fit: cover; border: 1px solid #eee;"
-          width="80px"
+              :preview-src-list="[formData.thumb, ...getSubImages(formData.product_image_list)]"
-          @upImage="(url) => handleSubImageUpload(url, index)"
+              :preview-index="index + 1"
-        />
+            />
-        <el-image
+            <div class="sub-img-actions">
-          v-else
+              <el-button 
-          :src="item.imageUrl"
+                size="mini" 
-          style="width: 80px; height: 80px; object-fit: cover; border: 1px solid #eee;"
+                type="text" 
-          :preview-src-list="[formData.thumb, ...getSubImages(formData.product_image_list)]"
+                icon="el-icon-edit" 
-          :preview-index="index + 1"
+                @click="handleEditSubImage(index)"
-        />
+                title="更换图片"
-        <div class="sub-img-actions">
+              />
-          <el-button 
+            </div>
-            size="mini" 
+            <!-- 现有副图的隐藏上传组件 -->
-            type="text" 
+            <upload
-            icon="el-icon-edit" 
+              ref="subImageUploadRefs"
-            @click="toggleEditSubImage(index)"
+              class="sub-image-uploader"
-          />
+              height="80px"
-          <el-button 
+              width="80px"
-            size="mini" 
+              :image="item.imageUrl"
-            type="text" 
+              @upImage="(url) => handleSubImageUpload(url, index)"
-            icon="el-icon-delete" 
+            />
-            @click="deleteSubImage(index)"
+          </div>
-          />
-        </div>
-      </div>
 
-          <div class="add-sub-image" @click="addSubImage">
+          <!-- 新增副图按钮-->
+          <div class="add-sub-image" @click="handleAddSubImage">
             <i class="el-icon-plus" />
             <span>添加副图</span>
           </div>
+          
+          <!-- 新增副图专用的隐藏上传组件 -->
+          <upload
+            ref="newSubImageUpload"
+            class="sub-image-uploader"
+            height="80px"
+            width="80px"
+            :image="''"
+            @upImage="handleNewSubImageUpload"
+            v-show="false"
+          />
         </div>
-      </el-form-item> -->
+      </el-form-item>
     </el-form>
 
     <template #footer>
@@ -106,13 +104,14 @@ export default {
       formData: {
         id: '',
         name: '',
-        barcode: '', // 条码
+        barcode: '',
         thumb: '',
         newThumb: '',
         product_image_list: [],
-        original_product_image_list: [], // 保存原始副图数据
+        original_product_image_list: [],
-        original_thumb: '' // 保存原始主图数据
+        original_thumb: ''
       },
+      currentEditingSubImageIndex: -1 // 记录当前编辑的现有副图索引
     }
   },
   methods: {
@@ -120,41 +119,41 @@ export default {
     getSubImages(imageList) {
       return (imageList || []).map(item => item.imageUrl).filter(url => url);
     },
-  // 子组件open方法
-  open(row) {
-    if (!row || !row.id) {
-      this.$message.error('无效的商品数据');
-      return;
-    }
-    
-    // 保存原始数据
-    const originalProductImages = JSON.parse(JSON.stringify(row.product_image_list || []));
-    const originalThumb = row.thumb || '';
-    
-    // 初始化表单数据（添加barcode）
-    this.formData = {
-      id: row.id,
-      name: row.name || '未知名称',
-      barcode: row.barcode || '', // 新增条码字段
-      thumb: originalThumb,
-      newThumb: originalThumb,
-      original_thumb: originalThumb,
-      product_image_list: originalProductImages.map(item => ({
-        ...item,
-        uploadNew: false,
-        newImageUrl: ''
-      })),
-      original_product_image_list: originalProductImages
-    };
-    
-    this.visible = true;
-    this.$nextTick(() => {
-      this.$refs.editForm?.clearValidate();
-    });
-  },
 
+    // 打开编辑弹窗
+    open(row) {
+      if (!row || !row.id) {
+        this.$message.error('无效的商品数据');
+        return;
+      }
+      
+      const originalProductImages = JSON.parse(JSON.stringify(row.product_image_list || []));
+      const originalThumb = row.thumb || '';
+      
+      this.formData = {
+        id: row.id,
+        name: row.name || '未知名称',
+        barcode: row.barcode || '',
+        thumb: originalThumb,
+        newThumb: originalThumb,
+        original_thumb: originalThumb,
+        product_image_list: originalProductImages.map(item => {
+          const { id, productId, imageUrl, seq, status, createdAt, updatedAt } = item;
+          return { id, productId, imageUrl, seq, status, createdAt, updatedAt };
+        }),
+        original_product_image_list: originalProductImages
+      };
+      
+      this.visible = true;
+      this.$nextTick(() => {
+        this.$refs.editForm?.clearValidate();
+      });
+    },
+
+    // 关闭弹窗重置数据
     handleClose() {
       this.visible = false;
+      this.currentEditingSubImageIndex = -1;
       this.formData = {
         id: '',
         name: '',
@@ -172,80 +171,97 @@ export default {
       this.formData.newThumb = imageUrl;
     },
 
-    //副图上传
+    // 编辑现有副图 - 触发对应上传组件
-    handleSubImageUpload(imageUrl, index) {
+    handleEditSubImage(index) {
-      if (this.formData.product_image_list[index]) {
+      this.currentEditingSubImageIndex = index;
-        const item = this.formData.product_image_list[index];
+      this.$nextTick(() => {
-        item.newImageUrl = imageUrl;
+        const uploadRefs = this.$refs.subImageUploadRefs;
-        item.imageUrl = imageUrl; // 更新最终显示URL
+        const uploadComp = Array.isArray(uploadRefs) ? uploadRefs[index] : uploadRefs;
-        item.uploadNew = false; // 退出编辑状态
+        this.triggerUploadComp(uploadComp);
-        item.tmpUrl = ''; // 清空临时URL
-      }
-    },
-
-    // 切换编辑副图状态
-    toggleEditSubImage(idx) {
-      const item = this.formData.product_image_list[idx];
-      if (item.uploadNew) {
-        // 取消编辑：恢复原始URL
-        if (item.tmpUrl) {
-          item.imageUrl = item.tmpUrl;
-          item.tmpUrl = ''; // 清空临时URL
-        }
-        item.newImageUrl = '';
-      } else {
-        // 进入编辑：保存当前URL到临时变量
-        item.tmpUrl = item.imageUrl;
-      }
-      item.uploadNew = !item.uploadNew;
-    },
-
-    // 删除副图
-    deleteSubImage(index) {
-      this.formData.product_image_list.splice(index, 1);
-    },
-
-    addSubImage() {
-      const max = this.formData.product_image_list.reduce((p, c) => Math.max(p, c.seq || 0), 0);
-      this.formData.product_image_list.push({
-        id: null,
-        productId: this.formData.id,
-        imageUrl: '',
-        newImageUrl: '',
-        uploadNew: true, // 默认进入编辑状态
-        tmpUrl: '', // 初始化临时URL
-        isMain: false,
-        seq: max + 1,
-        status: 1
       });
     },
 
+    // 点击"添加副图" - 触发新增专用上传组件
+    handleAddSubImage() {
+      this.$nextTick(() => {
+        const uploadComp = this.$refs.newSubImageUpload;
+        this.triggerUploadComp(uploadComp);
+      });
+    },
+
+    // 通用触发上传组件的方法（兼容不同upload组件实现）
+    triggerUploadComp(uploadComp) {
+      if (!uploadComp) return;
+      
+      // 优先调用组件暴露的open方法（如果有）
+      if (typeof uploadComp.open === 'function') {
+        uploadComp.open();
+      } 
+      // 兼容通过input触发
+      else if (uploadComp.$el) {
+        const fileInput = uploadComp.$el.querySelector('input[type="file"]');
+        if (fileInput) {
+          fileInput.click();
+        } else {
+          this.$message.warning('上传组件初始化中，请稍候');
+        }
+      }
+    },
+
+    // 现有副图上传完成 - 只替换URL，保留ID等信息
+    handleSubImageUpload(imageUrl, index) {
+      if (this.formData.product_image_list[index]) {
+        this.formData.product_image_list[index].imageUrl = imageUrl;
+        this.$message.success('副图更新成功');
+        this.currentEditingSubImageIndex = -1;
+      }
+    },
+
+    // 新增副图上传完成 - 上传成功后才创建副图条目
+    handleNewSubImageUpload(imageUrl) {
+      if (!imageUrl) {
+        this.$message.warning('请选择有效的图片');
+        return;
+      }
+      
+      // 计算新的排序值
+      const maxSeq = this.formData.product_image_list.reduce((p, c) => Math.max(p, c.seq || 0), 0);
+      
+      // 创建新的副图条目（ID为null，由后端生成）
+      this.formData.product_image_list.push({
+        id: null,
+        productId: this.formData.id,
+        imageUrl: imageUrl, // 直接用上传后的URL
+        seq: maxSeq + 1,
+        status: 1,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString()
+      });
+      
+      this.$message.success('新增副图成功');
+    },
+
+    // 提交保存
     async handleSubmit() {
       try {
         await this.$refs.editForm.validate();
 
-        // 准备提交数据 - 保持不变的字段使用原始数据
         const submitData = [
           {
             id: this.formData.id,
             name: this.formData.name,
-            // 主图：使用新上传的或原始的
+            barcode: this.formData.barcode,
             thumb: this.formData.newThumb || this.formData.original_thumb,
-            // 副图：如果没有修改则使用原始数据，否则使用修改后的数据
+            product_image_list: this.formData.product_image_list
-            product_image_list: this.hasSubImagesChanged() 
+              .filter(item => item.imageUrl)
-              ? this.formData.product_image_list.filter(item => item.imageUrl).map((item, index) => ({
+              .map((item, index) => ({
-                  id: item.id,
+                ...item,
-                  productId: this.formData.id,
+                seq: index + 1 // 重新排序
-                  imageUrl: item.imageUrl,
+              }))
-                  isMain: false,
-                  seq: index + 1,
-                  status: 1
-                }))
-              : this.formData.original_product_image_list
           }
         ];
 
-        console.log('提交更新商品图片请求:', submitData);
+        console.log('提交数据:', submitData);
         const response = await saveBatchBarcode(submitData);
 
         if (response.status === 200) {
@@ -256,30 +272,25 @@ export default {
           this.$message.error('修改失败: ' + (response.msg || '未知错误'));
         }
       } catch (error) {
-        console.error('提交修改失败:', error);
+        console.error('提交失败:', error);
         if (error.name !== 'ValidateError') {
           this.$message.error('修改失败，请稍后重试');
         }
       }
     },
 
-    // 判断副图是否有修改
+    // 判断副图是否修改
     hasSubImagesChanged() {
-      // 如果副图数量不同，说明有修改
       if (this.formData.product_image_list.length !== this.formData.original_product_image_list.length) {
         return true;
       }
-      
-      // 检查每张图片是否有修改
       for (let i = 0; i < this.formData.product_image_list.length; i++) {
         const newItem = this.formData.product_image_list[i];
         const originalItem = this.formData.original_product_image_list[i];
-        
         if (!originalItem || newItem.imageUrl !== originalItem.imageUrl) {
           return true;
         }
       }
-      
       return false;
     }
   }
@@ -311,20 +322,17 @@ export default {
     .sub-img-actions {
       display: flex;
       gap: 5px;
-      
       .el-button {
         color: #666;
         padding: 0;
-        
+        &:hover { color: #409eff; }
-        &:hover {
-          color: #409eff;
-        }
-      }
-      
-      .el-button:nth-child(2):hover {
-        color: #f56c6c;
       }
     }
+    
+    // 隐藏所有上传组件，只通过按钮触发
+    .sub-image-uploader {
+      display: none !important;
+    }
   }
   
   .add-sub-image {