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
Expand all Show whitespace changes
Inline Side-by-side
Showing with 610 additions and 457 deletions
src/api/fileserver/CloudEController.ts
View file @ 7ea52091
...@@ -4,7 +4,7 @@ import axios from "axios"; ...@@ -4,7 +4,7 @@ import axios from "axios";
// import { Actions, Constants } from '../../../../commons/utils/constants' // import { Actions, Constants } from '../../../../commons/utils/constants'
// import MessageUtil from '../../../../commons/utils/MessageUtil' // import MessageUtil from '../../../../commons/utils/MessageUtil'
// import ApiUtils from '../../../../commons/utils/ApiUtils' // 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 UserStore from '../../../../console/common/stores/UserStore'
import { ApiUtils } from "./utils"; import { ApiUtils } from "./utils";
import Base64 from "crypto-js/enc-base64"; import Base64 from "crypto-js/enc-base64";
......
src/api/fileserver/raysyncApi.ts
View file @ 7ea52091
...@@ -28,18 +28,18 @@ const APIPORT = function () { ...@@ -28,18 +28,18 @@ const APIPORT = function () {
}; };
// 当前计算区 // 当前计算区
let currentRegion = localStorage.getItem("current-region"); // let currentRegion = localStorage.getItem("current-region");
let currentRegionJson = currentRegion && JSON.parse(currentRegion); // let currentRegionJson = currentRegion && JSON.parse(currentRegion);
let user = getLoaclStorageOfKey("userinfo"); // let user = getLoaclStorageOfKey("userinfo");
// 文件路径 // 文件路径
const FILEPATH = // const FILEPATH =
currentRegionJson && // currentRegionJson &&
currentRegionJson.location && // currentRegionJson.location &&
currentRegionJson.location === "ON_PREMISE" && // currentRegionJson.location === "ON_PREMISE" &&
localStorage.getItem("userinfo") // localStorage.getItem("userinfo")
? `/home/${user.name}` // ? `/home/${user.name}`
: "/home/cloudam"; // : "/home/cloudam";
const FILEPATH_SHARE = "/share"; const FILEPATH_SHARE = "/share";
// 工作日志 // 工作日志
...@@ -104,7 +104,7 @@ const getType = function () { ...@@ -104,7 +104,7 @@ const getType = function () {
export { export {
API, API,
APIPORT, APIPORT,
FILEPATH, // FILEPATH,
FILEPATH_SHARE, FILEPATH_SHARE,
APIOPTION, APIOPTION,
APIJOBLOGPOINT, APIJOBLOGPOINT,
......
src/api/http.ts
View file @ 7ea52091
...@@ -128,7 +128,6 @@ export class Http { ...@@ -128,7 +128,6 @@ export class Http {
if ( if (
newConfig?.headers['Content-Type'] === "application/x-www-form-urlencoded" newConfig?.headers['Content-Type'] === "application/x-www-form-urlencoded"
) { ) {
console.log(222)
newConfig.data = qs.stringify(data); newConfig.data = qs.stringify(data);
} }
return newConfig return newConfig
......
src/components/Material.Ui/Table.jsx
View file @ 7ea52091
...@@ -9,7 +9,6 @@ import Paper from "@mui/material/Paper"; ...@@ -9,7 +9,6 @@ import Paper from "@mui/material/Paper";
import Checkbox from "@mui/material/Checkbox"; import Checkbox from "@mui/material/Checkbox";
// import Spin from "./Spin"; // import Spin from "./Spin";
import EnhancedTableToolbarComponent from "./Table/EnhancedTableToolbar"
import EnhancedTableHeadComponent from "./Table/EnhancedTableHead" import EnhancedTableHeadComponent from "./Table/EnhancedTableHead"
import { getComparator, stableSort, useStyles } from "./Table/function"; import { getComparator, stableSort, useStyles } from "./Table/function";
import ActionsComponent from "./Table/ActionsComponent" import ActionsComponent from "./Table/ActionsComponent"
...@@ -20,11 +19,10 @@ export default function EnhancedTable(props) { ...@@ -20,11 +19,10 @@ export default function EnhancedTable(props) {
const classes = useStyles; const classes = useStyles;
const [order, setOrder] = React.useState("asc"); const [order, setOrder] = React.useState("asc");
const [orderBy, setOrderBy] = React.useState(""); 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; 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 [selected, setSelected] = React.useState(initSelected || []);
const [rowsPerPageOptions, setRowsPerPageOptions] = React.useState(initSelected || [5, 10, 20, 50, { value: -1, label: 'All' }]); const [rowsPerPageOptions] = React.useState(initSelected || [5, 10, 20, 50, { value: -1, label: 'All' }]);
// const [spin, setSpin] = React.useState(false)
const [onRow, setOnRow] = React.useState('') const [onRow, setOnRow] = React.useState('')
// 重置复选框选中选项 // 重置复选框选中选项
...@@ -63,10 +61,6 @@ export default function EnhancedTable(props) { ...@@ -63,10 +61,6 @@ export default function EnhancedTable(props) {
setSelected([]); setSelected([]);
checkboxData([]); checkboxData([]);
}; };
// React.useEffect(() => {
// setSpin(load)
// }, [load]);
const handleClick = (event, name) => { const handleClick = (event, name) => {
const selectedIndex = selected.indexOf(name); const selectedIndex = selected.indexOf(name);
let newSelected = []; let newSelected = [];
...@@ -97,7 +91,7 @@ export default function EnhancedTable(props) { ...@@ -97,7 +91,7 @@ export default function EnhancedTable(props) {
const isSelected = (name) => selected.indexOf(name) !== -1; 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)=>{ const renderTableCellValue = useCallback(((item, row, index)=>{
if( if(
...@@ -209,11 +203,6 @@ export default function EnhancedTable(props) { ...@@ -209,11 +203,6 @@ export default function EnhancedTable(props) {
</TableRow> </TableRow>
); );
})} })}
{/* {emptyRows > 0 && (
<TableRow style={{ height: (dense ? 33 : 53) * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)} */}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </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 { makeStyles } from "tss-react/mui";
import { Typography, Menu, MenuItem, IconButton, Button } from "@mui/material"; import { Typography, Menu, MenuItem, Button } from "@mui/material";
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
type ButtonTagProps = { type ButtonTagProps = {
text: string;//文本内容 text: string; //文本内容
variant?: "text" | 'contained' | 'outlined';//按钮样式 variant?: "text" | "contained" | "outlined"; //按钮样式
click?: any;//点击事件 click?: any; //点击事件
select?: any[];//选择按钮的下拉列表 select?: any[]; //选择按钮的下拉列表
fontSize?: string;//按钮文字大小 fontSize?: string; //按钮文字大小
dropValue?: boolean;//选择的值 dropValue?: boolean; //选择的值
drop?: boolean;//是否开启选择 drop?: boolean; //是否开启选择
color?: "inherit" | "primary" | "secondary" | undefined,//按钮颜色风格 color?: "inherit" | "primary" | "secondary" | undefined; //按钮颜色风格
btnStyle?: any,//按钮自定义样式类 btnStyle?: any; //按钮自定义样式类
size?: "large" | "medium" | "small",//按钮尺寸 size?: "large" | "medium" | "small"; //按钮尺寸
disabled?: boolean,//是否禁用 disabled?: boolean; //是否禁用
style?: any,//按钮自定义样式 style?: any; //按钮自定义样式
img?: JSX.Element;//图标按钮中的图标 img?: JSX.Element; //图标按钮中的图标
selectCallBack?: (item: any, key: number) => void//选择按钮的回调 selectCallBack?: (item: any, key: number) => void; //选择按钮的回调
} };
const ButtonComponent = (props: ButtonTagProps) => { const ButtonComponent = (props: ButtonTagProps) => {
const { size, disabled, variant, color, img, btnStyle = {}, select, selectCallBack } = props; const {
size,
disabled,
variant,
color,
img,
btnStyle = {},
select,
selectCallBack,
} = props;
const { classes, cx } = useStyles({}); const { classes, cx } = useStyles({});
const [anchorEl, setAnchorEl] = React.useState(null); const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event: { currentTarget: React.SetStateAction<null>; }) => setAnchorEl(event.currentTarget); const handleClick = (event: { currentTarget: React.SetStateAction<null> }) =>
const defultClick = (event: { stoppropagation: () => any; }) => event && event.stoppropagation && event.stoppropagation() setAnchorEl(event.currentTarget);
const defultClick = (event: { stoppropagation: () => any }) =>
event && event.stoppropagation && event.stoppropagation();
const handleCloseOption = (item: any, key: number) => { const handleCloseOption = (item: any, key: number) => {
setAnchorEl(null); setAnchorEl(null);
selectCallBack && selectCallBack(item, key) selectCallBack && selectCallBack(item, key);
} };
const handleClose = () => setAnchorEl(null); const handleClose = () => setAnchorEl(null);
return ( return (
<> <>
<Button <Button
size={size || "medium"} size={size || "medium"}
variant={variant || 'contained'} variant={variant || "contained"}
color={color || "primary"} color={color || "primary"}
disableRipple={true} disableRipple={true}
disableFocusRipple={true} disableFocusRipple={true}
...@@ -48,29 +57,36 @@ const ButtonComponent = (props: ButtonTagProps) => { ...@@ -48,29 +57,36 @@ const ButtonComponent = (props: ButtonTagProps) => {
classes={{ classes={{
root: btnStyle.root || classes.root, root: btnStyle.root || classes.root,
// disabled: btnStyle.disabled || classes.disabled, // disabled: btnStyle.disabled || classes.disabled,
containedSecondary: btnStyle.containedSecondary || classes.containedSecondary, containedSecondary:
btnStyle.containedSecondary || classes.containedSecondary,
outlined: btnStyle.outlined || classes.outlined, outlined: btnStyle.outlined || classes.outlined,
outlinedSecondary: btnStyle.outlinedSecondary || classes.outlinedSecondary, outlinedSecondary:
btnStyle.outlinedSecondary || classes.outlinedSecondary,
text: btnStyle.text || classes.text, text: btnStyle.text || classes.text,
textPrimary: btnStyle.textPrimary || classes.textPrimary, textPrimary: btnStyle.textPrimary || classes.textPrimary,
textSecondary: btnStyle.textSecondary || classes.textSecondary, textSecondary: btnStyle.textSecondary || classes.textSecondary,
sizeSmall: btnStyle.sizeSmall || classes.sizeSmall, sizeSmall: btnStyle.sizeSmall || classes.sizeSmall,
sizeLarge: btnStyle.sizeLarge || classes.sizeLarge, sizeLarge: btnStyle.sizeLarge || classes.sizeLarge,
}} }}
style={{ ...props.style }} style={{ ...props.style }}
onClick={props.select ? handleClick : (props.click || defultClick)} onClick={props.select ? handleClick : props.click || defultClick}
> >
{img || ''} {img || ""}
<Typography style={{ fontSize: props.fontSize || "14px" }}>{props.text}</Typography> <Typography style={{ fontSize: props.fontSize || "14px" }}>
{ {props.text}
(props.select && props.select.length > 0 || props.drop) && <ArrowDropDownIcon classes={{ </Typography>
{((props.select && props.select.length > 0) || props.drop) && (
<ArrowDropDownIcon
classes={{
root: cx({ root: cx({
[classes.ArrowDropDownIconRoot]: true, [classes.ArrowDropDownIconRoot]: true,
[classes.ArrowDropDownIconRootOpen]: Boolean(props.dropValue || anchorEl) [classes.ArrowDropDownIconRootOpen]: Boolean(
}) props.dropValue || anchorEl
}} /> ),
} }),
}}
/>
)}
</Button> </Button>
<Menu <Menu
id="simple-menu" id="simple-menu"
...@@ -79,40 +95,67 @@ const ButtonComponent = (props: ButtonTagProps) => { ...@@ -79,40 +95,67 @@ const ButtonComponent = (props: ButtonTagProps) => {
open={Boolean(anchorEl)} open={Boolean(anchorEl)}
onClose={handleClose} onClose={handleClose}
> >
{ {select &&
select && select.length > 0 && select.map((item, key) => { select.length > 0 &&
select.map((item, key) => {
return ( return (
<MenuItem <MenuItem
key={key} key={key}
classes={{ root: classes.menuItemRoot }} classes={{ root: classes.menuItemRoot }}
onClick={() => handleCloseOption(item, key)}> onClick={() => handleCloseOption(item, key)}
>
{item.name || ""} {item.name || ""}
</MenuItem> </MenuItem>
) );
}) })}
}
</Menu> </Menu>
</> </>
) );
} };
const useStyles = makeStyles<{}>()( const useStyles = makeStyles<{}>()((theme) => ({
(theme, { }) => ({ root: {
root: { backgroundColor: "#136EFA", boxShadow: "none !important", color: "#ffffff", "&:hover": { backgroundColor: "#0055D9" } }, backgroundColor: "#136EFA",
containedSecondary: { backgroundColor: "#D62C1F", boxShadow: "none !important", "&:hover": { backgroundColor: "#D82C1F" } }, boxShadow: "none !important",
outlined: { backgroundColor: '#FFFFFF', border: "1px solid #136EFA", boxShadow: "none !important", color: "#136EFA", "&:hover": { backgroundColor: "rgba(19, 110, 250, 0.1)" } }, color: "#ffffff",
outlinedSecondary: { border: "1px solid #D62C1F", color: "#D62C1F", "&:hover": { border: "1px solid #D62C1F", backgroundColor: "rgba(214, 44, 31, 0.1)" } }, "&: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" } }, label: { "& p": { fontSize: "13px" } },
text: { backgroundColor: 'transparent', boxShadow: "none !important" }, text: { backgroundColor: "transparent", boxShadow: "none !important" },
textPrimary: { color: "#136EFA", "&:hover": { backgroundColor: "#E8F1FF" } }, textPrimary: { color: "#136EFA", "&:hover": { backgroundColor: "#E8F1FF" } },
textSecondary: { color: "#F44335", "&:hover": { backgroundColor: "rgba(244, 67, 53, 0.1)" } }, textSecondary: {
color: "#F44335",
"&:hover": { backgroundColor: "rgba(244, 67, 53, 0.1)" },
},
sizeSmall: { "& p": { fontSize: "12px" } }, sizeSmall: { "& p": { fontSize: "12px" } },
sizeLarge: { "& p": { fontSize: "14px" } }, sizeLarge: { "& p": { fontSize: "14px" } },
menuItemRoot: {}, menuItemRoot: {},
ArrowDropDownIconRoot: { color: "#8A9099", transition: "all 0.2s !important", transform: "rotate(0)" }, ArrowDropDownIconRoot: {
color: "#8A9099",
transition: "all 0.2s !important",
transform: "rotate(0)",
},
ArrowDropDownIconRootOpen: { color: "#8A9099", transform: "rotate(180deg)" }, ArrowDropDownIconRootOpen: { color: "#8A9099", transform: "rotate(180deg)" },
}) }));
);
export default ButtonComponent; export default ButtonComponent;
src/components/mui/MyMenu.tsx
View file @ 7ea52091
...@@ -21,7 +21,7 @@ const theme = createTheme({ ...@@ -21,7 +21,7 @@ const theme = createTheme({
MuiMenu: { MuiMenu: {
styleOverrides: { styleOverrides: {
root: { root: {
maxHeight: "260px", // maxHeight: "260px",
overflowY: "scroll", overflowY: "scroll",
}, },
}, },
...@@ -87,7 +87,9 @@ const MyMenu = (props: IMyMenuProps) => { ...@@ -87,7 +87,9 @@ const MyMenu = (props: IMyMenuProps) => {
key={index} key={index}
> >
<span>{option.label}</span> <span>{option.label}</span>
{value === option.value && <CheckIcon />} {value === option.value && (
<CheckIcon sx={{ marginLeft: "12px" }} />
)}
</MenuItem> </MenuItem>
); );
})} })}
......
src/components/mui/MyTreeView.tsx
View file @ 7ea52091
...@@ -18,7 +18,6 @@ type MyTreeViewProps = { ...@@ -18,7 +18,6 @@ type MyTreeViewProps = {
renderLabel?: (node: any) => React.ReactNode; renderLabel?: (node: any) => React.ReactNode;
treeViewSx?: any; treeViewSx?: any;
defaultExpanded?: Array<string>; defaultExpanded?: Array<string>;
idKey?: string;
idFunc?: (node: any) => string; idFunc?: (node: any) => string;
}; };
...@@ -38,7 +37,6 @@ const MyTreeView = (props: MyTreeViewProps) => { ...@@ -38,7 +37,6 @@ const MyTreeView = (props: MyTreeViewProps) => {
onNodeSelect, onNodeSelect,
onNodeToggle, onNodeToggle,
defaultExpanded, defaultExpanded,
idKey,
idFunc, idFunc,
} = props; } = props;
......
src/hooks/usePass.ts
View file @ 7ea52091
...@@ -75,7 +75,7 @@ const usePass = () => { ...@@ -75,7 +75,7 @@ const usePass = () => {
} }
return false; return false;
}, },
[permissionStore.allRoutes] [permissionStore.allRoutes, currentProjectStore]
); );
return isPass; return isPass;
......
src/index.tsx
View file @ 7ea52091
...@@ -7,8 +7,8 @@ import { Provider } from "mobx-react"; ...@@ -7,8 +7,8 @@ import { Provider } from "mobx-react";
import { stores } from "@/store/index"; import { stores } from "@/store/index";
import { MySnackbarProvider } from "@/components/MySnackbar"; import { MySnackbarProvider } from "@/components/MySnackbar";
import "@/mocks/index"; import "@/mocks/index";
import './assets/style/public.css' import "./assets/style/public.css";
import { createTheme, ThemeProvider, styled } from '@mui/material/styles'; import { createTheme, ThemeProvider } from "@mui/material/styles";
const root = ReactDOM.createRoot( const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement document.getElementById("root") as HTMLElement
...@@ -16,12 +16,25 @@ const root = ReactDOM.createRoot( ...@@ -16,12 +16,25 @@ const root = ReactDOM.createRoot(
const theme = createTheme({ const theme = createTheme({
typography: { 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(','), 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: { palette: {
primary: { main: '#136EFA' }, primary: { main: "#136EFA" },
secondary: { main: '#F44335' } secondary: { main: "#F44335" },
} },
}); });
root.render( root.render(
......
src/utils/helper.ts
View file @ 7ea52091
...@@ -36,6 +36,6 @@ export const verifyLettersNumbersCertainChars5 = (str: string) => { ...@@ -36,6 +36,6 @@ export const verifyLettersNumbersCertainChars5 = (str: string) => {
if (getTrueLength(str) > 127) { if (getTrueLength(str) > 127) {
return false; return false;
} }
let validString = /^[\u4e00-\u9fa5_0-9a-zA-Z\/-_.]+$/; let validString = /^[\u4e00-\u9fa5_0-9a-zA-Z/-_.]+$/;
return validString.test(str); 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 MyDialog from "@/components/mui/MyDialog";
import { useMessage } from "@/components/MySnackbar"; import { useMessage } from "@/components/MySnackbar";
......
src/views/Project/ProjectData/MoveFile/index.tsx
View file @ 7ea52091
...@@ -34,9 +34,7 @@ const MoveFile = (props: any) => { ...@@ -34,9 +34,7 @@ const MoveFile = (props: any) => {
const [moveFileSubmitloading, setMoveFileSubmitloading] = useState(false); const [moveFileSubmitloading, setMoveFileSubmitloading] = useState(false);
const [treeData, setTreeData] = useState<any>([]); const [treeData, setTreeData] = useState<any>([]);
const [renderTreeData, setRenderTreeData] = useState<any>([]); const [renderTreeData, setRenderTreeData] = useState<any>([]);
const [moveFileDialogRef, setMoveFileDialogRef] = useState<any>( const [moveFileDialogRef] = useState<any>(React.createRef());
React.createRef()
);
// 要移动的文件夹 之后用来隐藏文件夹树中同路径的文件夹 // 要移动的文件夹 之后用来隐藏文件夹树中同路径的文件夹
const [moveFolderPathArr, setMoveFolderPathArr] = useState<Array<string>>([]); const [moveFolderPathArr, setMoveFolderPathArr] = useState<Array<string>>([]);
...@@ -345,7 +343,6 @@ const MoveFile = (props: any) => { ...@@ -345,7 +343,6 @@ const MoveFile = (props: any) => {
ProjectData ProjectData
</div> </div>
<MyTreeView <MyTreeView
// treeData={treeData}
treeData={renderTreeData} treeData={renderTreeData}
renderLabel={renderLabel} renderLabel={renderLabel}
onNodeSelect={onNodeSelect} onNodeSelect={onNodeSelect}
......
src/views/Project/ProjectData/index.tsx
View file @ 7ea52091
...@@ -453,10 +453,8 @@ const ProjectData = observer(() => { ...@@ -453,10 +453,8 @@ const ProjectData = observer(() => {
// 下载文件 // 下载文件
const hanleDownloadFile = (item: any) => { const hanleDownloadFile = (item: any) => {
console.log(item);
const downloadPath = const downloadPath =
path === "/" ? `/${item.name}` : `${path}/${item.name}`; path === "/" ? `/${item.name}` : `${path}/${item.name}`;
console.log(downloadPath);
CloudEController.JobFileDownload( CloudEController.JobFileDownload(
downloadPath, downloadPath,
fileToken as string, fileToken as string,
......
src/views/Project/ProjectJobDetail/index.tsx
View file @ 7ea52091
...@@ -164,7 +164,7 @@ const ProjectSubmitWork = observer(() => { ...@@ -164,7 +164,7 @@ const ProjectSubmitWork = observer(() => {
}; };
const getDataSetSize = async (item: any, index: number) => { const getDataSetSize = async (item: any, index: number) => {
let path = item.path.slice(13); let path = item.path.slice(12);
const lastIndex = path.lastIndexOf("/"); const lastIndex = path.lastIndexOf("/");
if (lastIndex === -1) { if (lastIndex === -1) {
path = "/"; path = "/";
...@@ -184,7 +184,7 @@ const ProjectSubmitWork = observer(() => { ...@@ -184,7 +184,7 @@ const ProjectSubmitWork = observer(() => {
}; };
const getFileSize = (item: any, index: number) => { const getFileSize = (item: any, index: number) => {
let path = item.path.slice(13); let path = item.path.slice(12);
const lastIndex = path.lastIndexOf("/"); const lastIndex = path.lastIndexOf("/");
if (lastIndex === -1) { if (lastIndex === -1) {
path = "/"; path = "/";
......
src/views/Project/ProjectSetting/ProjectMembers/components/ChangePermission.tsx
View file @ 7ea52091
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
// import Dialog from "@/components/Material.Ui/Dialog"; // 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 { observer } from "mobx-react-lite";
import { toJS } from "mobx"; import { toJS } from "mobx";
......
src/views/Project/ProjectSetting/ProjectMembers/index.tsx
View file @ 7ea52091
...@@ -24,7 +24,6 @@ import styles from "./index.module.css"; ...@@ -24,7 +24,6 @@ import styles from "./index.module.css";
import { IDialogInfo } from "./interface"; import { IDialogInfo } from "./interface";
import { toJS } from "mobx"; import { toJS } from "mobx";
import { useStores } from "@/store"; import { useStores } from "@/store";
import { isProjectOwner } from "@/utils/util";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
const ProjectMembers = observer(() => { const ProjectMembers = observer(() => {
...@@ -104,7 +103,6 @@ const ProjectMembers = observer(() => { ...@@ -104,7 +103,6 @@ const ProjectMembers = observer(() => {
.then((res) => { .then((res) => {
const { data = {} } = res; const { data = {} } = res;
setTableData(data?.members || []); setTableData(data?.members || []);
console.log(data?.projectRole, data?.projectRole);
setProjectRole(data?.projectRole || ""); setProjectRole(data?.projectRole || "");
}); });
}, [currentProjectStore?.currentProjectInfo, http]); }, [currentProjectStore?.currentProjectInfo, http]);
......
src/views/Project/ProjectSetting/index.tsx
View file @ 7ea52091
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
import { memo, useState, useMemo } from "react"; import { memo, useMemo } from "react";
import { Box } from "@mui/system"; import { Box } from "@mui/system";
import { useStores } from "@/store/index"; import { useStores } from "@/store/index";
......
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 styles from "./index.module.css";
import MyInput from "@/components/mui/MyInput"; import MyInput from "@/components/mui/MyInput";
import Tooltip from "@mui/material/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import classnames from "classnames"; import classnames from "classnames";
import { useState, useMemo, useImperativeHandle, useCallback } from "react"; import { useState, useMemo, useImperativeHandle } from "react";
import FileSelect from "@/components/FileSelect"; import FileSelect from "@/components/FileSelect";
import moment from "moment"; import moment from "moment";
import MySelect, { optionsTransform } from "../components/MySelect"; import MySelect, { optionsTransform } from "../components/MySelect";
import MyCheckBox from "@/components/mui/MyCheckBox"; import MyCheckBox from "@/components/mui/MyCheckBox";
import MyRadio from "@/components/mui/MyRadio"; import MyRadio from "@/components/mui/MyRadio";
import _ from "lodash";
import { getCheckResult } from "../util"; import { getCheckResult } from "../util";
import fileSelectIcon from "@/assets/project/fileSelect.svg"; import fileSelectIcon from "@/assets/project/fileSelect.svg";
import questionMark from "@/assets/project/questionMark.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"; ...@@ -26,11 +26,12 @@ import fullScreen from "@/assets/project/fullScreen.svg";
import partialScreen from "@/assets/project/partialScreen.svg"; import partialScreen from "@/assets/project/partialScreen.svg";
import { useMessage } from "@/components/MySnackbar"; import { useMessage } from "@/components/MySnackbar";
import { useStores } from "@/store"; import { useStores } from "@/store";
import { observer } from "mobx-react-lite";
import MyPopconfirm from "@/components/mui/MyPopconfirm"; import MyPopconfirm from "@/components/mui/MyPopconfirm";
import styles from "./index.module.css"; import styles from "./index.module.css";
const ProjectSubmitWork = () => { const ProjectSubmitWork = observer(() => {
const Message = useMessage(); const Message = useMessage();
const { currentProjectStore } = useStores(); const { currentProjectStore } = useStores();
const projectId = toJS(currentProjectStore.currentProjectInfo.id); const projectId = toJS(currentProjectStore.currentProjectInfo.id);
...@@ -291,6 +292,6 @@ const ProjectSubmitWork = () => { ...@@ -291,6 +292,6 @@ const ProjectSubmitWork = () => {
/> />
</div> </div>
); );
}; });
export default ProjectSubmitWork; export default ProjectSubmitWork;
src/views/Project/ProjectSubmitWork/interface.ts
View file @ 7ea52091
...@@ -70,7 +70,6 @@ export type IDomType = ...@@ -70,7 +70,6 @@ export type IDomType =
| "dataset" | "dataset"
| "file" | "file"
| "input" | "input"
| "file"
| "select" | "select"
| "multipleselect" | "multipleselect"
| "radio" | "radio"
......
src/views/Project/ProjectWorkbench/workbenchList/components/simpleDialog.tsx
View file @ 7ea52091
import { memo } from "react";
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import styles from "../index.module.css";
import { Box, Typography } from "@mui/material"; import { Box, Typography } from "@mui/material";
import Button from "@mui/material/Button";
import Dialog from "@/components/mui/Dialog"; import Dialog from "@/components/mui/Dialog";
const SimpleDialog = (props: any) => { const SimpleDialog = (props: any) => {
const { openDialog, closeDialog, onConfirm, text, title } = props; const { openDialog, closeDialog, onConfirm, text, title } = props;
return ( return (
< > <>
<Dialog <Dialog
open={openDialog} open={openDialog}
onClose={closeDialog} onClose={closeDialog}
...@@ -17,7 +14,9 @@ const SimpleDialog = (props: any) => { ...@@ -17,7 +14,9 @@ const SimpleDialog = (props: any) => {
title={title} title={title}
> >
<Box> <Box>
<Typography sx={{ fontSize: '14px', fontWeight: '400' }}>{text}</Typography> <Typography sx={{ fontSize: "14px", fontWeight: "400" }}>
{text}
</Typography>
</Box> </Box>
</Dialog> </Dialog>
</> </>
......
src/views/Project/ProjectWorkbench/workbenchList/index.tsx
View file @ 7ea52091
...@@ -7,18 +7,20 @@ ...@@ -7,18 +7,20 @@
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
import { memo, useCallback, useEffect, useState } from "react"; import { memo, useCallback, useEffect, useState } from "react";
import _ from "lodash";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { Box, Typography } from "@mui/material"; import { Box, Typography } from "@mui/material";
import OutlinedInput from "@mui/material/OutlinedInput"; import OutlinedInput from "@mui/material/OutlinedInput";
import SearchIcon from "@mui/icons-material/Search"; import SearchIcon from "@mui/icons-material/Search";
import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress'; import LinearProgress, {
import { TablePagination } from '@mui/material'; linearProgressClasses,
import TextField from '@mui/material/TextField'; } from "@mui/material/LinearProgress";
import MenuItem from '@mui/material/MenuItem'; import { TablePagination } from "@mui/material";
import TextField from "@mui/material/TextField";
import SimpleDialog from "./components/simpleDialog" import MenuItem from "@mui/material/MenuItem";
import SimpleDialog from "./components/simpleDialog";
import { useStores } from "@/store"; import { useStores } from "@/store";
import { observer } from "mobx-react-lite";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import ActionsComponent from "../../../../components/Material.Ui/Table/ActionsComponent" import ActionsComponent from "../../../../components/Material.Ui/Table/ActionsComponent"
import runTime from '../../../../assets/project/runTime.svg' import runTime from '../../../../assets/project/runTime.svg'
...@@ -34,35 +36,35 @@ import onload from '../../../../assets/project/onload.svg' ...@@ -34,35 +36,35 @@ import onload from '../../../../assets/project/onload.svg'
import { import {
getWorkflowJobList, getWorkflowJobList,
deleteWorkflowJob, deleteWorkflowJob,
cancelWorkflowJob cancelWorkflowJob,
} from "@/api/workbench_api"; } from "@/api/workbench_api";
import { toJS } from "mobx"; import { toJS } from "mobx";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import usePass from "@/hooks/usePass"; import usePass from "@/hooks/usePass";
import styles from "./index.module.css"; import styles from "./index.module.css";
import { toJS } from "mobx";
const currencies = [ const currencies = [
{ {
value: 'ALL', value: "ALL",
label: '全部', label: "全部",
}, },
{ {
value: 'RUNNING', value: "RUNNING",
label: '正在运行', label: "正在运行",
}, },
{ {
value: 'SUCCEEDED', value: "SUCCEEDED",
label: '运行成功', label: "运行成功",
}, },
{ {
value: 'FAILED', value: "FAILED",
label: '运行失败', label: "运行失败",
}, },
{ {
value: 'ABORTED', value: "ABORTED",
label: '运行终止', label: "运行终止",
}, },
]; ];
...@@ -134,10 +136,48 @@ const ProjectMembers = observer(() => { ...@@ -134,10 +136,48 @@ const ProjectMembers = observer(() => {
setJobName(data.length > 30 ? data.slice(0, 30) : data); setJobName(data.length > 30 ? data.slice(0, 30) : data);
} }
const handleChange = (event: any) => { // 删除作业
setCurrency(event.target.value); 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({
projectId: currentProjectStore.currentProjectInfo.id as string,
page: page,
size: size,
name: jobName,
state: currency === 'ALL' ? "" : currency
});
}, [projectId, getWorkflowJobInfo]);
/** 关闭弹窗 */ /** 关闭弹窗 */
const closeDialog = () => { const closeDialog = () => {
setOpenDialog(false); setOpenDialog(false);
...@@ -147,104 +187,67 @@ const ProjectMembers = observer(() => { ...@@ -147,104 +187,67 @@ const ProjectMembers = observer(() => {
const onConfirm = () => { const onConfirm = () => {
if (dialogType === "del") { if (dialogType === "del") {
delWorkflowJob({ delWorkflowJob({
id: jobData id: jobData,
}) });
} else { } else {
cancelWorkflowJobInfo({ cancelWorkflowJobInfo({
jobid: jobData jobid: jobData,
}) });
} }
}; };
useEffect(() => { useEffect(() => {
getWorkflowJobInfo({ getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string, projectId: projectId as string,
page: page, page: page,
size: size, size: size,
name: jobName, name: jobName,
state: currency === 'ALL' ? "" : currency state: currency === "ALL" ? "" : currency,
}); });
}, [projectId, getWorkflowJobInfo]); }, [
currentProjectStore.currentProjectInfo.id,
getWorkflowJobInfo,
projectId,
page,
size,
jobName,
currency,
]);
const handleChangePage = (event: any, newPage: any) => { const handleChangePage = (event: any, newPage: any) => {
setPage(newPage) setPage(newPage);
getWorkflowJobInfo({ getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string, projectId: projectId as string,
page: newPage, page: newPage,
size: size, size: size,
name: jobName, name: jobName,
state: currency === 'ALL' ? "" : currency state: currency === "ALL" ? "" : currency,
}); });
} };
const handleChangeRowsPerPage = (event: any) => { const handleChangeRowsPerPage = (event: any) => {
setRowsPerPage(event.target.value) setRowsPerPage(event.target.value);
setSize(event.target.value) setSize(event.target.value);
getWorkflowJobInfo({ getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string, projectId: projectId as string,
page: page, page: page,
size: event.target.value, size: event.target.value,
name: jobName, name: jobName,
state: currency === 'ALL' ? "" : currency state: currency === "ALL" ? "" : currency,
}); });
} };
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
getWorkflowJobInfo({ getWorkflowJobInfo({
projectId: currentProjectStore.currentProjectInfo.id as string, projectId: projectId as string,
page: page, page: page,
size: size, size: size,
name: jobName, name: jobName,
state: currency === 'ALL' ? "" : currency state: currency === "ALL" ? "" : currency,
}); });
}, 300) }, 300);
}, [jobName, currency]); }, [jobName, currency, projectId, getWorkflowJobInfo, page, size]);
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 rowClick = useCallback( const rowClick = useCallback(
...@@ -256,8 +259,20 @@ const ProjectMembers = observer(() => { ...@@ -256,8 +259,20 @@ const ProjectMembers = observer(() => {
[navigate], [navigate],
); );
return ( const renderStatusText = (data: string) => {
<Box className={styles.headerBox}> switch (data) {
case "RUNNING":
return "正在运行";
case "ABORTED":
return "运行终止";
case "FAILED":
return "运行失败";
case "SUCCEEDED":
return "运行成功";
default:
return "未知";
}
};
<Box className={styles.tabHeader}> <Box className={styles.tabHeader}>
...@@ -314,7 +329,19 @@ const ProjectMembers = observer(() => { ...@@ -314,7 +329,19 @@ const ProjectMembers = observer(() => {
<img alt="" src={onload} /> <img alt="" src={onload} />
</Box> </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}> <Box className={styles.body}>
{ {
...@@ -403,24 +430,35 @@ const ProjectMembers = observer(() => { ...@@ -403,24 +430,35 @@ const ProjectMembers = observer(() => {
} }
</Box> </Box>
<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 <TablePagination
rowsPerPageOptions={[5, 10, 20, 50]} rowsPerPageOptions={[5, 10, 20, 50]}
labelRowsPerPage={'每页行数：'} labelRowsPerPage={"每页行数："}
ActionsComponent={ActionsComponent} ActionsComponent={ActionsComponent}
component="div" component="div"
count={count || jobList.length} count={count || jobList.length}
rowsPerPage={rowsPerPage || 10} rowsPerPage={rowsPerPage || 10}
page={page} page={page}
onPageChange={handleChangePage}// onPageChange={handleChangePage} //
onRowsPerPageChange={handleChangeRowsPerPage}// onRowsPerPageChange={handleChangeRowsPerPage} //
/>
<SimpleDialog
text={dialogType === "del" ? '任务被删除后将无法恢复，确认继续吗？' : '正在运行的任务终止后将无法重新运行，确认继续吗？'}
title={dialogType === "del" ? '删除任务' : '终止任务'}
openDialog={openDialog}
closeDialog={closeDialog}
onConfirm={onConfirm}
/> />
</Box > </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 style from "./index.module.css";
import classNames from "classnames"; import classNames from "classnames";
import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined"; import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
...@@ -44,9 +44,7 @@ const AddTemplate = observer((props: IAddTemplateProps) => { ...@@ -44,9 +44,7 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
const productId = toJS(currentProjectStore.currentProductInfo.id); const productId = toJS(currentProjectStore.currentProductInfo.id);
const { setShowAddTemplate, getTemplateInfo } = props; const { setShowAddTemplate, getTemplateInfo } = props;
const handleSearch = (value: string) => { const handleSearch = (value: string) => {};
console.log(value);
};
/** 可增加模板列表 */ /** 可增加模板列表 */
const [addTemplateList, setAddTemplateList] = useState([]); const [addTemplateList, setAddTemplateList] = useState([]);
...@@ -83,7 +81,6 @@ const AddTemplate = observer((props: IAddTemplateProps) => { ...@@ -83,7 +81,6 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
}); });
const handleAddTemplate = () => { const handleAddTemplate = () => {
console.log("handleAddTemplate");
addTemplate({ addTemplate({
projectId: projectId as string, projectId: projectId as string,
workflowSpecIds: selectTemplateData, workflowSpecIds: selectTemplateData,
...@@ -93,7 +90,6 @@ const AddTemplate = observer((props: IAddTemplateProps) => { ...@@ -93,7 +90,6 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
// 添加工作流模板-获取模板列表 // 添加工作流模板-获取模板列表
const { run: getAddTemplateList } = useMyRequest(getAddWorkbenchTemplate, { const { run: getAddTemplateList } = useMyRequest(getAddWorkbenchTemplate, {
onSuccess: (result: any) => { onSuccess: (result: any) => {
console.log(result);
setAddTemplateList(result.data); setAddTemplateList(result.data);
// setOpenAddTemplate(true); // setOpenAddTemplate(true);
}, },
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/simpleDialog.tsx
View file @ 7ea52091
import { memo } from "react";
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import styles from "../index.module.css";
import { Box, Typography } from "@mui/material"; import { Box, Typography } from "@mui/material";
import Button from "@mui/material/Button";
import Dialog from "@/components/mui/Dialog"; import Dialog from "@/components/mui/Dialog";
const SimpleDialog = (props: any) => { const SimpleDialog = (props: any) => {
const { openDialog, closeDialog, onConfirm, text, title } = props; const { openDialog, closeDialog, onConfirm, text, title } = props;
return ( return (
< > <>
<Dialog <Dialog
open={openDialog} open={openDialog}
onClose={closeDialog} onClose={closeDialog}
...@@ -17,7 +14,9 @@ const SimpleDialog = (props: any) => { ...@@ -17,7 +14,9 @@ const SimpleDialog = (props: any) => {
title={title} title={title}
> >
<Box> <Box>
<Typography sx={{ fontSize: '14px', fontWeight: '400' }}>{text}</Typography> <Typography sx={{ fontSize: "14px", fontWeight: "400" }}>
{text}
</Typography>
</Box> </Box>
</Dialog> </Dialog>
</> </>
......
src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx
View file @ 7ea52091
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
* @FilePath: /bkunyun/src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx * @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 * @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 styles from "../index.module.css";
import { Box, Typography } from "@mui/material"; import { Box, Typography } from "@mui/material";
import Button from "@/components/mui/Button"; import Button from "@/components/mui/Button";
......
src/views/Project/ProjectWorkbench/workbenchTemplate/index.module.css
View file @ 7ea52091
...@@ -19,9 +19,9 @@ ...@@ -19,9 +19,9 @@
.templateBlock { .templateBlock {
width: 21.4876%; width: 21.4876%;
height: 160px; height: 160px;
background: #FFFFFF; background: #ffffff;
border-radius: 4px; border-radius: 4px;
border: 1px solid #EBEDF0; border: 1px solid #ebedf0;
padding: 16px 20px; padding: 16px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -38,12 +38,12 @@ ...@@ -38,12 +38,12 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
align-items: end; align-items: flex-end;
flex-direction: column; flex-direction: column;
} }
.addTemplateBlock { .addTemplateBlock {
background: #FFFFFF; background: #ffffff;
z-index: 900; z-index: 900;
border-radius: 16px 0px 0px 0px; border-radius: 16px 0px 0px 0px;
height: 100%; height: 100%;
...@@ -53,9 +53,9 @@ ...@@ -53,9 +53,9 @@
.addTemplateBox { .addTemplateBox {
width: 16.8751%; width: 16.8751%;
height: 114px; height: 114px;
background: #FFFFFF; background: #ffffff;
border-radius: 4px; border-radius: 4px;
border: 1px solid #F0F2F5; border: 1px solid #f0f2f5;
padding: 16px 20px; padding: 16px 20px;
margin: 8px; margin: 8px;
cursor: pointer; cursor: pointer;
...@@ -74,15 +74,15 @@ ...@@ -74,15 +74,15 @@
height: 54px; height: 54px;
font-size: 12px !important; font-size: 12px !important;
font-weight: 400 !important; font-weight: 400 !important;
color: #8A9099 !important; color: #8a9099 !important;
} }
.addNewTemplate { .addNewTemplate {
width: 380px; width: 380px;
height: 194px; height: 194px;
background: #FFFFFF; background: #ffffff;
border-radius: 4px; border-radius: 4px;
border: 1px solid #EBEDF0; border: 1px solid #ebedf0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
......
src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx
View file @ 7ea52091
...@@ -12,21 +12,17 @@ import OutlinedInput from "@mui/material/OutlinedInput"; ...@@ -12,21 +12,17 @@ import OutlinedInput from "@mui/material/OutlinedInput";
import SearchIcon from "@mui/icons-material/Search"; import SearchIcon from "@mui/icons-material/Search";
import { toJS } from "mobx"; import { toJS } from "mobx";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
// import Button from "@mui/material/Button";
import Add from "@mui/icons-material/Add"; import Add from "@mui/icons-material/Add";
import Button from "@/components/mui/Button"; import Button from "@/components/mui/Button";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import TemplateBox from "./components/templateBox"; import TemplateBox from "./components/templateBox";
import SimpleDialog from "./components/simpleDialog"; import SimpleDialog from "./components/simpleDialog";
// import AddTemplate from "./components/addTemplate";
import AddTemplate from "./components/AddTemplate/index"; import AddTemplate from "./components/AddTemplate/index";
import noData from "../../../../assets/project/noTemplate.svg"; import noData from "../../../../assets/project/noTemplate.svg";
import { import {
getWorkbenchTemplate, getWorkbenchTemplate,
deleteWorkbenchTemplate, deleteWorkbenchTemplate,
getAddWorkbenchTemplate,
addWorkbenchTemplate,
} from "@/api/workbench_api"; } from "@/api/workbench_api";
import usePass from "@/hooks/usePass"; import usePass from "@/hooks/usePass";
import { useStores } from "@/store"; import { useStores } from "@/store";
...@@ -47,12 +43,6 @@ const ProjectMembers = observer(() => { ...@@ -47,12 +43,6 @@ const ProjectMembers = observer(() => {
const [templateId, setTemplateId] = useState(""); const [templateId, setTemplateId] = useState("");
/** 简单弹窗（删除模板） */ /** 简单弹窗（删除模板） */
const [openDialog, setOpenDialog] = useState(false); const [openDialog, setOpenDialog] = useState(false);
/** 增加模板 */
const [openAddTemplate, setOpenAddTemplate] = useState(false);
/** 可增加模板列表 */
const [addTemplateList, setAddTemplateList] = useState([]);
/** 已选择增加的模板列表 */
const [selectTemplateData, setSelectTemplateData] = useState<string[]>([]);
const [showAddTemplate, setShowAddTemplate] = useState(false); const [showAddTemplate, setShowAddTemplate] = useState(false);
// 获取模板列表 // 获取模板列表
...@@ -73,35 +63,12 @@ const ProjectMembers = observer(() => { ...@@ -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(() => { useEffect(() => {
getTemplateInfo({ getTemplateInfo({
projectId: currentProjectStore.currentProjectInfo.id as string, projectId: currentProjectStore.currentProjectInfo.id as string,
}); });
}, [currentProjectStore.currentProjectInfo.id, getTemplateInfo]); }, [currentProjectStore.currentProjectInfo.id, getTemplateInfo]);
useEffect(() => {
console.log("projectIdData: ", projectIdData);
}, [projectIdData]);
/** 删除模板 */ /** 删除模板 */
const deleteTemplate = () => { const deleteTemplate = () => {
delTemplate({ delTemplate({
...@@ -124,44 +91,6 @@ const ProjectMembers = observer(() => { ...@@ -124,44 +91,6 @@ const ProjectMembers = observer(() => {
/** 增加模板 */ /** 增加模板 */
const addTemplateBlock = () => { const addTemplateBlock = () => {
setShowAddTemplate(true); 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) => { const searchChange = (data: any) => {
...@@ -171,11 +100,11 @@ const ProjectMembers = observer(() => { ...@@ -171,11 +100,11 @@ const ProjectMembers = observer(() => {
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
getTemplateInfo({ getTemplateInfo({
projectId: currentProjectStore.currentProjectInfo.id as string, projectId: projectIdData as string,
title: templateName, title: templateName,
}); });
}, 300); }, 300);
}, [templateName]); }, [templateName, getTemplateInfo, projectIdData]);
return ( return (
<Box className={styles.headerBox}> <Box className={styles.headerBox}>
...@@ -256,16 +185,6 @@ const ProjectMembers = observer(() => { ...@@ -256,16 +185,6 @@ const ProjectMembers = observer(() => {
</Box> </Box>
)} )}
{/* <AddTemplate
openAddTemplate={openAddTemplate}
closeAddTemplateBlock={closeAddTemplateBlock}
addTemplateList={addTemplateList}
templateSelectCallback={templateSelectCallback}
selectTemplateData={selectTemplateData}
addTemplateCallback={addTemplateCallback}
searchTemplateNameCallback={searchTemplateNameCallback}
/> */}
{showAddTemplate && ( {showAddTemplate && (
<AddTemplate <AddTemplate
setShowAddTemplate={setShowAddTemplate} setShowAddTemplate={setShowAddTemplate}
......
src/views/Project/components/Flow/index.tsx
View file @ 7ea52091
...@@ -155,7 +155,7 @@ const Flow = (props: IProps) => { ...@@ -155,7 +155,7 @@ const Flow = (props: IProps) => {
const lineArr: IEdge[] = []; const lineArr: IEdge[] = [];
tasks?.length && tasks?.length &&
tasks.forEach((item) => { tasks.forEach((item) => {
lineArr.push(...item.edges); item.edges?.length && lineArr.push(...item.edges);
}); });
/** 所有的输入节点ID */ /** 所有的输入节点ID */
const isInput = lineArr?.some((item) => item.target === id); const isInput = lineArr?.some((item) => item.target === id);
...@@ -223,6 +223,7 @@ const Flow = (props: IProps) => { ...@@ -223,6 +223,7 @@ const Flow = (props: IProps) => {
const val: any = []; const val: any = [];
tasks?.length && tasks?.length &&
tasks.forEach((item) => { tasks.forEach((item) => {
console.log(item, "item");
val.push({ val.push({
id: item.id, id: item.id,
type: item.type === "BATCH" ? "batchNode" : "flowNode", type: item.type === "BATCH" ? "batchNode" : "flowNode",
...@@ -249,7 +250,10 @@ const Flow = (props: IProps) => { ...@@ -249,7 +250,10 @@ const Flow = (props: IProps) => {
padding: isFlowNode(item.id) ? "20px" : "12px 20px", 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.type === "BATCH" ? { style: { zIndex: -1 } } : {}),
...(item.parentNode ? { parentNode: item.parentNode } : {}), ...(item.parentNode ? { parentNode: item.parentNode } : {}),
...(item.type === "BATCH" ? { extent: "parent" } : {}), ...(item.type === "BATCH" ? { extent: "parent" } : {}),
...@@ -270,7 +274,8 @@ const Flow = (props: IProps) => { ...@@ -270,7 +274,8 @@ const Flow = (props: IProps) => {
const val: ILine[] = []; const val: ILine[] = [];
tasks?.length && tasks?.length &&
tasks.forEach((item) => { tasks.forEach((item) => {
item.edges.forEach((every) => { item?.edges?.length &&
item?.edges.forEach((every) => {
const newLine = { const newLine = {
...every, ...every,
batchId: item.parentNode ? item.parentNode : item.id, batchId: item.parentNode ? item.parentNode : item.id,
...@@ -340,7 +345,7 @@ const Flow = (props: IProps) => { ...@@ -340,7 +345,7 @@ const Flow = (props: IProps) => {
<ReactFlow <ReactFlow
nodes={nodes} nodes={nodes}
edges={edges} edges={edges}
fitView={flowType === "default" ? false : true} fitView={flowType === "default" ? true : false}
proOptions={{ hideAttribution: true, account: "" }} proOptions={{ hideAttribution: true, account: "" }}
nodeTypes={nodeTypes} nodeTypes={nodeTypes}
onPaneClick={handlePaneClick} onPaneClick={handlePaneClick}
......
src/views/WorkFlowEdit/components/OperatorList/index.tsx
View file @ 7ea52091
...@@ -6,14 +6,12 @@ import { observer } from "mobx-react-lite"; ...@@ -6,14 +6,12 @@ import { observer } from "mobx-react-lite";
import { toJS } from "mobx"; import { toJS } from "mobx";
import cloneDeep from "lodash/cloneDeep"; import cloneDeep from "lodash/cloneDeep";
import { mockData } from "./mock";
import { IOperatorItemProps, IOperatorListProps } from "./interface"; import { IOperatorItemProps, IOperatorListProps } from "./interface";
import { ITask } from "@/views/Project/ProjectSubmitWork/interface"; import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import { IResponse } from "@/api/http"; import { IResponse } from "@/api/http";
import { fetchOperatorList } from "@/api/workbench_api"; import { fetchOperatorList } from "@/api/workbench_api";
import { useStores } from "@/store"; import { useStores } from "@/store";
import { uuid } from "@/utils/util";
import styles from "./index.module.css"; import styles from "./index.module.css";
import MyMenu from "@/components/mui/MyMenu"; import MyMenu from "@/components/mui/MyMenu";
...@@ -26,19 +24,66 @@ 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 * @FilePath: /bkunyun/src/views/WorkFlowEdit/components/OperatorList/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
let count = 1;
const OperatorItem = (props: IOperatorItemProps) => { const OperatorItem = (props: IOperatorItemProps) => {
const { const {
info: { title, description, tags }, info: { title, description, tags },
setTemplateConfigInfo, setTemplateConfigInfo,
templateConfigInfo, templateConfigInfo,
setOperatorListData,
operatorListData,
info,
} = props; } = props;
const [isDragStyle, setIsDragStyle] = useState<boolean>(false); const [isDragStyle, setIsDragStyle] = useState<boolean>(false);
/** 拖拽开始 */ /** 拖拽开始 */
const onDragStart = useCallback(() => { const onDragStart = useCallback(() => {
setIsDragStyle(true); 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( const onDragEnd = useCallback(
(e: React.DragEvent<HTMLDivElement>) => { (e: React.DragEvent<HTMLDivElement>) => {
...@@ -55,27 +100,25 @@ const OperatorItem = (props: IOperatorItemProps) => { ...@@ -55,27 +100,25 @@ const OperatorItem = (props: IOperatorItemProps) => {
clientX < lowerRightX && clientX < lowerRightX &&
clientY < lowerRightY clientY < lowerRightY
) { ) {
console.log( const batchFlowArr = getBatchFlowArr(info.id);
const newBatchFlowArr = getCopyBatchFlowArr(
batchFlowArr,
clientX - upperLeftPointX, clientX - upperLeftPointX,
clientY - upperLeftPointY, clientY - upperLeftPointY
"0000000"
); );
const newVal = [ const newVal = cloneDeep(templateConfigInfo);
...cloneDeep(templateConfigInfo), newVal.push(...newBatchFlowArr);
{
...props.info,
uuid: uuid(),
position: {
x: clientX - upperLeftPointX,
y: clientY - upperLeftPointY,
},
},
];
setTemplateConfigInfo(newVal); setTemplateConfigInfo(newVal);
} }
setIsDragStyle(false); setIsDragStyle(false);
}, },
[props.info, setTemplateConfigInfo, templateConfigInfo] [
getBatchFlowArr,
getCopyBatchFlowArr,
info.id,
setTemplateConfigInfo,
templateConfigInfo,
]
); );
return ( return (
...@@ -105,7 +148,14 @@ const OperatorItem = (props: IOperatorItemProps) => { ...@@ -105,7 +148,14 @@ const OperatorItem = (props: IOperatorItemProps) => {
</span> </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> <div>ddd</div>
</MyMenu> </MyMenu>
</div> </div>
...@@ -146,7 +196,6 @@ const OperatorList = observer((props: IOperatorListProps) => { ...@@ -146,7 +196,6 @@ const OperatorList = observer((props: IOperatorListProps) => {
}); });
} }
}; };
return ( return (
<div className={styles.operatorListBox}> <div className={styles.operatorListBox}>
<div className={styles.searchBox}> <div className={styles.searchBox}>
...@@ -163,12 +212,14 @@ const OperatorList = observer((props: IOperatorListProps) => { ...@@ -163,12 +212,14 @@ const OperatorList = observer((props: IOperatorListProps) => {
</div> </div>
<div className={styles.listBox}> <div className={styles.listBox}>
{operatorListData {operatorListData
// .filter((item) => item.type === "BATCH") .filter((item) => item.type === "BATCH")
.map((item) => { .map((item) => {
return ( return (
<OperatorItem <OperatorItem
key={item.id} key={item.id}
info={item} info={item}
setOperatorListData={setOperatorListData}
operatorListData={operatorListData}
templateConfigInfo={templateConfigInfo} templateConfigInfo={templateConfigInfo}
setTemplateConfigInfo={setTemplateConfigInfo} setTemplateConfigInfo={setTemplateConfigInfo}
/> />
......
src/views/WorkFlowEdit/components/OperatorList/interface.ts
View file @ 7ea52091
...@@ -4,14 +4,16 @@ import { ITask } from "@/views/Project/ProjectSubmitWork/interface" ...@@ -4,14 +4,16 @@ import { ITask } from "@/views/Project/ProjectSubmitWork/interface"
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-06 15:32:11 * @Date: 2022-07-06 15:32:11
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @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 * @FilePath: /bkunyun/src/views/WorkFlowEdit/components/OperatorList/interface.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
export interface IOperatorItemProps { export interface IOperatorItemProps {
info: ITask info: ITask
setTemplateConfigInfo: (val: ITask[]) => void; setTemplateConfigInfo: (val: ITask[]) => void;
templateConfigInfo: ITask[] templateConfigInfo: ITask[];
setOperatorListData: (val: ITask[]) => void;
operatorListData: ITask[]
} }
export interface IOperatorListProps { export interface IOperatorListProps {
......
src/views/WorkFlowEdit/components/ParameterSetting/index.module.css
View file @ 7ea52091
...@@ -61,6 +61,63 @@ ...@@ -61,6 +61,63 @@
); );
cursor: pointer; 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 { .noData {
height: calc(100vh - 140px); height: calc(100vh - 140px);
display: flex; display: flex;
......
src/views/demo/index.tsx
View file @ 7ea52091
import { useMessage } from "@/components/MySnackbar"; import { useMessage } from "@/components/MySnackbar";
import usePass from "@/hooks/usePass"; // import usePass from "@/hooks/usePass";
import { operation, route } from "@/router"; import { operation, route } from "@/router";
import { Button } from "@mui/material"; import { Button } from "@mui/material";
import { Box } from "@mui/system"; import { Box } from "@mui/system";
...@@ -11,12 +11,12 @@ const Demo = ({ ...@@ -11,12 +11,12 @@ const Demo = ({
childrenRoutes?: Array<route | operation>; childrenRoutes?: Array<route | operation>;
}) => { }) => {
const message = useMessage(); const message = useMessage();
const isPass = usePass(); // const isPass = usePass();
useEffect(() => { useEffect(() => {
console.log(isPass("PROJECT_OVERIVEW_CREATE"), "11111111111"); // console.log(isPass("PROJECT_OVERIVEW_CREATE"), "11111111111");
console.log(isPass("PROJECT_SUMMARY_MEMBER"), "2222222"); // console.log(isPass("PROJECT_SUMMARY_MEMBER"), "2222222");
console.log(isPass("test"), "33333"); // console.log(isPass("test"), "33333");
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
......
src/views/mui_demo/button.tsx
View file @ 7ea52091
import { memo, useCallback, useEffect, useMemo, useState } from "react"; import { memo } from "react";
import _ from "lodash"; import DeleteIcon from "@mui/icons-material/Delete";
import { IResponse, useHttp } from "@/api/http";
import { useStores } from "@/store";
import DeleteIcon from '@mui/icons-material/Delete';
import Button from "@/components/mui/Button"; import Button from "@/components/mui/Button";
const ProjectMembers = () => { const ProjectMembers = () => {
const http = useHttp();
const { currentProjectStore } = useStores();
useEffect(() => {
}, []);
return ( return (
<> <>
<Button size={"large"} text={'确定'} /> <Button size={"large"} text={"确定"} />
&nbsp;&nbsp; &nbsp;&nbsp;
<Button text={'确定'} /> <Button text={"确定"} />
&nbsp;&nbsp; &nbsp;&nbsp;
<Button size={"small"} text={'确定'} /> <Button size={"small"} text={"确定"} />
<br /><br /> <br />
<Button size={"large"} text={'确定'} disabled /> <br />
<Button size={"large"} text={"确定"} disabled />
&nbsp;&nbsp; &nbsp;&nbsp;
<Button text={'确定'} disabled /> <Button text={"确定"} disabled />
&nbsp;&nbsp; &nbsp;&nbsp;
<Button size={"small"} text={'确定'} disabled /> <Button size={"small"} text={"确定"} disabled />
<br /><br /> <br />
<Button size={"large"} color={"secondary"} text={'确定'} /> <br />
<Button size={"large"} color={"secondary"} text={"确定"} />
&nbsp;&nbsp; &nbsp;&nbsp;
<Button color={"secondary"} text={'确定'} /> <Button color={"secondary"} text={"确定"} />
&nbsp;&nbsp; &nbsp;&nbsp;
<Button size={"small"} color={"secondary"} text={'确定'} /> <Button size={"small"} color={"secondary"} text={"确定"} />
<br /> <br /> <br /> <br />
<Button text={'确定'} size={"large"} style={{ color: "aqua", background: "burlywood" }} /> <Button
text={"确定"}
size={"large"}
style={{ color: "aqua", background: "burlywood" }}
/>
&nbsp;&nbsp; &nbsp;&nbsp;
<Button text={'确定'} style={{ color: "aqua", background: "burlywood" }} /> <Button
text={"确定"}
style={{ color: "aqua", background: "burlywood" }}
/>
&nbsp;&nbsp; &nbsp;&nbsp;
<Button text={'确定'} size={"small"} style={{ color: "aqua", background: "burlywood" }} /> <Button
text={"确定"}
size={"small"}
style={{ color: "aqua", background: "burlywood" }}
/>
<br /> <br /> <br /> <br />
outlined outlined
<br /> <br />
<Button size={"large"} variant={"outlined"} text={'确定'} /> <Button size={"large"} variant={"outlined"} text={"确定"} />
&nbsp;&nbsp; &nbsp;&nbsp;
<Button variant={"outlined"} text={'确定'} /> <Button variant={"outlined"} text={"确定"} />
&nbsp;&nbsp; &nbsp;&nbsp;
<Button size={"small"} variant={"outlined"} text={'确定'} /> <Button size={"small"} variant={"outlined"} text={"确定"} />
<br /> <br /> <br /> <br />
<Button size={"large"} variant={"outlined"} disabled text={'确定'} /> <Button size={"large"} variant={"outlined"} disabled text={"确定"} />
&nbsp;&nbsp; &nbsp;&nbsp;
<Button variant={"outlined"} disabled text={'确定'} /> <Button variant={"outlined"} disabled text={"确定"} />
&nbsp;&nbsp; &nbsp;&nbsp;
<Button size={"small"} variant={"outlined"} disabled text={'确定'} /> <Button size={"small"} variant={"outlined"} disabled text={"确定"} />
<br /> <br /> <br /> <br />
<Button size={"large"} variant={"outlined"} color={"secondary"} text={'确定'} /> <Button
size={"large"}
variant={"outlined"}
color={"secondary"}
text={"确定"}
/>
&nbsp;&nbsp; &nbsp;&nbsp;
<Button variant={"outlined"} color={"secondary"} text={'确定'} /> <Button variant={"outlined"} color={"secondary"} text={"确定"} />
&nbsp;&nbsp; &nbsp;&nbsp;
<Button size={"small"} variant={"outlined"} color={"secondary"} text={'确定'} /> <Button
size={"small"}
variant={"outlined"}
color={"secondary"}
text={"确定"}
/>
<br /> <br /> <br /> <br />
<Button text={'确定'} size={"large"} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} /> <Button
text={"确定"}
size={"large"}
variant={"outlined"}
style={{ color: "aqua", background: "burlywood" }}
/>
&nbsp;&nbsp; &nbsp;&nbsp;
<Button text={'确定'} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} /> <Button
text={"确定"}
variant={"outlined"}
style={{ color: "aqua", background: "burlywood" }}
/>
&nbsp;&nbsp; &nbsp;&nbsp;
<Button text={'确定'} size={"small"} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} /> <Button
text={"确定"}
size={"small"}
variant={"outlined"}
style={{ color: "aqua", background: "burlywood" }}
/>
<br /> <br /> <br /> <br />
text text
<br /> <br />
<Button size={"large"} variant={"text"} text={'确定确定确定确定确定确定'} /> <Button
size={"large"}
variant={"text"}
text={"确定确定确定确定确定确定"}
/>
&nbsp;&nbsp; &nbsp;&nbsp;
<Button variant={"text"} text={'确定确定确定确定确定确定'} /> <Button variant={"text"} text={"确定确定确定确定确定确定"} />
&nbsp;&nbsp; &nbsp;&nbsp;
<Button size={"small"} variant={"text"} text={'确定确定确定确定确定确定'} /> <Button
size={"small"}
variant={"text"}
text={"确定确定确定确定确定确定"}
/>
<br /> <br />
<Button size={"large"} disabled variant={"text"} text={'确定确定确定确定确定确定'} /> <Button
size={"large"}
disabled
variant={"text"}
text={"确定确定确定确定确定确定"}
/>
&nbsp;&nbsp; &nbsp;&nbsp;
<Button variant={"text"} disabled text={'确定确定确定确定确定确定'} /> <Button variant={"text"} disabled text={"确定确定确定确定确定确定"} />
&nbsp;&nbsp; &nbsp;&nbsp;
<Button size={"small"} disabled variant={"text"} text={'确定确定确定确定确定确定'} /> <Button
size={"small"}
disabled
variant={"text"}
text={"确定确定确定确定确定确定"}
/>
<br /> <br />
<Button size={"large"} color={"secondary"} variant={"text"} text={'确定确定确定确定确定确定'} /> <Button
size={"large"}
color={"secondary"}
variant={"text"}
text={"确定确定确定确定确定确定"}
/>
&nbsp;&nbsp; &nbsp;&nbsp;
<Button variant={"text"} color={"secondary"} text={'确定确定确定确定确定确定'} /> <Button
variant={"text"}
color={"secondary"}
text={"确定确定确定确定确定确定"}
/>
&nbsp;&nbsp; &nbsp;&nbsp;
<Button size={"small"} color={"secondary"} variant={"text"} text={'确定确定确定确定确定确定'} /> <Button
size={"small"}
color={"secondary"}
variant={"text"}
text={"确定确定确定确定确定确定"}
/>
<br /> <br /> <br /> <br />
img img
<br /> <br />
<Button text={'确定确定确定确定确定确定'} img={<DeleteIcon />} /> <Button text={"确定确定确定确定确定确定"} img={<DeleteIcon />} />
<br /> <br /> <br /> <br />
select select
<br /> <br />
<Button <Button
text={'更多'} text={"更多"}
select={ select={[
[
{ name: "1111111" }, { name: "1111111" },
{ name: "1111111" }, { name: "1111111" },
{ name: "1111111" }, { name: "1111111" },
{ name: "1111111", color: "red" }, { name: "1111111", color: "red" },
] ]}
} /> />
<Button <Button
text={'更多'} text={"更多"}
color={"secondary"} variant={"text"} color={"secondary"}
select={ variant={"text"}
[ select={[
{ name: "1111111" }, { name: "1111111" },
{ name: "1111111" }, { name: "1111111" },
{ name: "1111111" }, { name: "1111111" },
{ name: "1111111", color: "red" }, { name: "1111111", color: "red" },
] ]}
} /> />
</> </>
); );
}; };
......
src/views/mui_demo/input.tsx
View file @ 7ea52091
import { memo, useCallback, useEffect, useMemo, useState } from "react"; import { memo } from "react";
import _ from "lodash"; import { InputAdornment } from "@mui/material";
import { IResponse, useHttp } from "@/api/http";
import { useStores } from "@/store";
import DeleteIcon from '@mui/icons-material/Delete';
import { InputAdornment } from '@mui/material';
import InputComponent from "@/components/mui/Input"; import InputComponent from "@/components/mui/Input";
const ProjectMembers = () => { const ProjectMembers = () => {
const http = useHttp();
const { currentProjectStore } = useStores();
useEffect(() => {
}, []);
return ( return (
<> <>
<InputComponent <InputComponent
fullWidth={false} fullWidth={false}
label={"test"} label={"test"}
defaultValue={"sssssssss"} defaultValue={"sssssssss"}
size={'large'} size={"large"}
/> />
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent <InputComponent
...@@ -31,34 +17,45 @@ const ProjectMembers = () => { ...@@ -31,34 +17,45 @@ const ProjectMembers = () => {
label={"test"} label={"test"}
error={true} error={true}
helperText={"你还急急急靠靠靠靠靠靠靠靠靠靠靠靠靠靠"} helperText={"你还急急急靠靠靠靠靠靠靠靠靠靠靠靠靠靠"}
/>&nbsp;&nbsp;&nbsp;&nbsp; />
&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent <InputComponent
fullWidth={false} fullWidth={false}
label={"test"} label={"test"}
size={'small'} size={"small"}
disabled disabled
/>&nbsp;&nbsp;&nbsp;&nbsp; />
&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent fullWidth={false} label={"xsmall"} size={"xsmall"} />
&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent <InputComponent
fullWidth={false} fullWidth={false}
label={"xsmall"} placeholder={"测试机哦"}
size={'xsmall'} endAdornment={
/>&nbsp;&nbsp;&nbsp;&nbsp; <InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>
}
/>
&nbsp;&nbsp;&nbsp;&nbsp;
<InputComponent <InputComponent
fullWidth={false} fullWidth={false}
placeholder={"测试机哦"} size={"small"}
endAdornment={<InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>} placeholder={"xxxxxx"}
/>&nbsp;&nbsp;&nbsp;&nbsp; endAdornment={
<InputComponent fullWidth={false} size={"small"} placeholder={"xxxxxx"} endAdornment={<InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>} /> <InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>
}
/>
<br /> <br /> <br /> <br />
<InputComponent <InputComponent
fullWidth={true} fullWidth={true}
select={ select={{
{ json: [
json: [{value:'1',label:"2"},{value:'3',label:"4"}] { value: "1", label: "2" },
} { value: "3", label: "4" },
} ],
}}
/> />
<br /><br /> <br />
<br />
{/* <SelectComponent {/* <SelectComponent
option={json} option={json}
/> />
...@@ -72,8 +69,8 @@ const ProjectMembers = () => { ...@@ -72,8 +69,8 @@ const ProjectMembers = () => {
option={json} option={json}
size={"small"} size={"small"}
/> */} /> */}
<br /><br /> <br />
<br />
</> </>
); );
}; };
......
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