Merge branch 'feat-20220608-projectdata' into 'release'

cn- 文件移动组件文件数置灰依赖逻辑重构

See merge request sunyihao/bkunyun!64

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,40 @@ 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,15 +103,9 @@ const MoveFile = (props: any) => {
     setMoveFolderPathArr(pathArr);
   }, [selectIds, showList, currentOperateFile, path]);
 
-  useEffect(() => {
-    if (moveFolderPathArr.length > 0) {
-      getTree();
-    }
-  }, [moveFolderPathArr, getTree]);
-
   const showDialog = () => {
     moveFileDialogRef.current.handleClickOpen();
-    setTreeData([]);
+    getTree()
   };
 
   useImperativeHandle(props.onRef, () => {
@@ -125,6 +114,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
@@ -340,7 +344,8 @@ const MoveFile = (props: any) => {
         ProjectData
       </div>
       <MyTreeView
-        treeData={treeData}
+        // treeData={treeData}
+        treeData={renderTreeData}
         renderLabel={renderLabel}
         onNodeSelect={onNodeSelect}
         idFunc={idFunc}