<script lang="ts" setup>
|
import type { SystemUserApi } from '#/api/system/user';
|
|
import { onMounted, ref, watch } from 'vue';
|
|
import { Select } from 'ant-design-vue';
|
|
import { getSimpleUserList } from '#/api/system/user';
|
|
defineOptions({ name: 'PdUserSelect', inheritAttrs: false });
|
|
const props = withDefaults(
|
defineProps<{
|
disabled?: boolean;
|
modelValue?: number;
|
placeholder?: string;
|
}>(),
|
{
|
disabled: false,
|
modelValue: undefined,
|
placeholder: '请选择',
|
},
|
);
|
|
const emit = defineEmits<{
|
'update:modelValue': [value: number | undefined];
|
}>();
|
|
const options = ref<{ label: string; value: number }[]>([]);
|
|
onMounted(async () => {
|
const users = await getSimpleUserList();
|
options.value = users
|
.filter((u): u is SystemUserApi.User & { id: number } => u.id !== undefined)
|
.map((u) => ({ label: u.nickname || u.username, value: u.id }));
|
});
|
|
watch(
|
() => props.modelValue,
|
(val) => {
|
emit('update:modelValue', val);
|
},
|
);
|
</script>
|
|
<template>
|
<Select
|
v-bind="$attrs"
|
:disabled="disabled"
|
:options="options"
|
:placeholder="placeholder"
|
:value="modelValue"
|
allow-clear
|
show-search
|
:filter-option="
|
(input: string, option: any) =>
|
option?.label?.toLowerCase().includes(input.toLowerCase())
|
"
|
@change="(val: number) => emit('update:modelValue', val)"
|
/>
|
</template>
|
