github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-03-01 05:30:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 会员选择支持全选列表

Browse Source
This commit is contained in:
kuaifan 2023-01-28 20:45:25 +08:00
parent 653ae3ec39
commit 786c059732
2 changed files with 91 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
resources/assets/js/components/UserInput.vue
View File

@ -18,7 +18,13 @@
multiple
filterable
transfer-class-name="common-user-transfer">
<div v-if="multipleMax" slot="drop-prepend" class="user-drop-prepend">{{$L('最多只能选择' + multipleMax + '个')}}</div>
<div v-if="multipleMax" slot="drop-prepend" class="user-drop-prepend">
<div class="user-drop-text">
{{$L('最多只能选择' + multipleMax + '个')}}
<em v-if="selects.length">({{$L(`已选${selects.length}个`)}})</em>
</div>
<Checkbox class="user-drop-check" v-model="multipleCheck" @on-change="onMultipleChange"></Checkbox>
</div>
<slot name="option-prepend"></slot>
<Option
v-for="(item, key) in list"
@ -107,6 +113,8 @@
selects: [],
list: [],
multipleCheck: false,
searchKey: null,
searchHistory: [],
@ -150,12 +158,11 @@
immediate: true,
},
selects(val) {
this.$emit('input', val);
if (this.maxHiddenSelect
&& val.length >= this.maxHiddenSelect
&& this.$refs.select) {
this.$emit('input', val)
if (this.maxHiddenSelect && val.length >= this.maxHiddenSelect && this.$refs.select) {
this.$refs.select.hideMenu()
}
this.calcMultipleSelect()
}
},
methods: {
@ -164,7 +171,10 @@
this.searchKey = key;
//
const history = this.searchHistory.find(item => item.key == key);
if (history) this.list = history.data;
if (history) {
this.list = history.data
this.calcMultipleSelect()
}
//
if (!history) this.loadIng++;
setTimeout(() => {
@ -185,7 +195,8 @@
take: 50
},
}).then(({data}) => {
this.list = data;
this.list = data
this.calcMultipleSelect()
//
const index = this.searchHistory.findIndex(item => item.key == key);
const tmpData = {
@ -199,8 +210,9 @@
this.searchHistory.push(tmpData)
}
}).catch(({msg}) => {
this.list = [];
$A.messageWarning(msg);
this.list = []
this.calcMultipleSelect()
$A.messageWarning(msg)
}).finally(_ => {
if (!history) this.loadIng--;
});
@ -218,6 +230,7 @@
if (show) {
this.$nextTick(this.searchUser);
}
this.calcMultipleSelect()
},
remoteMethod() {
@ -237,8 +250,9 @@
}
this.selects.some(userid => {
if (!this.list.find(item => item.userid == userid)) {
this.list.push({userid, nickname: userid});
this.$store.dispatch("getUserBasic", {userid});
this.list.push({userid, nickname: userid})
this.calcMultipleSelect()
this.$store.dispatch("getUserBasic", {userid})
}
})
},
@ -258,6 +272,44 @@
}
})
}, 100);
},
calcMultipleSelect() {
if (this.multipleMax && this.list.length > 0) {
this.calcMultipleTime && clearTimeout(this.calcMultipleTime)
this.calcMultipleTime = setTimeout(_ => {
let allSelected = true
this.$refs.select.selectOptions.some(({componentInstance}) => {
if (!this.selects.includes(componentInstance.value)) {
allSelected = false
}
})
this.multipleCheck = allSelected
}, 10)
} else {
this.multipleCheck = false
}
},
onMultipleChange(val) {
if (val) {
let optional = this.multipleMax - this.selects.length
this.$refs.select.selectOptions.some(({componentInstance}) => {
if (this.multipleMax && optional <= 0) {
this.$nextTick(_ => {
$A.messageWarning("已超过最大选择数量")
this.multipleCheck = false
})
return true
}
if (!this.selects.includes(componentInstance.value)) {
componentInstance.select()
optional--
}
})
} else {
this.selects = []
}
}
}
};

34
resources/assets/sass/components/user-input.scss vendored
View File

@ -65,12 +65,34 @@
}
}
.user-drop-prepend {
text-align: center;
color: #c5c8ce;
line-height: 20px;
padding-bottom: 5px;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 1;
transform: translateY(-5px);
background-color: #ffffff;
padding: 5px 15px;
border-bottom: 1px solid #f1f1f1;
margin-bottom: 5px;
.user-drop-text {
flex: 1;
color: #c5c8ce;
line-height: 20px;
font-size: 12px;
display: flex;
align-items: center;
> em {
font-style: normal;
padding-left: 4px;
}
}
.user-drop-check {
margin-right: 0;
transform: scale(0.9);
transform-origin: right center;
}
}
}