Skip to content

B
bkunyun
Commit 83f39218 authored by chenshouchao's avatar chenshouchao
Browse files
Options

feat： 新增多选 分页组件

parent 9c8fe2c6
Hide whitespace changes
Inline Side-by-side
Showing with 381 additions and 105 deletions
src/components/CommonComponents/FullScreenDrawer/index.module.css
View file @ 83f39218
......@@ -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
View file @ 83f39218
......@@ -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 0 → 100644
View file @ 83f39218
// 分页组件
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
View file @ 83f39218
.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
View file @ 83f39218
......@@ -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,38 +32,144 @@ 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.screens}>
<div className={style.screensLeft}>
<RadioGroupOfButtonStyle
handleRadio={setGraphicDimension}
value={graphicDimension}
radioOptions={[
{
value: "2D",
label: "2D",
},
{
value: "3D",
label: "3D",
},
]}
RadiosBoxStyle={{ width: "132px" }}
></RadioGroupOfButtonStyle>
<MyMultipleMenu
value={showDataTypes}
options={dataTypes}
setValue={setShowDataTypes}
showSelectAll={true}
>
选择显示数据({showDataTypes.length})
</MyMultipleMenu>
<div className={style.datasetBox}>
<div className={style.top}>
<div className={style.title}>数据集title</div>
<div className={style.screens}>
<div className={style.screensLeft}>
<RadioGroupOfButtonStyle
handleRadio={setGraphicDimension}
value={graphicDimension}
radioOptions={[
{
value: "2D",
label: "2D",
},
{
value: "3D",
label: "3D",
},
]}
RadiosBoxStyle={{ width: "132px" }}
></RadioGroupOfButtonStyle>
<MyMultipleMenu
value={showDataTypes}
options={dataTypes}
setValue={setShowDataTypes}
showSelectAll={true}
>
<span className={style.selectShowData}>
选择显示数据({showDataTypes.length})
</span>
</MyMultipleMenu>
</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 className={style.screensRight}></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
View file @ 83f39218
......@@ -6,88 +6,90 @@ import FormHelperText from "@mui/material/FormHelperText";
import Select, { SelectProps } from "@mui/material/Select";
export interface IOption {
label: string;
value: string;
disabled?: boolean;
label: string;
value: string;
disabled?: boolean;
}
export const optionsTransform = (
arr: Array<any>,
labelKey: string = "label",
valueKey: string = "value",
disabledKey: string = "disabled"
arr: Array<any>,
labelKey: string = "label",
valueKey: string = "value",
disabledKey: string = "disabled"
): Array<IOption> => {
return arr.map((item: any) => {
return {
label: item[labelKey],
value: item[valueKey],
disabled: item[disabledKey],
};
});
return arr.map((item: any) => {
return {
label: item[labelKey],
value: item[valueKey],
disabled: item[disabledKey],
};
});
};
interface IProps
extends Omit<SelectProps, "value" | "options" | "onChange" | "title"> {
value?: any;
options: IOption[];
onChange?: any;
/** 类型变种 */
variant?: "standard" | "outlined" | "filled";
/** title */
title?: string;
/** 是否显示title */
isTitle?: boolean;
size?: "small" | "medium";
multiple?: boolean; // 多选
error?: boolean;
helpertext?: string;
extends Omit<SelectProps, "value" | "options" | "onChange" | "title"> {
value?: any;
options: IOption[];
onChange?: any;
/** 类型变种 */
variant?: "standard" | "outlined" | "filled";
/** title */
title?: string;
/** 是否显示title */
isTitle?: boolean;
size?: "small" | "medium";
multiple?: boolean; // 多选
error?: boolean;
helpertext?: string;
fullWidth?: boolean;
}
export default function MySelect(props: IProps) {
const {
value,
options,
onChange,
title,
isTitle = false,
variant,
size = "small",
multiple = false,
error = false,
helpertext,
} = props;
const {
value,
options,
onChange,
title,
isTitle = false,
variant,
size = "small",
multiple = false,
error = false,
helpertext,
fullWidth = true,
} = props;
return (
<FormControl fullWidth variant={variant} error={error}>
{isTitle ? (
<InputLabel id="demo-simple-select-label">
{title || "请选择"}
</InputLabel>
) : null}
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
label={title || ""}
size={size}
{...props}
value={value}
onChange={onChange}
multiple={multiple}
>
{options.length
? options?.map((item: IOption) => {
return (
<MenuItem
key={item.value}
value={item.value}
disabled={item?.disabled}
>
{item.label}
</MenuItem>
);
})
: null}
</Select>
{helpertext && error && <FormHelperText>{helpertext}</FormHelperText>}
</FormControl>
);
return (
<FormControl fullWidth={fullWidth} variant={variant} error={error}>
{isTitle ? (
<InputLabel id="demo-simple-select-label">
{title || "请选择"}
</InputLabel>
) : null}
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
label={title || ""}
size={size}
{...props}
value={value}
onChange={onChange}
multiple={multiple}
>
{options.length
? options?.map((item: IOption) => {
return (
<MenuItem
key={item.value}
value={item.value}
disabled={item?.disabled}
>
{item.label}
</MenuItem>
);
})
: null}
</Select>
{helpertext && error && <FormHelperText>{helpertext}</FormHelperText>}
</FormControl>
);
}
src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.module.css
View file @ 83f39218
......@@ -22,7 +22,7 @@
border-radius: 16px 0 0 0;
padding: 24px 32px;
box-sizing: border-box;
overflow: scroll;
overflow: auto;
}
.templateList {
/* height: 2000px; */
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment