47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import { useState } from 'react';
|
|
import { Select, Spin } from 'antd';
|
|
import type { SelectProps } from 'antd';
|
|
import { api } from "@nice/client"
|
|
interface RoleSelectProps {
|
|
value?: string | string[];
|
|
onChange?: (value: string | string[]) => void;
|
|
style?: React.CSSProperties;
|
|
multiple?: boolean;
|
|
}
|
|
|
|
export default function RoleSelect({ value, onChange, style, multiple }: RoleSelectProps) {
|
|
const [keyword, setQuery] = useState<string>('');
|
|
const { data, isLoading } = api.role.findMany.useQuery({
|
|
where: {
|
|
OR: [
|
|
{ name: { contains: keyword } }
|
|
]
|
|
}
|
|
});
|
|
|
|
const handleSearch = (value: string) => {
|
|
setQuery(value);
|
|
};
|
|
|
|
const options: SelectProps['options'] = data?.map((role: any) => ({
|
|
value: role.id,
|
|
label: role.name,
|
|
})) || [];
|
|
|
|
return (
|
|
<Select
|
|
allowClear
|
|
showSearch
|
|
mode={multiple ? 'multiple' : undefined}
|
|
placeholder="请选择角色"
|
|
notFoundContent={isLoading ? <Spin size="small" /> : null}
|
|
filterOption={false}
|
|
onSearch={handleSearch}
|
|
options={options}
|
|
value={value}
|
|
onChange={onChange}
|
|
style={{ minWidth: 200, ...style }}
|
|
/>
|
|
);
|
|
}
|