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

cn-Feat 20220705 custom template

See merge request !97

src/api/fileserver/CloudEController.ts

@@ -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

@@ -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

@@ -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

@@ -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

-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 {
+		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 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)
-    }
+		selectCallBack && selectCallBack(item, key);
+	};
 	const handleClose = () => setAnchorEl(null);
 
-
 	return (
 		<>
 			<Button
 				size={size || "medium"}
-                variant={variant || 'contained'}
+				variant={variant || "contained"}
 				color={color || "primary"}
 				disableRipple={true}
 				disableFocusRipple={true}
@@ -48,29 +57,36 @@ const ButtonComponent = (props: ButtonTagProps) => {
 				classes={{
 					root: btnStyle.root || classes.root,
 					// disabled: btnStyle.disabled || classes.disabled,
-                    containedSecondary: btnStyle.containedSecondary || classes.containedSecondary,
+					containedSecondary:
+						btnStyle.containedSecondary || classes.containedSecondary,
 					outlined: btnStyle.outlined || classes.outlined,
-                    outlinedSecondary: btnStyle.outlinedSecondary || classes.outlinedSecondary,
+					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)}
+				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={{
+				{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)
-                        })
-                    }} />
-                }
+								[classes.ArrowDropDownIconRootOpen]: Boolean(
+									props.dropValue || anchorEl
+								),
+							}),
+						}}
+					/>
+				)}
 			</Button>
 			<Menu
 				id="simple-menu"
@@ -79,40 +95,67 @@ const ButtonComponent = (props: ButtonTagProps) => {
 				open={Boolean(anchorEl)}
 				onClose={handleClose}
 			>
-                {
-                    select && select.length > 0 && select.map((item, key) => {
+				{select &&
+					select.length > 0 &&
+					select.map((item, key) => {
 						return (
 							<MenuItem
 								key={key}
 								classes={{ root: classes.menuItemRoot }}
-                                onClick={() => handleCloseOption(item, key)}>
+								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)" } },
+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" },
+	text: { backgroundColor: "transparent", boxShadow: "none !important" },
 	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" } },
 	sizeLarge: { "& p": { fontSize: "14px" } },
 	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)" },
-    })
-);
-
+}));
 
 export default ButtonComponent;

src/components/mui/MyMenu.tsx

@@ -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

@@ -18,7 +18,6 @@ type MyTreeViewProps = {
 	renderLabel?: (node: any) => React.ReactNode;
 	treeViewSx?: any;
 	defaultExpanded?: Array<string>;
-  idKey?: string;
 	idFunc?: (node: any) => string;
 };
 
@@ -38,7 +37,6 @@ const MyTreeView = (props: MyTreeViewProps) => {
 		onNodeSelect,
 		onNodeToggle,
 		defaultExpanded,
-    idKey,
 		idFunc,
 	} = props;
 

src/hooks/usePass.ts

@@ -75,7 +75,7 @@ const usePass = () => {
       }
       return false;
     },
-    [permissionStore.allRoutes]
+    [permissionStore.allRoutes, currentProjectStore]
   );
 
   return isPass;

src/index.tsx

