1 <!--标注选择标签弹层组件-->
2 <template>
3 <div class="message-box dialog-mask">
4 <div class="dialog-content">
5
6 <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
7 </el-checkbox>
8 <div ></div>
9 <div class="dialog-body">
10 <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
11 <el-checkbox v-for="(city,index) in labels" :label="city.name" :key="index">{{city.name}}
12 <span class="spanClo" :background-color':city.color}"></span>
13 </el-checkbox>
14 </el-checkbox-group>
15 </div>
16 <footer class="text-but">
17 <el-button class="dialog-content1" type="text" size="mini" @click="$close(false)">取消</el-button>
18 <el-button class="dialog-content1" type="text" size="mini" @click="labelDetermine">确定</el-button>
19 </footer>
20 </div>
21 </div>
22 </template>
23 <script>
24 export default {
25 data() {
26 return {
27 checkAll: false,
28 checkedCities: ['小泡状', '上海'],
29 allElection: [], // 全选
30 selectionArr: [], // 选中要传给后台的数据 对象
31 isIndeterminate: true
32 }
33 },
34 props: {
35 labels: Array,
36 },
37 mounted() {
38 this.allElectionFun();
39 this.DefaultFullSelection();
40 },
41 methods: {
42 async labelDetermine() {
43 // if (code == 0) {
44 console.log(this.selectionArr);
45 this.$close(this.selectionArr)
46 // } else if (code == 1) {
47 // this.$message({
48 // message: msg,
49 // type: "warning",
50 // duration: 1200
51 // });
52 // }
53 },
54 DefaultFullSelection(){ // 初始化 默认全部选中
55 this.checkedCities = this.allElection;
56 let checkedCount = this.checkedCities.length;
57 this.checkAll = checkedCount === this.labels.length;
58 this.isIndeterminate = checkedCount > 0 && checkedCount < this.labels.length;
59 this.selectionFun(this.checkedCities);
60 },
61
62 allElectionFun() { // 全选数组
63 this.allElection = [];
64 for (var i = 0; i < this.labels.length; i++) {
65 this.allElection.push(this.labels[i].name)
66 }
67 },
68
69 selectionFun(selectionArr) { // 获取选中的对象
70 this.selectionArr = [];
71 for (var i = 0; i < this.labels.length; i++) {
72 for (var j = 0; j < selectionArr.length; j++) {
73 if (selectionArr[j] === this.labels[i].name) {
74 this.selectionArr.push(this.labels[i])
75 }
76 }
77 }
78 },
79 handleCheckAllChange(val) { // 全选
80 this.allElectionFun();
81 this.checkedCities = val ? this.allElection : [];
82 this.isIndeterminate = false;
83 // console.log(this.checkedCities);
84 this.selectionFun(this.checkedCities);
85 console.log(this.selectionArr)
86 },
87 handleCheckedCitiesChange(value) { // 选中
88 let checkedCount = value.length;
89 this.checkAll = checkedCount === this.labels.length;
90 this.isIndeterminate = checkedCount > 0 && checkedCount < this.labels.length;
91 this.selectionFun(value);
92 console.log(this.selectionArr)
93 }
94 }
95 }
96 </script>
97
98 <style scoped>
99 .message-box {
100 position: absolute;
101 top: 0;
102 right: 0;
103 bottom: 0;
104 left: 0;
105 display: -ms-flexbox;
106 display: flex;
107 -ms-flex-align: center;
108 align-items: center;
109 -ms-flex-pack: center;
110 justify-content: center;
111 background-color: rgba(0, 0, 0, .33);
112 z-index: 10;
113 }
114
115 .dialog-content {
116 width: 500px;
117 height: 340px;
118 margin: auto;
119 padding: 20px;
120 background-color: white;
121 }
122
123 .dialog-body {
124 width: 100%;
125 height: 68%;
126 margin: 10px;
127 overflow: auto;
128 }
129
130 .text-but {
131 text-align: center;
132 }
133
134 .dialog-content1 {
135 display: inline-block;
136 width: 100px;
137 height: 40px;
138 border-radius: 4px;
139 background: #0071fe;
140 font-size: 18px;
141 color: #fff;
142 margin: 16px 70px 20px;
143 }
144
145 .spanClo {
146 width: 30px;
147 height: 10px;
148 display: inline-block;
149 margin: 16px 0 0 6px;
150 }
151 </style>
152 <style>
153
154 </style>