|
|
|
@ -1,6 +1,6 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div class="container">
|
|
|
|
<div class="container">
|
|
|
|
<el-tabs v-model="activeName" class="tabs" :before-leave="confirmLeave">
|
|
|
|
<el-tabs v-model="activeName" class="tabs" >
|
|
|
|
<!-- 基础设置 -->
|
|
|
|
<!-- 基础设置 -->
|
|
|
|
<el-tab-pane label="基础设置" name="base">
|
|
|
|
<el-tab-pane label="基础设置" name="base">
|
|
|
|
<el-form ref="base" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%">
|
|
|
|
<el-form ref="base" :model="baseForm" :rules="rules" label-width="100px" style="width: 95%">
|
|
|
|
@ -12,7 +12,7 @@
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
<!-- TODO @Luowenfeng：商品主图，80 x 80 即可 -->
|
|
|
|
<!-- TODO @Luowenfeng：商品主图，80 x 80 即可 -->
|
|
|
|
<el-form-item label="商品主图" prop="picUrls">
|
|
|
|
<el-form-item label="商品主图" prop="picUrls">
|
|
|
|
<ImageUpload v-model="baseForm.picUrls" :value="baseForm.picUrls" :limit="10"/>
|
|
|
|
<ImageUpload v-model="baseForm.picUrls" :value="baseForm.picUrls" :limit="10" />
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
<!-- TODO @Luowenfeng：商品视频 -->
|
|
|
|
<!-- TODO @Luowenfeng：商品视频 -->
|
|
|
|
<el-form-item label="商品品牌" prop="brandId">
|
|
|
|
<el-form-item label="商品品牌" prop="brandId">
|
|
|
|
@ -38,10 +38,7 @@
|
|
|
|
<el-form ref="rates" :model="ratesForm" :rules="rules">
|
|
|
|
<el-form ref="rates" :model="ratesForm" :rules="rules">
|
|
|
|
<el-form-item label="启用多规格">
|
|
|
|
<el-form-item label="启用多规格">
|
|
|
|
<!-- TODO @Luowenfeng：改成开关的按钮；关闭，单规格；开启，多规格 -->
|
|
|
|
<!-- TODO @Luowenfeng：改成开关的按钮；关闭，单规格；开启，多规格 -->
|
|
|
|
<el-radio-group v-model="ratesForm.spec" @change="changeRadio">
|
|
|
|
<el-switch v-model="activeSwitch" @change="changeRadio"></el-switch>
|
|
|
|
<el-radio :label="1">单规格</el-radio>
|
|
|
|
|
|
|
|
<el-radio :label="2">多规格</el-radio>
|
|
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 动态添加规格属性 -->
|
|
|
|
<!-- 动态添加规格属性 -->
|
|
|
|
@ -67,7 +64,7 @@
|
|
|
|
<!-- 规格明细 -->
|
|
|
|
<!-- 规格明细 -->
|
|
|
|
<el-form-item label="规格明细">
|
|
|
|
<el-form-item label="规格明细">
|
|
|
|
<el-table :data="ratesForm.rates" border style="width: 100%" ref="ratesTable">
|
|
|
|
<el-table :data="ratesForm.rates" border style="width: 100%" ref="ratesTable">
|
|
|
|
<template v-if="ratesForm.spec == 2">
|
|
|
|
<template v-if="this.activeSwitch">
|
|
|
|
<el-table-column :key="index" v-for="(item, index) in dynamicSpec.filter(v => v.specName !== undefined)"
|
|
|
|
<el-table-column :key="index" v-for="(item, index) in dynamicSpec.filter(v => v.specName !== undefined)"
|
|
|
|
:label="item.specName">
|
|
|
|
:label="item.specName">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
@ -81,7 +78,7 @@
|
|
|
|
style="width: 100px; height: 50px"/>
|
|
|
|
style="width: 100px; height: 50px"/>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
<template v-if="ratesForm.spec === 2">
|
|
|
|
<template v-if="this.activeSwitch">
|
|
|
|
<el-table-column label="sku名称" :render-header="addRedStar" key="91">
|
|
|
|
<el-table-column label="sku名称" :render-header="addRedStar" key="91">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<el-form-item :prop="'rates.'+ scope.$index + '.name'" :rules="[{required: true, trigger: 'change'}]">
|
|
|
|
<el-form-item :prop="'rates.'+ scope.$index + '.name'" :rules="[{required: true, trigger: 'change'}]">
|
|
|
|
@ -142,7 +139,7 @@
|
|
|
|
<el-input v-model="scope.row.barCode"></el-input>
|
|
|
|
<el-input v-model="scope.row.barCode"></el-input>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</el-table-column>
|
|
|
|
</el-table-column>
|
|
|
|
<template v-if="ratesForm.spec === 2">
|
|
|
|
<template v-if="this.activeSwitch">
|
|
|
|
<el-table-column fixed="right" label="操作" width="50" key="100">
|
|
|
|
<el-table-column fixed="right" label="操作" width="50" key="100">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<template slot-scope="scope">
|
|
|
|
<el-button @click="scope.row.status = 1" type="text" size="small" v-show="scope.row.status == undefined || scope.row.status == 0 ">禁用</el-button>
|
|
|
|
<el-button @click="scope.row.status = 1" type="text" size="small" v-show="scope.row.status == undefined || scope.row.status == 0 ">禁用</el-button>
|
|
|
|
@ -153,7 +150,6 @@
|
|
|
|
</el-table>
|
|
|
|
</el-table>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="虚拟销量" prop="virtualSalesCount">
|
|
|
|
<el-form-item label="虚拟销量" prop="virtualSalesCount">
|
|
|
|
<!-- TODO @Luowenfeng：使用 input 类型即可 -->
|
|
|
|
|
|
|
|
<el-input v-model="baseForm.virtualSalesCount" placeholder="请输入虚拟销量" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"/>
|
|
|
|
<el-input v-model="baseForm.virtualSalesCount" placeholder="请输入虚拟销量" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"/>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
</el-form>
|
|
|
|
@ -196,8 +192,8 @@
|
|
|
|
|
|
|
|
|
|
|
|
import {getBrandList} from "@/api/mall/product/brand";
|
|
|
|
import {getBrandList} from "@/api/mall/product/brand";
|
|
|
|
import {getProductCategoryList} from "@/api/mall/product/category";
|
|
|
|
import {getProductCategoryList} from "@/api/mall/product/category";
|
|
|
|
import {createSpu, updateSpu, getSpu} from "@/api/mall/product/spu";
|
|
|
|
import {createSpu, updateSpu, getSpuDetail} from "@/api/mall/product/spu";
|
|
|
|
import {getPropertyPage,} from "@/api/mall/product/property";
|
|
|
|
import {getPropertyListAndValue,} from "@/api/mall/product/property";
|
|
|
|
import Editor from "@/components/Editor";
|
|
|
|
import Editor from "@/components/Editor";
|
|
|
|
import ImageUpload from "@/components/ImageUpload";
|
|
|
|
import ImageUpload from "@/components/ImageUpload";
|
|
|
|
|
|
|
|
|
|
|
|
@ -206,16 +202,13 @@ export default {
|
|
|
|
Editor,
|
|
|
|
Editor,
|
|
|
|
ImageUpload
|
|
|
|
ImageUpload
|
|
|
|
},
|
|
|
|
},
|
|
|
|
props:{//props列表
|
|
|
|
props:{
|
|
|
|
type:{
|
|
|
|
|
|
|
|
type:String,
|
|
|
|
|
|
|
|
default:"add" //定义参数默认值
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
obj: Object
|
|
|
|
obj: Object
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
activeName: "base", // TODO @Luowenfeng：切换时，不需要校验通过
|
|
|
|
activeSwitch: false,
|
|
|
|
|
|
|
|
activeName: "base",
|
|
|
|
propName: {
|
|
|
|
propName: {
|
|
|
|
checkStrictly: true,
|
|
|
|
checkStrictly: true,
|
|
|
|
label: "name",
|
|
|
|
label: "name",
|
|
|
|
@ -271,7 +264,7 @@ export default {
|
|
|
|
this.getListBrand();
|
|
|
|
this.getListBrand();
|
|
|
|
this.getListCategory();
|
|
|
|
this.getListCategory();
|
|
|
|
this.getPropertyPageList();
|
|
|
|
this.getPropertyPageList();
|
|
|
|
if(this.type == 'upd'){
|
|
|
|
if(this.obj.id != null){
|
|
|
|
this.updateType(this.obj.id)
|
|
|
|
this.updateType(this.obj.id)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
@ -280,14 +273,6 @@ export default {
|
|
|
|
this.dynamicSpec.splice(index, 1);
|
|
|
|
this.dynamicSpec.splice(index, 1);
|
|
|
|
this.changeRadio()
|
|
|
|
this.changeRadio()
|
|
|
|
},
|
|
|
|
},
|
|
|
|
async confirmLeave(active, old){
|
|
|
|
|
|
|
|
await this.$refs[old].validate((valid) => {
|
|
|
|
|
|
|
|
console.log(valid)
|
|
|
|
|
|
|
|
if (!valid) {
|
|
|
|
|
|
|
|
return reject();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
// 必选标识
|
|
|
|
// 必选标识
|
|
|
|
addRedStar(h, { column }) {
|
|
|
|
addRedStar(h, { column }) {
|
|
|
|
return [
|
|
|
|
return [
|
|
|
|
@ -296,13 +281,13 @@ export default {
|
|
|
|
];
|
|
|
|
];
|
|
|
|
},
|
|
|
|
},
|
|
|
|
changeRadio() {
|
|
|
|
changeRadio() {
|
|
|
|
|
|
|
|
this.activeSwitch ? this.ratesForm.spec = 2: this.ratesForm.spec = 1;
|
|
|
|
this.$refs.ratesTable.doLayout();
|
|
|
|
this.$refs.ratesTable.doLayout();
|
|
|
|
if (this.ratesForm.spec == 1) {
|
|
|
|
if (this.ratesForm.spec == 1) {
|
|
|
|
this.ratesForm.rates = [{}]
|
|
|
|
this.ratesForm.rates = [{}]
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
this.ratesForm.rates = []
|
|
|
|
this.ratesForm.rates = []
|
|
|
|
if (this.dynamicSpec.length > 0) {
|
|
|
|
if (this.dynamicSpec.length > 0) {
|
|
|
|
console.log( this.dynamicSpec)
|
|
|
|
|
|
|
|
this.buildRatesFormRates()
|
|
|
|
this.buildRatesFormRates()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -316,6 +301,7 @@ export default {
|
|
|
|
last.forEach(par1 => {
|
|
|
|
last.forEach(par1 => {
|
|
|
|
current.forEach(par2 => {
|
|
|
|
current.forEach(par2 => {
|
|
|
|
let v
|
|
|
|
let v
|
|
|
|
|
|
|
|
// 当两个对象合并时，需使用[1,2]方式生成数组，而当数组和对象合并时，需使用concat
|
|
|
|
if (par1 instanceof Array) {
|
|
|
|
if (par1 instanceof Array) {
|
|
|
|
v = par1.concat(par2)
|
|
|
|
v = par1.concat(par2)
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
@ -327,7 +313,12 @@ export default {
|
|
|
|
return array;
|
|
|
|
return array;
|
|
|
|
})
|
|
|
|
})
|
|
|
|
.forEach(v => {
|
|
|
|
.forEach(v => {
|
|
|
|
rates.push({spec: v, status: 0, name: Array.of(v).join()})
|
|
|
|
let spec = v;
|
|
|
|
|
|
|
|
// 当v为单个规格项时，会变成字符串。造成表格只截取第一个字符串，而不是数组的第一个元素
|
|
|
|
|
|
|
|
if (typeof v == 'string') {
|
|
|
|
|
|
|
|
spec = Array.of(v)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
rates.push({spec: spec, status: 0, name: Array.of(v).join()})
|
|
|
|
});
|
|
|
|
});
|
|
|
|
this.ratesForm.rates = rates
|
|
|
|
this.ratesForm.rates = rates
|
|
|
|
},
|
|
|
|
},
|
|
|
|
@ -363,7 +354,7 @@ export default {
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// 动态规格调整字段
|
|
|
|
// 动态规格调整字段
|
|
|
|
if (this.ratesForm.spec == 2) {
|
|
|
|
if (this.activeSwitch) {
|
|
|
|
rates.forEach(r => {
|
|
|
|
rates.forEach(r => {
|
|
|
|
let properties = []
|
|
|
|
let properties = []
|
|
|
|
Array.of(r.spec).forEach(s => {
|
|
|
|
Array.of(r.spec).forEach(s => {
|
|
|
|
@ -396,43 +387,42 @@ export default {
|
|
|
|
}else{
|
|
|
|
}else{
|
|
|
|
form.picUrls = Array.of(form.picUrls)
|
|
|
|
form.picUrls = Array.of(form.picUrls)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
console.log(rates)
|
|
|
|
|
|
|
|
form.skus = rates;
|
|
|
|
form.skus = rates;
|
|
|
|
form.specType = this.ratesForm.spec;
|
|
|
|
form.specType = this.ratesForm.spec;
|
|
|
|
form.categoryId = form.categoryIds[this.baseForm.categoryIds.length - 1];
|
|
|
|
form.categoryId = form.categoryIds[this.baseForm.categoryIds.length - 1];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(form.id == null){
|
|
|
|
if(form.id == null){
|
|
|
|
createSpu(form).then((response) => {
|
|
|
|
createSpu(form).then((response) => {
|
|
|
|
this.$modal.msgSuccess("新增成功");
|
|
|
|
this.$modal.msgSuccess("新增成功");
|
|
|
|
|
|
|
|
this.$emit("closeDialog");
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}else{
|
|
|
|
}else{
|
|
|
|
updateSpu(form).then((response) => {
|
|
|
|
updateSpu(form).then((response) => {
|
|
|
|
this.$modal.msgSuccess("修改成功");
|
|
|
|
this.$modal.msgSuccess("修改成功");
|
|
|
|
|
|
|
|
this.$emit("closeDialog");
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
this.$emit("closeDialog");
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
/** 查询规格 */
|
|
|
|
/** 查询规格 */
|
|
|
|
getPropertyPageList() {
|
|
|
|
getPropertyPageList() {
|
|
|
|
// 执行查询
|
|
|
|
// 执行查询
|
|
|
|
getPropertyPage().then((response) => {
|
|
|
|
getPropertyListAndValue().then((response) => {
|
|
|
|
this.propertyPageList = response.data.list;
|
|
|
|
this.propertyPageList = response.data;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 添加规格项目
|
|
|
|
changeSpec(val) {
|
|
|
|
changeSpec(val) {
|
|
|
|
let obj = this.propertyPageList.find(o => o.id == val);
|
|
|
|
let obj = this.propertyPageList.find(o => o.id == val);
|
|
|
|
let dynamicSpec = this.dynamicSpec;
|
|
|
|
let spec = this.dynamicSpec.find(o => o.specId == val)
|
|
|
|
let spec = dynamicSpec.find(o => o.specId == val)
|
|
|
|
|
|
|
|
spec.specId = obj.id;
|
|
|
|
spec.specId = obj.id;
|
|
|
|
spec.specName = obj.name;
|
|
|
|
spec.specName = obj.name;
|
|
|
|
spec.specValue = obj.propertyValueList;
|
|
|
|
spec.specValue = obj.values;
|
|
|
|
this.dynamicSpec = dynamicSpec;
|
|
|
|
|
|
|
|
this.buildRatesFormRates();
|
|
|
|
this.buildRatesFormRates();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
updateType(id){
|
|
|
|
updateType(id){
|
|
|
|
getSpu(id).then((response) =>{
|
|
|
|
getSpuDetail(id).then((response) =>{
|
|
|
|
let data = response.data;
|
|
|
|
let data = response.data;
|
|
|
|
this.baseForm.id=data.id;
|
|
|
|
this.baseForm.id=data.id;
|
|
|
|
this.baseForm.name=data.name;
|
|
|
|
this.baseForm.name=data.name;
|
|
|
|
@ -452,6 +442,7 @@ export default {
|
|
|
|
r.costPrice = this.divide(r.costPrice, 100)
|
|
|
|
r.costPrice = this.divide(r.costPrice, 100)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
if(this.ratesForm.spec == 2){
|
|
|
|
if(this.ratesForm.spec == 2){
|
|
|
|
|
|
|
|
this.activeSwitch = true;
|
|
|
|
data.productPropertyViews.forEach(p=>{
|
|
|
|
data.productPropertyViews.forEach(p=>{
|
|
|
|
let obj = {};
|
|
|
|
let obj = {};
|
|
|
|
obj.specId = p.propertyId;
|
|
|
|
obj.specId = p.propertyId;
|
|
|
|
|
luowenfeng
4 years ago