diff --git a/src/views/system/notifyManage/index.vue b/src/views/system/notifyManage/index.vue
index 950c1b1..cdff284 100644
--- a/src/views/system/notifyManage/index.vue
+++ b/src/views/system/notifyManage/index.vue
@@ -53,14 +53,14 @@
-
-
-
-
+
+ 用户
+ 设备
+
-
- 全选
+
+
@@ -111,7 +111,9 @@ export default {
{ value: '1', label: '设备1' },
{ value: '2', label: '设备2' },
{ value: '3', label: '设备3' }
- ]
+ ],
+ selectOptions: [],
+ showTags: false
}
},
computed: {
@@ -164,8 +166,47 @@ export default {
this.sendForm.sendObj = []
}
// console.log(this.sendForm.sendObj)
+ },
+ // el-select 选中值发生变化时触发,val为目前选中的值
+ changeSelect(val) {
+ // 最后选中得值
+ var endSelectVal = val[val.length - 1]
+ // showTags配合 collapse-tags 属性来
+ if (!val.includes('全选') && val.length === this.sendObjOptions.length) {
+ // 当前选中得值不包含“全选”,且其他项全选中
+ this.showTags = true
+ val.unshift('全选')
+ this.$refs.selectBox.$el.querySelector('.el-input__inner').style.height = '34px'
+ } else if (val.includes('全选') && val.length === 1) {
+ // 当前选中得值是“全选”时
+ this.showTags = true
+ this.sendObjOptions.map(item => {
+ val.push(item.value)
+ })
+ } else if (val.includes('全选') && val.length - 1 < this.sendObjOptions.length && endSelectVal === '全选') {
+ // 当前选中得值是其他项,未全部选完,而最后选中得是“全选”时
+ val = []
+ this.sendObjOptions.map(item => {
+ val.push(item.value)
+ })
+ val.unshift('全选')
+ this.showTags = true
+ this.$refs.selectBox.$el.querySelector('.el-input__inner').style.height = '34px'
+ } else if (val.includes('全选') && val.length - 1 < this.sendObjOptions.length) {
+ // 当前选中得值是其他项,未全部选完时
+ this.showTags = false
+ val = val.filter(item => {
+ return item !== '全选'
+ })
+ }
+ this.selectOptions = val // 赋值给select绑定得
+ },
+ pushObjChange(val) {
+ if (val) {
+ this.selectOptions = []
+ this.showTags = false
+ }
}
-
}
}
@@ -190,8 +231,9 @@ textarea{
padding: 10px 12px;
font-size: 14px;
}
-.push{
+::v-deep .el-radio-group{
width: 315px;
+ height: 32px;
border: 1px solid #339CFF;
border-radius: 3px;
padding-left: 14px;
@@ -200,10 +242,10 @@ textarea{
display: flex;
align-items: center;
margin-right: 50px;
- span{
- color: #3A99FD;
- margin-left: 10px;
- }
+ span{
+ color: #3A99FD;
+ margin-left: 10px;
+ }
}
}
.el-checkbox{