|
@@ -318,17 +318,23 @@
|
|
|
<el-form-item label="商品属性:" class="labeltop">
|
|
<el-form-item label="商品属性:" class="labeltop">
|
|
|
|
|
|
|
|
<el-table :data="manyFormValidate" size="small" style="width: 90%;">
|
|
<el-table :data="manyFormValidate" size="small" style="width: 90%;">
|
|
|
- <el-table-column type="myindex" v-for="(item,index) in form.header" :key="index" :width="item.minWidth" :label="item.title" :property="item.slot" align="center">
|
|
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ v-for="(item,index) in manyTableColumns"
|
|
|
|
|
+ :key="item.slot || index"
|
|
|
|
|
+ :min-width="item.minWidth"
|
|
|
|
|
+ :width="item.width"
|
|
|
|
|
+ :label="item.title"
|
|
|
|
|
+ :prop="item.slot"
|
|
|
|
|
+ :property="item.slot"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ >
|
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
|
<div v-if="scope.column.property == 'image'" align="center">
|
|
<div v-if="scope.column.property == 'image'" align="center">
|
|
|
<single-img v-model="scope.row[scope.column.property]" type="image" :num="1" :width="60" :height="60" />
|
|
<single-img v-model="scope.row[scope.column.property]" type="image" :num="1" :width="60" :height="60" />
|
|
|
</div>
|
|
</div>
|
|
|
- <div v-else-if="scope.column.property.indexOf('value') != -1" align="center">
|
|
|
|
|
|
|
+ <div v-else-if="scope.column.property && scope.column.property.indexOf('value') === 0" align="center">
|
|
|
{{ scope.row[scope.column.property] }}
|
|
{{ scope.row[scope.column.property] }}
|
|
|
</div>
|
|
</div>
|
|
|
- <div v-else-if="scope.column.property == 'action'" align="center" >
|
|
|
|
|
- <a @click="delAttrTable(scope.$index)" align="center">删除</a>
|
|
|
|
|
- </div>
|
|
|
|
|
<div v-else-if="scope.column.property == 'taxRate'" align="center">
|
|
<div v-else-if="scope.column.property == 'taxRate'" align="center">
|
|
|
<el-input
|
|
<el-input
|
|
|
v-model="scope.row.taxRate"
|
|
v-model="scope.row.taxRate"
|
|
@@ -337,17 +343,13 @@
|
|
|
/>
|
|
/>
|
|
|
</div>
|
|
</div>
|
|
|
<div v-else align="center">
|
|
<div v-else align="center">
|
|
|
- <el-input v-model="scope.row[scope.column.property]" align="center" />
|
|
|
|
|
|
|
+ <el-input v-model="scope.row[scope.column.property]" align="center" />
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
- <el-table-column prop="taxRate" label="税率" align="center" width="150">
|
|
|
|
|
|
|
+ <el-table-column label="操作" fixed="right" width="80" align="center">
|
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
|
- <el-input
|
|
|
|
|
- v-model="scope.row.taxRate"
|
|
|
|
|
- placeholder="请输入税率"
|
|
|
|
|
- @input="handleTaxRateInput($event, scope.row)"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <el-button type="text" size="mini" @click="delAttrTable(scope.$index)">删除</el-button>
|
|
|
</template>
|
|
</template>
|
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
</el-table>
|
|
</el-table>
|
|
@@ -663,6 +665,8 @@ export default {
|
|
|
ruleList:[],
|
|
ruleList:[],
|
|
|
// 多规格表格data
|
|
// 多规格表格data
|
|
|
manyFormValidate: [],
|
|
manyFormValidate: [],
|
|
|
|
|
+ // 编辑请求序号,用于忽略过期的异步回调
|
|
|
|
|
+ editSeq: 0,
|
|
|
// 单规格表格data
|
|
// 单规格表格data
|
|
|
oneFormValidate: [
|
|
oneFormValidate: [
|
|
|
{
|
|
{
|
|
@@ -766,6 +770,12 @@ export default {
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
computed:{
|
|
computed:{
|
|
|
|
|
+ manyTableColumns() {
|
|
|
|
|
+ if (!this.form.header || !this.form.header.length) {
|
|
|
|
|
+ return [];
|
|
|
|
|
+ }
|
|
|
|
|
+ return this.form.header.filter(item => item.slot !== 'action');
|
|
|
|
|
+ },
|
|
|
warehouseModel:{
|
|
warehouseModel:{
|
|
|
get(){
|
|
get(){
|
|
|
return this.form.warehouseId;
|
|
return this.form.warehouseId;
|
|
@@ -846,10 +856,101 @@ export default {
|
|
|
this.download(response.msg);
|
|
this.download(response.msg);
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
- // 删除表格中的属性
|
|
|
|
|
|
|
+ // 删除表格中的属性行(仅前端列表,保存时提交剩余行)
|
|
|
delAttrTable (index) {
|
|
delAttrTable (index) {
|
|
|
this.manyFormValidate.splice(index, 1);
|
|
this.manyFormValidate.splice(index, 1);
|
|
|
},
|
|
},
|
|
|
|
|
+ resetSpecState() {
|
|
|
|
|
+ this.attrs = [];
|
|
|
|
|
+ this.manyFormValidate = [];
|
|
|
|
|
+ this.$set(this.form, 'header', []);
|
|
|
|
|
+ this.createBnt = true;
|
|
|
|
|
+ this.showIput = false;
|
|
|
|
|
+ this.clearAttr();
|
|
|
|
|
+ },
|
|
|
|
|
+ buildSpecHeaderFromAttrs(attrs) {
|
|
|
|
|
+ const align = 'center';
|
|
|
|
|
+ const valueHeaders = (attrs || []).map((attr, index) => ({
|
|
|
|
|
+ title: attr.value,
|
|
|
|
|
+ minWidth: '130',
|
|
|
|
|
+ align,
|
|
|
|
|
+ key: 'value' + (index + 1),
|
|
|
|
|
+ slot: 'value' + (index + 1)
|
|
|
|
|
+ }));
|
|
|
|
|
+ const fixedHeaders = [
|
|
|
|
|
+ { title: '图片', slot: 'image', align, minWidth: 80 },
|
|
|
|
|
+ { title: '售价', slot: 'price', align, minWidth: 120 },
|
|
|
|
|
+ { title: '代理价', slot: 'agentPrice', align, minWidth: 120 },
|
|
|
|
|
+ { title: '成本价', slot: 'cost', align, minWidth: 140 },
|
|
|
|
|
+ { title: '原价', slot: 'otPrice', align, minWidth: 140 },
|
|
|
|
|
+ { title: '库存', slot: 'stock', align, minWidth: 140 },
|
|
|
|
|
+ { title: '商品编号', slot: 'barCode', align, minWidth: 140 },
|
|
|
|
|
+ { title: '组合编号', slot: 'groupBarCode', align, minWidth: 200 },
|
|
|
|
|
+ { title: '重量(KG)', slot: 'weight', align, minWidth: 140 },
|
|
|
|
|
+ { title: '体积(m³)', slot: 'volume', align, minWidth: 140 },
|
|
|
|
|
+ { title: '所需积分', slot: 'integral', align, minWidth: 140 },
|
|
|
|
|
+ { title: '一级返佣', slot: 'brokerage', align, minWidth: 140 },
|
|
|
|
|
+ { title: '二级返佣', slot: 'brokerageTwo', align, minWidth: 140 },
|
|
|
|
|
+ { title: '三级返佣', slot: 'brokerageThree', align, minWidth: 140 }
|
|
|
|
|
+ ];
|
|
|
|
|
+ return valueHeaders.concat(fixedHeaders);
|
|
|
|
|
+ },
|
|
|
|
|
+ parseAttrsFromResponse(attrList) {
|
|
|
|
|
+ this.attrs = [];
|
|
|
|
|
+ if (!attrList || !attrList.length) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ attrList.forEach(item => {
|
|
|
|
|
+ this.attrs.push({
|
|
|
|
|
+ value: item.attrName,
|
|
|
|
|
+ detail: item.attrValues ? item.attrValues.split(',') : []
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ // 编辑多规格:同步用数据库 values 填表,避免再次打开时表头/数据空白
|
|
|
|
|
+ loadMultiSpecTable(attrs, values, seq) {
|
|
|
|
|
+ if (seq !== undefined && seq !== this.editSeq) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ const safeAttrs = attrs || [];
|
|
|
|
|
+ this.$set(this.form, 'header', this.buildSpecHeaderFromAttrs(safeAttrs));
|
|
|
|
|
+ if (values && values.length > 0) {
|
|
|
|
|
+ this.manyFormValidate = values.map(v => this.mapAttrValueToRow(v, safeAttrs));
|
|
|
|
|
+ } else if (safeAttrs.length > 0) {
|
|
|
|
|
+ this.manyFormValidate = [];
|
|
|
|
|
+ this.generate();
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.manyFormValidate = [];
|
|
|
|
|
+ }
|
|
|
|
|
+ this.createBnt = true;
|
|
|
|
|
+ },
|
|
|
|
|
+ loadEditorContent() {
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ if (!this.$refs.myeditor) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ this.$refs.myeditor.setText(this.form.description || '');
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ mapAttrValueToRow(value, attrs) {
|
|
|
|
|
+ const row = Object.assign({}, value);
|
|
|
|
|
+ if (value.detail && typeof value.detail === 'object') {
|
|
|
|
|
+ attrs.forEach((attr, index) => {
|
|
|
|
|
+ const key = 'value' + (index + 1);
|
|
|
|
|
+ if (value.detail[attr.value] !== undefined) {
|
|
|
|
|
+ row[key] = value.detail[attr.value];
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ const skuParts = (value.sku || '').split(',');
|
|
|
|
|
+ attrs.forEach((attr, index) => {
|
|
|
|
|
+ const key = 'value' + (index + 1);
|
|
|
|
|
+ if (row[key] === undefined && skuParts[index] !== undefined) {
|
|
|
|
|
+ row[key] = skuParts[index];
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ return row;
|
|
|
|
|
+ },
|
|
|
addBtn () {
|
|
addBtn () {
|
|
|
this.clearAttr();
|
|
this.clearAttr();
|
|
|
this.createBnt = false;
|
|
this.createBnt = false;
|
|
@@ -870,21 +971,8 @@ export default {
|
|
|
});
|
|
});
|
|
|
}else if(this.form.specType === 1) {
|
|
}else if(this.form.specType === 1) {
|
|
|
this.manyFormValidate = res.value;
|
|
this.manyFormValidate = res.value;
|
|
|
- let headerdel = {
|
|
|
|
|
- title: '操作',
|
|
|
|
|
- slot: 'action',
|
|
|
|
|
- fixed: 'right',
|
|
|
|
|
- width: 220
|
|
|
|
|
- };
|
|
|
|
|
- res.header.push(headerdel);
|
|
|
|
|
- this.form.header = res.header;
|
|
|
|
|
- let header = res.header;
|
|
|
|
|
- header.pop();
|
|
|
|
|
- // this.manyFormValidate.map((item) => {
|
|
|
|
|
- // if(this.imageArr.length>0){
|
|
|
|
|
- // item.image = this.imageArr[0]
|
|
|
|
|
- // }
|
|
|
|
|
- // });
|
|
|
|
|
|
|
+ const header = (res.header || []).filter(h => h.slot !== 'action');
|
|
|
|
|
+ this.form.header = header;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}).catch(res => {
|
|
}).catch(res => {
|
|
@@ -902,7 +990,12 @@ export default {
|
|
|
// 删除规格
|
|
// 删除规格
|
|
|
handleRemoveRole (index) {
|
|
handleRemoveRole (index) {
|
|
|
this.attrs.splice(index, 1);
|
|
this.attrs.splice(index, 1);
|
|
|
- this.manyFormValidate.splice(index, 1);
|
|
|
|
|
|
|
+ if (this.attrs.length === 0) {
|
|
|
|
|
+ this.manyFormValidate = [];
|
|
|
|
|
+ this.form.header = [];
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ this.generate();
|
|
|
},
|
|
},
|
|
|
// 删除属性
|
|
// 删除属性
|
|
|
handleRemove2 (item, index) {
|
|
handleRemove2 (item, index) {
|
|
@@ -1001,6 +1094,8 @@ export default {
|
|
|
},
|
|
},
|
|
|
// 表单重置
|
|
// 表单重置
|
|
|
reset() {
|
|
reset() {
|
|
|
|
|
+ this.editSeq += 1;
|
|
|
|
|
+ this.resetSpecState();
|
|
|
this.form = {
|
|
this.form = {
|
|
|
productId: 0,
|
|
productId: 0,
|
|
|
image: null,
|
|
image: null,
|
|
@@ -1066,8 +1161,7 @@ export default {
|
|
|
warehouseCode:null,
|
|
warehouseCode:null,
|
|
|
taxRate: null
|
|
taxRate: null
|
|
|
}
|
|
}
|
|
|
- ]
|
|
|
|
|
- this.attrs=[];
|
|
|
|
|
|
|
+ ];
|
|
|
this.photoArr=[];
|
|
this.photoArr=[];
|
|
|
this.imageArr=[];
|
|
this.imageArr=[];
|
|
|
},
|
|
},
|
|
@@ -1100,10 +1194,16 @@ export default {
|
|
|
},
|
|
},
|
|
|
/** 修改按钮操作 */
|
|
/** 修改按钮操作 */
|
|
|
handleUpdate(row) {
|
|
handleUpdate(row) {
|
|
|
- var that=this;
|
|
|
|
|
this.reset();
|
|
this.reset();
|
|
|
- const productId = row.productId || this.ids
|
|
|
|
|
|
|
+ const seq = this.editSeq;
|
|
|
|
|
+ const productId = row && row.productId ? row.productId : (Array.isArray(this.ids) ? this.ids[0] : this.ids);
|
|
|
|
|
+ if (!productId) {
|
|
|
|
|
+ return this.$message.warning('请先选择要修改的商品');
|
|
|
|
|
+ }
|
|
|
getStoreProduct(productId).then(response => {
|
|
getStoreProduct(productId).then(response => {
|
|
|
|
|
+ if (seq !== this.editSeq) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
this.form = response.data;
|
|
this.form = response.data;
|
|
|
this.form.isShow = response.data.isShow.toString();
|
|
this.form.isShow = response.data.isShow.toString();
|
|
|
this.form.isHot = response.data.isHot.toString();
|
|
this.form.isHot = response.data.isHot.toString();
|
|
@@ -1112,59 +1212,51 @@ export default {
|
|
|
this.form.isNew = response.data.isNew.toString();
|
|
this.form.isNew = response.data.isNew.toString();
|
|
|
this.form.productType = response.data.productType.toString();
|
|
this.form.productType = response.data.productType.toString();
|
|
|
this.form.isDisplay = response.data.isDisplay.toString();
|
|
this.form.isDisplay = response.data.isDisplay.toString();
|
|
|
- if(this.form.tuiCateId!=null){
|
|
|
|
|
|
|
+ if (this.form.tuiCateId != null) {
|
|
|
this.form.tuiCateId = response.data.tuiCateId.toString();
|
|
this.form.tuiCateId = response.data.tuiCateId.toString();
|
|
|
}
|
|
}
|
|
|
- //组装attrs数据
|
|
|
|
|
- if(response.attrs!=null){
|
|
|
|
|
- this.attrs=[];
|
|
|
|
|
- response.attrs.forEach(function (item, index) {
|
|
|
|
|
- var data={value:item.attrName,detail:item.attrValues.split(',')}
|
|
|
|
|
- that.attrs.push(data);
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- that.generate();
|
|
|
|
|
- }, 200);
|
|
|
|
|
- if(this.form.specType === 0){
|
|
|
|
|
- that.manyFormValidate = [];
|
|
|
|
|
- }else {
|
|
|
|
|
- that.createBnt = true;
|
|
|
|
|
- that.oneFormValidate = [
|
|
|
|
|
- {
|
|
|
|
|
- image: '',
|
|
|
|
|
- price: 0,
|
|
|
|
|
- agentPrice: 0,
|
|
|
|
|
- cost: 0,
|
|
|
|
|
- otPrice: 0,
|
|
|
|
|
- stock: 0,
|
|
|
|
|
- barCode: '',
|
|
|
|
|
- weight: 0,
|
|
|
|
|
- volume: 0,
|
|
|
|
|
- integral: 0,
|
|
|
|
|
- brokerage:0,
|
|
|
|
|
- brokerageTwo:0,
|
|
|
|
|
- taxRate: null
|
|
|
|
|
- }
|
|
|
|
|
- ]
|
|
|
|
|
- }
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- if(this.form.description==null){
|
|
|
|
|
- this.$refs.myeditor.setText("");
|
|
|
|
|
- }
|
|
|
|
|
- else{
|
|
|
|
|
- this.$refs.myeditor.setText(this.form.description);
|
|
|
|
|
- }
|
|
|
|
|
- }, 200);
|
|
|
|
|
- if(this.form.image!=null){
|
|
|
|
|
- this.imageArr=this.form.image.split(",");
|
|
|
|
|
|
|
+ this.parseAttrsFromResponse(response.attrs);
|
|
|
|
|
+ if (this.form.image != null) {
|
|
|
|
|
+ this.imageArr = this.form.image.split(",");
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.imageArr = [];
|
|
|
}
|
|
}
|
|
|
- if(this.form.sliderImage!=null){
|
|
|
|
|
- this.photoArr=this.form.sliderImage.split(",");
|
|
|
|
|
|
|
+ if (this.form.sliderImage != null) {
|
|
|
|
|
+ this.photoArr = this.form.sliderImage.split(",");
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.photoArr = [];
|
|
|
}
|
|
}
|
|
|
- console.log(this.oneFormValidate)
|
|
|
|
|
this.open = true;
|
|
this.open = true;
|
|
|
this.title = "修改商品";
|
|
this.title = "修改商品";
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ if (seq !== this.editSeq) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ this.loadEditorContent();
|
|
|
|
|
+ if (this.form.specType === 0) {
|
|
|
|
|
+ this.manyFormValidate = [];
|
|
|
|
|
+ this.generate();
|
|
|
|
|
+ } else if (this.form.specType === 1) {
|
|
|
|
|
+ this.oneFormValidate = [
|
|
|
|
|
+ {
|
|
|
|
|
+ image: '',
|
|
|
|
|
+ price: 0,
|
|
|
|
|
+ agentPrice: 0,
|
|
|
|
|
+ cost: 0,
|
|
|
|
|
+ otPrice: 0,
|
|
|
|
|
+ stock: 0,
|
|
|
|
|
+ barCode: '',
|
|
|
|
|
+ weight: 0,
|
|
|
|
|
+ volume: 0,
|
|
|
|
|
+ integral: 0,
|
|
|
|
|
+ brokerage: 0,
|
|
|
|
|
+ brokerageTwo: 0,
|
|
|
|
|
+ taxRate: null
|
|
|
|
|
+ }
|
|
|
|
|
+ ];
|
|
|
|
|
+ this.loadMultiSpecTable(this.attrs, response.values || [], seq);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
/** 提交按钮 */
|
|
/** 提交按钮 */
|
|
@@ -1185,6 +1277,7 @@ export default {
|
|
|
if (response.code === 200) {
|
|
if (response.code === 200) {
|
|
|
this.msgSuccess("修改成功");
|
|
this.msgSuccess("修改成功");
|
|
|
this.open = false;
|
|
this.open = false;
|
|
|
|
|
+ this.reset();
|
|
|
this.getList();
|
|
this.getList();
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|