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"
-            :multipleUncancelable="uncancelable"
+            :multiple-max="multipleMax"
+            :multiple-uncancelable="uncancelable"
+            :remote-method="searchUser"
+            @on-query-change="searchUser"
+            @on-open-change="openChange"
             multiple
             filterable
-            transfer-class-name="common-user-transfer"
-            @on-open-change="openChange"
-            @on-set-default-options="setDefaultOptions">
+            transfer-class-name="common-user-transfer">
             <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,
-                initialized: false,
-                loading: false,
-                openLoad: false,
-                values: [],
+                loadIng: 0,
 
+                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));
-                }
-                let option = this.options.find(({value}) => value == data.userid);
-                if (option) {
-                    this.$set(option, 'label', data.nickname)
-                    this.$set(option, 'avatar', data.userimg)
+                    this.handleSelectData();
                 }
             });
         },
@@ -128,78 +116,121 @@
         },
         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'
                     }
                 }
                 return '';
             }
         },
         watch: {
-            value(val) {
-                this.values = val;
+            value: {
+                handler() {
+                    this.valueChange()
+                },
+                immediate: true,
             },
-            values(val) {
+            selects(val) {
                 this.$emit('input', val);
             }
         },
         methods: {
-            openChange(show) {
-                if (show && !this.openLoad) {
-                    this.openLoad = true;
-                    if (this.list.length == this.values.length || this.list.length <= 1) {
-                        this.$nextTick(this.searchUser);
+            searchUser(key) {
+                if (typeof key !== "string") key = "";
+                if (key == this.searchKey) return;
+                this.searchKey = key;
+                //
+                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.list = [];
-                }
+                }, this.searchHistory.length > 0 ? 300 : 0)
             },
 
             isDisabled(userid) {
                 if (this.disabledChoice.length === 0) {
                     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;
             });
         },