refactor

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

@@ -16,6 +16,7 @@ import CloudEController from "@/api/fileserver/CloudEController";
 import { getDataFileMove, getDataFileMovePackage } from "@/api/project_api";
 import useMyRequest from "@/hooks/useMyRequest";
 import classNames from "classnames";
+import _ from "lodash";
 
 const MoveFile = (props: any) => {
   const {
@@ -28,27 +29,12 @@ const MoveFile = (props: any) => {
     showList,
   } = props;
   const Message = useMessage();
-  const { run: getDataFileMoveRun } = useMyRequest(getDataFileMove, {
-    onSuccess: (res: any) => {
-      successMove();
-    },
-  });
-
   const [newPath, setNewPath] = useState("/");
   const [rootActive, setRootActive] = useState(true);
   const [moveFileSubmitloading, setMoveFileSubmitloading] = useState(false);
   const [treeData, setTreeData] = useState<any>([]);
+  const [renderTreeData, setRenderTreeData] = useState<any>([]);
   let moveFileDialogRef: any = React.createRef();
-
-  const { run: getDataFileMovePackageRun } = useMyRequest(
-    getDataFileMovePackage,
-    {
-      onSuccess: (res: any) => {
-        successMove();
-      },
-    }
-  );
-
   // 要移动的文件夹  之后用来隐藏文件夹树中同路径的文件夹
   const [moveFolderPathArr, setMoveFolderPathArr] = useState<Array<string>>([]);
 
@@ -62,31 +48,39 @@ const MoveFile = (props: any) => {
       )?.then((res) => {
         if (Array.isArray(res.data)) {
           let arr = res.data;
-          const disabledRepeatFolder = (folderTree: any) => {
-            folderTree.forEach((item: any, index: number) => {
-              if (
-                moveFolderPathArr.indexOf(
-                  `${item.dir.substr(1)}${item.name}`
-                ) !== -1
-              ) {
-                item.disabled = true;
-                // folderTree.splice(index, 1);
-              } else {
-                item.disabled = false;
-                if (item.subdirs.length > 0) {
-                  disabledRepeatFolder(item.subdirs);
-                }
-              }
-            });
-          };
-          disabledRepeatFolder(arr);
           setTreeData(arr);
         } else {
           setTreeData([]);
         }
       });
     }
-  }, [fileToken, projectId, moveFolderPathArr]);
+  }, [fileToken, projectId]);
+
+  const getDisabledRepeatFolder = useCallback(
+    (folderTree: any, samePathFolederArr: Array<string>) => {
+      const arr = _.cloneDeep(folderTree);
+      const disabledRepeatFolder = (tree: any, repeatPath: Array<string>) => {
+        tree.forEach((item: any, index: number) => {
+          if (repeatPath.indexOf(`${item.dir.substr(1)}${item.name}`) !== -1) {
+            item.disabled = true;
+          } else {
+            item.disabled = false;
+            if (item.subdirs.length > 0) {
+              disabledRepeatFolder(item.subdirs, repeatPath);
+            }
+          }
+        });
+      };
+      disabledRepeatFolder(arr, samePathFolederArr);
+      return arr;
+    },
+    []
+  );
+
+  useEffect(() => {
+    const tree = getDisabledRepeatFolder(treeData, moveFolderPathArr);
+    setRenderTreeData(tree);
+  }, [moveFolderPathArr, getDisabledRepeatFolder, treeData]);
 
   useEffect(() => {
     let moveFolderArr: any = [];
@@ -108,14 +102,9 @@ const MoveFile = (props: any) => {
     setMoveFolderPathArr(pathArr);
   }, [selectIds, showList, currentOperateFile, path]);
 
-  useEffect(() => {
-    if (moveFolderPathArr.length > 0) {
-      getTree();
-    }
-  }, [moveFolderPathArr, getTree]);
-
   const showDialog = () => {
     moveFileDialogRef.current.handleClickOpen();
+    getTree();
   };
 
   useImperativeHandle(props.onRef, () => {
@@ -124,6 +113,21 @@ const MoveFile = (props: any) => {
     };
   });
 
+  const { run: getDataFileMoveRun } = useMyRequest(getDataFileMove, {
+    onSuccess: (res: any) => {
+      successMove();
+    },
+  });
+
+  const { run: getDataFileMovePackageRun } = useMyRequest(
+    getDataFileMovePackage,
+    {
+      onSuccess: (res: any) => {
+        successMove();
+      },
+    }
+  );
+
   // 提供给fileserver相关接口的newpath 直接用newPath就可以了
   // const newPathProvidedToFileServer = useMemo(() => {
   //   return newPath
@@ -339,7 +343,8 @@ const MoveFile = (props: any) => {
         ProjectData
       </div>
       <MyTreeView
-        treeData={treeData}
+        // treeData={treeData}
+        treeData={renderTreeData}
         renderLabel={renderLabel}
         onNodeSelect={onNodeSelect}
         idFunc={idFunc}