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

f1b5424e · chenshouchao · de23a8e5 · f1b5424e · f1b5424e · f1b5424e
Commit f1b5424e authored Jul 11, 2022 by chenshouchao
Showing with 240 additions and 223 deletions

MyInput.tsx src/components/mui/MyInput.tsx +52 -50

index.tsx src/views/WorkFlowEdit/components/ParameterSetting/index.tsx +182 -173

util.ts src/views/WorkFlowEdit/util.ts +6 -0

No files found.
--- a/src/components/mui/MyInput.tsx
+++ b/src/components/mui/MyInput.tsx
@@ -8,59 +8,61 @@
 */
 import TextField, { TextFieldProps } from "@mui/material/TextField";

-interface MyInputProps extends Omit<TextFieldProps, "value">  {
-  value: any;
-  inputSx?: any;
-  onChange?: any;
-  onFocus?: any;
-  label?: string;
-  variant?: "standard" | "filled" | "outlined";
-  id?: string;
-  size?: "small" | "medium";
-  placeholder?: string;
-  fullWidth?: boolean; // 宽度是否和容器一致
-  InputProps?: any; // input加前后icon可以用这个
-  error?: boolean;
-  helperText?: string;
-};
+interface MyInputProps extends Omit<TextFieldProps, "value"> {
+	value: any;
+	inputSx?: any;
+	onChange?: any;
+	onFocus?: any;
+	label?: string;
+	variant?: "standard" | "filled" | "outlined";
+	id?: string;
+	size?: "small" | "medium";
+	placeholder?: string;
+	fullWidth?: boolean; // 宽度是否和容器一致
+	InputProps?: any; // input加前后icon可以用这个
+	error?: boolean;
+	helperText?: string;
+}

 const MyInput = (props: MyInputProps) => {
-  const {
-    inputSx = {},
-    value,
-    onChange,
-    onFocus,
-    label,
-    id,
-    variant,
-    size = "small",
-    placeholder = "请输入",
-    fullWidth = true,
-    InputProps,
-    error = false,
-    helperText,
-  } = props;
+	const {
+		inputSx = {},
+		value,
+		onChange,
+		onFocus,
+		label,
+		id,
+		variant,
+		size = "small",
+		placeholder = "请输入",
+		fullWidth = true,
+		InputProps,
+		error = false,
+		helperText,
+		disabled,
+	} = props;

-  return (
-    <TextField
-      {...props}
-      error={error}
-      helperText={helperText}
-      sx={{ ...inputSx }}
-      id={id}
-      label={label}
-      variant={variant}
-      onChange={onChange}
-      onFocus={onFocus}
-      size={size}
-      placeholder={placeholder}
-      fullWidth={fullWidth}
-      InputProps={{
-        ...InputProps,
-      }}
-      value={value}
-    />
-  );
+	return (
+		<TextField
+			{...props}
+			error={error}
+			helperText={helperText}
+			sx={{ ...inputSx }}
+			id={id}
+			label={label}
+			variant={variant}
+			onChange={onChange}
+			onFocus={onFocus}
+			size={size}
+			placeholder={placeholder}
+			fullWidth={fullWidth}
+			InputProps={{
+				...InputProps,
+			}}
+			disabled={disabled}
+			value={value}
+		/>
+	);
 };

 export default MyInput;
--- a/src/views/WorkFlowEdit/components/ParameterSetting/index.tsx
+++ b/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,142 +295,151 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 		[templateConfigInfo, setTemplateConfigInfo]
 	);

