Skip to content

B
bkunyun
Commit 453a73cf authored by chenshouchao's avatar chenshouchao
Browse files
Options

Merge branch 'feat-20220908-dataset' into 'staging' 

Feat 20220908 dataset

See merge request !101
parents 5d6441e7 819d0e07
Hide whitespace changes
Inline Side-by-side
Showing with 1932 additions and 484 deletions
src/api/fileserver/CloudEController.ts
View file @ 453a73cf
...@@ -30,6 +30,27 @@ type IGetDatasetItemsListParams = { ...@@ -30,6 +30,27 @@ type IGetDatasetItemsListParams = {
sort?: string; // 排序 sort?: string; // 排序
} }
export type IQuery = {
index: string;
compare: ">" | "<" | ">=" | "<=" | "=" | "≈";
query: string;
};
type IQuerylist = Array<IQuery>
type IGetDatasetItemsListNewParamstype = {
type?: string;
projectId: string;
token: string;
filetoken: string;
path: string; // 数据集路径
name: string; // 数据集名称
page: number; //
size: number; //
index?: string; // 选择的属性
sort?: string; // 排序
}
type IGetDatasetSizeParams = { type IGetDatasetSizeParams = {
type?: string; // 产品id type?: string; // 产品id
projectId: string; projectId: string;
...@@ -281,6 +302,22 @@ class CloudEController { ...@@ -281,6 +302,22 @@ class CloudEController {
} }
} }
// 获取数据集里的数据列表（新 可支持高级搜索）
static GetDatasetItemsListNew(params: IGetDatasetItemsListNewParamstype, querylist: IQuerylist) {
if (ApiUtils.getAuthorizationHeaders(headers)) {
headers["Cache-Control"] = "no-cache";
let url = getUrlThroughParams(params, ['filetoken','path','token'], '?')
return axios.post(
`${APIOPTION()}:5003/find/dataset/new${url}`,{
querylist
},
{
headers: headers,
}
);
}
}
// 分子另存为 // 分子另存为
static SaveDataset(params: ISaveDatasetParams) { static SaveDataset(params: ISaveDatasetParams) {
if (ApiUtils.getAuthorizationHeaders(headers)) { if (ApiUtils.getAuthorizationHeaders(headers)) {
......
src/assets/project/ascIcon.svg 0 → 100644
View file @ 453a73cf
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 64</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-64">
<rect id="底框备份" x="0" y="0" width="16" height="16"></rect>
<polygon id="路径-15备份-5" fill="#8A9099" fill-rule="nonzero" points="7 3 7 13 3 13 3 11.2857143 5.39968807 11.2855021 5.4 3"></polygon>
<polygon id="路径-15备份-6" fill="#1370FF" fill-rule="nonzero" transform="translate(11.000000, 8.000000) scale(-1, -1) translate(-11.000000, -8.000000) " points="13 3 13 13 9 13 9 11.2857143 11.3996881 11.2855021 11.4 3"></polygon>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/card.svg 0 → 100644
View file @ 453a73cf
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 8备份 5</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/图表排序">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-4" transform="translate(1.000000, 1.000000)">
<rect id="矩形" stroke="#8A9099" stroke-width="1.5" x="0.75" y="0.75" width="12.5" height="12.5" rx="1"></rect>
<rect id="矩形备份-3" fill="#8A9099" x="3" y="3" width="3.25" height="3.25"></rect>
<rect id="矩形备份-7" fill="#8A9099" x="3" y="7.75" width="3.25" height="3.25"></rect>
<rect id="矩形备份-4" fill="#8A9099" x="7.75" y="3" width="3.25" height="3.25"></rect>
<rect id="矩形备份-9" fill="#8A9099" x="7.75" y="7.75" width="3.25" height="3.25"></rect>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/cardActive.svg 0 → 100644
View file @ 453a73cf
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/图表排序备份</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/图表排序备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-4" transform="translate(1.000000, 1.000000)">
<rect id="矩形" stroke="#1370FF" stroke-width="1.5" x="0.75" y="0.75" width="12.5" height="12.5" rx="1"></rect>
<rect id="矩形备份-3" fill="#1370FF" x="3" y="3" width="3.25" height="3.25"></rect>
<rect id="矩形备份-7" fill="#1370FF" x="3" y="7.75" width="3.25" height="3.25"></rect>
<rect id="矩形备份-4" fill="#1370FF" x="7.75" y="3" width="3.25" height="3.25"></rect>
<rect id="矩形备份-9" fill="#1370FF" x="7.75" y="7.75" width="3.25" height="3.25"></rect>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/descIcon.svg 0 → 100644
View file @ 453a73cf
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 65</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-65">
<rect id="底框" x="0" y="0" width="16" height="16"></rect>
<polygon id="路径-15" fill="#1370FF" fill-rule="nonzero" points="7 3 7 13 3 13 3 11.2857143 5.39968807 11.2855021 5.4 3"></polygon>
<polygon id="路径-15备份" fill="#8A9099" fill-rule="nonzero" transform="translate(11.000000, 8.000000) scale(-1, -1) translate(-11.000000, -8.000000) " points="13 3 13 13 9 13 9 11.2857143 11.3996881 11.2855021 11.4 3"></polygon>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/filter.svg 0 → 100644
View file @ 453a73cf
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/筛选备份</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/筛选备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组" transform="translate(1.780000, 2.250000)" stroke="#565C66" stroke-linejoin="round" stroke-width="1.5">
<polygon id="路径-37" points="0 0 12.4359884 0 7.73913801 5.73968697 7.73913801 12 4.97439538 10.7631496 4.97439538 5.85023682"></polygon>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/sort.svg 0 → 100644
View file @ 453a73cf
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/排序备份 5</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/排序备份-5">
<rect id="底框" x="0" y="0" width="16" height="16"></rect>
<g id="排序" transform="translate(3.000000, 3.000000)" fill="#8A9099" fill-rule="nonzero">
<polygon id="路径-15" points="4 0 4 10 0 10 0 8.28571429 2.39968807 8.28550207 2.4 0"></polygon>
<polygon id="路径-15备份" transform="translate(8.000000, 5.000000) scale(-1, -1) translate(-8.000000, -5.000000) " points="10 0 10 10 6 10 6 8.28571429 8.39968807 8.28550207 8.4 0"></polygon>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/table.svg 0 → 100644
View file @ 453a73cf
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/列表排序备份</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/列表排序备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-4" transform="translate(1.000000, 1.000000)">
<rect id="矩形" stroke="#8A9099" stroke-width="1.5" x="0.75" y="0.75" width="12.5" height="12.5" rx="1"></rect>
<rect id="矩形" fill="#8A9099" x="3" y="3" width="8" height="1.5"></rect>
<rect id="矩形备份-10" fill="#8A9099" x="3" y="6.25" width="8" height="1.5"></rect>
<rect id="矩形备份-11" fill="#8A9099" x="3" y="9.5" width="8" height="1.5"></rect>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/tableActive.svg 0 → 100644
View file @ 453a73cf
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/列表排序备份 2</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/列表排序备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-4" transform="translate(1.000000, 1.000000)">
<rect id="矩形" stroke="#1370FF" stroke-width="1.5" x="0.75" y="0.75" width="12.5" height="12.5" rx="1"></rect>
<rect id="矩形" fill="#1370FF" x="3" y="3" width="8" height="1.5"></rect>
<rect id="矩形备份-10" fill="#1370FF" x="3" y="6.25" width="8" height="1.5"></rect>
<rect id="矩形备份-11" fill="#1370FF" x="3" y="9.5" width="8" height="1.5"></rect>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/components/CommonComponents/RadioGroupOfButtonStyle/index.module.css
View file @ 453a73cf
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border: 1px solid #e6e8eb; /* border: 1px solid #e6e8eb; */
border-radius: 4px; border-radius: 4px;
background-color: #f0f2f5; background-color: #f0f2f5;
cursor: pointer; cursor: pointer;
...@@ -11,21 +11,28 @@ ...@@ -11,21 +11,28 @@
box-sizing: border-box; box-sizing: border-box;
padding: 2px; padding: 2px;
} }
.radio { .radioBox {
position: relative; position: relative;
min-width: 63px; min-width: 63px;
height: 28px; height: 28px;
box-sizing: border-box;
font-size: 14px;
color: #565c66;
border-radius: 2px; border-radius: 2px;
line-height: 20px; line-height: 20px;
padding: 6px 16px;
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
}
.radio {
position: relative;
box-sizing: border-box;
font-size: 14px;
color: #565c66;
padding: 6px 16px;
white-space: nowrap; white-space: nowrap;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
} }
.radioActive { .radioActive {
...@@ -33,6 +40,8 @@ ...@@ -33,6 +40,8 @@
position: relative; position: relative;
} }
.border { .border {
position: absolute;
right: 0px;
width: 1px; width: 1px;
height: 16px; height: 16px;
background-color: rgba(209, 214, 222, 1); background-color: rgba(209, 214, 222, 1);
...@@ -41,10 +50,10 @@ ...@@ -41,10 +50,10 @@
visibility: hidden; visibility: hidden;
} }
.radioActiveBgBox { .radioActiveBgBox {
width: calc(100% - 2px); width: calc(100% - 4px);
position: absolute; position: absolute;
left: 1px; left: 2px;
top: 1px; top: 2px;
height: 28px; height: 28px;
} }
.radioActiveBg { .radioActiveBg {
......
src/components/CommonComponents/RadioGroupOfButtonStyle/index.tsx
View file @ 453a73cf
...@@ -8,12 +8,12 @@ ...@@ -8,12 +8,12 @@
*/ */
// 按钮样式的单选组 // 按钮样式的单选组
import classnames from "classnames"; import classnames from "classnames";
import { useMemo } from "react"; import { ReactElement, useMemo } from "react";
import style from "./index.module.css"; import style from "./index.module.css";
type radioOption = { type radioOption = {
value: string; value: string;
label: string; label: string | ReactElement;
}; };
type IRadioGroupOfButtonStyleProps = { type IRadioGroupOfButtonStyleProps = {
...@@ -21,6 +21,7 @@ type IRadioGroupOfButtonStyleProps = { ...@@ -21,6 +21,7 @@ type IRadioGroupOfButtonStyleProps = {
value: string; value: string;
handleRadio: any; handleRadio: any;
RadiosBoxStyle?: object; RadiosBoxStyle?: object;
radioBoxStyle?: object;
radioStyle?: object; radioStyle?: object;
radioActiveBgBoxStyle?: object; radioActiveBgBoxStyle?: object;
}; };
...@@ -31,6 +32,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => { ...@@ -31,6 +32,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
value, value,
handleRadio, handleRadio,
RadiosBoxStyle, RadiosBoxStyle,
radioBoxStyle,
radioStyle, radioStyle,
radioActiveBgBoxStyle, radioActiveBgBoxStyle,
} = props; } = props;
...@@ -58,6 +60,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => { ...@@ -58,6 +60,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
<div className={style.radioActiveBgBox} style={radioActiveBgBoxStyle}> <div className={style.radioActiveBgBox} style={radioActiveBgBoxStyle}>
<div <div
className={style.radioActiveBg} className={style.radioActiveBg}
// 动画样式绑定
style={{ style={{
width: `${radioWidth}%`, width: `${radioWidth}%`,
transform: `translateX(${activeIndex * 100}%)`, transform: `translateX(${activeIndex * 100}%)`,
...@@ -67,14 +70,17 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => { ...@@ -67,14 +70,17 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
{radioOptions.map((options, index) => { {radioOptions.map((options, index) => {
return ( return (
<> <div
key={options.value}
className={style.radioBox}
onClick={() => handleRadio(options.value)}
style={radioBoxStyle}
>
<div <div
key={options.value}
className={classnames({ className={classnames({
[style.radio]: true, [style.radio]: true,
[style.radioActive]: value === options.value, [style.radioActive]: value === options.value,
})} })}
onClick={() => handleRadio(options.value)}
style={radioStyle} style={radioStyle}
> >
{options.label} {options.label}
...@@ -82,6 +88,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => { ...@@ -82,6 +88,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
<div <div
className={classnames({ className={classnames({
[style.border]: true, [style.border]: true,
// 当相邻的两个tab都是未激活时中间有一条分隔线判断逻辑
[style.borderHidden]: !( [style.borderHidden]: !(
index !== radioOptions.length - 1 && index !== radioOptions.length - 1 &&
index !== activeIndex && index !== activeIndex &&
...@@ -89,7 +96,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => { ...@@ -89,7 +96,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
), ),
})} })}
></div> ></div>
</> </div>
); );
})} })}
</div> </div>
......
src/components/MyRouter/useMyRouter.ts
View file @ 453a73cf
...@@ -27,6 +27,22 @@ const useMyRouter = () => { ...@@ -27,6 +27,22 @@ const useMyRouter = () => {
); );
permissionStore.restAddRoutes(); permissionStore.restAddRoutes();
if (window.location.host === "localhost:8088") {
menuInfo.res.data.forEach((item: any) => {
if (item.id === 'cadd') {
item.routes.push({
element: 'Demo',
id: "demo",
name: "demo",
order: 1000,
path: "/demo",
show: true,
type: "page",
})
}
});
}
for (let item of menuInfo.res.data) { for (let item of menuInfo.res.data) {
for (let route of item.routes) { for (let route of item.routes) {
route.element = elements[route.element] || NotFound; route.element = elements[route.element] || NotFound;
......
src/components/mui/MyCheckBox.tsx
View file @ 453a73cf
...@@ -57,6 +57,7 @@ const theme = createTheme({ ...@@ -57,6 +57,7 @@ const theme = createTheme({
MuiSvgIcon: { MuiSvgIcon: {
styleOverrides: { styleOverrides: {
root: { root: {
color: "rgba(209, 214, 222, 1)",
fontSize: "19px", fontSize: "19px",
}, },
}, },
......
src/components/mui/MyMultipleMenu.tsx
View file @ 453a73cf
...@@ -82,6 +82,7 @@ type IMyMultipleMenuProps = { ...@@ -82,6 +82,7 @@ type IMyMultipleMenuProps = {
showSelectAll?: boolean; // 是否显示全选 showSelectAll?: boolean; // 是否显示全选
selectAllText?: string; // 全选的文字 selectAllText?: string; // 全选的文字
showHiddenIcon?: boolean; // 是否显示 展开收起箭头 showHiddenIcon?: boolean; // 是否显示 展开收起箭头
iconColor?: string; // 展开收起箭头的颜色
}; };
const MyMultipleMenu = (props: IMyMultipleMenuProps) => { const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
...@@ -93,6 +94,7 @@ const MyMultipleMenu = (props: IMyMultipleMenuProps) => { ...@@ -93,6 +94,7 @@ const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
showSelectAll = false, showSelectAll = false,
selectAllText = "全部", selectAllText = "全部",
showHiddenIcon = true, showHiddenIcon = true,
iconColor,
} = props; } = props;
// 下拉框展示的相对位置参考元素 // 下拉框展示的相对位置参考元素
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
...@@ -138,9 +140,15 @@ const MyMultipleMenu = (props: IMyMultipleMenuProps) => { ...@@ -138,9 +140,15 @@ const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
const randerShowHiddenIcon = () => { const randerShowHiddenIcon = () => {
if (Boolean(anchorEl)) { if (Boolean(anchorEl)) {
return <ArrowDropUpIcon sx={{ color: "rgba(19, 112, 255, 1)" }} />; return (
<ArrowDropUpIcon sx={{ color: iconColor || "rgba(19, 112, 255, 1)" }} />
);
} else { } else {
return <ArrowDropDownIcon sx={{ color: "rgba(19, 112, 255, 1)" }} />; return (
<ArrowDropDownIcon
sx={{ color: iconColor || "rgba(19, 112, 255, 1)" }}
/>
);
} }
}; };
......
src/components/mui/MyPagination.tsx
View file @ 453a73cf
// 分页组件 // 分页组件
import Pagination from "@mui/material/Pagination"; import Pagination from "@mui/material/Pagination";
import MySelect from "./MySelect";
import { ThemeProvider, createTheme } from "@mui/material/styles"; import { ThemeProvider, createTheme } from "@mui/material/styles";
const theme = createTheme({ const theme = createTheme({
components: { components: {
MuiPagination: {
styleOverrides: {
ul: {
flexWrap: "nowrap",
},
},
},
MuiPaginationItem: { MuiPaginationItem: {
styleOverrides: { styleOverrides: {
root: { root: {
...@@ -24,16 +33,69 @@ type IMyPaginationProps = { ...@@ -24,16 +33,69 @@ type IMyPaginationProps = {
page: number; page: number;
pageChange: any; pageChange: any;
count: number; count: number;
totalElements?: number;
type?: "simple" | "complex";
rowsPerPage?: number; // 每页多少条数据
handleChangeRowsPerPage?: any;
}; };
const MyPagination = (props: IMyPaginationProps) => { const MyPagination = (props: IMyPaginationProps) => {
const { page, pageChange, count } = props; const {
page,
pageChange,
count,
type = "simple",
rowsPerPage = 10,
handleChangeRowsPerPage,
totalElements = 0,
} = props;
const handlePageChange = (e: any, value: number) => { const handlePageChange = (e: any, value: number) => {
pageChange && pageChange(value); pageChange && pageChange(value);
}; };
const rowsPerPageChange = (e: any) => {
handleChangeRowsPerPage(Number(e));
};
return ( return (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
{type === "complex" && (
<>
<span
style={{
marginRight: "20px",
fontSize: "14px",
color: "rgba(30, 38, 51, 1)",
}}
>
总计：{totalElements}
</span>
<MySelect
style={{ marginRight: "20px" }}
value={String(rowsPerPage)}
onChange={(e) => rowsPerPageChange(e)}
size={"small"}
options={[
{
label: "10/页",
value: "10",
},
{
label: "20/页",
value: "20",
},
{
label: "50/页",
value: "50",
},
{
label: "100/页",
value: "100",
},
]}
></MySelect>
</>
)}
<Pagination <Pagination
page={page + 1} // 请求接口的页码是从0开始的 page={page + 1} // 请求接口的页码是从0开始的
count={count + 1} count={count + 1}
......
src/components/mui/MyPopover.tsx
View file @ 453a73cf
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
*/ */
import { useRef, useEffect, useState } from "react"; import { useRef, useEffect, useState } from "react";
import Popover, { PopoverProps } from "@mui/material/Popover"; import Popover, { PopoverProps } from "@mui/material/Popover";
import Typography from "@mui/material/Typography"; import { ThemeProvider, createTheme } from "@mui/material/styles";
interface IProps extends Omit<PopoverProps, "open"> { interface IProps extends Omit<PopoverProps, "open"> {
/** 触发行为 */ /** 触发行为 */
...@@ -22,7 +22,18 @@ interface IProps extends Omit<PopoverProps, "open"> { ...@@ -22,7 +22,18 @@ interface IProps extends Omit<PopoverProps, "open"> {
/** open 修改 */ /** open 修改 */
changeOpen: (val: boolean) => void; changeOpen: (val: boolean) => void;
} }
const theme = createTheme({
components: {
MuiPaper: {
styleOverrides: {
root: {
boxShadow: "0px 3px 10px 0px rgba(0,24,57,0.14)",
},
},
},
},
});
// .css-3bmhjh-MuiPaper-root-MuiPopover-paper
const MyPopover = (props: IProps) => { const MyPopover = (props: IProps) => {
const [anchorEl, setAnchorEl] = useState<any | null>(null); const [anchorEl, setAnchorEl] = useState<any | null>(null);
const ref = useRef(null); const ref = useRef(null);
...@@ -61,40 +72,42 @@ const MyPopover = (props: IProps) => { ...@@ -61,40 +72,42 @@ const MyPopover = (props: IProps) => {
const id = open ? "simple-popover" : undefined; const id = open ? "simple-popover" : undefined;
return ( return (
<div> <ThemeProvider theme={theme}>
<Typography <div>
ref={ref} <div
aria-owns={id} ref={ref}
onClick={trigger === "click" ? handelClick : undefined} aria-owns={id}
onMouseEnter={trigger === "hover" ? handlePopoverOpen : undefined} onClick={trigger === "click" ? handelClick : undefined}
onMouseLeave={trigger === "hover" ? handlePopoverClose : undefined} onMouseEnter={trigger === "hover" ? handlePopoverOpen : undefined}
> onMouseLeave={trigger === "hover" ? handlePopoverClose : undefined}
{children} >
</Typography> {children}
<Popover </div>
id={id} <Popover
open={open} id={id}
anchorEl={anchorEl} open={open}
onClose={handlePopoverClose} anchorEl={anchorEl}
sx={{ onClose={handlePopoverClose}
pointerEvents: trigger === "hover" ? "none" : undefined, sx={{
}} pointerEvents: trigger === "hover" ? "none" : undefined,
anchorOrigin={ }}
anchorOrigin || { anchorOrigin={
vertical: "bottom", anchorOrigin || {
horizontal: "center", vertical: "bottom",
horizontal: "center",
}
} }
} transformOrigin={
transformOrigin={ transformOrigin || {
transformOrigin || { vertical: "top",
vertical: "top", horizontal: "center",
horizontal: "center", }
} }
} >
> {content}
<Typography sx={{ p: 1 }}>{content}</Typography> </Popover>
</Popover> </div>
</div> </ThemeProvider>
); );
}; };
......
src/components/mui/MyTableNew.tsx 0 → 100644
View file @ 453a73cf
import { useCallback, useMemo } from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import Checkbox from "@mui/material/Checkbox";
import MyPagination from "@/components/mui/MyPagination";
import ascIcon from "@/assets/project/ascIcon.svg";
import descIcon from "@/assets/project/descIcon.svg";
import sortIcon from "@/assets/project/sort.svg";
import CircularProgress from "@mui/material/CircularProgress";
import { createTheme, ThemeProvider } from "@mui/material";
import MyTooltip from "./MyTooltip";
import noFile from "@/assets/project/noFile.svg";
type Order = "ASC" | "DESC"; // 升序为asc，降序为desc。
export type sortState = {
field: string | null | undefined | ""; // 根据哪个属性来排序
order: Order | null | undefined | "";
};
interface IMyTableProps {
rows: Array<any>; // 表格数据
headCells: Array<any>; // 表头配置
key?: string; // 表格数据的key
loading?: boolean; // 是否正在加载数据
hasCheckbox?: boolean; // 是否有复选框
selectItems?: Array<any>; // 选中的项
setSelectItems?: any; // 设置选中的项
fixedHead?: boolean; // 是否是固定表头
noDataText?: string; // 无数据提示文案
hasTableFooter?: boolean; // 是否有分页组件
page?: number; // 当前页
pageChange?: any; // 页码改变
count?: number; // 总页数
totalElements?: number; // 数据总量 不止是列表渲染的长度
sortState?: sortState; // 排序状态
setSortState?: any; // 设置排序状态
paginationType?: "simple" | "complex"; // 分页组件的类型 simple简介式 complex复杂、带每页数量切换、总数等
rowsPerPage?: number; // 每页多少条数据
handleChangeRowsPerPage?: any; // 每页多少条数据变化
nodataText?: any; // 无数据文案
}
const MyTable = (props: IMyTableProps) => {
const {
rows,
headCells,
key = "id",
loading = false,
hasCheckbox = false,
selectItems = [],
setSelectItems,
fixedHead,
hasTableFooter = false,
page = 0,
pageChange = () => {},
count = 1,
sortState,
setSortState,
paginationType = "simple",
rowsPerPage = 10,
handleChangeRowsPerPage,
totalElements = 0,
nodataText,
} = props;
const theme = useMemo(() => {
return createTheme({
components: {
MuiTable: {
styleOverrides: {
root: {
// minHeight: "100px",
},
},
},
MuiTableHead: {
styleOverrides: {
root: {
background: "rgba(247, 248, 250, 1)",
"& .MuiTableRow-head": {
borderRadius: "4px 4px 0 0",
borderBottom: "1px solid rgba(240, 242, 245, 1)",
},
},
},
},
MuiTableRow: {
styleOverrides: {
root: {
opacity: loading ? 0.5 : 1,
":hover": {
background: "rgba(245, 246, 247, 1)",
},
"& .MuiTableCell-root": {
"&.MuiTableCell-head": {
fontSize: "12px",
lineHeight: "20px",
color: "rgba(138, 144, 153, 1)",
padding: "12px 16px",
whiteSpace: "nowrap",
},
"&.MuiTableCell-head:nth-of-type(1)": {
paddingRight: hasCheckbox ? "8px" : "16px",
},
},
"&.MuiTableRow-footer": {
// 分页的那一行不要hover效果
":hover": {
background: "#fff",
},
},
},
},
},
MuiPaper: {
styleOverrides: {
root: {
// minHeight: "200px",
position: "relative",
"&.MuiTableContainer-root": {
boxShadow: "none",
},
},
},
},
MuiTableCell: {
styleOverrides: {
root: {
boxSizing: "border-box",
fontSize: "14px",
lineHeight: "22px",
color: "rgba(30, 38, 51, 1)",
padding: "16px",
borderBottom: "1px solid rgba(240, 242, 245, 1)",
},
},
},
MuiTableBody: {
styleOverrides: {
root: {
minHeight: "200px",
position: "relative",
"& .MuiTableRow-root:nth-last-of-type(1) .MuiTableCell-root": {
// 有分页的话 表格最后一行就不要下边框
borderBottom: hasTableFooter
? "none"
: "1px solid rgba(240, 242, 245, 1)",
},
},
},
},
// 复选框样式
MuiSvgIcon: {
styleOverrides: {
root: {
color: "rgba(209, 214, 222, 1)",
fontSize: "18px",
},
},
},
MuiCheckbox: {
styleOverrides: {
root: {
"&.Mui-checked .MuiSvgIcon-root": {
color: "rgba(19, 110, 250, 1)",
},
},
},
},
MuiButtonBase: {
styleOverrides: {
root: {
"&.MuiCheckbox-root": {
padding: 0,
},
},
},
},
MuiCircularProgress: {
styleOverrides: {
root: {
position: "absolute",
top: 0,
bottom: 0,
left: 0,
right: 0,
margin: "auto",
zIndex: 1,
},
},
},
},
});
}, [hasCheckbox, hasTableFooter, loading]);
const onSelectAllClick = useCallback(
(e: any) => {
if (e.target.checked) {
setSelectItems && setSelectItems(rows.map((row) => row[key]));
} else {
setSelectItems && setSelectItems([]);
}
},
[setSelectItems, key, rows]
);
const onSelectRowClick = useCallback(
(e: any, itemValue: string) => {
if (e.target.checked) {
setSelectItems && setSelectItems([...selectItems, itemValue]);
} else {
const selectItemIndex = selectItems.indexOf(itemValue);
const newSelectItems = [
...selectItems.slice(0, selectItemIndex),
...selectItems.slice(selectItemIndex + 1, selectItems.length),
];
setSelectItems && setSelectItems(newSelectItems);
}
},
[selectItems, setSelectItems]
);
const handleSort = useCallback(
(field: string) => {
if (sortState?.field === field) {
if (sortState?.order === "ASC") {
setSortState({
field,
order: "DESC",
});
} else if (sortState?.order === "DESC") {
setSortState({
field,
order: "ASC",
});
} else {
setSortState({
field,
order: "DESC",
});
}
} else {
setSortState({
field,
order: "DESC",
});
}
},
[sortState, setSortState]
);
const randerTableHead = useMemo(() => {
return (
<TableHead>
<TableRow>
{hasCheckbox && (
<TableCell align="left" sx={{ width: "18px", paddingRight: "8px" }}>
<Checkbox
indeterminate={
selectItems.length > 0 && selectItems.length < rows.length
}
checked={rows.length > 0 && selectItems.length === rows.length}
onChange={(e) => onSelectAllClick(e)}
/>
</TableCell>
)}
{headCells.map((headCell, index) => (
<TableCell key={index} align="left" width={headCell.width}>
{headCell.sort && (
<>
<span>{headCell.label}</span>
<img
src={
sortState?.field === headCell.id
? sortState?.order === "ASC"
? ascIcon
: sortState?.order === "DESC"
? descIcon
: sortIcon
: sortIcon
}
alt=""
onClick={() => handleSort(headCell.id)}
style={{
marginLeft: "8px",
cursor: "pointer",
position: "relative",
top: "3px",
}}
/>
</>
)}
{!headCell.sort && headCell.label}
</TableCell>
))}
</TableRow>
</TableHead>
);
}, [
hasCheckbox,
headCells,
selectItems,
onSelectAllClick,
rows.length,
handleSort,
sortState,
]);
const randerTableBody = useMemo(() => {
if (rows.length === 0) {
if (loading) {
return (
<tbody>
<tr>
<td></td>
</tr>
</tbody>
);
}
return (
<tbody>
<tr>
<td>
<img
src={noFile}
alt=""
style={{
position: "absolute",
top: "100px",
left: "50%",
transform: "translate(-50%, 0)",
}}
/>
<span
style={{
position: "absolute",
top: "165px",
left: "50%",
transform: "translate(-50%, 0)",
fontSize: "14px",
lineHeight: "22px",
color: "#8a9099",
}}
>
{nodataText || "暂无数据"}
</span>
</td>
</tr>
</tbody>
);
}
return (
<TableBody>
{rows.map((row) => (
<TableRow key={row[key]}>
{hasCheckbox && (
<TableCell
align="left"
sx={{ width: "18px", paddingRight: "8px" }}
>
<Checkbox
checked={
selectItems.filter((selectItem) => selectItem === row[key])
.length > 0
}
onChange={(e) => onSelectRowClick(e, row[key])}
/>
</TableCell>
)}
{headCells.map((headCell, index) => (
<TableCell key={index} align="left" width={headCell.width}>
{/* {row[headCell.id]} */}
{headCell.showOverflowTooltip && (
<MyTooltip title={row[headCell.id]}>
<div
style={{
// width: headCell.width,
width: Number(headCell.width) - 32 || "",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{row[headCell.id]}
</div>
</MyTooltip>
)}
{!headCell.showOverflowTooltip && <>{row[headCell.id]}</>}
</TableCell>
))}
</TableRow>
))}
</TableBody>
);
}, [
rows,
key,
hasCheckbox,
selectItems,
onSelectRowClick,
headCells,
nodataText,
loading,
]);
const randerTableFooter = useMemo(() => {
if (hasTableFooter) {
return (
<div
style={{
padding: "20px 0",
display: "flex",
justifyContent: "flex-end",
alignItems: "center",
borderTop: "1px solid rgba(240, 242, 245, 1)",
}}
>
<MyPagination
page={page}
pageChange={pageChange}
count={count}
totalElements={totalElements}
type={paginationType}
rowsPerPage={rowsPerPage}
handleChangeRowsPerPage={handleChangeRowsPerPage}
/>
</div>
);
} else {
return null;
}
}, [
hasTableFooter,
page,
count,
pageChange,
paginationType,
rowsPerPage,
handleChangeRowsPerPage,
totalElements,
]);
const randerCircularProgress = useMemo(() => {
if (loading) {
return <CircularProgress></CircularProgress>;
} else {
return null;
}
}, [loading]);
return (
<ThemeProvider theme={theme}>
{!fixedHead && (
<>
<TableContainer component={Paper} sx={{ minHeight: "200px" }}>
{randerCircularProgress}
<Table>
{randerTableHead}
{randerTableBody}
</Table>
</TableContainer>
{randerTableFooter}
</>
)}
{fixedHead && (
<div
style={{
height: "100%",
display: "flex",
flexDirection: "column",
position: "relative",
}}
>
<TableContainer
component={Paper}
sx={{
minHeight: "45px",
overflowY: "scroll",
background: "rgba(247, 248, 250, 1)",
}}
>
<Table sx={{}}>{randerTableHead}</Table>
</TableContainer>
<TableContainer
component={Paper}
sx={{ flex: 1, minHeight: "200px", overflowY: "scroll" }}
>
<Table>{randerTableBody}</Table>
</TableContainer>
{randerTableFooter}
{randerCircularProgress}
</div>
)}
</ThemeProvider>
);
};
export default MyTable;
src/views/MenuLayout/index.tsx
View file @ 453a73cf
...@@ -32,6 +32,9 @@ const MenuLayout = observer(() => { ...@@ -32,6 +32,9 @@ const MenuLayout = observer(() => {
const routerIcon = (id: string, isSelect: boolean) => { const routerIcon = (id: string, isSelect: boolean) => {
try { try {
if (id === "demo") {
return require("../../assets/project/PROJECT_SETTING.svg");
}
const result = require(`../../assets/project/${id}${ const result = require(`../../assets/project/${id}${
isSelect ? "_BLUE" : "" isSelect ? "_BLUE" : ""
}.svg`); }.svg`);
......
src/views/Project/ProjectData/SeeDataset/components/DatasetCardTable/index.module.css 0 → 100644
View file @ 453a73cf
.list {
flex: 1;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
}
.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;
position: relative;
cursor: pointer;
}
.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;
}
.datasetLiTop {
height: 55%;
box-sizing: border-box;
}
.datasetLiBottom {
height: 45%;
box-sizing: border-box;
background-color: RGBA(247, 248, 250, 1);
display: flex;
flex-direction: column;
}
.datasetLiTitle {
height: 38px;
line-height: 38px;
color: rgba(19, 112, 255, 1);
font-size: 14px;
text-align: center;
font-weight: 600;
width: 100%;
overflow: hidden;
}
.datasetLiDataList {
flex: 1;
overflow: overlay;
}
.noDataList {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: rgba(138, 144, 153, 1);
font-size: 14px;
line-height: 22px;
}
.datasetLiDataLi {
height: 20px;
line-height: 20px;
color: rgba(30, 38, 51, 1);
font-size: 12px;
padding: 0 16px;
display: flex;
justify-content: space-between;
}
.datasetLiDataLi:nth-child(2n) {
background-color: rgba(235, 237, 240, 1);
}
.datasetLiDataLiKey {
max-width: 50%;
white-space: nowrap;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.datasetLiDataLiValue {
max-width: 50%;
white-space: nowrap;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.nullBox {
visibility: hidden;
}
src/views/Project/ProjectData/SeeDataset/components/DatasetCardTable/index.tsx 0 → 100644
View file @ 453a73cf
import { useMemo } from "react";
import NglView from "@/components/BusinessComponents/NglView";
import KekuleView from "@/components/BusinessComponents/KekuleView";
import MyTooltip from "@/components/mui/MyTooltip";
import Checkbox from "@mui/material/Checkbox";
import style from "./index.module.css";
import classNames from "classnames";
import MyCircularProgress from "@/components/mui/MyCircularProgress";
import NoData from "@/components/BusinessComponents/NoData";
type IDatasetCardTableProps = {
list: Array<any>;
graphicDimension: string;
showData: Array<string>;
selectItems: Array<string>;
setSelectItems: any;
loading: boolean;
};
const DatasetCardTable = (props: IDatasetCardTableProps) => {
const {
list,
graphicDimension,
showData,
selectItems,
setSelectItems,
loading,
} = props;
// 选择/取消分子
const handleSelectItem = (id: string) => {
let list: string[] = [...selectItems];
if (selectItems.filter((e) => e === id).length > 0) {
list = list.filter((e) => e !== id);
setSelectItems(list);
} else {
list.push(id);
setSelectItems(list);
}
};
// 空盒子用于布局
const nullBox = useMemo(() => {
if (list.length > 4) {
let nullBoxLength = Math.abs(8 - list.length);
return new Array(nullBoxLength).fill("");
} else {
return [];
}
}, [list]);
return (
<>
{list.length !== 0 && (
<>
<div className={style.list}>
<MyCircularProgress loading={loading} />
{list.map((item, index) => {
return (
<div
className={style.datasetLi}
key={item.id}
onClick={() => {
handleSelectItem(item.id);
}}
>
<div className={style.datasetLiTop}>
{graphicDimension === "2D" && (
<KekuleView id={`${index}2d`} smi={item.smiles} />
)}
{graphicDimension === "3D" && (
<NglView id={`${index}3d`} content={item.pdb} />
)}
</div>
<div className={style.datasetLiBottom}>
<div className={style.datasetLiTitle} title={item.smiles}>
{item.smiles}
</div>
{showData.length !== 0 && (
<div className={style.datasetLiDataList}>
{Object.keys(item)
.filter((key) => showData.indexOf(key) !== -1)
.map((key, index) => {
return (
<div
className={style.datasetLiDataLi}
key={index}
>
<span className={style.datasetLiDataLiKey}>
{key}
</span>
<MyTooltip title={item[key]}>
<span className={style.datasetLiDataLiValue}>
{item[key]}
</span>
</MyTooltip>
</div>
);
})}
</div>
)}
{showData.length === 0 && (
<div className={style.noDataList}>请选择显示数据</div>
)}
</div>
{graphicDimension === "2D" && (
<Checkbox
size="small"
sx={{
padding: "0px",
position: "absolute",
top: "16px",
right: "20px",
zIndex: 1,
}}
checked={selectItems.includes(item.id)}
/>
)}
{graphicDimension === "3D" && (
<Checkbox
size="small"
sx={{
padding: "0px",
position: "absolute",
top: "16px",
right: "20px",
zIndex: 1,
background: "RGBA(30, 38, 51, 1)",
border: "1px solid #565C66",
borderRadius: "2px",
}}
checked={selectItems.includes(item.id)}
/>
)}
</div>
);
})}
{nullBox.map((item, index) => {
return (
<div
className={classNames({
[style.datasetLi]: true,
[style.nullBox]: true,
})}
key={index + "null"}
></div>
);
})}
</div>
</>
)}
{list.length === 0 && <NoData text="未搜索到相关数据"></NoData>}
</>
);
};
export default DatasetCardTable;
src/views/Project/ProjectData/SeeDataset/components/DatasetTable/index.tsx 0 → 100644
View file @ 453a73cf
import { useMemo } from "react";
import MyTable from "@/components/mui/MyTableNew";
import { sortState } from "@/components/mui/MyTableNew";
type IDatasetTableProps = {
list: Array<any>;
showData: Array<string>;
selectItems: Array<any>;
setSelectItems: any;
sortState: sortState;
setSortState: any;
loading: boolean;
};
const DatasetTable = (props: IDatasetTableProps) => {
const {
list,
showData,
selectItems,
setSelectItems,
sortState,
setSortState,
loading,
} = props;
const headCells = useMemo(() => {
let width =
showData.length === 0
? window.innerWidth - 112
: `${(window.innerWidth - 112) / showData.length}`;
return showData.map((item, index) => {
return {
id: item,
label: item,
width,
showOverflowTooltip: true,
sort: true,
};
});
}, [showData]);
return (
<MyTable
rows={list}
headCells={headCells}
hasCheckbox={true}
fixedHead={true}
selectItems={selectItems}
setSelectItems={setSelectItems}
sortState={sortState}
setSortState={setSortState}
loading={loading}
></MyTable>
);
};
export default DatasetTable;
src/views/Project/ProjectData/SeeDataset/download.tsx → src/views/Project/ProjectData/SeeDataset/components/Download/index.tsx
View file @ 453a73cf
...@@ -102,7 +102,6 @@ const Download = (props: IDownloadProps) => { ...@@ -102,7 +102,6 @@ const Download = (props: IDownloadProps) => {
value={downloadType} value={downloadType}
options={options} options={options}
onChange={(e) => handleChange(e)} onChange={(e) => handleChange(e)}
// fullWidth={true}
title="下载格式" title="下载格式"
isTitle={true} isTitle={true}
sx={{ sx={{
......
src/views/Project/ProjectData/SeeDataset/index.module.css
View file @ 453a73cf
...@@ -11,14 +11,14 @@ ...@@ -11,14 +11,14 @@
padding-bottom: 64px; padding-bottom: 64px;
} }
.top { .top {
margin-bottom: 20px; margin-bottom: 16px;
} }
.title { .title {
line-height: 22px; line-height: 22px;
color: rgba(30, 38, 51, 1); color: rgba(30, 38, 51, 1);
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
margin-bottom: 20px; margin-bottom: 16px;
} }
.screens { .screens {
display: flex; display: flex;
...@@ -30,134 +30,111 @@ ...@@ -30,134 +30,111 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.screensRight { .separator {
display: flex; width: 1px;
justify-content: flex-end; height: 20px;
align-items: center; background-color: rgba(230, 232, 235, 1);
margin: 0 15px;
} }
.selectShowData { .graphicDimension {
margin-left: 24px; line-height: 22px;
font-size: 14px; padding: 5px 16px;
color: rgba(138, 144, 153, 1);
background-color: #fff;
border-radius: 4px;
cursor: pointer;
}
.graphicDimensionActive {
color: rgba(19, 112, 255, 1); color: rgba(19, 112, 255, 1);
background-color: rgba(240, 242, 245, 1);
} }
.table { .marginRight20 {
flex: 1; margin-right: 20px;
overflow-y: overlay;
display: flex;
flex-direction: column;
} }
.list { .screensRight {
flex: 1;
display: flex; display: flex;
justify-content: space-between; justify-content: flex-end;
flex-wrap: wrap; align-items: center;
position: relative;
} }
.datasetLi { .searchBox {
flex: 1; width: 662px;
min-width: 20%; background-color: #fff;
margin: 0 16px 16px 0; padding: 20px 24px 24px;
border: 1px solid rgba(235, 237, 240, 1);
border-radius: 4px;
min-height: 275px;
box-sizing: border-box; box-sizing: border-box;
position: relative; }
.deleteIcon {
cursor: pointer; cursor: pointer;
} }
.datasetLi:nth-child(4n) { .deleteIconDisabled {
margin-right: 0; cursor: not-allowed;
} }
.datasetLi:nth-last-child(1) { .searchTop {
margin-bottom: 0; margin-bottom: 12px;
} }
.datasetLi:nth-last-child(2) { .searchTopText {
margin-bottom: 0; display: inline-block;
line-height: 22px;
font-size: 14px;
color: rgba(30, 38, 51, 1);
margin-right: 16px;
font-weight: 600;
} }
.datasetLi:nth-last-child(3) { .width250 {
margin-bottom: 0; width: 250px;
} }
.datasetLi:nth-last-child(4) { .width120 {
margin-bottom: 0; width: 120px;
} }
.datasetLiTop { .width180 {
height: 55%; width: 180px;
box-sizing: border-box;
} }
.datasetLiBottom { .searchList {
height: 45%; margin-bottom: 24px;
box-sizing: border-box;
background-color: RGBA(247, 248, 250, 1);
display: flex;
flex-direction: column;
} }
.datasetLiTitle { .searchLi {
height: 38px;
line-height: 38px;
color: rgba(19, 112, 255, 1);
font-size: 14px;
text-align: center;
font-weight: 600;
width: 100%;
overflow: hidden;
}
.datasetLiDataList {
flex: 1;
overflow: overlay;
}
.noDataList {
flex: 1;
display: flex; display: flex;
justify-content: flex-start;
align-items: center; align-items: center;
justify-content: center; margin-bottom: 16px;
color: rgba(138, 144, 153, 1);
font-size: 14px;
line-height: 22px;
} }
.datasetLiDataLi { .searchFooter {
height: 20px;
line-height: 20px;
color: rgba(30, 38, 51, 1);
font-size: 12px;
padding: 0 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
} }
.datasetLiDataLi:nth-child(2n) { .searchFooterLeft {
background-color: rgba(235, 237, 240, 1); color: rgba(19, 112, 255, 1);
} font-size: 14px;
.datasetLiDataLiKey { line-height: 22px;
max-width: 50%; display: flex;
white-space: nowrap; justify-content: flex-start;
display: block; align-items: center;
overflow: hidden; cursor: pointer;
text-overflow: ellipsis;
} }
.datasetLiDataLiValue { .selectShowData {
max-width: 50%; font-size: 14px;
white-space: nowrap; color: rgba(30, 38, 51, 1);
display: block;
overflow: hidden;
text-overflow: ellipsis;
} }
.pagination { .table {
height: 76px; flex: 1;
min-height: 76px; overflow-y: overlay;
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: center;
} }
.foot { .foot {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
background-color: #fff; background-color: #fff;
width: 100%; width: calc(100vw - 64px);
box-sizing: border-box; box-sizing: border-box;
height: 64px; height: 76px;
padding: 0 32px; padding: 0 32px;
margin: 0 32px;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
box-shadow: 0px -3px 10px 0px rgba(0, 24, 57, 0.04);
} }
.nullBox { .borderTop {
visibility: hidden; border-top: 1px solid rgba(240, 242, 245, 1);
} }
src/views/Project/ProjectData/SeeDataset/index.tsx
View file @ 453a73cf
import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer"; import FullScreenDrawer from "@/components/CommonComponents/FullScreenDrawer";
import { useState, useMemo, useCallback, useEffect } from "react"; import { useState, useCallback, useEffect } from "react";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle"; import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import MyMultipleMenu, { IOption } from "@/components/mui/MyMultipleMenu"; import MyMultipleMenu, { IOption } from "@/components/mui/MyMultipleMenu";
import MySelect from "@/components/mui/MySelect";
import MyInput from "@/components/mui/MyInput";
import MyButton from "@/components/mui/MyButton"; import MyButton from "@/components/mui/MyButton";
import SearchIcon from "@mui/icons-material/Search";
import MyPagination from "@/components/mui/MyPagination"; import MyPagination from "@/components/mui/MyPagination";
import NglView from "@/components/BusinessComponents/NglView";
import KekuleView from "@/components/BusinessComponents/KekuleView";
import Checkbox from "@mui/material/Checkbox";
import CloudEController from "@/api/fileserver/CloudEController"; import CloudEController from "@/api/fileserver/CloudEController";
import { getToken } from "@/utils/util"; import { getToken } from "@/utils/util";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useStores } from "@/store"; import { useStores } from "@/store";
import { toJS } from "mobx"; import { toJS } from "mobx";
import classNames from "classnames"; import classNames from "classnames";
import Save from "./save"; import Save from "./components/Save";
import NoData from "@/components/BusinessComponents/NoData"; import Download from "./components/Download";
import Download from "./download"; import DatasetCardTable from "./components/DatasetCardTable";
import MyTooltip from "@/components/mui/MyTooltip"; import DatasetTable from "./components/DatasetTable";
import table from "@/assets/project/table.svg";
import tableActive from "@/assets/project/tableActive.svg";
import card from "@/assets/project/card.svg";
import cardActive from "@/assets/project/cardActive.svg";
import filter from "@/assets/project/filter.svg";
import jobDel from "@/assets/project/jobDel.svg";
import style from "./index.module.css"; import style from "./index.module.css";
import _ from "lodash";
import AddIcon from "@mui/icons-material/Add";
import MySelect from "@/components/mui/MySelect";
import { sortState } from "@/components/mui/MyTableNew";
import { IQuery } from "@/api/fileserver/CloudEController";
import MyInput from "@/components/mui/MyInput";
import MyPopover from "@/components/mui/MyPopover";
type ISeeDatasetProps = { type ISeeDatasetProps = {
handleClose: any; handleClose: any;
...@@ -35,117 +42,104 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -35,117 +42,104 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
const productId = toJS(currentProjectStore.currentProductInfo.id); // 产品id 如：cadd const productId = toJS(currentProjectStore.currentProductInfo.id); // 产品id 如：cadd
const token = getToken(); const token = getToken();
const [loading, setLoading] = useState(false);
const [tableType, setTableType] = useState<"table" | "card">("table"); // 展示普通表格还是卡片式表格
const [graphicDimension, setGraphicDimension] = useState("2D"); // 分子结构图是2D还是3D const [graphicDimension, setGraphicDimension] = useState("2D"); // 分子结构图是2D还是3D
const [showData, setShowData] = useState<Array<string>>([]); //显示的数据类型 const [showData, setShowData] = useState<Array<string>>([]); //显示的数据类型
const [showSearchBox, setShowSearchBox] = useState<boolean>(false); // 高级筛选显示隐藏控制
const [hasSmiles, setHasSmiles] = useState(false); // 是否是分子结构型数据集
const [dataTypes, setdataTypes] = useState<Array<IOption>>([]); // 可选的数据类型 const [dataTypes, setdataTypes] = useState<Array<IOption>>([]); // 可选的数据类型
const [sort, setSort] = useState("null"); // 排序方式 const [sortState, setSortState] = useState<sortState>({
const [keyword, setKeyword] = useState(""); // 关键字 // 排序状态
const [searchDataType, setSearchDataType] = useState<any>(null); // 搜索的数据属性 field: null,
order: null,
});
const [querylist, setQuerylist] = useState<Array<IQuery>>([]); // 高级筛选
const [queryInit, setQueryInit] = useState<IQuery>({
// 高级筛选初始化数据
index: "",
compare: ">",
query: "",
});
const [page, setPage] = useState(0); // 当前页码 // 请求接口的页码是从0开始的 const [page, setPage] = useState(0); // 当前页码 // 请求接口的页码是从0开始的
const size = 8; // 每页数量
const [count, setCount] = useState(0); // 总页数 const [count, setCount] = useState(0); // 总页数
const [list, setList] = useState<Array<any>>([]); // 分子列表 const [list, setList] = useState<Array<any>>([]); // 分子列表
const [selectItems, setSelectItems] = useState<Array<any>>([]); const [selectItems, setSelectItems] = useState<Array<any>>([]); // 选中的数据
const [saveOpen, setSaveOpen] = useState(false); // 另存为弹窗显示控制 const [saveOpen, setSaveOpen] = useState(false); // 另存为弹窗显示控制
const [downloadOpen, setDownloadOpen] = useState(false); // 下载弹窗显示控制 const [downloadOpen, setDownloadOpen] = useState(false); // 下载弹窗显示控制
const [showAnimation, setShowAnimation] = useState(true); // 弹窗动画变化中
const [firstGetList, setFirstGetList] = useState(true); // 第一次请求列表 const [firstGetList, setFirstGetList] = useState(true); // 第一次请求列表
// 解决图像渲染造成弹窗卡顿的问题 // 页码改变
useEffect(() => {
setTimeout(() => {
setShowAnimation(false);
}, 300);
}, []);
const isCadd = useMemo(() => {
if (productId === "cadd") {
return true;
} else {
return false;
}
}, [productId]);
const handleSearchDataTypeChange = (e: any) => {
setSearchDataType(e);
};
const handleSortChange = (e: any) => {
setSort(e);
};
const handleKeywordChange = (e: any) => {
if (e.target.value.length <= 30) {
setKeyword(e.target.value);
}
};
const pageChange = (value: number) => { const pageChange = (value: number) => {
setPage(value - 1); getList(value - 1);
}; };
// 空盒子用于布局
const nullBox = useMemo(() => {
if (list.length > 4) {
let nullBoxLength = 8 - list.length;
return new Array(nullBoxLength).fill("");
} else {
return [];
}
}, [list]);
// 获取分子列表 // 获取分子列表
const getList = useCallback( const getList = useCallback(
(paramsPage = 0) => { (paramsPage = 0) => {
setPage(paramsPage); setPage(paramsPage);
CloudEController.GetDatasetItemsList({ setSelectItems([]);
type: productId as string, let requestQuerylist = querylist.filter((query) => {
projectId: projectId as string, return query.index !== "" && query.query !== "";
token: token, });
filetoken: fileToken as string, setLoading(true);
path: path, CloudEController.GetDatasetItemsListNew(
name: name, {
page: paramsPage, type: productId as string,
size, projectId: projectId as string,
index: searchDataType ? `${searchDataType}` : "", token: token,
sort: sort === "null" ? "" : sort, filetoken: fileToken as string,
query: keyword, path: path,
}) name: name,
page: paramsPage,
size: tableType === "table" ? 15 : 8,
index: sortState.field ? sortState.field : "",
sort: sortState.order ? sortState.order : "",
},
requestQuerylist
)
?.then((res) => { ?.then((res) => {
setLoading(false);
setList(res.data.list); setList(res.data.list);
setCount(res.data.totalPage - 1); setCount(res.data.totalPage - 1);
if (res.data.list && res.data.list.length > 0) { if (res.data.list && res.data.list.length > 0) {
if (res.data.list[0]) { if (res.data.list[0]) {
let arr: any = []; let arr: any = [];
let _hasSmiles = false;
Object.keys(res.data.list[0]).forEach((item) => { Object.keys(res.data.list[0]).forEach((item) => {
if ( if (!["meta", "id"].includes(item)) {
![
"meta",
"id",
// "canonical_smiles",
// "mol",
// "mol2",
// "pdb",
// "sdf",
// "sdf2d",
// "sdf3d",
// "smiles",
].includes(item)
) {
arr.push({ label: item, value: item }); arr.push({ label: item, value: item });
} }
if (item === "smiles") {
_hasSmiles = true;
}
}); });
if (firstGetList) { if (firstGetList) {
setdataTypes(arr); setdataTypes(arr);
setSearchDataType(arr[0].value); setShowData(arr.slice(0, 5).map((item: any) => item.value));
setHasSmiles(_hasSmiles);
setQuerylist([
{
index: arr[0]?.value || "",
compare: ">",
query: "",
},
]);
setQueryInit({
index: arr[0]?.value || "",
compare: ">",
query: "",
});
} }
setFirstGetList(false); setFirstGetList(false);
setShowSearchBox(false);
} }
} }
}) })
?.catch((error) => { ?.catch((error) => {
setLoading(false);
console.log(error); console.log(error);
setList([]); setList([]);
// Message.error(error?.response?.data?.message || "获取数据集信息失败");
// Message.error("未搜索到相关数据");
}); });
}, },
[ [
...@@ -155,28 +149,178 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -155,28 +149,178 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
fileToken, fileToken,
path, path,
name, name,
searchDataType, sortState,
sort,
keyword,
firstGetList, firstGetList,
// Message, querylist,
tableType,
] ]
); );
// 当排序状态、展示方式改变的时候获取第一页数据
useEffect(() => { useEffect(() => {
getList(page); getList(0);
}, [page]); }, [sortState, tableType]);
// 高级筛选值变化
const handleIndexChange = (e: any, subscriptIndex: number) => {
let arr = _.cloneDeep(querylist);
arr[subscriptIndex].index = e;
setQuerylist(arr);
};
// 高级筛选值变化
const handleCompareChange = (e: any, subscriptIndex: number) => {
let arr = _.cloneDeep(querylist);
arr[subscriptIndex].compare = e;
setQuerylist(arr);
};
// 高级筛选值变化
const handleQueryChange = (e: any, subscriptIndex: number) => {
let arr = _.cloneDeep(querylist);
arr[subscriptIndex].query = e.target.value;
setQuerylist(arr);
};
// 选择/取消分子 // 高级筛选值变化
const handleSelectItem = (id: string) => { const handleDeleteQuery = (index: number) => {
let list: string[] = [...selectItems]; if (querylist.length === 1) {
if (selectItems.filter((e) => e === id).length > 0) { return;
list = list.filter((e) => e !== id);
setSelectItems(list);
} else {
list.push(id);
setSelectItems(list);
} }
let arr = _.cloneDeep(querylist);
arr.splice(index, 1);
setQuerylist(arr);
};
// 高级筛选值初始化
const handleInitQuerylist = () => {
setQuerylist([{ ...queryInit }]);
};
// 显示数据变化
const handleSetShowData = (e: any) => {
if (e.length === 0) {
return;
}
setShowData(e);
};
// 高级筛选渲染
const searchBox = () => {
return (
<div className={style.searchBox}>
<div className={style.searchTop}>
<span
className={classNames({
[style.searchTopText]: true,
[style.width250]: true,
})}
>
选择属性
</span>
<span
className={classNames({
[style.searchTopText]: true,
[style.width120]: true,
})}
>
比较符
</span>
<span
className={classNames({
[style.searchTopText]: true,
[style.width180]: true,
})}
>
比较值
</span>
</div>
<div className={style.searchList}>
{querylist.map((item, index) => {
return (
<div className={style.searchLi} key={index}>
<MySelect
options={dataTypes}
placeholder="请选择属性"
value={item.index}
sx={{ marginRight: "16px", width: "250px" }}
onChange={(e) => handleIndexChange(e, index)}
></MySelect>
<MySelect
value={item.compare}
onChange={(e) => handleCompareChange(e, index)}
options={[
{
label: ">",
value: ">",
},
{
label: "<",
value: "<",
},
{
label: ">=",
value: ">=",
},
{
label: "<=",
value: "<=",
},
{
label: "=",
value: "=",
},
{
label: "≈",
value: "≈",
},
]}
sx={{ marginRight: "16px", width: "120px" }}
></MySelect>
<MyInput
value={item.query}
onChange={(e) => handleQueryChange(e, index)}
sx={{ marginRight: "16px", width: "180px" }}
></MyInput>
<img
onClick={() => handleDeleteQuery(index)}
src={jobDel}
alt=""
className={classNames({
[style.deleteIcon]: true,
[style.deleteIconDisabled]: querylist.length === 1,
})}
/>
</div>
);
})}
</div>
<div className={style.searchFooter}>
<div
className={style.searchFooterLeft}
onClick={() => setQuerylist([...querylist, { ...queryInit }])}
>
<AddIcon sx={{ fontSize: "20px", marginRight: "6px" }} />
<span>添加条件</span>
</div>
<div className={style.searchFooterRight}>
<MyButton
variant="outlined"
text="重置"
style={{ marginRight: "12px" }}
onClick={() => handleInitQuerylist()}
color="secondary"
></MyButton>
<MyButton
text="筛选"
onClick={() => {
getList(0);
}}
></MyButton>
</div>
</div>
</div>
);
}; };
return ( return (
...@@ -191,28 +335,66 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -191,28 +335,66 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
<div className={style.title}>{name}</div> <div className={style.title}>{name}</div>
<div className={style.screens}> <div className={style.screens}>
<div className={style.screensLeft}> <div className={style.screensLeft}>
{isCadd && ( {hasSmiles && (
<RadioGroupOfButtonStyle <>
handleRadio={setGraphicDimension} <RadioGroupOfButtonStyle
value={graphicDimension} handleRadio={setTableType}
radioOptions={[ value={tableType}
{ radioBoxStyle={{ minWidth: "40px" }}
value: "2D", radioStyle={{ padding: "0" }}
label: "2D", radioOptions={[
}, {
{ value: "table",
value: "3D", label: (
label: "3D", <img
}, src={tableType === "table" ? tableActive : table}
]} alt=""
RadiosBoxStyle={{ width: "132px" }} ></img>
/> ),
},
{
value: "card",
label: (
<img
src={tableType === "card" ? cardActive : card}
alt=""
></img>
),
},
]}
/>
<div className={style.separator}></div>
</>
)}
{tableType === "card" && hasSmiles && (
<>
<div
className={classNames({
[style.graphicDimension]: true,
[style.graphicDimensionActive]: graphicDimension === "2D",
})}
onClick={() => setGraphicDimension("2D")}
>
2D
</div>
<div
className={classNames({
[style.graphicDimension]: true,
[style.graphicDimensionActive]: graphicDimension === "3D",
[style.marginRight20]: true,
})}
onClick={() => setGraphicDimension("3D")}
>
3D
</div>
</>
)} )}
<MyMultipleMenu <MyMultipleMenu
value={showData} value={showData}
options={dataTypes} options={dataTypes}
setValue={setShowData} setValue={(e: any) => handleSetShowData(e)}
showSelectAll={true} showSelectAll={true}
iconColor="rgba(138, 144, 153, 1)"
> >
<span className={style.selectShowData}> <span className={style.selectShowData}>
选择显示数据({showData.length}) 选择显示数据({showData.length})
...@@ -220,207 +402,83 @@ const SeeDataset = observer((props: ISeeDatasetProps) => { ...@@ -220,207 +402,83 @@ const SeeDataset = observer((props: ISeeDatasetProps) => {
</MyMultipleMenu> </MyMultipleMenu>
</div> </div>
<div className={style.screensRight}> <div className={style.screensRight}>
<MySelect <MyPopover
options={dataTypes} open={showSearchBox}
title={dataTypes.length === 0 ? "暂无属性" : "选择属性"} changeOpen={(e) => setShowSearchBox(e)}
isTitle={true} content={searchBox()}
value={searchDataType} transformOrigin={{
onChange={handleSearchDataTypeChange} vertical: "top",
fullWidth={false} horizontal: "right",
disabled={dataTypes.length === 0}
sx={{
width: "160px",
marginRight: "16px",
height: "32px",
}} }}
></MySelect> anchorOrigin={{
<MySelect vertical: "bottom",
options={[ horizontal: "right",
{
label: "无",
value: "null",
},
{
label: "正序",
value: "ASC",
},
{
label: "倒序",
value: "DESC",
},
]}
title="排序方式"
value={sort}
onChange={handleSortChange}
isTitle={true}
fullWidth={false}
sx={{
width: "160px",
marginRight: "16px",
height: "32px",
}}
></MySelect>
<MyInput
value={keyword}
onChange={handleKeywordChange}
placeholder="请输入关键词搜索"
fullWidth={false}
InputProps={{
endAdornment: <SearchIcon style={{ color: "#8A9099" }} />,
}} }}
sx={{ >
width: "340px", <MyButton
marginRight: "16px", text="高级筛选"
}} variant="outlined"
size="small" color="secondary"
></MyInput> img={
<MyButton <img
text="确认" src={filter}
style={{ width: "68px" }} alt=""
onClick={() => { style={{ marginRight: "10px" }}
getList(); ></img>
}} }
></MyButton> style={{ margin: "4px 0" }}
></MyButton>
</MyPopover>
</div> </div>
</div> </div>
</div> </div>
{!showAnimation && ( <div className={style.table}>
<div className={style.table}> {tableType === "table" && (
{list.length !== 0 && ( <DatasetTable
<> list={list}
<div className={style.list}> showData={showData}
{list.map((item, index) => { selectItems={selectItems}
return ( setSelectItems={setSelectItems}
<div sortState={sortState}
className={style.datasetLi} setSortState={setSortState}
key={item.id} loading={loading}
onClick={() => { ></DatasetTable>
handleSelectItem(item.id); )}
}} {tableType === "card" && (
> <DatasetCardTable
{isCadd && ( list={list}
<div className={style.datasetLiTop}> graphicDimension={graphicDimension}
{graphicDimension === "2D" && ( showData={showData}
<KekuleView id={`${index}2d`} smi={item.smiles} /> selectItems={selectItems}
)} setSelectItems={setSelectItems}
{graphicDimension === "3D" && ( loading={loading}
<NglView id={`${index}3d`} content={item.pdb} /> ></DatasetCardTable>
)} )}
</div> </div>
)}
<div className={style.datasetLiBottom}>
<div
className={style.datasetLiTitle}
title={item.smiles}
>
{item.smiles}
</div>
{showData.length !== 0 && (
<div className={style.datasetLiDataList}>
{Object.keys(item)
.filter((key) => showData.indexOf(key) !== -1)
.map((key, index) => {
return (
<div
className={style.datasetLiDataLi}
key={index}
>
<span
className={style.datasetLiDataLiKey}
>
{key}
</span>
<MyTooltip title={item[key]}>
<span
className={style.datasetLiDataLiValue}
>
{item[key]}
</span>
</MyTooltip>
</div>
);
})}
</div>
)}
{showData.length === 0 && (
<div className={style.noDataList}>
请选择显示数据
</div>
)}
</div>
{graphicDimension === "2D" && (
<Checkbox
size="small"
sx={{
padding: "0px",
position: "absolute",
top: "16px",
right: "20px",
zIndex: 1,
}}
checked={selectItems.includes(item.id)}
/>
)}
{graphicDimension === "3D" && (
<Checkbox
size="small"
sx={{
padding: "0px",
position: "absolute",
top: "16px",
right: "20px",
zIndex: 1,
background: "RGBA(30, 38, 51, 1)",
border: "1px solid #565C66",
borderRadius: "2px",
}}
checked={selectItems.includes(item.id)}
/>
)}
</div>
);
})}
{nullBox.map((item, index) => {
return (
<div
className={classNames({
[style.datasetLi]: true,
[style.nullBox]: true,
})}
key={index + "null"}
></div>
);
})}
</div>
<div className={style.pagination}>
<MyPagination
page={page}
pageChange={pageChange}
count={count}
/>
</div>
</>
)}
{list.length === 0 && <NoData text="未搜索到相关数据"></NoData>}
</div>
)}
</div> </div>
<div className={style.foot}> <div
{isCadd && ( className={classNames({
<MyButton [style.foot]: true,
variant="outlined" [style.borderTop]: tableType === "table",
text={`下载(${selectItems.length})`} })}
style={{ marginRight: "12px" }} >
disabled={selectItems.length === 0} {selectItems.length === 0 && (
onClick={() => setDownloadOpen(true)} <MyPagination page={page} pageChange={pageChange} count={count} />
></MyButton> )}
{selectItems.length !== 0 && (
<>
<MyButton
text={`另存为(${selectItems.length})`}
style={{ marginRight: "12px" }}
onClick={() => setSaveOpen(true)}
></MyButton>
<MyButton
variant="outlined"
text={`下载(${selectItems.length})`}
onClick={() => setDownloadOpen(true)}
></MyButton>
</>
)} )}
<MyButton
disabled={selectItems.length === 0}
text={`另存为(${selectItems.length})`}
onClick={() => setSaveOpen(true)}
></MyButton>
</div> </div>
{saveOpen && ( {saveOpen && (
<Save <Save
......
src/views/demo/MyTableDemo/index.tsx 0 → 100644
View file @ 453a73cf
import { useState } from "react";
import MyButton from "@/components/mui/MyButton";
import { sortState } from "@/components/mui/MyTableNew";
import MyTable from "@/components/mui/MyTableNew";
const MyTableDemo = () => {
const [page, setPage] = useState(0);
const [count, setCount] = useState(5);
const [rowsPerPage, setRowsPerPage] = useState(10);
const pageChange = (value: number) => {
setPage(value - 1);
};
const [sortState, setSortState] = useState<sortState>({
field: "",
order: "",
});
const rows = [
{
a: "啊手动阀建行卡实际付款啦即使对方卢卡库上的飞机啊离开解放了；拉萨的飞机拉萨酱豆腐啊肌肤抵抗力就",
b: "werewrw",
c: "asdfasf",
d: "asdfasdf",
e: "asd4534",
id: "1",
},
{
a: "asdf",
b: "asdg",
c: "asdasdffasf",
d: "sfgh",
e: "asdgshdsdfh534",
id: "2",
},
{
a: "dfgj",
b: "xcvb",
c: "xcvb",
d: "xcvb",
e: "ert",
id: "3",
},
{
a: "xcgh",
b: "sdf",
c: "sdfg",
d: "sdfg",
e: "wertwe",
id: "4",
},
{
a: "as123",
b: "werewrw",
c: "asdfasf",
d: "asdfasdf",
e: "asd4534",
id: "5",
},
{
a: "asdf",
b: "asdg",
c: "asdasdffasf",
d: "sfgh",
e: "asdgshdsdfh534",
id: "6",
},
{
a: "dfgj",
b: "xcvb",
c: "xcvb",
d: "xcvb",
e: "ert",
id: "7",
},
{
a: "xcgh",
b: "sdf",
c: "sdfg",
d: "sdfg",
e: "wertwe",
id: "8",
},
{
a: "as123",
b: "werewrw",
c: "asdfasf",
d: "asdfasdf",
e: "asd4534",
id: "9",
},
{
a: "asdf",
b: "asdg",
c: "asdasdffasf",
d: "sfgh",
e: "asdgshdsdfh534",
id: "10",
},
{
a: "dfgj",
b: "xcvb",
c: "xcvb",
d: "xcvb",
e: "ert",
id: "11",
},
{
a: "xcgh",
b: "sdf",
c: "sdfg",
d: "sdfg",
e: "wertwe",
id: "12",
},
];
const buttonHeadCells = [
{
id: "a",
label: "属性a",
width: "150",
},
{
id: "b",
label: "属性b",
width: "250",
},
{
id: "c",
label: "属性c",
width: "350",
},
{
id: "d",
label: "属性d",
width: "250",
},
{
id: "caozuo",
label: "操作",
width: "250",
},
];
const headCells = [
{
id: "a",
label: "属性a",
width: "200",
showOverflowTooltip: true,
},
{
id: "b",
label: "属性b",
width: "200",
},
{
id: "c",
label: "属性c",
// width: "200",
},
{
id: "d",
label: "属性d",
width: "200",
},
];
const sortHeadCells = [
{
id: "a",
label: "属性a",
width: "25%",
sort: true,
},
{
id: "b",
label: "属性b",
width: "25%",
sort: true,
},
{
id: "c",
label: "属性c",
width: "25%",
},
{
id: "d",
label: "属性d",
width: "25%",
},
];
const [selectItems, setSelectItems] = useState(["1"]);
const handleDelete = (e: string) => {
console.log(e);
};
console.log(selectItems);
return (
<div>
<h2>常规表格</h2>
<div>
<MyTable
rows={rows.map((row) => {
return {
...row,
caozuo: (
<MyButton
text="删除"
onClick={() => {
handleDelete(row.id);
}}
></MyButton>
),
};
})}
// rows={[]}
headCells={buttonHeadCells}
selectItems={selectItems}
setSelectItems={setSelectItems}
/>
</div>
<h2>有复选框表格</h2>
<div>
<MyTable
rows={rows}
headCells={headCells}
hasCheckbox={true}
selectItems={selectItems}
setSelectItems={setSelectItems}
/>
</div>
<h2>固定表头(需要指定每列宽度 不然对不齐)表格，内容滚动, </h2>
<div style={{ height: "300" }}>
<MyTable
rows={rows}
headCells={headCells}
hasCheckbox={true}
selectItems={selectItems}
setSelectItems={setSelectItems}
fixedHead={true}
/>
</div>
<h2>带分页的表格</h2>
<div>
<MyTable
rows={rows}
headCells={headCells}
hasCheckbox={true}
selectItems={selectItems}
setSelectItems={setSelectItems}
hasTableFooter={true}
page={page}
count={count}
pageChange={pageChange}
paginationType={"complex"}
rowsPerPage={rowsPerPage}
handleChangeRowsPerPage={setRowsPerPage}
totalElements={12}
/>
</div>
<h2>带分页且固定表头(需要指定每列宽度 不然对不齐)的表格</h2>
<div style={{ height: "300" }}>
<MyTable
rows={rows}
headCells={headCells}
hasCheckbox={true}
selectItems={selectItems}
setSelectItems={setSelectItems}
fixedHead={true}
hasTableFooter={true}
page={page}
count={count}
pageChange={pageChange}
/>
</div>
<h2>
带排序表格(headCells中sort为true， 传入sortState、setSortState字段)
</h2>
<div>
<MyTable
rows={rows}
headCells={sortHeadCells}
selectItems={selectItems}
setSelectItems={setSelectItems}
sortState={sortState}
setSortState={setSortState}
/>
</div>
</div>
);
};
export default MyTableDemo;
src/views/demo/index.module.css 0 → 100644
View file @ 453a73cf
.demoBox {
padding: 16px 16px 0;
box-sizing: border-box;
height: 100%;
overflow: auto;
display: flex;
flex-direction: column;
}
.demoContentBox {
padding-top: 16px;
flex: 1;
}
src/views/demo/index.tsx
View file @ 453a73cf
import { useMessage } from "@/components/MySnackbar"; import MyTableDemo from "./MyTableDemo";
// import usePass from "@/hooks/usePass"; import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import { operation, route } from "@/router"; import { useCallback, useMemo, useState } from "react";
import { Button } from "@mui/material"; import styles from "./index.module.css";
import { Box } from "@mui/system";
import { useEffect } from "react";
const Demo = ({ const Demo = () => {
childrenRoutes, const demoList = useCallback(() => {
}: { return [
childrenRoutes?: Array<route | operation>; {
}) => { name: "表格",
const message = useMessage(); element: MyTableDemo,
// const isPass = usePass(); },
{
useEffect(() => { name: "box",
// console.log(isPass("PROJECT_OVERIVEW_CREATE"), "11111111111"); element: () => {
// console.log(isPass("PROJECT_SUMMARY_MEMBER"), "2222222"); return <div>box</div>;
// console.log(isPass("test"), "33333"); },
// eslint-disable-next-line react-hooks/exhaustive-deps },
];
}, []); }, []);
const radioOptionsArr = [
{
value: "表格",
label: "表格",
},
{
value: "box",
label: "box",
},
];
const handleRadio = (e: string) => {
setSelectDemo(e);
};
const [selectDemo, setSelectDemo] = useState("表格");
const randerDemo = useMemo(() => {
return demoList().filter((item) => item.name === selectDemo)[0].element;
}, [selectDemo, demoList]);
return ( return (
<Box> <div className={styles.demoBox}>
<Box>{JSON.stringify(childrenRoutes)}</Box> <RadioGroupOfButtonStyle
<Box>{JSON.stringify(process.env.NODE_ENV)}</Box> value={selectDemo}
<Button onClick={() => message.success("测试测试")}>message测试</Button> radioOptions={radioOptionsArr}
</Box> handleRadio={handleRadio}
/>
<div className={styles.demoContentBox}>{randerDemo()}</div>
</div>
); );
}; };
......
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