fe / yoho-shop-manage · Commits

Go to a project

Authored by htoooth
Commit 922f2a23fc884da2122b96dc6c79ef4ab8ad521c 1 parent 0a73927c

fix

Inline Side-by-side
Showing 2 changed files with 107 additions and 68 deletions
... ... @@ -22,6 +22,7 @@ export default {
columns: [
{
title: '色系名称',
width: 100,
key: 'goodsName',
render(row, col, index) {
return `<div v-if="isExist(${index})">
... ... @@ -33,6 +34,7 @@ export default {
},
{
title: '颜色展示名称',
width: 250,
key: 'factoryGoodsName',
render(row, col, index) {
return `<div v-if="isExist(${index})">
... ... @@ -47,7 +49,7 @@ export default {
{
title: '色卡图片',
key: 'goodsColorImage',
width: 170,
width: 250,
render(row, col, index) {
return `<div
:class="{'upload-item': true ,
... ... @@ -77,6 +79,7 @@ export default {
},
{
title: '款型编码',
width: 250,
key: 'factoryCode',
render(row, col, index) {
return `<div v-if="isExist(${index})">
... ... @@ -91,7 +94,7 @@ export default {
{
title: '尺码',
key: 'sizeId',
width: 80,
width: 150,
render() {
return `<div class="size-id">
<div v-for="size in row.sizeId" class="row-span">
... ... @@ -103,7 +106,7 @@ export default {
{
title: '商品条码',
key: 'sizeCode',
render() {
render(row) {
return `<div class='size-code'>
<div v-for="size,i in row.sizeCode" class="row-span">
<div style="position: relative">
... ... @@ -112,6 +115,7 @@ export default {
v-model="size.name"
:disabled="!row.operator[i].value"
placeholder="请输入..."
style="width: 100%;"
/>
</div>
<div class="size-code-tip" v-if="size.validate && !size.name">
... ... @@ -126,15 +130,26 @@ export default {
}
},
{
title: 'SKU',
key: 'productSku',
width: 150,
render(row) {
return `<div class="prod-sku">
<div v-for="size,i in row.sizeId" class="row-span"> {{size.productSku || '-'}} </div>
</div>`;
}
},
{
title: '操作',
key: 'operator',
width: 100,
width: 150,
render(row, col, index) {
return `<template v-if="isExist(${index})">
<div class="size-operator" v-if="table.data[${index}]">
<div v-for="op,i in table.data[${index}].operator" class="row-span">
<i-button v-if="table.data[${index}].operator[i].value"
type="warning"
style="visibility: hidden"
@click="clickOperator(row, i)">禁用</i-button>
<i-button v-else type="primary"
@click="clickOperator(row, i)">启用</i-button>
... ... @@ -239,6 +254,9 @@ export default {
}
}
.prod-sku {
@include row-span;
}
.size-code {
@include row-span;
... ... @@ -277,4 +295,14 @@ export default {
}
}
.upload-item-error {
border: 1px solid #f30;
}
.upload-item-tip {
padding-top: 6px;
color: #f30;
top: 100%;
}
</style>
... ...
... ... @@ -45,10 +45,15 @@
<span class="create-group-sub-title">（颜色名称只能填写中文，最多5个汉字。款型编码和条码只能填写英文和数字，不区分大小写）</span>
</div>
<Form-item label="颜色">
<CheckboxColor :select-colors="table.defaultSelectedColors" @on-change="selectColor"></CheckboxColor>
<CheckboxColor v-model="colors"
:select-colors="table.defaultSelectedColors" @on-add="addColor" @on-remove="removeColor">
</CheckboxColor>
</Form-item>
<Form-item label="尺寸">
<CheckboxSize :sort-id="this.product.smallSortId" :select-sizes="table.defaultSelectedSizes" @on-change="selectSize"></CheckboxSize>
<CheckboxSize v-model="sizes"
:sort-id="this.product.smallSortId" :select-sizes="table.defaultSelectedSizes"
@on-add="addSize" @on-remove="removeSize">
</CheckboxSize>
</Form-item>
<Form-item>
<TableGoodSize ref="tableGood" v-model="table.data"
... ... @@ -148,7 +153,9 @@ export default {
phrase: [
{ required: true, message: '商品卖点不能为空', trigger: 'blur' }
],
}
},
colors: [],
sizes: []
};
},
created() {
... ... @@ -166,74 +173,75 @@ export default {
});
},
methods: {
selectColor(selectColors) {
this.table.defaultSelectedColors = selectColors;
this.refreshGoods();
},
selectSize(selcetSize) {
this.table.defaultSelectedSizes = selcetSize;
this.refreshGoods();
removeColor(color) {
this.$refs.tableGood.syncData();
let index = this.table.data.findIndex((c) => c.colorId === color.id);
let colorIndex = this.table.defaultSelectedColors.findIndex((c) => c.id === color.id);
if (index !== -1 && colorIndex !== -1) {
this.table.defaultSelectedColors.splice(colorIndex, 1);
this.table.data.splice(index, 1);
this.product.goods.splice(index, 1);
}
},
refreshGoods() {
addColor(color) {
this.$refs.tableGood.syncData();
let rmCidIndex = _.map(this.table.data, (goodColor, index) => {
if (_.some(this.table.defaultSelectedColors, color => color.id === goodColor.colorId)) {
return -1;
}
return index;
}).filter(inx => inx >= 0);
_.remove(this.table.data, (good, index) => _.some(rmCidIndex, inx => inx === index));
_.remove(this.product.goods, (good, index) => _.some(rmCidIndex, inx => inx === index));
_.each(this.table.defaultSelectedColors, color => {
let colorGood = _.find(this.table.data, good => good.colorId === color.id);
if (colorGood) {
let rmSidIndexs = _.map(colorGood.sizeId, (goodSize, index) => {
if (_.some(this.table.defaultSelectedSizes, size => size.id === goodSize.id)) {
return -1;
}
return index;
}).filter(inx => inx >= 0);
this.table.defaultSelectedColors.push(color);
let newGood = {
goodsName: {
name: color.colorName,
isDefault: false,
},
factoryGoodsName: '',
goodsColorImage: {
value: '',
showValidate: false,
validate: false
},
factoryCode: '',
colorId: color.id,
sizeId: [],
sizeCode: [],
operator: []
};
_.each(this.table.defaultSelectedSizes, size => this.addSizeItem(newGood, size));
this.table.data.push(newGood);
this.product.goods.push(service.handleGoods({
goodsName: color.colorName,
productSkn: this.product.productSkn,
factoryGoodsName: ''
}));
},
removeSize(size) {
this.$refs.tableGood.syncData();
_.remove(colorGood.sizeId, (sid, index) => _.some(rmSidIndexs, inx => inx === index));
_.remove(colorGood.sizeCode, (code, index) => _.some(rmSidIndexs, inx => inx === index));
_.remove(colorGood.operator, (op, index) => _.some(rmSidIndexs, inx => inx === index));
let index = this.table.defaultSelectedSizes.findIndex((s) => s.id === size[0].id);
let tableIndex = (this.table.data[0] ? this.table.data[0].sizeId : [])
.findIndex((s) => s.id === size[0].id);
let addSizeList = this.table.defaultSelectedSizes
.filter(size => !_.some(colorGood.sizeId, goodSize => size.id === goodSize.id));
if (index !== -1 && tableIndex !== -1) {
this.table.defaultSelectedSizes.splice(index, 1);
this.table.data.forEach((c) => {
c.sizeId.splice(tableIndex, 1);
c.operator.splice(tableIndex, 1);
c.sizeCode.splice(tableIndex, 1);
});
}
},
addSize(size) {
this.$refs.tableGood.syncData();
_.each(addSizeList, size => this.addSizeItem(colorGood, size));
} else {
let newGood = {
goodsName: {
name: color.colorName,
isDefault: false,
},
factoryGoodsName: '',
goodsColorImage: {
value: '',
showValidate: false,
validate: false
},
factoryCode: '',
colorId: color.id,
sizeId: [],
sizeCode: [],
operator: []
};
this.table.defaultSelectedSizes.push(size[0]);
_.each(this.table.defaultSelectedSizes, size => this.addSizeItem(newGood, size));
this.table.data.push(newGood);
this.product.goods.push(service.handleGoods({
goodsName: color.colorName,
productSkn: this.product.productSkn,
factoryGoodsName: ''
}));
}
this.table.data.forEach((c) => {
this.addSizeItem(c, size[0]);
});
},
addSizeItem(colorGood, size) {
colorGood.sizeId.push({
id: size.id,
... ... @@ -245,7 +253,7 @@ export default {
validate: false
});
colorGood.operator.push({
value: true
value: false
});
},
onChangeFactoryCode(index, code) {
... ... @@ -409,7 +417,10 @@ export default {
let errors = [];
this.table.data.forEach((color) => {
if (!color.goodsColorImage.value) {
// 如果有一个尺码生效，则必须上传封面
let enableCoverOperator = _.some(color.operator, o => o.value);
if (enableCoverOperator && !color.goodsColorImage.value) {
color.goodsColorImage.showValidate = true;
color.goodsColorImage.validate = true;
errors.push({ message: '没有上传封面' });
... ...