Просмотр исходного кода

♻️ refactor(clients): 优化客户列表数据处理逻辑

- 移除手动维护的dataSource状态,直接使用查询结果数据
- 将分页总数逻辑移至表格属性中,简化状态管理
- 添加客户列表查询错误处理,显示错误提示信息
- 优化代码格式,调整变量命名和空格排版
- 移除冗余的onSuccess回调函数
yourname 8 месяцев назад
Родитель
Сommit
78fea1e9b9
1 измененных файлов с 15 добавлено и 18 удалено
  1. 15 18
      src/client/admin/pages/Clients.tsx

+ 15 - 18
src/client/admin/pages/Clients.tsx

@@ -13,7 +13,7 @@ type ClientListResponse = InferResponseType<typeof clientClient.$get, 200>;
 type AreaItem = InferResponseType<typeof areaClient.$get, 200>['data'][0];
 
 const Clients: React.FC = () => {
-  const {message} = App.useApp();
+  const { message } = App.useApp();
   const [form] = Form.useForm();
   const [modalVisible, setModalVisible] = useState(false);
   const [editingKey, setEditingKey] = useState<string | null>(null);
@@ -21,11 +21,9 @@ const Clients: React.FC = () => {
   const [areas, setAreas] = useState<AreaItem[]>([]);
   const queryClient = useQueryClient();
   
-  const [dataSource, setDataSource] = useState<ClientItem[]>([]);
   const [pagination, setPagination] = useState({
     current: 1,
     pageSize: 10,
-    total: 0,
   });
   
   // 获取区域列表
@@ -43,9 +41,8 @@ const Clients: React.FC = () => {
     }
   });
   
-  
   // 获取客户列表数据
-  const { data: clientsData, isLoading: clientsLoading } = useQuery({
+  const { data: clientsData, isLoading: clientsLoading, error: clientsError } = useQuery({
     queryKey: ['clients', pagination.current, pagination.pageSize, searchText],
     queryFn: async () => {
       const res = await clientClient.$get({
@@ -59,17 +56,15 @@ const Clients: React.FC = () => {
         throw new Error('获取客户列表失败');
       }
       return res.json();
-    },
-    onSuccess: (result) => {
-      setDataSource(result.data);
-      setPagination({
-        ...pagination,
-        total: result.pagination.total,
-      });
     }
   });
-  // 初始化获取区域数据 - 由useQuery自动处理
   
+  // 错误处理
+  useEffect(() => {
+    if (clientsError) {
+      message.error('获取客户列表失败');
+    }
+  }, [clientsError, message]);
   
   // 搜索
   const handleSearch = () => {
@@ -77,8 +72,8 @@ const Clients: React.FC = () => {
   };
   
   // 分页变化
-  const handleTableChange = (pagination: any) => {
-    setPagination(pagination);
+  const handleTableChange = (newPagination: any) => {
+    setPagination(newPagination);
   };
   
   // 显示添加/编辑弹窗
@@ -123,7 +118,6 @@ const Clients: React.FC = () => {
     form.resetFields();
   };
   
-  // 提交表单
   // 创建客户
   const createClient = useMutation({
     mutationFn: async (data: any) => {
@@ -318,10 +312,13 @@ const Clients: React.FC = () => {
       
       <Table
         columns={columns}
-        dataSource={dataSource}
+        dataSource={clientsData?.data || []}
         rowKey="id"
         loading={clientsLoading}
-        pagination={pagination}
+        pagination={{
+          ...pagination,
+          total: clientsData?.pagination.total || 0
+        }}
         onChange={handleTableChange}
         bordered
       />