feat: 文件选择组件支持数据集选择

src/components/FileSelect/index.tsx

@@ -8,16 +8,23 @@ import MyTreeView from "@/components/mui/MyTreeView";
 import classNames from "classnames";
 import bigFolderIcon from "@/assets/project/bigFolderIcon.svg";
 import folderIcon from "@/assets/project/folderIcon.svg";
+import dataSetIcon from "@/assets/project/dataSetIcon.svg";
+import fileIcon from "@/assets/project/fileIcon.svg";
+import useMyRequest from "@/hooks/useMyRequest";
+import { getDataFind } from "@/api/project_api";
 import style from "./index.module.css";
+import _ from "lodash";
 
 type FileSelectProps = {
   open: boolean;
   onConfirm: any;
   onClose: any;
+  type?: "file" | "dataset" | "path";
 };
 
 const FileSelect = observer((props: FileSelectProps) => {
-  const { onConfirm } = props;
+  const { onConfirm, type = "path" } = props;
+  // const { onConfirm, type = "dataset" } = props;
   const { currentProjectStore } = useStores();
   const projectId = toJS(currentProjectStore.currentProjectInfo.id);
   const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
@@ -25,6 +32,66 @@ const FileSelect = observer((props: FileSelectProps) => {
   const [rootActive, setRootActive] = useState(true);
   const [newPath, setNewPath] = useState("/");
 
+  // 获取某路径下的数据集
+  const { run: getDataFindRun } = useMyRequest(getDataFind, {
+    onSuccess: (res: any) => {
+      const dataSetList = res.data.map((item: any) => {
+        return {
+          ...item,
+          type: "dataset",
+          dir: `/${item.path}`,
+          subdirs: "",
+        };
+      });
+      let treeDataArr = _.cloneDeep(treeData);
+      if (newPath === "/") {
+        treeDataArr = _.uniqWith([...treeDataArr, ...dataSetList], _.isEqual);
+        setTreeData(treeDataArr);
+      } else {
+        let pathArr: Array<any> = newPath.split("/");
+        pathArr.shift();
+        let reduceResult = pathArr.reduce((result, path) => {
+          if (Array.isArray(result)) {
+            result.forEach((item: any, index: number) => {
+              if (item.name === path) {
+                result = result[index];
+              }
+            });
+          } else if (Array.isArray(result.subdirs)) {
+            result.subdirs.forEach((item: any, index: number) => {
+              if (item.name === path) {
+                result = result.subdirs[index];
+              }
+            });
+          } else {
+            result = result.subdirs;
+          }
+
+          return result;
+        }, treeDataArr);
+        if (Array.isArray(reduceResult.subdirs)) {
+          reduceResult.subdirs = _.uniqWith(
+            [...reduceResult.subdirs, ...dataSetList],
+            _.isEqual
+          );
+        } else {
+          reduceResult.subdirs = dataSetList;
+        }
+        treeDataArr = _.uniqWith(treeDataArr, _.isEqual);
+        setTreeData(treeDataArr);
+      }
+    },
+  });
+
+  useEffect(() => {
+    if (type === "dataset") {
+      getDataFindRun({
+        projectId: projectId as string,
+        path: newPath === "/" ? "/" : `${newPath}/`,
+      });
+    }
+  }, [newPath, getDataFindRun, projectId, type]);
+
   useEffect(() => {
     if (fileToken && projectId) {
       CloudEController.JobOutFileDirtree(
@@ -38,15 +105,31 @@ const FileSelect = observer((props: FileSelectProps) => {
         } else {
           setTreeData([]);
         }
+        if (type === "dataset") {
+          getDataFindRun({
+            projectId: projectId as string,
+            path: "/",
+            // path: path === "/" ? "/" : `${path}/`,
+          });
+        }
       });
     }
-  }, [projectId, fileToken]);
+  }, [projectId, fileToken, type, getDataFindRun]);
 
-  const renderLabel = (labelNmae: string) => {
+  // const renderLabel = (labelNmae: string) => {
+  const renderLabel = (node: any) => {
     return (
       <span className={style.treeLabel}>
-        <img className={style.labelFolderIcon} src={folderIcon} alt="" />
-        <span className={style.treeLabelText}>{labelNmae}</span>
+        {node.type === "directory" && (
+          <img className={style.labelFolderIcon} src={folderIcon} alt="" />
+        )}
+        {node.type === "dataset" && (
+          <img className={style.labelFolderIcon} src={dataSetIcon} alt="" />
+        )}
+        {node.type !== "directory" && node.type !== "dataset" && (
+          <img className={style.labelFolderIcon} src={fileIcon} alt="" />
+        )}
+        <span className={style.treeLabelText}>{node.name}</span>
       </span>
     );
   };
@@ -75,6 +158,7 @@ const FileSelect = observer((props: FileSelectProps) => {
       open={props.open}
       onClose={props.onClose}
       onConfirm={fileSelectOnConfirm}
+      title={type}
     >
       <div
         className={classNames({

src/components/mui/MyTreeView.tsx

@@ -15,7 +15,7 @@ type MyTreeViewProps = {
   onNodeFocus?: (event: object, value: string) => void; // 点击某一项的回调
   onNodeSelect?: (event: object, value: Array<any> | string) => void; // 点击某一项的回调
   onNodeToggle?: (event: object, nodeIds: Array<any>) => void; // 点击某一项的回调
-  renderLabel?: (labelNmae: string) => React.ReactNode;
+  renderLabel?: (node: any) => React.ReactNode;
   treeViewSx?: any;
   defaultExpanded?: Array<string>;
   idKey?: string;
@@ -48,7 +48,7 @@ const MyTreeView = (props: MyTreeViewProps) => {
       nodeId={String(
         idFunc ? idFunc(nodes) : nodes.id || `${nodes.name}${index}`
       )}
-      label={renderLabel === undefined ? nodes.name : renderLabel(nodes.name)}
+      label={renderLabel === undefined ? nodes.name : renderLabel(nodes)}
       disabled={nodes?.disabled ? true : false}
     >
       {Array.isArray(nodes.subdirs)

src/views/Project/ProjectData/MoveFile/index.tsx

@@ -301,11 +301,11 @@ const MoveFile = (props: any) => {
     });
   };
 
-  const renderLabel = (labelNmae: string) => {
+  const renderLabel = (node: any) => {
     return (
       <span className={style.treeLabel}>
         <img className={style.labelFolderIcon} src={folderIcon} alt="" />
-        <span className={style.treeLabelText}>{labelNmae}</span>
+        <span className={style.treeLabelText}>{node.name}</span>
       </span>
     );
   };

src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx

@@ -141,24 +141,28 @@ const ConfigForm = (props: ConfigFormProps) => {
     result.forEach((task) => {
       let isCheck = true;
       if (task.parameters.length > 0) {
-        task.parameters.forEach((parameter) => {
-          const { error } = getCheckResult(parameter, parameter.value);
-          if (error) {
-            isCheck = false;
-            return;
-          }
-        });
+        task.parameters
+          .filter((parameter) => parameter.hidden === false)
+          .forEach((parameter) => {
+            const { error } = getCheckResult(parameter, parameter.value);
+            if (error) {
+              isCheck = false;
+              return;
+            }
+          });
       }
       if (task.flows.length > 0) {
         task.flows.forEach((flow) => {
           if (flow.parameters.length > 0) {
-            flow.parameters.forEach((parameter) => {
-              const { error } = getCheckResult(parameter, parameter.value);
-              if (error) {
-                isCheck = false;
-                return;
-              }
-            });
+            flow.parameters
+              .filter((parameter) => parameter.hidden === false)
+              .forEach((parameter) => {
+                const { error } = getCheckResult(parameter, parameter.value);
+                if (error) {
+                  isCheck = false;
+                  return;
+                }
+              });
           }
         });
       }
@@ -258,7 +262,7 @@ const ConfigForm = (props: ConfigFormProps) => {
               )}
               {parameter.domType.toLowerCase() === "input" && (
                 <MyInput
-                  value={parameter.value}
+                  value={parameter.value || ""}
                   onChange={(e: any) =>
                     handleParameterChange(e, taskId, parameter.name || "")
                   }
@@ -449,11 +453,13 @@ const ConfigForm = (props: ConfigFormProps) => {
           </div>
         );
       })}
-      {fileSelectOpen && <FileSelect
-        onClose={handleFileSelectOnClose}
-        open={fileSelectOpen}
-        onConfirm={onFileSelectConfirm}
-      />}
+      {fileSelectOpen && (
+        <FileSelect
+          onClose={handleFileSelectOnClose}
+          open={fileSelectOpen}
+          onConfirm={onFileSelectConfirm}
+        />
+      )}
     </div>
   );
 };

src/views/Project/ProjectSubmitWork/index.tsx

@@ -80,20 +80,22 @@ const ProjectSubmitWork = () => {
     result.tasks.forEach((tack) => {
       if (tack.id === taskId) {
         let isCheck = true;
-        tack.parameters.forEach((parameter) => {
-          if (parameter.name === parameterName) {
-            parameter.value = value;
-            const checkResult = getCheckResult(parameter, value);
-            parameter.error = checkResult.error;
-            parameter.helperText = checkResult.helperText;
-          } else {
-            return;
-          }
-          if (getCheckResult(parameter, value).error === true) {
-            isCheck = false;
-          }
-          tack.isCheck = isCheck;
-        });
+        tack.parameters
+          .filter((parameter) => parameter.hidden === false)
+          .forEach((parameter) => {
+            if (parameter.name === parameterName) {
+              parameter.value = value;
+              const checkResult = getCheckResult(parameter, value);
+              parameter.error = checkResult.error;
+              parameter.helperText = checkResult.helperText;
+            } else {
+              return;
+            }
+            if (getCheckResult(parameter, value).error === true) {
+              isCheck = false;
+            }
+            tack.isCheck = isCheck;
+          });
       } else {
         return;
       }
@@ -106,7 +108,6 @@ const ProjectSubmitWork = () => {
     const { name, outputPath, nameAndOutputPathCheck } =
       configFormRef.current.getNameAndPath();
     if (!nameAndOutputPathCheck) {
-      console.log(123);
       check = false;
     }
     const result: ITemplateConfig = _.cloneDeep(templateConfigInfo);
@@ -118,8 +119,6 @@ const ProjectSubmitWork = () => {
           parameter.error = checkResult.error;
           parameter.helperText = checkResult.helperText;
           if (checkResult.error) {
-            console.log(tack);
-            console.log(parameter);
             check = false;
           }
         });