perf: 优化UserInput组件

package.json

@@ -64,7 +64,7 @@
         "stylus-loader": "^6.2.0",
         "tinymce": "^5.10.2",
         "tui-calendar-hi": "^1.15.1-5",
-        "view-design-hi": "^4.7.0-10",
+        "view-design-hi": "^4.7.0-11",
         "vue": "^2.6.14",
         "vue-clipboard2": "^0.3.3",
         "vue-emoji-picker": "^1.0.3",

resources/assets/js/components/UserInput.vue

@@ -1,22 +1,23 @@
 <template>
-    <div v-if="ready" :class="['common-user', maxHiddenClass]">
+    <div :class="['common-user', maxHiddenClass]">
         <Select
-            v-model="values"
+            ref="select"
+            v-model="selects"
             :transfer="transfer"
-            :remote-method="searchUser"
             :placeholder="placeholder"
             :size="size"
-            :loading="loading"
+            :loading="loadIng > 0"
             :loading-text="$L('加载中...')"
             :default-label="value"
             :default-event-object="true"
-            :multipleMax="multipleMax"
+            :multiple-max="multipleMax"
-            :multipleUncancelable="uncancelable"
+            :multiple-uncancelable="uncancelable"
+            :remote-method="searchUser"
+            @on-query-change="searchUser"
+            @on-open-change="openChange"
             multiple
             filterable
-            transfer-class-name="common-user-transfer"
+            transfer-class-name="common-user-transfer">
-            @on-open-change="openChange"
-            @on-set-default-options="setDefaultOptions">
             <div v-if="multipleMax" slot="drop-prepend" class="user-drop-prepend">{{$L('最多只能选择' + multipleMax + '个')}}</div>
             <slot name="option-prepend"></slot>
             <Option
@@ -33,7 +34,7 @@
                 </div>
             </Option>
         </Select>
-        <div v-if="!initialized" class="common-user-loading"><Loading/></div>
+        <div v-if="loadIng > 0" class="common-user-loading"><Loading/></div>
     </div>
 </template>
 
@@ -87,36 +88,23 @@
         },
         data() {
             return {
-                ready: false,
+                loadIng: 0,
-                initialized: false,
-                loading: false,
-                openLoad: false,
-                values: [],
 
+                selects: [],
                 list: [],
-                options: [],
+
+                searchKey: null,
+                searchHistory: [],
+
                 subscribe: null,
             }
         },
         mounted() {
-            if ($A.isArray(this.value)) {
-                this.values = $A.cloneJSON(this.value);
-            } else {
-                this.$emit('input', this.value ? [this.value] : []);
-            }
-            this.$nextTick(() => {
-                this.ready = true;
-            });
             this.subscribe = Store.subscribe('cacheUserActive', (data) => {
                 let index = this.list.findIndex(({userid}) => userid == data.userid);
                 if (index > -1) {
-                    this.initialized = true;
                     this.$set(this.list, index, Object.assign({}, this.list[index], data));
-                }
+                    this.handleSelectData();
-                let option = this.options.find(({value}) => value == data.userid);
-                if (option) {
-                    this.$set(option, 'label', data.nickname)
-                    this.$set(option, 'avatar', data.userimg)
                 }
             });
         },
