Ver código fonte

♻️ refactor(contract): optimize data fetching and component structure

- 重构合同和续签记录的数据获取逻辑,使用useEffect处理成功和错误状态
- 修复handleTableChange中的重复状态设置问题
- 移除冗余的初始化加载useEffect钩子
- 修正API调用客户端实例,统一使用hetongRenewClient
- 优化表格数据源引用方式,直接使用renewsData?.data
- 移除表格列定义中重复的操作列代码块
yourname 8 meses atrás
pai
commit
c87758ac07
1 arquivos alterados com 47 adições e 118 exclusões
  1. 47 118
      src/client/admin/pages/ContractRenews.tsx

+ 47 - 118
src/client/admin/pages/ContractRenews.tsx

@@ -45,7 +45,7 @@ const ContractRenews: React.FC = () => {
   const [total, setTotal] = useState<number>(0);
 
   // 获取合同列表
-  const { data: contractsData } = useQuery({
+  const { data: contractsData, error: contractsError } = useQuery({
     queryKey: ['contracts', 'all'],
     queryFn: async () => {
       const response = await hetongClient.$get({
@@ -58,39 +58,51 @@ const ContractRenews: React.FC = () => {
       
       const data = await response.json();
       return data.data;
-    },
-    onSuccess: (data) => {
-      setContracts(data);
-    },
-    onError: (error) => {
-      message.error(`获取合同列表失败: ${error instanceof Error ? error.message : '未知错误'}`);
-    },
+    }
   });
 
-  
-    // 获取续签列表
-    const fetchRenewsData = async (params: any) => {
-      const response = await hetongRenewClient.$get({
-        query: params
-      });
-      
-      if (!response.ok) {
-        throw new Error('获取续签记录失败');
-      }
-      
-      return response.json();
-    };
-  
-    const { data: renewsData, isLoading: loading, refetch: fetchRenews } = useQuery({
-      queryKey: ['contractRenews', currentPage, pageSize],
-      queryFn: () => fetchRenewsData({ page: currentPage, pageSize }),
-      onSuccess: (data: ContractRenewListResponse) => {
-        setTotal(data.pagination.total);
-      },
-      onError: (error) => {
-        message.error(`获取续签记录失败: ${error instanceof Error ? error.message : '未知错误'}`);
-      },
+  useEffect(() => {
+    if (contractsData) {
+      setContracts(contractsData);
+    }
+  }, [contractsData]);
+
+  useEffect(() => {
+    if (contractsError) {
+      message.error(`获取合同列表失败: ${contractsError instanceof Error ? contractsError.message : '未知错误'}`);
+    }
+  }, [contractsError]);
+
+  // 获取续签列表
+  const fetchRenewsData = async (params: any) => {
+    const response = await hetongRenewClient.$get({
+      query: params
     });
+    
+    if (!response.ok) {
+      throw new Error('获取续签记录失败');
+    }
+    
+    return response.json();
+  };
+  
+  const { data: renewsData, isLoading: loading, refetch: fetchRenews, error: renewsError } = useQuery({
+    queryKey: ['contractRenews', currentPage, pageSize],
+    queryFn: () => fetchRenewsData({ page: currentPage, pageSize }),
+  });
+
+  useEffect(() => {
+    if (renewsData) {
+      setTotal(renewsData.pagination.total);
+    }
+  }, [renewsData]);
+
+  useEffect(() => {
+    if (renewsError) {
+      message.error(`获取续签记录失败: ${renewsError instanceof Error ? renewsError.message : '未知错误'}`);
+    }
+  }, [renewsError]);
+
   // 搜索功能
   const handleSearch = async () => {
     try {
@@ -130,9 +142,6 @@ const ContractRenews: React.FC = () => {
   const handleTableChange: TableProps<ContractRenewItem>['onChange'] = (pagination) => {
     setCurrentPage(pagination.current || 1);
     setPageSize(pagination.pageSize || 10);
-    
-    setCurrentPage(pagination.current || 1);
-    setPageSize(pagination.pageSize || 10);
   };
 
   // 打开新增/编辑模态框
@@ -176,7 +185,7 @@ const ContractRenews: React.FC = () => {
 
       if (currentRecord) {
         // 更新操作
-        const response = await contractRenewClient[':id']['$put']({
+        const response = await hetongRenewClient[':id']['$put']({
           param: { id: currentRecord.id },
           json: formattedValues as UpdateContractRenewRequest
         });
@@ -187,7 +196,7 @@ const ContractRenews: React.FC = () => {
         message.success('续签记录更新成功');
       } else {
         // 创建操作
-        const response = await contractRenewClient.$post({
+        const response = await hetongRenewClient.$post({
           json: formattedValues as CreateContractRenewRequest
         });
         
@@ -213,7 +222,7 @@ const ContractRenews: React.FC = () => {
       cancelText: '取消',
       onOk: async () => {
         try {
-          const response = await contractRenewClient[':id']['$delete']({
+          const response = await hetongRenewClient[':id']['$delete']({
             param: { id }
           });
           
@@ -230,11 +239,6 @@ const ContractRenews: React.FC = () => {
     });
   };
 
-  // 初始化加载数据
-  useEffect(() => {
-    // 初始加载由useQuery自动触发
-  }, []);
-
   // 表格列定义
   const columns = [
     {
@@ -316,81 +320,6 @@ const ContractRenews: React.FC = () => {
           </Button>
         </Space>
       ),
-      sorter: true,
-    },
-    {
-      title: '客户名称',
-      dataIndex: ['contract', 'customer', 'name'],
-      key: 'customerName',
-      width: 180,
-    },
-    {
-      title: '续签期限',
-      key: 'period',
-      width: 200,
-      render: (_, record: ContractRenewItem) => (
-        <>
-          {record.renewStartDate ? dayjs(record.renewStartDate).format('YYYY-MM-DD') : '-'}
-          {' 至 '}
-          {record.renewEndDate ? dayjs(record.renewEndDate).format('YYYY-MM-DD') : '-'}
-        </>
-      ),
-    },
-    {
-      title: '续签金额',
-      dataIndex: 'renewAmount',
-      key: 'renewAmount',
-      width: 120,
-      render: (amount: number) => `¥ ${amount.toFixed(2)}`,
-      sorter: (a: ContractRenewItem, b: ContractRenewItem) => a.renewAmount - b.renewAmount,
-    },
-    {
-      title: '状态',
-      dataIndex: 'status',
-      key: 'status',
-      width: 100,
-      filters: Object.entries(RenewStatusEnum).map(([value, { label }]) => ({
-        text: label,
-        value,
-      })),
-      render: (status: number) => {
-        const statusInfo = RenewStatusEnum[status] || { label: '未知', color: 'default' };
-        return <Tag color={statusInfo.color}>{statusInfo.label}</Tag>;
-      },
-    },
-    {
-      title: '创建时间',
-      dataIndex: 'createdAt',
-      key: 'createdAt',
-      width: 160,
-      render: (date: string) => dayjs(date).format('YYYY-MM-DD HH:mm'),
-      sorter: true,
-    },
-    {
-      title: '操作',
-      key: 'action',
-      width: 150,
-      render: (_: any, record: ContractRenewItem) => (
-        <Space size="small">
-          <Button 
-            type="text" 
-            icon={<EditOutlined />} 
-            onClick={() => showModal(record)}
-            size="small"
-          >
-            编辑
-          </Button>
-          <Button 
-            type="text" 
-            danger 
-            icon={<DeleteOutlined />} 
-            onClick={() => handleDelete(record.id)}
-            size="small"
-          >
-            删除
-          </Button>
-        </Space>
-      ),
     },
   ];
 
@@ -461,7 +390,7 @@ const ContractRenews: React.FC = () => {
           columns={columns}
           rowKey="id"
           loading={loading}
-          dataSource={fetchRenews.data?.data || []}
+          dataSource={renewsData?.data || []}
           pagination={{
             current: currentPage,
             pageSize: pageSize,