feat: 参数设置表单校验

src/components/mui/Tabs.tsx

@@ -28,6 +28,7 @@ interface ITabList {
 interface IProps {
 	tabList: ITabList[];
 	defaultValue?: string;
+	tabPanelSx?: any;
 	allowNullValue?: boolean; // 是否允许空值
 }
 
@@ -36,37 +37,46 @@ const theme = createTheme({
 		MuiTab: {
 			styleOverrides: {
 				root: {
-                    paddingLeft: 0,
-                    paddingRight: 0,
-                    paddingTop: '8px',
-                    paddingBottom: '8px',
-					minWidth: '20px',
-					marginRight: '32px',
-					color: '#8A9099',
+					paddingLeft: 0,
+					paddingRight: 0,
+					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) => {
@@ -94,42 +104,38 @@ const Tabs = (props: IProps) => {
 
 	return (
 		<ThemeProvider theme={theme}>
-		<TabContext value={value}>
-			<Box sx={{ borderBottom: 1, borderColor: "#F0F2F5" }}>
-				<TabList
-					onChange={(e: any, val: string) => {
-						onChange(val);
-					}}
-				>
-					{tabList
-						?.filter((item) => !item.hide)
-						.map((item, key) => {
-							return (
-								<Tab
-									key={key}
-									label={labelRender(item, key)}
-									value={item.value}
-									id={item.value}
-									disabled={item.disabled}
-								/>
-							);
-						})}
-				</TabList>
-			</Box>
-			{tabList
-				?.filter((item) => !item.hide)
-				.map((item) => {
-					return (
-						<TabPanel
-							sx={{ padding: "20px 0 0 0" }}
-							value={item.value}
-							key={item.value}
-						>
-							{item.component}
-						</TabPanel>
-					);
-				})}
-		</TabContext>
+			<TabContext value={value}>
+				<Box sx={{ borderBottom: 1, borderColor: "#F0F2F5" }}>
+					<TabList
+						onChange={(e: any, val: string) => {
+							onChange(val);
+						}}
+					>
+						{tabList
+							?.filter((item) => !item.hide)
+							.map((item, key) => {
+								return (
+									<Tab
+										key={key}
+										label={labelRender(item, key)}
+										value={item.value}
+										id={item.value}
+										disabled={item.disabled}
+									/>
+								);
+							})}
+					</TabList>
+				</Box>
+				{tabList
+					?.filter((item) => !item.hide)
+					.map((item) => {
+						return (
+							<TabPanel sx={tabPanelSx} value={item.value} key={item.value}>
+								{item.component}
+							</TabPanel>
+						);
+					})}
+			</TabContext>
 		</ThemeProvider>
 	);
 };

src/views/WorkFlowEdit/index.tsx

@@ -40,7 +40,6 @@ const WorkFlowEdit = (props: IProps) => {
 	const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>([]);
 
 	const [leftContentType, setLeftContentType] = useState("list");
-
 	const [popperTitle, setPopperTitle] = useState(
 		"返回后，当前页面已填写内容将不保存，确认返回吗？"
 	);

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,
+  };
+};