@@ -128,9 +116,9 @@
         },
         computed: {
             maxHiddenClass() {
-                const {multipleMax, maxHiddenInput, values} = this;
+                const {multipleMax, maxHiddenInput, selects} = this;
                 if (multipleMax && maxHiddenInput) {
-                    if (values.length >= multipleMax) {
+                    if (selects.length >= multipleMax) {
                         return 'hidden-input'
                     }
                 }
@@ -138,61 +126,62 @@
             }
         },
         watch: {
-            value(val) {
+            value: {
-                this.values = val;
+                handler() {
+                    this.valueChange()
                 },
-            values(val) {
+                immediate: true,
+            },
+            selects(val) {
                 this.$emit('input', val);
             }
         },
         methods: {
-            openChange(show) {
+            searchUser(key) {
-                if (show && !this.openLoad) {
+                if (typeof key !== "string") key = "";
-                    this.openLoad = true;
+                if (key == this.searchKey) return;
-                    if (this.list.length == this.values.length || this.list.length <= 1) {
+                this.searchKey = key;
-                        this.$nextTick(this.searchUser);
+                //
+                const history = this.searchHistory.find(item => item.key == key);
+                if (history) this.list = history.data;
+                //
+                if (!history) this.loadIng++;
+                setTimeout(() => {
+                    if (this.searchKey != key) {
+                        if (!history) this.loadIng--;
+                        return;
                     }
-                }
-            },
-
-            setDefaultOptions(options) {
-                this.options = options;
-                options.forEach(({value, label}) => {
-                    this.list.push({
-                        userid: value,
-                        nickname: label,
-                    });
-                    this.$store.dispatch("getUserBasic", {userid: value});
-                });
-                if (this.list.length == 0) {
-                    this.initialized = true;
-                }
-            },
-
-            searchUser(query) {
-                if (query !== '') {
-                    this.loading = true;
                     this.$store.dispatch("call", {
                         url: 'users/search',
                         data: {
                             keys: {
-                                key: query || '',
+                                key,
                                 project_id: this.projectId,
                                 no_project_id: this.noProjectId,
                             },
                             take: 30
                         },
                     }).then(({data}) => {
-                        this.loading = false;
+                        if (!history) this.loadIng--;
                         this.list = data;
+                        //
+                        const index = this.searchHistory.findIndex(item => item.key == key);
+                        const tmpData = {
+                            key,
+                            data,
+                            time: $A.Time()
+                        };
+                        if (index > -1) {
+                            this.searchHistory.splice(index, 1, tmpData)
+                        } else {
+                            this.searchHistory.push(tmpData)
+                        }
                     }).catch(({msg}) => {
-                        this.loading = false;
+                        if (!history) this.loadIng--;
                         this.list = [];
                         $A.messageWarning(msg);
                     });
-                } else {
+                }, this.searchHistory.length > 0 ? 300 : 0)
-                    this.list = [];
-                }
             },
 
             isDisabled(userid) {
@@ -200,6 +189,48 @@
                     return false;
                 }
                 return this.disabledChoice.includes(userid)
+            },
+
+            openChange(show) {
+                if (show) {
+                    this.$nextTick(this.searchUser);
+                }
+            },
+
+            valueChange() {
+                if (this.selects == this.value) {
+                    return
+                }
+                if ($A.isArray(this.value)) {
+                    this.selects = $A.cloneJSON(this.value);
+                } else if (this.value) {
+                    this.selects = [this.value]
+                } else {
+                    this.selects = [];
+                }
+                this.selects.some(userid => {
+                    if (!this.list.find(item => item.userid == userid)) {
+                        this.list.push({userid, nickname: userid});
+                        this.$store.dispatch("getUserBasic", {userid});
+                    }
+                })
+            },
+
+            handleSelectData() {
+                this.__handleSelectTimeout && clearTimeout(this.__handleSelectTimeout);
+                this.__handleSelectTimeout = setTimeout(() => {
+                    if (!this.$refs.select) {
+                        return;
+                    }
+                    const list = this.$refs.select.getValue();
+                    list && list.some(option => {
+                        const data = this.list.find(({userid}) => userid == option.value)
+                        if (data) {
+                            this.$set(option, 'label', data.nickname)
+                            this.$set(option, 'avatar', data.userimg)
+                        }
+                    })
+                }, 100);
             }
         }
     };

resources/assets/js/pages/manage/components/ProjectList.vue

@@ -332,7 +332,7 @@
             :mask-closable="false">
             <Form :model="userData" label-width="auto" @submit.native.prevent>
                 <FormItem prop="userids" :label="$L('项目成员')">
-                    <UserInput v-if="userShow" v-model="userData.userids" :uncancelable="userData.uncancelable" :multiple-max="100" :placeholder="$L('选择项目成员')"/>
+                    <UserInput v-model="userData.userids" :uncancelable="userData.uncancelable" :multiple-max="100" :placeholder="$L('选择项目成员')"/>
                 </FormItem>
             </Form>
             <div slot="footer" class="adaption">
@@ -394,7 +394,7 @@
             :mask-closable="false">
             <Form :model="transferData" label-width="auto" @submit.native.prevent>
                 <FormItem prop="owner_userid" :label="$L('项目负责人')">
-                    <UserInput v-if="transferShow" v-model="transferData.owner_userid" :multiple-max="1" :placeholder="$L('选择项目负责人')"/>
+                    <UserInput v-model="transferData.owner_userid" :multiple-max="1" :placeholder="$L('选择项目负责人')"/>
                 </FormItem>
             </Form>
             <div slot="footer" class="adaption">

resources/assets/js/pages/manage/components/ProjectWorkflow.vue

@@ -143,7 +143,7 @@
             :mask-closable="false">
             <Form :model="userData" label-width="auto" @submit.native.prevent>
                 <FormItem prop="userids" :label="$L('状态负责人')">
-                    <UserInput v-if="userShow" v-model="userData.userids" :project-id="projectId" :multiple-max="5" :placeholder="$L('选择状态负责人')"/>
+                    <UserInput v-model="userData.userids" :project-id="projectId" :multiple-max="5" :placeholder="$L('选择状态负责人')"/>
                 </FormItem>
                 <FormItem prop="usertype" :label="$L('流转模式')">
                     <RadioGroup v-model="userData.usertype">

resources/assets/js/pages/manage/components/ReportEdit.vue

@@ -39,7 +39,6 @@
             <Col span="22">
                 <div class="report-users">
                     <UserInput
-                        v-if="userInputShow"
                         v-model="reportData.receive"
                         :disabledChoice="[userId]"
                         :placeholder="$L('选择接收人')" />
@@ -94,7 +93,6 @@ export default {
                 offset: 0 // 以当前日期为基础的周期偏移量。例如选择了上一周那么就是 -1，上一天同理。
             },
             disabledType: false,
-            userInputShow: true,
             prevCycleText: "",
             nextCycleText: "",
         };
@@ -210,7 +208,6 @@ export default {
         },
 
         getDetail(reportId) {
-            this.userInputShow = false;
             this.$store.dispatch("call", {
                 url: 'report/detail',
                 data: {
@@ -224,12 +221,10 @@ export default {
                 this.reportData.type = data.type_val;
                 this.reportData.id = reportId;
                 this.disabledType = true;
-                this.userInputShow = true;
                 // msg 结果描述
             }).catch(({msg}) => {
                 // msg 错误原因
                 $A.messageError(msg);
-                this.userInputShow = true;
             });
         },
 
@@ -252,18 +247,15 @@ export default {
 
         // 获取上一次接收人
         getLastSubmitter() {
-            this.userInputShow = false;
             this.$store.dispatch("call", {
                 url: 'report/last_submitter',
             }).then(({data, msg}) => {
                 // data 结果数据
                 this.reportData.receive = data;
-                this.userInputShow = true;
                 // msg 结果描述
             }).catch(({msg}) => {
                 // msg 错误原因
                 $A.messageError(msg);
-                this.userInputShow = true;
             });
         },
 

resources/assets/js/pages/manage/components/TaskDetail.vue

@@ -45,12 +45,10 @@
             :width="240"
             placement="bottom"
             @on-popper-show="openOwner"
-            @on-popper-hide="ownerShow=false"
             @on-ok="onOwner"
             transfer>
             <div slot="content">
                 <UserInput
-                    v-if="ownerShow"
                     v-model="ownerData.owner_userid"
                     :multiple-max="1"
                     :project-id="taskDetail.project_id"
@@ -193,12 +191,10 @@
                             class="item-content user"
                             placement="bottom"
                             @on-popper-show="openOwner"
-                            @on-popper-hide="ownerShow=false"
                             @on-ok="onOwner"
                             transfer>
                             <div slot="content">
                                 <UserInput
-                                    v-if="ownerShow"
                                     v-model="ownerData.owner_userid"
                                     :multiple-max="10"
                                     :project-id="taskDetail.project_id"
@@ -223,12 +219,10 @@
                             class="item-content user"
                             placement="bottom"
                             @on-popper-show="openAssist"
-                            @on-popper-hide="assistShow=false"
                             @on-ok="onAssist"
                             transfer>
                             <div slot="content">
                                 <UserInput
-                                    v-if="assistShow"
                                     v-model="assistData.assist_userid"
                                     :multiple-max="10"
                                     :project-id="taskDetail.project_id"
@@ -448,14 +442,12 @@ export default {
 
             taskDetail: {},
 
-            ownerShow: false,
             ownerData: {},
             ownerLoad: 0,
 
             receiveShow: false,
 
             assistForce: false,
-            assistShow: false,
             assistData: {},
             assistLoad: 0,
 
@@ -797,7 +789,6 @@ export default {
             const list = this.getOwner.map(({userid}) => userid)
             this.$set(this.taskDetail, 'owner_userid', list)
             this.$set(this.ownerData, 'owner_userid', list)
-            this.ownerShow = true;
         },
 
         onOwner(pick) {
@@ -833,13 +824,11 @@ export default {
             this.$store.dispatch("taskUpdate", data).then(({msg}) => {
                 $A.messageSuccess(msg);
                 this.ownerLoad--;
-                this.ownerShow = false;
                 this.receiveShow = false;
                 this.$store.dispatch("getTaskOne", this.taskDetail.id).catch(() => {})
             }).catch(({msg}) => {
                 $A.modalError(msg);
                 this.ownerLoad--;
-                this.ownerShow = false;
                 this.receiveShow = false;
             })
         },
@@ -849,7 +838,6 @@ export default {
             this.$set(this.taskDetail, 'assist_userid', list)
             this.$set(this.assistData, 'assist_userid', list);
             this.$set(this.assistData, 'disabled', this.getOwner.map(({userid}) => userid))
-            this.assistShow = true;
         },
 
         onAssist() {
@@ -865,12 +853,10 @@ export default {
             }).then(({msg}) => {
                 $A.messageSuccess(msg);
                 this.assistLoad--;
-                this.assistShow = false;
                 this.$store.dispatch("getTaskOne", this.taskDetail.id).catch(() => {})
             }).catch(({msg}) => {
                 $A.modalError(msg);
                 this.assistLoad--;
-                this.assistShow = false;
             })
         },
 

resources/assets/js/store/actions.js

@@ -273,11 +273,11 @@ export default {
         dispatch("call", {
             url: 'users/basic',
             data: {
-                userid: array.map(({userid}) => userid)
+                userid: [...new Set(array.map(({userid}) => userid))]
             },
         }).then(result => {
             time = $A.Time();
-            array.forEach((value) => {
+            array.forEach(value => {
                 let data = result.data.find(({userid}) => userid == value.userid) || Object.assign(value, {email: ""});
                 data._time = time;
                 dispatch("saveUserBasic", data);