feat： 新增多选 分页组件

src/components/CommonComponents/FullScreenDrawer/index.module.css

@@ -46,7 +46,7 @@
 	left: 0;
 	background-color: #fff;
 	border-radius: 16px 0 0 0;
-	padding: 24px 32px;
+	/* padding: 24px 32px; */
 	box-sizing: border-box;
 	overflow: scroll;
 	animation: showDrawer 1s ease;

src/components/mui/MyMultipleMenu.tsx

@@ -5,6 +5,8 @@ import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Checkbox from "@mui/material/Checkbox";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
 import _ from "lodash";
 
 const theme = createTheme({
@@ -79,6 +81,7 @@ type IMyMultipleMenuProps = {
 	setValue?: any; // 设置选中的项values
 	showSelectAll?: boolean; // 是否显示全选
 	selectAllText?: string; // 全选的文字
+	showHiddenIcon?: boolean; // 是否显示 展开收起箭头
 };
 
 const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
@@ -89,6 +92,7 @@ const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
 		setValue,
 		showSelectAll = false,
 		selectAllText = "全部",
+		showHiddenIcon = true,
 	} = props;
 	// 下拉框展示的相对位置参考元素
 	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -132,10 +136,28 @@ const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
 		return result === -1 ? false : true;
 	};
 
