feat: 完成提交任务表单校验

src/components/MySnackbar/MySnackbarProvider.tsx

@@ -42,7 +42,7 @@ const getTransitionComponent = (transition: "grow" | "fade") => {
 const MySnackbarProvider = ({
   vertical = "top",
   horizontal = "center",
-  autoHideDuration = 2000,
+  autoHideDuration = 5000,
   snackerClasses,
   ClickAwayListenerProps,
   ContentProps,

src/components/mui/MyCheckBox.tsx

@@ -80,7 +80,7 @@ export default function MyCheckBox(props: IMyCheckBoxProps) {
         );
       })}
     </FormGroup>
-      {helperText && <FormHelperText>{helperText}</FormHelperText>}
+      {helperText && error && <FormHelperText>{helperText}</FormHelperText>}
     </FormControl>
   );
 }

src/components/mui/MyRadio.tsx

@@ -59,7 +59,7 @@ export default function MyRadio(props: IMyRadioProps) {
           );
         })}
       </RadioGroup>
-      {helperText && <FormHelperText>{helperText}</FormHelperText>}
+      {helperText && error && <FormHelperText>{helperText}</FormHelperText>}
     </FormControl>
   );
 }

src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx

@@ -3,7 +3,7 @@ import styles from "./index.module.css";
 import MyInput from "@/components/mui/MyInput";
 import Tooltip from "@mui/material/Tooltip";
 import classnames from "classnames";
-import { useState, useMemo } from "react";
+import { useState, useMemo, useImperativeHandle, useCallback } from "react";
 import FileSelect from "@/components/FileSelect";
 import moment from "moment";
 import MySelect, { optionsTransform } from "../components/MySelect";