-	const renderInput = useCallback((parameter: IParameter) => {
-		return (
-			<Tooltip title={parameter.description} placement="top">
-				<div>
-					{parameter.domType.toLowerCase() === "file" && (
-						<MyInput
-							value={parameter.defaultValue || ""}
-							InputProps={{
-								endAdornment: (
-									<img
-										onClick={() => handleOpenFileSelect(taskId, parameter.name)}
-										src={fileSelectIcon}
-										alt=""
-										className={styles.fileSelectImg}
-									/>
-								),
-							}}
-							placeholder="请选择"
-							error={parameter.error || false}
-							helperText={parameter.helperText}
-							disabled={parameter.parameterGroup === "out"}
-						></MyInput>
-					)}
-					{parameter.domType.toLowerCase() === "path" && (
-						<MyInput
-							value={parameter.defaultValue || ""}
-							InputProps={{
-								endAdornment: (
-									<img
-										onClick={() => handleOpenFileSelect(taskId, parameter.name)}
-										src={fileSelectIcon}
-										alt=""
-										className={styles.fileSelectImg}
-									/>
-								),
-							}}
-							placeholder="请选择"
-							error={parameter.error || false}
-							helperText={parameter.helperText}
-							disabled={parameter.parameterGroup === "out"}
-						></MyInput>
-					)}
-					{parameter.domType.toLowerCase() === "dataset" && (
-						<MyInput
-							value={parameter.defaultValue || ""}
-							InputProps={{
-								endAdornment: (
-									<img
-										onClick={() => handleOpenFileSelect(taskId, parameter.name)}
-										src={fileSelectIcon}
-										alt=""
-										className={styles.fileSelectImg}
-									/>
-								),
-							}}
-							placeholder="请选择"
-							error={parameter.error || false}
-							helperText={parameter.helperText}
-							disabled={parameter.parameterGroup === "out"}
-						></MyInput>
-					)}
-					{parameter.domType.toLowerCase() === "input" && (
-						<MyInput
-							value={parameter.defaultValue || ""}
-							onChange={(e: any) =>
-								handleParameterChange(e, parameter.id || "")
-							}
-							placeholder="请输入"
-							error={parameter.error || false}
-							helperText={parameter.helperText}
-							disabled={parameter.parameterGroup === "out"}
-						></MyInput>
-					)}
-					{parameter.domType.toLowerCase() === "select" && (
-						<MySelect
-							value={parameter.defaultValue}
-							onChange={(e: any) =>
-								handleParameterChange(e, parameter.id || "")
-							}
-							error={parameter.error || false}
-							helpertext={parameter.helperText}
-							options={optionsTransform(parameter?.choices || [], "label")}
-							disabled={parameter.parameterGroup === "out"}
-						></MySelect>
-					)}
-					{parameter.domType.toLowerCase() === "multipleselect" && (
-						<MySelect
-							value={parameter.defaultValue}
-							onChange={(e: any) =>
-								handleParameterChange(e, parameter.id || "")
-							}
-							multiple={true}
-							error={parameter.error || false}
-							helpertext={parameter.helperText}
-							options={optionsTransform(parameter.choices, "label")}
-							disabled={parameter.parameterGroup === "out"}
-						></MySelect>
-					)}
-					{parameter.domType.toLowerCase() === "radio" && (
-						<MyRadio
-							value={parameter.defaultValue}
-							onChange={(e: any) =>
-								handleParameterChange(e, parameter.id || "")
-							}
-							options={optionsTransform(parameter.choices, "label")}
-							error={parameter.error || false}
-							helperText={parameter.helperText}
-						></MyRadio>
-					)}
-					{parameter.domType.toLowerCase() === "checkbox" && (
-						<MyCheckBox
-							value={parameter.defaultValue}
-							onChange={(e: any) =>
-								handleParameterChange(
-									{
-										target: {
-											value: e,
+	const renderInput = useCallback(
+		(parameter: IParameter) => {
+			return (
+				<Tooltip title={parameter.description} placement="top">
+					<div>
+						{parameter.domType.toLowerCase() === "file" && (
+							<MyInput
+								value={parameter.defaultValue || ""}
+								InputProps={{
+									endAdornment: (
+										<img
+											onClick={() =>
+												handleOpenFileSelect(taskId, parameter.name)
+											}
+											src={fileSelectIcon}
+											alt=""
+											className={styles.fileSelectImg}
+										/>
+									),
+								}}
+								placeholder="请选择"
+								error={parameter.error || false}
+								helperText={parameter.helperText}
+								disabled={parameter.parameterGroup === "out"}
+							></MyInput>
+						)}
+						{parameter.domType.toLowerCase() === "path" && (
+							<MyInput
+								value={parameter.defaultValue || ""}
+								InputProps={{
+									endAdornment: (
+										<img
+											onClick={() =>
+												handleOpenFileSelect(taskId, parameter.name)
+											}
+											src={fileSelectIcon}
+											alt=""
+											className={styles.fileSelectImg}
+										/>
+									),
+								}}
+								placeholder="请选择"
+								error={parameter.error || false}
+								helperText={parameter.helperText}
+								disabled={parameter.parameterGroup === "out"}
+							></MyInput>
+						)}
+						{parameter.domType.toLowerCase() === "dataset" && (
+							<MyInput
+								value={parameter.defaultValue || ""}
+								InputProps={{
+									endAdornment: (
+										<img
+											onClick={() =>
+												handleOpenFileSelect(taskId, parameter.name)
+											}
+											src={fileSelectIcon}
+											alt=""
+											className={styles.fileSelectImg}
+										/>
+									),
+								}}
+								placeholder="请选择"
+								error={parameter.error || false}
+								helperText={parameter.helperText}
+								disabled={parameter.parameterGroup === "out"}
+							></MyInput>
+						)}
+						{parameter.domType.toLowerCase() === "input" && (
+							<MyInput
+								value={parameter.defaultValue || ""}
+								onChange={(e: any) =>
+									handleParameterChange(e, parameter.id || "")
+								}
+								placeholder="请输入"
+								error={parameter.error || false}
+								helperText={parameter.helperText}
+								disabled={parameter.parameterGroup === "out"}
+							></MyInput>
+						)}
+						{parameter.domType.toLowerCase() === "select" && (
+							<MySelect
+								value={parameter.defaultValue}
+								onChange={(e: any) =>
+									handleParameterChange(e, parameter.id || "")
+								}
+								error={parameter.error || false}
+								helpertext={parameter.helperText}
+								options={optionsTransform(parameter?.choices || [], "label")}
+								disabled={parameter.parameterGroup === "out"}
+							></MySelect>
+						)}
+						{parameter.domType.toLowerCase() === "multipleselect" && (
+							<MySelect
+								value={parameter.defaultValue}
+								onChange={(e: any) =>
+									handleParameterChange(e, parameter.id || "")
+								}
+								multiple={true}
+								error={parameter.error || false}
+								helpertext={parameter.helperText}
+								options={optionsTransform(parameter.choices, "label")}
+								disabled={parameter.parameterGroup === "out"}
+							></MySelect>
+						)}
+						{parameter.domType.toLowerCase() === "radio" && (
+							<MyRadio
+								value={parameter.defaultValue}
+								onChange={(e: any) =>
+									handleParameterChange(e, parameter.id || "")
+								}
+								options={optionsTransform(parameter.choices, "label")}
+								error={parameter.error || false}
+								helperText={parameter.helperText}
+							></MyRadio>
+						)}
+						{parameter.domType.toLowerCase() === "checkbox" && (
+							<MyCheckBox
+								value={parameter.defaultValue}
+								onChange={(e: any) =>
+									handleParameterChange(
+										{
+											target: {
+												value: e,
+											},
 										},
-									},
-									parameter.id || ""
-								)
-							}
-							options={optionsTransform(parameter.choices, "label")}
-							error={parameter.error || false}
-							helperText={parameter.helperText}
-						></MyCheckBox>
-					)}
-					{/* {parameter.description && (
+										parameter.id || ""
+									)
+								}
+								options={optionsTransform(parameter.choices, "label")}
+								error={parameter.error || false}
+								helperText={parameter.helperText}
+							></MyCheckBox>
+						)}
+						{/* {parameter.description && (
 					<Tooltip title={parameter.description} placement="top">
 						<img className={styles.parameterDesc} src={questionMark} alt="" />
 					</Tooltip>
 				)} */}
-				</div>
-			</Tooltip>
-		);
-	}, []);
+					</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

--- a/src/views/WorkFlowEdit/util.ts
+++ b/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);