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"
>
- {{ data.name }}
+ {{ data.value.name }}
-
+
+
+ {{ data.name }}
+ {{ `(${data.email})` }}
+
@@ -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;
}
};