frontend: 修复清洗算子选中报错

Author: chenghh-9609

frontend/src/hooks/useFetchData.ts

@@ -2,11 +2,13 @@
 import { useState } from "react";
 import { useDebouncedEffect } from "./useDebouncedEffect";
 import Loading from "@/utils/loading";
+import { App } from "antd";
 
 export default function useFetchData<T>(
   fetchFunc: (params?: any) => Promise<any>,
   mapDataFunc: (data: any) => T = (data) => data as T
 ) {
+  const { message } = App.useApp();
   // 表格数据
   const [tableData, setTableData] = useState<T[]>([]);
   // 设置加载状态
@@ -57,37 +59,40 @@ export default function useFetchData<T>(
     const { keywords, filter, current, pageSize } = searchParams;
     Loading.show();
     setLoading(true);
-    const { data } = await fetchFunc({
-      ...filter,
-      keywords,
-      type: getFirstOfArray(filter?.type) || undefined,
-      status: getFirstOfArray(filter?.status) || undefined,
-      tags: filter?.tags?.length ? filter.tags.join(",") : undefined,
-      page: current - 1,
-      size: pageSize,
-    });
-    setPagination((prev) => ({
-      ...prev,
-      total: data?.totalElements || 0,
-    }));
-    let result = [];
-    if (mapDataFunc) {
-      result = data?.content.map(mapDataFunc) ?? [];
+    try {
+      const { data } = await fetchFunc({
+        ...filter,
+        keywords,
+        type: getFirstOfArray(filter?.type) || undefined,
+        status: getFirstOfArray(filter?.status) || undefined,
+        tags: filter?.tags?.length ? filter.tags.join(",") : undefined,
+        page: current - 1,
+        size: pageSize,
+      });
+      setPagination((prev) => ({
+        ...prev,
+        total: data?.totalElements || 0,
+      }));
+      let result = [];
+      if (mapDataFunc) {
+        result = data?.content.map(mapDataFunc) ?? [];
+      }
+      setTableData(result);
+      console.log(data, result.map(mapDataFunc));
+    } catch (error) {
+      message.error("数据获取失败，请稍后重试");
+    } finally {
+      Loading.hide();
+      setLoading(false);
     }
-    setTableData(result);
-    Loading.hide();
-    setLoading(false);
-    console.log(data);
-    
-    console.log(data, result.map(mapDataFunc));
   }
 
   useDebouncedEffect(
     () => {
       fetchData();
     },
     [searchParams],
-    500
+    searchParams?.keywords ? 500 : 0
   );
 
   return {

frontend/src/pages/DataCleansing/Create/CreateTask.tsx

@@ -18,8 +18,8 @@ export default function CleansingTaskCreate() {
     name: "",
     description: "",
     srcDatasetId: "",
-    targetDatasetName: "",
-    targetDatasetType: DatasetSubType.TEXT_DOCUMENT,
+    destDatasetName: "",
+    destDatasetType: DatasetSubType.TEXT_DOCUMENT,
     type: DatasetType.TEXT,
   });
 
@@ -46,13 +46,11 @@ export default function CleansingTaskCreate() {
     switch (currentStep) {
       case 1: {
         const values = form.getFieldsValue();
-        console.log(values);
-
         return (
           values.name &&
           values.srcDatasetId &&
-          values.targetDatasetName &&
-          values.targetDatasetType
+          values.destDatasetName &&
+          values.destDatasetType
         );
       }
       case 2:

frontend/src/pages/DataCleansing/Create/components/CreateTaskStepOne.tsx

@@ -24,9 +24,9 @@ export default function CreateTaskStepOne({
     name: string;
     description: string;
     datasetId: string;
-    targetDatasetName: string;
+    destDatasetName: string;
     type: DatasetType;
-    targetDatasetType: DatasetSubType;
+    destDatasetType: DatasetSubType;
   };
   setTaskConfig: (config: any) => void;
 }) {
@@ -41,7 +41,7 @@ export default function CreateTaskStepOne({
     fetchDatasets();
   }, []);
 
-  const targetDatasetTypeOptions = useMemo(() => {
+  const destDatasetTypeOptions = useMemo(() => {
     const options =
       datasetTypes.find((item) => item.value === taskConfig?.type)?.options ??
       [];
@@ -89,7 +89,7 @@ export default function CreateTaskStepOne({
           }))}
         />
       </Form.Item>
-      <Form.Item label="目标数据集名称" name="targetDatasetName" required>
+      <Form.Item label="目标数据集名称" name="destDatasetName" required>
         <Input placeholder="输入目标数据集名称" />
       </Form.Item>
       <Form.Item
@@ -104,17 +104,17 @@ export default function CreateTaskStepOne({
         />
       </Form.Item>
       <Form.Item
-        name="targetDatasetType"
+        name="destDatasetType"
         rules={[{ required: true, message: "请选择目标数据类型" }]}
       >
         <RadioCard
-          options={targetDatasetTypeOptions}
-          value={taskConfig.targetDatasetType}
+          options={destDatasetTypeOptions}
+          value={taskConfig.destDatasetType}
           onChange={(type) => {
-            form.setFieldValue("targetDatasetType", type);
+            form.setFieldValue("destDatasetType", type);
             setTaskConfig({
               ...taskConfig,
-              targetDatasetType: type as DatasetSubType,
+              destDatasetType: type as DatasetSubType,
             });
           }}
         />

frontend/src/pages/DataCleansing/Create/hooks/useOperatorOperations.ts

@@ -85,12 +85,11 @@ export function useOperatorOperations() {
   const toggleOperator = (operator: OperatorI) => {
     const exist = selectedOperators.find((op) => op.id === operator.id);
     if (exist) {
-      setSelectedOperators(operators.filter((op) => op.id !== operator.id));
+      setSelectedOperators(
+        selectedOperators.filter((op) => op.id !== operator.id)
+      );
     } else {
-      const newOperator: OperatorI = {
-        ...operator,
-      };
-      setSelectedOperators([...selectedOperators, newOperator]);
+      setSelectedOperators([...selectedOperators, { ...operator }]);
     }
   };