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

resources/assets/js/components/UserInput.vue

@@ -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);
+                this.$emit('input', val)
-                if (this.maxHiddenSelect
+                if (this.maxHiddenSelect && val.length >= this.maxHiddenSelect && this.$refs.select) {
-                    && 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 = [];
+                        this.list = []
-                        $A.messageWarning(msg);
+                        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.list.push({userid, nickname: userid})
-                        this.$store.dispatch("getUserBasic", {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 = []
+                }
             }
         }
     };

resources/assets/sass/components/user-input.scss

@@ -65,12 +65,34 @@
         }
     }
     .user-drop-prepend {
-        text-align: center;
+        display: flex;
-        color: #c5c8ce;
+        align-items: center;
-        line-height: 20px;
+        justify-content: center;
-        padding-bottom: 5px;
+        position: sticky;
-        font-size: 12px;
+        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;
+        }
     }
 }