给商品的多属性选择上限增加到3个

This commit is contained in:
季圣华
2023-06-04 23:02:44 +08:00
parent c91c1fc501
commit 89642e680f
2 changed files with 65 additions and 20 deletions

View File

@@ -27,7 +27,7 @@
</a-form>
<a-form :form="form">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="属性值">
<a-textarea :rows="2" placeholder="请输入属性值(用竖线隔开)" v-decorator.trim="[ 'attributeValue', validatorRules.attributeValue]" />
<a-textarea :rows="2" placeholder="请输入属性值(用竖线隔开,比如:红色|橙色|黄色|绿色" v-decorator.trim="[ 'attributeValue', validatorRules.attributeValue]" />
</a-form-item>
</a-form>
</a-spin>

View File

@@ -16,7 +16,7 @@
</template>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-tabs default-active-key="1">
<a-tabs default-active-key="1" size="small">
<a-tab-pane key="1" tab="基本信息" id="materialHeadModal" forceRender>
<a-row class="form-row" :gutter="24">
<a-col :md="6" :sm="24">
@@ -155,6 +155,16 @@
</a-select>
</a-form-item>
</a-col>
<a-col :md="12" :sm="24" v-if="manySkuSelected>=3">
<a-form-item :labelCol="{xs: { span: 24 },sm: { span: 4 }}" :wrapperCol="{xs: { span: 24 },sm: { span: 20 }}" :label="skuThreeTitle">
<a-select mode="multiple" v-decorator="[ 'skuThree' ]" showSearch optionFilterProp="children"
placeholder="请选择可多选" @select="onSkuChange" @deselect="onSkuThreeDeSelect">
<a-select-option v-for="(item,index) in skuThreeList" :key="index" :value="item.value">
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
<div style="margin-top:8px;" id="materialDetailModal">
<j-editable-table
@@ -314,8 +324,10 @@
materialAttributeList: [],
skuOneTitle: '属性1',
skuTwoTitle: '属性2',
skuThreeTitle: '属性3',
skuOneList: [],
skuTwoList: [],
skuThreeList: [],
manySkuSelected: 0,
model: {},
showOkFlag: true,
@@ -759,7 +771,7 @@
onManySkuChange(value) {
this.manySkuSelected = value.length
//控制多属性下拉框中选择项的状态
if(value.length < 2){
if(value.length < 3){
this.materialAttributeList.forEach((item,index,array)=>{
(array.indexOf(item.value) === -1)?Vue.set(array[index], 'disabled', false):''
})
@@ -768,10 +780,11 @@
(value.indexOf(item.value) === -1)?Vue.set(array[index], 'disabled', true):''
})
}
//更新属性1和属性2的下拉框
if(value.length <= 2) {
//更新属性1和属性2和属性3的下拉框
if(value.length <= 3) {
let skuOneId = value[0]
let skuTwoId = value[1]
let skuThreeId = value[2]
this.materialAttributeList.forEach(item => {
if(item.value === skuOneId) {
this.skuOneTitle = item.name
@@ -779,6 +792,9 @@
if(item.value === skuTwoId) {
this.skuTwoTitle = item.name
}
if(item.value === skuThreeId) {
this.skuThreeTitle = item.name
}
})
getMaterialAttributeValueListById({'id': skuOneId}).then((res)=>{
if(res) {
@@ -790,6 +806,11 @@
this.skuTwoList = res
}
})
getMaterialAttributeValueListById({'id': skuThreeId}).then((res)=>{
if(res) {
this.skuThreeList = res
}
})
}
//控制条码列表中的多属性列
if(value.length>0) {
@@ -803,25 +824,48 @@
onSkuChange() {
let skuOneData = this.form.getFieldValue('skuOne')
let skuTwoData = this.form.getFieldValue('skuTwo')
this.autoSkuList(skuOneData, skuTwoData)
let skuThreeData = this.form.getFieldValue('skuThree')
this.autoSkuList(skuOneData, skuTwoData, skuThreeData)
},
onSkuOneDeSelect(value) {
let skuOneData = this.form.getFieldValue('skuOne')
let skuTwoData = this.form.getFieldValue('skuTwo')
let skuThreeData = this.form.getFieldValue('skuThree')
removeByVal(skuOneData, value)
this.autoSkuList(skuOneData, skuTwoData)
this.autoSkuList(skuOneData, skuTwoData, skuThreeData)
},
onSkuTwoDeSelect(value) {
let skuOneData = this.form.getFieldValue('skuOne')
let skuTwoData = this.form.getFieldValue('skuTwo')
let skuThreeData = this.form.getFieldValue('skuThree')
removeByVal(skuTwoData, value)
this.autoSkuList(skuOneData, skuTwoData)
this.autoSkuList(skuOneData, skuTwoData, skuThreeData)
},
autoSkuList(skuOneData, skuTwoData) {
onSkuThreeDeSelect(value) {
let skuOneData = this.form.getFieldValue('skuOne')
let skuTwoData = this.form.getFieldValue('skuTwo')
let skuThreeData = this.form.getFieldValue('skuThree')
removeByVal(skuThreeData, value)
this.autoSkuList(skuOneData, skuTwoData, skuThreeData)
},
autoSkuList(skuOneData, skuTwoData, skuThreeData) {
let unit = this.form.getFieldValue('unit')
if(unit) {
//计算多属性已经选择了几个
let count = this.getNumByField('skuOne') + this.getNumByField('skuTwo')
let skuArr = []
if(this.getNumByField('skuOne')) {
skuArr.push(skuOneData)
}
if(this.getNumByField('skuTwo')) {
skuArr.push(skuTwoData)
}
if(this.getNumByField('skuThree')) {
skuArr.push(skuThreeData)
}
let skuArrOne = skuArr[0]
let skuArrTwo = skuArr[1]
let skuArrThree = skuArr[2]
let count = this.getNumByField('skuOne') + this.getNumByField('skuTwo') + this.getNumByField('skuThree')
let barCodeSku = []
if(count === 1) {
let skuArrOnly = []
@@ -829,23 +873,24 @@
skuArrOnly = skuOneData
} else if(this.getNumByField('skuTwo')) {
skuArrOnly = skuTwoData
} else if(this.getNumByField('skuThree')) {
skuArrOnly = skuThreeData
}
for (let i = 0; i < skuArrOnly.length; i++) {
barCodeSku.push(skuArrOnly[i])
}
} else if(count === 2) {
let skuArr = []
if(this.getNumByField('skuOne')) {
skuArr.push(skuOneData)
}
if(this.getNumByField('skuTwo')) {
skuArr.push(skuTwoData)
}
let skuArrOne = skuArr[0]
let skuArrTwo = skuArr[1]
for (let i = 0; i < skuArrOne.length; i++) {
for (let j = 0; j < skuArrTwo.length; j++) {
barCodeSku.push(skuArrOne[i] + ',' + skuArrTwo[j])
barCodeSku.push(skuArrOne[i] + '/' + skuArrTwo[j])
}
}
} else if(count === 3) {
for (let i = 0; i < skuArrOne.length; i++) {
for (let j = 0; j < skuArrTwo.length; j++) {
for (let k = 0; k < skuArrThree.length; k++) {
barCodeSku.push(skuArrOne[i] + '/' + skuArrTwo[j] + '/' + skuArrThree[k])
}
}
}
}