feat: 完成文件选择弹窗

src/components/BusinessComponents/FileSelect/index.module.css

@@ -49,3 +49,17 @@
 	line-height: 22px;
 	color: #8a9099;
 }
+
+.folderIconBox {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+}
+
+.folderPointer {
+	cursor: pointer;
+}
+
+.folderIcon {
+	margin-right: 12px;
+}

src/components/BusinessComponents/FileSelect/index.tsx

@@ -5,6 +5,7 @@ import { useStores } from "@/store";
 import { observer } from "mobx-react-lite";
 import { toJS } from "mobx";
 import CloudEController from "@/api/fileserver/CloudEController";
+import { getDataFind, getDataFileSearch } from "@/api/project_api";
 import MyTreeView from "@/components/mui/MyTreeView";
 import classNames from "classnames";
 import bigFolderIcon from "@/assets/project/bigFolderIcon.svg";
@@ -16,7 +17,6 @@ import dataSetIcon from "@/assets/project/dataSetIcon.svg";
 import fileIcon from "@/assets/project/fileIcon.svg";
 import OutlinedInput from "@mui/material/OutlinedInput";
 import useMyRequest from "@/hooks/useMyRequest";
-import { getDataFind } from "@/api/project_api";
 import { storageUnitFromB } from "@/utils/util";
 import classnames from "classnames";
 import _ from "lodash";
