Skip to content

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

Merge branch 'feat-20220705-customTemplate' into 'release' 

cn-Feat 20220705 custom template

See merge request !97
parents 95bf189b 0c38f37f
Hide whitespace changes
Inline Side-by-side
Showing with 2695 additions and 2258 deletions
src/api/fileserver/CloudEController.ts
View file @ 7ea52091
......@@ -4,7 +4,7 @@ import axios from "axios";
// import { Actions, Constants } from '../../../../commons/utils/constants'
// import MessageUtil from '../../../../commons/utils/MessageUtil'
// import ApiUtils from '../../../../commons/utils/ApiUtils'
import { APIOPTION, urlToken, ZONEID } from "./raysyncApi";
import { APIOPTION, urlToken } from "./raysyncApi";
// import UserStore from '../../../../console/common/stores/UserStore'
import { ApiUtils } from "./utils";
import Base64 from "crypto-js/enc-base64";
......
src/api/fileserver/raysyncApi.ts
View file @ 7ea52091
......@@ -28,18 +28,18 @@ const APIPORT = function () {
};
// 当前计算区
let currentRegion = localStorage.getItem("current-region");
let currentRegionJson = currentRegion && JSON.parse(currentRegion);
let user = getLoaclStorageOfKey("userinfo");
// let currentRegion = localStorage.getItem("current-region");
// let currentRegionJson = currentRegion && JSON.parse(currentRegion);
// let user = getLoaclStorageOfKey("userinfo");
// 文件路径
const FILEPATH =
currentRegionJson &&
currentRegionJson.location &&
currentRegionJson.location === "ON_PREMISE" &&
localStorage.getItem("userinfo")
? `/home/${user.name}`
: "/home/cloudam";
// const FILEPATH =
// currentRegionJson &&
// currentRegionJson.location &&
// currentRegionJson.location === "ON_PREMISE" &&
// localStorage.getItem("userinfo")
// ? `/home/${user.name}`
// : "/home/cloudam";
const FILEPATH_SHARE = "/share";
// 工作日志
......@@ -104,7 +104,7 @@ const getType = function () {
export {
API,
APIPORT,
FILEPATH,
// FILEPATH,
FILEPATH_SHARE,
APIOPTION,
APIJOBLOGPOINT,
......
src/api/http.ts
View file @ 7ea52091
......@@ -128,7 +128,6 @@ export class Http {
if (
newConfig?.headers['Content-Type'] === "application/x-www-form-urlencoded"
) {
console.log(222)
newConfig.data = qs.stringify(data);
}
return newConfig
......
src/components/Material.Ui/Table.jsx
View file @ 7ea52091
......@@ -9,7 +9,6 @@ import Paper from "@mui/material/Paper";
import Checkbox from "@mui/material/Checkbox";
// import Spin from "./Spin";
import EnhancedTableToolbarComponent from "./Table/EnhancedTableToolbar"
import EnhancedTableHeadComponent from "./Table/EnhancedTableHead"
import { getComparator, stableSort, useStyles } from "./Table/function";
import ActionsComponent from "./Table/ActionsComponent"
......@@ -20,11 +19,10 @@ export default function EnhancedTable(props) {
const classes = useStyles;
const [order, setOrder] = React.useState("asc");
const [orderBy, setOrderBy] = React.useState("");
const { headCells, rows, footer = true, elevation1, tableStyle, tablecellstyle, tableContainerStyle, stickyheader, TableHeadClasses, onRowClick, defaultRow, minHeight = '', borderBottom = '', onDoubleClick,
const { headCells, rows, footer = true, elevation1, tableStyle, tablecellstyle, tableContainerStyle, stickyheader, onRowClick, defaultRow, minHeight = '', borderBottom = '', onDoubleClick,
load, size, checkboxData, rowsPerPage = 10, initSelected, page = 0, changePage = function () { }, toolbar, count, param, disabledparam = "id", headTableCellCheckbox, RowHeight = '', CellWidth = '', rowHover, TableNodataPadding = '', TableNodataLineHeight = '', tableBoySx } = props;
const [selected, setSelected] = React.useState(initSelected || []);
const [rowsPerPageOptions, setRowsPerPageOptions] = React.useState(initSelected || [5, 10, 20, 50, { value: -1, label: 'All' }]);
// const [spin, setSpin] = React.useState(false)
const [rowsPerPageOptions] = React.useState(initSelected || [5, 10, 20, 50, { value: -1, label: 'All' }]);
const [onRow, setOnRow] = React.useState('')
// 重置复选框选中选项
......@@ -63,10 +61,6 @@ export default function EnhancedTable(props) {
setSelected([]);
checkboxData([]);
};
// React.useEffect(() => {
// setSpin(load)
// }, [load]);
const handleClick = (event, name) => {
const selectedIndex = selected.indexOf(name);
let newSelected = [];
......@@ -97,7 +91,7 @@ export default function EnhancedTable(props) {
const isSelected = (name) => selected.indexOf(name) !== -1;
const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
// const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
const renderTableCellValue = useCallback(((item, row, index)=>{
if(
......@@ -209,11 +203,6 @@ export default function EnhancedTable(props) {
</TableRow>
);
})}
{/* {emptyRows > 0 && (
<TableRow style={{ height: (dense ? 33 : 53) * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)} */}
</TableBody>
</Table>
</TableContainer>
......
src/components/mui/Button.tsx
View file @ 7ea52091
import React, { FC } from "react";
import React from "react";
import { Props } from "ahooks/lib/useControllableValue";
import { makeStyles } from "tss-react/mui";
import { Typography, Menu, MenuItem, IconButton, Button } from "@mui/material";
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import { Typography, Menu, MenuItem, Button } from "@mui/material";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
type ButtonTagProps = {
text: string;//文本内容
variant?: "text" | 'contained' | 'outlined';//按钮样式
click?: any;//点击事件
select?: any[];//选择按钮的下拉列表
fontSize?: string;//按钮文字大小
dropValue?: boolean;//选择的值
drop?: boolean;//是否开启选择
color?: "inherit" | "primary" | "secondary" | undefined,//按钮颜色风格
btnStyle?: any,//按钮自定义样式类
size?: "large" | "medium" | "small",//按钮尺寸
disabled?: boolean,//是否禁用
style?: any,//按钮自定义样式
img?: JSX.Element;//图标按钮中的图标
selectCallBack?: (item: any, key: number) => void//选择按钮的回调
}
text: string; //文本内容
variant?: "text" | "contained" | "outlined"; //按钮样式
click?: any; //点击事件
select?: any[]; //选择按钮的下拉列表
fontSize?: string; //按钮文字大小
dropValue?: boolean; //选择的值
drop?: boolean; //是否开启选择
color?: "inherit" | "primary" | "secondary" | undefined; //按钮颜色风格
btnStyle?: any; //按钮自定义样式类
size?: "large" | "medium" | "small"; //按钮尺寸
disabled?: boolean; //是否禁用
style?: any; //按钮自定义样式
img?: JSX.Element; //图标按钮中的图标
selectCallBack?: (item: any, key: number) => void; //选择按钮的回调
};
const ButtonComponent = (props: ButtonTagProps) => {
const { size, disabled, variant, color, img, btnStyle = {}, select, selectCallBack } = props;
const { classes, cx } = useStyles({});
const [anchorEl, setAnchorEl] = React.useState(null);
const {
size,
disabled,
variant,
color,
img,
btnStyle = {},
select,
selectCallBack,
} = props;
const { classes, cx } = useStyles({});
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event: { currentTarget: React.SetStateAction<null>; }) => setAnchorEl(event.currentTarget);
const defultClick = (event: { stoppropagation: () => any; }) => event && event.stoppropagation && event.stoppropagation()
const handleCloseOption = (item: any, key: number) => {
setAnchorEl(null);
selectCallBack && selectCallBack(item, key)
}
const handleClose = () => setAnchorEl(null);
const handleClick = (event: { currentTarget: React.SetStateAction<null> }) =>
setAnchorEl(event.currentTarget);
const defultClick = (event: { stoppropagation: () => any }) =>
event && event.stoppropagation && event.stoppropagation();
const handleCloseOption = (item: any, key: number) => {
setAnchorEl(null);
selectCallBack && selectCallBack(item, key);
};
const handleClose = () => setAnchorEl(null);
return (
<>
<Button
size={size || "medium"}
variant={variant || "contained"}
color={color || "primary"}
disableRipple={true}
disableFocusRipple={true}
disabled={disabled || false}
classes={{
root: btnStyle.root || classes.root,
// disabled: btnStyle.disabled || classes.disabled,
containedSecondary:
btnStyle.containedSecondary || classes.containedSecondary,
outlined: btnStyle.outlined || classes.outlined,
outlinedSecondary:
btnStyle.outlinedSecondary || classes.outlinedSecondary,
text: btnStyle.text || classes.text,
textPrimary: btnStyle.textPrimary || classes.textPrimary,
textSecondary: btnStyle.textSecondary || classes.textSecondary,
sizeSmall: btnStyle.sizeSmall || classes.sizeSmall,
sizeLarge: btnStyle.sizeLarge || classes.sizeLarge,
}}
style={{ ...props.style }}
onClick={props.select ? handleClick : props.click || defultClick}
>
{img || ""}
<Typography style={{ fontSize: props.fontSize || "14px" }}>
{props.text}
</Typography>
{((props.select && props.select.length > 0) || props.drop) && (
<ArrowDropDownIcon
classes={{
root: cx({
[classes.ArrowDropDownIconRoot]: true,
[classes.ArrowDropDownIconRootOpen]: Boolean(
props.dropValue || anchorEl
),
}),
}}
/>
)}
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
{select &&
select.length > 0 &&
select.map((item, key) => {
return (
<MenuItem
key={key}
classes={{ root: classes.menuItemRoot }}
onClick={() => handleCloseOption(item, key)}
>
{item.name || ""}
</MenuItem>
);
})}
</Menu>
</>
);
};
return (
<>
<Button
size={size || "medium"}
variant={variant || 'contained'}
color={color || "primary"}
disableRipple={true}
disableFocusRipple={true}
disabled={disabled || false}
classes={{
root: btnStyle.root || classes.root,
// disabled: btnStyle.disabled || classes.disabled,
containedSecondary: btnStyle.containedSecondary || classes.containedSecondary,
outlined: btnStyle.outlined || classes.outlined,
outlinedSecondary: btnStyle.outlinedSecondary || classes.outlinedSecondary,
text: btnStyle.text || classes.text,
textPrimary: btnStyle.textPrimary || classes.textPrimary,
textSecondary: btnStyle.textSecondary || classes.textSecondary,
sizeSmall: btnStyle.sizeSmall || classes.sizeSmall,
sizeLarge: btnStyle.sizeLarge || classes.sizeLarge,
const useStyles = makeStyles<{}>()((theme) => ({
root: {
backgroundColor: "#136EFA",
boxShadow: "none !important",
color: "#ffffff",
"&:hover": { backgroundColor: "#0055D9" },
},
containedSecondary: {
backgroundColor: "#D62C1F",
boxShadow: "none !important",
"&:hover": { backgroundColor: "#D82C1F" },
},
outlined: {
backgroundColor: "#FFFFFF",
border: "1px solid #136EFA",
boxShadow: "none !important",
color: "#136EFA",
"&:hover": { backgroundColor: "rgba(19, 110, 250, 0.1)" },
},
outlinedSecondary: {
border: "1px solid #D62C1F",
color: "#D62C1F",
"&:hover": {
border: "1px solid #D62C1F",
backgroundColor: "rgba(214, 44, 31, 0.1)",
},
},
label: { "& p": { fontSize: "13px" } },
text: { backgroundColor: "transparent", boxShadow: "none !important" },
textPrimary: { color: "#136EFA", "&:hover": { backgroundColor: "#E8F1FF" } },
textSecondary: {
color: "#F44335",
"&:hover": { backgroundColor: "rgba(244, 67, 53, 0.1)" },
},
sizeSmall: { "& p": { fontSize: "12px" } },
sizeLarge: { "& p": { fontSize: "14px" } },
menuItemRoot: {},
ArrowDropDownIconRoot: {
color: "#8A9099",
transition: "all 0.2s !important",
transform: "rotate(0)",
},
ArrowDropDownIconRootOpen: { color: "#8A9099", transform: "rotate(180deg)" },
}));
}}
style={{ ...props.style }}
onClick={props.select ? handleClick : (props.click || defultClick)}
>
{img || ''}
<Typography style={{ fontSize: props.fontSize || "14px" }}>{props.text}</Typography>
{
(props.select && props.select.length > 0 || props.drop) && <ArrowDropDownIcon classes={{
root: cx({
[classes.ArrowDropDownIconRoot]: true,
[classes.ArrowDropDownIconRootOpen]: Boolean(props.dropValue || anchorEl)
})
}} />
}
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
{
select && select.length > 0 && select.map((item, key) => {
return (
<MenuItem
key={key}
classes={{ root: classes.menuItemRoot }}
onClick={() => handleCloseOption(item, key)}>
{item.name || ""}
</MenuItem>
)
})
}
</Menu>
</>
)
}
const useStyles = makeStyles<{}>()(
(theme, { }) => ({
root: { backgroundColor: "#136EFA", boxShadow: "none !important", color: "#ffffff", "&:hover": { backgroundColor: "#0055D9" } },
containedSecondary: { backgroundColor: "#D62C1F", boxShadow: "none !important", "&:hover": { backgroundColor: "#D82C1F" } },
outlined: { backgroundColor: '#FFFFFF', border: "1px solid #136EFA", boxShadow: "none !important", color: "#136EFA", "&:hover": { backgroundColor: "rgba(19, 110, 250, 0.1)" } },
outlinedSecondary: { border: "1px solid #D62C1F", color: "#D62C1F", "&:hover": { border: "1px solid #D62C1F", backgroundColor: "rgba(214, 44, 31, 0.1)" } },
label: { "& p": { fontSize: "13px" } },
text: { backgroundColor: 'transparent', boxShadow: "none !important" },
textPrimary: { color: "#136EFA", "&:hover": { backgroundColor: "#E8F1FF" } },
textSecondary: { color: "#F44335", "&:hover": { backgroundColor: "rgba(244, 67, 53, 0.1)" } },
sizeSmall: { "& p": { fontSize: "12px" } },
sizeLarge: { "& p": { fontSize: "14px" } },
menuItemRoot: {},
ArrowDropDownIconRoot: { color: "#8A9099", transition: "all 0.2s !important", transform: "rotate(0)" },
ArrowDropDownIconRootOpen: { color: "#8A9099", transform: "rotate(180deg)" },
})
);
export default ButtonComponent;
\ No newline at end of file
export default ButtonComponent;
src/components/mui/MyMenu.tsx
View file @ 7ea52091
......@@ -21,7 +21,7 @@ const theme = createTheme({
MuiMenu: {
styleOverrides: {
root: {
maxHeight: "260px",
// maxHeight: "260px",
overflowY: "scroll",
},
},
......@@ -87,7 +87,9 @@ const MyMenu = (props: IMyMenuProps) => {
key={index}
>
<span>{option.label}</span>
{value === option.value && <CheckIcon />}
{value === option.value && (
<CheckIcon sx={{ marginLeft: "12px" }} />
)}
</MenuItem>
);
})}
......
src/components/mui/MyTreeView.tsx
View file @ 7ea52091
......@@ -4,74 +4,72 @@ import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import TreeItem from "@mui/lab/TreeItem";
interface TreeItemType {
id: string;
name: string;
disabled?: boolean;
subdirs?: readonly TreeItemType[];
id: string;
name: string;
disabled?: boolean;
subdirs?: readonly TreeItemType[];
}
type MyTreeViewProps = {
treeData: Array<TreeItemType>;
onNodeFocus?: (event: object, value: string) => void; // 点击某一项的回调
onNodeSelect?: (event: object, value: Array<any> | string) => void; // 点击某一项的回调
onNodeToggle?: (event: object, nodeIds: Array<any>) => void; // 点击某一项的回调
renderLabel?: (node: any) => React.ReactNode;
treeViewSx?: any;
defaultExpanded?: Array<string>;
idKey?: string;
idFunc?: (node: any) => string;
treeData: Array<TreeItemType>;
onNodeFocus?: (event: object, value: string) => void; // 点击某一项的回调
onNodeSelect?: (event: object, value: Array<any> | string) => void; // 点击某一项的回调
onNodeToggle?: (event: object, nodeIds: Array<any>) => void; // 点击某一项的回调
renderLabel?: (node: any) => React.ReactNode;
treeViewSx?: any;
defaultExpanded?: Array<string>;
idFunc?: (node: any) => string;
};
interface RenderTree {
id: string | number;
name: string;
disabled?: boolean;
subdirs?: readonly RenderTree[];
id: string | number;
name: string;
disabled?: boolean;
subdirs?: readonly RenderTree[];
}
const MyTreeView = (props: MyTreeViewProps) => {
const {
treeData = [],
renderLabel,
treeViewSx,
onNodeFocus,
onNodeSelect,
onNodeToggle,
defaultExpanded,
idKey,
idFunc,
} = props;
const {
treeData = [],
renderLabel,
treeViewSx,
onNodeFocus,
onNodeSelect,
onNodeToggle,
defaultExpanded,
idFunc,
} = props;
const renderTreeObj = (nodes: RenderTree, index: number) => (
<TreeItem
key={nodes.id || `${nodes.name}${index}`}
nodeId={String(
idFunc ? idFunc(nodes) : nodes.id || `${nodes.name}${index}`
)}
label={renderLabel === undefined ? nodes.name : renderLabel(nodes)}
disabled={nodes?.disabled ? true : false}
>
{Array.isArray(nodes.subdirs)
? nodes.subdirs.map((node, i) => renderTreeObj(node, i))
: null}
</TreeItem>
);
const renderTreeObj = (nodes: RenderTree, index: number) => (
<TreeItem
key={nodes.id || `${nodes.name}${index}`}
nodeId={String(
idFunc ? idFunc(nodes) : nodes.id || `${nodes.name}${index}`
)}
label={renderLabel === undefined ? nodes.name : renderLabel(nodes)}
disabled={nodes?.disabled ? true : false}
>
{Array.isArray(nodes.subdirs)
? nodes.subdirs.map((node, i) => renderTreeObj(node, i))
: null}
</TreeItem>
);
return (
<TreeView
defaultCollapseIcon={<ArrowRightIcon />}
defaultExpandIcon={<ArrowDropDownIcon />}
onNodeFocus={onNodeFocus}
onNodeSelect={onNodeSelect}
onNodeToggle={onNodeToggle}
defaultExpanded={defaultExpanded}
sx={{ ...treeViewSx }}
>
{treeData.map((treeItem, index) => {
return renderTreeObj(treeItem, index);
})}
</TreeView>
);
return (
<TreeView
defaultCollapseIcon={<ArrowRightIcon />}
defaultExpandIcon={<ArrowDropDownIcon />}
onNodeFocus={onNodeFocus}
onNodeSelect={onNodeSelect}
onNodeToggle={onNodeToggle}
defaultExpanded={defaultExpanded}
sx={{ ...treeViewSx }}
>
{treeData.map((treeItem, index) => {
return renderTreeObj(treeItem, index);
})}
</TreeView>
);
};
export default MyTreeView;
src/hooks/usePass.ts
View file @ 7ea52091
......@@ -75,7 +75,7 @@ const usePass = () => {
}
return false;
},
[permissionStore.allRoutes]
[permissionStore.allRoutes, currentProjectStore]
);
return isPass;
......
src/index.tsx
View file @ 7ea52091
......@@ -7,35 +7,48 @@ import { Provider } from "mobx-react";
import { stores } from "@/store/index";
import { MySnackbarProvider } from "@/components/MySnackbar";
import "@/mocks/index";
import './assets/style/public.css'
import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
import "./assets/style/public.css";
import { createTheme, ThemeProvider } from "@mui/material/styles";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
document.getElementById("root") as HTMLElement
);
const theme = createTheme({
typography: {
fontFamily: ['Roboto', 'Helvetica', 'Tahoma', 'Arial', '"PingFang SC"', '"Hiragino Sans GB"', '"Heiti SC"', '"WenQuanYi Micro Hei"', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"'].join(','),
},
palette: {
primary: { main: '#136EFA' },
secondary: { main: '#F44335' }
}
typography: {
fontFamily: [
"Roboto",
"Helvetica",
"Tahoma",
"Arial",
'"PingFang SC"',
'"Hiragino Sans GB"',
'"Heiti SC"',
'"WenQuanYi Micro Hei"',
"sans-serif",
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(","),
},
palette: {
primary: { main: "#136EFA" },
secondary: { main: "#F44335" },
},
});
root.render(
<React.StrictMode>
<ThemeProvider theme={theme}>
<Provider {...stores}>
<MySnackbarProvider
alertSx={{ boxShadow: "0px 2px 4px 0px rgb(0 0 0 / 8%)" }}
>
<MyRouter></MyRouter>
</MySnackbarProvider>
</Provider>
</ThemeProvider>
</React.StrictMode>
<React.StrictMode>
<ThemeProvider theme={theme}>
<Provider {...stores}>
<MySnackbarProvider
alertSx={{ boxShadow: "0px 2px 4px 0px rgb(0 0 0 / 8%)" }}
>
<MyRouter></MyRouter>
</MySnackbarProvider>
</Provider>
</ThemeProvider>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
......
src/utils/helper.ts
View file @ 7ea52091
......@@ -36,6 +36,6 @@ export const verifyLettersNumbersCertainChars5 = (str: string) => {
if (getTrueLength(str) > 127) {
return false;
}
let validString = /^[\u4e00-\u9fa5_0-9a-zA-Z\/-_.]+$/;
let validString = /^[\u4e00-\u9fa5_0-9a-zA-Z/-_.]+$/;
return validString.test(str);
};
\ No newline at end of file
src/views/Project/ProjectData/DeleteDialog/index.tsx
View file @ 7ea52091
import React, { useState, useImperativeHandle, useMemo } from "react";
import React, { useImperativeHandle, useMemo } from "react";
import MyDialog from "@/components/mui/MyDialog";
import { useMessage } from "@/components/MySnackbar";
......@@ -7,177 +7,177 @@ import { getDataFileDel, getDataFileDelPackage } from "@/api/project_api";
import useMyRequest from "@/hooks/useMyRequest";
const DeleteDialog = (props: any) => {
const {
path,
projectId,
fileToken,
currentOperateFile,
selectIds,
refresh,
showList,
} = props;
const Message = useMessage();
let deleteFileDialogRef: any = React.createRef();
const showDialog = () => {
deleteFileDialogRef.current.handleClickOpen();
};
useImperativeHandle(props.onRef, () => {
return {
showDialog: showDialog,
};
});
const { run: getDataFileDelRun } = useMyRequest(getDataFileDel, {
onSuccess: (res: any) => {
successDelete();
},
});
const { run: getDataFileDelPackageRun } = useMyRequest(
getDataFileDelPackage,
{
onSuccess: (res: any) => {
successDelete();
},
}
);
const successDelete = () => {
Message.success("删除成功！");
deleteFileDialogRef?.current?.handleClose();
refresh();
};
const deletePathProvidedToDataSet = useMemo(() => {
return path === "/" ? "/" : `${path}/`;
}, [path]);
const deletePathProvidedFileServer = useMemo(() => {
return path === "/" ? `${path}` : `${path}/`;
}, [path]);
// 删除
const handleSubmit = () => {
if (!currentOperateFile) {
// 批量删除
// 要删除的数据集
const datSetDeleteList = showList.filter((item: any) => {
return selectIds.indexOf(item.name) !== -1 && item.type === "dataSet";
});
// 要删除的文件夹
const folderDeleteList = showList.filter((item: any) => {
return selectIds.indexOf(item.name) !== -1 && item.type === "directory";
});
// 要删除的文件
const fileDeleteList = showList.filter((item: any) => {
return (
selectIds.indexOf(item.name) !== -1 &&
item.type !== "dataSet" &&
item.type !== "directory"
);
});
if (datSetDeleteList.length > 0) {
dataSetsDelete(datSetDeleteList);
}
if (folderDeleteList.length > 0) {
foldersDelete(folderDeleteList);
}
if (fileDeleteList.length > 0) {
filesDelete(fileDeleteList);
}
} else {
if (currentOperateFile.type === "dataSet") {
dataSetDelete();
} else if (currentOperateFile.type === "directory") {
folerDelete();
} else {
fileDelete();
}
}
};
// 删除单个数据集
const dataSetDelete = () => {
getDataFileDelRun({
projectId: projectId as string,
names: currentOperateFile.name,
path: deletePathProvidedToDataSet,
});
};
// 删除单个文件夹
const folerDelete = () => {
fileDelete();
const names = currentOperateFile.name;
dataSetInFolerDelete(names);
};
// 删除文件夹中的数据集
const dataSetInFolerDelete = (names: string) => {
getDataFileDelPackageRun({
projectId: projectId as string,
names,
path: deletePathProvidedToDataSet,
});
};
// 删除单个文件
const fileDelete = () => {
CloudEController.JobOutFileDel(
`${deletePathProvidedFileServer}${currentOperateFile.name}`,
fileToken as string,
projectId as string
)?.then((res) => {
successDelete();
});
};
// 删除多个数据集
const dataSetsDelete = (datSetDeleteList: Array<any>) => {
getDataFileDelRun({
projectId: projectId as string,
names: datSetDeleteList.map((item: any) => item.name).join(","),
path: deletePathProvidedToDataSet,
});
};
// 删除多个文件夹
const foldersDelete = (folderDeleteList: Array<any>) => {
filesDelete(folderDeleteList);
const names = folderDeleteList.map((item: any) => item.name).join(",");
dataSetInFolerDelete(names);
};
// 删除多个文件
const filesDelete = (fileDeleteList: Array<any>) => {
const deletePath = fileDeleteList
.map((item: any) => {
return `${deletePathProvidedFileServer}${item.name}`;
})
.join(" ");
CloudEController.JobOutFileDel(
deletePath,
fileToken as string,
projectId as string
)?.then((res) => {
successDelete();
});
};
const submitloading = false;
return (
<MyDialog
handleSubmit={handleSubmit}
onRef={deleteFileDialogRef}
title="提示"
submitloading={submitloading}
>
{currentOperateFile
? "确认删除该数据吗？"
: `确认删除这${selectIds.length}条数据吗？`}
</MyDialog>
);
const {
path,
projectId,
fileToken,
currentOperateFile,
selectIds,
refresh,
showList,
} = props;
const Message = useMessage();
let deleteFileDialogRef: any = React.createRef();
const showDialog = () => {
deleteFileDialogRef.current.handleClickOpen();
};
useImperativeHandle(props.onRef, () => {
return {
showDialog: showDialog,
};
});
const { run: getDataFileDelRun } = useMyRequest(getDataFileDel, {
onSuccess: (res: any) => {
successDelete();
},
});
const { run: getDataFileDelPackageRun } = useMyRequest(
getDataFileDelPackage,
{
onSuccess: (res: any) => {
successDelete();
},
}
);
const successDelete = () => {
Message.success("删除成功！");
deleteFileDialogRef?.current?.handleClose();
refresh();
};
const deletePathProvidedToDataSet = useMemo(() => {
return path === "/" ? "/" : `${path}/`;
}, [path]);
const deletePathProvidedFileServer = useMemo(() => {
return path === "/" ? `${path}` : `${path}/`;
}, [path]);
// 删除
const handleSubmit = () => {
if (!currentOperateFile) {
// 批量删除
// 要删除的数据集
const datSetDeleteList = showList.filter((item: any) => {
return selectIds.indexOf(item.name) !== -1 && item.type === "dataSet";
});
// 要删除的文件夹
const folderDeleteList = showList.filter((item: any) => {
return selectIds.indexOf(item.name) !== -1 && item.type === "directory";
});
// 要删除的文件
const fileDeleteList = showList.filter((item: any) => {
return (
selectIds.indexOf(item.name) !== -1 &&
item.type !== "dataSet" &&
item.type !== "directory"
);
});
if (datSetDeleteList.length > 0) {
dataSetsDelete(datSetDeleteList);
}
if (folderDeleteList.length > 0) {
foldersDelete(folderDeleteList);
}
if (fileDeleteList.length > 0) {
filesDelete(fileDeleteList);
}
} else {
if (currentOperateFile.type === "dataSet") {
dataSetDelete();
} else if (currentOperateFile.type === "directory") {
folerDelete();
} else {
fileDelete();
}
}
};
// 删除单个数据集
const dataSetDelete = () => {
getDataFileDelRun({
projectId: projectId as string,
names: currentOperateFile.name,
path: deletePathProvidedToDataSet,
});
};
// 删除单个文件夹
const folerDelete = () => {
fileDelete();
const names = currentOperateFile.name;
dataSetInFolerDelete(names);
};
// 删除文件夹中的数据集
const dataSetInFolerDelete = (names: string) => {
getDataFileDelPackageRun({
projectId: projectId as string,
names,
path: deletePathProvidedToDataSet,
});
};
// 删除单个文件
const fileDelete = () => {
CloudEController.JobOutFileDel(
`${deletePathProvidedFileServer}${currentOperateFile.name}`,
fileToken as string,
projectId as string
)?.then((res) => {
successDelete();
});
};
// 删除多个数据集
const dataSetsDelete = (datSetDeleteList: Array<any>) => {
getDataFileDelRun({
projectId: projectId as string,
names: datSetDeleteList.map((item: any) => item.name).join(","),
path: deletePathProvidedToDataSet,
});
};
// 删除多个文件夹
const foldersDelete = (folderDeleteList: Array<any>) => {
filesDelete(folderDeleteList);
const names = folderDeleteList.map((item: any) => item.name).join(",");
dataSetInFolerDelete(names);
};
// 删除多个文件
const filesDelete = (fileDeleteList: Array<any>) => {
const deletePath = fileDeleteList
.map((item: any) => {
return `${deletePathProvidedFileServer}${item.name}`;
})
.join(" ");
CloudEController.JobOutFileDel(
deletePath,
fileToken as string,
projectId as string
)?.then((res) => {
successDelete();
});
};
const submitloading = false;
return (
<MyDialog
handleSubmit={handleSubmit}
onRef={deleteFileDialogRef}
title="提示"
submitloading={submitloading}
>
{currentOperateFile
? "确认删除该数据吗？"
: `确认删除这${selectIds.length}条数据吗？`}
</MyDialog>
);
};
export default DeleteDialog;
src/views/Project/ProjectData/MoveFile/index.tsx
View file @ 7ea52091
import React, {
useState,
useImperativeHandle,
useCallback,
useMemo,
useEffect,
useState,
useImperativeHandle,
useCallback,
useMemo,
useEffect,
} from "react";
import style from "./index.module.css";
......@@ -19,344 +19,341 @@ import classNames from "classnames";
import _ from "lodash";
const MoveFile = (props: any) => {
const {
path,
projectId,
fileToken,
currentOperateFile,
selectIds,
refresh,
showList,
} = props;
const Message = useMessage();
const [newPath, setNewPath] = useState("/");
const [rootActive, setRootActive] = useState(true);
const [moveFileSubmitloading, setMoveFileSubmitloading] = useState(false);
const [treeData, setTreeData] = useState<any>([]);
const [renderTreeData, setRenderTreeData] = useState<any>([]);
const [moveFileDialogRef, setMoveFileDialogRef] = useState<any>(
React.createRef()
);
// 要移动的文件夹 之后用来隐藏文件夹树中同路径的文件夹
const [moveFolderPathArr, setMoveFolderPathArr] = useState<Array<string>>([]);
const {
path,
projectId,
fileToken,
currentOperateFile,
selectIds,
refresh,
showList,
} = props;
const Message = useMessage();
const [newPath, setNewPath] = useState("/");
const [rootActive, setRootActive] = useState(true);
const [moveFileSubmitloading, setMoveFileSubmitloading] = useState(false);
const [treeData, setTreeData] = useState<any>([]);
const [renderTreeData, setRenderTreeData] = useState<any>([]);
const [moveFileDialogRef] = useState<any>(React.createRef());
// 要移动的文件夹 之后用来隐藏文件夹树中同路径的文件夹
const [moveFolderPathArr, setMoveFolderPathArr] = useState<Array<string>>([]);
const getTree = useCallback(() => {
if (fileToken && projectId) {
return CloudEController.JobOutFileDirtree(
"/",
fileToken,
projectId,
false
)?.then((res) => {
if (Array.isArray(res.data)) {
let arr = res.data;
setTreeData(arr);
} else {
setTreeData([]);
}
});
}
}, [fileToken, projectId]);
const getTree = useCallback(() => {
if (fileToken && projectId) {
return CloudEController.JobOutFileDirtree(
"/",
fileToken,
projectId,
false
)?.then((res) => {
if (Array.isArray(res.data)) {
let arr = res.data;
setTreeData(arr);
} else {
setTreeData([]);
}
});
}
}, [fileToken, projectId]);
const getDisabledRepeatFolder = useCallback(
(folderTree: any, samePathFolederArr: Array<string>) => {
const arr = _.cloneDeep(folderTree);
const disabledRepeatFolder = (tree: any, repeatPath: Array<string>) => {
tree.forEach((item: any, index: number) => {
if (repeatPath.indexOf(`${item.dir.substr(1)}${item.name}`) !== -1) {
item.disabled = true;
} else {
item.disabled = false;
if (item.subdirs.length > 0) {
disabledRepeatFolder(item.subdirs, repeatPath);
}
}
});
};
disabledRepeatFolder(arr, samePathFolederArr);
return arr;
},
[]
);
const getDisabledRepeatFolder = useCallback(
(folderTree: any, samePathFolederArr: Array<string>) => {
const arr = _.cloneDeep(folderTree);
const disabledRepeatFolder = (tree: any, repeatPath: Array<string>) => {
tree.forEach((item: any, index: number) => {
if (repeatPath.indexOf(`${item.dir.substr(1)}${item.name}`) !== -1) {
item.disabled = true;
} else {
item.disabled = false;
if (item.subdirs.length > 0) {
disabledRepeatFolder(item.subdirs, repeatPath);
}
}
});
};
disabledRepeatFolder(arr, samePathFolederArr);
return arr;
},
[]
);
useEffect(() => {
const tree = getDisabledRepeatFolder(treeData, moveFolderPathArr);
setRenderTreeData(tree);
}, [moveFolderPathArr, getDisabledRepeatFolder, treeData]);
useEffect(() => {
const tree = getDisabledRepeatFolder(treeData, moveFolderPathArr);
setRenderTreeData(tree);
}, [moveFolderPathArr, getDisabledRepeatFolder, treeData]);
useEffect(() => {
let moveFolderArr: any = [];
let pathArr = [];
if (currentOperateFile) {
if (currentOperateFile.type === "directory") {
moveFolderArr = [currentOperateFile];
} else {
moveFolderArr = [];
}
} else {
moveFolderArr = showList.filter((item: any) => {
return selectIds.indexOf(item.name) !== -1 && item.type === "directory";
});
}
pathArr = moveFolderArr.map((item: any) => {
return path === "/" ? `/${item.name}` : `${path}/${item.name}`;
});
setMoveFolderPathArr(pathArr);
}, [selectIds, showList, currentOperateFile, path]);
useEffect(() => {
let moveFolderArr: any = [];
let pathArr = [];
if (currentOperateFile) {
if (currentOperateFile.type === "directory") {
moveFolderArr = [currentOperateFile];
} else {
moveFolderArr = [];
}
} else {
moveFolderArr = showList.filter((item: any) => {
return selectIds.indexOf(item.name) !== -1 && item.type === "directory";
});
}
pathArr = moveFolderArr.map((item: any) => {
return path === "/" ? `/${item.name}` : `${path}/${item.name}`;
});
setMoveFolderPathArr(pathArr);
}, [selectIds, showList, currentOperateFile, path]);
const showDialog = () => {
moveFileDialogRef.current.handleClickOpen();
getTree();
};
const showDialog = () => {
moveFileDialogRef.current.handleClickOpen();
getTree();
};
useImperativeHandle(props.onRef, () => {
return {
showDialog: showDialog,
};
});
useImperativeHandle(props.onRef, () => {
return {
showDialog: showDialog,
};
});
const { run: getDataFileMoveRun } = useMyRequest(getDataFileMove, {
onSuccess: (res: any) => {
successMove();
},
});
const { run: getDataFileMoveRun } = useMyRequest(getDataFileMove, {
onSuccess: (res: any) => {
successMove();
},
});
const { run: getDataFileMovePackageRun } = useMyRequest(
getDataFileMovePackage,
{
onSuccess: (res: any) => {
successMove();
},
}
);
const { run: getDataFileMovePackageRun } = useMyRequest(
getDataFileMovePackage,
{
onSuccess: (res: any) => {
successMove();
},
}
);
// 提供给fileserver相关接口的newpath 直接用newPath就可以了
// const newPathProvidedToFileServer = useMemo(() => {
// return newPath
// }, [newPath])
// 提供给fileserver相关接口的newpath 直接用newPath就可以了
// const newPathProvidedToFileServer = useMemo(() => {
// return newPath
// }, [newPath])
// 提供给数据集相关接口的newpath
const newPathProvidedToDataSet = useMemo(() => {
return newPath === "/" ? "/" : `${newPath}/`;
}, [newPath]);
// 提供给数据集相关接口的newpath
const newPathProvidedToDataSet = useMemo(() => {
return newPath === "/" ? "/" : `${newPath}/`;
}, [newPath]);
// 提供给fileserver相关接口的oldpath
const oldPathProvidedToFileServer = useMemo(() => {
return `${path}${path === "/" ? "" : "/"}`;
}, [path]);
// 提供给fileserver相关接口的oldpath
const oldPathProvidedToFileServer = useMemo(() => {
return `${path}${path === "/" ? "" : "/"}`;
}, [path]);
// 提供给数据集相关接口的oldpath
const oldPathProvidedToDataSet = useMemo(() => {
return path === "/" ? "/" : `${path}/`;
}, [path]);
// 提供给数据集相关接口的oldpath
const oldPathProvidedToDataSet = useMemo(() => {
return path === "/" ? "/" : `${path}/`;
}, [path]);
// 移动成功后的操作
const successMove = () => {
Message.success("移动成功！");
setMoveFileSubmitloading(false);
moveFileDialogRef?.current?.handleClose();
refresh();
};
// 移动成功后的操作
const successMove = () => {
Message.success("移动成功！");
setMoveFileSubmitloading(false);
moveFileDialogRef?.current?.handleClose();
refresh();
};
// 移动失败后的操作
const erroeMove = (error: any) => {
if (error?.response?.status === 405) {
Message.error("因目标路径存在同名文件，数据移动失败。");
} else {
Message.error("文件服务发生错误，数据移动失败。");
}
setMoveFileSubmitloading(false);
};
// 移动失败后的操作
const erroeMove = (error: any) => {
if (error?.response?.status === 405) {
Message.error("因目标路径存在同名文件，数据移动失败。");
} else {
Message.error("文件服务发生错误，数据移动失败。");
}
setMoveFileSubmitloading(false);
};
// 移动
const handleMoveFileSubmit = () => {
if (!newPath) {
Message.error("请选择移动到哪个目录");
} else if (newPath === path) {
Message.error("指定的目标路径为数据原路径，无需移动。");
} else {
setMoveFileSubmitloading(true);
if (!currentOperateFile) {
// 批量移动
// 要移动的数据集
const datSetMoveList = showList.filter((item: any) => {
return selectIds.indexOf(item.name) !== -1 && item.type === "dataSet";
});
// 要移动的文件夹
const folderMoveList = showList.filter((item: any) => {
return (
selectIds.indexOf(item.name) !== -1 && item.type === "directory"
);
});
// 要移动的文件
const fileMoveList = showList.filter((item: any) => {
return (
selectIds.indexOf(item.name) !== -1 &&
item.type !== "dataSet" &&
item.type !== "directory"
);
});
if (datSetMoveList.length > 0) {
dataSetsMove(datSetMoveList);
}
if (folderMoveList.length > 0) {
foldersMove(folderMoveList);
}
if (fileMoveList.length > 0) {
filesMove(fileMoveList)?.then((res) => {
successMove();
});
}
} else {
if (currentOperateFile.type === "dataSet") {
dataSetMove();
} else if (currentOperateFile.type === "directory") {
folerMove();
} else {
fileMove()?.then((res) => {
successMove();
});
}
}
}
};
// 移动
const handleMoveFileSubmit = () => {
if (!newPath) {
Message.error("请选择移动到哪个目录");
} else if (newPath === path) {
Message.error("指定的目标路径为数据原路径，无需移动。");
} else {
setMoveFileSubmitloading(true);
if (!currentOperateFile) {
// 批量移动
// 要移动的数据集
const datSetMoveList = showList.filter((item: any) => {
return selectIds.indexOf(item.name) !== -1 && item.type === "dataSet";
});
// 要移动的文件夹
const folderMoveList = showList.filter((item: any) => {
return (
selectIds.indexOf(item.name) !== -1 && item.type === "directory"
);
});
// 要移动的文件
const fileMoveList = showList.filter((item: any) => {
return (
selectIds.indexOf(item.name) !== -1 &&
item.type !== "dataSet" &&
item.type !== "directory"
);
});
if (datSetMoveList.length > 0) {
dataSetsMove(datSetMoveList);
}
if (folderMoveList.length > 0) {
foldersMove(folderMoveList);
}
if (fileMoveList.length > 0) {
filesMove(fileMoveList)?.then((res) => {
successMove();
});
}
} else {
if (currentOperateFile.type === "dataSet") {
dataSetMove();
} else if (currentOperateFile.type === "directory") {
folerMove();
} else {
fileMove()?.then((res) => {
successMove();
});
}
}
}
};
// 单文件移动
const fileMove = () => {
const oldPathToFileServer = `${oldPathProvidedToFileServer}${currentOperateFile.name}`;
return CloudEController.JobFileMove(
newPath,
oldPathToFileServer,
"",
fileToken,
projectId
);
};
// 单文件移动
const fileMove = () => {
const oldPathToFileServer = `${oldPathProvidedToFileServer}${currentOperateFile.name}`;
return CloudEController.JobFileMove(
newPath,
oldPathToFileServer,
"",
fileToken,
projectId
);
};
// 多文件移动
const filesMove = (fileMoveList: Array<any>) => {
const oldPaths = fileMoveList.map((item: any) => {
return `${oldPathProvidedToFileServer}${item.name}`;
});
return CloudEController.JobFileBatchMove(
newPath,
oldPaths,
"",
fileToken,
projectId
);
};
// 多文件移动
const filesMove = (fileMoveList: Array<any>) => {
const oldPaths = fileMoveList.map((item: any) => {
return `${oldPathProvidedToFileServer}${item.name}`;
});
return CloudEController.JobFileBatchMove(
newPath,
oldPaths,
"",
fileToken,
projectId
);
};
// 单文件夹移动
const folerMove = () => {
fileMove()
?.then((res) => {
const names = currentOperateFile.name;
dataSetInFolerMove(names);
})
.catch((error) => {
console.log(error);
erroeMove(error);
});
};
// 单文件夹移动
const folerMove = () => {
fileMove()
?.then((res) => {
const names = currentOperateFile.name;
dataSetInFolerMove(names);
})
.catch((error) => {
console.log(error);
erroeMove(error);
});
};
// 移动文件夹中的数据集
const dataSetInFolerMove = (names: string) => {
getDataFileMovePackageRun({
projectId: projectId as string,
names,
spath: oldPathProvidedToDataSet,
dpath: newPathProvidedToDataSet,
});
};
// 移动文件夹中的数据集
const dataSetInFolerMove = (names: string) => {
getDataFileMovePackageRun({
projectId: projectId as string,
names,
spath: oldPathProvidedToDataSet,
dpath: newPathProvidedToDataSet,
});
};
// 多文件夹移动
const foldersMove = (folderMoveList: Array<any>) => {
filesMove(folderMoveList)
?.then((res) => {
const names = folderMoveList.map((item: any) => item.name).join(",");
dataSetInFolerMove(names);
})
.catch((error) => {
console.log(error);
erroeMove(error);
});
};
// 多文件夹移动
const foldersMove = (folderMoveList: Array<any>) => {
filesMove(folderMoveList)
?.then((res) => {
const names = folderMoveList.map((item: any) => item.name).join(",");
dataSetInFolerMove(names);
})
.catch((error) => {
console.log(error);
erroeMove(error);
});
};
// 单数据集移动
const dataSetMove = () => {
getDataFileMoveRun({
projectId: projectId as string,
names: currentOperateFile.name,
spath: oldPathProvidedToDataSet,
dpath: newPathProvidedToDataSet,
});
};
// 单数据集移动
const dataSetMove = () => {
getDataFileMoveRun({
projectId: projectId as string,
names: currentOperateFile.name,
spath: oldPathProvidedToDataSet,
dpath: newPathProvidedToDataSet,
});
};
// 多数据集移动
const dataSetsMove = (datSetMoveList: Array<any>) => {
getDataFileMoveRun({
projectId: projectId as string,
names: datSetMoveList.map((item: any) => item.name).join(","),
spath: oldPathProvidedToFileServer,
dpath: newPath === "/" ? "/" : `${newPath}/`,
});
};
// 多数据集移动
const dataSetsMove = (datSetMoveList: Array<any>) => {
getDataFileMoveRun({
projectId: projectId as string,
names: datSetMoveList.map((item: any) => item.name).join(","),
spath: oldPathProvidedToFileServer,
dpath: newPath === "/" ? "/" : `${newPath}/`,
});
};
const renderLabel = (node: any) => {
return (
<span className={style.treeLabel}>
<img className={style.labelFolderIcon} src={folderIcon} alt="" />
<span className={style.treeLabelText}>{node.name}</span>
</span>
);
};
const renderLabel = (node: any) => {
return (
<span className={style.treeLabel}>
<img className={style.labelFolderIcon} src={folderIcon} alt="" />
<span className={style.treeLabelText}>{node.name}</span>
</span>
);
};
const onNodeSelect = (a: any, b: any) => {
setNewPath(b);
setRootActive(false);
};
const onNodeSelect = (a: any, b: any) => {
setNewPath(b);
setRootActive(false);
};
// 给路径去掉第一个'/'然后结尾加上文件名 方便后面直接使用
const idFunc = (item: any) => {
return `${item.dir.substr(1)}${item.name}`;
};
// 给路径去掉第一个'/'然后结尾加上文件名 方便后面直接使用
const idFunc = (item: any) => {
return `${item.dir.substr(1)}${item.name}`;
};
const handleRoot = () => {
setNewPath("/");
setRootActive(true);
};
const handleRoot = () => {
setNewPath("/");
setRootActive(true);
};
return (
<MyDialog
handleSubmit={handleMoveFileSubmit}
onRef={moveFileDialogRef}
title="移动至"
submitloading={moveFileSubmitloading}
>
<div
className={classNames({
[style.rootTitle]: true,
[style.rootTitleActive]: rootActive,
})}
onClick={handleRoot}
>
<img className={style.bigFolderIcon} src={bigFolderIcon} alt="" />
ProjectData
</div>
<MyTreeView
// treeData={treeData}
treeData={renderTreeData}
renderLabel={renderLabel}
onNodeSelect={onNodeSelect}
idFunc={idFunc}
treeViewSx={{
width: 400,
overflow: "hidden",
}}
></MyTreeView>
</MyDialog>
);
return (
<MyDialog
handleSubmit={handleMoveFileSubmit}
onRef={moveFileDialogRef}
title="移动至"
submitloading={moveFileSubmitloading}
>
<div
className={classNames({
[style.rootTitle]: true,
[style.rootTitleActive]: rootActive,
})}
onClick={handleRoot}
>
<img className={style.bigFolderIcon} src={bigFolderIcon} alt="" />
ProjectData
</div>
<MyTreeView
treeData={renderTreeData}
renderLabel={renderLabel}
onNodeSelect={onNodeSelect}
idFunc={idFunc}
treeViewSx={{
width: 400,
overflow: "hidden",
}}
></MyTreeView>
</MyDialog>
);
};
export default MoveFile;
src/views/Project/ProjectData/index.tsx
View file @ 7ea52091
......@@ -28,726 +28,724 @@ import { useLocation } from "react-router-dom";
import { getDataFind, getDataFileSearch } from "@/api/project_api";
const theme = createTheme({
palette: {
neutral: {
main: "#1370FF",
contrastText: "#fff",
},
},
palette: {
neutral: {
main: "#1370FF",
contrastText: "#fff",
},
},
});
declare module "@mui/material/styles" {
interface Palette {
neutral: Palette["primary"];
}
interface Palette {
neutral: Palette["primary"];
}
interface PaletteOptions {
neutral?: PaletteOptions["primary"];
}
interface PaletteOptions {
neutral?: PaletteOptions["primary"];
}
}
declare module "@mui/material/Button" {
interface ButtonPropsColorOverrides {
neutral: true;
}
interface ButtonPropsColorOverrides {
neutral: true;
}
}
const ProjectData = observer(() => {
const isPass = usePass();
const { currentProjectStore } = useStores();
const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
const projectId = toJS(currentProjectStore.currentProjectInfo.id);
/** 路由信息 */
const location = useLocation();
// 当前文件路径
const [path, setPath] = useState<String>("/");
const [tableLoadding, setTableLoadding] = useState(false);
// 防止用户连续点击文件夹造成路径显示错误
const [debounce, setDebounce] = useState(false);
// 点击操作列中的按钮 会设置当前点击的文件
const [currentOperateFile, setCurrentOperateFile] = useState<any>(null);
// 1文件 2数据集
const [activeTab, setActiveTab] = useState(1);
// 复选框选中的文件名称数组
const [selectIds, setSelectIds] = useState<Array<string>>([]);
const [keyWord, setKeyWord] = useState("");
// 文件夹、文件列表
const [list, setList] = useState<any>([]);
// 数据集列表 不带文件
const [dataSetList, setDataSetList] = useState<any>([]);
let tableRef: any = React.createRef();
// 是否显示复选框 用户搜索文件后不显示 其他情况显示
const [showCheckBox, setShowCheckBox] = useState<boolean>(true);
// 切换文件、数据集
const handleChangeListType = (e: number) => {
if (isPass("PROJECT_DATA_TYPECHANAGE")) {
setActiveTab(e);
setSelectIds([]);
tableRef?.current?.initSelectedFunc([]);
}
};
useEffect(() => {
const locationInfo: any = location?.state;
setPath(locationInfo?.pathName || "/");
}, [location]);
// 列表展示的数据
const showList = useMemo(() => {
if (activeTab === 1) {
// 做排序 文件夹在前
let folderList: any = [];
let fileList: any = [];
list.forEach((item: any) => {
if (item.type === "directory") {
folderList.push(item);
} else {
fileList.push(item);
}
});
return [...folderList, ...fileList];
} else {
const folderList = list.filter((item: any) => {
return item.type === "directory";
});
return [...folderList, ...dataSetList];
}
}, [list, dataSetList, activeTab]);
// 是否全是文件夹
const isAllDirectory = useMemo(() => {
return showList.every((li: any) => {
return li.type === "directory";
});
}, [showList]);
// 全（文件、文件夹、数据集）列表
const allList = useMemo(() => {
return [...list, ...dataSetList];
}, [list, dataSetList]);
// 全局搜索数据集
const { run: getDataFileSearchRun } = useMyRequest(getDataFileSearch, {
onSuccess: (res: any) => {
const dataSetList = res.data.map((item: any) => {
return {
...item,
type: "dataSet",
};
});
setDataSetList(dataSetList);
setSelectIds([]);
setDebounce(false);
tableRef?.current?.initSelectedFunc([]);
setShowCheckBox(false);
},
});
// 获取某路径下的数据集
const { run: getDataFindRun } = useMyRequest(getDataFind, {
onSuccess: (res: any) => {
const dataSetList = res.data.map((item: any) => {
return {
...item,
type: "dataSet",
};
});
setDataSetList(dataSetList);
setSelectIds([]);
setDebounce(false);
tableRef?.current?.initSelectedFunc([]);
setShowCheckBox(true);
},
});
// 获取某路径下的数据集
const getDataSetList = useCallback(() => {
if (keyWord) {
return;
} else if (projectId) {
return getDataFindRun({
projectId: projectId as string,
path: path === "/" ? "/" : `${path}/`,
});
}
}, [keyWord, path, projectId, getDataFindRun]);
// 全局搜索数据集
const getDataSetListSearch = useCallback(() => {
if (keyWord && projectId) {
return getDataFileSearchRun({
projectId: projectId as string,
name: keyWord,
});
} else {
return getDataSetList();
}
}, [keyWord, projectId, getDataFileSearchRun, getDataSetList]);
useEffect(() => {
getDataSetList();
}, [getDataSetList]);
const getList = useCallback(() => {
if (keyWord) {
return;
} else if (fileToken && projectId) {
setTableLoadding(true);
return CloudEController.JobOutFileList(
path,
fileToken,
projectId,
false
)?.then((res) => {
setTableLoadding(false);
if (Array.isArray(res.data)) {
setList(res.data);
} else {
setList([]);
}
setSelectIds([]);
setDebounce(false);
setShowCheckBox(true);
});
}
}, [fileToken, path, projectId, keyWord]);
useEffect(() => {
getList();
}, [getList]);
// 全局搜索文件列表
const searchFileList = useCallback(() => {
if (!keyWord) {
getList();
} else {
if (fileToken && projectId) {
setTableLoadding(true);
setPath("/");
return CloudEController.JobSearchFileList(
keyWord,
"/",
fileToken,
projectId,
false
)?.then((res) => {
setTableLoadding(false);
if (Array.isArray(res.data)) {
setList(res.data);
} else {
setList([]);
}
setSelectIds([]);
setDebounce(false);
setShowCheckBox(false);
});
}
}
}, [fileToken, projectId, keyWord, getList]);
// 刷新
const handleRefresh = () => {
if (isPass("PROJECT_DATA_REFRESH", "USER")) {
tableRef?.current?.initSelectedFunc([]);
setSelectIds([]);
if (keyWord) {
searchFileList();
getDataSetListSearch();
} else {
getList();
getDataSetList();
}
}
};
// 搜索值改变
const handleKeyWordChange = (e: any) => {
if (e.target.value.length > 30) {
return;
}
setKeyWord(e.target.value);
};
// 按回车搜索
const handleKeyWordChangeKeyUp = (e: any) => {
if (e.keyCode === 13) {
searchFileList();
getDataSetListSearch();
}
};
// todo name sort
// 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 },
{
id: "mtime",
numeric: false,
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) => {
if (debounce) {
return;
} else {
setDebounce(true);
if (path === "/") {
setPath(`/${item.name}`);
} else {
setPath(`${path}/${item.name}`);
}
}
};
// table配置
const renderName = (item: any) => {
if (item.type === "directory") {
return (
<span
className={classnames({
[style.folderIconBox]: true,
[style.folderPointer]: true,
})}
onClick={() => handleViewFolders(item)}
>
<img className={style.folderIcon} src={folderIcon} alt="" />
{item.name}
</span>
);
} else if (item.type === "dataSet") {
return (
<span className={style.folderIconBox}>
<img className={style.folderIcon} src={dataSetIcon} alt="" />
{item.name}
</span>
);
} else {
return (
<span className={style.folderIconBox}>
<img className={style.folderIcon} src={fileIcon} alt="" />
{item.name}
</span>
);
}
};
// table配置
const renderSize = (item: any) => {
if (item.type === "dataSet") {
return `${item.size}条`;
}
return `${item.size ? storageUnitFromB(Number(item.size)) : "-"}`;
};
// table配置
const renderMtime = (item: any) => {
return String(moment(item.mtime).format("YYYY-MM-DD HH:mm:ss"));
};
// table配置
const renderButtons = (item: any) => {
return (
<span style={{ whiteSpace: "nowrap" }}>
{!isAllDirectory && (
<Button
sx={{
position: "relative",
left: "-4px",
minWidth: "10px",
marginRight: "10px",
visibility:
item.type !== "dataSet" && item.type !== "directory"
? "visible"
: "hidden",
}}
variant="text"
size="small"
disabled={selectIds.length > 0 || !isPass("PROJECT_DATA_DOWNLOAD")}
onClick={() => hanleDownloadFile(item)}
>
下载
</Button>
)}
<Button
sx={{
position: "relative",
left: "-4px",
minWidth: "10px",
marginRight: "10px",
}}
variant="text"
size="small"
onClick={() => hanleShowMoveFileDialog(item)}
disabled={
selectIds.length > 0 || !isPass("PROJECT_DATA_MOVE", "USER")
}
>
移动至
</Button>
<Button
sx={{
position: "relative",
left: "-4px",
minWidth: "10px",
marginRight: "10px",
}}
variant="text"
size="small"
color="error"
onClick={() => hanleShowDeleteDialogRef(item)}
disabled={
selectIds.length > 0 || !isPass("PROJECT_DATA_DELETE", "USER")
}
>
删除
</Button>
</span>
);
};
// 文件上传
let UpLoaderFileRef: any = React.createRef();
const hanleShowUpLoaderFileDialog = () => {
UpLoaderFileRef.current.showDialog();
};
// 新增文件
let addFolderRef: any = React.createRef();
const hanleShowAddFolderDialog = () => {
addFolderRef.current.showDialog();
};
// 下载文件
const hanleDownloadFile = (item: any) => {
console.log(item);
const downloadPath =
path === "/" ? `/${item.name}` : `${path}/${item.name}`;
console.log(downloadPath);
CloudEController.JobFileDownload(
downloadPath,
fileToken as string,
projectId as string
);
};
// 文件移动
let moveFileRef: any = React.createRef();
const hanleShowMoveFileDialog = (item: any) => {
setCurrentOperateFile(item);
moveFileRef.current.showDialog();
};
// 删除弹窗
let deleteDialogRef: any = React.createRef();
const hanleShowDeleteDialogRef = (item: any) => {
setCurrentOperateFile(item);
deleteDialogRef.current.showDialog();
};
// 批量移动
const handleBatchMove = () => {
setCurrentOperateFile(null);
moveFileRef.current.showDialog();
};
// 批量删除
const handleBatchDelete = () => {
setCurrentOperateFile(null);
deleteDialogRef.current.showDialog();
};
// 前端展示的文件路径
const showPath = useMemo(() => {
if (path === "/") {
return <span className={style.showPathSpan}>ProjectData</span>;
} else {
const pathArr = path.split("/");
if (pathArr.length <= 4) {
return pathArr.map((item, index) => {
return (
<span
key={index}
onClick={() =>
setPath(
pathArr.slice(0, index + 1).join("/") === ""
? "/"
: pathArr.slice(0, index + 1).join("/")
)
}
className={classnames({
[style.showPathSpan]: true,
[style.showPathSpanActive]: index === pathArr.length - 1,
})}
>
{index === 0 ? "ProjectData" : item}{" "}
{index === pathArr.length - 1 ? null : (
<i className={style.showPathI}>{">"}</i>
)}
</span>
);
});
} else {
return pathArr.map((item, index) => {
return (
<span
key={index}
onClick={() => {
if (index === 1) {
return;
}
setPath(
pathArr.slice(0, index + 1).join("/") === ""
? "/"
: pathArr.slice(0, index + 1).join("/")
);
}}
className={classnames({
[style.showPathSpan]: true,
[style.showPathSpanActive]: index === pathArr.length - 1,
})}
>
{index === 0
? "ProjectData"
: index > pathArr.length - 4
? item
: ""}
{/* && index > pathArr.length - 4 */}
{index === pathArr.length - 1 ||
(index <= pathArr.length - 4 && index > 0) ? null : (
<i className={style.showPathI}>{">"}</i>
)}
{index === 1 && "..."}
{index === 1 && <i className={style.showPathI}>{">"}</i>}
</span>
);
});
}
}
}, [path]);
if (currentProjectStore.currentProjectInfo.name) {
return (
<ThemeProvider theme={theme}>
<div className={style.projectData}>
<div className={style.projectDataStickyTop}>
<div className={style.projectDataTitle}>项目数据</div>
<div className={style.projectDataHeader}>
<div className={style.projectDataButtonAndSearch}>
<div className={style.projectDataButtonBox}>
<Button
color="neutral"
variant="contained"
size="small"
style={{ marginRight: "12px" }}
onClick={hanleShowUpLoaderFileDialog}
disabled={
selectIds.length !== 0 ||
!isPass("PROJECT_DATA_UPLOAD", "USER")
}
>
上传文件
</Button>
<Button
color="neutral"
variant="outlined"
size="small"
onClick={hanleShowAddFolderDialog}
disabled={
selectIds.length !== 0 ||
!isPass("PROJECT_DATA_ADDDIR", "USER")
}
>
新建文件夹
</Button>
</div>
<div className={style.projectDataSearch}>
<InputBase
className={style.searchInput}
placeholder="输入关键词搜索"
inputProps={{ "aria-label": "输入关键词搜索" }}
value={keyWord}
onChange={handleKeyWordChange}
style={{ width: "280px", fontSize: "14px" }}
onKeyUp={handleKeyWordChangeKeyUp}
/>
<IconButton
type="submit"
className={style.searchButton}
aria-label="search"
size="small"
style={{ padding: "4px" }}
onClick={handleRefresh}
>
<SearchIcon
className={style.searchIcon}
style={{ color: "#999" }}
/>
</IconButton>
</div>
</div>
<div className={style.projectDataPathAndTabs}>
<div className={style.projectDataPath}>{showPath}</div>
<div className={style.projectDataTabsAndBtton}>
<div className={style.projectDataTabs}>
<div
className={classnames({
[style.projectDataTab]: true,
[style.projectDataTabActive]: activeTab === 1,
})}
// onClick={() => setActiveTab(1)}
onClick={() => handleChangeListType(1)}
>
文件
</div>
<div
className={classnames({
[style.projectDataTab]: true,
[style.projectDataTabActive]: activeTab !== 1,
})}
// onClick={() => setActiveTab(2)}
onClick={() => handleChangeListType(2)}
>
数据集
</div>
</div>
<IconButton
aria-label="refreshIcon"
size="small"
onClick={handleRefresh}
disabled={!isPass("PROJECT_DATA_REFRESH", "USER")}
>
<RefreshIcon />
</IconButton>
</div>
</div>
</div>
<Table
footer={false}
rowHover={true}
onRef={tableRef}
nopadding={true}
stickyheader={true}
load={tableLoadding}
initSelected={selectIds}
headCells={versionsHeadCells}
rowsPerPage={"99"}
checkboxData={(e: any) => {
hanldeCheckbox(e);
}}
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),
}))}
></Table>
{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}>
<Button
color="error"
variant="outlined"
size="small"
style={{ marginRight: "12px" }}
onClick={handleBatchDelete}
disabled={!isPass("PROJECT_DATA_DELETE", "USER")}
>
批量删除（{selectIds.length}）
</Button>
<Button
color="neutral"
variant="contained"
size="small"
style={{ marginRight: "24px" }}
onClick={handleBatchMove}
disabled={!isPass("PROJECT_DATA_MOVE", "USER")}
>
批量移动（{selectIds.length}）
</Button>
</div>
)}
<DeleteDialog
onRef={deleteDialogRef}
path={path}
fileToken={fileToken}
projectId={projectId}
currentOperateFile={currentOperateFile}
selectIds={selectIds}
refresh={handleRefresh}
showList={showList}
></DeleteDialog>
<UpLoaderFile
onRef={UpLoaderFileRef}
path={path}
list={allList}
></UpLoaderFile>
<AddFolder
onRef={addFolderRef}
list={allList}
path={path}
refresh={handleRefresh}
fileToken={fileToken}
projectId={projectId}
></AddFolder>
<MoveFile
onRef={moveFileRef}
path={path}
fileToken={fileToken}
projectId={projectId}
currentOperateFile={currentOperateFile}
selectIds={selectIds}
refresh={handleRefresh}
showList={showList}
></MoveFile>
</div>
</ThemeProvider>
);
} else {
return <NoProject />;
}
const isPass = usePass();
const { currentProjectStore } = useStores();
const fileToken = toJS(currentProjectStore.currentProjectInfo.filetoken);
const projectId = toJS(currentProjectStore.currentProjectInfo.id);
/** 路由信息 */
const location = useLocation();
// 当前文件路径
const [path, setPath] = useState<String>("/");
const [tableLoadding, setTableLoadding] = useState(false);
// 防止用户连续点击文件夹造成路径显示错误
const [debounce, setDebounce] = useState(false);
// 点击操作列中的按钮 会设置当前点击的文件
const [currentOperateFile, setCurrentOperateFile] = useState<any>(null);
// 1文件 2数据集
const [activeTab, setActiveTab] = useState(1);
// 复选框选中的文件名称数组
const [selectIds, setSelectIds] = useState<Array<string>>([]);
const [keyWord, setKeyWord] = useState("");
// 文件夹、文件列表
const [list, setList] = useState<any>([]);
// 数据集列表 不带文件
const [dataSetList, setDataSetList] = useState<any>([]);
let tableRef: any = React.createRef();
// 是否显示复选框 用户搜索文件后不显示 其他情况显示
const [showCheckBox, setShowCheckBox] = useState<boolean>(true);
// 切换文件、数据集
const handleChangeListType = (e: number) => {
if (isPass("PROJECT_DATA_TYPECHANAGE")) {
setActiveTab(e);
setSelectIds([]);
tableRef?.current?.initSelectedFunc([]);
}
};
useEffect(() => {
const locationInfo: any = location?.state;
setPath(locationInfo?.pathName || "/");
}, [location]);
// 列表展示的数据
const showList = useMemo(() => {
if (activeTab === 1) {
// 做排序 文件夹在前
let folderList: any = [];
let fileList: any = [];
list.forEach((item: any) => {
if (item.type === "directory") {
folderList.push(item);
} else {
fileList.push(item);
}
});
return [...folderList, ...fileList];
} else {
const folderList = list.filter((item: any) => {
return item.type === "directory";
});
return [...folderList, ...dataSetList];
}
}, [list, dataSetList, activeTab]);
// 是否全是文件夹
const isAllDirectory = useMemo(() => {
return showList.every((li: any) => {
return li.type === "directory";
});
}, [showList]);
// 全（文件、文件夹、数据集）列表
const allList = useMemo(() => {
return [...list, ...dataSetList];
}, [list, dataSetList]);
// 全局搜索数据集
const { run: getDataFileSearchRun } = useMyRequest(getDataFileSearch, {
onSuccess: (res: any) => {
const dataSetList = res.data.map((item: any) => {
return {
...item,
type: "dataSet",
};
});
setDataSetList(dataSetList);
setSelectIds([]);
setDebounce(false);
tableRef?.current?.initSelectedFunc([]);
setShowCheckBox(false);
},
});
// 获取某路径下的数据集
const { run: getDataFindRun } = useMyRequest(getDataFind, {
onSuccess: (res: any) => {
const dataSetList = res.data.map((item: any) => {
return {
...item,
type: "dataSet",
};
});
setDataSetList(dataSetList);
setSelectIds([]);
setDebounce(false);
tableRef?.current?.initSelectedFunc([]);
setShowCheckBox(true);
},
});
// 获取某路径下的数据集
const getDataSetList = useCallback(() => {
if (keyWord) {
return;
} else if (projectId) {
return getDataFindRun({
projectId: projectId as string,
path: path === "/" ? "/" : `${path}/`,
});
}
}, [keyWord, path, projectId, getDataFindRun]);
// 全局搜索数据集
const getDataSetListSearch = useCallback(() => {
if (keyWord && projectId) {
return getDataFileSearchRun({
projectId: projectId as string,
name: keyWord,
});
} else {
return getDataSetList();
}
}, [keyWord, projectId, getDataFileSearchRun, getDataSetList]);
useEffect(() => {
getDataSetList();
}, [getDataSetList]);
const getList = useCallback(() => {
if (keyWord) {
return;
} else if (fileToken && projectId) {
setTableLoadding(true);
return CloudEController.JobOutFileList(
path,
fileToken,
projectId,
false
)?.then((res) => {
setTableLoadding(false);
if (Array.isArray(res.data)) {
setList(res.data);
} else {
setList([]);
}
setSelectIds([]);
setDebounce(false);
setShowCheckBox(true);
});
}
}, [fileToken, path, projectId, keyWord]);
useEffect(() => {
getList();
}, [getList]);
// 全局搜索文件列表
const searchFileList = useCallback(() => {
if (!keyWord) {
getList();
} else {
if (fileToken && projectId) {
setTableLoadding(true);
setPath("/");
return CloudEController.JobSearchFileList(
keyWord,
"/",
fileToken,
projectId,
false
)?.then((res) => {
setTableLoadding(false);
if (Array.isArray(res.data)) {
setList(res.data);
} else {
setList([]);
}
setSelectIds([]);
setDebounce(false);
setShowCheckBox(false);
});
}
}
}, [fileToken, projectId, keyWord, getList]);
// 刷新
const handleRefresh = () => {
if (isPass("PROJECT_DATA_REFRESH", "USER")) {
tableRef?.current?.initSelectedFunc([]);
setSelectIds([]);
if (keyWord) {
searchFileList();
getDataSetListSearch();
} else {
getList();
getDataSetList();
}
}
};
// 搜索值改变
const handleKeyWordChange = (e: any) => {
if (e.target.value.length > 30) {
return;
}
setKeyWord(e.target.value);
};
// 按回车搜索
const handleKeyWordChangeKeyUp = (e: any) => {
if (e.keyCode === 13) {
searchFileList();
getDataSetListSearch();
}
};
// todo name sort
// 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 },
{
id: "mtime",
numeric: false,
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) => {
if (debounce) {
return;
} else {
setDebounce(true);
if (path === "/") {
setPath(`/${item.name}`);
} else {
setPath(`${path}/${item.name}`);
}
}
};
// table配置
const renderName = (item: any) => {
if (item.type === "directory") {
return (
<span
className={classnames({
[style.folderIconBox]: true,
[style.folderPointer]: true,
})}
onClick={() => handleViewFolders(item)}
>
<img className={style.folderIcon} src={folderIcon} alt="" />
{item.name}
</span>
);
} else if (item.type === "dataSet") {
return (
<span className={style.folderIconBox}>
<img className={style.folderIcon} src={dataSetIcon} alt="" />
{item.name}
</span>
);
} else {
return (
<span className={style.folderIconBox}>
<img className={style.folderIcon} src={fileIcon} alt="" />
{item.name}
</span>
);
}
};
// table配置
const renderSize = (item: any) => {
if (item.type === "dataSet") {
return `${item.size}条`;
}
return `${item.size ? storageUnitFromB(Number(item.size)) : "-"}`;
};
// table配置
const renderMtime = (item: any) => {
return String(moment(item.mtime).format("YYYY-MM-DD HH:mm:ss"));
};
// table配置
const renderButtons = (item: any) => {
return (
<span style={{ whiteSpace: "nowrap" }}>
{!isAllDirectory && (
<Button
sx={{
position: "relative",
left: "-4px",
minWidth: "10px",
marginRight: "10px",
visibility:
item.type !== "dataSet" && item.type !== "directory"
? "visible"
: "hidden",
}}
variant="text"
size="small"
disabled={selectIds.length > 0 || !isPass("PROJECT_DATA_DOWNLOAD")}
onClick={() => hanleDownloadFile(item)}
>
下载
</Button>
)}
<Button
sx={{
position: "relative",
left: "-4px",
minWidth: "10px",
marginRight: "10px",
}}
variant="text"
size="small"
onClick={() => hanleShowMoveFileDialog(item)}
disabled={
selectIds.length > 0 || !isPass("PROJECT_DATA_MOVE", "USER")
}
>
移动至
</Button>
<Button
sx={{
position: "relative",
left: "-4px",
minWidth: "10px",
marginRight: "10px",
}}
variant="text"
size="small"
color="error"
onClick={() => hanleShowDeleteDialogRef(item)}
disabled={
selectIds.length > 0 || !isPass("PROJECT_DATA_DELETE", "USER")
}
>
删除
</Button>
</span>
);
};
// 文件上传
let UpLoaderFileRef: any = React.createRef();
const hanleShowUpLoaderFileDialog = () => {
UpLoaderFileRef.current.showDialog();
};
// 新增文件
let addFolderRef: any = React.createRef();
const hanleShowAddFolderDialog = () => {
addFolderRef.current.showDialog();
};
// 下载文件
const hanleDownloadFile = (item: any) => {
const downloadPath =
path === "/" ? `/${item.name}` : `${path}/${item.name}`;
CloudEController.JobFileDownload(
downloadPath,
fileToken as string,
projectId as string
);
};
// 文件移动
let moveFileRef: any = React.createRef();
const hanleShowMoveFileDialog = (item: any) => {
setCurrentOperateFile(item);
moveFileRef.current.showDialog();
};
// 删除弹窗
let deleteDialogRef: any = React.createRef();
const hanleShowDeleteDialogRef = (item: any) => {
setCurrentOperateFile(item);
deleteDialogRef.current.showDialog();
};
// 批量移动
const handleBatchMove = () => {
setCurrentOperateFile(null);
moveFileRef.current.showDialog();
};
// 批量删除
const handleBatchDelete = () => {
setCurrentOperateFile(null);
deleteDialogRef.current.showDialog();
};
// 前端展示的文件路径
const showPath = useMemo(() => {
if (path === "/") {
return <span className={style.showPathSpan}>ProjectData</span>;
} else {
const pathArr = path.split("/");
if (pathArr.length <= 4) {
return pathArr.map((item, index) => {
return (
<span
key={index}
onClick={() =>
setPath(
pathArr.slice(0, index + 1).join("/") === ""
? "/"
: pathArr.slice(0, index + 1).join("/")
)
}
className={classnames({
[style.showPathSpan]: true,
[style.showPathSpanActive]: index === pathArr.length - 1,
})}
>
{index === 0 ? "ProjectData" : item}{" "}
{index === pathArr.length - 1 ? null : (
<i className={style.showPathI}>{">"}</i>
)}
</span>
);
});
} else {
return pathArr.map((item, index) => {
return (
<span
key={index}
onClick={() => {
if (index === 1) {
return;
}
setPath(
pathArr.slice(0, index + 1).join("/") === ""
? "/"
: pathArr.slice(0, index + 1).join("/")
);
}}
className={classnames({
[style.showPathSpan]: true,
[style.showPathSpanActive]: index === pathArr.length - 1,
})}
>
{index === 0
? "ProjectData"
: index > pathArr.length - 4
? item
: ""}
{/* && index > pathArr.length - 4 */}
{index === pathArr.length - 1 ||
(index <= pathArr.length - 4 && index > 0) ? null : (
<i className={style.showPathI}>{">"}</i>
)}
{index === 1 && "..."}
{index === 1 && <i className={style.showPathI}>{">"}</i>}
</span>
);
});
}
}
}, [path]);
if (currentProjectStore.currentProjectInfo.name) {
return (
<ThemeProvider theme={theme}>
<div className={style.projectData}>
<div className={style.projectDataStickyTop}>
<div className={style.projectDataTitle}>项目数据</div>
<div className={style.projectDataHeader}>
<div className={style.projectDataButtonAndSearch}>
<div className={style.projectDataButtonBox}>
<Button
color="neutral"
variant="contained"
size="small"
style={{ marginRight: "12px" }}
onClick={hanleShowUpLoaderFileDialog}
disabled={
selectIds.length !== 0 ||
!isPass("PROJECT_DATA_UPLOAD", "USER")
}
>
上传文件
</Button>
<Button
color="neutral"
variant="outlined"
size="small"
onClick={hanleShowAddFolderDialog}
disabled={
selectIds.length !== 0 ||
!isPass("PROJECT_DATA_ADDDIR", "USER")
}
>
新建文件夹
</Button>
</div>
<div className={style.projectDataSearch}>
<InputBase
className={style.searchInput}
placeholder="输入关键词搜索"
inputProps={{ "aria-label": "输入关键词搜索" }}
value={keyWord}
onChange={handleKeyWordChange}
style={{ width: "280px", fontSize: "14px" }}
onKeyUp={handleKeyWordChangeKeyUp}
/>
<IconButton
type="submit"
className={style.searchButton}
aria-label="search"
size="small"
style={{ padding: "4px" }}
onClick={handleRefresh}
>
<SearchIcon
className={style.searchIcon}
style={{ color: "#999" }}
/>
</IconButton>
</div>
</div>
<div className={style.projectDataPathAndTabs}>
<div className={style.projectDataPath}>{showPath}</div>
<div className={style.projectDataTabsAndBtton}>
<div className={style.projectDataTabs}>
<div
className={classnames({
[style.projectDataTab]: true,
[style.projectDataTabActive]: activeTab === 1,
})}
// onClick={() => setActiveTab(1)}
onClick={() => handleChangeListType(1)}
>
文件
</div>
<div
className={classnames({
[style.projectDataTab]: true,
[style.projectDataTabActive]: activeTab !== 1,
})}
// onClick={() => setActiveTab(2)}
onClick={() => handleChangeListType(2)}
>
数据集
</div>
</div>
<IconButton
aria-label="refreshIcon"
size="small"
onClick={handleRefresh}
disabled={!isPass("PROJECT_DATA_REFRESH", "USER")}
>
<RefreshIcon />
</IconButton>
</div>
</div>
</div>
<Table
footer={false}
rowHover={true}
onRef={tableRef}
nopadding={true}
stickyheader={true}
load={tableLoadding}
initSelected={selectIds}
headCells={versionsHeadCells}
rowsPerPage={"99"}
checkboxData={(e: any) => {
hanldeCheckbox(e);
}}
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),
}))}
></Table>
{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}>
<Button
color="error"
variant="outlined"
size="small"
style={{ marginRight: "12px" }}
onClick={handleBatchDelete}
disabled={!isPass("PROJECT_DATA_DELETE", "USER")}
>
批量删除（{selectIds.length}）
</Button>
<Button
color="neutral"
variant="contained"
size="small"
style={{ marginRight: "24px" }}
onClick={handleBatchMove}
disabled={!isPass("PROJECT_DATA_MOVE", "USER")}
>
批量移动（{selectIds.length}）
</Button>
</div>
)}
<DeleteDialog
onRef={deleteDialogRef}
path={path}
fileToken={fileToken}
projectId={projectId}
currentOperateFile={currentOperateFile}
selectIds={selectIds}
refresh={handleRefresh}
showList={showList}
></DeleteDialog>
<UpLoaderFile
onRef={UpLoaderFileRef}
path={path}
list={allList}
></UpLoaderFile>
<AddFolder
onRef={addFolderRef}
list={allList}
path={path}
refresh={handleRefresh}
fileToken={fileToken}
projectId={projectId}
></AddFolder>
<MoveFile
onRef={moveFileRef}
path={path}
fileToken={fileToken}
projectId={projectId}
currentOperateFile={currentOperateFile}
selectIds={selectIds}
refresh={handleRefresh}
showList={showList}
></MoveFile>
</div>
</ThemeProvider>
);
} else {
return <NoProject />;
}
});
export default ProjectData;
src/views/Project/ProjectJobDetail/index.tsx
View file @ 7ea52091
......@@ -164,7 +164,7 @@ const ProjectSubmitWork = observer(() => {
};
const getDataSetSize = async (item: any, index: number) => {
let path = item.path.slice(13);
let path = item.path.slice(12);
const lastIndex = path.lastIndexOf("/");
if (lastIndex === -1) {
path = "/";
......@@ -184,7 +184,7 @@ const ProjectSubmitWork = observer(() => {
};
const getFileSize = (item: any, index: number) => {
let path = item.path.slice(13);
let path = item.path.slice(12);
const lastIndex = path.lastIndexOf("/");
if (lastIndex === -1) {
path = "/";
......
src/views/Project/ProjectSetting/ProjectMembers/components/ChangePermission.tsx
View file @ 7ea52091
......@@ -7,7 +7,7 @@
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
// import Dialog from "@/components/Material.Ui/Dialog";
import { memo, useEffect, useMemo, useState } from "react";
import { memo, useEffect, useState } from "react";
import { observer } from "mobx-react-lite";
import { toJS } from "mobx";
......@@ -19,91 +19,91 @@ import { IDialogInfo } from "../interface";
import { useMessage } from "@/components/MySnackbar";
interface IProps {
setPermissionDialog: (val: IDialogInfo) => void;
permissionDialog: IDialogInfo;
getTableList: () => void;
setPermissionDialog: (val: IDialogInfo) => void;
permissionDialog: IDialogInfo;
getTableList: () => void;
}
const ChangePermission = observer((props: IProps) => {
const { permissionDialog, setPermissionDialog, getTableList } = props;
const { permissionDialog, setPermissionDialog, getTableList } = props;
const { currentProjectStore } = useStores();
const Message = useMessage();
const http = useHttp();
const { currentProjectStore } = useStores();
const Message = useMessage();
const http = useHttp();
const [selectOptions, setSelectOptions] = useState<IOption[]>([]);
const [selectValue, setSelectValue] = useState<IOption | undefined>();
const [selectOptions, setSelectOptions] = useState<IOption[]>([]);
const [selectValue, setSelectValue] = useState<IOption | undefined>();
useEffect(() => {
if (permissionDialog?.isShow) {
http.get<IResponse<any>>("/cpp/project/listroles").then((res) => {
const arr = [];
const { data } = res;
for (const key in data) {
arr.push({
label: String(data[key]),
value: key,
});
}
setSelectOptions(arr);
});
}
}, [http, permissionDialog]);
useEffect(() => {
if (permissionDialog?.isShow) {
http.get<IResponse<any>>("/cpp/project/listroles").then((res) => {
const arr = [];
const { data } = res;
for (const key in data) {
arr.push({
label: String(data[key]),
value: key,
});
}
setSelectOptions(arr);
});
}
}, [http, permissionDialog]);
const changePermission = (val: any) => {
setSelectValue(val);
};
const onClose = () => {
setPermissionDialog({ isShow: false, username: "" });
};
const onConfirm = () => {
const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
http
.put<IResponse<any>>(
`/cpp/project/updateuserrole?id=${projectInfo?.id || ""}&username=${
permissionDialog.username
}&role=${selectValue?.value}`
)
.then((res) => {
const { errorCode } = res;
if (errorCode === 0) {
Message.success("更改成功！");
getTableList();
setPermissionDialog({ isShow: false, username: "" });
}
});
};
const changePermission = (val: any) => {
setSelectValue(val);
};
const onClose = () => {
setPermissionDialog({ isShow: false, username: "" });
};
const onConfirm = () => {
const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
http
.put<IResponse<any>>(
`/cpp/project/updateuserrole?id=${projectInfo?.id || ""}&username=${
permissionDialog.username
}&role=${selectValue?.value}`
)
.then((res) => {
const { errorCode } = res;
if (errorCode === 0) {
Message.success("更改成功！");
getTableList();
setPermissionDialog({ isShow: false, username: "" });
}
});
};
useEffect(() => {
const defaultValue = selectOptions.filter(
(every) => every.value === permissionDialog?.projectRole
);
if (defaultValue?.length) {
setSelectValue(defaultValue[0]);
} else {
setSelectValue({ value: "VIEWER", label: "查看者" });
}
}, [permissionDialog, selectOptions]);
return (
<>
<Dialog
open={permissionDialog?.isShow}
onClose={onClose}
onConfirm={onConfirm}
title="更改权限"
>
<div style={{ marginTop: 12 }}>
<MySelect
title="项目权限"
value={selectValue}
onChange={changePermission}
options={selectOptions}
size="small"
/>
</div>
</Dialog>
</>
);
useEffect(() => {
const defaultValue = selectOptions.filter(
(every) => every.value === permissionDialog?.projectRole
);
if (defaultValue?.length) {
setSelectValue(defaultValue[0]);
} else {
setSelectValue({ value: "VIEWER", label: "查看者" });
}
}, [permissionDialog, selectOptions]);
return (
<>
<Dialog
open={permissionDialog?.isShow}
onClose={onClose}
onConfirm={onConfirm}
title="更改权限"
>
<div style={{ marginTop: 12 }}>
<MySelect
title="项目权限"
value={selectValue}
onChange={changePermission}
options={selectOptions}
size="small"
/>
</div>
</Dialog>
</>
);
});
export default memo(ChangePermission);
src/views/Project/ProjectSetting/ProjectMembers/index.tsx
View file @ 7ea52091
......@@ -24,7 +24,6 @@ import styles from "./index.module.css";
import { IDialogInfo } from "./interface";
import { toJS } from "mobx";
import { useStores } from "@/store";
import { isProjectOwner } from "@/utils/util";
import { observer } from "mobx-react";
const ProjectMembers = observer(() => {
......@@ -104,7 +103,6 @@ const ProjectMembers = observer(() => {
.then((res) => {
const { data = {} } = res;
setTableData(data?.members || []);
console.log(data?.projectRole, data?.projectRole);
setProjectRole(data?.projectRole || "");
});
}, [currentProjectStore?.currentProjectInfo, http]);
......
src/views/Project/ProjectSetting/index.tsx
View file @ 7ea52091
......@@ -6,7 +6,7 @@
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { memo, useState, useMemo } from "react";
import { memo, useMemo } from "react";
import { Box } from "@mui/system";
import { useStores } from "@/store/index";
......@@ -18,39 +18,39 @@ import BaseInfo from "./BaseInfo";
import Tabs from "@/components/mui/Tabs";
const ProjectSetting = observer(() => {
const { currentProjectStore } = useStores();
const tabList = useMemo(() => {
return [
{
label: "项目成员",
value: "projectMember",
component: <ProjectMembers />,
},
{
label: "基础信息",
value: "baseInfo",
component: <BaseInfo />,
},
];
}, []);
const { currentProjectStore } = useStores();
const tabList = useMemo(() => {
return [
{
label: "项目成员",
value: "projectMember",
component: <ProjectMembers />,
},
{
label: "基础信息",
value: "baseInfo",
component: <BaseInfo />,
},
];
}, []);
if (currentProjectStore.currentProjectInfo.name) {
return (
<div style={{ padding: 24 }}>
<div style={{ display: "flex", alignItems: "center" }}>
<img src={projectImg} alt="项目logo" />
<span style={{ marginLeft: 12 }}>
{currentProjectStore.currentProjectInfo.name}
</span>
</div>
<Box sx={{ width: "100%", typography: "body1" }}>
<Tabs tabList={tabList} />
</Box>
</div>
);
} else {
return <NoProject />;
}
if (currentProjectStore.currentProjectInfo.name) {
return (
<div style={{ padding: 24 }}>
<div style={{ display: "flex", alignItems: "center" }}>
<img src={projectImg} alt="项目logo" />
<span style={{ marginLeft: 12 }}>
{currentProjectStore.currentProjectInfo.name}
</span>
</div>
<Box sx={{ width: "100%", typography: "body1" }}>
<Tabs tabList={tabList} />
</Box>
</div>
);
} else {
return <NoProject />;
}
});
export default memo(ProjectSetting);
src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx
View file @ 7ea52091
import { ITemplateConfig, IRenderTasks, IRenderTask } from "../interface";
import { ITemplateConfig, IRenderTasks } from "../interface";
import styles from "./index.module.css";
import MyInput from "@/components/mui/MyInput";
import Tooltip from "@mui/material/Tooltip";
import classnames from "classnames";
import { useState, useMemo, useImperativeHandle, useCallback } from "react";
import { useState, useMemo, useImperativeHandle } from "react";
import FileSelect from "@/components/FileSelect";
import moment from "moment";
import MySelect, { optionsTransform } from "../components/MySelect";
import MyCheckBox from "@/components/mui/MyCheckBox";
import MyRadio from "@/components/mui/MyRadio";
import _ from "lodash";
import { getCheckResult } from "../util";
import fileSelectIcon from "@/assets/project/fileSelect.svg";
import questionMark from "@/assets/project/questionMark.svg";
......
src/views/Project/ProjectSubmitWork/index.tsx
View file @ 7ea52091
......@@ -26,11 +26,12 @@ import fullScreen from "@/assets/project/fullScreen.svg";
import partialScreen from "@/assets/project/partialScreen.svg";
import { useMessage } from "@/components/MySnackbar";
import { useStores } from "@/store";
import { observer } from "mobx-react-lite";
import MyPopconfirm from "@/components/mui/MyPopconfirm";
import styles from "./index.module.css";
const ProjectSubmitWork = () => {
const ProjectSubmitWork = observer(() => {
const Message = useMessage();
const { currentProjectStore } = useStores();
const projectId = toJS(currentProjectStore.currentProjectInfo.id);
......@@ -291,6 +292,6 @@ const ProjectSubmitWork = () => {
/>
</div>
);
};
});
export default ProjectSubmitWork;
src/views/Project/ProjectSubmitWork/interface.ts
View file @ 7ea52091
......@@ -70,7 +70,6 @@ export type IDomType =
| "dataset"
| "file"
| "input"
| "file"
| "select"
| "multipleselect"
| "radio"
......
src/views/Project/ProjectWorkbench/workbenchList/components/simpleDialog.tsx
View file @ 7ea52091
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import styles from "../index.module.css";
import { memo } from "react";
import { Box, Typography } from "@mui/material";
import Button from "@mui/material/Button";
import Dialog from "@/components/mui/Dialog";
const SimpleDialog = (props: any) => {
const { openDialog, closeDialog, onConfirm, text, title } = props;
const { openDialog, closeDialog, onConfirm, text, title } = props;
return (
< >
<Dialog
open={openDialog}
onClose={closeDialog}
onConfirm={onConfirm}
title={title}
>
<Box>
<Typography sx={{ fontSize: '14px', fontWeight: '400' }}>{text}</Typography>
</Box>
</Dialog>
</>
);
return (
<>
<Dialog
open={openDialog}
onClose={closeDialog}
onConfirm={onConfirm}
title={title}
>
<Box>
<Typography sx={{ fontSize: "14px", fontWeight: "400" }}>
{text}
</Typography>
</Box>
</Dialog>
</>
);
};
export default memo(SimpleDialog);
src/views/Project/ProjectWorkbench/workbenchList/index.tsx
View file @ 7ea52091
......@@ -7,18 +7,20 @@
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { memo, useCallback, useEffect, useState } from "react";
import _ from "lodash";
import { useNavigate } from "react-router-dom";
import { Box, Typography } from "@mui/material";
import OutlinedInput from "@mui/material/OutlinedInput";
import SearchIcon from "@mui/icons-material/Search";
import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
import { TablePagination } from '@mui/material';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
import SimpleDialog from "./components/simpleDialog"
import LinearProgress, {
linearProgressClasses,
} from "@mui/material/LinearProgress";
import { TablePagination } from "@mui/material";
import TextField from "@mui/material/TextField";
import MenuItem from "@mui/material/MenuItem";
import SimpleDialog from "./components/simpleDialog";
import { useStores } from "@/store";
import { observer } from "mobx-react-lite";
import useMyRequest from "@/hooks/useMyRequest";
import ActionsComponent from "../../../../components/Material.Ui/Table/ActionsComponent"
import runTime from '../../../../assets/project/runTime.svg'
......@@ -32,38 +34,38 @@ import jobDel from '../../../../assets/project/jobDel.svg'
import noData from '../../../../assets/project/noTemplate.svg'
import onload from '../../../../assets/project/onload.svg'
import {
getWorkflowJobList,
deleteWorkflowJob,
cancelWorkflowJob
getWorkflowJobList,
deleteWorkflowJob,
cancelWorkflowJob,
} from "@/api/workbench_api";
import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
import usePass from "@/hooks/usePass";
import styles from "./index.module.css";
import { toJS } from "mobx";
const currencies = [
{
value: 'ALL',
label: '全部',
},
{
value: 'RUNNING',
label: '正在运行',
},
{
value: 'SUCCEEDED',
label: '运行成功',
},
{
value: 'FAILED',
label: '运行失败',
},
{
value: 'ABORTED',
label: '运行终止',
},
{
value: "ALL",
label: "全部",
},
{
value: "RUNNING",
label: "正在运行",
},
{
value: "SUCCEEDED",
label: "运行成功",
},
{
value: "FAILED",
label: "运行失败",
},
{
value: "ABORTED",
label: "运行终止",
},
];
let timer: string | number | NodeJS.Timeout | null | undefined = null
......@@ -134,27 +136,37 @@ const ProjectMembers = observer(() => {
setJobName(data.length > 30 ? data.slice(0, 30) : data);
}
const handleChange = (event: any) => {
setCurrency(event.target.value);
};
/** 关闭弹窗 */
const closeDialog = () => {
setOpenDialog(false);
};
/** 弹窗确认 */
const onConfirm = () => {
if (dialogType === "del") {
delWorkflowJob({
id: jobData
})
} else {
cancelWorkflowJobInfo({
jobid: jobData
})
}
};
// 删除作业
const { run: delWorkflowJob } = useMyRequest(deleteWorkflowJob, {
onSuccess: (result: any) => {
setOpenDialog(false);
getWorkflowJobInfo({
projectId: projectId as string,
page: page,
size: size,
name: jobName,
state: currency === "ALL" ? "" : currency,
});
},
});
// 删除作业
const { run: cancelWorkflowJobInfo } = useMyRequest(cancelWorkflowJob, {
onSuccess: (result: any) => {
setOpenDialog(false);
getWorkflowJobInfo({
projectId: projectId as string,
page: page,
size: size,
name: jobName,
state: currency === "ALL" ? "" : currency,
});
},
});
const searchChange = (data: any) => {
setJobName(data.length > 30 ? data.slice(0, 30) : data);
};
useEffect(() => {
getWorkflowJobInfo({
......@@ -166,85 +178,76 @@ const ProjectMembers = observer(() => {
});
}, [projectId, getWorkflowJobInfo]);
const handleChangePage = (event: any, newPage: any) => {
setPage(newPage)
getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
page: newPage,
size: size,
name: jobName,
state: currency === 'ALL' ? "" : currency
});
}
const handleChangeRowsPerPage = (event: any) => {
setRowsPerPage(event.target.value)
setSize(event.target.value)
getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
page: page,
size: event.target.value,
name: jobName,
state: currency === 'ALL' ? "" : currency
});
}
useEffect(() => {
setTimeout(() => {
getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
page: page,
size: size,
name: jobName,
state: currency === 'ALL' ? "" : currency
});
}, 300)
}, [jobName, currency]);
const renderStatusIcon = (data: string) => {
switch (data) {
case "RUNNING":
return jobRun
case "ABORTED":
return jobCadence
case "FAILED":
return jobFail
case "SUCCEEDED":
return jobSue
default:
return jobCadence
}
}
const renderStatusText = (data: string) => {
switch (data) {
case "RUNNING":
return '正在运行'
case "ABORTED":
return '运行终止'
case "FAILED":
return '运行失败'
case "SUCCEEDED":
return '运行成功'
default:
return '未知'
}
}
const renderProgress = (data: any) => {
switch (data) {
case "RUNNING":
return '#1370FF'
case "ABORTED":
return '#C2C6CC'
case "FAILED":
return '#FF4E4E'
case "SUCCEEDED":
return '#0DD09B'
default:
return '#C2C6CC'
}
}
/** 关闭弹窗 */
const closeDialog = () => {
setOpenDialog(false);
};
/** 弹窗确认 */
const onConfirm = () => {
if (dialogType === "del") {
delWorkflowJob({
id: jobData,
});
} else {
cancelWorkflowJobInfo({
jobid: jobData,
});
}
};
useEffect(() => {
getWorkflowJobInfo({
projectId: projectId as string,
page: page,
size: size,
name: jobName,
state: currency === "ALL" ? "" : currency,
});
}, [
currentProjectStore.currentProjectInfo.id,
getWorkflowJobInfo,
projectId,
page,
size,
jobName,
currency,
]);
const handleChangePage = (event: any, newPage: any) => {
setPage(newPage);
getWorkflowJobInfo({
projectId: projectId as string,
page: newPage,
size: size,
name: jobName,
state: currency === "ALL" ? "" : currency,
});
};
const handleChangeRowsPerPage = (event: any) => {
setRowsPerPage(event.target.value);
setSize(event.target.value);
getWorkflowJobInfo({
projectId: projectId as string,
page: page,
size: event.target.value,
name: jobName,
state: currency === "ALL" ? "" : currency,
});
};
useEffect(() => {
setTimeout(() => {
getWorkflowJobInfo({
projectId: projectId as string,
page: page,
size: size,
name: jobName,
state: currency === "ALL" ? "" : currency,
});
}, 300);
}, [jobName, currency, projectId, getWorkflowJobInfo, page, size]);
/** 点击每一行 */
const rowClick = useCallback(
......@@ -256,8 +259,20 @@ const ProjectMembers = observer(() => {
[navigate],
);
return (
<Box className={styles.headerBox}>
const renderStatusText = (data: string) => {
switch (data) {
case "RUNNING":
return "正在运行";
case "ABORTED":
return "运行终止";
case "FAILED":
return "运行失败";
case "SUCCEEDED":
return "运行成功";
default:
return "未知";
}
};
<Box className={styles.tabHeader}>
......@@ -314,7 +329,19 @@ const ProjectMembers = observer(() => {
<img alt="" src={onload} />
</Box>
</Box>
return (
<Box className={styles.headerBox}>
<Box className={styles.tabHeader}>
<OutlinedInput
onChange={(e: any) => {
searchChange(e.target.value);
}}
value={jobName}
placeholder="输入关键词搜索"
size="small"
sx={{ width: 340, height: 32 }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
/>
<Box className={styles.body}>
{
......@@ -403,25 +430,36 @@ const ProjectMembers = observer(() => {
}
</Box>
<TablePagination
rowsPerPageOptions={[5, 10, 20, 50]}
labelRowsPerPage={'每页行数：'}
ActionsComponent={ActionsComponent}
component="div"
count={count || jobList.length}
rowsPerPage={rowsPerPage || 10}
page={page}
onPageChange={handleChangePage}//
onRowsPerPageChange={handleChangeRowsPerPage}//
/>
<SimpleDialog
text={dialogType === "del" ? '任务被删除后将无法恢复，确认继续吗？' : '正在运行的任务终止后将无法重新运行，确认继续吗？'}
title={dialogType === "del" ? '删除任务' : '终止任务'}
openDialog={openDialog}
closeDialog={closeDialog}
onConfirm={onConfirm}
/>
<Box className={styles.tabBoxJobOperate}>
<img
alt=""
src={item.state === "RUNNING" ? jobStop : jobDel}
style={{ cursor: "pointer" }}
onClick={(event) => {
event.stopPropagation();
event.nativeEvent.stopImmediatePropagation();
setJobData(item.id);
setOpenDialog(true);
setDialogType(item.state === "RUNNING" ? "stop" : "del");
}}
/>
</Box>
</Box>
);
})}
</Box>
<TablePagination
rowsPerPageOptions={[5, 10, 20, 50]}
labelRowsPerPage={"每页行数："}
ActionsComponent={ActionsComponent}
component="div"
count={count || jobList.length}
rowsPerPage={rowsPerPage || 10}
page={page}
onPageChange={handleChangePage} //
onRowsPerPageChange={handleChangeRowsPerPage} //
/>
</Box >
);
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.tsx
View file @ 7ea52091
import { memo, useEffect, useState, useMemo } from "react";
import { useEffect, useState, useMemo } from "react";
import style from "./index.module.css";
import classNames from "classnames";
import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
......@@ -44,9 +44,7 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
const productId = toJS(currentProjectStore.currentProductInfo.id);
const { setShowAddTemplate, getTemplateInfo } = props;
const handleSearch = (value: string) => {
console.log(value);
};
const handleSearch = (value: string) => {};
/** 可增加模板列表 */
const [addTemplateList, setAddTemplateList] = useState([]);
......@@ -83,7 +81,6 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
});
const handleAddTemplate = () => {
console.log("handleAddTemplate");
addTemplate({
projectId: projectId as string,
workflowSpecIds: selectTemplateData,
......@@ -93,7 +90,6 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
// 添加工作流模板-获取模板列表
const { run: getAddTemplateList } = useMyRequest(getAddWorkbenchTemplate, {
onSuccess: (result: any) => {
console.log(result);
setAddTemplateList(result.data);
// setOpenAddTemplate(true);
},
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/simpleDialog.tsx
View file @ 7ea52091
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import styles from "../index.module.css";
import { memo } from "react";
import { Box, Typography } from "@mui/material";
import Button from "@mui/material/Button";
import Dialog from "@/components/mui/Dialog";
const SimpleDialog = (props: any) => {
const { openDialog, closeDialog, onConfirm, text, title } = props;
const { openDialog, closeDialog, onConfirm, text, title } = props;
return (
< >
<Dialog
open={openDialog}
onClose={closeDialog}
onConfirm={onConfirm}
title={title}
>
<Box>
<Typography sx={{ fontSize: '14px', fontWeight: '400' }}>{text}</Typography>
</Box>
</Dialog>
</>
);
return (
<>
<Dialog
open={openDialog}
onClose={closeDialog}
onConfirm={onConfirm}
title={title}
>
<Box>
<Typography sx={{ fontSize: "14px", fontWeight: "400" }}>
{text}
</Typography>
</Box>
</Dialog>
</>
);
};
export default memo(SimpleDialog);
src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx
View file @ 7ea52091
......@@ -6,7 +6,7 @@
* @FilePath: /bkunyun/src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx
* @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 } from "react";
import styles from "../index.module.css";
import { Box, Typography } from "@mui/material";
import Button from "@/components/mui/Button";
......@@ -14,82 +14,82 @@ import usePass from "@/hooks/usePass";
import { useNavigate } from "react-router-dom";
const TemplateBox = (props: any) => {
const info = props.data;
const isPass = usePass();
const navigate = useNavigate();
const info = props.data;
const isPass = usePass();
const navigate = useNavigate();
const addTemplateBlock = useCallback(
(id: string) => {
navigate(`/product/cadd/projectSubmitWork`, {
state: { id },
});
},
[navigate]
);
const addTemplateBlock = useCallback(
(id: string) => {
navigate(`/product/cadd/projectSubmitWork`, {
state: { id },
});
},
[navigate]
);
return (
<Box className={styles.templateBlock}>
<Box>
<Typography
sx={{
fontSize: "14px",
fontWeight: "600",
color: "#1E2633",
marginBottom: "4px",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{info.title}
</Typography>
<Box sx={{ display: "flex", marginBottom: "8px" }}>
<Typography
sx={{
fontSize: "12px",
fontWeight: "400",
color: "#1370FF",
marginRight: "24px",
}}
>
版本：{info.version}
</Typography>
<Typography
sx={{ fontSize: "12px", fontWeight: "400", color: "#1370FF" }}
>
更新时间：{info.updateTime}
</Typography>
</Box>
<Typography className={styles.templateDescText}>
{info.description}
</Typography>
</Box>
<Box
sx={{
display: "flex",
justifyContent: "end",
}}
>
{isPass("PROJECT_WORKBENCH_FLOES_USE", "MANAGER") && (
<Button
size={"small"}
text={"删除模版"}
click={() => {
props.startDialog(info.id);
}}
style={{ backgroundColor: "#F0F2F5", color: "#565C66" }}
/>
)}
{isPass("PROJECT_WORKBENCH_FLOES_USE", "USER") && (
<Button
size={"small"}
text={"使用模版"}
click={() => addTemplateBlock(info.id)}
style={{ marginLeft: "12px" }}
/>
)}
</Box>
</Box>
);
return (
<Box className={styles.templateBlock}>
<Box>
<Typography
sx={{
fontSize: "14px",
fontWeight: "600",
color: "#1E2633",
marginBottom: "4px",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{info.title}
</Typography>
<Box sx={{ display: "flex", marginBottom: "8px" }}>
<Typography
sx={{
fontSize: "12px",
fontWeight: "400",
color: "#1370FF",
marginRight: "24px",
}}
>
版本：{info.version}
</Typography>
<Typography
sx={{ fontSize: "12px", fontWeight: "400", color: "#1370FF" }}
>
更新时间：{info.updateTime}
</Typography>
</Box>
<Typography className={styles.templateDescText}>
{info.description}
</Typography>
</Box>
<Box
sx={{
display: "flex",
justifyContent: "end",
}}
>
{isPass("PROJECT_WORKBENCH_FLOES_USE", "MANAGER") && (
<Button
size={"small"}
text={"删除模版"}
click={() => {
props.startDialog(info.id);
}}
style={{ backgroundColor: "#F0F2F5", color: "#565C66" }}
/>
)}
{isPass("PROJECT_WORKBENCH_FLOES_USE", "USER") && (
<Button
size={"small"}
text={"使用模版"}
click={() => addTemplateBlock(info.id)}
style={{ marginLeft: "12px" }}
/>
)}
</Box>
</Box>
);
};
export default memo(TemplateBox);
src/views/Project/ProjectWorkbench/workbenchTemplate/index.module.css
View file @ 7ea52091
.headerBox {
margin-bottom: 20px;
margin-bottom: 20px;
}
.removeItemBox {
color: #ff4e4e;
margin-left: 32px;
cursor: pointer;
color: #ff4e4e;
margin-left: 32px;
cursor: pointer;
}
.tabBox {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.templateBlock {
width: 21.4876%;
height: 160px;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #EBEDF0;
padding: 16px 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 8px;
width: 21.4876%;
height: 160px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #ebedf0;
padding: 16px 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 8px;
}
.addTemplateMask {
background: rgb(56, 56, 56, 0.7);
position: absolute;
z-index: 800;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
display: flex;
align-items: end;
flex-direction: column;
background: rgb(56, 56, 56, 0.7);
position: absolute;
z-index: 800;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
flex-direction: column;
}
.addTemplateBlock {
background: #FFFFFF;
z-index: 900;
border-radius: 16px 0px 0px 0px;
height: 100%;
width: 100%;
background: #ffffff;
z-index: 900;
border-radius: 16px 0px 0px 0px;
height: 100%;
width: 100%;
}
.addTemplateBox {
width: 16.8751%;
height: 114px;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #F0F2F5;
padding: 16px 20px;
margin: 8px;
cursor: pointer;
width: 16.8751%;
height: 114px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #f0f2f5;
padding: 16px 20px;
margin: 8px;
cursor: pointer;
}
.addTemplateBox:hover {
box-shadow: 6px 8px 22px 0px rgba(0, 24, 57, 0.08);
box-shadow: 6px 8px 22px 0px rgba(0, 24, 57, 0.08);
}
.templateDescText {
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
display: -webkit-box;
height: 54px;
font-size: 12px !important;
font-weight: 400 !important;
color: #8A9099 !important;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
display: -webkit-box;
height: 54px;
font-size: 12px !important;
font-weight: 400 !important;
color: #8a9099 !important;
}
.addNewTemplate {
width: 380px;
height: 194px;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #EBEDF0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
cursor: pointer;
}
\ No newline at end of file
width: 380px;
height: 194px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #ebedf0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
cursor: pointer;
}
src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx
View file @ 7ea52091
......@@ -12,21 +12,17 @@ import OutlinedInput from "@mui/material/OutlinedInput";
import SearchIcon from "@mui/icons-material/Search";
import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
// import Button from "@mui/material/Button";
import Add from "@mui/icons-material/Add";
import Button from "@/components/mui/Button";
import useMyRequest from "@/hooks/useMyRequest";
import TemplateBox from "./components/templateBox";
import SimpleDialog from "./components/simpleDialog";
// import AddTemplate from "./components/addTemplate";
import AddTemplate from "./components/AddTemplate/index";
import noData from "../../../../assets/project/noTemplate.svg";
import {
getWorkbenchTemplate,
deleteWorkbenchTemplate,
getAddWorkbenchTemplate,
addWorkbenchTemplate,
} from "@/api/workbench_api";
import usePass from "@/hooks/usePass";
import { useStores } from "@/store";
......@@ -47,12 +43,6 @@ const ProjectMembers = observer(() => {
const [templateId, setTemplateId] = useState("");
/** 简单弹窗（删除模板） */
const [openDialog, setOpenDialog] = useState(false);
/** 增加模板 */
const [openAddTemplate, setOpenAddTemplate] = useState(false);
/** 可增加模板列表 */
const [addTemplateList, setAddTemplateList] = useState([]);
/** 已选择增加的模板列表 */
const [selectTemplateData, setSelectTemplateData] = useState<string[]>([]);
const [showAddTemplate, setShowAddTemplate] = useState(false);
// 获取模板列表
......@@ -73,35 +63,12 @@ const ProjectMembers = observer(() => {
},
});
// 添加工作流模板-获取模板列表
const { run: getAddTemplateList } = useMyRequest(getAddWorkbenchTemplate, {
onSuccess: (result: any) => {
setAddTemplateList(result.data);
setOpenAddTemplate(true);
},
});
// 项目管理员-添加工作流模板-提交
const { run: addTemplate } = useMyRequest(addWorkbenchTemplate, {
onSuccess: (result: any) => {
setOpenAddTemplate(false);
getTemplateInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
});
setSelectTemplateData([]);
},
});
useEffect(() => {
getTemplateInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
});
}, [currentProjectStore.currentProjectInfo.id, getTemplateInfo]);
useEffect(() => {
console.log("projectIdData: ", projectIdData);
}, [projectIdData]);
/** 删除模板 */
const deleteTemplate = () => {
delTemplate({
......@@ -124,44 +91,6 @@ const ProjectMembers = observer(() => {
/** 增加模板 */
const addTemplateBlock = () => {
setShowAddTemplate(true);
// getAddTemplateList({
// projectId: currentProjectStore.currentProjectInfo.id as string,
// productId: "cadd",
// });
};
/** 关闭增加模板 */
const closeAddTemplateBlock = () => {
setOpenAddTemplate(false);
setSelectTemplateData([]);
};
/** 增加模板操作 */
const addTemplateCallback = () => {
addTemplate({
projectId: currentProjectStore.currentProjectInfo.id as string,
workflowSpecIds: selectTemplateData,
});
};
/** 搜索模板 */
const searchTemplateNameCallback = (data: any) => {
getAddTemplateList({
projectId: currentProjectStore.currentProjectInfo.id as string,
productId: "cadd",
title: data,
});
};
const templateSelectCallback = (data: string) => {
let list: string[] = [...selectTemplateData];
if (selectTemplateData.filter((e) => e === data).length > 0) {
list = list.filter((e) => e !== data);
setSelectTemplateData(list);
} else {
list.push(data);
setSelectTemplateData(list);
}
};
const searchChange = (data: any) => {
......@@ -171,11 +100,11 @@ const ProjectMembers = observer(() => {
useEffect(() => {
setTimeout(() => {
getTemplateInfo({
projectId: currentProjectStore.currentProjectInfo.id as string,
projectId: projectIdData as string,
title: templateName,
});
}, 300);
}, [templateName]);
}, [templateName, getTemplateInfo, projectIdData]);
return (
<Box className={styles.headerBox}>
......@@ -256,16 +185,6 @@ const ProjectMembers = observer(() => {
</Box>
)}
{/* <AddTemplate
openAddTemplate={openAddTemplate}
closeAddTemplateBlock={closeAddTemplateBlock}
addTemplateList={addTemplateList}
templateSelectCallback={templateSelectCallback}
selectTemplateData={selectTemplateData}
addTemplateCallback={addTemplateCallback}
searchTemplateNameCallback={searchTemplateNameCallback}
/> */}
{showAddTemplate && (
<AddTemplate
setShowAddTemplate={setShowAddTemplate}
......
src/views/Project/components/Flow/index.tsx
View file @ 7ea52091
......@@ -155,7 +155,7 @@ const Flow = (props: IProps) => {
const lineArr: IEdge[] = [];
tasks?.length &&
tasks.forEach((item) => {
lineArr.push(...item.edges);
item.edges?.length && lineArr.push(...item.edges);
});
/** 所有的输入节点ID */
const isInput = lineArr?.some((item) => item.target === id);
......@@ -223,6 +223,7 @@ const Flow = (props: IProps) => {
const val: any = [];
tasks?.length &&
tasks.forEach((item) => {
console.log(item, "item");
val.push({
id: item.id,
type: item.type === "BATCH" ? "batchNode" : "flowNode",
......@@ -249,7 +250,10 @@ const Flow = (props: IProps) => {
padding: isFlowNode(item.id) ? "20px" : "12px 20px",
},
},
position: { x: Number(item.position.x), y: Number(item.position.y) },
position: {
x: Number(item.position?.x) || 0,
y: Number(item.position?.y) || 0,
},
...(item.type === "BATCH" ? { style: { zIndex: -1 } } : {}),
...(item.parentNode ? { parentNode: item.parentNode } : {}),
...(item.type === "BATCH" ? { extent: "parent" } : {}),
......@@ -270,13 +274,14 @@ const Flow = (props: IProps) => {
const val: ILine[] = [];
tasks?.length &&
tasks.forEach((item) => {
item.edges.forEach((every) => {
const newLine = {
...every,
batchId: item.parentNode ? item.parentNode : item.id,
};
val.push(newLine);
}, []);
item?.edges?.length &&
item?.edges.forEach((every) => {
const newLine = {
...every,
batchId: item.parentNode ? item.parentNode : item.id,
};
val.push(newLine);
}, []);
});
return val.map((item: ILine) => {
const newSelectId = selectedNodeId ? selectedNodeId : inSideNodeId;
......@@ -340,7 +345,7 @@ const Flow = (props: IProps) => {
<ReactFlow
nodes={nodes}
edges={edges}
fitView={flowType === "default" ? false : true}
fitView={flowType === "default" ? true : false}
proOptions={{ hideAttribution: true, account: "" }}
nodeTypes={nodeTypes}
onPaneClick={handlePaneClick}
......
src/views/WorkFlowEdit/components/OperatorList/index.tsx
View file @ 7ea52091
......@@ -6,14 +6,12 @@ import { observer } from "mobx-react-lite";
import { toJS } from "mobx";
import cloneDeep from "lodash/cloneDeep";
import { mockData } from "./mock";
import { IOperatorItemProps, IOperatorListProps } from "./interface";
import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
import useMyRequest from "@/hooks/useMyRequest";
import { IResponse } from "@/api/http";
import { fetchOperatorList } from "@/api/workbench_api";
import { useStores } from "@/store";
import { uuid } from "@/utils/util";
import styles from "./index.module.css";
import MyMenu from "@/components/mui/MyMenu";
......@@ -26,19 +24,66 @@ import MyMenu from "@/components/mui/MyMenu";
* @FilePath: /bkunyun/src/views/WorkFlowEdit/components/OperatorList/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
let count = 1;
const OperatorItem = (props: IOperatorItemProps) => {
const {
info: { title, description, tags },
setTemplateConfigInfo,
templateConfigInfo,
setOperatorListData,
operatorListData,
info,
} = props;
const [isDragStyle, setIsDragStyle] = useState<boolean>(false);
/** 拖拽开始 */
const onDragStart = useCallback(() => {
setIsDragStyle(true);
count++;
}, []);
/** 通过id查找相对的批流数组 */
const getBatchFlowArr = useCallback(
(id: string) => {
const newVal = operatorListData.filter((item) => {
return item.id === id || item.parentNode === id;
});
return newVal;
},
[operatorListData]
);
/** 生成批流副本 */
const getCopyBatchFlowArr = useCallback(
(arr: ITask[], x: number, y: number) => {
const newVal = arr.map((item) => {
const newEdges =
item?.edges &&
item?.edges.map((every) => {
return {
...every,
source: `${every.source}_${count}`,
target: `${every.target}_${count}`,
};
});
return {
...item,
id: `${item.id}_${count}`,
parentNode: item.parentNode ? `${item.parentNode}_${count}` : "",
position: {
x: item.type === "BATCH" ? x : item.position?.x,
y: item.type === "BATCH" ? y : item.position?.y,
},
edges: newEdges.length ? newEdges : item?.edges,
};
});
return newVal;
},
[]
);
/** 拖拽结束 */
const onDragEnd = useCallback(
(e: React.DragEvent<HTMLDivElement>) => {
......@@ -55,27 +100,25 @@ const OperatorItem = (props: IOperatorItemProps) => {
clientX < lowerRightX &&
clientY < lowerRightY
) {
console.log(
const batchFlowArr = getBatchFlowArr(info.id);
const newBatchFlowArr = getCopyBatchFlowArr(
batchFlowArr,
clientX - upperLeftPointX,
clientY - upperLeftPointY,
"0000000"
clientY - upperLeftPointY
);
const newVal = [
...cloneDeep(templateConfigInfo),
{
...props.info,
uuid: uuid(),
position: {
x: clientX - upperLeftPointX,
y: clientY - upperLeftPointY,
},
},
];
const newVal = cloneDeep(templateConfigInfo);
newVal.push(...newBatchFlowArr);
setTemplateConfigInfo(newVal);
}
setIsDragStyle(false);
},
[props.info, setTemplateConfigInfo, templateConfigInfo]
[
getBatchFlowArr,
getCopyBatchFlowArr,
info.id,
setTemplateConfigInfo,
templateConfigInfo,
]
);
return (
......@@ -105,7 +148,14 @@ const OperatorItem = (props: IOperatorItemProps) => {
</span>
);
})}
<MyMenu options={[]} value="dd">
<MyMenu
options={[
{ label: "1.1.0", value: "1.1.0" },
{ label: "1.2.0", value: "1.2.0" },
{ label: "1.3.0", value: "1.3.0" },
]}
value="1.1.0"
>
<div>ddd</div>
</MyMenu>
</div>
......@@ -146,7 +196,6 @@ const OperatorList = observer((props: IOperatorListProps) => {
});
}
};
return (
<div className={styles.operatorListBox}>
<div className={styles.searchBox}>
......@@ -163,12 +212,14 @@ const OperatorList = observer((props: IOperatorListProps) => {
</div>
<div className={styles.listBox}>
{operatorListData
// .filter((item) => item.type === "BATCH")
.filter((item) => item.type === "BATCH")
.map((item) => {
return (
<OperatorItem
key={item.id}
info={item}
setOperatorListData={setOperatorListData}
operatorListData={operatorListData}
templateConfigInfo={templateConfigInfo}
setTemplateConfigInfo={setTemplateConfigInfo}
/>
......
src/views/WorkFlowEdit/components/OperatorList/interface.ts
View file @ 7ea52091
......@@ -4,14 +4,16 @@ import { ITask } from "@/views/Project/ProjectSubmitWork/interface"
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-06 15:32:11
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-07 16:22:08
* @LastEditTime: 2022-07-08 16:05:21
* @FilePath: /bkunyun/src/views/WorkFlowEdit/components/OperatorList/interface.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
export interface IOperatorItemProps {
info: ITask
setTemplateConfigInfo: (val: ITask[]) => void;
templateConfigInfo: ITask[]
templateConfigInfo: ITask[];
setOperatorListData: (val: ITask[]) => void;
operatorListData: ITask[]
}
export interface IOperatorListProps {
......
src/views/WorkFlowEdit/components/ParameterSetting/index.module.css
View file @ 7ea52091
......@@ -61,6 +61,63 @@
);
cursor: pointer;
}
.inOutBox {
margin-bottom: 20px;
}
.paramsTitle {
color: rgba(30, 38, 51, 1);
font-size: 14px;
line-height: 22px;
font-weight: 600;
margin-bottom: 12px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.paramsTitleDesc {
margin-left: 8px;
}
.paramsList {
background-color: rgba(247, 248, 250, 1);
border-radius: 4px;
padding: 16px 20px;
}
.parameterBox {
margin-bottom: 12px;
}
.parameterBox:last-child {
margin-bottom: 0;
}
.parameterTop {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.parameterleft {
}
.parameterName {
color: rgba(30, 38, 51, 1);
font-size: 14px;
line-height: 22px;
font-weight: 600;
}
.required::after {
content: "*";
color: rgba(255, 78, 78, 1);
margin-left: 4px;
}
.parameterdataType {
color: rgba(138, 144, 153, 1);
font-size: 12px;
line-height: 20px;
}
.noData {
height: calc(100vh - 140px);
display: flex;
......
src/views/WorkFlowEdit/components/ParameterSetting/index.tsx
View file @ 7ea52091
......@@ -4,7 +4,17 @@ import {
IParameter,
} from "../../../Project/ProjectSubmitWork/interface";
import noTemplate from "@/assets/project/noTemplate.svg";
import { useEffect, useMemo, useRef, useState } from "react";
import { useEffect, useMemo, useState } from "react";
import MyInput from "@/components/mui/MyInput";
import Tooltip from "@mui/material/Tooltip";
import MyCheckBox from "@/components/mui/MyCheckBox";
// import MySelect, { optionsTransform } from "../components/MySelect";
import MySelect, {
optionsTransform,
} from "../../../Project/ProjectSubmitWork/components/MySelect";
import MyRadio from "@/components/mui/MyRadio";
import questionMark from "@/assets/project/questionMark.svg";
import fileSelectIcon from "@/assets/project/fileSelect.svg";
import classNames from "classnames";
type IParameterSettingProps = {
......@@ -12,19 +22,99 @@ type IParameterSettingProps = {
taskId: string;
};
const templateConfigInfo = [
{
id: "id",
title: "title",
description:
"阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段阿斯蒂芬吉林集安拉开圣诞节疯狂拉升阶段",
version: "version",
position: {
x: 10,
y: 100,
},
tags: ["string[]"],
type: "BATCH",
parentNode: "string",
parameters: [
{
hidden: true,
id: "",
name: "smi_in",
required: true,
defaultValue: null,
domType: "select",
classType: "STRING",
classTypeName: "String",
value: "",
description: "",
language: "",
languageVersion: "",
tags: [],
source: "string",
productId: "",
tasks: [],
validators: [
{
message: "请选择smi文件作为输入",
regex: "^.[s][m][i]$",
},
],
choices: [],
parameterGroup: "in",
},
{
hidden: true,
id: "",
name: "smi_in",
required: true,
defaultValue: null,
domType: "select",
classType: "STRING",
classTypeName: "String",
value: "",
description: "",
language: "",
languageVersion: "",
tags: [],
source: "string",
productId: "",
tasks: [],
validators: [
{
message: "请选择smi文件作为输入",
regex: "^.[s][m][i]$",
},
],
choices: [],
parameterGroup: "out",
},
],
edges: [],
isCheck: false,
executionStatus: "Pending",
},
];
const taskId = "id";
const ParameterSetting = (props: IParameterSettingProps) => {
const { templateConfigInfo, taskId } = props;
// const { templateConfigInfo, taskId } = props;
const [descRef, setDescRef] = useState<any>(useRef());
const [descHeight, setDescHeight] = useState(0);
const [isShowAllDese, setIsShowAllDese] = useState(false);
const [fileSelectOpen, setFileSelectOpen] = useState(false); // 选择输出路径的弹窗显示控制
const [fileSelectObject, setFileSelectObject] = useState({
taskId: "",
parameterName: "",
});
const div = document.getElementById("descHeight");
useEffect(() => {
const div = document.getElementById("descHeight");
if (div) {
setDescHeight(div.offsetHeight);
}
}, [descRef]);
}, [div]);
const taskInfo: ITask | null = useMemo(() => {
if (!taskId) {
......@@ -34,7 +124,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
(task) => task.id === taskId
);
if (randerTaskArr.length > 0) {
return randerTaskArr[0];
return randerTaskArr[0] as ITask;
} else {
return null;
}
......@@ -51,6 +141,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
);
}
}, [taskInfo]);
console.log(inParameters);
// 输出参数
const outParameters: Array<IParameter> = useMemo(() => {
......@@ -63,79 +154,198 @@ const ParameterSetting = (props: IParameterSettingProps) => {
}
}, [taskInfo]);
// 基础参数
const basisParameters: Array<IParameter> = useMemo(() => {
if (!taskInfo) {
return [];
} else {
return taskInfo.parameters.filter(
(parameter) => parameter.parameterGroup === "basis"
);
}
}, [taskInfo]);
// // 基础参数
// const basisParameters: Array<IParameter> = useMemo(() => {
// if (!taskInfo) {
// return [];
// } else {
// return taskInfo.parameters.filter(
// (parameter) => parameter.parameterGroup === "basis"
// );
// }
// }, [taskInfo]);
// 高级选项
const seniorParameters: Array<IParameter> = useMemo(() => {
if (!taskInfo) {
return [];
} else {
return taskInfo.parameters.filter(
(parameter) => parameter.parameterGroup === "senior"
);
}
}, [taskInfo]);
// // 高级选项
// const seniorParameters: Array<IParameter> = useMemo(() => {
// if (!taskInfo) {
// return [];
// } else {
// return taskInfo.parameters.filter(
// (parameter) => parameter.parameterGroup === "senior"
// );
// }
// }, [taskInfo]);
// 硬件配置
const hardwareParameters: Array<IParameter> = useMemo(() => {
if (!taskInfo) {
return [];
} else {
return taskInfo.parameters.filter(
(parameter) => parameter.parameterGroup === "hardware"
);
}
}, [taskInfo]);
// // 硬件配置
// const hardwareParameters: Array<IParameter> = useMemo(() => {
// if (!taskInfo) {
// return [];
// } else {
// return taskInfo.parameters.filter(
// (parameter) => parameter.parameterGroup === "hardware"
// );
// }
// }, [taskInfo]);
const handleOpenFileSelect = (
taskId: string = "",
parameterName: string = ""
) => {
setFileSelectObject({
taskId,
parameterName,
});
setFileSelectOpen(true);
};
const handleParameterChange = (
e: any,
taskId: string,
parameterName: string
) => {
console.log(e.target.value, taskId, parameterName);
// setParameter(e.target.value, taskId, parameterName);
};
const renderInput = (parameter: IParameter) => {
return (
<div>
{parameter.domType.toLowerCase() === "file" && (
<MyInput
value={parameter.value || ""}
InputProps={{
endAdornment: (
<img
onClick={() => handleOpenFileSelect(taskId, parameter.name)}
src={fileSelectIcon}
alt=""
className={styles.fileSelectImg}
/>
),
}}
placeholder="请选择"
error={parameter.error || false}
helperText={parameter.helperText}
></MyInput>
)}
{parameter.domType.toLowerCase() === "path" && (
<MyInput
value={parameter.value || ""}
InputProps={{
endAdornment: (
<img
onClick={() => handleOpenFileSelect(taskId, parameter.name)}
src={fileSelectIcon}
alt=""
className={styles.fileSelectImg}
/>
),
}}
placeholder="请选择"
error={parameter.error || false}
helperText={parameter.helperText}
></MyInput>
)}
{parameter.domType.toLowerCase() === "dataset" && (
<MyInput
value={parameter.value || ""}
InputProps={{
endAdornment: (
<img
onClick={() => handleOpenFileSelect(taskId, parameter.name)}
src={fileSelectIcon}
alt=""
className={styles.fileSelectImg}
/>
),
}}
placeholder="请选择"
error={parameter.error || false}
helperText={parameter.helperText}
></MyInput>
)}
{parameter.domType.toLowerCase() === "input" && (
<MyInput
value={parameter.value || ""}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
}
placeholder="请输入"
error={parameter.error || false}
helperText={parameter.helperText}
></MyInput>
)}
{parameter.domType.toLowerCase() === "select" && (
<MySelect
value={parameter.value}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
}
error={parameter.error || false}
helpertext={parameter.helperText}
options={optionsTransform(parameter?.choices || [], "label")}
></MySelect>
)}
{parameter.domType.toLowerCase() === "multipleselect" && (
<MySelect
value={parameter.value}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
}
multiple={true}
error={parameter.error || false}
helpertext={parameter.helperText}
options={optionsTransform(parameter.choices, "label")}
></MySelect>
)}
{parameter.domType.toLowerCase() === "radio" && (
<MyRadio
value={parameter.value}
onChange={(e: any) =>
handleParameterChange(e, taskId, parameter.name || "")
}
options={optionsTransform(parameter.choices, "label")}
error={parameter.error || false}
helperText={parameter.helperText}
></MyRadio>
)}
{parameter.domType.toLowerCase() === "checkbox" && (
<MyCheckBox
value={parameter.value}
onChange={(e: any) =>
handleParameterChange(
{
target: {
value: e,
},
},
taskId,
parameter.name || ""
)
}
options={optionsTransform(parameter.choices, "label")}
error={parameter.error || false}
helperText={parameter.helperText}
></MyCheckBox>
)}
{parameter.description && (
<Tooltip title={parameter.description} placement="top">
<img className={styles.parameterDesc} src={questionMark} alt="" />
</Tooltip>
)}
</div>
);
};
return (
<div className={styles.parameterSetting}>
{/* <div className={styles.taskInfo}>
<div className={styles.taskTitle}>taskTitle</div>
<div className={styles.taskVersion}>version</div>
<div
className={styles.taskDescriptionHeight}
id="descHeight"
ref={descRef}
>
埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国
</div>
<div
className={classNames({
[styles.taskDescriptionAll]: isShowAllDese,
[styles.taskDescription]: !isShowAllDese,
})}
>
埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国埃里克梵蒂冈和艰苦拉萨规定了卡号是德国
{descHeight > 60 && (
<span
className={styles.descButton}
onClick={() => setIsShowAllDese(!isShowAllDese)}
>
{isShowAllDese ? "收起" : "展开"}
</span>
)}
</div>
</div> */}
{taskInfo && (
<div className={styles.taskInfo}>
<div className={styles.taskTitle}>{taskInfo.title || "-"}</div>
<div className={styles.taskVersion}>
版本：{taskInfo.version || "-"}
</div>
<div
className={styles.taskDescriptionHeight}
id="descHeight"
ref={descRef}
>
<div className={styles.taskDescriptionHeight} id="descHeight">
{taskInfo.description || "-"}
</div>
<div
......@@ -156,12 +366,88 @@ const ParameterSetting = (props: IParameterSettingProps) => {
</div>
</div>
)}
{/* {!taskInfo && (
{inParameters.length > 0 && (
<div className={styles.inOutBox}>
<div className={styles.paramsTitle}>
输入
<Tooltip
title="当某个输入项为启用状态时，代表该输入将由模板使用者在使用的时候填写赋值；当为关闭状态时，代表该输入不需要使用者来填写赋值，而是将其它流程的结果传入。"
placement="top"
>
<img
className={styles.paramsTitleDesc}
src={questionMark}
alt=""
/>
</Tooltip>
</div>
<div className={styles.paramsList}>
{inParameters.map((parameter, index) => {
return (
<div className={styles.parameterBox} key={index}>
<div className={styles.parameterTop}>
<div className={styles.parameterleft}>
<div
className={classNames({
[styles.parameterName]: true,
[styles.required]: parameter.required,
})}
>
{parameter.name}
</div>
<div className={styles.parameterdataType}>
{parameter.classTypeName}
</div>
</div>
<div className={styles.parameterRight}>
{parameter.hidden}
</div>
</div>
{renderInput(parameter)}
</div>
);
})}
</div>
</div>
)}
{outParameters.length > 0 && (
<div className={styles.inOutBox}>
<div className={styles.paramsTitle}>输出</div>
<div className={styles.paramsList}>
{inParameters.map((parameter, index) => {
return (
<div className={styles.parameterBox} key={index}>
<div className={styles.parameterTop}>
<div className={styles.parameterleft}>
<div
className={classNames({
[styles.parameterName]: true,
[styles.required]: parameter.required,
})}
>
{parameter.name}
</div>
<div className={styles.parameterdataType}>
{parameter.classTypeName}
</div>
</div>
<div className={styles.parameterRight}>
{parameter.hidden}
</div>
</div>
{renderInput(parameter)}
</div>
);
})}
</div>
</div>
)}
{!taskInfo && (
<div className={styles.noData}>
<img src={noTemplate} alt="" className={styles.noDataImg} />
<span className={styles.noDataText}>选中任意算子进行参数设置</span>
</div>
)} */}
)}
</div>
);
};
......
src/views/demo/index.tsx
View file @ 7ea52091
import { useMessage } from "@/components/MySnackbar";
import usePass from "@/hooks/usePass";
// import usePass from "@/hooks/usePass";
import { operation, route } from "@/router";
import { Button } from "@mui/material";
import { Box } from "@mui/system";
import { useEffect } from "react";
const Demo = ({
childrenRoutes,
childrenRoutes,
}: {
childrenRoutes?: Array<route | operation>;
childrenRoutes?: Array<route | operation>;
}) => {
const message = useMessage();
const isPass = usePass();
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
}, []);
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
}, []);
return (
<Box>
<Box>{JSON.stringify(childrenRoutes)}</Box>
<Box>{JSON.stringify(process.env.NODE_ENV)}</Box>
<Button onClick={() => message.success("测试测试")}>message测试</Button>
</Box>
);
return (
<Box>
<Box>{JSON.stringify(childrenRoutes)}</Box>
<Box>{JSON.stringify(process.env.NODE_ENV)}</Box>
<Button onClick={() => message.success("测试测试")}>message测试</Button>
</Box>
);
};
export default Demo;
src/views/mui_demo/button.tsx
View file @ 7ea52091
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import _ from "lodash";
import { IResponse, useHttp } from "@/api/http";
import { useStores } from "@/store";
import DeleteIcon from '@mui/icons-material/Delete';
import { memo } from "react";
import DeleteIcon from "@mui/icons-material/Delete";
import Button from "@/components/mui/Button";
const ProjectMembers = () => {
const http = useHttp();
const { currentProjectStore } = useStores();
useEffect(() => {
}, []);
return (
<>
<Button size={"large"} text={'确定'} />
&nbsp;&nbsp;
<Button text={'确定'} />
&nbsp;&nbsp;
<Button size={"small"} text={'确定'} />
<br /><br />
<Button size={"large"} text={'确定'} disabled />
&nbsp;&nbsp;
<Button text={'确定'} disabled />
&nbsp;&nbsp;
<Button size={"small"} text={'确定'} disabled />
<br /><br />
<Button size={"large"} color={"secondary"} text={'确定'} />
&nbsp;&nbsp;
<Button color={"secondary"} text={'确定'} />
&nbsp;&nbsp;
<Button size={"small"} color={"secondary"} text={'确定'} />
<br /> <br />
<Button text={'确定'} size={"large"} style={{ color: "aqua", background: "burlywood" }} />
&nbsp;&nbsp;
<Button text={'确定'} style={{ color: "aqua", background: "burlywood" }} />
&nbsp;&nbsp;
<Button text={'确定'} size={"small"} style={{ color: "aqua", background: "burlywood" }} />
<br /> <br />
outlined
<br />
<Button size={"large"} variant={"outlined"} text={'确定'} />
&nbsp;&nbsp;
<Button variant={"outlined"} text={'确定'} />
&nbsp;&nbsp;
<Button size={"small"} variant={"outlined"} text={'确定'} />
<br /> <br />
<Button size={"large"} variant={"outlined"} disabled text={'确定'} />
&nbsp;&nbsp;
<Button variant={"outlined"} disabled text={'确定'} />
&nbsp;&nbsp;
<Button size={"small"} variant={"outlined"} disabled text={'确定'} />
<br /> <br />
<Button size={"large"} variant={"outlined"} color={"secondary"} text={'确定'} />
&nbsp;&nbsp;
<Button variant={"outlined"} color={"secondary"} text={'确定'} />
&nbsp;&nbsp;
<Button size={"small"} variant={"outlined"} color={"secondary"} text={'确定'} />
<br /> <br />
<Button text={'确定'} size={"large"} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} />
&nbsp;&nbsp;
<Button text={'确定'} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} />
&nbsp;&nbsp;
<Button text={'确定'} size={"small"} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} />
<br /> <br />
text
<br />
<Button size={"large"} variant={"text"} text={'确定确定确定确定确定确定'} />
&nbsp;&nbsp;
<Button variant={"text"} text={'确定确定确定确定确定确定'} />
&nbsp;&nbsp;
<Button size={"small"} variant={"text"} text={'确定确定确定确定确定确定'} />
<br />
<Button size={"large"} disabled variant={"text"} text={'确定确定确定确定确定确定'} />
&nbsp;&nbsp;
<Button variant={"text"} disabled text={'确定确定确定确定确定确定'} />
&nbsp;&nbsp;
<Button size={"small"} disabled variant={"text"} text={'确定确定确定确定确定确定'} />
<br />
<Button size={"large"} color={"secondary"} variant={"text"} text={'确定确定确定确定确定确定'} />
&nbsp;&nbsp;
<Button variant={"text"} color={"secondary"} text={'确定确定确定确定确定确定'} />
&nbsp;&nbsp;
<Button size={"small"} color={"secondary"} variant={"text"} text={'确定确定确定确定确定确定'} />
<br /> <br />
img
<br />
<Button text={'确定确定确定确定确定确定'} img={<DeleteIcon />} />
<br /> <br />
select
<br />
<Button
text={'更多'}
select={
[
{ name: "1111111" },
{ name: "1111111" },
{ name: "1111111" },
{ name: "1111111", color: "red" },
]
} />
<Button
text={'更多'}
color={"secondary"} variant={"text"}
select={
[
{ name: "1111111" },
{ name: "1111111" },
{ name: "1111111" },
{ name: "1111111", color: "red" },
]
} />
</>
);
return (
<>
<Button size={"large"} text={"确定"} />
&nbsp;&nbsp;
<Button text={"确定"} />
&nbsp;&nbsp;
<Button size={"small"} text={"确定"} />
<br />
<br />
<Button size={"large"} text={"确定"} disabled />
&nbsp;&nbsp;
<Button text={"确定"} disabled />
&nbsp;&nbsp;
<Button size={"small"} text={"确定"} disabled />
<br />
<br />
<Button size={"large"} color={"secondary"} text={"确定"} />
&nbsp;&nbsp;
<Button color={"secondary"} text={"确定"} />
&nbsp;&nbsp;
<Button size={"small"} color={"secondary"} text={"确定"} />
<br /> <br />
<Button
text={"确定"}
size={"large"}
style={{ color: "aqua", background: "burlywood" }}
/>
&nbsp;&nbsp;
<Button
text={"确定"}
style={{ color: "aqua", background: "burlywood" }}
/>
&nbsp;&nbsp;
<Button
text={"确定"}
size={"small"}
style={{ color: "aqua", background: "burlywood" }}
/>
<br /> <br />
outlined
<br />
<Button size={"large"} variant={"outlined"} text={"确定"} />
&nbsp;&nbsp;
<Button variant={"outlined"} text={"确定"} />
&nbsp;&nbsp;
<Button size={"small"} variant={"outlined"} text={"确定"} />
<br /> <br />
<Button size={"large"} variant={"outlined"} disabled text={"确定"} />
&nbsp;&nbsp;
<Button variant={"outlined"} disabled text={"确定"} />
&nbsp;&nbsp;
<Button size={"small"} variant={"outlined"} disabled text={"确定"} />
<br /> <br />
<Button
size={"large"}
variant={"outlined"}
color={"secondary"}
text={"确定"}
/>
&nbsp;&nbsp;
<Button variant={"outlined"} color={"secondary"} text={"确定"} />
&nbsp;&nbsp;
<Button
size={"small"}
variant={"outlined"}
color={"secondary"}
text={"确定"}
/>
<br /> <br />
<Button
text={"确定"}
size={"large"}
variant={"outlined"}
style={{ color: "aqua", background: "burlywood" }}
/>
&nbsp;&nbsp;
<Button
text={"确定"}
variant={"outlined"}
style={{ color: "aqua", background: "burlywood" }}
/>
&nbsp;&nbsp;
<Button
text={"确定"}
size={"small"}
variant={"outlined"}
style={{ color: "aqua", background: "burlywood" }}
/>
<br /> <br />
text
<br />
<Button
size={"large"}
variant={"text"}
text={"确定确定确定确定确定确定"}
/>
&nbsp;&nbsp;
<Button variant={"text"} text={"确定确定确定确定确定确定"} />
&nbsp;&nbsp;
<Button
size={"small"}
variant={"text"}
text={"确定确定确定确定确定确定"}
/>
<br />
<Button
size={"large"}
disabled
variant={"text"}
text={"确定确定确定确定确定确定"}
/>
&nbsp;&nbsp;
<Button variant={"text"} disabled text={"确定确定确定确定确定确定"} />
&nbsp;&nbsp;
<Button
size={"small"}
disabled
variant={"text"}
text={"确定确定确定确定确定确定"}
/>
<br />
<Button
size={"large"}
color={"secondary"}
variant={"text"}
text={"确定确定确定确定确定确定"}
/>
&nbsp;&nbsp;
<Button
variant={"text"}
color={"secondary"}
text={"确定确定确定确定确定确定"}
/>
&nbsp;&nbsp;
<Button
size={"small"}
color={"secondary"}
variant={"text"}
text={"确定确定确定确定确定确定"}
/>
<br /> <br />
img
<br />
<Button text={"确定确定确定确定确定确定"} img={<DeleteIcon />} />
<br /> <br />
select
<br />
<Button
text={"更多"}
select={[
{ name: "1111111" },
{ name: "1111111" },
{ name: "1111111" },
{ name: "1111111", color: "red" },
]}
/>
<Button
text={"更多"}
color={"secondary"}
variant={"text"}
select={[
{ name: "1111111" },
{ name: "1111111" },
{ name: "1111111" },
{ name: "1111111", color: "red" },
]}
/>
</>
);
};
export default memo(ProjectMembers);
src/views/mui_demo/input.tsx
View file @ 7ea52091
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import _ from "lodash";
import { IResponse, useHttp } from "@/api/http";
import { useStores } from "@/store";
import DeleteIcon from '@mui/icons-material/Delete';
import { InputAdornment } from '@mui/material';
import { memo } from "react";
import { InputAdornment } from "@mui/material";
import InputComponent from "@/components/mui/Input";
const ProjectMembers = () => {
const http = useHttp();
const { currentProjectStore } = useStores();
useEffect(() => {
}, []);
return (
<>
<InputComponent
fullWidth={false}
label={"test"}
defaultValue={"sssssssss"}
size={'large'}
/>
&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent
fullWidth={false}
label={"test"}
error={true}
helperText={"你还急急急靠靠靠靠靠靠靠靠靠靠靠靠靠靠"}
/>&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent
fullWidth={false}
label={"test"}
size={'small'}
disabled
/>&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent
fullWidth={false}
label={"xsmall"}
size={'xsmall'}
/>&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent
fullWidth={false}
placeholder={"测试机哦"}
endAdornment={<InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>}
/>&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent fullWidth={false} size={"small"} placeholder={"xxxxxx"} endAdornment={<InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>} />
<br /> <br />
<InputComponent
fullWidth={true}
select={
{
json: [{value:'1',label:"2"},{value:'3',label:"4"}]
}
}
/>
<br /><br />
{/* <SelectComponent
return (
<>
<InputComponent
fullWidth={false}
label={"test"}
defaultValue={"sssssssss"}
size={"large"}
/>
&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent
fullWidth={false}
label={"test"}
error={true}
helperText={"你还急急急靠靠靠靠靠靠靠靠靠靠靠靠靠靠"}
/>
&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent
fullWidth={false}
label={"test"}
size={"small"}
disabled
/>
&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent fullWidth={false} label={"xsmall"} size={"xsmall"} />
&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent
fullWidth={false}
placeholder={"测试机哦"}
endAdornment={
<InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>
}
/>
&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent
fullWidth={false}
size={"small"}
placeholder={"xxxxxx"}
endAdornment={
<InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>
}
/>
<br /> <br />
<InputComponent
fullWidth={true}
select={{
json: [
{ value: "1", label: "2" },
{ value: "3", label: "4" },
],
}}
/>
<br />
<br />
{/* <SelectComponent
option={json}
/>
<br /><br />
......@@ -72,10 +69,10 @@ const ProjectMembers = () => {
option={json}
size={"small"}
/> */}
<br /><br />
</>
);
<br />
<br />
</>
);
};
export default memo(ProjectMembers);
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