feat: 数据管理新建文件夹重构

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

-import React, { useState, useImperativeHandle } from "react";
+import React, { useState, useEffect } from "react";
 
-import { TextField } from "@mui/material";
-import MyDialog from "@/components/mui/MyDialog";
+import { TextField, Button } from "@mui/material";
+import MyDialog from "@/components/mui/Dialog";
 import { checkIsNumberLetterChinese } from "@/utils/util";
 import { useMessage } from "@/components/MySnackbar";
 import CloudEController from "@/api/fileserver/CloudEController";
-import InputAdornment from '@mui/material/InputAdornment';
+import usePass from "@/hooks/usePass";
+import InputAdornment from "@mui/material/InputAdornment";
 
-const AddFolder = (props: any) => {
-  const { list, path, projectId, fileToken, refresh } = props;
+type IAddFolderProps = {
+	list: Array<any>;
+	path: string;
+	projectId: string;
+	fileToken: string;
+	refresh: any;
+	selectIds: Array<any>;
+};
+
+const AddFolder = (props: IAddFolderProps) => {
+	const { list, path, projectId, fileToken, refresh, selectIds } = props;
+	const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+	const isPass = usePass();
 	const Message = useMessage();
-  let addFolderDialogRef: any = React.createRef();
 	const [fileName, setFileName] = useState("");
 	const [fileNameCheck, setFileNameCheck] = useState({
 		error: false,
 		help: "",
 	});
 
-  const showDialog = () => {
-    addFolderDialogRef.current.handleClickOpen();
-    initData()
-  };
-
-  const initData = () => {
-    setFileName('')
+	useEffect(() => {
+		if (deleteDialogOpen) {
+			setFileName("");
 			setFileNameCheck({
 				error: false,
 				help: "",
-    })
-  }
-
-  useImperativeHandle(props.onRef, () => {
-    return {
-      showDialog: showDialog,
-    };
 			});
+		}
+	}, [deleteDialogOpen]);
 
 	const handleAddSubmit = () => {
 		if (fileName && !fileNameCheck.error) {
@@ -47,15 +49,14 @@ const AddFolder = (props: any) => {
 				projectId
 			)?.then((res) => {
 				Message.success("新建成功");
-        addFolderDialogRef.current.handleClose();
-        refresh()
+				setDeleteDialogOpen(false);
+				refresh();
 			});
 		} else {
 			Message.info(fileNameCheck.help || "请输入文件夹名称");
 		}
 	};
 
-  const addFolderSubmitloading = false;
 	const handleFileNameChange = (e: any) => {
 		const fileName = e.target.value;
 		setFileName(fileName);
@@ -89,11 +90,23 @@ const AddFolder = (props: any) => {
 	};
 
 	return (
+		<>
+			<Button
+				color="neutral"
+				variant="outlined"
+				size="small"
+				onClick={() => setDeleteDialogOpen(true)}
+				disabled={
+					selectIds.length !== 0 || !isPass("PROJECT_DATA_ADDDIR", "USER")
+				}
+			>
+				新建文件夹
+			</Button>
 			<MyDialog
-      handleSubmit={handleAddSubmit}
-      onRef={addFolderDialogRef}
+				open={deleteDialogOpen}
+				onClose={() => setDeleteDialogOpen(false)}
+				onConfirm={handleAddSubmit}
 				title="新建文件夹"
-      submitloading={addFolderSubmitloading}
 			>
 				<TextField
 					sx={{
@@ -110,11 +123,16 @@ const AddFolder = (props: any) => {
 					onChange={handleFileNameChange}
 					helperText={fileNameCheck.help}
 					InputProps={{
-          endAdornment: <InputAdornment position="end">{fileName.length}/30</InputAdornment>,
+						endAdornment: (
+							<InputAdornment position="end">
+								{fileName.length}/30
+							</InputAdornment>
+						),
 					}}
 					size="small"
 				/>
 			</MyDialog>
+		</>
 	);
 };
 

src/views/Project/ProjectData/index.module.css

@@ -37,6 +37,12 @@
 	font-weight: 600;
 }
 
+.projectDataTabsAndBtton {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+}
+
 .folderIconBox {
 	display: flex;
 	justify-content: flex-start;

src/views/Project/ProjectData/index.tsx

@@ -60,14 +60,12 @@ const ProjectData = observer(() => {
 	/** 路由信息 */
 	const location = useLocation();
 	// 当前文件路径
-	const [path, setPath] = useState<String>("/");
-	const [tableLoadding, setTableLoadding] = useState(false);
+	const [path, setPath] = useState<string>("/");
 	// 防止用户连续点击文件夹造成路径显示错误
 	const [debounce, setDebounce] = useState(false);
 	// 点击操作列中的按钮 会设置当前点击的文件
 	const [currentOperateFile, setCurrentOperateFile] = useState<any>(null);
 	// 文件file   数据集dataset
-	// const [activeTab, setActiveTab] = useState(1);
 	const [activeTab, setActiveTab] = useState("file");
 	// 复选框选中的文件名称数组
 	const [selectIds, setSelectIds] = useState<Array<string>>([]);
@@ -188,14 +186,12 @@ const ProjectData = observer(() => {
 			return;
 		} else if (fileToken && projectId) {
 			if (fileServerEndPoint) {
-				setTableLoadding(true);
 				return CloudEController.JobOutFileList(
 					path,
 					fileToken,
 					projectId,
 					false
 				)?.then((res) => {
-					setTableLoadding(false);
 					if (Array.isArray(res.data)) {
 						setList(res.data);
 					} else {
@@ -219,7 +215,6 @@ const ProjectData = observer(() => {
 			getList();
 		} else {
 			if (fileToken && projectId) {
-				setTableLoadding(true);
 				setPath("/");
 				return CloudEController.JobSearchFileList(
 					keyWord,
@@ -228,7 +223,6 @@ const ProjectData = observer(() => {
 					projectId,
 					false
 				)?.then((res) => {
-					setTableLoadding(false);
 					if (Array.isArray(res.data)) {
 						setList(res.data);
 					} else {
@@ -273,7 +267,6 @@ const ProjectData = observer(() => {
 		}
 	};
 
-	// todo name sort
 	// table配置
 	const versionsHeadCells = useMemo(() => {
 		if (showCheckBox) {
@@ -441,13 +434,6 @@ const ProjectData = observer(() => {
 		UpLoaderFileRef.current.showDialog();
 	};
 
-	// 新增文件
-	let addFolderRef: any = React.createRef();
-
-	const hanleShowAddFolderDialog = () => {
-		addFolderRef.current.showDialog();
-	};
-
 	// 下载文件
 	const hanleDownloadFile = (item: any) => {
 		const downloadPath =
@@ -577,18 +563,14 @@ const ProjectData = observer(() => {
 									>
 										上传文件
 									</Button>
-									<Button
-										color="neutral"
-										variant="outlined"
-										size="small"
-										onClick={hanleShowAddFolderDialog}
-										disabled={
-											selectIds.length !== 0 ||
-											!isPass("PROJECT_DATA_ADDDIR", "USER")
-										}
-									>
-										新建文件夹
-									</Button>
+									<AddFolder
+										selectIds={selectIds}
+										list={allList}
+										path={path}
+										refresh={handleRefresh}
+										fileToken={fileToken as string}
+										projectId={projectId as string}
+									></AddFolder>
 								</div>
 								<div className={style.projectDataSearch}>
 									<InputBase
@@ -631,6 +613,7 @@ const ProjectData = observer(() => {
 										size="small"
 										onClick={handleRefresh}
 										disabled={!isPass("PROJECT_DATA_REFRESH", "USER")}
+										sx={{ marginLeft: "17px" }}
 									>
 										<RefreshIcon />
 									</IconButton>
@@ -643,7 +626,6 @@ const ProjectData = observer(() => {
 							onRef={tableRef}
 							nopadding={true}
 							stickyheader={true}
-							load={tableLoadding}
 							initSelected={selectIds}
 							headCells={versionsHeadCells}
 							rowsPerPage={"99"}
@@ -704,14 +686,6 @@ const ProjectData = observer(() => {
 						path={path}
 						list={allList}
 					></UpLoaderFile>
-					<AddFolder
-						onRef={addFolderRef}
-						list={allList}
-						path={path}
-						refresh={handleRefresh}
-						fileToken={fileToken}
-						projectId={projectId}
-					></AddFolder>
 					<MoveFile
 						onRef={moveFileRef}
 						path={path}