103 lines
2.1 KiB
Vue
103 lines
2.1 KiB
Vue
<template>
|
|
<div class="label-wrapper">
|
|
<div class="list-box">
|
|
<div class="label-box" v-for="(item,index) in attrs" :key="index">
|
|
<div class="title">{{item.value}}</div>
|
|
<div class="list">
|
|
<div class="label-item" :class="label.select?'on':''" v-for="(label,j) in item.details" :key="j" @click="selectAttr(label,j)">{{label.name}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<el-button type="primary" plain size="mini" class="btns" @click="cancel">取消</el-button>
|
|
<el-button type="primary" plain size="mini" class="btns" @click="reset">重置</el-button>
|
|
<el-button type="primary" size="mini" class="btns" @click="subBtn">确定</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: "attrList",
|
|
props:{
|
|
attrs: {
|
|
type: Array,
|
|
default: function () {
|
|
return [];
|
|
}
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods:{
|
|
selectAttr(label,index){
|
|
label.select = !label.select;
|
|
this.$emit('activeData',JSON.parse(JSON.stringify(this.attrs)))
|
|
},
|
|
cancel(){
|
|
this.$emit('close')
|
|
},
|
|
reset(){
|
|
let data = this.attrs;
|
|
data.map(el=>{
|
|
el.details.map(label=>{
|
|
label.select = false
|
|
})
|
|
})
|
|
this.attrs = data;
|
|
},
|
|
subBtn(){
|
|
this.$emit('subAttrs')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.label-wrapper{
|
|
.list{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.label-item{
|
|
margin: 10px 8px 10px 0;
|
|
padding: 3px 14px;
|
|
background: #EEEEEE;
|
|
color: #333333;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
border: 1px solid #EEEEEE;
|
|
&.on{
|
|
color: var(--prev-color-primary);
|
|
border-color: var(--prev-color-primary);
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.footer{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 40px;
|
|
button{
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
.btn{
|
|
width: 60px;
|
|
height: 24px;
|
|
}
|
|
.title{
|
|
font-size: 13px;
|
|
}
|
|
.list-box{
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
max-height: 240px;
|
|
}
|
|
</style>
|