update:新增主图修改，副图显示
This commit is contained in:
lihaoyuan
parent
cedc139f62
commit
33538a3aaa
@ -43,10 +43,16 @@
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<!-- 操作列：编辑 + 新增保存按钮 -->
|
||||
<el-table-column label="操作" width="100">
|
||||
<el-table-column label="操作" width="220">
|
||||
<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>
|
||||
@ -66,8 +72,8 @@
|
||||
clearable
|
||||
size="small"
|
||||
class="barcode-input"
|
||||
:disabled="scope.row.saveLoading"
|
||||
@change="handleBarcodeChange(scope.row)"
|
||||
:disabled="scope.row.saveLoading"
|
||||
@change="handleBarcodeChange(scope.row)"
|
||||
/>
|
||||
</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, // 保存按钮加载状态
|
||||
originalBarcode: item.barcode, // 存储原始条码，用于对比是否修改
|
||||
saveLoading: false,
|
||||
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>
|
||||
356
src/views/product/goodsImg/imgEdit.vue
Normal file
356
src/views/product/goodsImg/imgEdit.vue
Normal file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user