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;
-  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()
-  };
+type IAddFolderProps = {
+	list: Array<any>;
+	path: string;
+	projectId: string;
+	fileToken: string;
+	refresh: any;
+	selectIds: Array<any>;
+};
 
-  const initData = () => {
-    setFileName('')
-    setFileNameCheck({
-      error: false,
-      help: "",
-    })
-  }
+const AddFolder = (props: IAddFolderProps) => {
+	const { list, path, projectId, fileToken, refresh, selectIds } = props;
+	const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+	const isPass = usePass();
+	const Message = useMessage();
+	const [fileName, setFileName] = useState("");
+	const [fileNameCheck, setFileNameCheck] = useState({
+		error: false,
+		help: "",
+	});
 
-  useImperativeHandle(props.onRef, () => {
-    return {
-      showDialog: showDialog,
-    };
-  });
+	useEffect(() => {
+		if (deleteDialogOpen) {
+			setFileName("");
+			setFileNameCheck({
+				error: false,
+				help: "",
+			});
+		}
+	}, [deleteDialogOpen]);
 
-  const handleAddSubmit = () => {
-    if (fileName && !fileNameCheck.error) {
-      const newFolderPath =
-        path === "/" ? `${path}${fileName}` : `${path}/${fileName}`;
-      // 请求接口
-      CloudEController.JobFileNewFolder(
-        newFolderPath,
-        fileToken,
-        projectId
-      )?.then((res) => {
-        Message.success("新建成功");
-        addFolderDialogRef.current.handleClose();
-        refresh()
-      });
-    } else {
-      Message.info(fileNameCheck.help || "请输入文件夹名称");
-    }
-  };
+	const handleAddSubmit = () => {
+		if (fileName && !fileNameCheck.error) {
+			const newFolderPath =
+				path === "/" ? `${path}${fileName}` : `${path}/${fileName}`;
+			// 请求接口
+			CloudEController.JobFileNewFolder(
+				newFolderPath,
+				fileToken,
+				projectId
+			)?.then((res) => {
+				Message.success("新建成功");
+				setDeleteDialogOpen(false);
+				refresh();
+			});
+		} else {
+			Message.info(fileNameCheck.help || "请输入文件夹名称");
+		}
+	};
 
-  const addFolderSubmitloading = false;
-  const handleFileNameChange = (e: any) => {
-    const fileName = e.target.value;
-    setFileName(fileName);
-    if (!fileName) {
-      setFileNameCheck({
-        error: true,
-        help: "文件夹名称不能为空",
-      });
-    } else if (!checkIsNumberLetterChinese(fileName) || fileName.length > 30) {
-      setFileNameCheck({
-        error: true,
-        help: "格式不正确，必须在30字符以内，仅限大小写字母、数字、中文",
-      });
-    } else if (isRepeat(fileName)) {
-      setFileNameCheck({
-        error: true,
-        help: "已存在同名文件夹",
-      });
-    } else {
-      setFileNameCheck({
-        error: false,
-        help: "",
-      });
-    }
-  };
+	const handleFileNameChange = (e: any) => {
+		const fileName = e.target.value;
+		setFileName(fileName);
+		if (!fileName) {
+			setFileNameCheck({
+				error: true,
+				help: "文件夹名称不能为空",
+			});
+		} else if (!checkIsNumberLetterChinese(fileName) || fileName.length > 30) {
+			setFileNameCheck({
+				error: true,
+				help: "格式不正确，必须在30字符以内，仅限大小写字母、数字、中文",
+			});
+		} else if (isRepeat(fileName)) {
+			setFileNameCheck({
+				error: true,
+				help: "已存在同名文件夹",
+			});
+		} else {
+			setFileNameCheck({
+				error: false,
+				help: "",
+			});
+		}
+	};
 
-  const isRepeat = (fileName: string) => {
-    return list.some((item: any) => {
-      return item.name === fileName;
-    });
-  };
+	const isRepeat = (fileName: string) => {
+		return list.some((item: any) => {
+			return item.name === fileName;
+		});
+	};
 
-  return (
-    <MyDialog
-      handleSubmit={handleAddSubmit}
-      onRef={addFolderDialogRef}
-      title="新建文件夹"
-      submitloading={addFolderSubmitloading}
-    >
-      <TextField
-        sx={{
-          width: "388px",
-          border: "1px solide #E6E8EB",
-          marginTop: "12px",
-        }}
-        required
-        error={fileNameCheck.error}
-        id="fileName"
-        label="名称"
-        variant="outlined"
-        value={fileName}
-        onChange={handleFileNameChange}
-        helperText={fileNameCheck.help}
-        InputProps={{
-          endAdornment: <InputAdornment position="end">{fileName.length}/30</InputAdornment>,
-        }}
-        size="small"
-      />
-    </MyDialog>
-  );
+	return (
+		<>
+			<Button
+				color="neutral"
+				variant="outlined"
+				size="small"
+				onClick={() => setDeleteDialogOpen(true)}
+				disabled={
+					selectIds.length !== 0 || !isPass("PROJECT_DATA_ADDDIR", "USER")
+				}
+			>
+				新建文件夹
+			</Button>
+			<MyDialog
+				open={deleteDialogOpen}
+				onClose={() => setDeleteDialogOpen(false)}
+				onConfirm={handleAddSubmit}
+				title="新建文件夹"
+			>
+				<TextField
+					sx={{
+						width: "388px",
+						border: "1px solide #E6E8EB",
+						marginTop: "12px",
+					}}
+					required
+					error={fileNameCheck.error}
+					id="fileName"
+					label="名称"
+					variant="outlined"
+					value={fileName}
+					onChange={handleFileNameChange}
+					helperText={fileNameCheck.help}
+					InputProps={{
+						endAdornment: (
+							<InputAdornment position="end">
+								{fileName.length}/30
+							</InputAdornment>
+						),
+					}}
+					size="small"
+				/>
+			</MyDialog>
+		</>
+	);
 };
 
 export default AddFolder;

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}