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";
import _ from "lodash";
const AddTemplate = (props: any) => {
const {
openAddTemplate,
closeAddTemplateBlock,
addTemplateList,
templateSelectCallback,
selectTemplateData,
addTemplateCallback,
searchTemplateNameCallback,
} = props;
const {
openAddTemplate,
closeAddTemplateBlock,
addTemplateList,
templateSelectCallback,
selectTemplateData,
addTemplateCallback,
searchTemplateNameCallback,
} = props;
const [templateType, setTemplateType] = useState("public");
const radioOptions = [
{
value: "public",
label: "公共",
},
{
value: "custom",
label: "自定义",
},
];
const [templateType, setTemplateType] = useState("public");
const radioOptions = [
{
value: "public",
label: "公共",
},
{
value: "custom",
label: "自定义",
},
];
const handleRadio = (value: string) => {
setTemplateType(value);
};
const handleRadio = (value: string) => {
setTemplateType(value);
};
return (
<Box
className={styles.addTemplateMask}
sx={{ display: openAddTemplate ? "flex" : "none" }}
>
<Box sx={{ height: "50px", display: "flex", alignItems: "center" }}>
<CloseOutlinedIcon
sx={{ color: "#ffffff", marginRight: "10px", cursor: "pointer" }}
onClick={() => {
closeAddTemplateBlock();
}}
/>
</Box>
<Box className={styles.addTemplateBlock}>
<Box sx={{ padding: "24px 32px" }}>
<Typography
sx={{ fontSize: "18px", fontWeight: "600", color: "#1E2633" }}
>
添加工作流模版
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "20px",
}}
>
<OutlinedInput
onChange={(e: any) => {
_.debounce(() => {
searchTemplateNameCallback(e.target.value);
}, 200)();
}}
placeholder="输入关键词搜索"
size="small"
sx={{ width: 340, height: 32, marginTop: "20px" }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
/>
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
alignItems: "center",
}}
>
<RadioGroupOfButtonStyle
value={templateType}
radioOptions={radioOptions}
handleRadio={handleRadio}
></RadioGroupOfButtonStyle>
<Button
click={addTemplateCallback}
size={"small"}
style={{
marginLeft: "12px",
}}
text={
"添加模版" +
(selectTemplateData.length === 0
? ""
: `(${selectTemplateData.length})`)
}
/>
</Box>
</Box>
return (
<Box
className={styles.addTemplateMask}
sx={{ display: openAddTemplate ? "flex" : "none" }}
>
<Box sx={{ height: "50px", display: "flex", alignItems: "center" }}>
<CloseOutlinedIcon
sx={{ color: "#ffffff", marginRight: "10px", cursor: "pointer" }}
onClick={() => {
closeAddTemplateBlock();
}}
/>
</Box>
<Box className={styles.addTemplateBlock}>
<Box sx={{ padding: "24px 32px" }}>
<Typography
sx={{ fontSize: "18px", fontWeight: "600", color: "#1E2633" }}
>
添加工作流模版
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "20px",
}}
>
<OutlinedInput
onChange={(e: any) => {
_.debounce(() => {
searchTemplateNameCallback(e.target.value);
}, 200)();
}}
placeholder="输入关键词搜索"
size="small"
sx={{ width: 340, height: 32, marginTop: "20px" }}
endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
/>
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
alignItems: "center",
}}
>
<RadioGroupOfButtonStyle
value={templateType}
radioOptions={radioOptions}
handleRadio={handleRadio}
></RadioGroupOfButtonStyle>
<Button
click={addTemplateCallback}
size={"small"}
style={{
marginLeft: "12px",
}}
text={
"添加模版" +
(selectTemplateData.length === 0
? ""
: `(${selectTemplateData.length})`)
}
/>
</Box>
</Box>
{addTemplateList.length === 0 && (
<Box
sx={{
display: "flex",
alignItems: "center",
flexDirection: "column",
minHeight: "calc(100vh - 376px)",
justifyContent: "center",
}}
>
<img alt="" src={noData} />
<Typography
sx={{ fontSize: "12px", fontWeight: "400", color: "#8A9099" }}
>
暂未相关模版
</Typography>
</Box>
)}
{addTemplateList.length === 0 && (
<Box
sx={{
display: "flex",
alignItems: "center",
flexDirection: "column",
minHeight: "calc(100vh - 376px)",
justifyContent: "center",
}}
>
<img alt="" src={noData} />
<Typography
sx={{ fontSize: "12px", fontWeight: "400", color: "#8A9099" }}
>
暂无相关模版
</Typography>
</Box>
)}
<Box
sx={{
display: "flex",
flexWrap: "wrap",
overflowX: "hidden",
overflowY: "overlay",
marginLeft: "-8px",
}}
>
{addTemplateList.map((item: any, key: any) => {
return (
<Box
className={styles.addTemplateBox}
onClick={() => {
templateSelectCallback(item.id);
}}
sx={{
border: selectTemplateData.includes(item.id)
? "1px solid #1370FF"
: "1px solid #EBEDF0;",
}}
key={item.id}
>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<Typography
sx={{
fontSize: "14px",
fontWeight: "600",
color: "#1E2633",
marginBottom: "4px",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{item.title}
</Typography>
<Checkbox
size="small"
sx={{ padding: "0px" }}
checked={selectTemplateData.includes(item.id)}
/>
</Box>
<Box sx={{ display: "flex", marginBottom: "8px" }}>
<Typography
sx={{
fontSize: "12px",
fontWeight: "400",
color: "#1370FF",
marginRight: "24px",
}}
>
版本：{item.version}
</Typography>
<Typography
sx={{
fontSize: "12px",
fontWeight: "400",
color: "#1370FF",
}}
>
更新时间：{item.updateTime}
</Typography>
</Box>
<Typography className={styles.templateDescText}>
{item.description}
</Typography>
</Box>
);
})}
</Box>
</Box>
</Box>
</Box>
);
<Box
sx={{
display: "flex",
flexWrap: "wrap",
overflowX: "hidden",
overflowY: "overlay",
marginLeft: "-8px",
}}
>
{addTemplateList.map((item: any, key: any) => {
return (
<Box
className={styles.addTemplateBox}
onClick={() => {
templateSelectCallback(item.id);
}}
sx={{
border: selectTemplateData.includes(item.id)
? "1px solid #1370FF"
: "1px solid #EBEDF0;",
}}
key={item.id}
>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
>
<Typography
sx={{
fontSize: "14px",
fontWeight: "600",
color: "#1E2633",
marginBottom: "4px",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{item.title}
</Typography>
<Checkbox
size="small"
sx={{ padding: "0px" }}
checked={selectTemplateData.includes(item.id)}
/>
</Box>
<Box sx={{ display: "flex", marginBottom: "8px" }}>
<Typography
sx={{
fontSize: "12px",
fontWeight: "400",
color: "#1370FF",
marginRight: "24px",
}}
>
版本：{item.version}
</Typography>
<Typography
sx={{
fontSize: "12px",
fontWeight: "400",
color: "#1370FF",
}}
>
更新时间：{item.updateTime}
</Typography>
</Box>
<Typography className={styles.templateDescText}>
{item.description}
</Typography>
</Box>
);
})}
</Box>
</Box>
</Box>
</Box>
);
};
export default memo(AddTemplate);
src/views/WorkFlowEdit/index.tsx
View file @ d0c45cef
......@@ -21,6 +21,8 @@ import { ITask } from "../Project/ProjectSubmitWork/interface";
import _ from "lodash";
import { saveUserSpec } from "@/api/workbench_api";
import useMyRequest from "@/hooks/useMyRequest";
import MyDialog from "@/components/mui/Dialog";
import MyInput from "@/components/mui/MyInput";
import { getCustomTemplateParameterCheckResult } from "./util";
import styles from "./index.module.css";
......@@ -44,7 +46,7 @@ const WorkFlowEdit = (props: IProps) => {
const { onBack } = props;
const Message = useMessage();
const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>([]);
const [saveFormDialog, setSaveFormDialog] = useState(false);
const [leftContentType, setLeftContentType] = useState("list");
const [popperTitle, setPopperTitle] = useState(
"返回后，当前页面已填写内容将不保存，确认返回吗？"
......@@ -99,12 +101,13 @@ const WorkFlowEdit = (props: IProps) => {
Message.error("工作流校验未通过，请检查！");
} else {
console.log("弹表单窗");
saveUserSpecRun({
title: "自定义模板标题",
version: "1.0.0",
description: "这里是描述",
tasks: templateConfigInfoClone,
});
setSaveFormDialog(true);
// saveUserSpecRun({
// title: "自定义模板标题",
// version: "1.0.0",
// description: "这里是描述",
// tasks: templateConfigInfoClone,
// });
}
};
......@@ -194,6 +197,10 @@ const WorkFlowEdit = (props: IProps) => {
onCancel={handleCancel}
onConfirm={handleConfirm}
/>
<MyDialog open={saveFormDialog} title="保存自定义模板">
{/* <MyInput></MyInput> */}
<div>这是表单</div>
</MyDialog>
</div>
);
};
......
src/views/WorkFlowEdit/util.ts
View file @ d0c45cef
......@@ -4,6 +4,7 @@ export const getCustomTemplateParameterCheckResult = (
): {
error: boolean;
helperText: string;
deleteLine?: boolean; // 自动将该线删除
} => {
let error = false;
let helperText = "";
......@@ -14,6 +15,73 @@ export const getCustomTemplateParameterCheckResult = (
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) {
// 提交任务时不展示
......@@ -35,6 +103,7 @@ export const getCustomTemplateParameterCheckResult = (
helperText,
};
}
// isLine
// 有值才做validators旋律校验
if (parameter.defaultValue) {
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