<script lang="ts" setup>
|
import { onMounted, ref } from 'vue';
|
|
import { useDebounceFn } from '@vueuse/core';
|
|
import { getPermissionGroups } from '#/api/x/dms/permission';
|
|
defineProps<{
|
value?: string;
|
}>();
|
|
const emit = defineEmits<{
|
'update:value': [value?: string];
|
}>();
|
|
const loading = ref(false);
|
const options = ref<Array<{ label: string; value: string }>>([]);
|
const loadOptionsDebounced = useDebounceFn(loadOptions, 300);
|
|
async function loadOptions(keyword = '') {
|
loading.value = true;
|
try {
|
const response = await getPermissionGroups({ keyword, pageSize: 100 });
|
options.value = (response.data || []).map((item) => ({ label: item.name, value: item.id }));
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
function handleSearch(value: string) {
|
loadOptionsDebounced(value.trim());
|
}
|
|
onMounted(() => loadOptions());
|
</script>
|
|
<template>
|
<a-select
|
class="w-full"
|
:filter-option="false"
|
:loading="loading"
|
:options="options"
|
:value="value"
|
allow-clear
|
placeholder="请选择权限组"
|
show-search
|
@search="handleSearch"
|
@update:value="emit('update:value', $event)" />
|
</template>
|
