feat: 完成参数设置的参数校验

src/components/mui/MyInput.tsx

@@ -22,7 +22,7 @@ interface MyInputProps extends Omit<TextFieldProps, "value">  {
 	InputProps?: any; // input加前后icon可以用这个
 	error?: boolean;
 	helperText?: string;
-};
+}
 
 const MyInput = (props: MyInputProps) => {
 	const {
@@ -39,6 +39,7 @@ const MyInput = (props: MyInputProps) => {
 		InputProps,
 		error = false,
 		helperText,
+		disabled,
 	} = props;
 
 	return (
@@ -58,6 +59,7 @@ const MyInput = (props: MyInputProps) => {
 			InputProps={{
 				...InputProps,
 			}}
+			disabled={disabled}
 			value={value}
 		/>
 	);

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

@@ -255,6 +255,38 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 					if (parameter.id === parameterId) {
 						console.log(e.target.checked);
 						parameter.hidden = !e.target.checked;
+						const checkResult = getCustomTemplateParameterCheckResult(
+							parameter,
+							parameter.defaultValue
+						);
+						parameter.error = checkResult.error;
+						parameter.helperText = checkResult.helperText;
+					}
+				});
+			}
+			setTemplateConfigInfo(result);
+		},
+		[templateConfigInfo, setTemplateConfigInfo]
+	);
+
+	const handleParameterChange = useCallback(
+		(e: any, parameterId: string) => {
+			console.log(e.target.value, taskId, parameterId);
+			const result: ITask[] = _.cloneDeep(templateConfigInfo);
+			console.log(result);
+			const taskIndex = result.findIndex((item) => {
+				return item.id === taskId;
+			});
+			if (taskIndex !== -1) {
+				result[taskIndex].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;
 					}
 				});
 			}
@@ -263,7 +295,8 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 		[templateConfigInfo, setTemplateConfigInfo]
 	);
 
-	const renderInput = useCallback((parameter: IParameter) => {
+	const renderInput = useCallback(
+		(parameter: IParameter) => {
 			return (
 				<Tooltip title={parameter.description} placement="top">
 					<div>
@@ -273,7 +306,9 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 								InputProps={{
 									endAdornment: (
 										<img
-										onClick={() => handleOpenFileSelect(taskId, parameter.name)}
+											onClick={() =>
+												handleOpenFileSelect(taskId, parameter.name)
+											}
 											src={fileSelectIcon}
 											alt=""
 											className={styles.fileSelectImg}
@@ -292,7 +327,9 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 								InputProps={{
 									endAdornment: (
 										<img
-										onClick={() => handleOpenFileSelect(taskId, parameter.name)}
+											onClick={() =>
+												handleOpenFileSelect(taskId, parameter.name)
+											}
 											src={fileSelectIcon}
 											alt=""
 											className={styles.fileSelectImg}
@@ -311,7 +348,9 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 								InputProps={{
 									endAdornment: (
 										<img
-										onClick={() => handleOpenFileSelect(taskId, parameter.name)}
+											onClick={() =>
+												handleOpenFileSelect(taskId, parameter.name)
+											}
 											src={fileSelectIcon}
 											alt=""
 											className={styles.fileSelectImg}
@@ -398,7 +437,9 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 					</div>
 				</Tooltip>
 			);
-	}, []);
+		},
+		[handleParameterChange]
+	);
 
 	// 输入参数
 	const inParameters: Array<IParameter> = useMemo(() => {
@@ -463,7 +504,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 						return (
 							<div
 								className={styles.parameter}
-								key={parameter.id || "" + parameterIndex}
+								key={`${parameter.id}${parameterIndex}`}
 							>
 								<div className={styles.parameterTop}>
 									<div className={styles.parameterLeft}>
@@ -509,44 +550,6 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 		setFileSelectOpen(true);
 	};
 
-	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(() => {
 		return [
@@ -631,7 +634,10 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 					<div className={styles.paramsList}>
 						{inParameters.map((parameter, index) => {
 							return (
-								<div className={styles.inOutParameterBox} key={index}>
+								<div
+									className={styles.inOutParameterBox}
+									key={`${parameter.id}${index}`}
+								>
 									<div className={styles.inOutParameterTop}>
 										<div className={styles.inOutParameterleft}>
 											<div
@@ -666,9 +672,12 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 				<div className={styles.inOutBox}>
 					<div className={styles.paramsTitle}>输出</div>
 					<div className={styles.paramsList}>
-						{inParameters.map((parameter, index) => {
+						{outParameters.map((parameter, index) => {
 							return (
-								<div className={styles.inOutParameterBox} key={index}>
+								<div
+									className={styles.inOutParameterBox}
+									key={`${parameter.id}${index}`}
+								>
 									<div className={styles.inOutParameterTop}>
 										<div className={styles.inOutParameterleft}>
 											<div

src/views/WorkFlowEdit/util.ts

@@ -23,6 +23,12 @@ export const getCustomTemplateParameterCheckResult = (
       }
     }
   }
+  if (error) {
+    return {
+      error,
+      helperText,
+    };
+  }
   if (parameter.validators.length > 0) {
     parameter.validators.forEach((validator) => {
       const reg = new RegExp(validator.regex);