faet: 完成parameter.hidden动态响应

src/views/WorkFlowEdit/components/ParameterSetting/index.module.css

@@ -93,15 +93,15 @@
 .parameterBox:last-child {
 	margin-bottom: 0;
 }
-.parameterTop {
+.inOutParameterTop {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	margin-bottom: 8px;
 }
-.parameterleft {
+.inOutParameterleft {
 }
-.parameterName {
+.inOutParameterName {
 	color: rgba(30, 38, 51, 1);
 	font-size: 14px;
 	line-height: 22px;
@@ -112,7 +112,7 @@
 	color: rgba(255, 78, 78, 1);
 	margin-left: 4px;
 }
-.parameterdataType {
+.inOutParameterdataType {
 	color: rgba(138, 144, 153, 1);
 	font-size: 12px;
 	line-height: 20px;
@@ -136,3 +136,55 @@
 .paramsGroup{
 	padding-bottom: 24px;
 }
+
+.parameter{
+	padding: 16px 0 24px;
+	border-bottom: 1px solid #F0F2F5;
+}
+.parameter:last-child{
+	border-bottom: none;
+}
+.parameterTop{
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 16px;
+}
+.parameterLeft{
+
+}
+.parameterName{
+	font-size: 14px;
+	color: #1E2633;
+	line-height: 22px;
+	font-weight: 600;
+}
+.parameterClassTypeName{
+	font-size: 14px;
+	color: #8A9099;
+	line-height: 22px;
+}
+/* <div
+	className={styles.parameter}
+	key={parameter.id || "" + parameterIndex}
+>
+	<div className={styles.parameterTop}>
+		<div className={styles.parameterLeft}>
+			<div
+				className={classNames({
+					[styles.parameterTitle]: true,
+					[styles.required]: parameter.required,
+				})}
+			>
+				{parameter.name}
+			</div>
+			<div className={styles.parameterClassTypeName}>
+				{parameter.classTypeName}
+			</div>
+		</div>
+		<MySwitch value={parameter.hidden}></MySwitch>
+	</div>
+	<div className={styles.parameterContent}>
+		{renderInput(parameter)}
+	</div>
+</div> */
\ No newline at end of file

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

@@ -12,19 +12,21 @@ import MyCheckBox from "@/components/mui/MyCheckBox";
 import MySelect, {
 	optionsTransform,
 } from "../../../Project/ProjectSubmitWork/components/MySelect";
+import _ from "lodash";
 import MyRadio from "@/components/mui/MyRadio";
 import questionMark from "@/assets/project/questionMark.svg";
 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";
 
 type IParameterSettingProps = {
 	templateConfigInfo: ITask[];
 	taskId: string;
 };
 
-const templateConfigInfo = [
+const templateConfigInfoMock = [
 	{
 		id: "id",
 		title: "title",
@@ -49,7 +51,7 @@ const templateConfigInfo = [
 				classType: "STRING",
 				classTypeName: "String",
 				value: "",
-				description: "",
+				description: "123",
 				language: "",
 				languageVersion: "",
 				tags: [],
@@ -91,6 +93,32 @@ const templateConfigInfo = [
 				choices: [],
 				parameterGroup: "out",
 			},
+			{
+				hidden: true,
+				id: "999",
+				name: "basis999",
+				required: true,
+				defaultValue: '',
+				domType: "select",
+				classType: "STRING",
+				classTypeName: "String",
+				value: "",
+				description: "789",
+				language: "",
+				languageVersion: "",
+				tags: [],
+				source: "string",
+				productId: "",
+				tasks: [],
+				validators: [
+					{
+						message: "请选择smi文件作为输入",
+						regex: "^.[s][m][i]$",
+					},
+				],
+				choices: [],
+				parameterGroup: "basis",
+			},
 			{
 				hidden: true,
 				id: "",
@@ -179,6 +207,8 @@ const taskId = "id";
 const ParameterSetting = (props: IParameterSettingProps) => {
 	// const { templateConfigInfo, taskId } = props;
 
+	const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>(templateConfigInfoMock as ITask[])
+
 	const [descHeight, setDescHeight] = useState(0);
 	const [isShowAllDese, setIsShowAllDese] = useState(false);
 
@@ -211,8 +241,25 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 		}
 	}, [templateConfigInfo, taskId]);
 
+	// 设置parameter.hidden字段
+	const handleHiddenChange = useCallback((e: any, parameterId: string) => {
+		const result: ITask[] = _.cloneDeep(templateConfigInfo);
+		const taskIndex = result.findIndex((item) => {
+			return item.id === taskId
+		})
+		if (taskIndex !== -1) {
+			result[taskIndex].parameters.forEach((parameter) => {
+				if (parameter.id === parameterId) {
+					parameter.hidden = e.target.checked
+				}
+			})
+		}
+		setTemplateConfigInfo(result)
+	}, [templateConfigInfo, setTemplateConfigInfo])
+
 	const renderInput = useCallback((parameter: IParameter) => {
 		return (
+			<Tooltip title={parameter.description} placement="top">
 			<div>
 				{parameter.domType.toLowerCase() === "file" && (
 					<MyInput
@@ -338,12 +385,13 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 						helperText={parameter.helperText}
 					></MyCheckBox>
 				)}
-				{parameter.description && (
+				{/* {parameter.description && (
 					<Tooltip title={parameter.description} placement="top">
 						<img className={styles.parameterDesc} src={questionMark} alt="" />
 					</Tooltip>
-				)}
+				)} */}
 			</div>
+			</Tooltip>
 		);
 	},[]);
 
@@ -412,16 +460,21 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 							className={styles.parameter}
 							key={parameter.id || "" + parameterIndex}
 						>
+							<div className={styles.parameterTop}>
+								<div className={styles.parameterLeft}>
 									<div
 										className={classNames({
-									[styles.parameterTitle]: true,
+											[styles.parameterName]: true,
 											[styles.required]: parameter.required,
 										})}
 									>
 										{parameter.name}
-								<span className={styles.parameterDataType}>
+									</div>
+									<div className={styles.parameterClassTypeName}>
 										{parameter.classTypeName}
-								</span>
+									</div>
+								</div>
+								<MySwitch value={parameter.hidden} onChange={(e: any) => handleHiddenChange(e, parameter.id || '')}></MySwitch>
 							</div>
 							<div className={styles.parameterContent}>
 								{renderInput(parameter)}
@@ -539,22 +592,22 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 					<div className={styles.paramsList}>
 						{inParameters.map((parameter, index) => {
 							return (
-								<div className={styles.parameterBox} key={index}>
-									<div className={styles.parameterTop}>
-										<div className={styles.parameterleft}>
+								<div className={styles.inOutParameterBox} key={index}>
+									<div className={styles.inOutParameterTop}>
+										<div className={styles.inOutParameterleft}>
 											<div
 												className={classNames({
-													[styles.parameterName]: true,
+													[styles.inOutParameterName]: true,
 													[styles.required]: parameter.required,
 												})}
 											>
 												{parameter.name}
 											</div>
-											<div className={styles.parameterdataType}>
+											<div className={styles.inOutParameterdataType}>
 												{parameter.classTypeName}
 											</div>
 										</div>
-										<div className={styles.parameterRight}>
+										<div className={styles.inOutParameterRight}>
 											<MySwitch value={parameter.hidden}></MySwitch>
 										</div>
 									</div>
@@ -571,23 +624,23 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 					<div className={styles.paramsList}>
 						{inParameters.map((parameter, index) => {
 							return (
-								<div className={styles.parameterBox} key={index}>
-									<div className={styles.parameterTop}>
-										<div className={styles.parameterleft}>
+								<div className={styles.inOutParameterBox} key={index}>
+									<div className={styles.inOutParameterTop}>
+										<div className={styles.inOutParameterleft}>
 											<div
 												className={classNames({
-													[styles.parameterName]: true,
+													[styles.inOutParameterName]: true,
 													[styles.required]: parameter.required,
 												})}
 											>
 												{parameter.name}
 											</div>
-											<div className={styles.parameterdataType}>
+											<div className={styles.inOutParameterdataType}>
 												{parameter.classTypeName}
 											</div>
 										</div>
-										<div className={styles.parameterRight}>
-											{parameter.hidden}
+										<div className={styles.inOutParameterRight}>
+											
 										</div>
 									</div>
 									{renderInput(parameter)}