|
|
@@ -0,0 +1,67 @@
|
|
|
+import React from 'react';
|
|
|
+import { Select } from 'antd';
|
|
|
+import { useQuery } from '@tanstack/react-query';
|
|
|
+import { userClient } from '@/client/api';
|
|
|
+import type { InferResponseType } from 'hono/client';
|
|
|
+
|
|
|
+const { Option } = Select;
|
|
|
+
|
|
|
+interface UserSelectProps {
|
|
|
+ value?: number | null;
|
|
|
+ onChange?: (value: number | null) => void;
|
|
|
+ placeholder?: string;
|
|
|
+ style?: React.CSSProperties;
|
|
|
+ className?: string;
|
|
|
+}
|
|
|
+
|
|
|
+const UserSelect: React.FC<UserSelectProps> = ({
|
|
|
+ value,
|
|
|
+ onChange,
|
|
|
+ placeholder = '请选择用户',
|
|
|
+ style,
|
|
|
+ className
|
|
|
+}) => {
|
|
|
+ // 获取用户列表
|
|
|
+ const { data: usersData, isLoading } = useQuery({
|
|
|
+ queryKey: ['users-select'],
|
|
|
+ queryFn: async (): Promise<InferResponseType<typeof userClient.$get, 200>> => {
|
|
|
+ const res = await userClient.$get({ query: { page: 1, pageSize: 1000 } });
|
|
|
+ if (!res.ok) {
|
|
|
+ throw new Error('获取用户列表失败');
|
|
|
+ }
|
|
|
+ return res.json();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ const users = usersData?.data || [];
|
|
|
+
|
|
|
+ const handleChange = (selectedValue: number | null) => {
|
|
|
+ onChange?.(selectedValue);
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Select
|
|
|
+ allowClear
|
|
|
+ placeholder={placeholder}
|
|
|
+ value={value}
|
|
|
+ onChange={handleChange}
|
|
|
+ loading={isLoading}
|
|
|
+ style={style}
|
|
|
+ className={className}
|
|
|
+ showSearch
|
|
|
+ optionFilterProp="children"
|
|
|
+ filterOption={(input, option) =>
|
|
|
+ option?.children?.toString().toLowerCase().includes(input.toLowerCase()) || false
|
|
|
+ }
|
|
|
+ >
|
|
|
+ <Option value={null as any}>请选择</Option>
|
|
|
+ {users.map(user => (
|
|
|
+ <Option key={user.id} value={user.id}>
|
|
|
+ {user.name || user.username} ({user.username})
|
|
|
+ </Option>
|
|
|
+ ))}
|
|
|
+ </Select>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+export default UserSelect;
|