diff --git a/frontend/src/components/business/ms-user-selector/index.vue b/frontend/src/components/business/ms-user-selector/index.vue index 32bd3512b4..259f56ecf4 100644 --- a/frontend/src/components/business/ms-user-selector/index.vue +++ b/frontend/src/components/business/ms-user-selector/index.vue @@ -3,20 +3,22 @@ v-model="currentValue" :disabled="props.disabled" multiple - :virtual-list-props="{ height: 200 }" :placeholder="props.placeholder ? t(props.placeholder) : t('common.pleaseSelectMember')" - :options="userOptions" - :field-names="fieldNames" + value-key="id" @search="handleSearch" @change="handleChange" > - @@ -31,18 +33,16 @@ placeholder?: string; type?: 'organization' | 'usergroup'; sourceId?: string; - disabledKey?: 'disabled' | 'memberFlag'; + disabledKey?: string; } export interface UserItem { id: string; name: string; email: string; - disabled?: boolean; - memberFlag?: boolean; + [key: string]: boolean | string; } - const fieldNames = { value: 'id', label: 'name' }; const { t } = useI18n(); const props = withDefaults(defineProps(), { disabled: false, @@ -68,20 +68,22 @@ res = await getAllUser(); } res.forEach((item) => { - item.disabled = item[props.disabledKey]; + item.disabled = item[props.disabledKey as string]; }); allOption.value = [...res]; userOptions.value = [...res]; }; const handleSearch = (value: string) => { + let timmer = null; if (value) { - window.setTimeout(() => { + timmer = window.setTimeout(() => { userOptions.value = userOptions.value.filter( (item) => item.name.includes(value) || currentValue.value.includes(item.id) ); }, 60); } else { + if (timmer) window.clearTimeout(timmer); userOptions.value = allOption.value; } };