spu 修改页面展示
franky
parent
ed56c71ba1
commit
f3c83488a3
|
|
@ -55,8 +55,8 @@
|
|||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="主键" align="center" prop="id"/>
|
||||
<el-table-column label="商品名称" align="center" prop="name"/>
|
||||
<!-- <el-table-column label="卖点" align="center" prop="sellPoint"/>-->
|
||||
<!-- <el-table-column label="描述" align="center" prop="description"/>-->
|
||||
<!-- <el-table-column label="卖点" align="center" prop="sellPoint"/>-->
|
||||
<!-- <el-table-column label="描述" align="center" prop="description"/>-->
|
||||
<el-table-column label="分类id" align="center" prop="categoryId"/>
|
||||
<el-table-column label="商品主图地址" align="center" prop="picUrls">
|
||||
<template slot-scope="scope">
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
<el-table-column label="点赞初始人数" align="center" prop="likeCount"/>
|
||||
<el-table-column label="价格 (分)" align="center" prop="price"/>
|
||||
<el-table-column label="库存数量" align="center" prop="quantity"/>
|
||||
<!-- <el-table-column label="状态" align="center" prop="status"/>-->
|
||||
<!-- <el-table-column label="状态" align="center" prop="status"/>-->
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
|
|
@ -115,7 +115,7 @@
|
|||
<el-form-item label="商品规格">
|
||||
<el-button size="mini" @click="shopTagInput()">添加规格</el-button>
|
||||
<div v-for="(tag, tagIndex) in skuTags" :key="tagIndex">
|
||||
<span>{{tag.name}}</span>
|
||||
<span>{{ tag.name }}</span>
|
||||
<el-button style="margin-left: 10px" class="button-new-tag" type="text" icon="el-icon-delete"
|
||||
@click="removeTag(tagIndex)">删除
|
||||
</el-button>
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
:key="tagItem"
|
||||
style="margin-right: 10px"
|
||||
:disable-transitions="false">
|
||||
{{tagItem}}
|
||||
{{ tagItem }}
|
||||
</el-tag>
|
||||
<!-- <el-input-->
|
||||
<!-- class="input-new-tag"-->
|
||||
|
|
@ -176,7 +176,7 @@
|
|||
:span-method="tableSpanMethod">
|
||||
<el-table-column v-for="(leftTitle, index) in skuTags" :key="index" :label="leftTitle.name">
|
||||
<template slot-scope="scope">
|
||||
{{scope.row.propertyChildNames[index]}}
|
||||
{{ scope.row.propertyChildNames[index] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="skuTags.length"
|
||||
|
|
@ -244,7 +244,8 @@
|
|||
<el-table-column
|
||||
label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="changeSkuStatus(`${scope.$index}`)" v-if="scope.row.status===0">
|
||||
<el-button type="text" size="small" @click="changeSkuStatus(`${scope.$index}`)"
|
||||
v-if="scope.row.status===0">
|
||||
正常
|
||||
</el-button>
|
||||
<el-button type="text" size="small" @click="changeSkuStatus(`${scope.$index}`)" v-else>已禁用</el-button>
|
||||
|
|
@ -280,28 +281,28 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {createSpu, updateSpu, deleteSpu, getSpu, getSpuPage, exportSpuExcel} from "@/api/mall/product/spu";
|
||||
import {
|
||||
import {createSpu, updateSpu, deleteSpu, getSpu, getSpuPage, exportSpuExcel} from "@/api/mall/product/spu";
|
||||
import {
|
||||
createCategory,
|
||||
deleteCategory,
|
||||
exportCategoryExcel,
|
||||
getCategory,
|
||||
listCategory,
|
||||
updateCategory
|
||||
} from "@/api/mall/product/category";
|
||||
import {
|
||||
} from "@/api/mall/product/category";
|
||||
import {
|
||||
createProperty,
|
||||
updateProperty,
|
||||
deleteProperty,
|
||||
getProperty,
|
||||
getPropertyPage,
|
||||
exportPropertyExcel
|
||||
} from "@/api/mall/product/property";
|
||||
} from "@/api/mall/product/property";
|
||||
|
||||
import Editor from '@/components/Editor';
|
||||
import ImageUpload from '@/components/ImageUpload';
|
||||
import Editor from '@/components/Editor';
|
||||
import ImageUpload from '@/components/ImageUpload';
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: "Spu",
|
||||
components: {
|
||||
Editor, ImageUpload
|
||||
|
|
@ -319,6 +320,7 @@
|
|||
propertyId: '',
|
||||
selectValues: [],
|
||||
selectValueIds: [],
|
||||
selectObect:[],
|
||||
},
|
||||
skuTags: [],
|
||||
propName: {
|
||||
|
|
@ -372,7 +374,7 @@
|
|||
quantity: undefined,
|
||||
status: undefined,
|
||||
isShowTagInput: undefined,
|
||||
skus:[],
|
||||
skus: [],
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
|
|
@ -382,13 +384,14 @@
|
|||
picUrls: [{required: true, message: "商品主图地址", trigger: "blur"}],
|
||||
sort: [{required: true, message: "排序字段不能为空", trigger: "blur"}],
|
||||
},
|
||||
tagIndex:0,
|
||||
tagIndex: 0,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
||||
this.getList();
|
||||
|
||||
this.getPropertyPageList();
|
||||
this.getListCategory();
|
||||
},
|
||||
methods: {
|
||||
getTableSpecData() {
|
||||
|
|
@ -398,10 +401,10 @@
|
|||
|
||||
},
|
||||
changeSkuStatus(tagIndex) {
|
||||
if(this.form.skus[tagIndex].status == 0){
|
||||
this.form.skus[tagIndex].status = 1 ;
|
||||
}else {
|
||||
this.form.skus[tagIndex].status = 0 ;
|
||||
if (this.form.skus[tagIndex].status == 0) {
|
||||
this.form.skus[tagIndex].status = 1;
|
||||
} else {
|
||||
this.form.skus[tagIndex].status = 0;
|
||||
}
|
||||
|
||||
},
|
||||
|
|
@ -434,28 +437,46 @@
|
|||
let skus = this.unUseTags.map(function (item, index) {
|
||||
return item.name
|
||||
});
|
||||
console.log("skus=="+JSON.stringify(skus))
|
||||
let index = skus.indexOf(this.addTagInput.name);
|
||||
console.log("index=="+index)
|
||||
console.log("skus[index].id=="+this.unUseTags[index].id)
|
||||
console.log("this.unUseTags[index].propertyValueList=="+JSON.stringify(this.unUseTags[index].propertyValueList))
|
||||
|
||||
this.addTagInput.propertyId = this.unUseTags[index].id;
|
||||
for (let i = 0; i < this.addTagInput.selectValues.length; i++) {
|
||||
for (let j = 0; j < this.unUseTags[index].propertyValueList.length; j++) {
|
||||
if (this.addTagInput.selectValues[i] === this.unUseTags[index].propertyValueList[j].name) {
|
||||
this.addTagInput.selectValueIds.push(this.unUseTags[index].propertyValueList[j].id)
|
||||
this.addTagInput.selectObect.push({
|
||||
id:this.unUseTags[index].propertyValueList[j].id,
|
||||
name:this.unUseTags[index].propertyValueList[j].name,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
let addTagInput = JSON.parse(JSON.stringify(this.addTagInput))
|
||||
console.log("addTagInput=="+JSON.stringify(addTagInput))
|
||||
this.skuTags.push(addTagInput);
|
||||
|
||||
// if (this.skuTags.length > 1) {
|
||||
this.skuTags = this.skuTags.sort((a, b) => a.propertyId - b.propertyId);
|
||||
this.skuTags.forEach(function (item,index) {
|
||||
item.selectObect = item.selectObect.sort((a, b) => a.id - b.id)
|
||||
})
|
||||
|
||||
for (let i = 0; i <this.skuTags.length ; i++) {
|
||||
let selectValueIds=[];
|
||||
let selectValues=[];
|
||||
for (let j = 0; j < this.skuTags[i].selectObect.length; j++) {
|
||||
selectValueIds.push(this.skuTags[i].selectObect[j].id);
|
||||
selectValues.push(this.skuTags[i].selectObect[j].name);
|
||||
}
|
||||
this.skuTags[i].selectValues = selectValues;
|
||||
this.skuTags[i].selectValueIds = selectValueIds;
|
||||
}
|
||||
|
||||
this.unUseTags.splice(index, 1);
|
||||
this.isShowTagInput = false;
|
||||
this.getTable();
|
||||
},
|
||||
getTable(){
|
||||
this.form.skus=[];
|
||||
getTable() {
|
||||
this.form.skus = [];
|
||||
let skuTags = JSON.parse(JSON.stringify(this.skuTags));
|
||||
let sku1s = [];
|
||||
let skuIds = [];
|
||||
|
|
@ -467,25 +488,25 @@
|
|||
propertyIds.push(skuTags[i].propertyId);
|
||||
propertyNames.push(skuTags[i].name);
|
||||
}
|
||||
let skuAll = sku1s.reduce((x,y) =>{
|
||||
let arr = [];
|
||||
x.forEach(m => y.forEach(y => arr.push(m.concat([y]))))
|
||||
return arr;
|
||||
},[[]])
|
||||
console.log(skuAll);
|
||||
|
||||
let skuIdAll = skuIds.reduce((x,y) =>{
|
||||
let skuAll = sku1s.reduce((x, y) => {
|
||||
let arr = [];
|
||||
x.forEach(m => y.forEach(y => arr.push(m.concat([y]))))
|
||||
return arr;
|
||||
},[[]])
|
||||
console.log(skuIdAll);
|
||||
}, [[]])
|
||||
|
||||
let skuIdAll = skuIds.reduce((x, y) => {
|
||||
let arr = [];
|
||||
x.forEach(m => y.forEach(y => arr.push(m.concat([y]))))
|
||||
return arr;
|
||||
}, [[]])
|
||||
|
||||
for (let i = 0; i < skuAll.length; i++) {
|
||||
let han = {
|
||||
propertyNames:propertyNames,
|
||||
propertyIds:propertyIds,
|
||||
propertyChildNames:skuAll[i],
|
||||
propertyChildIds:skuIdAll[i],
|
||||
propertyNames: propertyNames,
|
||||
propertyIds: propertyIds,
|
||||
propertyChildNames: skuAll[i],
|
||||
propertyChildIds: skuIdAll[i],
|
||||
properties: [],
|
||||
picUrl: '',
|
||||
costPrice: '',
|
||||
|
|
@ -498,17 +519,16 @@
|
|||
}
|
||||
this.form.skus.push(han);
|
||||
}
|
||||
this.form.skus.forEach(x=>{
|
||||
x.properties=[];
|
||||
for (let i = 0; i <x.propertyIds.length ; i++) {
|
||||
this.form.skus.forEach(x => {
|
||||
x.properties = [];
|
||||
for (let i = 0; i < x.propertyIds.length; i++) {
|
||||
x.properties.push({
|
||||
propertyId:x.propertyIds[i],
|
||||
valueId:x.propertyChildIds[i]
|
||||
propertyId: x.propertyIds[i],
|
||||
valueId: x.propertyChildIds[i]
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
console.log("this.skus=="+JSON.stringify(this.form.skus))
|
||||
},
|
||||
hideTagInput() {
|
||||
this.isShowTagInput = false;
|
||||
|
|
@ -517,6 +537,7 @@
|
|||
propertyId: '',
|
||||
selectValues: [],
|
||||
selectValueIds: [],
|
||||
selectObect: [],
|
||||
};
|
||||
},
|
||||
shopTagInput() {
|
||||
|
|
@ -529,6 +550,7 @@
|
|||
propertyId: '',
|
||||
selectValues: [],
|
||||
selectValueIds: [],
|
||||
selectObect: [],
|
||||
};
|
||||
},
|
||||
//删除已选的规格
|
||||
|
|
@ -558,7 +580,6 @@
|
|||
return item
|
||||
})
|
||||
this.allhistoryTags = JSON.parse(JSON.stringify(this.unUseTags));
|
||||
console.log(this.propertyPageList)
|
||||
});
|
||||
},
|
||||
/** 查询分类 */
|
||||
|
|
@ -604,9 +625,9 @@
|
|||
quantity: undefined,
|
||||
status: undefined,
|
||||
isShowTagInput: undefined,
|
||||
skus:[],
|
||||
skus: [],
|
||||
};
|
||||
this.skuTags=[];
|
||||
this.skuTags = [];
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
|
|
@ -625,7 +646,6 @@
|
|||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加商品spu";
|
||||
this.getListCategory();
|
||||
this.getPropertyPageList();
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
|
|
@ -633,7 +653,6 @@
|
|||
this.reset();
|
||||
const id = row.id;
|
||||
getSpu(id).then(response => {
|
||||
console.log(">>>>>> response.data:" + JSON.stringify(response.data))
|
||||
let dataSpu = response.data;
|
||||
this.form = {
|
||||
id: dataSpu.id,
|
||||
|
|
@ -648,18 +667,100 @@
|
|||
price: dataSpu.price,
|
||||
quantity: dataSpu.quantity,
|
||||
status: dataSpu.status,
|
||||
isShowTagInput:undefined,
|
||||
skus:dataSpu.skus
|
||||
isShowTagInput: undefined,
|
||||
skus: [],
|
||||
skusList: dataSpu.skus,
|
||||
productPropertyViews: dataSpu.productPropertyViews,
|
||||
// skus:dataSpu.productSkuRespVOS,
|
||||
};
|
||||
this.getDataHandle();
|
||||
this.open = true;
|
||||
this.title = "修改商品spu";
|
||||
});
|
||||
},
|
||||
getDataHandle() {
|
||||
let that = this;
|
||||
let productPropertyViews = JSON.parse(JSON.stringify(this.form.productPropertyViews));
|
||||
productPropertyViews = productPropertyViews.sort((a, b) => a.propertyId - b.propertyId);
|
||||
productPropertyViews.forEach(item => {
|
||||
item.propertyValues = item.propertyValues.sort((a, b) => a.v1 - b.v1);
|
||||
})
|
||||
let skuIds = [];
|
||||
for (let i = 0; i < productPropertyViews.length; i++) {
|
||||
let han = {
|
||||
name: productPropertyViews[i].name,
|
||||
propertyId: productPropertyViews[i].propertyId,
|
||||
selectValues: [],
|
||||
selectValueIds: [],
|
||||
}
|
||||
for (let j = 0; j < productPropertyViews[i].propertyValues.length; j++) {
|
||||
han.selectValues.push(productPropertyViews[i].propertyValues[j].v2);
|
||||
han.selectValueIds.push(productPropertyViews[i].propertyValues[j].v1);
|
||||
}
|
||||
skuIds.push(han)
|
||||
}
|
||||
this.skuTags = skuIds;
|
||||
this.unUseTags = this.allhistoryTags.filter((v) =>
|
||||
skuIds.every((val) => val.name != v.name)
|
||||
)
|
||||
this.getHandleTable();
|
||||
},
|
||||
getHandleTable() {
|
||||
this.form.skus = [];
|
||||
let skuTags = JSON.parse(JSON.stringify(this.skuTags));
|
||||
let sku1s = [];
|
||||
let skuIds = [];
|
||||
let propertyIds = [];
|
||||
let propertyNames = [];
|
||||
for (let i = 0; i < skuTags.length; i++) {
|
||||
sku1s.push(skuTags[i].selectValues);
|
||||
skuIds.push(skuTags[i].selectValueIds);
|
||||
propertyIds.push(skuTags[i].propertyId);
|
||||
propertyNames.push(skuTags[i].name);
|
||||
}
|
||||
let skuAll = sku1s.reduce((x, y) => {
|
||||
let arr = [];
|
||||
x.forEach(m => y.forEach(y => arr.push(m.concat([y]))))
|
||||
return arr;
|
||||
}, [[]])
|
||||
|
||||
let skuIdAll = skuIds.reduce((x, y) => {
|
||||
let arr = [];
|
||||
x.forEach(m => y.forEach(y => arr.push(m.concat([y]))))
|
||||
return arr;
|
||||
}, [[]])
|
||||
|
||||
for (let i = 0; i < skuAll.length; i++) {
|
||||
let han = {
|
||||
propertyNames: propertyNames,
|
||||
propertyIds: propertyIds,
|
||||
propertyChildNames: skuAll[i],
|
||||
propertyChildIds: skuIdAll[i],
|
||||
properties: this.form.skusList[i].properties,
|
||||
picUrl: this.form.skusList[i].picUrl,
|
||||
costPrice: this.form.skusList[i].costPrice,
|
||||
originalPrice: this.form.skusList[i].originalPrice,
|
||||
spuId: this.form.skusList[i].spuId,
|
||||
prodName: this.form.skusList[i].prodName,
|
||||
price: this.form.skusList[i].price,
|
||||
barCode: this.form.skusList[i].barCode,
|
||||
status: this.form.skusList[i].status,
|
||||
}
|
||||
this.form.skus.push(han);
|
||||
}
|
||||
this.form.skus.forEach(x => {
|
||||
x.properties = [];
|
||||
for (let i = 0; i < x.propertyIds.length; i++) {
|
||||
x.properties.push({
|
||||
propertyId: x.propertyIds[i],
|
||||
valueId: x.propertyChildIds[i]
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
console.log(this.form.picUrls.split(','));
|
||||
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (!valid) {
|
||||
|
|
@ -714,10 +815,10 @@
|
|||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.app-container {
|
||||
.app-container {
|
||||
.el-tag + .el-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
@ -739,5 +840,5 @@
|
|||
.img-height {
|
||||
height: 65px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue