update:新增主图修改，副图显示

src/views/product/goodsImg/goodsImgs.vue

@@ -43,10 +43,16 @@
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="55" />
-        <!-- 操作列：编辑 + 新增保存按钮 -->
+        <el-table-column label="操作" width="220">
-        <el-table-column label="操作" width="100">
           <template #default="scope">
-            <!-- 保存按钮：点击提交当前行条码修改 -->
+            <el-button
+              plain
+              size="mini"
+              type="primary"
+              @click="handleEdit(scope.row)"
+            >
+              编辑图片
+            </el-button>
             <el-button
               plain
               size="mini"
@@ -54,7 +60,7 @@
               @click="handleSaveSingle(scope.row)"
               :loading="scope.row.saveLoading"
             >
-              保存
+              保存条码
             </el-button>
           </template>
         </el-table-column>
@@ -85,6 +91,32 @@
             <span v-else class="no-data">无主图</span>
           </template>
         </el-table-column>
+        <el-table-column label="商品副图" width="200px">
+          <template #default="scope">
+            <div class="sub-img-group">
+              <div 
+                v-for="(item, index) in scope.row.product_image_list || []" 
+                :key="item.id || index" 
+                class="sub-img-item"
+              >
+                <el-image
+                  :src="item.imageUrl"
+                  :preview-src-list="[scope.row.thumb, ...(scope.row.product_image_list || []).map(img => img.imageUrl)]"
+                  :preview-index="index + 1"
+                  class="sub-img-thumb"
+                  fit="cover"
+                  :title="`副图${index + 1}`"
+                  @error="() => {
+                    if (scope.row.product_image_list && scope.row.product_image_list[index]) {
+                      scope.row.product_image_list[index].imageUrl = '';
+                    }
+                  }"
+                />
+              </div>
+              <span v-if="!(scope.row.product_image_list && scope.row.product_image_list.length)" class="no-data">无副图</span>
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column label="商品名称" prop="name" width="300">
           <template #default="scope">
             <div class="text-ellipsis" :title="scope.row.name">
@@ -114,15 +146,21 @@
         :disabled="pagination.total === 0"
       />
     </div>
-    <batchEditBarcode ref="batchEditBarcode" @success="handleEditSuccess" />
+    <batchEditBarcode ref="batchEditBarcodeRef" @success="handleEditSuccess" />
+    <img-edit ref="imgEditRef" @success="handleEditSuccess" />
   </div>
 </template>
 
 <script>
 import GoodsToolApi from '@/api/goodsTool'
 import batchEditBarcode from './batchEditBarcode.vue'
