feat: 移动文件组件重构

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

-import React, {
-	useState,
-	useImperativeHandle,
-	useCallback,
-	useMemo,
-	useEffect,
-} from "react";
+import React, { useState, useCallback, useMemo, useEffect } from "react";
 
 import style from "./index.module.css";
-import MyDialog from "@/components/mui/MyDialog";
+import MyDialog from "@/components/mui/Dialog";
 import folderIcon from "@/assets/project/folderIcon.svg";
 import bigFolderIcon from "@/assets/project/bigFolderIcon.svg";
 import { useMessage } from "@/components/MySnackbar";
@@ -18,8 +12,22 @@ import useMyRequest from "@/hooks/useMyRequest";
 import classNames from "classnames";
 import _ from "lodash";
 
-const MoveFile = (props: any) => {
+type IMoveFileProps = {
+	moveDialogOpen: any;
+	setMoveDialogOpen: any;
+	path: string;
+	projectId: string;
+	fileToken: string;
+	refresh: any;
+	selectIds: Array<any>;
+	currentOperateFile: any;
+	showList: Array<any>;
+};
+
+const MoveFile = (props: IMoveFileProps) => {
 	const {
+		moveDialogOpen,
+		setMoveDialogOpen,
 		path,
 		projectId,
 		fileToken,
@@ -31,10 +39,8 @@ const MoveFile = (props: any) => {
 	const Message = useMessage();
 	const [newPath, setNewPath] = useState("/");
 	const [rootActive, setRootActive] = useState(true);
-	const [moveFileSubmitloading, setMoveFileSubmitloading] = useState(false);
 	const [treeData, setTreeData] = useState<any>([]);
 	const [renderTreeData, setRenderTreeData] = useState<any>([]);
-	const [moveFileDialogRef] = useState<any>(React.createRef());
 	// 要移动的文件夹  之后用来隐藏文件夹树中同路径的文件夹
 	const [moveFolderPathArr, setMoveFolderPathArr] = useState<Array<string>>([]);
 
@@ -56,6 +62,10 @@ const MoveFile = (props: any) => {
 		}
 	}, [fileToken, projectId]);
 
+	useEffect(() => {
+		getTree();
+	}, [getTree]);
+
 	const getDisabledRepeatFolder = useCallback(
 		(folderTree: any, samePathFolederArr: Array<string>) => {
 			const arr = _.cloneDeep(folderTree);
@@ -102,24 +112,12 @@ const MoveFile = (props: any) => {
 		setMoveFolderPathArr(pathArr);
 	}, [selectIds, showList, currentOperateFile, path]);
 
-	const showDialog = () => {
-		moveFileDialogRef.current.handleClickOpen();
-		getTree();
-	};
-
-	useImperativeHandle(props.onRef, () => {
-		return {
-			showDialog: showDialog,
-		};
-	});
-
 	const { run: getDataFileMovePackageRun } = useMyRequest(
 		getDataFileMovePackage,
 		{
 			onSuccess: () => {
 				Message.success("移动成功！");
-				setMoveFileSubmitloading(false);
-				moveFileDialogRef?.current?.handleClose();
+				setMoveDialogOpen(false);
 				refresh();
 			},
 			onError(error: any) {
@@ -130,7 +128,6 @@ const MoveFile = (props: any) => {
 				} else {
 					Message.error("文件服务发生错误，数据移动失败。");
 				}
-				setMoveFileSubmitloading(false);
 			},
 		}
 	);
@@ -198,7 +195,6 @@ const MoveFile = (props: any) => {
 		} else if (newPath === path) {
 			Message.error("指定的目标路径为数据原路径，无需移动。");
 		} else {
-			setMoveFileSubmitloading(true);
 			moveFileFun();
 		}
 	};
@@ -229,10 +225,10 @@ const MoveFile = (props: any) => {
 
 	return (
 		<MyDialog
-			handleSubmit={handleMoveFileSubmit}
-			onRef={moveFileDialogRef}
+			open={moveDialogOpen}
 			title="移动至"
-			submitloading={moveFileSubmitloading}
+			onClose={() => setMoveDialogOpen(false)}
+			onConfirm={handleMoveFileSubmit}
 		>
 			<div
 				className={classNames({

src/views/Project/ProjectData/index.tsx

@@ -79,6 +79,7 @@ const ProjectData = observer(() => {
 	const [showCheckBox, setShowCheckBox] = useState<boolean>(true);
 	// 文件服务器指向
 	const fileServerEndPoint = localStorage.getItem("fileServerEndPoint");
+	const [moveDialogOpen, setMoveDialogOpen] = useState(false);
 
 	useEffect(() => {
 		const locationInfo: any = location?.state;
@@ -445,12 +446,10 @@ const ProjectData = observer(() => {
 		);
 	};
 
-	// 文件移动
-	let moveFileRef: any = React.createRef();
-
+	// 显示移动弹窗
 	const hanleShowMoveFileDialog = (item: any) => {
 		setCurrentOperateFile(item);
-		moveFileRef.current.showDialog();
+		setMoveDialogOpen(true);
 	};
 
 	// 删除弹窗
@@ -463,7 +462,7 @@ const ProjectData = observer(() => {
 	// 批量移动
 	const handleBatchMove = () => {
 		setCurrentOperateFile(null);
-		moveFileRef.current.showDialog();
+		setMoveDialogOpen(true);
 	};
 
 	// 批量删除
@@ -686,16 +685,20 @@ const ProjectData = observer(() => {
 						path={path}
 						list={allList}
 					></UpLoaderFile>
+					{moveDialogOpen && (
 						<MoveFile
-						onRef={moveFileRef}
+							// onRef={moveFileRef}
+							moveDialogOpen={moveDialogOpen}
+							setMoveDialogOpen={setMoveDialogOpen}
 							path={path}
-						fileToken={fileToken}
-						projectId={projectId}
+							fileToken={fileToken as string}
+							projectId={projectId as string}
 							currentOperateFile={currentOperateFile}
 							selectIds={selectIds}
 							refresh={handleRefresh}
 							showList={showList}
 						></MoveFile>
+					)}
 				</div>
 			</ThemeProvider>
 		);