Skip to content

B
bkunyun
Commit 6b1d7bda authored by 吴永生#A02208's avatar 吴永生#A02208
Browse files
Options

feat: 保存拆分

parent ec884380
Hide whitespace changes
Inline Side-by-side
Showing with 279 additions and 214 deletions
src/views/Project/components/Flow/index.tsx
View file @ 6b1d7bda
...@@ -58,6 +58,7 @@ const Flow = (props: IProps) => { ...@@ -58,6 +58,7 @@ const Flow = (props: IProps) => {
const nodeTypes = useMemo(() => { const nodeTypes = useMemo(() => {
return { batchNode: BatchNode, flowNode: FlowNode }; return { batchNode: BatchNode, flowNode: FlowNode };
}, []); }, []);
console.log(tasks, "11111");
/** 内部维护的选择的batch节点Id */ /** 内部维护的选择的batch节点Id */
const [inSideBatchNodeId, setInSideBatchNodeId] = useState<string>(""); const [inSideBatchNodeId, setInSideBatchNodeId] = useState<string>("");
/** 内部维护的选择的flow节点Id */ /** 内部维护的选择的flow节点Id */
......
src/views/WorkFlowEdit/components/SaveCustomTemplate/index.tsx 0 → 100644
View file @ 6b1d7bda
/*
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-07-15 15:47:16
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-15 16:30:59
* @FilePath: /bkunyun/src/views/WorkFlowEdit/components/SaveCustomTemplate/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { saveUserSpec } from "@/api/workbench_api";
import MyDialog from "@/components/mui/Dialog";
import MyInput from "@/components/mui/MyInput";
import { checkIsNumberLetterChinese } from "@/utils/util";
import { useState } from "react";
import useMyRequest from "@/hooks/useMyRequest";
import { useStores } from "@/store";
import styles from "./index.module.css";
import { useMessage } from "@/components/MySnackbar";
import { toJS } from "mobx";
import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
interface IProps {
saveFormDialog: boolean;
setSaveFormDialog: (val: boolean) => void;
onBack?: () => void;
title: string;
setTitle: (val: string) => void;
version: string;
setVersion: (val: string) => void;
description: string;
setDescription: (val: string) => void;
oldversion: string;
templateConfigInfo: ITask[];
id?: string;
}
const SaveCustomTemplate = (props: IProps) => {
const {
saveFormDialog,
setSaveFormDialog,
onBack,
title,
setTitle,
version,
setVersion,
description,
setDescription,
oldversion,
templateConfigInfo,
id,
} = props;
const { currentProjectStore } = useStores();
const Message = useMessage();
const productId = toJS(currentProjectStore.currentProductInfo.id);
const [titleHelper, setTitleHelper] = useState({
// 自定义模板名称错误提示
error: false,
helperText: "",
});
const [versionHelper, setVersionHelper] = useState({
// 自定义模板版本错误提示
error: false,
helperText: "",
});
// 自定义模板保存方法
const { run: saveUserSpecRun } = useMyRequest(saveUserSpec, {
onSuccess: (res) => {
Message.success("保存成功!");
onBack && onBack();
},
});
// 关闭表单弹窗
const handleCloseDialog = () => {
setSaveFormDialog(false);
};
// 自定义模板名称
const handleTitleChange = (e: any) => {
const title = e.target.value;
setTitle(title);
checkTitle(title);
// 格式不正确，必须在15字符以内，仅限大小写字母、数字、中文
};
// 自定义模板版本
const handleVersionChange = (e: any) => {
let version = e.target.value;
setVersion(version);
checkVersion(version);
};
// 自定义模板描述
const handleDescriptionChange = (e: any) => {
let description = e.target.value;
if (description.length < 301) {
setDescription(description);
}
};
// 校验模板名称
const checkTitle = (title: string) => {
if (!title) {
setTitleHelper({
error: true,
helperText: "必须输入模板名称",
});
return false;
} else if (title.length > 15) {
setTitleHelper({
error: true,
helperText: "格式不正确，必须在15字符以内，仅限大小写字母、数字、中文",
});
return false;
} else if (!checkIsNumberLetterChinese(title)) {
setTitleHelper({
error: true,
helperText: "格式不正确，必须在15字符以内，仅限大小写字母、数字、中文",
});
return false;
} else {
setTitleHelper({
error: false,
helperText: "",
});
return true;
}
};
// 校验新版本号是否大于旧版本号
const checkNewOldVersion = (version: string, oldversion: string): boolean => {
let versionArr: any[] = version.split(".");
let oldversionArr: any[] = oldversion.split(".");
versionArr = versionArr.map((item) => Number(item));
oldversionArr = oldversionArr.map((item) => Number(item));
if (versionArr[0] < oldversionArr[0]) {
setVersionHelper({
error: true,
helperText:
"新版本号必须大于老版本号，且必须为X.Y.Z格式，XYZ必须为0~99的正整数",
});
return false;
} else if (versionArr[0] === oldversionArr[0]) {
if (versionArr[1] < oldversionArr[1]) {
setVersionHelper({
error: true,
helperText:
"新版本号必须大于老版本号，且必须为X.Y.Z格式，XYZ必须为0~99的正整数",
});
return false;
} else if (versionArr[1] === oldversionArr[1]) {
if (versionArr[2] <= oldversionArr[2]) {
setVersionHelper({
error: true,
helperText:
"新版本号必须大于老版本号，且必须为X.Y.Z格式，XYZ必须为0~99的正整数",
});
return false;
}
}
}
return true;
};
// 校验版本号格式
const checkVersion = (version: string) => {
if (/^[1-9]\d?(\.(0|[1-9]\d?)){2}$/.test(version)) {
setVersionHelper({
error: false,
helperText: "",
});
if (oldversion) {
if (checkNewOldVersion(version, oldversion)) {
return true;
} else {
return false;
}
} else {
return true;
}
} else {
setVersionHelper({
error: true,
helperText: "格式不正确，必须为X.Y.Z格式，且XYZ必须为0~99的正整数",
});
return false;
}
};
// 表单弹窗确定，新建/编辑自定义模板保存
const handleOncofirm = () => {
if (checkTitle(title) && checkVersion(version)) {
if (id) {
saveUserSpecRun({
title,
version,
description,
tasks: templateConfigInfo,
productId,
id,
});
} else {
saveUserSpecRun({
title,
version,
description,
tasks: templateConfigInfo,
productId,
});
}
}
};
return (
<MyDialog
open={saveFormDialog}
title="保存自定义模板"
onClose={handleCloseDialog}
onConfirm={handleOncofirm}
>
<div className={styles.saveBox}>
<MyInput
value={title}
label="模板名称"
onChange={handleTitleChange}
required
error={titleHelper.error}
helperText={titleHelper.helperText}
style={{ margin: "20px 0" }}
disabled={id ? true : false}
></MyInput>
<MyInput
value={version}
label="版本号"
onChange={handleVersionChange}
error={versionHelper.error}
helperText={versionHelper.helperText}
style={{ marginBottom: "20px" }}
></MyInput>
<MyInput
value={description}
label="模板描述"
placeholder="模板描述"
onChange={handleDescriptionChange}
multiline
rows={4}
></MyInput>
</div>
</MyDialog>
);
};
export default SaveCustomTemplate;
src/views/WorkFlowEdit/index.module.css
View file @ 6b1d7bda
...@@ -45,6 +45,3 @@ ...@@ -45,6 +45,3 @@
background-color: #fff; background-color: #fff;
padding: 24px; padding: 24px;
} }
.saveBox {
width: 390px;
}
src/views/WorkFlowEdit/index.tsx
View file @ 6b1d7bda
...@@ -2,13 +2,15 @@ ...@@ -2,13 +2,15 @@
* @Author: 吴永生#A02208 yongsheng.wu@wholion.com * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
* @Date: 2022-06-21 20:03:56 * @Date: 2022-06-21 20:03:56
* @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
* @LastEditTime: 2022-07-15 14:14:07 * @LastEditTime: 2022-07-15 16:35:59
* @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
import React, { useCallback, useEffect, useState } from "react"; import React, { useCallback, useEffect, useState } from "react";
import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew"; import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
import IconButton from "@mui/material/IconButton"; import IconButton from "@mui/material/IconButton";
import _ from "lodash";
import { observer } from "mobx-react-lite";
import MyPopconfirm from "@/components/mui/MyPopconfirm"; import MyPopconfirm from "@/components/mui/MyPopconfirm";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle"; import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
...@@ -18,17 +20,10 @@ import Flow from "../Project/components/Flow"; ...@@ -18,17 +20,10 @@ import Flow from "../Project/components/Flow";
import ParameterSetting from "./components/ParameterSetting"; import ParameterSetting from "./components/ParameterSetting";
import { useMessage } from "@/components/MySnackbar"; import { useMessage } from "@/components/MySnackbar";
import { ITask } from "../Project/ProjectSubmitWork/interface"; import { ITask } from "../Project/ProjectSubmitWork/interface";
import _ from "lodash";
import { fetchTemplateConfigInfo } from "@/api/project_api"; import { fetchTemplateConfigInfo } from "@/api/project_api";
import { saveUserSpec } from "@/api/workbench_api";
import useMyRequest from "@/hooks/useMyRequest";
import MyDialog from "@/components/mui/Dialog";
import MyInput from "@/components/mui/MyInput";
import { useStores } from "@/store";
import { checkIsNumberLetterChinese } from "@/utils/util";
import { getCustomTemplateParameterCheckResult } from "./util"; import { getCustomTemplateParameterCheckResult } from "./util";
import { observer } from "mobx-react-lite"; import useMyRequest from "@/hooks/useMyRequest";
import { toJS } from "mobx"; import SaveCustomTemplate from "./components/SaveCustomTemplate";
import styles from "./index.module.css"; import styles from "./index.module.css";
...@@ -50,27 +45,15 @@ interface IProps { ...@@ -50,27 +45,15 @@ interface IProps {
const WorkFlowEdit = observer((props: IProps) => { const WorkFlowEdit = observer((props: IProps) => {
const { onBack, id } = props; const { onBack, id } = props;
const { currentProjectStore } = useStores();
const Message = useMessage(); const Message = useMessage();
const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>([]); // 算子大数组 const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>([]); // 算子大数组
// const projectId = toJS(currentProjectStore.currentProjectInfo.id);
const productId = toJS(currentProjectStore.currentProductInfo.id);
const [saveFormDialog, setSaveFormDialog] = useState(false); // 保存弹窗显示与否控制 const [saveFormDialog, setSaveFormDialog] = useState(false); // 保存弹窗显示与否控制
const [title, setTitle] = useState(""); // 自定义模板名称 const [title, setTitle] = useState(""); // 自定义模板名称
const [version, setVersion] = useState("1.0.0"); // 自定义模板版本 const [version, setVersion] = useState("1.0.0"); // 自定义模板版本
const [oldversion, setOldersion] = useState(""); // 编辑是自定义模板的老版本 const [oldversion, setOldersion] = useState(""); // 编辑是自定义模板的老版本
const [description, setDescription] = useState(""); // 自定义模板描述 const [description, setDescription] = useState(""); // 自定义模板描述
const [creator, setCreator] = useState(""); // 自定义模板创建人
const [titleHelper, setTitleHelper] = useState({
// 自定义模板名称错误提示
error: false,
helperText: "",
});
const [versionHelper, setVersionHelper] = useState({
// 自定义模板版本错误提示
error: false,
helperText: "",
});
const [leftContentType, setLeftContentType] = useState("list"); // 页面左侧展示的是算子列表还是参数设置 const [leftContentType, setLeftContentType] = useState("list"); // 页面左侧展示的是算子列表还是参数设置
const [popperTitle, setPopperTitle] = useState( const [popperTitle, setPopperTitle] = useState(
// 确认弹窗标题 // 确认弹窗标题
...@@ -102,7 +85,7 @@ const WorkFlowEdit = observer((props: IProps) => { ...@@ -102,7 +85,7 @@ const WorkFlowEdit = observer((props: IProps) => {
} }
} }
setVersion(arr.join(".")); setVersion(arr.join("."));
setCreator(res.data.creator); // setCreator(res.data.creator);
setDescription(res.data.description); setDescription(res.data.description);
} }
}, },
...@@ -116,127 +99,6 @@ const WorkFlowEdit = observer((props: IProps) => { ...@@ -116,127 +99,6 @@ const WorkFlowEdit = observer((props: IProps) => {
} }
}, [id, fetchTemplateConfigInfoRun]); }, [id, fetchTemplateConfigInfoRun]);
// 校验模板名称
const checkTitle = (title: string) => {
if (!title) {
setTitleHelper({
error: true,
helperText: "必须输入模板名称",
});
return false;
} else if (title.length > 15) {
setTitleHelper({
error: true,
helperText: "格式不正确，必须在15字符以内，仅限大小写字母、数字、中文",
});
return false;
} else if (!checkIsNumberLetterChinese(title)) {
setTitleHelper({
error: true,
helperText: "格式不正确，必须在15字符以内，仅限大小写字母、数字、中文",
});
return false;
} else {
setTitleHelper({
error: false,
helperText: "",
});
return true;
}
};
// 校验新版本号是否大于旧版本号
const checkNewOldVersion = (version: string, oldversion: string): boolean => {
let versionArr: any[] = version.split(".");
let oldversionArr: any[] = oldversion.split(".");
versionArr = versionArr.map((item) => Number(item));
oldversionArr = oldversionArr.map((item) => Number(item));
if (versionArr[0] < oldversionArr[0]) {
setVersionHelper({
error: true,
helperText:
"新版本号必须大于老版本号，且必须为X.Y.Z格式，XYZ必须为0~99的正整数",
});
return false;
} else if (versionArr[0] === oldversionArr[0]) {
if (versionArr[1] < oldversionArr[1]) {
setVersionHelper({
error: true,
helperText:
"新版本号必须大于老版本号，且必须为X.Y.Z格式，XYZ必须为0~99的正整数",
});
return false;
} else if (versionArr[1] === oldversionArr[1]) {
if (versionArr[2] <= oldversionArr[2]) {
setVersionHelper({
error: true,
helperText:
"新版本号必须大于老版本号，且必须为X.Y.Z格式，XYZ必须为0~99的正整数",
});
return false;
}
}
}
return true;
};
// 校验版本号格式
const checkVersion = (version: string) => {
if (/^[1-9]\d?(\.(0|[1-9]\d?)){2}$/.test(version)) {
setVersionHelper({
error: false,
helperText: "",
});
if (oldversion) {
if (checkNewOldVersion(version, oldversion)) {
return true;
} else {
return false;
}
} else {
return true;
}
} else {
setVersionHelper({
error: true,
helperText: "格式不正确，必须为X.Y.Z格式，且XYZ必须为0~99的正整数",
});
return false;
}
};
// 自定义模板名称
const handleTitleChange = (e: any) => {
const title = e.target.value;
setTitle(title);
checkTitle(title);
// 格式不正确，必须在15字符以内，仅限大小写字母、数字、中文
};
// 自定义模板版本
const handleVersionChange = (e: any) => {
let version = e.target.value;
setVersion(version);
checkVersion(version);
};
// 自定义模板描述
const handleDescriptionChange = (e: any) => {
let description = e.target.value;
if (description.length < 301) {
setDescription(description);
}
};
// 自定义模板保存方法
const { run: saveUserSpecRun } = useMyRequest(saveUserSpec, {
onSuccess: (res) => {
Message.success("保存成功!");
onBack && onBack();
},
});
// 确认弹窗相对位置 // 确认弹窗相对位置
const [anchorEl, setAnchorEl] = useState<any>(null); const [anchorEl, setAnchorEl] = useState<any>(null);
// 隐藏确认弹窗， 确认弹窗点击取消 // 隐藏确认弹窗， 确认弹窗点击取消
...@@ -284,36 +146,6 @@ const WorkFlowEdit = observer((props: IProps) => { ...@@ -284,36 +146,6 @@ const WorkFlowEdit = observer((props: IProps) => {
} }
}; };
// 关闭表单弹窗
const handleCloseDialog = () => {
setSaveFormDialog(false);
};
// 表单弹窗确定，新建/编辑自定义模板保存
const handleOncofirm = () => {
if (checkTitle(title) && checkVersion(version)) {
if (id) {
saveUserSpecRun({
title,
version,
description,
tasks: templateConfigInfo,
productId,
id,
creator,
});
} else {
saveUserSpecRun({
title,
version,
description,
tasks: templateConfigInfo,
productId,
});
}
}
};
/** 选中的task 唯一标识符 */ /** 选中的task 唯一标识符 */
const [selectTaskId, setSelectTaskId] = useState<string>(); const [selectTaskId, setSelectTaskId] = useState<string>();
...@@ -401,41 +233,20 @@ const WorkFlowEdit = observer((props: IProps) => { ...@@ -401,41 +233,20 @@ const WorkFlowEdit = observer((props: IProps) => {
onConfirm={handleConfirm} onConfirm={handleConfirm}
/> />
{saveFormDialog && ( {saveFormDialog && (
<MyDialog <SaveCustomTemplate
open={saveFormDialog} title={title}
title="保存自定义模板" setTitle={setTitle}
onClose={handleCloseDialog} description={description}
onConfirm={handleOncofirm} setDescription={setDescription}
> version={version}
<div className={styles.saveBox}> setVersion={setVersion}
<MyInput setSaveFormDialog={setSaveFormDialog}
value={title} saveFormDialog={saveFormDialog}
label="模板名称" onBack={onBack}
onChange={handleTitleChange} templateConfigInfo={templateConfigInfo}
required id={id}
error={titleHelper.error} oldversion={oldversion}
helperText={titleHelper.helperText} />
style={{ margin: "20px 0" }}
disabled={id ? true : false}
></MyInput>
<MyInput
value={version}
label="版本号"
onChange={handleVersionChange}
error={versionHelper.error}
helperText={versionHelper.helperText}
style={{ marginBottom: "20px" }}
></MyInput>
<MyInput
value={description}
label="模板描述"
placeholder="模板描述"
onChange={handleDescriptionChange}
multiline
rows={4}
></MyInput>
</div>
</MyDialog>
)} )}
</div> </div>
); );
......
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