feat: 新增myswitch组件

src/components/mui/MyCheckBox.tsx

@@ -84,6 +84,7 @@ export default function MyCheckBox(props: IMyCheckBoxProps) {
             label={option.label}
             name={option.value}
             onChange={handleMyCheckBoxOnChange}
+            disabled={option.disabled}
           />
         );
       })}

src/components/mui/MyRadio.tsx

@@ -64,6 +64,7 @@ export default function MyRadio(props: IMyRadioProps) {
               value={option.value}
               control={<Radio />}
               label={option.label}
+              disabled={option.disabled}
             />
           );
         })}

src/components/mui/MySwitch.tsx

+import * as React from 'react';
+import Switch from '@mui/material/Switch';
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+
+
+type IMySwitchProps = {
+    value: boolean;
+    onChange?: any;
+    disabled?: boolean;
+
+}
+
+const theme = createTheme({
+	components: {
+		MuiSwitch: {
+			styleOverrides: {
+				root: {
+                    height: '22px',
+                    width: '40px',
+                    boxSizing: 'border-box',
+                    padding: '0',
+				},
+                switchBase:{
+                    top: '4px',
+                    left: '4px',
+                    padding: 0,
+                    '&.Mui-checked': {
+                        left: '2px',
+                        '& + .MuiSwitch-track': {
+                            opacity: 1,
+                        }
+                    },
+                },
+                thumb: {
+                    width: '14px',
+                    height: '14px',
+                    color: '#fff'
+                },
+                track: {
+                    borderRadius: '11px',
+                    backgroundColor: "#E6E8EB",
+                    opacity: 1,
+                },
+			},
+		},
+	},
+});
+
+
+
+const MySwitch = (props: IMySwitchProps) => {
+    const {value, onChange, disabled= false} = props;
+    return (
+        <ThemeProvider theme={theme}>
+        <Switch checked={value} disabled={disabled} onChange={onChange} />
+        </ThemeProvider>
+    )
+}
+
+export default MySwitch;
\ No newline at end of file

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

@@ -15,6 +15,7 @@ import MySelect, {
 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 classNames from "classnames";
 
 type IParameterSettingProps = {
@@ -226,6 +227,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 						placeholder="请选择"
 						error={parameter.error || false}
 						helperText={parameter.helperText}
+						disabled={parameter.parameterGroup === 'out'}
 					></MyInput>
 				)}
 				{parameter.domType.toLowerCase() === "path" && (
@@ -244,6 +246,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 						placeholder="请选择"
 						error={parameter.error || false}
 						helperText={parameter.helperText}
+						disabled={parameter.parameterGroup === 'out'}
 					></MyInput>
 				)}
 				{parameter.domType.toLowerCase() === "dataset" && (
@@ -262,6 +265,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 						placeholder="请选择"
 						error={parameter.error || false}
 						helperText={parameter.helperText}
+						disabled={parameter.parameterGroup === 'out'}
 					></MyInput>
 				)}
 				{parameter.domType.toLowerCase() === "input" && (
@@ -273,6 +277,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 						placeholder="请输入"
 						error={parameter.error || false}
 						helperText={parameter.helperText}
+						disabled={parameter.parameterGroup === 'out'}
 					></MyInput>
 				)}
 				{parameter.domType.toLowerCase() === "select" && (
@@ -284,6 +289,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 						error={parameter.error || false}
 						helpertext={parameter.helperText}
 						options={optionsTransform(parameter?.choices || [], "label")}
+						disabled={parameter.parameterGroup === 'out'}
 					></MySelect>
 				)}
 				{parameter.domType.toLowerCase() === "multipleselect" && (
@@ -296,6 +302,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 						error={parameter.error || false}
 						helpertext={parameter.helperText}
 						options={optionsTransform(parameter.choices, "label")}
+						disabled={parameter.parameterGroup === 'out'}
 					></MySelect>
 				)}
 				{parameter.domType.toLowerCase() === "radio" && (
@@ -372,7 +379,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 						输入
 						<Tooltip
 							title="当某个输入项为启用状态时，代表该输入将由模板使用者在使用的时候填写赋值；当为关闭状态时，代表该输入不需要使用者来填写赋值，而是将其它流程的结果传入。"
-							placement="top"
+							placement="right"
 						>
 							<img
 								className={styles.paramsTitleDesc}
@@ -400,7 +407,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 											</div>
 										</div>
 										<div className={styles.parameterRight}>
-											{parameter.hidden}
+											<MySwitch value={parameter.hidden}></MySwitch>
 										</div>
 									</div>
 									{renderInput(parameter)}
@@ -442,6 +449,25 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 					</div>
 				</div>
 			)}
+			{
+				taskInfo && (
+					<div>
+						<div className={styles.paramsTitle}>
+						参数组
+						<Tooltip
+							title="当某个参数项为启用状态时，代表该参数将由模板使用者在使用的时候填写赋值；当为关闭状态时，代表该参数不需要使用者来填写赋值。"
+							placement="right"
+						>
+							<img
+								className={styles.paramsTitleDesc}
+								src={questionMark}
+								alt=""
+							/>
+						</Tooltip>
+					</div>
+					</div>
+				)
+			}
 			{!taskInfo && (
 				<div className={styles.noData}>
 					<img src={noTemplate} alt="" className={styles.noDataImg} />