+	const randerShowHiddenIcon = () => {
+		if (Boolean(anchorEl)) {
+			return <ArrowDropUpIcon sx={{ color: "rgba(19, 112, 255, 1)" }} />;
+		} else {
+			return <ArrowDropDownIcon sx={{ color: "rgba(19, 112, 255, 1)" }} />;
+		}
+	};
+
 	return (
 		<ThemeProvider theme={theme}>
 			<div>
-				<div onClick={handleClick}>{children}</div>
+				<div
+					onClick={handleClick}
+					style={{
+						display: "flex",
+						justifyContent: "flex-start",
+						alignItems: "center",
+					}}
+				>
+					{children}
+					{showHiddenIcon && randerShowHiddenIcon()}
+				</div>
 				<Menu
 					id="basic-menu"
 					anchorEl={anchorEl}

src/components/mui/MyPagination.tsx

+// 分页组件
+import Pagination from "@mui/material/Pagination";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+const theme = createTheme({
+	components: {
+		MuiPaginationItem: {
+			styleOverrides: {
+				root: {
+					"&.Mui-selected": {
+						background: "rgba(19, 112, 255, 1)",
+						color: "#fff",
+						":hover": {
+							background: "rgba(19, 112, 255, 1)",
+							color: "#fff",
+						},
+					},
+				},
+			},
+		},
+	},
+});
+
+type IMyPaginationProps = {
+	page: number;
+	pageChange: any;
+	count: number;
+};
+
+const MyPagination = (props: IMyPaginationProps) => {
+	const { page, pageChange, count } = props;
+	const handlePageChange = (e: any, value: number) => {
+		pageChange && pageChange(value);
+	};
+	return (
+		<ThemeProvider theme={theme}>
+			<Pagination
+				page={page}
+				count={count}
+				shape="rounded"
+				onChange={handlePageChange}
+			/>
+		</ThemeProvider>
+	);
+};
+
+export default MyPagination;

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

+.datasetBox {
+	padding: 24px 32px 0;
+	box-sizing: border-box;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	height: 100%;
+}
+.top {
+	margin-bottom: 20px;
+}
+.title {
+	line-height: 22px;
+	color: rgba(30, 38, 51, 1);
+	font-size: 18px;
+	font-weight: 600;
+	margin-bottom: 20px;
+}
+.screens {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+.screensLeft {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+}
+.screensRight {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+}
+.selectShowData {
+	margin-left: 24px;
+	font-size: 14px;
+	color: rgba(19, 112, 255, 1);
+}
+.table {
+	flex: 1;
+	overflow: auto;
+	display: flex;
+	flex-direction: column;
+}
+.list {
+	flex: 1;
+	display: flex;
+	justify-content: space-between;
+	flex-wrap: wrap;
+}
+.datasetLi {
+	flex: 1;
+	min-width: 20%;
+	margin: 0 16px 16px 0;
+	border: 1px solid rgba(235, 237, 240, 1);
+	border-radius: 4px;
+	min-height: 275px;
+	box-sizing: border-box;
+}
+.datasetLi:nth-child(4n) {
+	margin-right: 0;
+}
+.datasetLi:nth-last-child(1) {
+	margin-bottom: 0;
+}
+.datasetLi:nth-last-child(2) {
+	margin-bottom: 0;
+}
+.datasetLi:nth-last-child(3) {
+	margin-bottom: 0;
+}
+.datasetLi:nth-last-child(4) {
+	margin-bottom: 0;
+}
+.pagination {
+	height: 76px;
+	min-height: 76px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+.foot {
+	position: absolute;
+	bottom: 0;
+	background-color: #fff;
+	width: 100%;
+	box-sizing: border-box;
+	height: 64px;
+	padding: 0 32px;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	box-shadow: 0px -3px 10px 0px rgba(0, 24, 57, 0.04);
+}

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

@@ -2,6 +2,11 @@ import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";
 import { useState } from "react";
 import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
 import MyMultipleMenu, { IOption } from "@/components/mui/MyMultipleMenu";
+import MySelect from "../../ProjectSubmitWork/components/MySelect";
+import MyInput from "@/components/mui/MyInput";
+import ButtonComponent from "@/components/mui/MyButton";
+import SearchIcon from "@mui/icons-material/Search";
+import MyPagination from "@/components/mui/MyPagination";
 import style from "./index.module.css";
 
 type ISeeDatasetProps = {
@@ -27,9 +32,31 @@ const SeeDataset = (props: ISeeDatasetProps) => {
 	const [graphicDimension, setGraphicDimension] = useState("2D"); // 分子结构图是2D还是3D
 	const [showDataTypes, setShowDataTypes] = useState<Array<string>>([]); //显示的数据类型
 	const [dataTypes, setdataTypes] = useState<Array<IOption>>(dataTypesMock); // 可选的数据类型
+	const [sort, setSort] = useState("null"); // 排序方式
+	const [keyword, setKeyword] = useState(""); // 关键字
+	const [searchDataType, setSearchDataType] = useState<string>(""); //显示的数据类型
+	const [page, setPage] = useState(1); // 当前页码
+	const [count, setCount] = useState(1); // 总页数
+	const handleSearchDataTypeChange = (e: any) => {
+		setSearchDataType(e.target.value);
+	};
+	const handleSortChange = (e: any) => {
+		console.log(e);
+		setSort(e.target.value);
+	};
+	const handleKeywordChange = (e: any) => {
+		console.log(e);
+		setKeyword(e.target.value);
+	};
+	const list = [1, 2, 3, 2, 1, 45, 6, 7];
+	const pageChange = (value: number) => {
+		setPage(value);
+	};
 	return (
 		<FullScreenDrawer handleClose={props.handleClose}>
-			<h2>数据集title</h2>
+			<div className={style.datasetBox}>
+				<div className={style.top}>
+					<div className={style.title}>数据集title</div>
 					<div className={style.screens}>
 						<div className={style.screensLeft}>
 							<RadioGroupOfButtonStyle
@@ -53,12 +80,96 @@ const SeeDataset = (props: ISeeDatasetProps) => {
 								setValue={setShowDataTypes}
 								showSelectAll={true}
 							>
+								<span className={style.selectShowData}>
 									选择显示数据({showDataTypes.length})
+								</span>
 							</MyMultipleMenu>
 						</div>
-				<div className={style.screensRight}></div>
+						<div className={style.screensRight}>
+							<MySelect
+								options={dataTypes}
+								placeholder="选择属性"
+								value={searchDataType}
+								onChange={handleSearchDataTypeChange}
+								fullWidth={false}
+								sx={{
+									width: "160px",
+									marginRight: "16px",
+								}}
+							></MySelect>
+							<MySelect
+								options={[
+									{
+										label: "无",
+										value: "null",
+									},
+									{
+										label: "正序",
+										value: "1",
+									},
+									{
+										label: "倒序",
+										value: "2",
+									},
+								]}
+								title="排序方式"
+								value={sort}
+								onChange={handleSortChange}
+								isTitle={true}
+								fullWidth={false}
+								sx={{
+									width: "160px",
+									marginRight: "16px",
+								}}
+							></MySelect>
+							<MyInput
+								value={keyword}
+								onChange={handleKeywordChange}
+								placeholder="请输入关键词搜索"
+								fullWidth={false}
+								InputProps={{
+									endAdornment: <SearchIcon style={{ color: "#8A9099" }} />,
+								}}
+								inputSx={{
+									width: "340px",
+									marginRight: "16px",
+								}}
+								// sx={{
+								// 	width: "340px",
+								// 	marginRight: "16px",
+								// }}
+							></MyInput>
+							<ButtonComponent
+								text="确认"
+								style={{ width: "68px" }}
+							></ButtonComponent>
+						</div>
+					</div>
+				</div>
+				<div className={style.table}>
+					<div className={style.list}>
+						{list.map((item) => {
+							return (
+								<div className={style.datasetLi}>
+									{/* <div className={datasetLiTop}></div>
+								<div className={datasetLiTop}></div> */}
+								</div>
+							);
+						})}
+					</div>
+					<div className={style.pagination}>
+						<MyPagination page={page} pageChange={pageChange} count={count} />
+					</div>
+				</div>
 			</div>
-			SeeDataset
+			{/* <div className={style.foot}>
+				<ButtonComponent
+					variant="outlined"
+					text="下载"
+					style={{ marginRight: "12px" }}
+				></ButtonComponent>
+				<ButtonComponent text="另存为"></ButtonComponent>
+			</div> */}
 		</FullScreenDrawer>
 	);
 };

src/views/Project/ProjectSubmitWork/components/MySelect.tsx

@@ -41,6 +41,7 @@ interface IProps
 	multiple?: boolean; // 多选
 	error?: boolean;
 	helpertext?: string;
+	fullWidth?: boolean;
 }
 export default function MySelect(props: IProps) {
 	const {
@@ -54,10 +55,11 @@ export default function MySelect(props: IProps) {
 		multiple = false,
 		error = false,
 		helpertext,
+		fullWidth = true,
 	} = props;
 
 	return (
-    <FormControl fullWidth variant={variant} error={error}>
+		<FormControl fullWidth={fullWidth} variant={variant} error={error}>
 			{isTitle ? (
 				<InputLabel id="demo-simple-select-label">
 					{title || "请选择"}

src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.module.css

@@ -22,7 +22,7 @@
 	border-radius: 16px 0 0 0;
 	padding: 24px 32px;
 	box-sizing: border-box;
-	overflow: scroll;
+	overflow: auto;
 }
 .templateList {
 	/* height: 2000px; */