+import imgEdit from './imgEdit.vue'
 
 export default {
+  components: {
+    batchEditBarcode,
+    imgEdit
+  },
   data() {
     return {
       tableData: [],
@@ -138,16 +176,14 @@ export default {
         barcodeEmty: '', // 条码是否为空: 'yes'无条码, 'no'有条码
       },
       multipleSelection: [],
+      imgEditRef: null,
+      batchEditBarcodeRef: null,
     }
   },
-  components: {
-    batchEditBarcode,
-  },
   mounted() {
     this.handleImgList()
   },
   methods: {
-    // 表格数据获取
     async handleImgList() {
       try {
         const params = {
@@ -162,21 +198,15 @@ export default {
 
         const res = await GoodsToolApi.getImgList(params)
 
-        // 给每一行添加“保存加载状态”字段，避免重复提交
         this.tableData = (res.records || []).map(item => ({
           ...item,
-          saveLoading: false, // 保存按钮加载状态
+          saveLoading: false,
-          originalBarcode: item.barcode, // 存储原始条码，用于对比是否修改
+          originalBarcode: item.barcode,
         }))
         this.pagination.total = res.total || 0
         this.pagination.pages = res.pages || 0
         this.pagination.current = res.current || 1
 
-        console.log('商品列表数据获取成功', {
-          tableData: this.tableData,
-          pagination: this.pagination,
-          params: params,
-        })
       } catch (error) {
         this.$message.error('获取数据失败，请重试')
         this.tableData = []
@@ -223,7 +253,7 @@ export default {
         this.$message.warning('请先选中需要编辑的商品');
         return;
       }
-      this.$refs.batchEditBarcode.open(this.multipleSelection);
+      this.$refs.batchEditBarcodeRef.open(this.multipleSelection);
     },
 
     // 单条保存（提交当前行条码修改）
@@ -278,9 +308,13 @@ export default {
     // 编辑成功后刷新列表（批量编辑成功后调用）
     handleEditSuccess() {
       this.handleImgList();
-      this.$refs.imgTable.clearSelection();
+      this.$refs.imgTable?.clearSelection();
       this.multipleSelection = [];
     },
+    
+    handleEdit(row) {
+        this.$refs.imgEditRef?.open(row);
+    },
   },
 }
 </script>
@@ -335,7 +369,6 @@ export default {
   font-size: 12px;
 }
 
-// 调整条码输入框样式，使其更贴合表格
 .barcode-input {
   width: 100%;
 }
@@ -348,4 +381,24 @@ export default {
   margin-top: 10px;
   text-align: right;
 }
+
+.sub-img-group {
+  display: flex;          
+  flex-wrap: nowrap;      
+  gap: 4px;               
+  align-items: center;
+  overflow-x: auto;       // 如果太多图允许横向滚动
+}
+
+.sub-img-item {
+  flex: 0 0 auto;         
+}
+
+.sub-img-thumb {
+  width:  46px;
+  height: 46px;
+  border-radius: 3px;
+  object-fit: cover;
+  cursor: pointer;
+}
 </style>

src/views/product/goodsImg/imgEdit.vue

@@ -0,0 +1,356 @@
+<template>
+  <el-dialog
+    title="编辑商品图片"
+    :visible.sync="visible"
+    width="800px"
+    :close-on-click-modal="false"
+    @close="handleClose"
+  >
+     <div class="edit-tip">
+    正在编辑商品: <strong>{{ formData.name }}</strong> 
+    (条码: {{ formData.barcode || '无条码' }})
+  </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="上传新主图"
+        prop="newThumb"
+        :rules="[
+          { required: true, message: '请上传新的商品主图', trigger: 'change' }
+        ]"
+      >
+        <upload
+            height="100px"
+            :image="formData.newThumb"
+            width="100px"
+            @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="商品副图">
+        <div class="sub-images-container">
+      <div v-for="(item, index) in formData.product_image_list" :key="item.id || index" class="sub-image-item">
+        <upload
+          v-if="item.uploadNew"
+          height="80px"
+          :image="item.newImageUrl || item.imageUrl"
+          width="80px"
+          @upImage="(url) => handleSubImageUpload(url, index)"
+        />
+        <el-image
+          v-else
+          :src="item.imageUrl"
+          style="width: 80px; height: 80px; object-fit: cover; border: 1px solid #eee;"
+          :preview-src-list="[formData.thumb, ...getSubImages(formData.product_image_list)]"
+          :preview-index="index + 1"
+        />
+        <div class="sub-img-actions">
+          <el-button 
+            size="mini" 
+            type="text" 
+            icon="el-icon-edit" 
+            @click="toggleEditSubImage(index)"
+          />
+          <el-button 
+            size="mini" 
+            type="text" 
+            icon="el-icon-delete" 
+            @click="deleteSubImage(index)"
+          />
+        </div>
+      </div>
+
+          <div class="add-sub-image" @click="addSubImage">
+            <i class="el-icon-plus" />
+            <span>添加副图</span>
+          </div>
+        </div>
+      </el-form-item> -->
+    </el-form>
+
+    <template #footer>
+      <el-button @click="handleClose">{{ __('取消') }}</el-button>
+      <el-button type="primary" @click="handleSubmit">{{ __('提交修改') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import upload from '@/components/upload'
+import { URL } from '@/config'
+import { saveBatchBarcode } from '@/api/goodsTool';
+
+export default {
+  name: 'ImgEdit',
+  components: { 
+    upload
+  },
+  data() {
+    return {
+      visible: false,
+      formData: {
+        id: '',
+        name: '',
+        barcode: '', // 条码
+        thumb: '',
+        newThumb: '',
+        product_image_list: [],
+        original_product_image_list: [], // 保存原始副图数据
+        original_thumb: '' // 保存原始主图数据
+      },
+    }
+  },
+  methods: {
+    // 获取副图URL列表用于预览
+    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();
+    });
+  },
+
+    handleClose() {
+      this.visible = false;
+      this.formData = {
+        id: '',
+        name: '',
+        thumb: '',
+        newThumb: '',
+        product_image_list: [],
+        original_product_image_list: [],
+        original_thumb: ''
+      };
+      this.$refs.editForm?.clearValidate();
+    },
+
+    // 主图上传
+    handleMainImageUpload(imageUrl) {
+      this.formData.newThumb = imageUrl;
+    },
+
+    //副图上传
+    handleSubImageUpload(imageUrl, index) {
+      if (this.formData.product_image_list[index]) {
+        const item = this.formData.product_image_list[index];
+        item.newImageUrl = imageUrl;
+        item.imageUrl = imageUrl; // 更新最终显示URL
+        item.uploadNew = false; // 退出编辑状态
+        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
+      });
+    },
+
+    async handleSubmit() {
+      try {
+        await this.$refs.editForm.validate();
+
+        // 准备提交数据 - 保持不变的字段使用原始数据
+        const submitData = [
+          {
+            id: this.formData.id,
+            name: this.formData.name,
+            // 主图：使用新上传的或原始的
+            thumb: this.formData.newThumb || this.formData.original_thumb,
+            // 副图：如果没有修改则使用原始数据，否则使用修改后的数据
+            product_image_list: this.hasSubImagesChanged() 
+              ? this.formData.product_image_list.filter(item => item.imageUrl).map((item, index) => ({
+                  id: item.id,
+                  productId: this.formData.id,
+                  imageUrl: item.imageUrl,
+                  isMain: false,
+                  seq: index + 1,
+                  status: 1
+                }))
+              : this.formData.original_product_image_list
+          }
+        ];
+
+        console.log('提交更新商品图片请求:', submitData);
+        const response = await saveBatchBarcode(submitData);
+
+        if (response.status === 200) {
+          this.$message.success('商品图片修改成功！');
+          this.handleClose();
+          this.$emit('success');
+        } else {
+          this.$message.error('修改失败: ' + (response.msg || '未知错误'));
+        }
+      } catch (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;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.edit-tip {
+  color: #666;
+  padding: 8px 12px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  margin-bottom: 16px;
+  font-size: 13px;
+}
+
+.sub-images-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  padding: 10px 0;
+  
+  .sub-image-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 5px;
+    
+    .sub-img-actions {
+      display: flex;
+      gap: 5px;
+      
+      .el-button {
+        color: #666;
+        padding: 0;
+        
+        &:hover {
+          color: #409eff;
+        }
+      }
+      
+      .el-button:nth-child(2):hover {
+        color: #f56c6c;
+      }
+    }
+  }
+  
+  .add-sub-image {
+    width: 80px;
+    height: 80px;
+    border: 1px dashed #ccc;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: #999;
+    
+    .el-icon-plus {
+      font-size: 20px;
+      margin-bottom: 5px;
+    }
+    
+    &:hover {
+      border-color: #409eff;
+      color: #409eff;
+    }
+  }
+}
+
+::v-deep .el-form-item { 
+  margin-bottom: 20px; 
+}
+</style>