优化商品发布规格校验,后续会优化规格详情中添加规格以前数据消失问题

master
lemon橪 2021-09-26 18:02:26 +08:00
parent 1aab8aa8c8
commit 4da164dcba
2 changed files with 35 additions and 25 deletions

View File

@ -79,7 +79,7 @@
.sku-val{ .sku-val{
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
>.sku-item-content-val{ /deep/ .sku-item-content-val{
margin-right: 20px; margin-right: 20px;

View File

@ -91,29 +91,32 @@
<Button type="primary" slot="extra" @click="handleCloseSkuItem($index)"> <Button type="primary" slot="extra" @click="handleCloseSkuItem($index)">
删除规格 删除规格
</Button> </Button>
<FormItem label="规格名" :prop="'item.'+$index+'.name'" :rules="baseInfoFormRule.name" <div>
class="sku-item-content-val flex"> <FormItem label="规格名" class="sku-item-content-val flex">
<AutoComplete style="width: 150px" v-model="item.name" :maxlength="30" <AutoComplete style="width: 150px" v-model="item.name" :maxlength="30"
placeholder="请输入规格项名称" :filter-method="filterMethod" :data="skuData" placeholder="请输入规格项名称" :filter-method="filterMethod" :data="skuData"
@on-change="editSkuItem"> @on-change="editSkuItem">
</AutoComplete>
</FormItem>
<div class="flex sku-val">
<!--规格值文本列表-->
<FormItem v-for="(val, index) in item.spec_values" :key="index"
class="sku-item-content-val flex" label="规格项" :prop="'spec_values.'+index"
:rules="[regular.REQUIRED, regular.VARCHAR60]">
<AutoComplete v-model="val.value" style="width: 150px" :maxlength="30"
placeholder="请输入规格项" :filter-method="filterMethod" :data="skuVal"
@on-focus="changeSkuVals(item.name)"
@on-change="skuValueChange(val.value, $index, item)">
</AutoComplete> </AutoComplete>
<Button type="primary" size="small" style="margin-left: 10px"
@click="handleCloseSkuValue(item, index)">
删除
</Button>
</FormItem> </FormItem>
</div>
<div class="flex sku-val">
<Form :model="item" class="flex">
<!--规格值文本列表-->
<FormItem v-for="(val, index) in item.spec_values" :key="index"
class="sku-item-content-val flex" label="规格项" :prop="'spec_values.'+index+'.value'"
:rules="[regular.REQUIRED, regular.VARCHAR60]">
<AutoComplete v-model="val.value" style="width: 150px" :maxlength="30"
placeholder="请输入规格项" :filter-method="filterMethod" :data="skuVal"
@on-focus="changeSkuVals(item.name)"
@on-change="skuValueChange(val.value, $index, item)">
</AutoComplete>
<Button type="primary" size="small" style="margin-left: 10px"
@click="handleCloseSkuValue(item, index)">
删除
</Button>
</FormItem>
</Form>
</div> </div>
<div> <div>
@ -296,7 +299,6 @@ export default {
}, },
}, },
data() { data() {
// //
const checkPrice = (rule, value, callback) => { const checkPrice = (rule, value, callback) => {
if (!value && value !== 0) { if (!value && value !== 0) {
@ -422,6 +424,7 @@ export default {
value: [regular.REQUIRED, regular.VARCHAR60], value: [regular.REQUIRED, regular.VARCHAR60],
templateId: [regular.REQUIRED], templateId: [regular.REQUIRED],
}, },
skuInfoRules: {},
/** 品牌列表 */ /** 品牌列表 */
brandList: [], brandList: [],
/** 店铺分类列表 */ /** 店铺分类列表 */
@ -443,6 +446,9 @@ export default {
}; };
}, },
methods: { methods: {
changeSku(val){
console.warn(val)
},
/** /**
* 选择参数 * 选择参数
* @paramsGroup 参数分组 * @paramsGroup 参数分组
@ -699,7 +705,7 @@ export default {
{ {
id: u.specValueId, id: u.specValueId,
name: u.specName, name: u.specName,
value: u.specValue, value: u.specValue || "",
}, },
], ],
}); });
@ -712,7 +718,7 @@ export default {
sk.spec_values.push({ sk.spec_values.push({
id: u.specValueId, id: u.specValueId,
name: u.specName, name: u.specName,
value: u.specValue, value: u.specValue || "",
}); });
} }
if (!sk.spec_id && u.specName === "specId") { if (!sk.spec_id && u.specName === "specId") {
@ -777,6 +783,7 @@ export default {
// //
this.$set(this.skuInfo, this.skuInfo.length, { this.$set(this.skuInfo, this.skuInfo.length, {
spec_values: [], spec_values: [],
name: "规格名",
}); });
this.renderTableData(); this.renderTableData();
}, },
@ -832,6 +839,7 @@ export default {
} }
this.$set(item.spec_values, item.spec_values.length, { this.$set(item.spec_values, item.spec_values.length, {
name: item.name, name: item.name,
value: "",
}); });
this.baseInfoForm.regeneratorSkuFlag = true; this.baseInfoForm.regeneratorSkuFlag = true;
/** /**
@ -861,6 +869,7 @@ export default {
let pushData = []; let pushData = [];
// //
this.skuInfo.forEach((sku) => { this.skuInfo.forEach((sku) => {
!sku.name ? sku.name = "规格名" : ''
// //
let columnName = sku.name; let columnName = sku.name;
pushData.push({ pushData.push({
@ -934,6 +943,7 @@ export default {
cloneTemp[0].spec_values.forEach((valItem) => { cloneTemp[0].spec_values.forEach((valItem) => {
let obj = cloneObj(resItem); let obj = cloneObj(resItem);
obj[cloneTemp[0].name] = valItem.value; obj[cloneTemp[0].name] = valItem.value;
table.push(obj); table.push(obj);
}); });
}); });