feat: 上传文件弹窗重构

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

-import React, {
-  useState,
-  useImperativeHandle,
-  useCallback,
-  useMemo,
-} 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 { Button } from "@mui/material";
 import { uuid } from "@/utils/util";
 import { useMessage } from "@/components/MySnackbar";
@@ -24,13 +19,20 @@ import useGlobalStore from "@/hooks/useGlobalStore";
 import { APIOPTION, urlToken } from "@/api/fileserver/raysyncApi";
 import UseTusUpload from "@/utils/Upload/tusUpload";
 
-const UpLoaderFile = observer((props: any) => {
+type IMoveFileProps = {
+	uploaderDialogOpen: any;
+	setUploaderDialogOpen: any;
+	path: string;
+	list: Array<any>;
+};
+
+const UpLoaderFile = observer((props: IMoveFileProps) => {
+	const { path, list, uploaderDialogOpen, setUploaderDialogOpen } = props;
 	const { fileListStore } = useStores();
 	const message = useMessage();
 
 	const [fileList, setFileList] = useState<any>([]);
 	// list 是项目数据table的数据
-  const { path, list } = props;
 
 	// 集合当前路径下的文件、文件夹、数据集   和已选择要上传的文件列表
 	const nowNameList = useMemo(() => {
@@ -94,10 +96,6 @@ const UpLoaderFile = observer((props: any) => {
 
 	const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
 
-  const submitloading = false;
-
-  let dialogRef: any = React.createRef();
-
 	const getFileToken = useCallback(
 		(newFileList: any) => {
 			let url =
@@ -140,23 +138,14 @@ const UpLoaderFile = observer((props: any) => {
 		if (newFileList?.length) {
 			getFileToken(newFileList);
 		}
-    dialogRef.current.handleClose();
+		setUploaderDialogOpen(false);
 	};
 
-  const showDialog = () => {
-    dialogRef.current.handleClickOpen();
-    initData();
-  };
-
-  const initData = () => {
+	useEffect(() => {
+		if (uploaderDialogOpen) {
 			setFileList([]);
-  };
-
-  useImperativeHandle(props.onRef, () => {
-    return {
-      showDialog: showDialog,
-    };
-  });
+		}
+	}, [uploaderDialogOpen]);
 
 	const fileListHeadCells = [
 		{ id: "name", numeric: false, label: "名称", width: "60%" },
@@ -172,7 +161,6 @@ const UpLoaderFile = observer((props: any) => {
 			</span>
 		);
 	};
-  // 1,048,576
 	const renderSize = (item: any) => {
 		return <span>{item.size ? storageUnitFromB(Number(item.size)) : "-"}</span>;
 	};
@@ -200,18 +188,16 @@ const UpLoaderFile = observer((props: any) => {
 
 	return (
 		<MyDialog
-      handleSubmit={handleSubmit}
-      onRef={dialogRef}
 			title="上传文件"
-      submitloading={submitloading}
-      submitText="开始上传"
-      showCloseButton={false}
+			okText="开始上传"
+			showCancel={false}
+			open={uploaderDialogOpen}
+			onClose={() => setUploaderDialogOpen(false)}
+			onConfirm={handleSubmit}
 		>
 			<div className={style.uploderBox}>
 				<div className={style.uploderBoxLeft}>
 					<div className={style.dropTitle}>添加文件</div>
-
-          {/* <div {...getRootProps()} className={style.dropBox}> */}
 					<div
 						{...getRootProps()}
 						className={classnames({
@@ -219,7 +205,6 @@ const UpLoaderFile = observer((props: any) => {
 							[style.dropBoxDragActive]: isDragActive,
 						})}
 					>
-            {/* isDragActive */}
 						<input {...getInputProps()} multiple />
 						<img className={style.uploaderIcon} src={uploaderIcon} alt="" />
 						<div className={style.uploderText1}>

src/views/Project/ProjectData/index.tsx

@@ -83,6 +83,7 @@ const ProjectData = observer(() => {
 	const [moveDialogOpen, setMoveDialogOpen] = useState(false);
 	// 文件删除弹窗控制
 	const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+	const [uploaderDialogOpen, setUploaderDialogOpen] = useState(false);
 
 	useEffect(() => {
 		const locationInfo: any = location?.state;
@@ -432,12 +433,6 @@ const ProjectData = observer(() => {
 		);
 	};
 
-	// 文件上传
-	let UpLoaderFileRef: any = React.createRef();
-	const hanleShowUpLoaderFileDialog = () => {
-		UpLoaderFileRef.current.showDialog();
-	};
-
 	// 下载文件
 	const hanleDownloadFile = (item: any) => {
 		const downloadPath =
@@ -556,7 +551,7 @@ const ProjectData = observer(() => {
 										variant="contained"
 										size="small"
 										style={{ marginRight: "12px" }}
-										onClick={hanleShowUpLoaderFileDialog}
+										onClick={() => setUploaderDialogOpen(true)}
 										disabled={
 											selectIds.length !== 0 ||
 											!isPass("PROJECT_DATA_UPLOAD", "USER")
@@ -685,11 +680,14 @@ const ProjectData = observer(() => {
 							showList={showList}
 						></DeleteDialog>
 					)}
+					{uploaderDialogOpen && (
 						<UpLoaderFile
-						onRef={UpLoaderFileRef}
+							uploaderDialogOpen={uploaderDialogOpen}
+							setUploaderDialogOpen={setUploaderDialogOpen}
 							path={path}
 							list={allList}
 						></UpLoaderFile>
+					)}
 					{moveDialogOpen && (
 						<MoveFile
 							moveDialogOpen={moveDialogOpen}