From ae169810d0760aad31d2830bd0d9ca00a055733a Mon Sep 17 00:00:00 2001 From: kuaifan Date: Fri, 28 Jan 2022 13:04:54 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96UserInput=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- resources/assets/js/components/UserInput.vue | 163 +++++++++++------- .../pages/manage/components/ProjectList.vue | 4 +- .../manage/components/ProjectWorkflow.vue | 2 +- .../js/pages/manage/components/ReportEdit.vue | 8 - .../js/pages/manage/components/TaskDetail.vue | 14 -- resources/assets/js/store/actions.js | 4 +- 7 files changed, 103 insertions(+), 94 deletions(-) diff --git a/package.json b/package.json index 6237bdea..6ddc297d 100644 --- a/package.json +++ b/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", diff --git a/resources/assets/js/components/UserInput.vue b/resources/assets/js/components/UserInput.vue index b376fae5..f8995252 100755 --- a/resources/assets/js/components/UserInput.vue +++ b/resources/assets/js/components/UserInput.vue @@ -1,22 +1,23 @@ @@ -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,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) { - 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) { @@ -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); } } }; diff --git a/resources/assets/js/pages/manage/components/ProjectList.vue b/resources/assets/js/pages/manage/components/ProjectList.vue index d65aded6..79d8692d 100644 --- a/resources/assets/js/pages/manage/components/ProjectList.vue +++ b/resources/assets/js/pages/manage/components/ProjectList.vue @@ -332,7 +332,7 @@ :mask-closable="false">
- +
@@ -394,7 +394,7 @@ :mask-closable="false">
- +
diff --git a/resources/assets/js/pages/manage/components/ProjectWorkflow.vue b/resources/assets/js/pages/manage/components/ProjectWorkflow.vue index 6aa4bc4f..39c68656 100644 --- a/resources/assets/js/pages/manage/components/ProjectWorkflow.vue +++ b/resources/assets/js/pages/manage/components/ProjectWorkflow.vue @@ -143,7 +143,7 @@ :mask-closable="false">
- + diff --git a/resources/assets/js/pages/manage/components/ReportEdit.vue b/resources/assets/js/pages/manage/components/ReportEdit.vue index bef14cc6..7a99cfc0 100644 --- a/resources/assets/js/pages/manage/components/ReportEdit.vue +++ b/resources/assets/js/pages/manage/components/ReportEdit.vue @@ -39,7 +39,6 @@
@@ -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; }); }, diff --git a/resources/assets/js/pages/manage/components/TaskDetail.vue b/resources/assets/js/pages/manage/components/TaskDetail.vue index afc82c4a..fad647ac 100644 --- a/resources/assets/js/pages/manage/components/TaskDetail.vue +++ b/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>
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; }) }, diff --git a/resources/assets/js/store/actions.js b/resources/assets/js/store/actions.js index 1229d271..145c4a8f 100644 --- a/resources/assets/js/store/actions.js +++ b/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);