商品共有元素
DongZeLiang
parent
8f3cdf7e8e
commit
50ceef857a
|
|
@ -16,6 +16,13 @@ export function getCategory(id) {
|
|||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 查询品类共有元素
|
||||
export function getTemplateAttribute(id) {
|
||||
return request({
|
||||
url: '/product/category/getTemplateAttribute/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 查询品类信息详细
|
||||
export function parentCommonElement(id) {
|
||||
|
|
|
|||
|
|
@ -143,19 +143,21 @@
|
|||
|
||||
<!-- 添加或修改商品信息对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
|
||||
<el-steps :active="stepNumber" finish-status="success">
|
||||
<el-step title="基本信息"></el-step>
|
||||
<el-step title="品类属性"></el-step>
|
||||
<el-step title="商品规格"></el-step>
|
||||
<el-step title="商品描述"></el-step>
|
||||
</el-steps>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<div v-show="stepNumber === 0">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="商品名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入商品名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品描述">
|
||||
<editor v-model="form.introduction" :min-height="192"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品图片" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品轮播图" prop="carouselImages">
|
||||
<image-upload v-model="form.carouselImages"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="商品状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
|
|
@ -165,17 +167,163 @@
|
|||
>{{dict.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="ruleId">
|
||||
<el-input v-model="form.ruleId" placeholder="请输入规格" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="品牌" prop="brandId">
|
||||
<el-input v-model="form.brandId" placeholder="请输入品牌" />
|
||||
<el-select
|
||||
v-model="form.brandId"
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="请输入关键词"
|
||||
:remote-method="remoteSearchBrandList"
|
||||
:loading="loading">
|
||||
<el-option
|
||||
v-for="brand in brandList"
|
||||
:key="brand.id"
|
||||
:label="brand.nam"
|
||||
:value="brand.id">
|
||||
<el-row>
|
||||
<image-preview :height="40" :width="40" :src="brand.logo" style="float: left;"/>
|
||||
<div style="float: left; margin: 2px 18px 0 15px; font-size: 20px;">{{brand.nam}}</div>
|
||||
</el-row>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-form-item label="商品图片" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-form-item label="商品轮播图" prop="carouselImages">
|
||||
<image-upload v-model="form.carouselImages"/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</div>
|
||||
<div v-show="stepNumber === 1">
|
||||
<el-form-item label="品类" prop="ruleId">
|
||||
<el-cascader
|
||||
style="width: 100%"
|
||||
v-model="categoryOptionValue"
|
||||
clearable
|
||||
:props="{'value': 'id', 'label': 'name'}"
|
||||
:options="categoryOptions"></el-cascader>
|
||||
</el-form-item>
|
||||
<el-tabs v-model="activeName" type="border-card">
|
||||
<el-tab-pane label="商品属性组" name="attributeGroup">
|
||||
<el-row style="overflow-x: auto; height: 300px;">
|
||||
<el-col :span="6" v-for="templateAttributeGroup in categoryCommonElement.templateAttributeGroupList">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>属性组【{{templateAttributeGroup.groupName}}】</span>
|
||||
</div>
|
||||
<div style="height: 200px; width: 100%;">
|
||||
<el-form ref="form" label-width="80px">
|
||||
<el-form-item :label="attribute.name" v-for="attribute in templateAttributeGroup.attributeList">
|
||||
<el-input v-model="attribute.value"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="商品属性" name="attribute">
|
||||
<el-row style="overflow-x: auto; height: 300px;">
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-col :span="6" v-for="index in 10">
|
||||
<el-form-item :label="'属性'+index">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="自有属性" name="third">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>添加商品属性</span>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-button v-show="!customPropertiesFormStatus" @click="customPropertiesFormStatus = true">添加自有属性</el-button>
|
||||
<el-form v-show="customPropertiesFormStatus" :inline="true" :model="customPropertiesForm" class="demo-form-inline">
|
||||
<el-form-item label="属性编码">
|
||||
<el-input v-model="customPropertiesForm.code" placeholder="属性编码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="属性名称">
|
||||
<el-input v-model="customPropertiesForm.name" placeholder="属性名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="属性值">
|
||||
<el-input v-model="customPropertiesForm.value" placeholder="属性值"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="customPropertiesFormStatus = false">确定</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>选择属性</span>
|
||||
</div>
|
||||
<el-row style="height: 80px; overflow-y: auto">
|
||||
<el-checkbox-group v-model="attributeCheckedList">
|
||||
<el-col :span="4" v-for="index in 40" style="margin: 5px 0">
|
||||
<el-checkbox :label="'复选框'+index" border></el-checkbox>
|
||||
</el-col>
|
||||
</el-checkbox-group>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>属性值填写</span>
|
||||
</div>
|
||||
<el-row style="overflow-x: auto; height: 300px;">
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-col :span="6" v-for="index in 10">
|
||||
<el-form-item :label="'属性'+index">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<div v-show="stepNumber === 2">
|
||||
<el-form-item label="规格" prop="ruleId">
|
||||
<el-select v-model="form.ruleId" placeholder="请选择" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="rule in ruleList"
|
||||
:key="rule.id"
|
||||
:label="rule.name"
|
||||
:value="rule.id">
|
||||
<span>{{rule.name}} - {{rule.ruleAttrList.map(ruleAttr => ruleAttr.name).toString()}}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-show="stepNumber === 3">
|
||||
<el-form-item label="商品描述">
|
||||
<editor v-model="form.introduction" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button style="margin-top: 12px;" @click="last" v-if="stepNumber > 0">上一步</el-button>
|
||||
<el-button style="margin-top: 12px;" @click="next" v-if="stepNumber < 3">下一步</el-button>
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
|
|
@ -185,6 +333,9 @@
|
|||
|
||||
<script>
|
||||
import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/product/info";
|
||||
import {listBrand} from "@/api/product/brand";
|
||||
import {getTemplateAttribute, listCategory} from "@/api/product/category";
|
||||
import {listRule} from "@/api/product/rule";
|
||||
|
||||
export default {
|
||||
name: "Info",
|
||||
|
|
@ -234,13 +385,82 @@ export default {
|
|||
createTime: [
|
||||
{ required: true, message: "创建时间不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
stepNumber: 1,
|
||||
brandList: [],
|
||||
categoryOptions: [],
|
||||
categoryOptionValue: [],
|
||||
ruleList: [],
|
||||
activeName: "attributeGroup",
|
||||
customPropertiesForm: {
|
||||
|
||||
},
|
||||
customPropertiesFormStatus: false,
|
||||
attributeCheckedList: [],
|
||||
categoryCommonElement: {
|
||||
templateAttributeGroupList: [],
|
||||
templateAttributeList: [],
|
||||
attributeList: []
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
categoryOptionValue: {
|
||||
handler(value){
|
||||
if (value !== null && value !== undefined && value.length > 0){
|
||||
this.form.mianType = value[0];
|
||||
this.form.parentType = value[1];
|
||||
this.form.type = value[2];
|
||||
}else {
|
||||
this.form.mianType = null;
|
||||
this.form.parentType = null;
|
||||
this.form.type = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
"form.type": {
|
||||
handler(value) {
|
||||
console.log(value)
|
||||
if (value != null){
|
||||
getTemplateAttribute(value).then(response => {
|
||||
const {data} = response;
|
||||
const {templateAttributeGroupList,templateAttributeList,attributeList} = data;
|
||||
this.categoryCommonElement.templateAttributeGroupList = templateAttributeGroupList;
|
||||
this.categoryCommonElement.templateAttributeList = templateAttributeList;
|
||||
this.categoryCommonElement.attributeList = attributeList;
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
initRuleList(){
|
||||
listRule({"params[isPage]": false}).then(response => {
|
||||
this.ruleList = response.data;
|
||||
});
|
||||
},
|
||||
initCategoryTree(){
|
||||
listCategory().then(response => {
|
||||
this.categoryOptions = [];
|
||||
this.categoryOptions = this.handleTree(response.data, "id", "parentId");
|
||||
console.log(this.categoryOptions)
|
||||
});
|
||||
},
|
||||
remoteSearchBrandList(queryValue){
|
||||
listBrand({"nam": queryValue, "params[isPage]": false}).then(response => {
|
||||
this.brandList = response.data;
|
||||
});
|
||||
},
|
||||
last() {
|
||||
this.stepNumber--
|
||||
},
|
||||
next() {
|
||||
this.stepNumber++
|
||||
},
|
||||
/** 查询商品信息列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
|
|
@ -276,6 +496,8 @@ export default {
|
|||
updateTime: null
|
||||
};
|
||||
this.resetForm("form");
|
||||
this.initCategoryTree();
|
||||
this.initRuleList();
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
|
|
@ -348,3 +570,11 @@ export default {
|
|||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.el-select-dropdown__item{
|
||||
height: 45px;
|
||||
}
|
||||
.box-card {
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue