规格属性添加
parent
821fb4aacc
commit
0311f3bf35
|
|
@ -1,176 +1,156 @@
|
|||
|
||||
<template>
|
||||
|
||||
<el-row>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>选择属性关联关系</span>
|
||||
</div>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>已选择属性</span>
|
||||
</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-col :span="2" v-for="(attribute, index) in checkedAttributeList">
|
||||
<el-tag
|
||||
style="margin: 5px 10px"
|
||||
:key="attribute.name"
|
||||
closable @close="removeChecked(index)">
|
||||
{{attribute.name}}
|
||||
</el-tag>
|
||||
</el-col>
|
||||
|
||||
|
||||
</el-row>
|
||||
|
||||
</el-card>
|
||||
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>未选属性</span>
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-form :inline="true" :model="attributeQuery" class="demo-form-inline">
|
||||
<el-form-item label="屬性編碼">
|
||||
<el-input v-model="attributeQuery.code" placeholder="屬性編碼"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<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-button type="primary" @click="queryAttribute">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<el-row >
|
||||
<el-col style="padding: 5px 10px" :span="3" v-for="attribute in attributeList">
|
||||
<el-checkbox
|
||||
v-model="attributeIdList"
|
||||
:key="attribute.id"
|
||||
:value="attribute.id"
|
||||
:label="attribute.id"
|
||||
@change="checkedAttribute(attribute)"
|
||||
border>{{attribute.name}}</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="attributeQuery.pageNum"
|
||||
:limit.sync="attributeQuery.pageSize"
|
||||
@pagination="queryAttribute"
|
||||
/>
|
||||
</el-card>
|
||||
</el-card>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>选择属性关联关系</span>
|
||||
</div>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>已选择属性</span>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span="2" v-for="(attribute, index) in checkedAttributeList">
|
||||
<el-tag
|
||||
style="margin: 5px 10px"
|
||||
:key="attribute.name"
|
||||
closable @close="removeChecked(index)">
|
||||
{{ attribute.name }}
|
||||
</el-tag>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<el-divider></el-divider>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>未选属性</span>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-form :inline="true" :model="attributeQuery" class="demo-form-inline">
|
||||
<el-form-item label="属性编码">
|
||||
<el-input v-model="attributeQuery.code" placeholder="属性编码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="属性名称">
|
||||
<el-input v-model="attributeQuery.name" placeholder="属性名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="queryAttribute">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col style="padding: 5px 10px" :span="3" v-for="attribute in attributeList">
|
||||
<el-checkbox
|
||||
v-model="attributeIdList"
|
||||
:key="attribute.id"
|
||||
:value="attribute.id"
|
||||
:label="attribute.id"
|
||||
@change="checkedAttribute(attribute)"
|
||||
border>{{ attribute.name }}
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="attributeQuery.pageNum"
|
||||
:limit.sync="attributeQuery.pageSize"
|
||||
@pagination="queryAttribute"
|
||||
/>
|
||||
</el-card>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {listAttribute} from "@/api/product/attribute";
|
||||
|
||||
|
||||
export default {
|
||||
name: "CheckAttribute",
|
||||
props:{
|
||||
value:{
|
||||
type:Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
watch: {
|
||||
value: {
|
||||
handler(val){
|
||||
if (val.toString() !== this.attributeIdList.toString()){
|
||||
this.attributeIdList = val;
|
||||
this.checkedAttributeList = []
|
||||
}
|
||||
},
|
||||
immediate :true,
|
||||
}
|
||||
},
|
||||
|
||||
data(){
|
||||
return{
|
||||
attributeIdList: [],
|
||||
checkedAttributeList: [],
|
||||
attributeQuery:{
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
code: null,
|
||||
name: null
|
||||
},
|
||||
attributeTotal: 0,
|
||||
attributeList: []
|
||||
}
|
||||
name: "CheckAttribute",
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
|
||||
checkedList: {
|
||||
type: Array,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
if (val.toString() !== this.attributeIdList.toString()){
|
||||
this.attributeIdList = val;
|
||||
this.checkedAttributeList = []
|
||||
}
|
||||
},
|
||||
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() {
|
||||
return {
|
||||
attributeIdList: [],
|
||||
checkedAttributeList: [],
|
||||
attributeQuery: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
code: null,
|
||||
name: null
|
||||
},
|
||||
attributeTotal: 0,
|
||||
attributeList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.queryAttribute();
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 选中值触发方法
|
||||
*/
|
||||
checkedAttribute(attribute){
|
||||
let isCheck = this.attributeIdList.indexOf(attribute.id) > -1;
|
||||
if (isCheck){
|
||||
this.checkedAttributeList.push(attribute);
|
||||
}else {
|
||||
//删除
|
||||
this.checkedAttributeList.splice(
|
||||
this.checkedAttributeList.indexOf(attribute),1
|
||||
)
|
||||
}
|
||||
this.$emit("input", this.attributeIdList);
|
||||
},
|
||||
/**
|
||||
* 选中值触发方法
|
||||
*/
|
||||
checkedAttribute(attribute) {
|
||||
let isCheck = this.attributeIdList.indexOf(attribute.id) > -1;
|
||||
if (isCheck) {
|
||||
this.checkedAttributeList.push(attribute);
|
||||
} else {
|
||||
// 删除
|
||||
this.checkedAttributeList.splice(
|
||||
this.checkedAttributeList.indexOf(attribute), 1
|
||||
)
|
||||
}
|
||||
this.$emit("input", this.attributeIdList);
|
||||
},
|
||||
/**
|
||||
* 删除选中值
|
||||
* @param index
|
||||
*/
|
||||
removeChecked(index) {
|
||||
this.checkedAttributeList.splice(index, 1);
|
||||
this.attributeIdList.splice(index, 1);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 删除选中值
|
||||
* @param index
|
||||
*/
|
||||
removeChecked(index){
|
||||
console.log(index)
|
||||
this.checkedAttributeList.splice(index,1);
|
||||
this.attributeIdList.splice(index,1);
|
||||
},
|
||||
|
||||
/**
|
||||
* 查詢屬性
|
||||
*/
|
||||
queryAttribute(){
|
||||
|
||||
listAttribute(this.attributeQuery).then(response => {
|
||||
this.attributeList = response.data.rows;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
}
|
||||
/**
|
||||
* 查询属性
|
||||
*/
|
||||
queryAttribute() {
|
||||
listAttribute(this.attributeQuery).then(response => {
|
||||
this.attributeList = response.data.rows;
|
||||
this.total = response.data.total;
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
|
||||
<template>
|
||||
|
||||
<el-row>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
|
|
@ -10,55 +8,33 @@
|
|||
<div slot="header" class="clearfix">
|
||||
<span>已选择属性组</span>
|
||||
</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-col :span="2" v-for="(attributeGroup, index) in checkedAttributeGroupList">
|
||||
<el-tag
|
||||
style="margin: 5px 10px"
|
||||
:key="attributeGroup.name"
|
||||
closable @close="removeChecked(index)">
|
||||
{{attributeGroup.name}}
|
||||
{{ attributeGroup.name }}
|
||||
</el-tag>
|
||||
</el-col>
|
||||
|
||||
|
||||
</el-row>
|
||||
|
||||
</el-card>
|
||||
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>未选属性组</span>
|
||||
</div>
|
||||
|
||||
<el-row>
|
||||
<el-form :inline="true" :model="attributeGroupQuery" class="demo-form-inline">
|
||||
<el-form-item label="屬性編碼">
|
||||
<el-input v-model="attributeGroupQuery.code" placeholder="屬性編碼"></el-input>
|
||||
<el-form-item label="属性组名称">
|
||||
<el-input v-model="attributeGroupQuery.name" placeholder="属性名称"></el-input>
|
||||
</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-button type="primary" @click="queryAttributeGroup">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<el-row >
|
||||
<el-row>
|
||||
<el-col style="padding: 5px 10px" :span="3" v-for="attributeGroup in attributeGroupList">
|
||||
<el-checkbox
|
||||
v-model="attributeGroupIdList"
|
||||
|
|
@ -66,10 +42,10 @@
|
|||
:value="attributeGroup.id"
|
||||
:label="attributeGroup.id"
|
||||
@change="checkedAttributeGroup(attributeGroup)"
|
||||
border>{{attributeGroup.name}}</el-checkbox>
|
||||
border>{{ attributeGroup.name }}
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
|
|
@ -85,93 +61,92 @@
|
|||
<script>
|
||||
import {listAttributeGroup} from "@/api/product/attributeGroup";
|
||||
|
||||
|
||||
export default {
|
||||
name: "CheckAttributeGroup",
|
||||
props:{
|
||||
value:{
|
||||
type:Array,
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
checkedList: {
|
||||
type: Array,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
data(){
|
||||
return{
|
||||
data() {
|
||||
return {
|
||||
attributeGroupIdList: [],
|
||||
checkedAttributeGroupList: [],
|
||||
attributeGroupQuery:{
|
||||
attributeGroupQuery: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
code: null,
|
||||
name: null
|
||||
},
|
||||
attributeGroupTotal: 0,
|
||||
attributeGroupList: []
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
value: {
|
||||
handler(val){
|
||||
handler(val) {
|
||||
if (val.toString() !== this.attributeGroupIdList.toString()){
|
||||
this.attributeGroupIdList = val;
|
||||
this.checkedAttributeGroupList = []
|
||||
}
|
||||
},
|
||||
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() {
|
||||
this.queryAttributeGroup();
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 选中值触发方法
|
||||
*/
|
||||
checkedAttributeGroup(attributeGroup){
|
||||
checkedAttributeGroup(attributeGroup) {
|
||||
let isCheck = this.attributeGroupIdList.indexOf(attributeGroup.id) > -1;
|
||||
if (isCheck){
|
||||
if (isCheck) {
|
||||
this.checkedAttributeGroupList.push(attributeGroup);
|
||||
}else {
|
||||
//删除
|
||||
} else {
|
||||
// 删除
|
||||
this.checkedAttributeGroupList.splice(
|
||||
this.checkedAttributeGroupList.indexOf(attributeGroup),1
|
||||
this.checkedAttributeGroupList.indexOf(attributeGroup), 1
|
||||
)
|
||||
}
|
||||
this.$emit("input", this.attributeGroupIdList);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 删除选中值
|
||||
* @param index
|
||||
*/
|
||||
removeChecked(index){
|
||||
console.log(index)
|
||||
this.checkedAttributeGroupList.splice(index,1);
|
||||
this.attributeGroupIdList.splice(index,1);
|
||||
removeChecked(index) {
|
||||
this.checkedAttributeGroupList.splice(index, 1);
|
||||
this.attributeGroupIdList.splice(index, 1);
|
||||
},
|
||||
|
||||
/**
|
||||
* 查詢屬性
|
||||
* 查询属性
|
||||
*/
|
||||
queryAttributeGroup(){
|
||||
|
||||
queryAttributeGroup() {
|
||||
listAttributeGroup(this.attributeGroupQuery).then(response => {
|
||||
this.attributeGroupList = response.data.rows;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -152,15 +152,15 @@
|
|||
<el-tabs value="attribute" type="card" >
|
||||
|
||||
<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 label="商品属性组" name="attributeGroup">
|
||||
<CheckAttributeGroup v-model="form.attributeGroupList"/>
|
||||
<CheckAttributeGroup v-model="form.attributeGroupList" :checked-list="attributeGroupList"/>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="商品品牌" name="brand">
|
||||
<CheckBrandGroup v-model="form.attributeGroupList"/>
|
||||
<CheckBrandGroup v-model="form.brandIdList" :checked-list="brandInfoList"/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
|
|
|
|||
|
|
@ -116,54 +116,107 @@
|
|||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
</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-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 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>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { listRule, getRule, delRule, addRule, updateRule } from "@/api/product/rule";
|
||||
|
||||
|
|
@ -207,34 +260,111 @@ export default {
|
|||
{ required: true, message: "创建时间不能为空", trigger: "blur" }
|
||||
],
|
||||
},
|
||||
|
||||
ruleAddForm: {
|
||||
name: null,
|
||||
valueList: null,
|
||||
},
|
||||
ruleAddFormStatus: false,
|
||||
addRulePropertyValue: null
|
||||
addRulePropertyValue: null,
|
||||
|
||||
// ruleAddForm: {
|
||||
// name: null,
|
||||
// valueList: null,
|
||||
// },
|
||||
// ruleAddFormStatus: false,
|
||||
// addRulePropertyValue: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
removeRule(index){
|
||||
this.form.ruleAttrList.splice(index, 1);
|
||||
// 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) {
|
||||
this.form.ruleAttrList.splice(index,1);
|
||||
},
|
||||
|
||||
removeRuleProperty(valueList,index){
|
||||
valueList.splice(index, 1);
|
||||
valueList.splice(index,1);
|
||||
},
|
||||
|
||||
addRuleProperty(ruleAttr, continuousInput){
|
||||
if (this.addRulePropertyValue === null || this.addRulePropertyValue === 0){
|
||||
if (!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}]已经存在`,
|
||||
message:`规格[${ruleAttr.name}]属性值[${this.addRulePropertyValue}]已经存在`,
|
||||
type: 'warning'
|
||||
});
|
||||
return;
|
||||
|
|
@ -245,45 +375,53 @@ export default {
|
|||
ruleAttr.ruleAttrAddStatus = !ruleAttr.ruleAttrAddStatus
|
||||
}
|
||||
},
|
||||
|
||||
ruleAddFormFun(){
|
||||
if (this.ruleAddForm.name === null || this.ruleAddForm.name.length === 0){
|
||||
|
||||
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){
|
||||
|
||||
if (this.ruleAddForm.valueList == null || this.ruleAddForm.valueList.length == 0){
|
||||
this.$message({
|
||||
message: '规格属性不可为空',
|
||||
type: 'warning'
|
||||
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,
|
||||
}
|
||||
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;
|
||||
},
|
||||
|
||||
|
||||
/** 查询商品规格列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
|
|
|
|||
Loading…
Reference in New Issue