Browse Source

✨ feat(admin): 添加代理商选择组件

- 创建AgentSelector组件,用于选择代理商
- 实现通过API获取代理商列表功能
- 添加加载状态和空数据处理
- 支持选择回调、占位符和禁用状态等属性
- 显示代理商名称及联系方式信息
yourname 4 months ago
parent
commit
999b980fe4
1 changed files with 59 additions and 0 deletions
  1. 59 0
      src/client/admin-shadcn/components/AgentSelector.tsx

+ 59 - 0
src/client/admin-shadcn/components/AgentSelector.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/client/components/ui/select';
+import { agentClient } from '@/client/api';
+
+interface AgentSelectorProps {
+  value?: number;
+  onChange?: (value: number) => void;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+export const AgentSelector: React.FC<AgentSelectorProps> = ({
+  value,
+  onChange,
+  placeholder = "选择代理商",
+  disabled
+}) => {
+  const { data: agents, isLoading } = useQuery({
+    queryKey: ['agents'],
+    queryFn: async () => {
+      const res = await agentClient.$get({
+        query: {
+          page: 1,
+          pageSize: 100
+        }
+      });
+      
+      if (res.status !== 200) throw new Error('获取代理商列表失败');
+      const result = await res.json();
+      return result.data;
+    }
+  });
+
+  return (
+    <Select 
+      value={value?.toString() || ''} 
+      onValueChange={(val) => onChange?.(parseInt(val))}
+      disabled={disabled || isLoading}
+    >
+      <SelectTrigger>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {isLoading ? (
+          <SelectItem value="loading" disabled>加载中...</SelectItem>
+        ) : agents && agents.length > 0 ? (
+          agents.map((agent) => (
+            <SelectItem key={agent.id} value={agent.id.toString()}>
+              {agent.name || agent.username} ({agent.realname || agent.phone || '无联系方式'})
+            </SelectItem>
+          ))
+        ) : (
+          <SelectItem value="no-agents" disabled>暂无代理商</SelectItem>
+        )}
+      </SelectContent>
+    </Select>
+  );
+};