perf: 优化UserInput组件
This commit is contained in:
kuaifan
parent
3c7619098a
commit
ae169810d0
@ -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",
|
||||
|
||||
@ -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,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()
|
||||
},
|
||||
values(val) {
|
||||
immediate: true,
|
||||
},
|
||||
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);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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;
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
@ -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;
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user