48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
|
import { useState } from 'react';
|
||
|
|
import { Select, Spin } from 'antd';
|
||
|
|
import type { SelectProps } from 'antd';
|
||
|
|
import { api } from '@web/src/utils/trpc';
|
||
|
|
|
||
|
|
interface StaffSelectProps {
|
||
|
|
value?: string | string[];
|
||
|
|
onChange?: (value: string | string[]) => void;
|
||
|
|
style?: React.CSSProperties;
|
||
|
|
multiple?: boolean;
|
||
|
|
domainId?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function StaffSelect({ value, onChange, style, multiple, domainId }: StaffSelectProps) {
|
||
|
|
const [keyword, setQuery] = useState<string>('');
|
||
|
|
|
||
|
|
// Determine ids based on whether value is an array or not
|
||
|
|
const ids = Array.isArray(value) ? value : undefined;
|
||
|
|
|
||
|
|
// Adjust the query to include ids when they are present
|
||
|
|
const { data, isLoading } = api.staff.findMany.useQuery({ keyword, domainId, ids });
|
||
|
|
|
||
|
|
const handleSearch = (value: string) => {
|
||
|
|
setQuery(value);
|
||
|
|
};
|
||
|
|
|
||
|
|
const options: SelectProps['options'] = data?.map((staff: any) => ({
|
||
|
|
value: staff.id,
|
||
|
|
label: staff.showname,
|
||
|
|
})) || [];
|
||
|
|
|
||
|
|
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 }}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|