属性组组件完成
parent
079cb78d81
commit
e525cb67ef
|
|
@ -0,0 +1,151 @@
|
|||
<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>
|
||||
<span>已选属性ids ：：{{this.checkedAttributeIds}}</span>
|
||||
<span>属性：：{{this.checkedAttributeList}} </span>
|
||||
</div>
|
||||
<el-row :gutter="20" style="height: 100px">
|
||||
<el-col :span="3" v-for="(attribute,index) in checkedAttributeList">
|
||||
<el-tag
|
||||
style="margin: 0 10px"
|
||||
:key="attribute.name"
|
||||
closable
|
||||
@close="removeCheck(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-col :span="3"
|
||||
v-for="attribute in attributeList">
|
||||
<el-checkbox
|
||||
v-model="checkedAttributeIds"
|
||||
:value="attribute.id"
|
||||
:key="attribute.id"
|
||||
:label="attribute.id"
|
||||
@change="handleCheckedAttributeChange(attribute)"
|
||||
border>
|
||||
{{attribute.name}}
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import {listAttribute} from "@/api/product/attribute";
|
||||
import {listGroup} from "@/api/product/attribute_group";
|
||||
|
||||
export default {
|
||||
name:"AttributeGroupElement",
|
||||
// 接参
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
checkedAttribute:{
|
||||
type: Array,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
// 数据
|
||||
return{
|
||||
checkedAttributeIds: [],
|
||||
//已选属性数组
|
||||
checkedAttributeList: [],
|
||||
//商品属性表
|
||||
attributeList: [],
|
||||
// 属性组数据
|
||||
groupList: [],
|
||||
// 总条数
|
||||
total: 0,
|
||||
|
||||
}
|
||||
},
|
||||
// 挂载方法
|
||||
created() {
|
||||
this.getAttribute()
|
||||
},
|
||||
watch:{
|
||||
value: {
|
||||
handler(val) {
|
||||
console.log("进入初始化value::"+val.toString())
|
||||
if (val.toString() !== this.checkedAttributeIds.toString()){
|
||||
this.checkedAttributeIds = val
|
||||
this.checkedAttributeList = []
|
||||
}
|
||||
console.log("选中的ids：："+this.checkedAttributeIds)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
checkedAttribute:{
|
||||
handler(val) {
|
||||
console.log("进入初始化checkedAttribute::"+val.toString())
|
||||
if (val !==undefined && val.length>0){
|
||||
this.checkedAttributeList = val
|
||||
this.checkedAttributeIds = this.checkedAttributeList.map(checked => checked.id)
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
// 方法
|
||||
methods: {
|
||||
/** 属性复选框选择事件 */
|
||||
handleCheckedAttributeChange(attribute){
|
||||
let isChecked = this.checkedAttributeIds.indexOf(attribute.id) > -1;
|
||||
if (isChecked){
|
||||
this.checkedAttributeList.push(attribute)
|
||||
}else {
|
||||
//删除属性
|
||||
this.checkedAttributeList.splice(
|
||||
this.checkedAttributeList.indexOf(attribute),1
|
||||
)
|
||||
}
|
||||
this.$emit("input",this.checkedAttributeIds)
|
||||
console.log(this.checkedAttributeList)
|
||||
// this.checkedAttributeList.splice(this.checkedAttributeIds.indexOf(attribute.id),1)
|
||||
},
|
||||
//关闭标签
|
||||
removeCheck(index) {
|
||||
console.log(index)
|
||||
this.checkedAttributeList.splice(index,1);
|
||||
this.checkedAttributeIds.splice(index,1)
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
/** 查询属性列表 */
|
||||
getAttribute(){
|
||||
listAttribute(this.queryParams).then(response => {
|
||||
console.log('属性集合')
|
||||
console.log(response)
|
||||
this.attributeList = response.data.rows;
|
||||
this.total = response.data.total;
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
@ -37,6 +37,8 @@ import DictTag from '@/components/DictTag'
|
|||
import VueMeta from 'vue-meta'
|
||||
// 字典数据组件
|
||||
import DictData from '@/components/DictData'
|
||||
//属性组组件
|
||||
import AttributeGroupElement from '@/components/CheckedAttribute'
|
||||
|
||||
// 全局方法挂载
|
||||
Vue.prototype.getDicts = getDicts
|
||||
|
|
@ -57,6 +59,7 @@ Vue.component('Editor', Editor)
|
|||
Vue.component('FileUpload', FileUpload)
|
||||
Vue.component('ImageUpload', ImageUpload)
|
||||
Vue.component('ImagePreview', ImagePreview)
|
||||
Vue.component('AttributeGroupElement', AttributeGroupElement)
|
||||
|
||||
Vue.use(directive)
|
||||
Vue.use(plugins)
|
||||
|
|
|
|||
|
|
@ -137,52 +137,53 @@
|
|||
</el-form-item>
|
||||
</el-col>
|
||||
</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>
|
||||
{{this.form.checkedAttributeIds}}
|
||||
{{this.form.attributeList}}
|
||||
{{this.checkedAttribute}}
|
||||
</div>
|
||||
<el-row :gutter="20" style="height: 100px">
|
||||
<el-col :span="3" v-for="(attribute,index) in checkedAttribute">
|
||||
<el-tag
|
||||
style="margin: 0 10px"
|
||||
:key="attribute.name"
|
||||
closable
|
||||
@close="removeCheck(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-col :span="3"
|
||||
v-for="attribute in attributeList">
|
||||
<el-checkbox
|
||||
v-model="form.checkedAttributeIds"
|
||||
:value="attribute.id"
|
||||
:key="attribute.id"
|
||||
:label="attribute.id"
|
||||
@change="handleCheckedAttributeChange(attribute)"
|
||||
border>
|
||||
{{attribute.name}}
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-card>
|
||||
</el-row>
|
||||
<AttributeGroupElement v-model="form.checkedAttributeIds" :checked-attribute="this.checkedAttribute">
|
||||
</AttributeGroupElement>
|
||||
<!-- <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>-->
|
||||
<!-- {{this.form.checkedAttributeIds}}-->
|
||||
<!-- {{this.form.attributeList}}-->
|
||||
<!-- </div>-->
|
||||
<!-- <el-row :gutter="20" style="height: 100px">-->
|
||||
<!-- <el-col :span="3" v-for="(attribute,index) in checkedAttribute">-->
|
||||
<!-- <el-tag-->
|
||||
<!-- style="margin: 0 10px"-->
|
||||
<!-- :key="attribute.name"-->
|
||||
<!-- closable-->
|
||||
<!-- @close="removeCheck(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-col :span="3"-->
|
||||
<!-- v-for="attribute in attributeList">-->
|
||||
<!-- <el-checkbox-->
|
||||
<!-- v-model="form.checkedAttributeIds"-->
|
||||
<!-- :value="attribute.id"-->
|
||||
<!-- :key="attribute.id"-->
|
||||
<!-- :label="attribute.id"-->
|
||||
<!-- @change="handleCheckedAttributeChange(attribute)"-->
|
||||
<!-- border>-->
|
||||
<!-- {{attribute.name}}-->
|
||||
<!-- </el-checkbox>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
<!-- </el-card>-->
|
||||
<!-- </el-card>-->
|
||||
<!-- </el-row>-->
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
|
|
@ -195,17 +196,14 @@
|
|||
<script>
|
||||
import { listGroup, getGroup, delGroup, addGroup, updateGroup } from "@/api/product/attribute_group";
|
||||
import {listAttribute} from "@/api/product/attribute";
|
||||
import attribute from "@/views/product/attribute/index.vue";
|
||||
|
||||
export default {
|
||||
name: "Group",
|
||||
dicts: ['sys_yes_no'],
|
||||
data() {
|
||||
return {
|
||||
inputVisible: false,
|
||||
//已选属性数组
|
||||
checkedAttribute: [],
|
||||
//所选属性id集合
|
||||
//商品属性表
|
||||
attributeList: [],
|
||||
// 遮罩层
|
||||
|
|
@ -283,8 +281,6 @@ export default {
|
|||
/** 查询属性列表 */
|
||||
getAttribute(){
|
||||
listAttribute(this.queryParams).then(response => {
|
||||
console.log('属性集合')
|
||||
console.log(response)
|
||||
this.attributeList = response.data.rows;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
|
|
|
|||
Loading…
Reference in New Issue