feat: 项目数据表格替换

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

@@ -49,8 +49,8 @@ const DeleteDialog = (props: IDeleteFileProps) => {
 		if (currentOperateFile) {
 			return [currentOperateFile];
 		} else {
-			return showList.filter((item: any) => {
-				return selectIds.indexOf(item.name) !== -1;
+			return selectIds.map((item) => {
+				return showList[item];
 			});
 		}
 	}, [currentOperateFile, selectIds, showList]);

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

@@ -102,9 +102,11 @@ const MoveFile = (props: IMoveFileProps) => {
 				moveFolderArr = [];
 			}
 		} else {
-			moveFolderArr = showList.filter((item: any) => {
-				return selectIds.indexOf(item.name) !== -1 && item.type === "directory";
-			});
+			moveFolderArr = selectIds
+				.map((item) => {
+					return showList[item];
+				})
+				.filter((item) => item.type === "directory");
 		}
 		pathArr = moveFolderArr.map((item: any) => {
 			return path === "/" ? `/${item.name}` : `${path}/${item.name}`;
@@ -147,8 +149,8 @@ const MoveFile = (props: IMoveFileProps) => {
 		if (currentOperateFile) {
 			return [currentOperateFile];
 		} else {
-			return showList.filter((item: any) => {
-				return selectIds.indexOf(item.name) !== -1;
+			return selectIds.map((item) => {
+				return showList[item];
 			});
 		}
 	}, [currentOperateFile, selectIds, showList]);

src/views/Project/ProjectData/index.tsx

@@ -2,12 +2,11 @@ import React, { useState, useCallback, useEffect, useMemo } from "react";
 import style from "./index.module.css";
 import classnames from "classnames";
 import { IconButton } from "@mui/material";
-import MyTable from "@/components/mui/MyTable";
+import MyTable from "@/components/mui/MyTableNew";
 import dataSetIcon from "@/assets/project/dataSetIcon.svg";
 import refresh from "@/assets/project/refresh.svg";
 import fileIcon from "@/assets/project/fileIcon.svg";
 import folderIcon from "@/assets/project/folderIcon.svg";
-import noFile from "@/assets/project/noFile.svg";
 import AddFolder from "./AddFolder";
 import MoveFile from "./MoveFile";
 import DeleteDialog from "./DeleteDialog";
@@ -73,6 +72,11 @@ const ProjectData = observer(() => {
 		setPath(locationInfo?.pathName || "/");
 	}, [location]);
 
+	// 切换文件数据集时情况勾选项
+	useEffect(() => {
+		setSelectIds([]);
+	}, [activeTab]);
+
 	// 列表展示的数据
 	const showList = useMemo(() => {
 		if (activeTab === "file") {
@@ -86,12 +90,24 @@ const ProjectData = observer(() => {
 					fileList.push(item);
 				}
 			});
-			return [...folderList, ...fileList];
+			let arr = [...folderList, ...fileList];
+			return arr.map((item, index) => {
+				return {
+					...item,
+					id: index,
+				};
+			});
 		} else {
 			const folderList = list.filter((item: any) => {
 				return item.type === "directory";
 			});
-			return [...folderList, ...dataSetList];
+			let arr = [...folderList, ...dataSetList];
+			return arr.map((item, index) => {
+				return {
+					...item,
+					id: index,
+				};
+			});
 		}
 	}, [list, dataSetList, activeTab]);
 
@@ -256,45 +272,17 @@ const ProjectData = observer(() => {
 	};
 
 	// table配置
-	const versionsHeadCells = useMemo(() => {
-		if (showCheckBox) {
-			return [
-				{ id: "checkbox" },
-				{ id: "name", numeric: false, label: "名称", width: "25%" },
-				{ id: "size", numeric: false, label: "大小", width: "25%", sort: true },
-				{
-					id: "mtime",
-					numeric: false,
-					label: "创建时间",
-					width: "25%",
-					sort: true,
-				},
-				{ id: "caozuo", numeric: false, label: "操作", width: "25%" },
-			];
-		} else {
-			return [
-				{ id: "name", numeric: false, label: "名称", width: "25%" },
-				{ id: "size", numeric: false, label: "大小", width: "25%", sort: true },
-				{
-					id: "mtime",
-					numeric: false,
-					label: "创建时间",
-					width: "25%",
-					sort: true,
-				},
-				{ id: "caozuo", numeric: false, label: "操作", width: "25%" },
-			];
-		}
-	}, [showCheckBox]);
-
-	// 点击复选框
-	const hanldeCheckbox = (e: any) => {
-		const selectarr = e.map((item: any) => {
-			let andIndex = item.indexOf("&index=");
-			return item.slice(5, andIndex);
-		});
-		setSelectIds(selectarr);
-	};
+	const versionsHeadCells = [
+		{ id: "name", label: "名称" },
+		{ id: "size", label: "大小", width: 200 },
+		{
+			id: "mtime",
+			numeric: false,
+			label: "创建时间",
+			width: 200,
+		},
+		{ id: "caozuo", label: "操作", width: 200 },
+	];
 
 	// 文件夹下钻
 	const handleViewFolders = (item: any) => {
@@ -312,7 +300,6 @@ const ProjectData = observer(() => {
 
 	// 查看数据集
 	const handleSeeDataset = (item: any) => {
-		console.log(item);
 		setSeeDatasetName(item.name);
 		setShowSeeDataset(true);
 	};
@@ -594,31 +581,19 @@ const ProjectData = observer(() => {
 						</div>
 					</div>
 					<MyTable
-						footer={false}
-						rowHover={true}
-						onRef={tableRef}
-						stickyHeader={true}
-						initSelected={selectIds}
+						fixedHead={true}
+						hasCheckbox={showCheckBox}
 						headCells={versionsHeadCells}
-						rowsPerPage={"99"}
-						checkboxData={(e: any) => {
-							hanldeCheckbox(e);
-						}}
+						selectItems={selectIds}
+						setSelectItems={setSelectIds}
 						rows={showList.map((item: any, index: number) => ({
 							...item,
-							id: `name=${item.name}&index=${index}`,
 							name: renderName(item),
 							size: renderSize(item),
 							mtime: renderMtime(item),
 							caozuo: renderButtons(item),
 						}))}
 					/>
-					{showList.length === 0 && (
-						<div className={style.noDataBox}>
-							<img className={style.noDataImg} src={noFile} alt="" />
-							<span className={style.noDataText}>暂无数据</span>
-						</div>
-					)}
 				</div>
 				{selectIds.length > 0 && (
 					<div className={style.projectDataStickyBox}>
@@ -635,7 +610,6 @@ const ProjectData = observer(() => {
 						/>
 						<MyButton
 							text={`批量移动 (${selectIds.length})`}
-							// color="neutral"
 							variant="contained"
 							style={{ marginRight: "24px" }}
 							onClick={() => {