Skip to content

B
bkunyun
Commit 667a0357 authored by chenshouchao's avatar chenshouchao
Browse files
Options

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

parent 9c1ebdf0
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 91 deletions
src/components/MySnackbar/MySnackbarProvider.tsx
View file @ 667a0357
......@@ -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
View file @ 667a0357
......@@ -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
View file @ 667a0357
......@@ -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
View file @ 667a0357
......@@ -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
View file @ 667a0357
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
View file @ 667a0357
......@@ -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
View file @ 667a0357
......@@ -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: [
{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment