Skip to content

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

feat: getCustomTemplateParameterCheckResult方法增加连线逻辑判断

parent 31a3b1a3
Hide whitespace changes
Inline Side-by-side
Showing with 270 additions and 194 deletions
src/views/Project/ProjectWorkbench/workbenchTemplate/components/addTemplate.tsx
View file @ d0c45cef
...@@ -12,198 +12,198 @@ import noData from "../../../../../assets/project/noTemplate.svg"; ...@@ -12,198 +12,198 @@ import noData from "../../../../../assets/project/noTemplate.svg";
import _ from "lodash"; import _ from "lodash";
const AddTemplate = (props: any) => { const AddTemplate = (props: any) => {
const { const {
openAddTemplate, openAddTemplate,
closeAddTemplateBlock, closeAddTemplateBlock,
addTemplateList, addTemplateList,
templateSelectCallback, templateSelectCallback,
selectTemplateData, selectTemplateData,
addTemplateCallback, addTemplateCallback,
searchTemplateNameCallback, searchTemplateNameCallback,
} = props; } = props;
const [templateType, setTemplateType] = useState("public"); const [templateType, setTemplateType] = useState("public");
const radioOptions = [ const radioOptions = [
{ {
value: "public", value: "public",
label: "公共", label: "公共",
}, },
{ {
value: "custom", value: "custom",
label: "自定义", label: "自定义",
}, },
]; ];
const handleRadio = (value: string) => { const handleRadio = (value: string) => {
setTemplateType(value); setTemplateType(value);
}; };
return ( return (
<Box <Box
className={styles.addTemplateMask} className={styles.addTemplateMask}
sx={{ display: openAddTemplate ? "flex" : "none" }} sx={{ display: openAddTemplate ? "flex" : "none" }}
> >
<Box sx={{ height: "50px", display: "flex", alignItems: "center" }}> <Box sx={{ height: "50px", display: "flex", alignItems: "center" }}>
<CloseOutlinedIcon <CloseOutlinedIcon
sx={{ color: "#ffffff", marginRight: "10px", cursor: "pointer" }} sx={{ color: "#ffffff", marginRight: "10px", cursor: "pointer" }}
onClick={() => { onClick={() => {
closeAddTemplateBlock(); closeAddTemplateBlock();
}} }}
/> />
</Box> </Box>
<Box className={styles.addTemplateBlock}> <Box className={styles.addTemplateBlock}>
<Box sx={{ padding: "24px 32px" }}> <Box sx={{ padding: "24px 32px" }}>
<Typography <Typography
sx={{ fontSize: "18px", fontWeight: "600", color: "#1E2633" }} sx={{ fontSize: "18px", fontWeight: "600", color: "#1E2633" }}
> >
添加工作流模版 添加工作流模版
</Typography> </Typography>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
marginBottom: "20px", marginBottom: "20px",
}} }}
> >
<OutlinedInput <OutlinedInput
onChange={(e: any) => { onChange={(e: any) => {
_.debounce(() => { _.debounce(() => {
searchTemplateNameCallback(e.target.value); searchTemplateNameCallback(e.target.value);
}, 200)(); }, 200)();
}} }}
placeholder="输入关键词搜索" placeholder="输入关键词搜索"
size="small" size="small"
sx={{ width: 340, height: 32, marginTop: "20px" }} sx={{ width: 340, height: 32, marginTop: "20px" }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />} endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
/> />
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
justifyContent: "flex-end", justifyContent: "flex-end",
alignItems: "center", alignItems: "center",
}} }}
> >
<RadioGroupOfButtonStyle <RadioGroupOfButtonStyle
value={templateType} value={templateType}
radioOptions={radioOptions} radioOptions={radioOptions}
handleRadio={handleRadio} handleRadio={handleRadio}
></RadioGroupOfButtonStyle> ></RadioGroupOfButtonStyle>
<Button <Button
click={addTemplateCallback} click={addTemplateCallback}
size={"small"} size={"small"}
style={{ style={{
marginLeft: "12px", marginLeft: "12px",
}} }}
text={ text={
"添加模版" + "添加模版" +
(selectTemplateData.length === 0 (selectTemplateData.length === 0
? "" ? ""
: `(${selectTemplateData.length})`) : `(${selectTemplateData.length})`)
} }
/> />
</Box> </Box>
</Box> </Box>
{addTemplateList.length === 0 && ( {addTemplateList.length === 0 && (
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
flexDirection: "column", flexDirection: "column",
minHeight: "calc(100vh - 376px)", minHeight: "calc(100vh - 376px)",
justifyContent: "center", justifyContent: "center",
}} }}
> >
<img alt="" src={noData} /> <img alt="" src={noData} />
<Typography <Typography
sx={{ fontSize: "12px", fontWeight: "400", color: "#8A9099" }} sx={{ fontSize: "12px", fontWeight: "400", color: "#8A9099" }}
> >
暂未相关模版 暂无相关模版
</Typography> </Typography>
</Box> </Box>
)} )}
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
flexWrap: "wrap", flexWrap: "wrap",
overflowX: "hidden", overflowX: "hidden",
overflowY: "overlay", overflowY: "overlay",
marginLeft: "-8px", marginLeft: "-8px",
}} }}
> >
{addTemplateList.map((item: any, key: any) => { {addTemplateList.map((item: any, key: any) => {
return ( return (
<Box <Box
className={styles.addTemplateBox} className={styles.addTemplateBox}
onClick={() => { onClick={() => {
templateSelectCallback(item.id); templateSelectCallback(item.id);
}} }}
sx={{ sx={{
border: selectTemplateData.includes(item.id) border: selectTemplateData.includes(item.id)
? "1px solid #1370FF" ? "1px solid #1370FF"
: "1px solid #EBEDF0;", : "1px solid #EBEDF0;",
}} }}
key={item.id} key={item.id}
> >
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
}} }}
> >
<Typography <Typography
sx={{ sx={{
fontSize: "14px", fontSize: "14px",
fontWeight: "600", fontWeight: "600",
color: "#1E2633", color: "#1E2633",
marginBottom: "4px", marginBottom: "4px",
overflow: "hidden", overflow: "hidden",
textOverflow: "ellipsis", textOverflow: "ellipsis",
}} }}
> >
{item.title} {item.title}
</Typography> </Typography>
<Checkbox <Checkbox
size="small" size="small"
sx={{ padding: "0px" }} sx={{ padding: "0px" }}
checked={selectTemplateData.includes(item.id)} checked={selectTemplateData.includes(item.id)}
/> />
</Box> </Box>
<Box sx={{ display: "flex", marginBottom: "8px" }}> <Box sx={{ display: "flex", marginBottom: "8px" }}>
<Typography <Typography
sx={{ sx={{
fontSize: "12px", fontSize: "12px",
fontWeight: "400", fontWeight: "400",
color: "#1370FF", color: "#1370FF",
marginRight: "24px", marginRight: "24px",
}} }}
> >
版本：{item.version} 版本：{item.version}
</Typography> </Typography>
<Typography <Typography
sx={{ sx={{
fontSize: "12px", fontSize: "12px",
fontWeight: "400", fontWeight: "400",
color: "#1370FF", color: "#1370FF",
}} }}
> >
更新时间：{item.updateTime} 更新时间：{item.updateTime}
</Typography> </Typography>
</Box> </Box>
<Typography className={styles.templateDescText}> <Typography className={styles.templateDescText}>
{item.description} {item.description}
</Typography> </Typography>
</Box> </Box>
); );
})} })}
</Box> </Box>
</Box> </Box>
</Box> </Box>
</Box> </Box>
); );
}; };
export default memo(AddTemplate); export default memo(AddTemplate);
src/views/WorkFlowEdit/index.tsx
View file @ d0c45cef
...@@ -21,6 +21,8 @@ import { ITask } from "../Project/ProjectSubmitWork/interface"; ...@@ -21,6 +21,8 @@ import { ITask } from "../Project/ProjectSubmitWork/interface";
import _ from "lodash"; import _ from "lodash";
import { saveUserSpec } from "@/api/workbench_api"; import { saveUserSpec } from "@/api/workbench_api";
import useMyRequest from "@/hooks/useMyRequest"; import useMyRequest from "@/hooks/useMyRequest";
import MyDialog from "@/components/mui/Dialog";
import MyInput from "@/components/mui/MyInput";
import { getCustomTemplateParameterCheckResult } from "./util"; import { getCustomTemplateParameterCheckResult } from "./util";
import styles from "./index.module.css"; import styles from "./index.module.css";
...@@ -44,7 +46,7 @@ const WorkFlowEdit = (props: IProps) => { ...@@ -44,7 +46,7 @@ const WorkFlowEdit = (props: IProps) => {
const { onBack } = props; const { onBack } = props;
const Message = useMessage(); const Message = useMessage();
const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>([]); const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>([]);
const [saveFormDialog, setSaveFormDialog] = useState(false);
const [leftContentType, setLeftContentType] = useState("list"); const [leftContentType, setLeftContentType] = useState("list");
const [popperTitle, setPopperTitle] = useState( const [popperTitle, setPopperTitle] = useState(
"返回后，当前页面已填写内容将不保存，确认返回吗？" "返回后，当前页面已填写内容将不保存，确认返回吗？"
...@@ -99,12 +101,13 @@ const WorkFlowEdit = (props: IProps) => { ...@@ -99,12 +101,13 @@ const WorkFlowEdit = (props: IProps) => {
Message.error("工作流校验未通过，请检查！"); Message.error("工作流校验未通过，请检查！");
} else { } else {
console.log("弹表单窗"); console.log("弹表单窗");
saveUserSpecRun({ setSaveFormDialog(true);
title: "自定义模板标题", // saveUserSpecRun({
version: "1.0.0", // title: "自定义模板标题",
description: "这里是描述", // version: "1.0.0",
tasks: templateConfigInfoClone, // description: "这里是描述",
}); // tasks: templateConfigInfoClone,
// });
} }
}; };
...@@ -194,6 +197,10 @@ const WorkFlowEdit = (props: IProps) => { ...@@ -194,6 +197,10 @@ const WorkFlowEdit = (props: IProps) => {
onCancel={handleCancel} onCancel={handleCancel}
onConfirm={handleConfirm} onConfirm={handleConfirm}
/> />
<MyDialog open={saveFormDialog} title="保存自定义模板">
{/* <MyInput></MyInput> */}
<div>这是表单</div>
</MyDialog>
</div> </div>
); );
}; };
......
src/views/WorkFlowEdit/util.ts
View file @ d0c45cef
...@@ -4,6 +4,7 @@ export const getCustomTemplateParameterCheckResult = ( ...@@ -4,6 +4,7 @@ export const getCustomTemplateParameterCheckResult = (
): { ): {
error: boolean; error: boolean;
helperText: string; helperText: string;
deleteLine?: boolean; // 自动将该线删除
} => { } => {
let error = false; let error = false;
let helperText = ""; let helperText = "";
...@@ -14,6 +15,73 @@ export const getCustomTemplateParameterCheckResult = ( ...@@ -14,6 +15,73 @@ export const getCustomTemplateParameterCheckResult = (
helperText, helperText,
} }
} }
// 1. 当该输入为必填项时：
// 1.1 若为“启用”状态，则表示该输入的值交由用户在使用时填写。故该输入的节点入口在右侧编辑区内不允许连线，若已有连线则自动将该线删除。
// 1.2 若为“关闭”状态，则表示该输入的值是上一步批算子的结果。故该输入的节点入口在右侧编辑区内必须有连线。（若编辑者没有为该节点入口添加连线，则错误提示“该输入为必填，需在右侧视图编辑区连接输入文件或重新改回“开启”状态”；若连上线了则无需错误提示。）
// 2. 当该输入为选填项时：
// 2.1 若为“启用”状态，则表示该输入的值交由用户在使用时填写。故该输入的节点入口在右侧编辑区内不允许连线，若已有连线则自动将该线删除。
// 2.2 若为“关闭”状态，则表示该输入的值是上一步批算子的结果，又因为其为选填项，所以这线可连可不连，不做限制。
// 输入校验
if (parameter.parameterGroup === "in") {
if (parameter.required) {
if (!parameter.hidden && parameter.isLine) {
return {
error,
helperText,
deleteLine: true,
}
} else if (!parameter.hidden && !parameter.isLine) {
return {
error,
helperText,
deleteLine: false,
}
} else if (parameter.hidden && parameter.isLine) {
return {
error,
helperText,
deleteLine: false,
}
} else if (parameter.hidden && !parameter.isLine) {
return {
error: true,
helperText: '该输入为必填，需在右侧视图编辑区连接输入文件或重新改回“开启”状态”',
deleteLine: false,
}
}
} else {
if (!parameter.hidden && parameter.isLine) {
return {
error,
helperText,
deleteLine: true,
}
} else if (!parameter.hidden && !parameter.isLine) {
return {
error,
helperText,
deleteLine: false,
}
} else if (parameter.hidden && parameter.isLine) {
return {
error,
helperText,
deleteLine: false,
}
} else if (parameter.hidden && !parameter.isLine) {
return {
error,
helperText,
deleteLine: false,
}
}
}
}
// 表单校验 // 表单校验
if (parameter.required) { if (parameter.required) {
// 提交任务时不展示 // 提交任务时不展示
...@@ -35,6 +103,7 @@ export const getCustomTemplateParameterCheckResult = ( ...@@ -35,6 +103,7 @@ export const getCustomTemplateParameterCheckResult = (
helperText, helperText,
}; };
} }
// isLine
// 有值才做validators旋律校验 // 有值才做validators旋律校验
if (parameter.defaultValue) { if (parameter.defaultValue) {
if (Array.isArray(parameter.validators)) { if (Array.isArray(parameter.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