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 Hide whitespace changes
Inline Side-by-side
Showing with 1241 additions and 375 deletions
src/api/fileserver/CloudEController.ts
View file @ c53470a3
...@@ -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 @ 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 @@ ...@@ -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 @ c53470a3
...@@ -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 @ c53470a3
...@@ -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 @ c53470a3
...@@ -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 @ c53470a3
...@@ -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 @ c53470a3
// 分页组件 // 分页组件
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 @ c53470a3
...@@ -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 @ c53470a3
This diff is collapsed.
src/views/MenuLayout/index.tsx
View file @ c53470a3
...@@ -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/DeleteDialog/index.tsx
View file @ c53470a3
...@@ -49,8 +49,8 @@ const DeleteDialog = (props: IDeleteFileProps) => { ...@@ -49,8 +49,8 @@ const DeleteDialog = (props: IDeleteFileProps) => {
if (currentOperateFile) { if (currentOperateFile) {
return [currentOperateFile]; return [currentOperateFile];
} else { } else {
return showList.filter((item: any) => { return selectIds.map((item) => {
return selectIds.indexOf(item.name) !== -1; return showList[item];
}); });
} }
}, [currentOperateFile, selectIds, showList]); }, [currentOperateFile, selectIds, showList]);
......
src/views/Project/ProjectData/MoveFile/index.tsx
View file @ c53470a3
...@@ -102,9 +102,11 @@ const MoveFile = (props: IMoveFileProps) => { ...@@ -102,9 +102,11 @@ const MoveFile = (props: IMoveFileProps) => {
moveFolderArr = []; moveFolderArr = [];
} }
} else { } else {
moveFolderArr = showList.filter((item: any) => { moveFolderArr = selectIds
return selectIds.indexOf(item.name) !== -1 && item.type === "directory"; .map((item) => {
}); return showList[item];
})
.filter((item) => item.type === "directory");
} }
pathArr = moveFolderArr.map((item: any) => { pathArr = moveFolderArr.map((item: any) => {
return path === "/" ? `/${item.name}` : `${path}/${item.name}`; return path === "/" ? `/${item.name}` : `${path}/${item.name}`;
...@@ -147,8 +149,8 @@ const MoveFile = (props: IMoveFileProps) => { ...@@ -147,8 +149,8 @@ const MoveFile = (props: IMoveFileProps) => {
if (currentOperateFile) { if (currentOperateFile) {
return [currentOperateFile]; return [currentOperateFile];
} else { } else {
return showList.filter((item: any) => { return selectIds.map((item) => {
return selectIds.indexOf(item.name) !== -1; return showList[item];
}); });
} }
}, [currentOperateFile, selectIds, showList]); }, [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) => { ...@@ -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 @ c53470a3
...@@ -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,112 @@ ...@@ -30,134 +30,112 @@
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;
}
.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; position: relative;
cursor: pointer;
} }
.datasetLi:nth-child(4n) { .searchBox {
margin-right: 0; width: 662px;
background-color: #fff;
padding: 20px 24px 24px;
box-sizing: border-box;
} }
.datasetLi:nth-last-child(1) { .deleteIcon {
margin-bottom: 0; cursor: pointer;
} }
.datasetLi:nth-last-child(2) { .deleteIconDisabled {
margin-bottom: 0; cursor: not-allowed;
} }
.datasetLi:nth-last-child(3) { .searchTop {
margin-bottom: 0; margin-bottom: 12px;
} }
.datasetLi:nth-last-child(4) { .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;
} }
.datasetLiTop { .width250 {
height: 55%; width: 250px;
box-sizing: border-box;
} }
.datasetLiBottom { .width120 {
height: 45%; width: 120px;
box-sizing: border-box;
background-color: RGBA(247, 248, 250, 1);
display: flex;
flex-direction: column;
} }
.datasetLiTitle { .width180 {
height: 38px; width: 180px;
line-height: 38px;
color: rgba(19, 112, 255, 1);
font-size: 14px;
text-align: center;
font-weight: 600;
width: 100%;
overflow: hidden;
} }
.datasetLiDataList { .searchList {
flex: 1; margin-bottom: 24px;
overflow: overlay;
} }
.noDataList { .searchLi {
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; cursor: pointer;
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/UpLoaderFile/index.module.css
View file @ c53470a3
...@@ -14,6 +14,9 @@ ...@@ -14,6 +14,9 @@
margin-bottom: 14px; margin-bottom: 14px;
font-weight: 600; font-weight: 600;
} }
.tableBox {
height: 350px;
}
.dropBox { .dropBox {
cursor: pointer; cursor: pointer;
height: 300px; height: 300px;
......
src/views/Project/ProjectData/UpLoaderFile/index.tsx
View file @ c53470a3
...@@ -8,7 +8,7 @@ import style from "./index.module.css"; ...@@ -8,7 +8,7 @@ import style from "./index.module.css";
import MyDialog from "@/components/mui/MyDialog"; import MyDialog from "@/components/mui/MyDialog";
import { uuid } from "@/utils/util"; import { uuid } from "@/utils/util";
import { useMessage } from "@/components/MySnackbar"; 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 fileIcon from "@/assets/project/fileIcon.svg";
import noFile from "@/assets/project/noFile.svg"; import noFile from "@/assets/project/noFile.svg";
import uploaderIcon from "@/assets/project/uploaderIcon.svg"; import uploaderIcon from "@/assets/project/uploaderIcon.svg";
...@@ -149,9 +149,9 @@ const UpLoaderFile = observer((props: IMoveFileProps) => { ...@@ -149,9 +149,9 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
}, [uploaderDialogOpen]); }, [uploaderDialogOpen]);
const fileListHeadCells = [ const fileListHeadCells = [
{ id: "name", numeric: false, label: "名称", width: "60%" }, { id: "name", label: "名称", width: 300 },
{ id: "size", numeric: false, label: "大小", width: "25%" }, { id: "size", label: "大小", width: 120 },
{ id: "caozuo", numeric: false, label: "操作", width: "15%" }, { id: "caozuo", label: "操作", width: 100 },
]; ];
const renderName = (item: any) => { const renderName = (item: any) => {
...@@ -163,7 +163,7 @@ const UpLoaderFile = observer((props: IMoveFileProps) => { ...@@ -163,7 +163,7 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
); );
}; };
const renderSize = (item: any) => { const renderSize = (item: any) => {
return <span>{item.size ? storageUnitFromB(Number(item.size)) : "-"}</span>; return `${item.size ? storageUnitFromB(Number(item.size)) : "-"}`;
}; };
const handleRowDelete = (index: number) => { const handleRowDelete = (index: number) => {
...@@ -224,25 +224,14 @@ const UpLoaderFile = observer((props: IMoveFileProps) => { ...@@ -224,25 +224,14 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
</div> </div>
<div className={style.tableBox}> <div className={style.tableBox}>
<MyTable <MyTable
rowHover={true} fixedHead={true}
stickyHeader={true}
rows={fileList.map((item: any, index: number) => ({ rows={fileList.map((item: any, index: number) => ({
...item, ...item,
name: renderName(item), name: renderName(item),
size: renderSize(item), size: renderSize(item),
caozuo: renderButtons(item, index), caozuo: renderButtons(item, index),
}))} }))}
rowsPerPage={"99"}
headCells={fileListHeadCells} headCells={fileListHeadCells}
footer={false}
// headTableCellStyle={{
// fontSize: "12px",
// lineHeight: "20px",
// color: "#8A9099",
// }}
tableContainerStyle={{
maxHeight: "300px",
}}
/> />
</div> </div>
{fileList.length === 0 && ( {fileList.length === 0 && (
......
src/views/Project/ProjectData/index.module.css
View file @ c53470a3
...@@ -116,3 +116,6 @@ ...@@ -116,3 +116,6 @@
line-height: 22px; line-height: 22px;
color: #8a9099; 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"; ...@@ -2,12 +2,11 @@ import React, { useState, useCallback, useEffect, useMemo } from "react";
import style from "./index.module.css"; import style from "./index.module.css";
import classnames from "classnames"; import classnames from "classnames";
import { IconButton } from "@mui/material"; 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 dataSetIcon from "@/assets/project/dataSetIcon.svg";
import refresh from "@/assets/project/refresh.svg"; import refresh from "@/assets/project/refresh.svg";
import fileIcon from "@/assets/project/fileIcon.svg"; import fileIcon from "@/assets/project/fileIcon.svg";
import folderIcon from "@/assets/project/folderIcon.svg"; import folderIcon from "@/assets/project/folderIcon.svg";
import noFile from "@/assets/project/noFile.svg";
import AddFolder from "./AddFolder"; import AddFolder from "./AddFolder";
import MoveFile from "./MoveFile"; import MoveFile from "./MoveFile";
import DeleteDialog from "./DeleteDialog"; import DeleteDialog from "./DeleteDialog";
...@@ -73,6 +72,11 @@ const ProjectData = observer(() => { ...@@ -73,6 +72,11 @@ const ProjectData = observer(() => {
setPath(locationInfo?.pathName || "/"); setPath(locationInfo?.pathName || "/");
}, [location]); }, [location]);
// 切换文件数据集时情况勾选项
useEffect(() => {
setSelectIds([]);
}, [activeTab]);
// 列表展示的数据 // 列表展示的数据
const showList = useMemo(() => { const showList = useMemo(() => {
if (activeTab === "file") { if (activeTab === "file") {
...@@ -86,12 +90,24 @@ const ProjectData = observer(() => { ...@@ -86,12 +90,24 @@ const ProjectData = observer(() => {
fileList.push(item); fileList.push(item);
} }
}); });
return [...folderList, ...fileList]; let arr = [...folderList, ...fileList];
return arr.map((item, index) => {
return {
...item,
id: index,
};
});
} else { } else {
const folderList = list.filter((item: any) => { const folderList = list.filter((item: any) => {
return item.type === "directory"; return item.type === "directory";
}); });
return [...folderList, ...dataSetList]; let arr = [...folderList, ...dataSetList];
return arr.map((item, index) => {
return {
...item,
id: index,
};
});
} }
}, [list, dataSetList, activeTab]); }, [list, dataSetList, activeTab]);
...@@ -256,45 +272,16 @@ const ProjectData = observer(() => { ...@@ -256,45 +272,16 @@ const ProjectData = observer(() => {
}; };
// table配置 // table配置
const versionsHeadCells = useMemo(() => { const versionsHeadCells = [
if (showCheckBox) { { id: "name", label: "名称" },
return [ { id: "size", label: "大小", width: 200 },
{ id: "checkbox" }, {
{ id: "name", numeric: false, label: "名称", width: "25%" }, id: "mtime",
{ id: "size", numeric: false, label: "大小", width: "25%", sort: true }, label: "创建时间",
{ width: 200,
id: "mtime", },
numeric: false, { id: "caozuo", label: "操作", width: 200 },
label: "创建时间", ];
width: "25%",
sort: true,
},
{ id: "caozuo", numeric: false, label: "操作", width: "25%" },
];
} 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) => { const handleViewFolders = (item: any) => {
...@@ -312,7 +299,6 @@ const ProjectData = observer(() => { ...@@ -312,7 +299,6 @@ const ProjectData = observer(() => {
// 查看数据集 // 查看数据集
const handleSeeDataset = (item: any) => { const handleSeeDataset = (item: any) => {
console.log(item);
setSeeDatasetName(item.name); setSeeDatasetName(item.name);
setShowSeeDataset(true); setShowSeeDataset(true);
}; };
...@@ -593,32 +579,22 @@ const ProjectData = observer(() => { ...@@ -593,32 +579,22 @@ const ProjectData = observer(() => {
</div> </div>
</div> </div>
</div> </div>
<MyTable <div className={style.tableBox}>
footer={false} <MyTable
rowHover={true} fixedHead={true}
onRef={tableRef} hasCheckbox={showCheckBox}
stickyHeader={true} headCells={versionsHeadCells}
initSelected={selectIds} selectItems={selectIds}
headCells={versionsHeadCells} setSelectItems={setSelectIds}
rowsPerPage={"99"} rows={showList.map((item: any, index: number) => ({
checkboxData={(e: any) => { ...item,
hanldeCheckbox(e); name: renderName(item),
}} size: renderSize(item),
rows={showList.map((item: any, index: number) => ({ mtime: renderMtime(item),
...item, caozuo: renderButtons(item),
id: `name=${item.name}&index=${index}`, }))}
name: renderName(item), />
size: renderSize(item), </div>
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> </div>
{selectIds.length > 0 && ( {selectIds.length > 0 && (
<div className={style.projectDataStickyBox}> <div className={style.projectDataStickyBox}>
...@@ -635,7 +611,6 @@ const ProjectData = observer(() => { ...@@ -635,7 +611,6 @@ const ProjectData = observer(() => {
/> />
<MyButton <MyButton
text={`批量移动 (${selectIds.length})`} text={`批量移动 (${selectIds.length})`}
// color="neutral"
variant="contained" variant="contained"
style={{ marginRight: "24px" }} style={{ marginRight: "24px" }}
onClick={() => { onClick={() => {
......
src/views/Project/ProjectSetting/ProjectMembers/components/AddMember.tsx
View file @ c53470a3
...@@ -9,15 +9,17 @@ ...@@ -9,15 +9,17 @@
import { toJS } from "mobx"; import { toJS } from "mobx";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import _ from "lodash"; import _ from "lodash";
import { memo, useCallback, useEffect, useMemo, useState } from "react"; import { memo, useCallback, useEffect, useState } from "react";
import { Box, OutlinedInput } from "@mui/material"; import { Box } from "@mui/material";
import Dialog from "@/components/mui/MyDialog"; import Dialog from "@/components/mui/MyDialog";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import { useStores } from "@/store"; import { useStores } from "@/store";
import { useMessage } from "@/components/MySnackbar"; import { useMessage } from "@/components/MySnackbar";
import MyBorderlessSelect, { IOption } from "@/components/mui/MyBorderlessSelect"; import MyBorderlessSelect, {
import MyTable from "@/components/mui/MyTable"; IOption,
} from "@/components/mui/MyBorderlessSelect";
import MyTable from "@/components/mui/MyTableNew";
import SearchInput from "@/components/BusinessComponents/SearchInput"; import SearchInput from "@/components/BusinessComponents/SearchInput";
import { import {
addProjectUser, addProjectUser,
...@@ -35,7 +37,6 @@ const AddMember = observer((props: IProps) => { ...@@ -35,7 +37,6 @@ const AddMember = observer((props: IProps) => {
const { addMemberDialog, setAddMemberDialog, getTableList } = props; const { addMemberDialog, setAddMemberDialog, getTableList } = props;
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
const [tableData, setTableData] = useState([]); const [tableData, setTableData] = useState([]);
const [projectMember, setProjectMember] = useState(""); const [projectMember, setProjectMember] = useState("");
const [filterTableData, setFilterTableData] = useState([]); const [filterTableData, setFilterTableData] = useState([]);
...@@ -54,30 +55,29 @@ const AddMember = observer((props: IProps) => { ...@@ -54,30 +55,29 @@ const AddMember = observer((props: IProps) => {
[tableData] [tableData]
); );
const columns = useMemo(() => { const columns = [
return [ { id: "username", label: "项目成员", width: 200 },
{ id: "checkbox", width: 50 }, {
{ id: "username", label: "项目成员", width: 160 }, id: "projectRole",
{ label: "项目权限",
id: "projectRole", width: 100,
label: "项目权限", },
width: 160, ];
render: (item: string, row: any, index: number) => {
const defaultValue = selectOptions.filter( const randerRole = (item: any, index: number) => {
(every) => every.value === item const defaultValue = selectOptions.filter(
); (every) => every.value === item.projectRole
return ( );
<MyBorderlessSelect return (
value={defaultValue?.length ? defaultValue[0]?.value : "VIEWER"} <MyBorderlessSelect
onChange={(val) => changePermission(val, index)} value={defaultValue?.length ? defaultValue[0]?.value : "VIEWER"}
options={selectOptions} onChange={(val) => changePermission(val, index)}
size="small" options={selectOptions}
/> size="small"
); sx={{ position: "relative", left: "-13px" }}
}, />
}, );
]; };
}, [changePermission, selectOptions]);
/** 过滤表格数据 */ /** 过滤表格数据 */
useEffect(() => { useEffect(() => {
...@@ -93,11 +93,14 @@ const AddMember = observer((props: IProps) => { ...@@ -93,11 +93,14 @@ const AddMember = observer((props: IProps) => {
}, [projectMember, tableData]); }, [projectMember, tableData]);
// 获取表格数据接口 // 获取表格数据接口
const { run: getProjectUsersList } = useMyRequest(fetchProjectUsersList, { const { run: getProjectUsersList, loading } = useMyRequest(
onSuccess: (res: any) => { fetchProjectUsersList,
setTableData(res?.data); {
}, onSuccess: (res: any) => {
}); setTableData(res?.data);
},
}
);
// 获取项目权限 // 获取项目权限
const { run: getProjectPower } = useMyRequest(fetchProjectPower, { const { run: getProjectPower } = useMyRequest(fetchProjectPower, {
...@@ -173,23 +176,22 @@ const AddMember = observer((props: IProps) => { ...@@ -173,23 +176,22 @@ const AddMember = observer((props: IProps) => {
placeholder="搜索项目成员" placeholder="搜索项目成员"
sx={{ mb: 2 }} sx={{ mb: 2 }}
/> />
<div style={{ overflow: "overlay", maxHeight: 400 }}> <div style={{ height: "320px" }}>
<MyTable <MyTable
noDataText={ noDataText={
projectMember ? `暂无 "${projectMember}" 搜索结果` : undefined projectMember ? `暂无 "${projectMember}" 搜索结果` : undefined
} }
tableContainerStyle={{ height: 346 }} tableKey="username"
checkboxData={(val: string[]) => setCheckData(val)} hasCheckbox={true}
param="username" selectItems={checkData}
disabledParam={"enabled"} setSelectItems={setCheckData}
rowHover={true} fixedHead={true}
stickyHeader={true} rows={filterTableData.map((item: any, idnex) => ({
rows={filterTableData} ...item,
rowsPerPage="99" projectRole: randerRole(item, idnex),
}))}
headCells={columns} headCells={columns}
footer={false} loading={loading}
tableStyle={{ minWidth: "auto" }}
borderBottom="none"
/> />
</div> </div>
</Box> </Box>
......
src/views/Project/ProjectSetting/ProjectMembers/index.module.css
View file @ c53470a3
.headerBox { .headerBox {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
.removeItemBox { .removeItemBox {
color: #ff4e4e; color: #ff4e4e;
margin-left: 32px; margin-left: 32px;
cursor: pointer; cursor: pointer;
}
.tableBox {
height: calc(100vh - 300px);
} }
src/views/Project/ProjectSetting/ProjectMembers/index.tsx
View file @ c53470a3
...@@ -7,15 +7,12 @@ ...@@ -7,15 +7,12 @@
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
import { memo, useCallback, useEffect, useMemo, useState } from "react"; import { memo, useCallback, useEffect, useMemo, useState } from "react";
import _ from "lodash";
import OutlinedInput from "@mui/material/OutlinedInput";
import { Box } from "@mui/material"; import { Box } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import Add from "@mui/icons-material/Add"; import Add from "@mui/icons-material/Add";
import { toJS } from "mobx"; import { toJS } from "mobx";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import MyTable from "@/components/mui/MyTable"; import MyTable from "@/components/mui/MyTableNew";
import { IResponse, useHttp } from "@/api/http"; import { IResponse, useHttp } from "@/api/http";
import RemoveItem from "./components/RemoveItem"; import RemoveItem from "./components/RemoveItem";
import ChangePermission from "./components/ChangePermission"; import ChangePermission from "./components/ChangePermission";
...@@ -52,44 +49,44 @@ const ProjectMembers = observer(() => { ...@@ -52,44 +49,44 @@ const ProjectMembers = observer(() => {
const [projectName, setProjectMember] = useState(""); const [projectName, setProjectMember] = useState("");
/** 过滤后数据 */ /** 过滤后数据 */
const [filterTableData, setFilterTableData] = useState([]); const [filterTableData, setFilterTableData] = useState([]);
const [loading, setLoading] = useState(false);
const randerOperation = (item: any) => {
return item?.projectRole === "OWNER" ? null : (
<>
<span
style={{ color: "#1370FF", cursor: "pointer" }}
onClick={() => {
onPermissionBtn(item);
}}
>
更改权限
</span>
<span
className={styles.removeItemBox}
onClick={() => {
onRemoveItemBtn(item.username);
}}
>
移出项目
</span>
</>
);
};
const columns = useMemo(() => { const columns = useMemo(() => {
const val: any = [ let val: any = [
{ id: "username", label: "成员名称" }, { id: "username", label: "成员名称", width: 200 },
{ id: "projectRoleDesc", label: "项目权限" }, { id: "projectRoleDesc", label: "项目权限", width: 200 },
{ id: "phone", label: "联系方式" }, { id: "phone", label: "联系方式" },
...(projectRole !== "OWNER"
? []
: [
{
id: "operation",
label: "操作",
width: 160,
render: (item: any, row: any) => {
return row?.projectRole === "OWNER" ? null : (
<>
<span
style={{ color: "#1370FF", cursor: "pointer" }}
onClick={() => {
onPermissionBtn(row);
}}
>
更改权限
</span>
<span
className={styles.removeItemBox}
onClick={() => {
onRemoveItemBtn(row.username);
}}
>
移出项目
</span>
</>
);
},
},
]),
]; ];
if (projectRole === "OWNER") {
val.push({
id: "operation",
label: "操作",
width: 180,
});
}
return val; return val;
}, [projectRole]); }, [projectRole]);
...@@ -97,14 +94,19 @@ const ProjectMembers = observer(() => { ...@@ -97,14 +94,19 @@ const ProjectMembers = observer(() => {
const getTableList = useCallback(() => { const getTableList = useCallback(() => {
const projectInfo = toJS(currentProjectStore?.currentProjectInfo); const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
if (!projectInfo?.id) return; if (!projectInfo?.id) return;
setLoading(true);
http http
.get<IResponse<any>>("/cpp/project/get", { .get<IResponse<any>>("/cpp/project/get", {
params: { id: projectInfo?.id || "" }, params: { id: projectInfo?.id || "" },
}) })
.then((res) => { .then((res) => {
setLoading(false);
const { data = {} } = res; const { data = {} } = res;
setTableData(data?.members || []); setTableData(data?.members || []);
setProjectRole(data?.projectRole || ""); setProjectRole(data?.projectRole || "");
})
.catch(() => {
setLoading(false);
}); });
}, [currentProjectStore?.currentProjectInfo, http]); }, [currentProjectStore?.currentProjectInfo, http]);
...@@ -142,12 +144,12 @@ const ProjectMembers = observer(() => { ...@@ -142,12 +144,12 @@ const ProjectMembers = observer(() => {
projectRole: row?.projectRole || "", projectRole: row?.projectRole || "",
}); });
}; };
// 回车搜索 // 回车搜索
const handleKeyWordChangeKeyUp = (e: any) => { const handleKeyWordChangeKeyUp = (e: any) => {
if (e.keyCode === 13) { if (e.keyCode === 13) {
setProjectMember(e.target.value); setProjectMember(e.target.value);
} }
} };
return ( return (
<> <>
...@@ -159,7 +161,7 @@ const ProjectMembers = observer(() => { ...@@ -159,7 +161,7 @@ const ProjectMembers = observer(() => {
/> />
{currentProjectStore?.currentProjectInfo?.projectRole === "OWNER" ? ( {currentProjectStore?.currentProjectInfo?.projectRole === "OWNER" ? (
<MyButton <MyButton
text='添加成员' text="添加成员"
style={{ backgroundColor: "#1370FF " }} style={{ backgroundColor: "#1370FF " }}
variant="contained" variant="contained"
onClick={onAddMember} onClick={onAddMember}
...@@ -168,16 +170,18 @@ const ProjectMembers = observer(() => { ...@@ -168,16 +170,18 @@ const ProjectMembers = observer(() => {
/> />
) : null} ) : null}
</Box> </Box>
<MyTable <div className={styles.tableBox}>
rowHover={true} <MyTable
stickyHeader={true} fixedHead={true}
rows={filterTableData} rows={filterTableData.map((item: any, index) => ({
rowsPerPage={"99"} ...item,
headCells={columns} operation: randerOperation(item),
footer={false} }))}
tableStyle={{ minWidth: "auto" }} tableKey="username"
borderBottom={"none"} headCells={columns}
/> loading={loading}
/>
</div>
<RemoveItem <RemoveItem
removeDialog={removeDialog} removeDialog={removeDialog}
setRemoveDialog={setRemoveDialog} 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 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