规格属性添加

day9
xiaohuang 2024-04-02 17:33:40 +08:00
parent 821fb4aacc
commit 0311f3bf35
4 changed files with 376 additions and 283 deletions

View File

@ -1,6 +1,4 @@
<template> <template>
<el-row> <el-row>
<el-card class="box-card"> <el-card class="box-card">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
@ -10,14 +8,6 @@
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>已选择属性</span> <span>已选择属性</span>
</div> </div>
<!-- <el-row>-->
<!-- <el-tag>标签一</el-tag>-->
<!-- <el-tag type="success">标签二</el-tag>-->
<!-- <el-tag type="info">标签三</el-tag>-->
<!-- <el-tag type="warning">标签四</el-tag>-->
<!-- <el-tag type="danger">标签五</el-tag>-->
<!-- </el-row>-->
<el-row> <el-row>
<el-col :span="2" v-for="(attribute, index) in checkedAttributeList"> <el-col :span="2" v-for="(attribute, index) in checkedAttributeList">
<el-tag <el-tag
@ -27,37 +17,26 @@
{{ attribute.name }} {{ attribute.name }}
</el-tag> </el-tag>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-card>
<el-divider></el-divider> <el-divider></el-divider>
<el-card class="box-card"> <el-card class="box-card">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>未选属性</span> <span>未选属性</span>
</div> </div>
<el-row> <el-row>
<el-form :inline="true" :model="attributeQuery" class="demo-form-inline"> <el-form :inline="true" :model="attributeQuery" class="demo-form-inline">
<el-form-item label="屬性編碼"> <el-form-item label="属性编码">
<el-input v-model="attributeQuery.code" placeholder="屬性編碼"></el-input> <el-input v-model="attributeQuery.code" placeholder="属性编码"></el-input>
</el-form-item> </el-form-item>
</el-form> <el-form-item label="属性名称">
<el-input v-model="attributeQuery.name" placeholder="属性名称"></el-input>
<el-form :inline="true" :model="attributeQuery" class="demo-form-inline">
<el-form-item label="屬性名稱">
<el-input v-model="attributeQuery.name" placeholder="屬性名稱"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="queryAttribute"></el-button> <el-button type="primary" @click="queryAttribute"></el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-row> </el-row>
<el-row> <el-row>
<el-col style="padding: 5px 10px" :span="3" v-for="attribute in attributeList"> <el-col style="padding: 5px 10px" :span="3" v-for="attribute in attributeList">
<el-checkbox <el-checkbox
@ -66,10 +45,10 @@
:value="attribute.id" :value="attribute.id"
:label="attribute.id" :label="attribute.id"
@change="checkedAttribute(attribute)" @change="checkedAttribute(attribute)"
border>{{attribute.name}}</el-checkbox> border>{{ attribute.name }}
</el-checkbox>
</el-col> </el-col>
</el-row> </el-row>
<pagination <pagination
v-show="total>0" v-show="total>0"
:total="total" :total="total"
@ -85,17 +64,18 @@
<script> <script>
import {listAttribute} from "@/api/product/attribute"; import {listAttribute} from "@/api/product/attribute";
export default { export default {
name: "CheckAttribute", name: "CheckAttribute",
props: { props: {
value: { value: {
type: Array, type: Array,
default: [] default: []
},
checkedList: {
type: Array,
default: null
} }
}, },
watch: { watch: {
value: { value: {
handler(val) { handler(val) {
@ -105,9 +85,17 @@ export default {
} }
}, },
immediate: true, immediate: true,
},
checkedList: {
handler(val){
if (val !== undefined && val.length > 0){
this.checkedAttributeList = val;
this.attributeIdList = this.checkedAttributeList.map(checked => checked.id);
}
},
immediate: true
} }
}, },
data() { data() {
return { return {
attributeIdList: [], attributeIdList: [],
@ -122,11 +110,9 @@ export default {
attributeList: [] attributeList: []
} }
}, },
created() { created() {
this.queryAttribute(); this.queryAttribute();
}, },
methods: { methods: {
/** /**
* 选中值触发方法 * 选中值触发方法
@ -143,34 +129,28 @@ export default {
} }
this.$emit("input", this.attributeIdList); this.$emit("input", this.attributeIdList);
}, },
/** /**
* 删除选中值 * 删除选中值
* @param index * @param index
*/ */
removeChecked(index) { removeChecked(index) {
console.log(index)
this.checkedAttributeList.splice(index, 1); this.checkedAttributeList.splice(index, 1);
this.attributeIdList.splice(index, 1); this.attributeIdList.splice(index, 1);
}, },
/** /**
* 查詢屬 * 查询属
*/ */
queryAttribute() { queryAttribute() {
listAttribute(this.attributeQuery).then(response => { listAttribute(this.attributeQuery).then(response => {
this.attributeList = response.data.rows; this.attributeList = response.data.rows;
this.total = response.data.total; this.total = response.data.total;
this.loading = false;
}); });
}, },
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped>
</style> </style>

View File

@ -1,6 +1,4 @@
<template> <template>
<el-row> <el-row>
<el-card class="box-card"> <el-card class="box-card">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
@ -10,14 +8,6 @@
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>已选择属性组</span> <span>已选择属性组</span>
</div> </div>
<!-- <el-row>-->
<!-- <el-tag>标签一</el-tag>-->
<!-- <el-tag type="success">标签二</el-tag>-->
<!-- <el-tag type="info">标签三</el-tag>-->
<!-- <el-tag type="warning">标签四</el-tag>-->
<!-- <el-tag type="danger">标签五</el-tag>-->
<!-- </el-row>-->
<el-row> <el-row>
<el-col :span="2" v-for="(attributeGroup, index) in checkedAttributeGroupList"> <el-col :span="2" v-for="(attributeGroup, index) in checkedAttributeGroupList">
<el-tag <el-tag
@ -27,37 +17,23 @@
{{ attributeGroup.name }} {{ attributeGroup.name }}
</el-tag> </el-tag>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-card>
<el-divider></el-divider> <el-divider></el-divider>
<el-card class="box-card"> <el-card class="box-card">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>未选属性组</span> <span>未选属性组</span>
</div> </div>
<el-row> <el-row>
<el-form :inline="true" :model="attributeGroupQuery" class="demo-form-inline"> <el-form :inline="true" :model="attributeGroupQuery" class="demo-form-inline">
<el-form-item label="屬性編碼"> <el-form-item label="属性组名称">
<el-input v-model="attributeGroupQuery.code" placeholder="屬性編碼"></el-input> <el-input v-model="attributeGroupQuery.name" placeholder="属性名称"></el-input>
</el-form-item> </el-form-item>
</el-form>
<el-form :inline="true" :model="attributeGroupQuery" class="demo-form-inline">
<el-form-item label="屬性名稱">
<el-input v-model="attributeGroupQuery.name" placeholder="屬性名稱"></el-input>
</el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="queryAttributeGroup"></el-button> <el-button type="primary" @click="queryAttributeGroup"></el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-row> </el-row>
<el-row> <el-row>
<el-col style="padding: 5px 10px" :span="3" v-for="attributeGroup in attributeGroupList"> <el-col style="padding: 5px 10px" :span="3" v-for="attributeGroup in attributeGroupList">
<el-checkbox <el-checkbox
@ -66,10 +42,10 @@
:value="attributeGroup.id" :value="attributeGroup.id"
:label="attributeGroup.id" :label="attributeGroup.id"
@change="checkedAttributeGroup(attributeGroup)" @change="checkedAttributeGroup(attributeGroup)"
border>{{attributeGroup.name}}</el-checkbox> border>{{ attributeGroup.name }}
</el-checkbox>
</el-col> </el-col>
</el-row> </el-row>
<pagination <pagination
v-show="total>0" v-show="total>0"
:total="total" :total="total"
@ -85,17 +61,18 @@
<script> <script>
import {listAttributeGroup} from "@/api/product/attributeGroup"; import {listAttributeGroup} from "@/api/product/attributeGroup";
export default { export default {
name: "CheckAttributeGroup", name: "CheckAttributeGroup",
props: { props: {
value: { value: {
type: Array, type: Array,
default: [] default: []
},
checkedList: {
type: Array,
default: null
} }
}, },
data() { data() {
return { return {
attributeGroupIdList: [], attributeGroupIdList: [],
@ -103,14 +80,12 @@ export default {
attributeGroupQuery: { attributeGroupQuery: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
code: null,
name: null name: null
}, },
attributeGroupTotal: 0, attributeGroupTotal: 0,
attributeGroupList: [] attributeGroupList: []
} }
}, },
watch: { watch: {
value: { value: {
handler(val) { handler(val) {
@ -120,13 +95,20 @@ export default {
} }
}, },
immediate: true, immediate: true,
},
checkedList: {
handler(val){
if (val !== undefined && val.length > 0){
this.checkedAttributeGroupList = val;
this.attributeGroupIdList = this.checkedAttributeGroupList.map(checked => checked.id);
}
},
immediate: true
} }
}, },
created() { created() {
this.queryAttributeGroup(); this.queryAttributeGroup();
}, },
methods: { methods: {
/** /**
* 选中值触发方法 * 选中值触发方法
@ -143,35 +125,28 @@ export default {
} }
this.$emit("input", this.attributeGroupIdList); this.$emit("input", this.attributeGroupIdList);
}, },
/** /**
* 删除选中值 * 删除选中值
* @param index * @param index
*/ */
removeChecked(index) { removeChecked(index) {
console.log(index)
this.checkedAttributeGroupList.splice(index, 1); this.checkedAttributeGroupList.splice(index, 1);
this.attributeGroupIdList.splice(index, 1); this.attributeGroupIdList.splice(index, 1);
}, },
/** /**
* 詢屬 * 询属
*/ */
queryAttributeGroup() { queryAttributeGroup() {
listAttributeGroup(this.attributeGroupQuery).then(response => { listAttributeGroup(this.attributeGroupQuery).then(response => {
this.attributeGroupList = response.data.rows; this.attributeGroupList = response.data.rows;
this.total = response.data.total; this.total = response.data.total;
this.loading = false;
}); });
}, },
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped>
</style> </style>

View File

@ -152,15 +152,15 @@
<el-tabs value="attribute" type="card" > <el-tabs value="attribute" type="card" >
<el-tab-pane label="商品属性" name="attribute"> <el-tab-pane label="商品属性" name="attribute">
<CheckAttribute v-model="form.attributeGroupList"/> <CheckAttribute v-model="form.attributeIdList" :checked-list="attributeInfoList"/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="商品属性组" name="attributeGroup"> <el-tab-pane label="商品属性组" name="attributeGroup">
<CheckAttributeGroup v-model="form.attributeGroupList"/> <CheckAttributeGroup v-model="form.attributeGroupList" :checked-list="attributeGroupList"/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="商品品牌" name="brand"> <el-tab-pane label="商品品牌" name="brand">
<CheckBrandGroup v-model="form.attributeGroupList"/> <CheckBrandGroup v-model="form.brandIdList" :checked-list="brandInfoList"/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>

View File

@ -116,15 +116,57 @@
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /> <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item> </el-form-item>
<!-- <el-row v-for="(ruleAttr, index) in form.ruleAttrList">-->
<!-- <el-row style="margin: 20px 0">-->
<!-- <el-tag-->
<!-- :key="ruleAttr.name"-->
<!-- @close="removeRule(index)"-->
<!-- closable>-->
<!-- {{ruleAttr.name}}-->
<!-- </el-tag>-->
<!-- </el-row>-->
<!-- <el-row style="margin: 10px 0">-->
<!-- <el-tag-->
<!-- style="float: left; margin-right: 20px"-->
<!-- v-for="(ruleProperty, index) in ruleAttr.valueList"-->
<!-- :key="ruleProperty"-->
<!-- @close="removeRuleProperty(ruleAttr.valueList, index)"-->
<!-- closable>-->
<!-- {{ruleProperty}}-->
<!-- </el-tag>-->
<!-- <el-button v-if="!ruleAttr.ruleAttrAddStatus" @click="ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus" size="mini"></el-button>-->
<!-- <el-input v-if="ruleAttr.ruleAttrAddStatus"-->
<!-- v-model="addRulePropertyValue"-->
<!-- @blur="addRuleProperty(ruleAttr, false)"-->
<!-- @keyup.enter.native="addRuleProperty(ruleAttr, true)"-->
<!-- size="mini" placeholder="请输入规格属性值" style="float: left; width: 150px"/>-->
<!-- </el-row>-->
<!-- <el-divider></el-divider>-->
<!-- </el-row>-->
<!-- <el-button v-if="!ruleAddFormStatus" @click="ruleAddFormStatus = !ruleAddFormStatus"></el-button>-->
<!-- <el-form v-if="ruleAddFormStatus" :inline="true" :model="ruleAddForm" class="demo-form-inline">-->
<!-- <el-form-item label="规格名称">-->
<!-- <el-input v-model="ruleAddForm.name" placeholder="请输入规格名称"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="规格属性">-->
<!-- <el-input v-model="ruleAddForm.valueList" placeholder="请输入规格属性"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item>-->
<!-- <el-button type="primary" @click="ruleAddFormFun"></el-button>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </el-form>-->
<el-row v-for="(ruleAttr,index) in form.ruleAttrList"> <el-row v-for="(ruleAttr,index) in form.ruleAttrList">
<el-row style="margin: 20px 0"> <el-row style="margin: 20px 0">
<el-tag <el-tag
:key="ruleAttr.name" key="ruleAttr.name"
@close="removeRule(index)" @close="removeRule(index)"
closable> closable>
{{ruleAttr.name}} {{ruleAttr.name}}
</el-tag> </el-tag>
</el-row> </el-row>
<el-row style="margin: 10px 0"> <el-row style="margin: 10px 0">
<el-tag <el-tag
style="float: left;margin-right: 20px" style="float: left;margin-right: 20px"
@ -134,36 +176,47 @@
closable> closable>
{{ruleProperty}} {{ruleProperty}}
</el-tag> </el-tag>
<el-button v-if="!ruleAttr.ruleAttrAddStatus" @click="ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus" size="mini"></el-button> <el-button v-if="!ruleAttr.ruleAttrAddStatus" @click="ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus" size="mini"></el-button>
<el-input v-if="ruleAttr.ruleAttrAddStatus" <el-input v-if="ruleAttr.ruleAttrAddStatus"
v-model="addRulePropertyValue" v-model="addRulePropertyValue"
@blur="addRuleProperty(ruleAttr, false)" @blur="addRuleProperty(ruleAttr, false)"
@keyup.enter.native="addRuleProperty(ruleAttr,true)" @keyup.enter.native="addRuleProperty(ruleAttr,true)"
size="mini" placeholder="请输入规格属性值" style="float: left; width: 150px"/> size="mini" placeholder="请输入规格属性值" style="float: left; width: 150px"/>
</el-row> </el-row>
<el-divider></el-divider> <el-divider></el-divider>
</el-row> </el-row>
<el-button v-if="!ruleAddFormStatus" @click="ruleAddFormStatus = !ruleAddFormStatus"></el-button> <el-button v-if="!ruleAddFormStatus" @click="ruleAddFormStatus = !ruleAddFormStatus"></el-button>
<el-form v-if="ruleAddFormStatus" :inline="true" :model="ruleAddForm" class="demo-form-inline"> <el-form v-if="ruleAddFormStatus" :inline="true" :model="ruleAddForm" class="demo-form-inline">
<el-form-item label="规格名称"> <el-form-item label="规格名称">
<el-input v-model="ruleAddForm.name" placeholder="请输入规格名称"></el-input> <el-input v-model="ruleAddForm.name" placeholder="请输入规格名称"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="规格属性"> <el-form-item label="规格属性">
<el-input v-model="ruleAddForm.valueList" placeholder="请输入规格属性"></el-input> <el-input v-model="ruleAddForm.valueList" placeholder="请输入规格属性"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="ruleAddFormFun"></el-button> <el-button type="primary" @click="ruleAddFormFun"></el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button> <el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button> <el-button @click="cancel"> </el-button>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { listRule, getRule, delRule, addRule, updateRule } from "@/api/product/rule"; import { listRule, getRule, delRule, addRule, updateRule } from "@/api/product/rule";
@ -207,31 +260,108 @@ export default {
{ required: true, message: "创建时间不能为空", trigger: "blur" } { required: true, message: "创建时间不能为空", trigger: "blur" }
], ],
}, },
ruleAddForm: { ruleAddForm: {
name: null, name: null,
valueList: null, valueList: null,
}, },
ruleAddFormStatus: false, ruleAddFormStatus: false,
addRulePropertyValue: null addRulePropertyValue: null,
// ruleAddForm: {
// name: null,
// valueList: null,
// },
// ruleAddFormStatus: false,
// addRulePropertyValue: null
}; };
}, },
created() { created() {
this.getList(); this.getList();
}, },
methods: { methods: {
// removeRule(index){
// this.form.ruleAttrList.splice(index, 1);
// },
// removeRuleProperty(valueList,index){
// valueList.splice(index, 1);
// },
// addRuleProperty(ruleAttr, continuousInput){
// if (this.addRulePropertyValue === null || this.addRulePropertyValue === 0){
// if (!continuousInput){
// ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus
// }
// return;
// }
// if (ruleAttr.valueList.indexOf(this.addRulePropertyValue) > -1){
// this.$message({
// message: `[${ruleAttr.name}][${this.addRulePropertyValue}]`,
// type: 'warning'
// });
// return;
// }
// ruleAttr.valueList.push(this.addRulePropertyValue)
// this.addRulePropertyValue = null;
// if (!continuousInput){
// ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus
// }
// },
// ruleAddFormFun(){
// if (this.ruleAddForm.name === null || this.ruleAddForm.name.length === 0){
// this.$message({
// message: '',
// type: 'warning'
// });
// return;
// }
// if (this.ruleAddForm.valueList === null || this.ruleAddForm.valueList.length === 0){
// this.$message({
// message: '',
// type: 'warning'
// });
// return;
// }
//
// let ruleAttr = this.form.ruleAttrList.find(ruleAttr => ruleAttr.name === this.ruleAddForm.name);
// if (ruleAttr === undefined){
// this.form.ruleAttrList.push({
// "name": this.ruleAddForm.name,
// "valueList": [this.ruleAddForm.valueList],
// "ruleAttrAddStatus": false
// })
// }else {
// if (ruleAttr.valueList.indexOf(this.ruleAddForm.valueList) > -1){
// this.$message({
// message: `[${this.ruleAddForm.name}][${this.ruleAddForm.valueList}]`,
// type: 'warning'
// });
// return;
// }
// ruleAttr.valueList.push(this.ruleAddForm.valueList)
// }
// this.ruleAddForm = {
// name: null,
// valueList: null,
// }
// this.ruleAddFormStatus = false;
// },
removeRule(index) { removeRule(index) {
this.form.ruleAttrList.splice(index,1); this.form.ruleAttrList.splice(index,1);
}, },
removeRuleProperty(valueList,index){ removeRuleProperty(valueList,index){
valueList.splice(index,1); valueList.splice(index,1);
}, },
addRuleProperty(ruleAttr, continuousInput){ addRuleProperty(ruleAttr, continuousInput){
if (this.addRulePropertyValue === null || this.addRulePropertyValue === 0){ if (this.addRulePropertyValue == null || this.addRulePropertyValue == 0){
if (!continuousInput){ if (continuousInput){
ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus
} }
return; return;
} }
if (ruleAttr.valueList.indexOf(this.addRulePropertyValue) > -1){ if (ruleAttr.valueList.indexOf(this.addRulePropertyValue) > -1){
this.$message({ this.$message({
message:`规格[${ruleAttr.name}]属性值[${this.addRulePropertyValue}]已经存在`, message:`规格[${ruleAttr.name}]属性值[${this.addRulePropertyValue}]已经存在`,
@ -245,15 +375,19 @@ export default {
ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus
} }
}, },
ruleAddFormFun(){ ruleAddFormFun(){
if (this.ruleAddForm.name === null || this.ruleAddForm.name.length === 0){
if (this.ruleAddForm.name == null || this.ruleAddForm.name.length == 0){
this.$message({ this.$message({
message: '规格名称不可为空', message: '规格名称不可为空',
type: 'warning' type: 'warning'
}); })
return; return;
} }
if (this.ruleAddForm.valueList === null || this.ruleAddForm.valueList.length === 0){
if (this.ruleAddForm.valueList == null || this.ruleAddForm.valueList.length == 0){
this.$message({ this.$message({
message: '规格属性不可为空', message: '规格属性不可为空',
type:'warning' type:'warning'
@ -261,8 +395,8 @@ export default {
return; return;
} }
let ruleAttr = this.form.ruleAttrList.find(ruleAttr => ruleAttr.name === this.ruleAddForm.name); let ruleAttr = this.form.ruleAttrList.find(ruleAttr => ruleAttr.name == this.ruleAddForm.name);
if (ruleAttr === undefined){ if (ruleAttr == undefined){
this.form.ruleAttrList.push({ this.form.ruleAttrList.push({
"name": this.ruleAddForm.name, "name": this.ruleAddForm.name,
"valueList": [this.ruleAddForm.valueList], "valueList": [this.ruleAddForm.valueList],
@ -278,12 +412,16 @@ export default {
} }
ruleAttr.valueList.push(this.ruleAddForm.valueList) ruleAttr.valueList.push(this.ruleAddForm.valueList)
} }
this.ruleAddForm = { this.ruleAddForm = {
name: null, name: null,
valueList: null, valueList: null,
} }
this.ruleAddFormStatus = false; this.ruleAddFormStatus = false;
}, },
/** 查询商品规格列表 */ /** 查询商品规格列表 */
getList() { getList() {
this.loading = true; this.loading = true;