feat: 删除文件弹窗重构

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

-import React, { useImperativeHandle, useMemo } from "react";
+import React, { useMemo } from "react";
 
-import MyDialog from "@/components/mui/MyDialog";
+import MyDialog from "@/components/mui/Dialog";
 import { useMessage } from "@/components/MySnackbar";
 import { getDataFileDelPackage } from "@/api/project_api";
 import useMyRequest from "@/hooks/useMyRequest";
 
-const DeleteDialog = (props: any) => {
-	const { path, projectId, currentOperateFile, selectIds, refresh, showList } =
-		props;
-	const Message = useMessage();
-	let deleteFileDialogRef: any = React.createRef();
-	const showDialog = () => {
-		deleteFileDialogRef.current.handleClickOpen();
-	};
+type IDeleteFileProps = {
+	deleteDialogOpen: any;
+	setDeleteDialogOpen: any;
+	path: string;
+	projectId: string;
+	refresh: any;
+	selectIds: Array<any>;
+	currentOperateFile: any;
+	showList: Array<any>;
+};
 
-	useImperativeHandle(props.onRef, () => {
-		return {
-			showDialog: showDialog,
-		};
-	});
+const DeleteDialog = (props: IDeleteFileProps) => {
+	const {
+		deleteDialogOpen,
+		setDeleteDialogOpen,
+		path,
+		projectId,
+		currentOperateFile,
+		selectIds,
+		refresh,
+		showList,
+	} = props;
+	const Message = useMessage();
 
 	const { run: getDataFileDelPackageRun } = useMyRequest(
 		getDataFileDelPackage,
 		{
 			onSuccess: (res: any) => {
 				Message.success("删除成功！");
-				deleteFileDialogRef?.current?.handleClose();
+				setDeleteDialogOpen(false);
 				refresh();
 			},
 		}
@@ -73,14 +82,13 @@ const DeleteDialog = (props: any) => {
 			path: deletePath,
 		});
 	};
-	const submitloading = false;
 
 	return (
 		<MyDialog
-			handleSubmit={handleSubmit}
-			onRef={deleteFileDialogRef}
 			title="提示"
-			submitloading={submitloading}
+			open={deleteDialogOpen}
+			onClose={() => setDeleteDialogOpen(false)}
+			onConfirm={handleSubmit}
 		>
 			{currentOperateFile
 				? "确认删除该数据吗？"

src/views/Project/ProjectData/index.tsx

@@ -79,7 +79,10 @@ const ProjectData = observer(() => {
 	const [showCheckBox, setShowCheckBox] = useState<boolean>(true);
 	// 文件服务器指向
 	const fileServerEndPoint = localStorage.getItem("fileServerEndPoint");
+	// 文件移动弹窗控制
 	const [moveDialogOpen, setMoveDialogOpen] = useState(false);
+	// 文件删除弹窗控制
+	const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
 	useEffect(() => {
 		const locationInfo: any = location?.state;
@@ -453,10 +456,9 @@ const ProjectData = observer(() => {
 	};
 
 	// 删除弹窗
-	let deleteDialogRef: any = React.createRef();
 	const hanleShowDeleteDialogRef = (item: any) => {
 		setCurrentOperateFile(item);
-		deleteDialogRef.current.showDialog();
+		setDeleteDialogOpen(true);
 	};
 
 	// 批量移动
@@ -468,7 +470,7 @@ const ProjectData = observer(() => {
 	// 批量删除
 	const handleBatchDelete = () => {
 		setCurrentOperateFile(null);
-		deleteDialogRef.current.showDialog();
+		setDeleteDialogOpen(true);
 	};
 
 	// 前端展示的文件路径
@@ -671,15 +673,18 @@ const ProjectData = observer(() => {
 							</Button>
 						</div>
 					)}
-					<DeleteDialog
-						onRef={deleteDialogRef}
-						path={path}
-						projectId={projectId}
-						currentOperateFile={currentOperateFile}
-						selectIds={selectIds}
-						refresh={handleRefresh}
-						showList={showList}
-					></DeleteDialog>
+					{deleteDialogOpen && (
+						<DeleteDialog
+							deleteDialogOpen={deleteDialogOpen}
+							setDeleteDialogOpen={setDeleteDialogOpen}
+							path={path}
+							projectId={projectId as string}
+							currentOperateFile={currentOperateFile}
+							selectIds={selectIds}
+							refresh={handleRefresh}
+							showList={showList}
+						></DeleteDialog>
+					)}
 					<UpLoaderFile
 						onRef={UpLoaderFileRef}
 						path={path}
@@ -687,7 +692,6 @@ const ProjectData = observer(() => {
 					></UpLoaderFile>
 					{moveDialogOpen && (
 						<MoveFile
-							// onRef={moveFileRef}
 							moveDialogOpen={moveDialogOpen}
 							setMoveDialogOpen={setMoveDialogOpen}
 							path={path}