From 294aa013e4382c9a0c2a33941dc5f72bccff4bc4 Mon Sep 17 00:00:00 2001
From: lihaoyuan <18278596806@163.com>
Date: Tue, 23 Dec 2025 09:08:11 +0800
Subject: [PATCH] =?UTF-8?q?update:=E4=BF=AE=E6=94=B9=E5=89=AF=E5=9B=BE?=
=?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=92=8C=E5=89=AF=E5=9B=BE=E4=BF=AE=E6=94=B9?=
=?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/product/goodsImg/imgEdit.vue | 336 +++++++++++++------------
1 file changed, 172 insertions(+), 164 deletions(-)
diff --git a/src/views/product/goodsImg/imgEdit.vue b/src/views/product/goodsImg/imgEdit.vue
index d37bf3d..fa8c86c 100644
--- a/src/views/product/goodsImg/imgEdit.vue
+++ b/src/views/product/goodsImg/imgEdit.vue
@@ -6,81 +6,79 @@
:close-on-click-modal="false"
@close="handleClose"
>
-
- 正在编辑商品: {{ formData.name }}
- (条码: {{ formData.barcode || '无条码' }})
-
+
+ 正在编辑商品: {{ formData.name }}
+ (条码: {{ formData.barcode || '无条码' }})
+
-
-
支持 JPG, PNG 格式，建议尺寸 800x800px
-
-
+
-
- -->
+
@@ -106,13 +104,14 @@ export default {
formData: {
id: '',
name: '',
- barcode: '', // 条码
+ barcode: '',
thumb: '',
newThumb: '',
product_image_list: [],
- original_product_image_list: [], // 保存原始副图数据
- original_thumb: '' // 保存原始主图数据
+ original_product_image_list: [],
+ 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) {
- 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
+ // 编辑现有副图 - 触发对应上传组件
+ handleEditSubImage(index) {
+ this.currentEditingSubImageIndex = index;
+ this.$nextTick(() => {
+ const uploadRefs = this.$refs.subImageUploadRefs;
+ const uploadComp = Array.isArray(uploadRefs) ? uploadRefs[index] : uploadRefs;
+ this.triggerUploadComp(uploadComp);
});
},
+ // 点击"添加副图" - 触发新增专用上传组件
+ 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.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
+ product_image_list: this.formData.product_image_list
+ .filter(item => item.imageUrl)
+ .map((item, index) => ({
+ ...item,
+ seq: index + 1 // 重新排序
+ }))
}
];
- 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;
- }
- }
-
- .el-button:nth-child(2):hover {
- color: #f56c6c;
+ &:hover { color: #409eff; }
}
}
+
+ // 隐藏所有上传组件，只通过按钮触发
+ .sub-image-uploader {
+ display: none !important;
+ }
}
.add-sub-image {