feat: 自定义模板版本校验完成，代码注释完善

src/views/WorkFlowEdit/components/ParameterSetting/index.tsx

@@ -27,7 +27,7 @@ type IParameterSettingProps = {
 	taskId: string;
 	setTemplateConfigInfo: any;
 };
-
+// 页面调试数据 暂不删除
 // const templateConfigInfoMock = [
 // 	{
 // 		id: "id",
@@ -233,24 +233,19 @@ type IParameterSettingProps = {
 // ];
 // const taskId = "id";
 const ParameterSetting = (props: IParameterSettingProps) => {
-	const { templateConfigInfo, setTemplateConfigInfo, taskId } = props;
+	const { templateConfigInfo, setTemplateConfigInfo, taskId } = props; // 算子大数组
 
+	// 页面调试数据 暂不删除
 	// const [templateConfigInfo, setTemplateConfigInfo] = useState<ITask[]>(
 	// 	templateConfigInfoMock as ITask[]
 	// );
 
-	const [descHeight, setDescHeight] = useState(0);
-	const [isShowAllDese, setIsShowAllDese] = useState(false);
-
+	const [descHeight, setDescHeight] = useState(0); // 算子描述的高度
+	const [isShowAllDese, setIsShowAllDese] = useState(false); // 是否展示全部描述
 	const [fileSelectOpen, setFileSelectOpen] = useState(false); // 选择输出路径的弹窗显示控制
+	const [parameterName, setParameterName] = useState(""); // 当前算子中的parameters中正在编辑饿parameter（参数）
 
-	// const [fileSelectObject, setFileSelectObject] = useState({
-	// 	taskId: "",
-	// 	parameterName: "",
-	// });
-	const [parameterName, setParameterName] = useState("");
-
-	const div = document.getElementById("descHeight");
+	const div = document.getElementById("descHeight"); // 算子描述的元素（不限高）
 	useEffect(() => {
 		if (div) {
 			setDescHeight(div.offsetHeight);

src/views/WorkFlowEdit/index.tsx

@@ -52,38 +52,55 @@ const WorkFlowEdit = observer((props: IProps) => {
 	const { onBack, id } = props;
 	const { currentProjectStore } = useStores();
 	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 [showFlow, setShowFlow] = useState(true);
-	const [title, setTitle] = useState("");
-	const [version, setVersion] = useState("1.0.0");
-	const [description, setDescription] = useState("");
+	const [saveFormDialog, setSaveFormDialog] = useState(false); // 保存弹窗显示与否控制
+	const [showFlow, setShowFlow] = useState(true); // 是否显示右侧流程图
+	const [title, setTitle] = useState(""); // 自定义模板名称
+	const [version, setVersion] = useState("1.0.0"); // 自定义模板版本
+	const [oldversion, setOldersion] = useState(""); // 编辑是自定义模板的老版本
+	const [description, setDescription] = 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 { run: fetchTemplateConfigInfoRun } = useMyRequest(
 		fetchTemplateConfigInfo,
 		{
 			onSuccess: (res: any) => {
-				console.log(res);
 				if (res.data) {
 					setTemplateConfigInfo(res.data.tasks);
 					setTitle(res.data.title);
+					setOldersion(res.data.version);
 					let version = res.data.version;
 					let arr = version.split(".");
-					arr[2] = String(Number(arr[2]) + 1);
+					if (arr.length === 3) {
+						if (Number(arr[2]) < 100) {
+							arr[2] = String(Number(arr[2]) + 1);
+						} else {
+							arr[2] = "0";
+							if (Number(arr[1]) < 100) {
+								arr[1] = String(Number(arr[1]) + 1);
+							} else {
+								arr[1] = "0";
+								arr[0] = String(Number(arr[0]) + 1);
+							}
+						}
+					}
 					setVersion(arr.join("."));
 					setDescription(res.data.description);
 				}
@@ -91,12 +108,14 @@ const WorkFlowEdit = observer((props: IProps) => {
 		}
 	);
 
+	// id存在时获取模板详情
 	useEffect(() => {
 		if (id) {
 			fetchTemplateConfigInfoRun({ id });
 		}
 	}, [id, fetchTemplateConfigInfoRun]);
 
+	// 校验模板名称
 	const checkTitle = (title: string) => {
 		if (!title) {
 			setTitleHelper({
@@ -120,15 +139,51 @@ const WorkFlowEdit = observer((props: IProps) => {
 			});
 		}
 	};
+
+	// 校验新版本号是否大于旧版本号
+	const checkNewOldVersion = useCallback(() => {
+		let versionArr = version.split(".");
+		let oldversionArr = oldversion.split(".");
+		versionArr.map((item) => Number(item));
+		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;
+	}, [version, oldversion]);
+
+	// 校验版本号格式
 	const checkVersion = (version: string) => {
 		const versionArr = version.split(".");
+		if (oldversion) {
+			if (!checkNewOldVersion()) {
+				return;
+			}
+		}
 		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,
@@ -136,8 +191,6 @@ const WorkFlowEdit = observer((props: IProps) => {
 			});
 		} else if (
 			versionArr.every((item) => {
-				console.log(item);
-				console.log(reg.test(item));
 				return reg.test(item);
 			})
 		) {
@@ -152,27 +205,31 @@ const WorkFlowEdit = observer((props: IProps) => {
 			});
 		}
 	};
+
+	// 自定义模板名称
 	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("保存成功!");
@@ -181,25 +238,28 @@ const WorkFlowEdit = observer((props: IProps) => {
 		},
 	});
 
+	// 确认弹窗相对位置
 	const [anchorEl, setAnchorEl] = useState<any>(null);
+	// 隐藏确认弹窗，   确认弹窗点击取消
 	const handleCancel = () => {
 		setAnchorEl(null);
 	};
 
+	// 显示确认弹窗
 	const handleShowPopper = (e: any, title: string) => {
 		setPopperTitle(title);
 		setAnchorEl(anchorEl ? null : e.currentTarget);
 	};
 
+	// 确认弹窗确认回调
 	const handleConfirm = () => {
 		if (popperTitle === "返回后，当前页面已填写内容将不保存，确认返回吗？") {
 			onBack && onBack();
 		}
 	};
 
+	// 点击保存  先校验工作流  再显示自定义模板基础信息弹窗
 	const handlePreserve = () => {
-		console.log("提交");
-		console.log(templateConfigInfo);
 		// 校验
 		if (templateConfigInfo.length === 0) {
 			Message.error("工作流不能为空！");
@@ -213,7 +273,6 @@ const WorkFlowEdit = observer((props: IProps) => {
 				parameter.error = checkResult.error;
 				parameter.helperText = checkResult.helperText;
 				if (checkResult.error) {
-					console.log(parameter);
 					check = false;
 				}
 			});
@@ -222,25 +281,18 @@ const WorkFlowEdit = observer((props: IProps) => {
 		if (!check) {
 			Message.error("工作流校验未通过，请检查！");
 		} else {
-			console.log("弹表单窗");
 			setShowFlow(false);
 			setSaveFormDialog(true);
-			// saveUserSpecRun({
-			// 	title: "自定义模板标题",
-			// 	version: "1.0.0",
-			// 	description: "这里是描述",
-			// 	tasks: templateConfigInfoClone,
-			// 	// projectId,
-			// 	productId,
-			// });
 		}
 	};
 
+	// 关闭表单弹窗
 	const handleCloseDialog = () => {
 		setShowFlow(true);
 		setSaveFormDialog(false);
 	};
 
+	// 表单弹窗确定，新建/编辑自定义模板保存
 	const handleOncofirm = () => {
 		checkTitle(title);
 		setShowFlow(true);