@@ -7,8 +7,8 @@ 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
@@ -16,12 +16,25 @@ const root = ReactDOM.createRoot(
 
 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(','),
+		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' }
-  }
+		primary: { main: "#136EFA" },
+		secondary: { main: "#F44335" },
+	},
 });
 
 root.render(

src/utils/helper.ts

@@ -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

-import React, { useState, useImperativeHandle, useMemo } from "react";
+import React, { useImperativeHandle, useMemo } from "react";
 
 import MyDialog from "@/components/mui/MyDialog";
 import { useMessage } from "@/components/MySnackbar";

src/views/Project/ProjectData/MoveFile/index.tsx

@@ -34,9 +34,7 @@ const MoveFile = (props: any) => {
 	const [moveFileSubmitloading, setMoveFileSubmitloading] = useState(false);
 	const [treeData, setTreeData] = useState<any>([]);
 	const [renderTreeData, setRenderTreeData] = useState<any>([]);
-  const [moveFileDialogRef, setMoveFileDialogRef] = useState<any>(
-    React.createRef()
-  );
+	const [moveFileDialogRef] = useState<any>(React.createRef());
 	// 要移动的文件夹  之后用来隐藏文件夹树中同路径的文件夹
 	const [moveFolderPathArr, setMoveFolderPathArr] = useState<Array<string>>([]);
 
@@ -345,7 +343,6 @@ const MoveFile = (props: any) => {
 				ProjectData
 			</div>
 			<MyTreeView
-        // treeData={treeData}
 				treeData={renderTreeData}
 				renderLabel={renderLabel}
 				onNodeSelect={onNodeSelect}

src/views/Project/ProjectData/index.tsx

@@ -453,10 +453,8 @@ const ProjectData = observer(() => {
 
 	// 下载文件
 	const hanleDownloadFile = (item: any) => {
-    console.log(item);
 		const downloadPath =
 			path === "/" ? `/${item.name}` : `${path}/${item.name}`;
-    console.log(downloadPath);
 		CloudEController.JobFileDownload(
 			downloadPath,
 			fileToken as string,

src/views/Project/ProjectJobDetail/index.tsx

@@ -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

@@ -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";
 

src/views/Project/ProjectSetting/ProjectMembers/index.tsx

@@ -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

@@ -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";

src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx

-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

@@ -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

@@ -70,7 +70,6 @@ export type IDomType =
   | "dataset"
   | "file"
   | "input"
-  | "file"
   | "select"
   | "multipleselect"
   | "radio"

src/views/Project/ProjectWorkbench/workbenchList/components/simpleDialog.tsx

-
-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;
 
 	return (
-        < >
+		<>
 			<Dialog
 				open={openDialog}
 				onClose={closeDialog}
@@ -17,7 +14,9 @@ const SimpleDialog = (props: any) => {
 				title={title}
 			>
 				<Box>
-                    <Typography sx={{ fontSize: '14px', fontWeight: '400' }}>{text}</Typography>
+					<Typography sx={{ fontSize: "14px", fontWeight: "400" }}>
+						{text}
+					</Typography>
 				</Box>
 			</Dialog>
 		</>

src/views/Project/ProjectWorkbench/workbenchList/index.tsx

@@ -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'
@@ -34,35 +36,35 @@ import onload from '../../../../assets/project/onload.svg'
 import {
 	getWorkflowJobList,
 	deleteWorkflowJob,
-    cancelWorkflowJob
+	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: "ALL",
+		label: "全部",
 	},
 	{
-        value: 'RUNNING',
-        label: '正在运行',
+		value: "RUNNING",
+		label: "正在运行",
 	},
 	{
-        value: 'SUCCEEDED',
-        label: '运行成功',
+		value: "SUCCEEDED",
+		label: "运行成功",
 	},
 	{
-        value: 'FAILED',
-        label: '运行失败',
+		value: "FAILED",
+		label: "运行失败",
 	},
 	{
-        value: 'ABORTED',
-        label: '运行终止',
+		value: "ABORTED",
+		label: "运行终止",
 	},
 ];
 
@@ -134,10 +136,48 @@ const ProjectMembers = observer(() => {
         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 = () => {
 		setOpenDialog(false);
@@ -147,104 +187,67 @@ const ProjectMembers = observer(() => {
 	const onConfirm = () => {
 		if (dialogType === "del") {
 			delWorkflowJob({
-                id: jobData
-            })
+				id: jobData,
+			});
 		} else {
 			cancelWorkflowJobInfo({
-                jobid: jobData
-            })
+				jobid: jobData,
+			});
 		}
 	};
 
 	useEffect(() => {
 		getWorkflowJobInfo({
-            projectId: currentProjectStore.currentProjectInfo.id as string,
+			projectId: projectId as string,
 			page: page,
 			size: size,
 			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) => {
-        setPage(newPage)
+		setPage(newPage);
 		getWorkflowJobInfo({
-            projectId: currentProjectStore.currentProjectInfo.id as string,
+			projectId: projectId as string,
 			page: newPage,
 			size: size,
 			name: jobName,
-            state: currency === 'ALL' ? "" : currency
+			state: currency === "ALL" ? "" : currency,
 		});
-    }
+	};
 
 	const handleChangeRowsPerPage = (event: any) => {
-        setRowsPerPage(event.target.value)
-        setSize(event.target.value)
+		setRowsPerPage(event.target.value);
+		setSize(event.target.value);
 		getWorkflowJobInfo({
-            projectId: currentProjectStore.currentProjectInfo.id as string,
+			projectId: projectId as string,
 			page: page,
 			size: event.target.value,
 			name: jobName,
-            state: currency === 'ALL' ? "" : currency
+			state: currency === "ALL" ? "" : currency,
 		});
-    }
+	};
 
 	useEffect(() => {
 		setTimeout(() => {
 			getWorkflowJobInfo({
-                projectId: currentProjectStore.currentProjectInfo.id as string,
+				projectId: projectId as string,
 				page: page,
 				size: size,
 				name: jobName,
-                state: currency === 'ALL' ? "" : currency
+				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'
-        }
-    }
+		}, 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,24 +430,35 @@ const ProjectMembers = observer(() => {
                 }
             </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
 				rowsPerPageOptions={[5, 10, 20, 50]}
-                labelRowsPerPage={'每页行数：'}
+				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}
+				onPageChange={handleChangePage} //
+				onRowsPerPageChange={handleChangeRowsPerPage} //
 			/>
 
         </Box >

src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.tsx

-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

-
-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;
 
 	return (
-        < >
+		<>
 			<Dialog
 				open={openDialog}
 				onClose={closeDialog}
@@ -17,7 +14,9 @@ const SimpleDialog = (props: any) => {
 				title={title}
 			>
 				<Box>
-                    <Typography sx={{ fontSize: '14px', fontWeight: '400' }}>{text}</Typography>
+					<Typography sx={{ fontSize: "14px", fontWeight: "400" }}>
+						{text}
+					</Typography>
 				</Box>
 			</Dialog>
 		</>

src/views/Project/ProjectWorkbench/workbenchTemplate/components/templateBox.tsx

@@ -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";

src/views/Project/ProjectWorkbench/workbenchTemplate/index.module.css

@@ -19,9 +19,9 @@
 .templateBlock {
 	width: 21.4876%;
 	height: 160px;
-  background: #FFFFFF;
+	background: #ffffff;
 	border-radius: 4px;
-  border: 1px solid #EBEDF0;
+	border: 1px solid #ebedf0;
 	padding: 16px 20px;
 	display: flex;
 	flex-direction: column;
@@ -38,12 +38,12 @@
 	width: 100%;
 	height: 100%;
 	display: flex;
-  align-items: end;
+	align-items: flex-end;
 	flex-direction: column;
 }
 
 .addTemplateBlock {
-  background: #FFFFFF;
+	background: #ffffff;
 	z-index: 900;
 	border-radius: 16px 0px 0px 0px;
 	height: 100%;
@@ -53,9 +53,9 @@
 .addTemplateBox {
 	width: 16.8751%;
 	height: 114px;
-  background: #FFFFFF;
+	background: #ffffff;
 	border-radius: 4px;
-  border: 1px solid #F0F2F5;
+	border: 1px solid #f0f2f5;
 	padding: 16px 20px;
 	margin: 8px;
 	cursor: pointer;
@@ -74,15 +74,15 @@
 	height: 54px;
 	font-size: 12px !important;
 	font-weight: 400 !important;
-  color: #8A9099 !important;
+	color: #8a9099 !important;
 }
 
 .addNewTemplate {
 	width: 380px;
 	height: 194px;
-  background: #FFFFFF;
+	background: #ffffff;
 	border-radius: 4px;
-  border: 1px solid #EBEDF0;
+	border: 1px solid #ebedf0;
 	display: flex;
 	justify-content: center;
 	align-items: center;

src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx

@@ -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

@@ -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,7 +274,8 @@ const Flow = (props: IProps) => {
 		const val: ILine[] = [];
 		tasks?.length &&
 			tasks.forEach((item) => {
-				item.edges.forEach((every) => {
+				item?.edges?.length &&
+					item?.edges.forEach((every) => {
 						const newLine = {
 							...every,
 							batchId: item.parentNode ? item.parentNode : item.id,
@@ -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

@@ -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

@@ -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

@@ -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/demo/index.tsx

 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";
@@ -11,12 +11,12 @@ const Demo = ({
 	childrenRoutes?: Array<route | operation>;
 }) => {
 	const message = useMessage();
-  const isPass = usePass();
+	// const isPass = usePass();
 
 	useEffect(() => {
-    console.log(isPass("PROJECT_OVERIVEW_CREATE"), "11111111111");
-    console.log(isPass("PROJECT_SUMMARY_MEMBER"), "2222222");
-    console.log(isPass("test"), "33333");
+		// 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
 	}, []);
 

src/views/mui_demo/button.tsx

-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={'确定'} />
+			<Button size={"large"} text={"确定"} />
 			&nbsp;&nbsp;
-            <Button text={'确定'} />
+			<Button text={"确定"} />
 			&nbsp;&nbsp;
-            <Button size={"small"} text={'确定'} />
-            <br /><br />
-            <Button size={"large"} text={'确定'} disabled />
+			<Button size={"small"} text={"确定"} />
+			<br />
+			<br />
+			<Button size={"large"} text={"确定"} disabled />
 			&nbsp;&nbsp;
-            <Button text={'确定'} disabled />
+			<Button text={"确定"} disabled />
 			&nbsp;&nbsp;
-            <Button size={"small"} text={'确定'} disabled />
-            <br /><br />
-            <Button size={"large"} color={"secondary"} text={'确定'} />
+			<Button size={"small"} text={"确定"} disabled />
+			<br />
+			<br />
+			<Button size={"large"} color={"secondary"} text={"确定"} />
 			&nbsp;&nbsp;
-            <Button color={"secondary"} text={'确定'} />
+			<Button color={"secondary"} text={"确定"} />
 			&nbsp;&nbsp;
-            <Button size={"small"} color={"secondary"} text={'确定'} />
+			<Button size={"small"} color={"secondary"} text={"确定"} />
 			<br /> <br />
-            <Button text={'确定'} size={"large"} style={{ color: "aqua", background: "burlywood" }} />
+			<Button
+				text={"确定"}
+				size={"large"}
+				style={{ color: "aqua", background: "burlywood" }}
+			/>
 			&nbsp;&nbsp;
-            <Button text={'确定'} style={{ color: "aqua", background: "burlywood" }} />
+			<Button
+				text={"确定"}
+				style={{ color: "aqua", background: "burlywood" }}
+			/>
 			&nbsp;&nbsp;
-            <Button text={'确定'} size={"small"} style={{ color: "aqua", background: "burlywood" }} />
+			<Button
+				text={"确定"}
+				size={"small"}
+				style={{ color: "aqua", background: "burlywood" }}
+			/>
 			<br /> <br />
 			outlined
 			<br />
-            <Button size={"large"} variant={"outlined"} text={'确定'} />
+			<Button size={"large"} variant={"outlined"} text={"确定"} />
 			&nbsp;&nbsp;
-            <Button variant={"outlined"} text={'确定'} />
+			<Button variant={"outlined"} text={"确定"} />
 			&nbsp;&nbsp;
-            <Button size={"small"} variant={"outlined"} text={'确定'} />
+			<Button size={"small"} variant={"outlined"} text={"确定"} />
 			<br /> <br />
-            <Button size={"large"} variant={"outlined"} disabled text={'确定'} />
+			<Button size={"large"} variant={"outlined"} disabled text={"确定"} />
 			&nbsp;&nbsp;
-            <Button variant={"outlined"} disabled text={'确定'} />
+			<Button variant={"outlined"} disabled text={"确定"} />
 			&nbsp;&nbsp;
-            <Button size={"small"} variant={"outlined"} disabled text={'确定'} />
+			<Button size={"small"} variant={"outlined"} disabled text={"确定"} />
 			<br /> <br />
-            <Button size={"large"} variant={"outlined"} color={"secondary"} text={'确定'} />
+			<Button
+				size={"large"}
+				variant={"outlined"}
+				color={"secondary"}
+				text={"确定"}
+			/>
 			&nbsp;&nbsp;
-            <Button variant={"outlined"} color={"secondary"} text={'确定'} />
+			<Button variant={"outlined"} color={"secondary"} text={"确定"} />
 			&nbsp;&nbsp;
-            <Button size={"small"} variant={"outlined"} color={"secondary"} text={'确定'} />
+			<Button
+				size={"small"}
+				variant={"outlined"}
+				color={"secondary"}
+				text={"确定"}
+			/>
 			<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;
-            <Button text={'确定'} variant={"outlined"} style={{ color: "aqua", background: "burlywood" }} />
+			<Button
+				text={"确定"}
+				variant={"outlined"}
+				style={{ color: "aqua", background: "burlywood" }}
+			/>
 			&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 />
 			text
 			<br />
-            <Button size={"large"} variant={"text"} text={'确定确定确定确定确定确定'} />
+			<Button
+				size={"large"}
+				variant={"text"}
+				text={"确定确定确定确定确定确定"}
+			/>
 			&nbsp;&nbsp;
-            <Button variant={"text"} text={'确定确定确定确定确定确定'} />
+			<Button variant={"text"} text={"确定确定确定确定确定确定"} />
 			&nbsp;&nbsp;
-            <Button size={"small"} variant={"text"} text={'确定确定确定确定确定确定'} />
+			<Button
+				size={"small"}
+				variant={"text"}
+				text={"确定确定确定确定确定确定"}
+			/>
 			<br />
-            <Button size={"large"} disabled variant={"text"} text={'确定确定确定确定确定确定'} />
+			<Button
+				size={"large"}
+				disabled
+				variant={"text"}
+				text={"确定确定确定确定确定确定"}
+			/>
 			&nbsp;&nbsp;
-            <Button variant={"text"} disabled text={'确定确定确定确定确定确定'} />
+			<Button variant={"text"} disabled text={"确定确定确定确定确定确定"} />
 			&nbsp;&nbsp;
-            <Button size={"small"} disabled variant={"text"} text={'确定确定确定确定确定确定'} />
+			<Button
+				size={"small"}
+				disabled
+				variant={"text"}
+				text={"确定确定确定确定确定确定"}
+			/>
 			<br />
-            <Button size={"large"} color={"secondary"} variant={"text"} text={'确定确定确定确定确定确定'} />
+			<Button
+				size={"large"}
+				color={"secondary"}
+				variant={"text"}
+				text={"确定确定确定确定确定确定"}
+			/>
 			&nbsp;&nbsp;
-            <Button variant={"text"} color={"secondary"} text={'确定确定确定确定确定确定'} />
+			<Button
+				variant={"text"}
+				color={"secondary"}
+				text={"确定确定确定确定确定确定"}
+			/>
 			&nbsp;&nbsp;
-            <Button size={"small"} color={"secondary"} variant={"text"} text={'确定确定确定确定确定确定'} />
+			<Button
+				size={"small"}
+				color={"secondary"}
+				variant={"text"}
+				text={"确定确定确定确定确定确定"}
+			/>
 			<br /> <br />
 			img
 			<br />
-            <Button text={'确定确定确定确定确定确定'} img={<DeleteIcon />} />
+			<Button text={"确定确定确定确定确定确定"} img={<DeleteIcon />} />
 			<br /> <br />
 			select
 			<br />
 			<Button
-                text={'更多'}
-                select={
-                    [
+				text={"更多"}
+				select={[
 					{ name: "1111111" },
 					{ name: "1111111" },
 					{ name: "1111111" },
 					{ name: "1111111", color: "red" },
-                    ]
-                } />
+				]}
+			/>
 			<Button
-                text={'更多'}
-                color={"secondary"} variant={"text"}
-                select={
-                    [
+				text={"更多"}
+				color={"secondary"}
+				variant={"text"}
+				select={[
 					{ name: "1111111" },
 					{ name: "1111111" },
 					{ name: "1111111" },
 					{ name: "1111111", color: "red" },
-                    ]
-                } />
-
-
+				]}
+			/>
 		</>
 	);
 };

src/views/mui_demo/input.tsx

-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'}
+				size={"large"}
 			/>
 			&nbsp;&nbsp;&nbsp;&nbsp;
 			<InputComponent
@@ -31,34 +17,45 @@ const ProjectMembers = () => {
 				label={"test"}
 				error={true}
 				helperText={"你还急急急靠靠靠靠靠靠靠靠靠靠靠靠靠靠"}
-            />&nbsp;&nbsp;&nbsp;&nbsp;
+			/>
+			&nbsp;&nbsp;&nbsp;&nbsp;
 			<InputComponent
 				fullWidth={false}
 				label={"test"}
-                size={'small'}
+				size={"small"}
 				disabled
-            />&nbsp;&nbsp;&nbsp;&nbsp;
+			/>
+			&nbsp;&nbsp;&nbsp;&nbsp;
+			<InputComponent fullWidth={false} label={"xsmall"} size={"xsmall"} />
+			&nbsp;&nbsp;&nbsp;&nbsp;
 			<InputComponent
 				fullWidth={false}
-                label={"xsmall"}
-                size={'xsmall'}
-            />&nbsp;&nbsp;&nbsp;&nbsp;
+				placeholder={"测试机哦"}
+				endAdornment={
+					<InputAdornment position="end">11&nbsp;&nbsp;</InputAdornment>
+				}
+			/>
+			&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>} />
+				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"}]
-                    }
-                }
+				select={{
+					json: [
+						{ value: "1", label: "2" },
+						{ value: "3", label: "4" },
+					],
+				}}
 			/>
-            <br /><br />
+			<br />
+			<br />
 			{/* <SelectComponent
                 option={json}
             />
@@ -72,8 +69,8 @@ const ProjectMembers = () => {
                 option={json}
                 size={"small"}
             /> */}
-            <br /><br />
-
+			<br />
+			<br />
 		</>
 	);
 };