商品信息-新ui
parent
b42e99056d
commit
2fff485751
|
|
@ -70,7 +70,7 @@
|
|||
<el-table-column label="主键" align="center" prop="id"/>
|
||||
<el-table-column label="商品名称" align="center" prop="name"/>
|
||||
<el-table-column label="商品描述" align="center" prop="introduction"/>
|
||||
<el-table-column label="主类型" align="center" prop="mainType"/>
|
||||
<el-table-column label="主类型" align="center" prop="mianType"/>
|
||||
<el-table-column label="父类型" align="center" prop="parentType"/>
|
||||
<el-table-column label="商品类型" align="center" prop="type"/>
|
||||
<el-table-column label="商品图片" align="center" prop="image" width="100">
|
||||
|
|
@ -202,7 +202,7 @@
|
|||
|
||||
<div v-if="active==2">
|
||||
<el-form-item label="商品规格" prop="ruleId">
|
||||
<el-select v-model="form.ruleId" placeholder="商品规格">
|
||||
<el-select v-model="form.ruleId" @change="changeRule" placeholder="商品规格">
|
||||
<el-option
|
||||
v-for="rule in ruleList"
|
||||
:key="rule.id"
|
||||
|
|
@ -216,6 +216,50 @@
|
|||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-form :inline="true" :model="oneSettingValue" class="demo-form-inline">
|
||||
<el-form-item label="商品图片">
|
||||
<image-upload
|
||||
v-model="oneSettingValue.image"
|
||||
:limit="1"
|
||||
:is-show-tip="false">
|
||||
</image-upload>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="商品价格">
|
||||
<el-input v-model="oneSettingValue.price" placeholder="商品价格"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="商品库存">
|
||||
<el-input v-model="oneSettingValue.stock" placeholder="商品库存"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">一键添加</el-button>
|
||||
<el-button type="primary" @click="onClean">一键清空</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table
|
||||
:data="skuList"
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column v-for="title in titleList" :prop="title.prop" :label="title.label">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="title.prop.indexOf('prop') >-1 ">{{ scope.row[title.prop] }}</span>
|
||||
<el-input-number v-else-if="['stock','price'].indexOf(title.prop) > -1"
|
||||
v-model="scope.row[title.prop]" :step="0.1" :max="10000"></el-input-number>
|
||||
<div v-else-if="['image'].indexOf(title.prop) > -1" style="width: 30px; height: 30px;">
|
||||
<image-upload v-model="scope.row[title.prop]"
|
||||
:limit="1"
|
||||
:is-show-tip="false"
|
||||
class="custom-image-upload"
|
||||
></image-upload>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
|
|
@ -240,9 +284,9 @@
|
|||
<div slot="header" class="clearfix">
|
||||
<span>属性组名称【{{ templateAttributeGroup.groupName }}】</span>
|
||||
</div>
|
||||
<div style="width: 50px;height: 100px">
|
||||
<el-form :label="attribute.name" v-for="attribute in templateAttributeGroup.attributeList">
|
||||
<el-form-item>
|
||||
<div style="width: 100px;height: 200px">
|
||||
<el-form v-for="attribute in templateAttributeGroup.attributeList">
|
||||
<el-form-item :label="attribute.name">
|
||||
<el-input v-model="attribute.value"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
|
@ -255,7 +299,7 @@
|
|||
<el-tab-pane label="商品属性" name="second">
|
||||
商品属性
|
||||
<el-row style="overflow-x: auto; height: 300px;">
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-form label-width="80px">
|
||||
<el-col :span="6" v-for="templateAttribute in categoryCommonElement.templateAttributeList">
|
||||
<el-form-item :label="templateAttribute.name">
|
||||
<el-input v-model="templateAttribute.value"></el-input>
|
||||
|
|
@ -356,6 +400,26 @@ export default {
|
|||
dicts: ['sys_normal_disable'],
|
||||
data() {
|
||||
return {
|
||||
oneSettingValue: {
|
||||
"image": null,
|
||||
"stock": null,
|
||||
"price": null
|
||||
},
|
||||
templateTitleList: [
|
||||
{
|
||||
"label": "规格图片",
|
||||
"prop": "image"
|
||||
},
|
||||
{
|
||||
"label": "商品库存",
|
||||
"prop": "stock"
|
||||
}, {
|
||||
"label": "商品价格",
|
||||
"prop": "price"
|
||||
}
|
||||
],
|
||||
skuList: [],
|
||||
titleList: [],
|
||||
attributeIdCheckedList: [],
|
||||
attributeCheckedList: [],
|
||||
customAttributeForm: {},
|
||||
|
|
@ -377,7 +441,7 @@ export default {
|
|||
},
|
||||
ruleAddFormStatus: false,
|
||||
addRulePropertyValue: null,
|
||||
active: 1,
|
||||
active: 2,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
|
|
@ -449,11 +513,11 @@ export default {
|
|||
categoryOptionValue: {
|
||||
handler(value) {
|
||||
if (value != null && value !== undefined && value.length > 0) {
|
||||
this.form.mainType = value[0];
|
||||
this.form.mianType = value[0];
|
||||
this.form.parentType = value[1];
|
||||
this.form.type = value[2];
|
||||
} else {
|
||||
this.form.mainType = null
|
||||
this.form.mianType = null
|
||||
this.form.parentType = null
|
||||
this.form.type = null
|
||||
}
|
||||
|
|
@ -481,15 +545,79 @@ export default {
|
|||
this.CategoryTree();
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
this.skuList.forEach(skuInfo => {
|
||||
console.log(this.oneSettingValue)
|
||||
skuInfo.image = this.oneSettingValue.image;
|
||||
skuInfo.stock = this.oneSettingValue.stock;
|
||||
skuInfo.price = this.oneSettingValue.price;
|
||||
})
|
||||
},
|
||||
onClean(){
|
||||
this.skuList=[]
|
||||
},
|
||||
changeRule(ruleId) {
|
||||
this.titleList = []
|
||||
let ruleInfo = this.ruleList.find(ruleInfo => ruleInfo.id === ruleId);
|
||||
const {ruleAttrList} = ruleInfo;
|
||||
let skuTotal = 1;
|
||||
for (let ruleAttrListKey in ruleAttrList) {
|
||||
let ruleAttrInfo = ruleAttrList[ruleAttrListKey];
|
||||
this.titleList.push({
|
||||
"label": ruleAttrInfo.name,
|
||||
"prop": "prop" + ruleAttrListKey
|
||||
})
|
||||
skuTotal = skuTotal * ruleAttrInfo.ruleList.length;
|
||||
}
|
||||
this.titleList.push(...this.templateTitleList)
|
||||
this.skuList = []
|
||||
for (let i = 0; i < skuTotal; i++) {
|
||||
this.skuList.push(
|
||||
{
|
||||
"image": null,
|
||||
"price": 0,
|
||||
"stock": 0
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
//currentIndex 当前下表
|
||||
for (let currentIndex in ruleAttrList) {
|
||||
let ruleAttrInfo = ruleAttrList[currentIndex];
|
||||
//continuousSize 连续出现次数 forSize 循环出现次数
|
||||
let continuousSize = 1, forSize = 1;
|
||||
for (let continuousIndex = parseInt(currentIndex) + 1; continuousIndex < ruleAttrList.length; continuousIndex++) {
|
||||
continuousSize = continuousSize * ruleAttrList[continuousIndex].ruleList.length
|
||||
}
|
||||
for (let forIndex = parseInt(currentIndex) - 1; forIndex >= 0; forIndex--) {
|
||||
forSize = forSize * ruleAttrList[forIndex].ruleList.length
|
||||
}
|
||||
console.log(`${ruleAttrInfo.name} 规格连续出现的次数 ：${continuousSize} 循环出现的次数： ${forSize}`)
|
||||
|
||||
let counter = 0;
|
||||
for (let forIndex = 0; forIndex < forSize; forIndex++) {
|
||||
const {ruleList} = ruleAttrInfo;
|
||||
console.log(ruleList)
|
||||
|
||||
ruleList.forEach(value => {
|
||||
for (let continuousIndex = 0; continuousIndex < continuousSize; continuousIndex++) {
|
||||
this.skuList[counter++]["prop" + currentIndex] = value;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
handleCheckedCitiesChange() {
|
||||
let attributeId = this.attributeIdCheckedList
|
||||
.find(attributeId => this.attributeCheckedList.map(attributeChecked => attributeChecked.id).indexOf(attributeId) === -1)
|
||||
if (attributeId != undefined) {
|
||||
let attributeInfo=this.categoryCommonElement.attributeList.find(attributeInfo=>attributeInfo.id===attributeId);
|
||||
let attributeInfo = this.categoryCommonElement.attributeList.find(attributeInfo => attributeInfo.id === attributeId);
|
||||
this.attributeCheckedList.push(attributeInfo)
|
||||
}else{
|
||||
let attributeChecked =this.attributeCheckedList.find(attributeChecked=>this.attributeIdCheckedList.indexOf(attributeChecked));
|
||||
this.attributeCheckedList.splice(this.attributeCheckedList.indexOf(attributeChecked),1);
|
||||
} else {
|
||||
let attributeChecked = this.attributeCheckedList.find(attributeChecked => this.attributeIdCheckedList.indexOf(attributeChecked));
|
||||
this.attributeCheckedList.splice(this.attributeCheckedList.indexOf(attributeChecked), 1);
|
||||
}
|
||||
|
||||
},
|
||||
|
|
@ -501,17 +629,17 @@ export default {
|
|||
name = this.customAttributeForm.name,
|
||||
value = this.customAttributeForm.value;
|
||||
this.categoryCommonElement.attributeList.push({
|
||||
"id":attributeId,
|
||||
"name":name,
|
||||
"code":code
|
||||
"id": attributeId,
|
||||
"name": name,
|
||||
"code": code
|
||||
});
|
||||
this.attributeIdCheckedList.push(attributeId)
|
||||
this.attributeCheckedList.push({
|
||||
"id":attributeId,
|
||||
"name":name,
|
||||
"value":value
|
||||
"id": attributeId,
|
||||
"name": name,
|
||||
"value": value
|
||||
});
|
||||
this.customAttributeForm={}
|
||||
this.customAttributeForm = {}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -558,7 +686,7 @@ export default {
|
|||
id: null,
|
||||
name: null,
|
||||
introduction: null,
|
||||
mainType: null,
|
||||
mianType: null,
|
||||
parentType: null,
|
||||
type: null,
|
||||
image: null,
|
||||
|
|
@ -645,3 +773,10 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.custom-image-upload img {
|
||||
max-width: 30px;
|
||||
max-height: 30px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue