Merge branch 'release' into 'master'

Release

See merge request sunyihao/bkunyun!102

src/components/mui/Tabs.tsx

@@ -28,6 +28,7 @@ interface ITabList {
 interface IProps {
 	tabList: ITabList[];
 	defaultValue?: string;
+	tabPanelSx?: any;
 	allowNullValue?: boolean; // 是否允许空值
 }
 
@@ -38,35 +39,44 @@ const theme = createTheme({
 				root: {
 					paddingLeft: 0,
 					paddingRight: 0,
-                    paddingTop: '8px',
-                    paddingBottom: '8px',
-					minWidth: '20px',
-					marginRight: '32px',
-					color: '#8A9099',
+					paddingTop: "8px",
+					paddingBottom: "8px",
+					minWidth: "20px",
+					marginRight: "32px",
+					color: "#8A9099",
 					selected: {
-						color: '#1976d2'
+						color: "#1976d2",
 					},
 					"&.Mui-disabled": {
-						color: '#C2C6CC',
+						color: "#C2C6CC",
 					},
 				},
 			},
 		},
 		// #C2C6CC
-		MuiTabs:{
+		MuiTabs: {
 			styleOverrides: {
 				indicator: {
-					backgroundColor: '#1370FF',
-				}
-			}
+					backgroundColor: "#1370FF",
+				},
+			},
 		},
 	},
 });
 
 const Tabs = (props: IProps) => {
-	const { tabList, defaultValue, allowNullValue = false } = props;
+	const {
+		tabList,
+		defaultValue,
+		allowNullValue = false,
+		tabPanelSx = { padding: "20px 0 0 0" },
+	} = props;
 	const [value, setValue] = useState(
-		defaultValue ? defaultValue : allowNullValue ? '' : tabList.filter((e) => !e.hide)[0].value
+		defaultValue
+			? defaultValue
+			: allowNullValue
+			? ""
+			: tabList.filter((e) => !e.hide)[0].value
 	);
 
 	const onChange = (val: string) => {
@@ -120,11 +130,7 @@ const Tabs = (props: IProps) => {
 					?.filter((item) => !item.hide)
 					.map((item) => {
 						return (
-						<TabPanel
-							sx={{ padding: "20px 0 0 0" }}
-							value={item.value}
-							key={item.value}
-						>
+							<TabPanel sx={tabPanelSx} value={item.value} key={item.value}>
 								{item.component}
 							</TabPanel>
 						);

src/views/Project/components/Flow/index.tsx

@@ -154,6 +154,7 @@ const Flow = (props: IProps) => {
 	/** 内部维护的选择的节点Id */
 	const [inSideNodeId, setInSideNodeId] = useState<string>("");
 
+	/** 删除批节点 */
 	const deleteSelectBatchNode = useCallback(
 		(e: any) => {
 			if (e.keyCode === 8) {
@@ -168,6 +169,7 @@ const Flow = (props: IProps) => {
 		[inSideNodeId, setTasks, tasks]
 	);
 
+	/** 监听鼠标按下事件 */
 	useEffect(() => {
 		window.addEventListener("keyup", deleteSelectBatchNode);
 		return () => {

src/views/WorkFlowEdit/components/OperatorList/index.tsx

@@ -55,6 +55,7 @@ const OperatorItem = (props: IOperatorItemProps) => {
 					if (bol && index === undefined) {
 						index = i;
 					}
+
 					return !bol;
 				});
 				if (index !== undefined) {

src/views/WorkFlowEdit/components/ParameterSetting/index.tsx

@@ -19,7 +19,7 @@ import fileSelectIcon from "@/assets/project/fileSelect.svg";
 import MySwitch from "@/components/mui/MySwitch";
 import Tabs from "@/components/mui/Tabs";
 import classNames from "classnames";
-import { Hidden } from "@mui/material";
+import { getCustomTemplateParameterCheckResult } from "../../util";
 
 type IParameterSettingProps = {
 	templateConfigInfo: ITask[];
@@ -43,11 +43,11 @@ const templateConfigInfoMock = [
 		parameters: [
 			{
 				hidden: true,
-				id: "",
+				id: "1",
 				name: "smi_in",
 				required: true,
-				defaultValue: '',
-				domType: "select",
+				defaultValue: "",
+				domType: "input",
 				classType: "STRING",
 				classTypeName: "String",
 				value: "",
@@ -69,10 +69,10 @@ const templateConfigInfoMock = [
 			},
 			{
 				hidden: true,
-				id: "",
+				id: "2",
 				name: "out",
 				required: true,
-				defaultValue: '',
+				defaultValue: "",
 				domType: "select",
 				classType: "STRING",
 				classTypeName: "String",
@@ -95,10 +95,10 @@ const templateConfigInfoMock = [
 			},
 			{
 				hidden: true,
-				id: "999",
+				id: "3",
 				name: "basis999",
 				required: true,
-				defaultValue: '',
+				defaultValue: "",
 				domType: "select",
 				classType: "STRING",
 				classTypeName: "String",
@@ -121,10 +121,10 @@ const templateConfigInfoMock = [
 			},
 			{
 				hidden: true,
-				id: "",
+				id: "4",
 				name: "basis",
 				required: true,
-				defaultValue: '',
+				defaultValue: "",
 				domType: "select",
 				classType: "STRING",
 				classTypeName: "String",
@@ -147,10 +147,10 @@ const templateConfigInfoMock = [
 			},
 			{
 				hidden: true,
-				id: "",
+				id: "5",
 				name: "senior",
 				required: true,
-				defaultValue: '',
+				defaultValue: "",
 				domType: "select",
 				classType: "STRING",
 				classTypeName: "String",
@@ -173,10 +173,10 @@ const templateConfigInfoMock = [
 			},
 			{
 				hidden: true,
-				id: "",
+				id: "6",
 				name: "hardware",
 				required: true,
-				defaultValue: '',
+				defaultValue: "",
 				domType: "select",
 				classType: "STRING",
 				classTypeName: "String",
@@ -207,7 +207,9 @@ const taskId = "id";
 const ParameterSetting = (props: IParameterSettingProps) => {
 	// const { templateConfigInfo, taskId } = props;
 
-	const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>(templateConfigInfoMock as ITask[])
+	const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>(
+		templateConfigInfoMock as ITask[]
+	);
 
 	const [descHeight, setDescHeight] = useState(0);
 	const [isShowAllDese, setIsShowAllDese] = useState(false);
@@ -242,20 +244,24 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 	}, [templateConfigInfo, taskId]);
 
 	// 设置parameter.hidden字段
-	const handleHiddenChange = useCallback((e: any, parameterId: string) => {
+	const handleHiddenChange = useCallback(
+		(e: any, parameterId: string) => {
 			const result: ITask[] = _.cloneDeep(templateConfigInfo);
 			const taskIndex = result.findIndex((item) => {
-			return item.id === taskId
-		})
+				return item.id === taskId;
+			});
 			if (taskIndex !== -1) {
 				result[taskIndex].parameters.forEach((parameter) => {
 					if (parameter.id === parameterId) {
-					parameter.hidden = e.target.checked
+						console.log(e.target.checked);
+						parameter.hidden = !e.target.checked;
 					}
-			})
+				});
 			}
-		setTemplateConfigInfo(result)
-	}, [templateConfigInfo, setTemplateConfigInfo])
+			setTemplateConfigInfo(result);
+		},
+		[templateConfigInfo, setTemplateConfigInfo]
+	);
 
 	const renderInput = useCallback((parameter: IParameter) => {
 		return (
@@ -277,7 +283,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 							placeholder="请选择"
 							error={parameter.error || false}
 							helperText={parameter.helperText}
-						disabled={parameter.parameterGroup === 'out'}
+							disabled={parameter.parameterGroup === "out"}
 						></MyInput>
 					)}
 					{parameter.domType.toLowerCase() === "path" && (
@@ -296,7 +302,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 							placeholder="请选择"
 							error={parameter.error || false}
 							helperText={parameter.helperText}
-						disabled={parameter.parameterGroup === 'out'}
+							disabled={parameter.parameterGroup === "out"}
 						></MyInput>
 					)}
 					{parameter.domType.toLowerCase() === "dataset" && (
@@ -315,51 +321,51 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 							placeholder="请选择"
 							error={parameter.error || false}
 							helperText={parameter.helperText}
-						disabled={parameter.parameterGroup === 'out'}
+							disabled={parameter.parameterGroup === "out"}
 						></MyInput>
 					)}
 					{parameter.domType.toLowerCase() === "input" && (
 						<MyInput
 							value={parameter.defaultValue || ""}
 							onChange={(e: any) =>
-							handleParameterChange(e, taskId, parameter.name || "")
+								handleParameterChange(e, parameter.id || "")
 							}
 							placeholder="请输入"
 							error={parameter.error || false}
 							helperText={parameter.helperText}
-						disabled={parameter.parameterGroup === 'out'}
+							disabled={parameter.parameterGroup === "out"}
 						></MyInput>
 					)}
 					{parameter.domType.toLowerCase() === "select" && (
 						<MySelect
 							value={parameter.defaultValue}
 							onChange={(e: any) =>
-							handleParameterChange(e, taskId, parameter.name || "")
+								handleParameterChange(e, parameter.id || "")
 							}
 							error={parameter.error || false}
 							helpertext={parameter.helperText}
 							options={optionsTransform(parameter?.choices || [], "label")}
-						disabled={parameter.parameterGroup === 'out'}
+							disabled={parameter.parameterGroup === "out"}
 						></MySelect>
 					)}
 					{parameter.domType.toLowerCase() === "multipleselect" && (
 						<MySelect
 							value={parameter.defaultValue}
 							onChange={(e: any) =>
-							handleParameterChange(e, taskId, parameter.name || "")
+								handleParameterChange(e, parameter.id || "")
 							}
 							multiple={true}
 							error={parameter.error || false}
 							helpertext={parameter.helperText}
 							options={optionsTransform(parameter.choices, "label")}
-						disabled={parameter.parameterGroup === 'out'}
+							disabled={parameter.parameterGroup === "out"}
 						></MySelect>
 					)}
 					{parameter.domType.toLowerCase() === "radio" && (
 						<MyRadio
 							value={parameter.defaultValue}
 							onChange={(e: any) =>
-							handleParameterChange(e, taskId, parameter.name || "")
+								handleParameterChange(e, parameter.id || "")
 							}
 							options={optionsTransform(parameter.choices, "label")}
 							error={parameter.error || false}
@@ -376,8 +382,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 											value: e,
 										},
 									},
-								taskId,
-								parameter.name || ""
+									parameter.id || ""
 								)
 							}
 							options={optionsTransform(parameter.choices, "label")}
@@ -393,7 +398,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 				</div>
 			</Tooltip>
 		);
-	},[]);
+	}, []);
 
 	// 输入参数
 	const inParameters: Array<IParameter> = useMemo(() => {
@@ -405,7 +410,6 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 			);
 		}
 	}, [taskInfo]);
-	console.log(inParameters);
 
 	// 输出参数
 	const outParameters: Array<IParameter> = useMemo(() => {
@@ -451,7 +455,8 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 		}
 	}, [taskInfo]);
 
-	const randerParameters = useCallback((parameters: Array<IParameter>)=>{
+	const randerParameters = useCallback(
+		(parameters: Array<IParameter>) => {
 			return (
 				<div className={styles.parameters}>
 					{parameters.map((parameter, parameterIndex) => {
@@ -474,7 +479,12 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 											{parameter.classTypeName}
 										</div>
 									</div>
-								<MySwitch value={parameter.hidden} onChange={(e: any) => handleHiddenChange(e, parameter.id || '')}></MySwitch>
+									<MySwitch
+										value={!parameter.hidden}
+										onChange={(e: any) =>
+											handleHiddenChange(e, parameter.id || "")
+										}
+									></MySwitch>
 								</div>
 								<div className={styles.parameterContent}>
 									{renderInput(parameter)}
@@ -483,8 +493,10 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 						);
 					})}
 				</div>
-		)
-	},[renderInput])
+			);
+		},
+		[renderInput, handleHiddenChange]
+	);
 
 	const handleOpenFileSelect = (
 		taskId: string = "",
@@ -497,53 +509,80 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 		setFileSelectOpen(true);
 	};
 
-	const handleParameterChange = (
-		e: any,
-		taskId: string,
-		parameterName: string
-	) => {
-		console.log(e.target.value, taskId, parameterName);
+	const handleParameterChange = useCallback(
+		(e: any, parameterId: string) => {
+			console.log(e.target.value, taskId, parameterId);
+			const result: ITask[] = _.cloneDeep(templateConfigInfo);
+			console.log(result);
+			result.forEach((task) => {
+				if (task.id === taskId) {
+					let isCheck = true;
+					task.parameters.forEach((parameter) => {
+						if (parameter.id === parameterId) {
+							parameter.defaultValue = e.target.value;
+							const checkResult = getCustomTemplateParameterCheckResult(
+								parameter,
+								e.target.value
+							);
+							parameter.error = checkResult.error;
+							parameter.helperText = checkResult.helperText;
+						}
+						if (
+							getCustomTemplateParameterCheckResult(
+								parameter,
+								parameter.defaultValue
+							).error === true
+						) {
+							isCheck = false;
+						}
+					});
+					task.isCheck = isCheck;
+				} else {
+					return;
+				}
+			});
+			setTemplateConfigInfo(result);
 			// setParameter(e.target.value, taskId, parameterName);
-	};
+		},
+		[templateConfigInfo, setTemplateConfigInfo]
+	);
 
 	// 参数组tabs
-	const paramsTabList = useMemo(()=>{
+	const paramsTabList = useMemo(() => {
 		return [
 			{
 				label: "基础参数",
 				value: "basis",
 				component: randerParameters(basisParameters),
-				disabled: basisParameters.length === 0
+				disabled: basisParameters.length === 0,
 			},
 			{
 				label: "高级选项",
 				value: "senior",
 				component: randerParameters(seniorParameters),
-				disabled: seniorParameters.length === 0
+				disabled: seniorParameters.length === 0,
 			},
 			{
 				label: "硬件配置",
 				value: "hardware",
 				component: randerParameters(hardwareParameters),
-				disabled: hardwareParameters.length === 0
-			}
-		]
-	}, [basisParameters, seniorParameters, hardwareParameters, randerParameters])
+				disabled: hardwareParameters.length === 0,
+			},
+		];
+	}, [basisParameters, seniorParameters, hardwareParameters, randerParameters]);
 
 	// 激活的参数组tab
-	const activeParamsTab = useMemo(()=>{
+	const activeParamsTab = useMemo(() => {
 		if (basisParameters.length !== 0) {
-			return 'basis'
+			return "basis";
 		} else if (seniorParameters.length !== 0) {
-			return 'senior'
+			return "senior";
 		} else if (hardwareParameters.length !== 0) {
-			return 'hardware'
+			return "hardware";
 		} else {
-			return ''
+			return "";
 		}
-	}, [basisParameters, seniorParameters, hardwareParameters])
-
-	
+	}, [basisParameters, seniorParameters, hardwareParameters]);
 
 	return (
 		<div className={styles.parameterSetting}>
@@ -608,7 +647,12 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 											</div>
 										</div>
 										<div className={styles.inOutParameterRight}>
-											<MySwitch value={parameter.hidden}></MySwitch>
+											<MySwitch
+												value={!parameter.hidden}
+												onChange={(e: any) =>
+													handleHiddenChange(e, parameter.id || "")
+												}
+											></MySwitch>
 										</div>
 									</div>
 									{renderInput(parameter)}
@@ -639,9 +683,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 												{parameter.classTypeName}
 											</div>
 										</div>
-										<div className={styles.inOutParameterRight}>
-											
-										</div>
+										<div className={styles.inOutParameterRight}></div>
 									</div>
 									{renderInput(parameter)}
 								</div>
@@ -650,8 +692,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 					</div>
 				</div>
 			)}
-			{
-				taskInfo && (
+			{taskInfo && (
 				<div className={styles.paramsGroup}>
 					<div className={styles.paramsTitle}>
 						参数组
@@ -670,10 +711,10 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 						tabList={paramsTabList}
 						defaultValue={activeParamsTab}
 						allowNullValue={true}
+						tabPanelSx={{ padding: "7px 0" }}
 					/>
 				</div>
-				)
-			}
+			)}
 			{!taskInfo && (
 				<div className={styles.noData}>
 					<img src={noTemplate} alt="" className={styles.noDataImg} />

src/views/WorkFlowEdit/index.tsx

@@ -2,11 +2,11 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 20:03:56
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-09 15:11:17
+ * @LastEditTime: 2022-07-11 11:31:14
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
 import IconButton from "@mui/material/IconButton";
 
@@ -40,7 +40,6 @@ const WorkFlowEdit = (props: IProps) => {
 	const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>([]);
 
 	const [leftContentType, setLeftContentType] = useState("list");
-
 	const [popperTitle, setPopperTitle] = useState(
 		"返回后，当前页面已填写内容将不保存，确认返回吗？"
 	);
@@ -63,6 +62,13 @@ const WorkFlowEdit = (props: IProps) => {
 		}
 	};
 
+	/** 选中的task 唯一标识符 */
+	const [selectTaskId, setSelectTaskId] = useState<string>();
+
+	/** 设置选中唯一标识符 */
+	const handleNodeClick = useCallback((val: string) => {
+		setSelectTaskId(val);
+	}, []);
 	return (
 		<div className={styles.swBox}>
 			<div className={styles.swHeader}>

src/views/WorkFlowEdit/util.ts

+import { IParameter } from "../Project/ProjectSubmitWork/interface";
+export const getCustomTemplateParameterCheckResult = (
+  parameter: IParameter,
+  value: string
+): {
+  error: boolean;
+  helperText: string;
+} => {
+  let error = false;
+  let helperText = "";
+  // 表单校验
+  if (parameter.required) {
+    // 提交任务时不展示
+    if (parameter.hidden) {
+      if (Array.isArray(value)) {
+        if (value.length === 0) {
+          error = true;
+          helperText = "该参数为必填，您必须为该参数赋予默认值";
+        }
+      } else if (value === "" || value === null || value === undefined) {
+        error = true;
+        helperText = "该参数为必填，您必须为该参数赋予默认值";
+      }
+    }
+  }
+  if (parameter.validators.length > 0) {
+    parameter.validators.forEach((validator) => {
+      const reg = new RegExp(validator.regex);
+      if (!reg.test(value)) {
+        error = true;
+        helperText = validator.message;
+      }
+    });
+  }
+  return {
+    error,
+    helperText,
+  };
+};