feat: 保存流程完成

src/api/workbench_api.ts

@@ -56,6 +56,7 @@ type workflowspecGetAddTemplateParams = {
     projectId?: string;
     productId: string;
     title?: string;
+    creator?: string;
 };
 
 // 项目管理员-添加工作流模板-模板列表

src/components/mui/MyInput.tsx

@@ -9,7 +9,7 @@
 import TextField, { TextFieldProps } from "@mui/material/TextField";
 
 interface MyInputProps extends Omit<TextFieldProps, "value"> {
-	value: any;
+	value?: any;
 	inputSx?: any;
 	onChange?: any;
 	onFocus?: any;

src/views/Project/ProjectWorkbench/workbenchTemplate/components/AddTemplate/index.tsx

-import { useEffect, useState, useMemo } from "react";
+import { useEffect, useState, useMemo, useCallback } from "react";
 import style from "./index.module.css";
 import classNames from "classnames";
 import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
@@ -43,6 +43,7 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
 	const projectId = toJS(currentProjectStore.currentProjectInfo.id);
 	const productId = toJS(currentProjectStore.currentProductInfo.id);
 	const { setShowAddTemplate, getTemplateInfo } = props;
+	const [title, setTitle] = useState("");
 
 	const handleSearch = (value: string) => {};
 
@@ -109,13 +110,37 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
 		});
 	};
 
-	useEffect(() => {
+	// 获取模板列表
+	const getAddTemplateListFun = useCallback(() => {
+		const userName = JSON.parse(localStorage.getItem("userInfo") || "{}")?.name;
 		setSelectTemplateData([]);
-		getAddTemplateList({
-			projectId: projectId as string,
-			productId: productId as string,
-		});
-	}, [templateType, getAddTemplateList, projectId, productId]);
+		setAddTemplateList([]);
+		if (templateType === "public") {
+			getAddTemplateList({
+				projectId: projectId as string,
+				productId: productId as string,
+				title,
+			});
+		} else {
+			getAddTemplateList({
+				projectId: projectId as string,
+				productId: productId as string,
+				creator: userName,
+				title,
+			});
+		}
+	}, [
+		setSelectTemplateData,
+		getAddTemplateList,
+		projectId,
+		productId,
+		templateType,
+		title,
+	]);
+
+	useEffect(() => {
+		getAddTemplateListFun();
+	}, [getAddTemplateListFun]);
 
 	const hiddenBoxArr = useMemo(() => {
 		const length =
@@ -152,11 +177,13 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
 					}}
 				>
 					<OutlinedInput
+						value={title}
 						onChange={(e: any) => {
-							_.debounce(() => {
-								// searchTemplateNameCallback(e.target.value);
-								handleSearch(e.target.value);
-							}, 200)();
+							setTitle(e.target.value);
+							// _.debounce(() => {
+							// 	// searchTemplateNameCallback(e.target.value);
+							// 	handleSearch(e.target.value);
+							// }, 200)();
 						}}
 						placeholder="输入关键词搜索"
 						size="small"
@@ -294,11 +321,7 @@ const AddTemplate = observer((props: IAddTemplateProps) => {
 							id: "",
 							show: false,
 						});
-						setSelectTemplateData([]);
-						getAddTemplateList({
-							projectId: projectId as string,
-							productId: productId as string,
-						});
+						getAddTemplateListFun();
 					}}
 				/>
 			) : null}

src/views/WorkFlowEdit/index.tsx

@@ -23,7 +23,11 @@ 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 { observer } from "mobx-react-lite";
+import { toJS } from "mobx";
 
 import styles from "./index.module.css";
 
@@ -42,23 +46,120 @@ interface IProps {
 	onBack?: () => void;
 }
 