@@ -35,6 +35,8 @@ const FileSelect = observer((props: FileSelectProps) => {
 	const projectId = toJS(currentProjectStore.currentProjectInfo.id);
 	const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
 	const [path, setPath] = useState<String>("/");
+	const [selectFileName, setSelectFileName] = useState("");
+	const [selectItem, setSelectItem] = useState({});
 	// 防止用户连续点击文件夹造成路径显示错误
 	const [debounce, setDebounce] = useState(false);
 	// 文件夹、文件列表
@@ -56,12 +58,12 @@ const FileSelect = observer((props: FileSelectProps) => {
 	};
 
 	// 按回车搜索
-	const handleKeyWordChangeKeyUp = (e: any) => {
-		if (e.keyCode === 13) {
-			// searchFileList();
-			// getDataSetListSearch();
-		}
-	};
+	// const handleKeyWordChangeKeyUp = (e: any) => {
+	// 	if (e.keyCode === 13) {
+	// 		searchFileList();
+	// 		getDataSetListSearch();
+	// 	}
+	// };
 
 	// 文件夹下钻
 	const handleViewFolders = (item: any) => {
@@ -77,6 +79,103 @@ const FileSelect = observer((props: FileSelectProps) => {
 		}
 	};
 
+	// 获取某路径下的数据集fun
+	const { run: getDataFindRun } = useMyRequest(getDataFind, {
+		onSuccess: (res: any) => {
+			const dataSetList = res.data.map((item: any) => {
+				return {
+					...item,
+					type: "dataSet",
+				};
+			});
+			setDataSetList(dataSetList);
+			setDebounce(false);
+		},
+	});
+
+	// 获取某路径下的数据集
+	const getDataSetList = useCallback(() => {
+		if (keyWord) {
+			return;
+		} else if (projectId) {
+			return getDataFindRun({
+				projectId: projectId as string,
+				path: path === "/" ? "/" : `${path}/`,
+			});
+		}
+	}, [keyWord, path, projectId, getDataFindRun]);
+
+	// 全局搜索数据集fun
+	const { run: getDataFileSearchRun } = useMyRequest(getDataFileSearch, {
+		onSuccess: (res: any) => {
+			const dataSetList = res.data.map((item: any) => {
+				return {
+					...item,
+					type: "dataSet",
+				};
+			});
+			setDataSetList(dataSetList);
+		},
+	});
+
+	// 全局搜索数据集
+	const getDataSetListSearch = useCallback(() => {
+		if (keyWord && projectId) {
+			return getDataFileSearchRun({
+				projectId: projectId as string,
+				name: keyWord,
+			});
+		} else {
+			return getDataSetList();
+		}
+	}, [keyWord, projectId, getDataFileSearchRun, getDataSetList]);
+
+	// 获取某路径下的文件目录
+	const getList = useCallback(() => {
+		if (keyWord) {
+			return;
+		} else if (fileToken && projectId) {
+			return CloudEController.JobOutFileList(
+				path,
+				fileToken,
+				projectId,
+				false
+			)?.then((res) => {
+				if (Array.isArray(res.data)) {
+					setList(res.data);
+				} else {
+					setList([]);
+				}
+				setDebounce(false);
+			});
+		}
+	}, [fileToken, path, projectId, keyWord]);
+
+	// 全局搜索文件列表
+	const searchFileList = useCallback(() => {
+		if (!keyWord) {
+			getList();
+		} else {
+			if (fileToken && projectId) {
+				setPath("/");
+				return CloudEController.JobSearchFileList(
+					keyWord,
+					"/",
+					fileToken,
+					projectId,
+					false
+				)?.then((res) => {
+					if (Array.isArray(res.data)) {
+						setList(res.data);
+					} else {
+						setList([]);
+					}
+					setDebounce(false);
+				});
+			}
+		}
+	}, [fileToken, projectId, keyWord, getList]);
+
 	// table配置
 	const renderName = (item: any) => {
 		if (item.type === "directory") {
@@ -137,8 +236,24 @@ const FileSelect = observer((props: FileSelectProps) => {
 
 	// 列表展示的数据
 	const showList = useMemo(() => {
-		return [...list, ...dataSetList];
-	}, [list, dataSetList]);
+		let folderList: any = [];
+		let fileList: any = [];
+		list.forEach((item: any) => {
+			if (item.type === "directory") {
+				folderList.push(item);
+			} else {
+				fileList.push(item);
+			}
+		});
+		if (type === "file") {
+			return [...folderList, ...fileList];
+		} else if (type === "dataset") {
+			return [...folderList, ...dataSetList];
+		} else {
+			// type === path
+			return [...folderList];
+		}
+	}, [list, dataSetList, type]);
 
 	// 前端展示的文件路径
 	const showPath = useMemo(() => {
@@ -209,6 +324,49 @@ const FileSelect = observer((props: FileSelectProps) => {
 		}
 	}, [path]);
 
+	const getAllData = useCallback(() => {
+		setDataSetList([]);
+		setList([]);
+		if (type === "file" || type === "path") {
+			// 不需要获取数据集
+			if (keyWord) {
+				// 搜索的话是全局搜
+				searchFileList();
+			} else {
+				getList();
+			}
+		} else {
+			// 需要获取数据集
+			if (keyWord) {
+				// 搜索的话是全局搜
+				searchFileList();
+				getDataSetListSearch();
+			} else {
+				getList();
+				getDataSetList();
+			}
+		}
+		// type?: "file" | "dataset" | "path";
+	}, [
+		type,
+		keyWord,
+		searchFileList,
+		getList,
+		getDataSetListSearch,
+		getDataSetList,
+	]);
+
+	useEffect(() => {
+		getAllData();
+	}, [getAllData]);
+
+	const radioClick = (rowItem: any) => {
+		console.log(rowItem);
+		setSelectItem(rowItem);
+		let name = rowItem.id;
+		setSelectFileName(name.slice(5, name.indexOf("&index=")));
+	};
+
 	return (
 		<MyDialog
 			open={props.open}
@@ -227,7 +385,7 @@ const FileSelect = observer((props: FileSelectProps) => {
 							size="small"
 							sx={{ width: 240, height: 32 }}
 							endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
-							onKeyUp={handleKeyWordChangeKeyUp}
+							// onKeyUp={handleKeyWordChangeKeyUp}
 						/>
 					</div>
 				</div>
@@ -245,6 +403,8 @@ const FileSelect = observer((props: FileSelectProps) => {
 						size: renderSize(item),
 						mtime: renderMtime(item),
 					}))}
+					radioClick={radioClick}
+					cursor="name"
 				></Table>
 				{showList.length === 0 && (
 					<div className={style.noDataBox}>

src/components/Material.Ui/Table.jsx

@@ -20,7 +20,7 @@ export default function EnhancedTable(props) {
   const [order, setOrder] = React.useState("asc");
   const [orderBy, setOrderBy] = React.useState("");
   const { headCells, rows, footer = true, elevation1, tableStyle, tablecellstyle, tableContainerStyle, stickyheader, onRowClick, defaultRow, minHeight = '', borderBottom = '', onDoubleClick,
-    load, size, checkboxData, rowsPerPage = 10, initSelected, page = 0, changePage = function () { }, toolbar, count, param, disabledparam = "id", headTableCellCheckbox, RowHeight = '', CellWidth = '', rowHover, TableNodataPadding = '', TableNodataLineHeight = '', tableBoySx } = props;
+    load, size, checkboxData, rowsPerPage = 10, initSelected, page = 0, changePage = function () { }, toolbar, count, param, disabledparam = "id", headTableCellCheckbox, RowHeight = '', CellWidth = '', rowHover, TableNodataPadding = '', TableNodataLineHeight = '', tableBoySx, radioClick} = props;
   const [selected, setSelected] = React.useState(initSelected || []);
   const [rowsPerPageOptions] = React.useState(initSelected || [5, 10, 20, 50, { value: -1, label: 'All' }]);
   const [onRow, setOnRow] = React.useState('')
@@ -81,6 +81,10 @@ export default function EnhancedTable(props) {
     setSelected(newSelected);
   };
 
+  const handleRadioClick = (id) => {
+    setSelected(id)
+  }
+
   const handleOnPageChange = (event, newPage) => {
     changePage(newPage, rowsPerPage);
   };
@@ -149,7 +153,6 @@ export default function EnhancedTable(props) {
                 return (
                   <TableRow
                     hover={rowHover ? false : (row[disabledparam || "enabled"] ? true : false)}
-
                     onDoubleClick={() => {
                       onDoubleClick && onDoubleClick(row)
                     }}
@@ -164,6 +167,10 @@ export default function EnhancedTable(props) {
                     tabIndex={-1}
                     key={row[param || "id"] || index}
                     selected={isItemSelected}
+                    onClick={() => {
+                      radioClick && radioClick(row)
+                      radioClick && handleRadioClick(row[param || "id"])
+                    }}
                   >
                     {
                       headCells.filter(k => k.id === "checkbox").length > 0 && <TableCell

src/views/Project/ProjectData/index.tsx

@@ -559,14 +559,6 @@ const ProjectData = observer(() => {
 		}
 	}, [path]);
 
-	const onConfirm = (e: string) => {
-		console.log("onConfirm", e);
-	};
-
-	const onClose = () => {
-		console.log("onClose");
-	};
-
 	if (currentProjectStore.currentProjectInfo.name) {
 		return (
 			<ThemeProvider theme={theme}>
@@ -749,11 +741,6 @@ const ProjectData = observer(() => {
 						refresh={handleRefresh}
 						showList={showList}
 					></MoveFile>
-					{/* <FileSelect
-						open={true}
-						onConfirm={onConfirm}
-						onClose={onClose}
-					></FileSelect> */}
 				</div>
 			</ThemeProvider>
 		);