Skip to content

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

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

cn-Feat 20220908 dataset

See merge request !102
parents 8ebf7808 6d9f6e40
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1150 additions and 284 deletions
src/api/fileserver/CloudEController.ts
View file @ c53470a3
......@@ -30,6 +30,27 @@ type IGetDatasetItemsListParams = {
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?: string; // 产品id
projectId: string;
......@@ -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) {
if (ApiUtils.getAuthorizationHeaders(headers)) {
......
src/assets/project/ascIcon.svg 0 → 100644
View file @ c53470a3
<?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 @ c53470a3
<?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 @ c53470a3
<?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 @ c53470a3
<?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 @ c53470a3
<?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 @ c53470a3
<?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 @ c53470a3
<?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 @ c53470a3
<?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 @ c53470a3
......@@ -3,7 +3,7 @@
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #e6e8eb;
/* border: 1px solid #e6e8eb; */
border-radius: 4px;
background-color: #f0f2f5;
cursor: pointer;
......@@ -11,21 +11,28 @@
box-sizing: border-box;
padding: 2px;
}
.radio {
.radioBox {
position: relative;
min-width: 63px;
height: 28px;
box-sizing: border-box;
font-size: 14px;
color: #565c66;
border-radius: 2px;
line-height: 20px;
padding: 6px 16px;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.radio {
position: relative;
box-sizing: border-box;
font-size: 14px;
color: #565c66;
padding: 6px 16px;
white-space: nowrap;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.radioActive {
......@@ -33,6 +40,8 @@
position: relative;
}
.border {
position: absolute;
right: 0px;
width: 1px;
height: 16px;
background-color: rgba(209, 214, 222, 1);
......@@ -41,10 +50,10 @@
visibility: hidden;
}
.radioActiveBgBox {
width: calc(100% - 2px);
width: calc(100% - 4px);
position: absolute;
left: 1px;
top: 1px;
left: 2px;
top: 2px;
height: 28px;
}
.radioActiveBg {
......
src/components/CommonComponents/RadioGroupOfButtonStyle/index.tsx
View file @ c53470a3
......@@ -8,12 +8,12 @@
*/
// 按钮样式的单选组
import classnames from "classnames";
import { useMemo } from "react";
import { ReactElement, useMemo } from "react";
import style from "./index.module.css";
type radioOption = {
value: string;
label: string;
label: string | ReactElement;
};
type IRadioGroupOfButtonStyleProps = {
......@@ -21,6 +21,7 @@ type IRadioGroupOfButtonStyleProps = {
value: string;
handleRadio: any;
RadiosBoxStyle?: object;
radioBoxStyle?: object;
radioStyle?: object;
radioActiveBgBoxStyle?: object;
};
......@@ -31,6 +32,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
value,
handleRadio,
RadiosBoxStyle,
radioBoxStyle,
radioStyle,
radioActiveBgBoxStyle,
} = props;
......@@ -58,6 +60,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
<div className={style.radioActiveBgBox} style={radioActiveBgBoxStyle}>
<div
className={style.radioActiveBg}
// 动画样式绑定
style={{
width: `${radioWidth}%`,
transform: `translateX(${activeIndex * 100}%)`,
......@@ -67,14 +70,17 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
{radioOptions.map((options, index) => {
return (
<>
<div
key={options.value}
className={style.radioBox}
onClick={() => handleRadio(options.value)}
style={radioBoxStyle}
>
<div
className={classnames({
[style.radio]: true,
[style.radioActive]: value === options.value,
})}
onClick={() => handleRadio(options.value)}
style={radioStyle}
>
{options.label}
......@@ -82,6 +88,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
<div
className={classnames({
[style.border]: true,
// 当相邻的两个tab都是未激活时中间有一条分隔线判断逻辑
[style.borderHidden]: !(
index !== radioOptions.length - 1 &&
index !== activeIndex &&
......@@ -89,7 +96,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
),
})}
></div>
</>
</div>
);
})}
</div>
......
src/components/MyRouter/useMyRouter.ts
View file @ c53470a3
......@@ -27,6 +27,22 @@ const useMyRouter = () => {
);
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 route of item.routes) {
route.element = elements[route.element] || NotFound;
......
src/components/mui/MyCheckBox.tsx
View file @ c53470a3
......@@ -57,6 +57,7 @@ const theme = createTheme({
MuiSvgIcon: {
styleOverrides: {
root: {
color: "rgba(209, 214, 222, 1)",
fontSize: "19px",
},
},
......
src/components/mui/MyMultipleMenu.tsx
View file @ c53470a3
......@@ -82,6 +82,7 @@ type IMyMultipleMenuProps = {
showSelectAll?: boolean; // 是否显示全选
selectAllText?: string; // 全选的文字
showHiddenIcon?: boolean; // 是否显示 展开收起箭头
iconColor?: string; // 展开收起箭头的颜色
};
const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
......@@ -93,6 +94,7 @@ const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
showSelectAll = false,
selectAllText = "全部",
showHiddenIcon = true,
iconColor,
} = props;
// 下拉框展示的相对位置参考元素
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
......@@ -138,9 +140,15 @@ const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
const randerShowHiddenIcon = () => {
if (Boolean(anchorEl)) {
return <ArrowDropUpIcon sx={{ color: "rgba(19, 112, 255, 1)" }} />;
return (
<ArrowDropUpIcon sx={{ color: iconColor || "rgba(19, 112, 255, 1)" }} />
);
} 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 @ c53470a3
// 分页组件
import Pagination from "@mui/material/Pagination";
import MySelect from "./MySelect";
import { ThemeProvider, createTheme } from "@mui/material/styles";
const theme = createTheme({
components: {
MuiPagination: {
styleOverrides: {
ul: {
flexWrap: "nowrap",
},
},
},
MuiPaginationItem: {
styleOverrides: {
root: {
......@@ -24,16 +33,69 @@ type IMyPaginationProps = {
page: number;
pageChange: any;
count: number;
totalElements?: number;
type?: "simple" | "complex";
rowsPerPage?: number; // 每页多少条数据
handleChangeRowsPerPage?: any;
};
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) => {
pageChange && pageChange(value);
};
const rowsPerPageChange = (e: any) => {
handleChangeRowsPerPage(Number(e));
};
return (
<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
page={page + 1} // 请求接口的页码是从0开始的
count={count + 1}
......
src/components/mui/MyPopover.tsx
View file @ c53470a3
......@@ -8,7 +8,7 @@
*/
import { useRef, useEffect, useState } from "react";
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"> {
/** 触发行为 */
......@@ -22,7 +22,18 @@ interface IProps extends Omit<PopoverProps, "open"> {
/** open 修改 */
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 [anchorEl, setAnchorEl] = useState<any | null>(null);
const ref = useRef(null);
......@@ -61,8 +72,9 @@ const MyPopover = (props: IProps) => {
const id = open ? "simple-popover" : undefined;
return (
<ThemeProvider theme={theme}>
<div>
<Typography
<div
ref={ref}
aria-owns={id}
onClick={trigger === "click" ? handelClick : undefined}
......@@ -70,7 +82,7 @@ const MyPopover = (props: IProps) => {
onMouseLeave={trigger === "hover" ? handlePopoverClose : undefined}
>
{children}
</Typography>
</div>
<Popover
id={id}
open={open}
......@@ -92,9 +104,10 @@ const MyPopover = (props: IProps) => {
}
}
>
<Typography sx={{ p: 1 }}>{content}</Typography>
{content}
</Popover>
</div>
</ThemeProvider>
);
};
......
src/components/mui/MyTableNew.tsx 0 → 100644
View file @ c53470a3
This diff is collapsed.
src/views/MenuLayout/index.tsx
View file @ c53470a3
......@@ -32,6 +32,9 @@ const MenuLayout = observer(() => {
const routerIcon = (id: string, isSelect: boolean) => {
try {
if (id === "demo") {
return require("../../assets/project/PROJECT_SETTING.svg");
}
const result = require(`../../assets/project/${id}${
isSelect ? "_BLUE" : ""
}.svg`);
......
src/views/Project/ProjectData/DeleteDialog/index.tsx
View file @ c53470a3
......@@ -49,8 +49,8 @@ const DeleteDialog = (props: IDeleteFileProps) => {
if (currentOperateFile) {
return [currentOperateFile];
} else {
return showList.filter((item: any) => {
return selectIds.indexOf(item.name) !== -1;
return selectIds.map((item) => {
return showList[item];
});
}
}, [currentOperateFile, selectIds, showList]);
......
src/views/Project/ProjectData/MoveFile/index.tsx
View file @ c53470a3
......@@ -102,9 +102,11 @@ const MoveFile = (props: IMoveFileProps) => {
moveFolderArr = [];
}
} else {
moveFolderArr = showList.filter((item: any) => {
return selectIds.indexOf(item.name) !== -1 && item.type === "directory";
});
moveFolderArr = selectIds
.map((item) => {
return showList[item];
})
.filter((item) => item.type === "directory");
}
pathArr = moveFolderArr.map((item: any) => {
return path === "/" ? `/${item.name}` : `${path}/${item.name}`;
......@@ -147,8 +149,8 @@ const MoveFile = (props: IMoveFileProps) => {
if (currentOperateFile) {
return [currentOperateFile];
} else {
return showList.filter((item: any) => {
return selectIds.indexOf(item.name) !== -1;
return selectIds.map((item) => {
return showList[item];
});
}
}, [currentOperateFile, selectIds, showList]);
......
src/views/Project/ProjectData/SeeDataset/components/DatasetCardTable/index.module.css 0 → 100644
View file @ c53470a3
.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 @ c53470a3
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 @ c53470a3
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 @ c53470a3
......@@ -102,7 +102,6 @@ const Download = (props: IDownloadProps) => {
value={downloadType}
options={options}
onChange={(e) => handleChange(e)}
// fullWidth={true}
title="下载格式"
isTitle={true}
sx={{
......
src/views/Project/ProjectData/SeeDataset/index.module.css
View file @ c53470a3
......@@ -11,14 +11,14 @@
padding-bottom: 64px;
}
.top {
margin-bottom: 20px;
margin-bottom: 16px;
}
.title {
line-height: 22px;
color: rgba(30, 38, 51, 1);
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
margin-bottom: 16px;
}
.screens {
display: flex;
......@@ -30,134 +30,112 @@
justify-content: flex-start;
align-items: center;
}
.screensRight {
display: flex;
justify-content: flex-end;
align-items: center;
.separator {
width: 1px;
height: 20px;
background-color: rgba(230, 232, 235, 1);
margin: 0 15px;
}
.selectShowData {
margin-left: 24px;
font-size: 14px;
.graphicDimension {
line-height: 22px;
padding: 5px 16px;
color: rgba(138, 144, 153, 1);
background-color: #fff;
border-radius: 4px;
cursor: pointer;
}
.graphicDimensionActive {
color: rgba(19, 112, 255, 1);
background-color: rgba(240, 242, 245, 1);
}
.table {
flex: 1;
overflow-y: overlay;
display: flex;
flex-direction: column;
.marginRight20 {
margin-right: 20px;
}
.list {
flex: 1;
.screensRight {
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;
justify-content: flex-end;
align-items: center;
position: relative;
cursor: pointer;
}
.datasetLi:nth-child(4n) {
margin-right: 0;
.searchBox {
width: 662px;
background-color: #fff;
padding: 20px 24px 24px;
box-sizing: border-box;
}
.datasetLi:nth-last-child(1) {
margin-bottom: 0;
.deleteIcon {
cursor: pointer;
}
.datasetLi:nth-last-child(2) {
margin-bottom: 0;
.deleteIconDisabled {
cursor: not-allowed;
}
.datasetLi:nth-last-child(3) {
margin-bottom: 0;
.searchTop {
margin-bottom: 12px;
}
.datasetLi:nth-last-child(4) {
margin-bottom: 0;
.searchTopText {
display: inline-block;
line-height: 22px;
font-size: 14px;
color: rgba(30, 38, 51, 1);
margin-right: 16px;
font-weight: 600;
}
.datasetLiTop {
height: 55%;
box-sizing: border-box;
.width250 {
width: 250px;
}
.datasetLiBottom {
height: 45%;
box-sizing: border-box;
background-color: RGBA(247, 248, 250, 1);
display: flex;
flex-direction: column;
.width120 {
width: 120px;
}
.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;
.width180 {
width: 180px;
}
.datasetLiDataList {
flex: 1;
overflow: overlay;
.searchList {
margin-bottom: 24px;
}
.noDataList {
flex: 1;
.searchLi {
display: flex;
justify-content: flex-start;
align-items: center;
justify-content: center;
color: rgba(138, 144, 153, 1);
font-size: 14px;
line-height: 22px;
margin-bottom: 16px;
}
.datasetLiDataLi {
height: 20px;
line-height: 20px;
color: rgba(30, 38, 51, 1);
font-size: 12px;
padding: 0 16px;
.searchFooter {
display: flex;
justify-content: space-between;
align-items: center;
}
.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;
.searchFooterLeft {
color: rgba(19, 112, 255, 1);
font-size: 14px;
line-height: 22px;
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
}
.datasetLiDataLiValue {
max-width: 50%;
white-space: nowrap;
display: block;
overflow: hidden;
text-overflow: ellipsis;
.selectShowData {
font-size: 14px;
color: rgba(30, 38, 51, 1);
cursor: pointer;
}
.pagination {
height: 76px;
min-height: 76px;
.table {
flex: 1;
overflow-y: overlay;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.foot {
position: absolute;
bottom: 0;
background-color: #fff;
width: 100%;
width: calc(100vw - 64px);
box-sizing: border-box;
height: 64px;
height: 76px;
padding: 0 32px;
margin: 0 32px;
display: flex;
justify-content: flex-end;
align-items: center;
box-shadow: 0px -3px 10px 0px rgba(0, 24, 57, 0.04);
}
.nullBox {
visibility: hidden;
.borderTop {
border-top: 1px solid rgba(240, 242, 245, 1);
}
src/views/Project/ProjectData/UpLoaderFile/index.module.css
View file @ c53470a3
......@@ -14,6 +14,9 @@
margin-bottom: 14px;
font-weight: 600;
}
.tableBox {
height: 350px;
}
.dropBox {
cursor: pointer;
height: 300px;
......
src/views/Project/ProjectData/UpLoaderFile/index.tsx
View file @ c53470a3
......@@ -8,7 +8,7 @@ import style from "./index.module.css";
import MyDialog from "@/components/mui/MyDialog";
import { uuid } from "@/utils/util";
import { useMessage } from "@/components/MySnackbar";
import MyTable from "@/components/mui/MyTable";
import MyTable from "@/components/mui/MyTableNew";
import fileIcon from "@/assets/project/fileIcon.svg";
import noFile from "@/assets/project/noFile.svg";
import uploaderIcon from "@/assets/project/uploaderIcon.svg";
......@@ -149,9 +149,9 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
}, [uploaderDialogOpen]);
const fileListHeadCells = [
{ id: "name", numeric: false, label: "名称", width: "60%" },
{ id: "size", numeric: false, label: "大小", width: "25%" },
{ id: "caozuo", numeric: false, label: "操作", width: "15%" },
{ id: "name", label: "名称", width: 300 },
{ id: "size", label: "大小", width: 120 },
{ id: "caozuo", label: "操作", width: 100 },
];
const renderName = (item: any) => {
......@@ -163,7 +163,7 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
);
};
const renderSize = (item: any) => {
return <span>{item.size ? storageUnitFromB(Number(item.size)) : "-"}</span>;
return `${item.size ? storageUnitFromB(Number(item.size)) : "-"}`;
};
const handleRowDelete = (index: number) => {
......@@ -224,25 +224,14 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
</div>
<div className={style.tableBox}>
<MyTable
rowHover={true}
stickyHeader={true}
fixedHead={true}
rows={fileList.map((item: any, index: number) => ({
...item,
name: renderName(item),
size: renderSize(item),
caozuo: renderButtons(item, index),
}))}
rowsPerPage={"99"}
headCells={fileListHeadCells}
footer={false}
// headTableCellStyle={{
// fontSize: "12px",
// lineHeight: "20px",
// color: "#8A9099",
// }}
tableContainerStyle={{
maxHeight: "300px",
}}
/>
</div>
{fileList.length === 0 && (
......
src/views/Project/ProjectData/index.module.css
View file @ c53470a3
......@@ -116,3 +116,6 @@
line-height: 22px;
color: #8a9099;
}
.tableBox {
height: calc(100vh - 300px);
}
src/views/Project/ProjectData/index.tsx
View file @ c53470a3
......@@ -2,12 +2,11 @@ import React, { useState, useCallback, useEffect, useMemo } from "react";
import style from "./index.module.css";
import classnames from "classnames";
import { IconButton } from "@mui/material";
import MyTable from "@/components/mui/MyTable";
import MyTable from "@/components/mui/MyTableNew";
import dataSetIcon from "@/assets/project/dataSetIcon.svg";
import refresh from "@/assets/project/refresh.svg";
import fileIcon from "@/assets/project/fileIcon.svg";
import folderIcon from "@/assets/project/folderIcon.svg";
import noFile from "@/assets/project/noFile.svg";
import AddFolder from "./AddFolder";
import MoveFile from "./MoveFile";
import DeleteDialog from "./DeleteDialog";
......@@ -73,6 +72,11 @@ const ProjectData = observer(() => {
setPath(locationInfo?.pathName || "/");
}, [location]);
// 切换文件数据集时情况勾选项
useEffect(() => {
setSelectIds([]);
}, [activeTab]);
// 列表展示的数据
const showList = useMemo(() => {
if (activeTab === "file") {
......@@ -86,12 +90,24 @@ const ProjectData = observer(() => {
fileList.push(item);
}
});
return [...folderList, ...fileList];
let arr = [...folderList, ...fileList];
return arr.map((item, index) => {
return {
...item,
id: index,
};
});
} else {
const folderList = list.filter((item: any) => {
return item.type === "directory";
});
return [...folderList, ...dataSetList];
let arr = [...folderList, ...dataSetList];
return arr.map((item, index) => {
return {
...item,
id: index,
};
});
}
}, [list, dataSetList, activeTab]);
......@@ -256,45 +272,16 @@ const ProjectData = observer(() => {
};
// table配置
const versionsHeadCells = useMemo(() => {
if (showCheckBox) {
return [
{ id: "checkbox" },
{ id: "name", numeric: false, label: "名称", width: "25%" },
{ id: "size", numeric: false, label: "大小", width: "25%", sort: true },
const versionsHeadCells = [
{ id: "name", label: "名称" },
{ id: "size", label: "大小", width: 200 },
{
id: "mtime",
numeric: false,
label: "创建时间",
width: "25%",
sort: true,
width: 200,
},
{ id: "caozuo", numeric: false, label: "操作", width: "25%" },
{ id: "caozuo", label: "操作", width: 200 },
];
} else {
return [
{ id: "name", numeric: false, label: "名称", width: "25%" },
{ id: "size", numeric: false, label: "大小", width: "25%", sort: true },
{
id: "mtime",
numeric: false,
label: "创建时间",
width: "25%",
sort: true,
},
{ id: "caozuo", numeric: false, label: "操作", width: "25%" },
];
}
}, [showCheckBox]);
// 点击复选框
const hanldeCheckbox = (e: any) => {
const selectarr = e.map((item: any) => {
let andIndex = item.indexOf("&index=");
return item.slice(5, andIndex);
});
setSelectIds(selectarr);
};
// 文件夹下钻
const handleViewFolders = (item: any) => {
......@@ -312,7 +299,6 @@ const ProjectData = observer(() => {
// 查看数据集
const handleSeeDataset = (item: any) => {
console.log(item);
setSeeDatasetName(item.name);
setShowSeeDataset(true);
};
......@@ -593,32 +579,22 @@ const ProjectData = observer(() => {
</div>
</div>
</div>
<div className={style.tableBox}>
<MyTable
footer={false}
rowHover={true}
onRef={tableRef}
stickyHeader={true}
initSelected={selectIds}
fixedHead={true}
hasCheckbox={showCheckBox}
headCells={versionsHeadCells}
rowsPerPage={"99"}
checkboxData={(e: any) => {
hanldeCheckbox(e);
}}
selectItems={selectIds}
setSelectItems={setSelectIds}
rows={showList.map((item: any, index: number) => ({
...item,
id: `name=${item.name}&index=${index}`,
name: renderName(item),
size: renderSize(item),
mtime: renderMtime(item),
caozuo: renderButtons(item),
}))}
/>
{showList.length === 0 && (
<div className={style.noDataBox}>
<img className={style.noDataImg} src={noFile} alt="" />
<span className={style.noDataText}>暂无数据</span>
</div>
)}
</div>
{selectIds.length > 0 && (
<div className={style.projectDataStickyBox}>
......@@ -635,7 +611,6 @@ const ProjectData = observer(() => {
/>
<MyButton
text={`批量移动 (${selectIds.length})`}
// color="neutral"
variant="contained"
style={{ marginRight: "24px" }}
onClick={() => {
......
src/views/Project/ProjectSetting/ProjectMembers/components/AddMember.tsx
View file @ c53470a3
......@@ -9,15 +9,17 @@
import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
import _ from "lodash";
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import { Box, OutlinedInput } from "@mui/material";
import { memo, useCallback, useEffect, useState } from "react";
import { Box } from "@mui/material";
import Dialog from "@/components/mui/MyDialog";
import useMyRequest from "@/hooks/useMyRequest";
import { useStores } from "@/store";
import { useMessage } from "@/components/MySnackbar";
import MyBorderlessSelect, { IOption } from "@/components/mui/MyBorderlessSelect";
import MyTable from "@/components/mui/MyTable";
import MyBorderlessSelect, {
IOption,
} from "@/components/mui/MyBorderlessSelect";
import MyTable from "@/components/mui/MyTableNew";
import SearchInput from "@/components/BusinessComponents/SearchInput";
import {
addProjectUser,
......@@ -35,7 +37,6 @@ const AddMember = observer((props: IProps) => {
const { addMemberDialog, setAddMemberDialog, getTableList } = props;
const { currentProjectStore } = useStores();
const [tableData, setTableData] = useState([]);
const [projectMember, setProjectMember] = useState("");
const [filterTableData, setFilterTableData] = useState([]);
......@@ -54,17 +55,18 @@ const AddMember = observer((props: IProps) => {
[tableData]
);
const columns = useMemo(() => {
return [
{ id: "checkbox", width: 50 },
{ id: "username", label: "项目成员", width: 160 },
const columns = [
{ id: "username", label: "项目成员", width: 200 },
{
id: "projectRole",
label: "项目权限",
width: 160,
render: (item: string, row: any, index: number) => {
width: 100,
},
];
const randerRole = (item: any, index: number) => {
const defaultValue = selectOptions.filter(
(every) => every.value === item
(every) => every.value === item.projectRole
);
return (
<MyBorderlessSelect
......@@ -72,12 +74,10 @@ const AddMember = observer((props: IProps) => {
onChange={(val) => changePermission(val, index)}
options={selectOptions}
size="small"
sx={{ position: "relative", left: "-13px" }}
/>
);
},
},
];
}, [changePermission, selectOptions]);
};
/** 过滤表格数据 */
useEffect(() => {
......@@ -93,11 +93,14 @@ const AddMember = observer((props: IProps) => {
}, [projectMember, tableData]);
// 获取表格数据接口
const { run: getProjectUsersList } = useMyRequest(fetchProjectUsersList, {
const { run: getProjectUsersList, loading } = useMyRequest(
fetchProjectUsersList,
{
onSuccess: (res: any) => {
setTableData(res?.data);
},
});
}
);
// 获取项目权限
const { run: getProjectPower } = useMyRequest(fetchProjectPower, {
......@@ -173,23 +176,22 @@ const AddMember = observer((props: IProps) => {
placeholder="搜索项目成员"
sx={{ mb: 2 }}
/>
<div style={{ overflow: "overlay", maxHeight: 400 }}>
<div style={{ height: "320px" }}>
<MyTable
noDataText={
projectMember ? `暂无 "${projectMember}" 搜索结果` : undefined
}
tableContainerStyle={{ height: 346 }}
checkboxData={(val: string[]) => setCheckData(val)}
param="username"
disabledParam={"enabled"}
rowHover={true}
stickyHeader={true}
rows={filterTableData}
rowsPerPage="99"
tableKey="username"
hasCheckbox={true}
selectItems={checkData}
setSelectItems={setCheckData}
fixedHead={true}
rows={filterTableData.map((item: any, idnex) => ({
...item,
projectRole: randerRole(item, idnex),
}))}
headCells={columns}
footer={false}
tableStyle={{ minWidth: "auto" }}
borderBottom="none"
loading={loading}
/>
</div>
</Box>
......
src/views/Project/ProjectSetting/ProjectMembers/index.module.css
View file @ c53470a3
......@@ -10,3 +10,6 @@
margin-left: 32px;
cursor: pointer;
}
.tableBox {
height: calc(100vh - 300px);
}
src/views/Project/ProjectSetting/ProjectMembers/index.tsx
View file @ c53470a3
......@@ -7,15 +7,12 @@
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import _ from "lodash";
import OutlinedInput from "@mui/material/OutlinedInput";
import { Box } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import Add from "@mui/icons-material/Add";
import { toJS } from "mobx";
import { observer } from "mobx-react";
import MyTable from "@/components/mui/MyTable";
import MyTable from "@/components/mui/MyTableNew";
import { IResponse, useHttp } from "@/api/http";
import RemoveItem from "./components/RemoveItem";
import ChangePermission from "./components/ChangePermission";
......@@ -52,26 +49,15 @@ const ProjectMembers = observer(() => {
const [projectName, setProjectMember] = useState("");
/** 过滤后数据 */
const [filterTableData, setFilterTableData] = useState([]);
const [loading, setLoading] = useState(false);
const columns = useMemo(() => {
const val: any = [
{ id: "username", label: "成员名称" },
{ id: "projectRoleDesc", label: "项目权限" },
{ id: "phone", label: "联系方式" },
...(projectRole !== "OWNER"
? []
: [
{
id: "operation",
label: "操作",
width: 160,
render: (item: any, row: any) => {
return row?.projectRole === "OWNER" ? null : (
const randerOperation = (item: any) => {
return item?.projectRole === "OWNER" ? null : (
<>
<span
style={{ color: "#1370FF", cursor: "pointer" }}
onClick={() => {
onPermissionBtn(row);
onPermissionBtn(item);
}}
>
更改权限
......@@ -79,17 +65,28 @@ const ProjectMembers = observer(() => {
<span
className={styles.removeItemBox}
onClick={() => {
onRemoveItemBtn(row.username);
onRemoveItemBtn(item.username);
}}
>
移出项目
</span>
</>
);
},
},
]),
};
const columns = useMemo(() => {
let val: any = [
{ id: "username", label: "成员名称", width: 200 },
{ id: "projectRoleDesc", label: "项目权限", width: 200 },
{ id: "phone", label: "联系方式" },
];
if (projectRole === "OWNER") {
val.push({
id: "operation",
label: "操作",
width: 180,
});
}
return val;
}, [projectRole]);
......@@ -97,14 +94,19 @@ const ProjectMembers = observer(() => {
const getTableList = useCallback(() => {
const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
if (!projectInfo?.id) return;
setLoading(true);
http
.get<IResponse<any>>("/cpp/project/get", {
params: { id: projectInfo?.id || "" },
})
.then((res) => {
setLoading(false);
const { data = {} } = res;
setTableData(data?.members || []);
setProjectRole(data?.projectRole || "");
})
.catch(() => {
setLoading(false);
});
}, [currentProjectStore?.currentProjectInfo, http]);
......@@ -147,7 +149,7 @@ const ProjectMembers = observer(() => {
if (e.keyCode === 13) {
setProjectMember(e.target.value);
}
}
};
return (
<>
......@@ -159,7 +161,7 @@ const ProjectMembers = observer(() => {
/>
{currentProjectStore?.currentProjectInfo?.projectRole === "OWNER" ? (
<MyButton
text='添加成员'
text="添加成员"
style={{ backgroundColor: "#1370FF " }}
variant="contained"
onClick={onAddMember}
......@@ -168,16 +170,18 @@ const ProjectMembers = observer(() => {
/>
) : null}
</Box>
<div className={styles.tableBox}>
<MyTable
rowHover={true}
stickyHeader={true}
rows={filterTableData}
rowsPerPage={"99"}
fixedHead={true}
rows={filterTableData.map((item: any, index) => ({
...item,
operation: randerOperation(item),
}))}
tableKey="username"
headCells={columns}
footer={false}
tableStyle={{ minWidth: "auto" }}
borderBottom={"none"}
loading={loading}
/>
</div>
<RemoveItem
removeDialog={removeDialog}
setRemoveDialog={setRemoveDialog}
......
src/views/demo/MyTableDemo/index.tsx 0 → 100644
View file @ c53470a3
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 @ c53470a3
.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 @ c53470a3
import { useMessage } from "@/components/MySnackbar";
// import usePass from "@/hooks/usePass";
import { operation, route } from "@/router";
import { Button } from "@mui/material";
import { Box } from "@mui/system";
import { useEffect } from "react";
import MyTableDemo from "./MyTableDemo";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import { useCallback, useMemo, useState } from "react";
import styles from "./index.module.css";
const Demo = ({
childrenRoutes,
}: {
childrenRoutes?: Array<route | operation>;
}) => {
const message = useMessage();
// const isPass = usePass();
useEffect(() => {
// console.log(isPass("PROJECT_OVERIVEW_CREATE"), "11111111111");
// console.log(isPass("PROJECT_SUMMARY_MEMBER"), "2222222");
// console.log(isPass("test"), "33333");
// eslint-disable-next-line react-hooks/exhaustive-deps
const Demo = () => {
const demoList = useCallback(() => {
return [
{
name: "表格",
element: MyTableDemo,
},
{
name: "box",
element: () => {
return <div>box</div>;
},
},
];
}, []);
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 (
<Box>
<Box>{JSON.stringify(childrenRoutes)}</Box>
<Box>{JSON.stringify(process.env.NODE_ENV)}</Box>
<Button onClick={() => message.success("测试测试")}>message测试</Button>
</Box>
<div className={styles.demoBox}>
<RadioGroupOfButtonStyle
value={selectDemo}
radioOptions={radioOptionsArr}
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