-const WorkFlowEdit = (props: IProps) => {
+const WorkFlowEdit = observer((props: IProps) => {
 	const { onBack } = props;
+	const { currentProjectStore } = useStores();
 	const Message = useMessage();
 	const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>([]);
+	// const projectId = toJS(currentProjectStore.currentProjectInfo.id);
+	const productId = toJS(currentProjectStore.currentProductInfo.id);
 	const [saveFormDialog, setSaveFormDialog] = useState(false);
+	// const [formValue, setFormValue] = useState({
+	// 	title: "",
+	// 	version: "1.0.0",
+	// 	description: "",
+	// });
+	const [showFlow, setShowFlow] = useState(true);
+	const [title, setTitle] = useState("");
+	const [version, setVersion] = useState("1.0.0");
+	const [description, setDescription] = useState("");
+	const [titleHelper, setTitleHelper] = useState({
+		error: false,
+		helperText: "",
+	});
+	const [versionHelper, setVersionHelper] = useState({
+		error: false,
+		helperText: "",
+	});
 	const [leftContentType, setLeftContentType] = useState("list");
 	const [popperTitle, setPopperTitle] = useState(
 		"返回后，当前页面已填写内容将不保存，确认返回吗？"
 	);
+
+	const checkTitle = (title: string) => {
+		if (!title) {
+			setTitleHelper({
+				error: true,
+				helperText: "必须输入模板名称",
+			});
+		} else if (title.length > 15) {
+			setTitleHelper({
+				error: true,
+				helperText: "格式不正确，必须在15字符以内，仅限大小写字母、数字、中文",
+			});
+		} else if (!checkIsNumberLetterChinese(title)) {
+			setTitleHelper({
+				error: true,
+				helperText: "格式不正确，必须在15字符以内，仅限大小写字母、数字、中文",
+			});
+		} else {
+			setTitleHelper({
+				error: false,
+				helperText: "",
+			});
+		}
+	};
+	const checkVersion = (version: string) => {
+		const versionArr = version.split(".");
+		const reg = new RegExp("^([0-9]|[0-9]\\d)$");
+		// var a=101;
+		// if(!reg.test(a)) {
+		//         alert("请输入1-100的整数！")
+
+		//     }
+		console.log(versionArr);
+		if (versionArr.length !== 3) {
+			setVersionHelper({
+				error: true,
+				helperText: "格式不正确，必须为X.Y.Z格式，且XYZ必须为0~99的正整数",
+			});
+		} else if (
+			versionArr.every((item) => {
+				console.log(item);
+				console.log(reg.test(item));
+				return reg.test(item);
+			})
+		) {
+			setVersionHelper({
+				error: false,
+				helperText: "",
+			});
+		} else {
+			setVersionHelper({
+				error: true,
+				helperText: "格式不正确，必须为X.Y.Z格式，且XYZ必须为0~99的正整数",
+			});
+		}
+	};
+	const handleTitleChange = (e: any) => {
+		console.log(e);
+		const title = e.target.value;
+		console.log(title);
+		setTitle(title);
+		checkTitle(title);
+		// 格式不正确，必须在15字符以内，仅限大小写字母、数字、中文
+	};
+	const handleVersionChange = (e: any) => {
+		let version = e.target.value;
+		setVersion(version);
+		checkVersion(version);
+		console.log(e);
+		// 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("保存成功!");
+			setShowFlow(true);
 			onBack && onBack();
-			console.log(res);
 		},
 	});
-	// useMyRequest
-	// saveUserSpec
+
 	const [anchorEl, setAnchorEl] = useState<any>(null);
 	const handleCancel = () => {
 		setAnchorEl(null);
@@ -101,16 +202,37 @@ const WorkFlowEdit = (props: IProps) => {
 			Message.error("工作流校验未通过，请检查！");
 		} else {
 			console.log("弹表单窗");
+			setShowFlow(false);
 			setSaveFormDialog(true);
 			// saveUserSpecRun({
 			// 	title: "自定义模板标题",
 			// 	version: "1.0.0",
 			// 	description: "这里是描述",
 			// 	tasks: templateConfigInfoClone,
+			// 	// projectId,
+			// 	productId,
 			// });
 		}
 	};
 
+	const handleCloseDialog = () => {
+		setSaveFormDialog(false);
+	};
+
+	const handleOncofirm = () => {
+		checkTitle(title);
+		checkVersion(version);
+		if (!titleHelper.error && !versionHelper.error) {
+			saveUserSpecRun({
+				title,
+				version,
+				description,
+				tasks: templateConfigInfo,
+				productId,
+			});
+		}
+	};
+
 	/** 选中的task 唯一标识符 */
 	const [selectTaskId, setSelectTaskId] = useState<string>();
 
@@ -183,12 +305,14 @@ const WorkFlowEdit = (props: IProps) => {
 					)}
 				</div>
 				<div className={styles.swFlowBox} id="workFlowEditRight">
-					<Flow
-						tasks={templateConfigInfo}
-						setTasks={setTemplateConfigInfo}
-						type="edit"
-						onFlowNodeClick={handleNodeClick}
-					/>
+					{showFlow && (
+						<Flow
+							tasks={templateConfigInfo}
+							setTasks={setTemplateConfigInfo}
+							type="edit"
+							onFlowNodeClick={handleNodeClick}
+						/>
+					)}
 				</div>
 			</div>
 			<MyPopconfirm
@@ -197,12 +321,44 @@ const WorkFlowEdit = (props: IProps) => {
 				onCancel={handleCancel}
 				onConfirm={handleConfirm}
 			/>
-			<MyDialog open={saveFormDialog} title="保存自定义模板">
-				{/* <MyInput></MyInput> */}
-				<div>这是表单</div>
-			</MyDialog>
+			{saveFormDialog && (
+				<MyDialog
+					open={saveFormDialog}
+					title="保存自定义模板"
+					onClose={handleCloseDialog}
+					onConfirm={handleOncofirm}
+				>
+					<div>
+						<MyInput
+							value={title}
+							label="模板名称"
+							onChange={handleTitleChange}
+							required
+							error={titleHelper.error}
+							helperText={titleHelper.helperText}
+							style={{ margin: "20px 0" }}
+						></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>
 	);
-};
+});
 
 export default WorkFlowEdit;