@@ -18,6 +18,7 @@ import jobSueIcon from "@/assets/project/jobSue.svg";
 type ConfigFormProps = {
   templateConfigInfo?: ITemplateConfig;
   setParameter: any;
+  onRef?: React.Ref<any>
 };
 
 const ConfigForm = (props: ConfigFormProps) => {
@@ -27,12 +28,36 @@ const ConfigForm = (props: ConfigFormProps) => {
       "YYYY_MM_DD_HH_mm"
     )}`
   ); // 任务名称
+  const [nameHelp, setNameHelp] = useState({
+    error: false,
+    helperText: ''
+  })
   const [outputPath, setOutputPath] = useState<string>("ProjectData"); // 输出路径
+  const [outputPathHelp, setOutputPathHelp] = useState({
+    error: false,
+    helperText: ''
+  })
+  const getNameAndPath = () => {
+    return {
+      name,
+      outputPath,
+      nameAndOutputPathCheck: !(checkName(name) || checkOutputPath(outputPath)) // 任务名称、输出路径是否通过校验
+    }
+  }
+
+  useImperativeHandle(props.onRef, () => {
+    return {
+      getNameAndPath: getNameAndPath,
+    };
+  });
+
+
   const [fileSelectOpen, setFileSelectOpen] = useState(false); // 选择输出路径的弹窗显示控制
 
   const onFileSelectConfirm = (path: string) => {
     setFileSelectOpen(false);
     setOutputPath(`ProjectData${path === "/" ? "" : path}`);
+    checkOutputPath(`ProjectData${path === "/" ? "" : path}`)
   };
 
   const handleFileSelectOnClose = () => {
@@ -45,8 +70,42 @@ const ConfigForm = (props: ConfigFormProps) => {
 
   const handleNameChange = (e: any) => {
     setName(e.target.value);
+    checkName(e.target.value)
   };
 
+  const checkName = (name: string = '')=>{
+    const reg = new RegExp(/^[a-zA-Z0-9\u4e00-\u9fa5-_]{3,30}$/)
+    if (reg.test(name)) {
+      setNameHelp({
+        error: false,
+        helperText: ''
+      })
+      return false
+    } else {
+      setNameHelp({
+        error: true,
+        helperText: '请输入正确任务名称（3~30字符，可包含大小写字母、数字、中文、特殊符号“-”、“_”）'
+      })
+      return true
+    }
+  }
+
+  const checkOutputPath = (outputPath: string = '')=>{
+    if (outputPath) {
+      setOutputPathHelp({
+        error: false,
+        helperText: ''
+      })
+      return false
+    } else {
+      setOutputPathHelp({
+        error: true,
+        helperText: '请选择输出路径'
+      })
+      return true
+    }
+  }
+
   const renderTasks: IRenderTasks = useMemo(() => {
     const result: IRenderTasks = [];
     templateConfigInfo?.tasks.forEach((task, taskIndex) => {
@@ -85,66 +144,11 @@ const ConfigForm = (props: ConfigFormProps) => {
     return result;
   }, [templateConfigInfo]);
 
-
-  // const options = [
-  //   {
-  //     key: "1aaaaa",
-  //     value: "a",
-  //   },
-  //   {
-  //     key: "bbbbbb",
-  //     value: "b",
-  //   },
-  //   {
-  //     key: "cccccc",
-  //     value: "c",
-  //   },
-  //   {
-  //     key: "dddddd",
-  //     value: "d",
-  //   },
-  //   {
-  //     key: "bbbbbb",
-  //     value: "e",
-  //   },
-  //   {
-  //     key: "cccccc",
-  //     value: "f",
-  //   },
-  //   {
-  //     key: "dddddd",
-  //     value: "g",
-  //   },
-  // ];
-
-  // path : [a, b]
-
-  // const [selectValue, setSelectValue] = useState("b");
-  // const [selectValue, setSelectValue] = useState<Array<any>>([]);
-  // const handleSelectChange = (e: any) => {
-  //   console.log(e);
-  //   setSelectValue(e.target.value);
-  // };
-
-  // const handleCheckBoxChange = (e: any) => {
-  //   setSelectValue(e);
-  // };
-
-  // const handleRadioChange = (e: any) => {
-  //   console.log(e);
-  //   setSelectValue(e.target.value);
-  // };
-
-  // const renderFormItem = (domtype) => {
-
-  // }
-
   const handleParameterChange = (
     e: any,
     taskId: string,
     parameterName: string
   ) => {
-    console.log(e, taskId, parameterName);
     setParameter(e.target.value, taskId, parameterName);
   };
 
@@ -180,6 +184,8 @@ const ConfigForm = (props: ConfigFormProps) => {
               value={name}
               onChange={handleNameChange}
               placeholder="请输入任务名称"
+              error={nameHelp.error}
+              helperText={nameHelp.helperText}
             ></MyInput>
           </div>
         </div>
@@ -205,6 +211,8 @@ const ConfigForm = (props: ConfigFormProps) => {
                   />
                 ),
               }}
+              error={outputPathHelp.error}
+              helperText={outputPathHelp.helperText}
             ></MyInput>
           </div>
         </div>
@@ -227,13 +235,16 @@ const ConfigForm = (props: ConfigFormProps) => {
               <span className={styles.backgroundTitleText}>{task.title}</span>
             </div>
             <div className={styles.taskConfigBox}>
-              {task.parameters.map((parameter, parameterIndex) => {
+              {task.parameters.filter(parameter => parameter.hidden === false).map((parameter, parameterIndex) => {
                 return (
                   <div
                     className={styles.parameter}
                     key={parameter.id || "" + parameterIndex}
                   >
-                    <div className={styles.parameterTitle}>
+                    <div className={classnames({
+                      [styles.parameterTitle]: true,
+                      [styles.required]: parameter.required,
+                    })}>
                       {parameter.name}
                       <span className={styles.parameterDataType}>
                         {parameter.dataType}

src/views/Project/ProjectSubmitWork/components/MySelect.tsx

 import * as React from "react";
-import Box from "@mui/material/Box";
 import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
 import FormControl from "@mui/material/FormControl";
@@ -58,7 +57,6 @@ export default function MySelect(props: IProps) {
   } = props;
 
   return (
-    <Box sx={{ minWidth: 120 }}>
       <FormControl fullWidth variant={variant} error={error}>
         {isTitle ? (
           <InputLabel id="demo-simple-select-label">
@@ -89,8 +87,7 @@ export default function MySelect(props: IProps) {
               })
             : null}
         </Select>
-        {helperText && <FormHelperText>{helperText}</FormHelperText>}
+        {helperText && error && <FormHelperText>{helperText}</FormHelperText>}
       </FormControl>
-    </Box>
   );
 }

src/views/Project/ProjectSubmitWork/index.tsx

@@ -6,7 +6,7 @@
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./index.module.css";
 import ConfigForm from "./ConfigForm";
 import WorkFlow from "./WorkFlow";
@@ -21,12 +21,16 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { getCheckResult } from "./util";
 import { IResponse } from "@/api/http";
 import { templateConfigJson } from "./mock";
+import { useMessage } from "@/components/MySnackbar";
+
 
 const ProjectSubmitWork = () => {
+  const Message = useMessage()
   const [templateConfigInfo, setTemplateConfigInfo] =
     useState<ITemplateConfig>(templateConfigJson as ITemplateConfig);
   const location: any = useLocation();
   const navigate = useNavigate();
+  let configFormRef: any = React.createRef();
 
   /** 获取模版数据 */
   const { run } = useMyRequest(fetchTemplateConfigInfo, {
@@ -55,26 +59,6 @@ const ProjectSubmitWork = () => {
             const checkResult = getCheckResult(parameter,value)
             parameter.error = checkResult.error
             parameter.helperText = checkResult.helperText
-            // 表单校验
-            // if (parameter.required && !value) {
-            //   parameter.error = true
-            //   parameter.helperText = '该选项是必填项'
-            // } else if (parameter.validators.length > 0) {
-            //   parameter.validators.forEach((validator)=>{
-            //     let error = false
-            //     let helperText = ''
-            //     const reg = new RegExp(validator.regex)
-            //     if (!reg.test(value)) {
-            //       error = true
-            //       helperText = validator.message
-            //     }
-            //     parameter.error = error
-            //     parameter.helperText = helperText
-            //   })
-            // } else {
-            //   parameter.error = false
-            //   parameter.helperText = ''
-            // }
           } else {
             return;
           }
@@ -86,6 +70,31 @@ const ProjectSubmitWork = () => {
     setTemplateConfigInfo(result);
   };
 
+  const handleSubmitForm = () => {
+    let check = true
+    const {name, outputPath, nameAndOutputPathCheck} = configFormRef.current.getNameAndPath()
+    if (!nameAndOutputPathCheck) {
+      check = false
+    }
+    const result: ITemplateConfig = _.cloneDeep(templateConfigInfo);
+    result.tasks.forEach((tack) => {
+      tack.parameters.forEach((parameter) => {
+          const checkResult = getCheckResult(parameter,parameter.value)
+          parameter.error = checkResult.error
+          parameter.helperText = checkResult.helperText
+          if (checkResult.error) {
+            check = false
+          }
+      });
+    });
+    setTemplateConfigInfo(result);
+    if (check) {
+      console.log('提交任务')
+    } else {
+      Message.error('请完善左侧表单再提交')
+    }
+  }
+
   return (
     <div className={styles.swBox}>
       <div className={styles.swHeader}>
@@ -124,12 +133,13 @@ const ProjectSubmitWork = () => {
           <div className={styles.swHeaderGoback}></div>
         </div>
         <div className={styles.swHeaderRight}>
-          <ButtonComponent text="提交任务"></ButtonComponent>
+          <ButtonComponent text="提交任务" click={handleSubmitForm}></ButtonComponent>
         </div>
       </div>
       <div className={styles.swContent}>
         <div className={styles.swFormBox}>
           <ConfigForm
+            onRef={configFormRef}
             templateConfigInfo={templateConfigInfo}
             setParameter={setParameter}
           />

src/views/Project/ProjectSubmitWork/mock.ts

@@ -24,13 +24,13 @@ export const templateConfigJson = {
           name: "in",
           required: true,
           // domType: "input",
-          // domType: "select",
+          domType: "select",
           // domType: "multipleselect",
           // domType: "radio",
-          domType: "checkbox",
+          // domType: "checkbox",
           dataType: "stringParameter",
-          // value: "",
-          value: [],
+          value: "",
+          // value: [],
           description: "输入一段字符串",
           validators: [
             {