Merge branch 'feat-20220705-customTemplate' of http://120.77.149.83/root/bkunyun…

Merge branch 'feat-20220705-customTemplate' of http://120.77.149.83/root/bkunyun into feat-20220705-customTemplate

src/views/Project/components/Flow/components/BatchNode/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-07-12 11:20:29
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-12 11:28:57
+ * @LastEditTime: 2022-07-12 20:25:34
  * @FilePath: /bkunyun/src/views/Project/components/Flow/components/BatchNode.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */

src/views/Project/components/Flow/components/FlowNode/index.module.css

@@ -4,6 +4,15 @@
 	padding: 6px 12px;
 }
 
+.flowNode:hover {
+	border: 1px solid #1370ff;
+}
+
+.selectedFlowBox {
+	color: #1370ff;
+	border: 1px solid #1370ff;
+	background-color: #ebf3ff;
+}
 .successDot {
 	display: inline-block;
 	line-height: 22px;

src/views/Project/components/Flow/components/FlowNode/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-07-12 11:29:46
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-12 11:32:20
+ * @LastEditTime: 2022-07-12 21:06:48
  * @FilePath: /bkunyun/src/views/Project/components/Flow/components/FlowNode/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -34,12 +34,14 @@ const FlowNode = (props: any) => {
 	const { data } = props;
 	const {
 		dotStatus,
+		selectedStatus,
 		info: { title, isCheck, executionStatus },
 	} = data;
 	return (
 		<div
 			className={classNames({
 				[styles.flowNode]: true,
+				[styles.selectedFlowBox]: selectedStatus,
 			})}
 		>
 			{dotStatus?.isInput ? (

src/views/Project/components/Flow/index.tsx

@@ -6,14 +6,18 @@ import ReactFlow, {
 	ReactFlowProps,
 	Node,
 	Connection,
+	Edge,
 } from "react-flow-renderer";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import _ from "lodash";
 
 import { uuid } from "@/utils/util";
 import { IEdge, IParameter, ITask } from "../../ProjectSubmitWork/interface";
 import { ILine } from "./interface";
 import BatchNode from "./components/BatchNode";
 import FlowNode from "./components/FlowNode";
+import { getCustomTemplateParameterCheckResult } from "@/views/WorkFlowEdit/util";
+import { useMessage } from "@/components/MySnackbar";
 
 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
@@ -53,22 +57,28 @@ const Flow = (props: IProps) => {
 	const nodeTypes = useMemo(() => {
 		return { batchNode: BatchNode, flowNode: FlowNode };
 	}, []);
-	/** 内部维护的选择的节点Id */
-	const [inSideNodeId, setInSideNodeId] = useState<string>("");
+	/** 内部维护的选择的batch节点Id */
+	const [inSideBatchNodeId, setInSideBatchNodeId] = useState<string>("");
+	/** 内部维护的选择的flow节点Id */
+	const [inSideFlowNodeId, setInSideFlowNodeId] = useState<string>("");
+	const Message = useMessage();
 
-	/** 删除批节点 */
+	/** 删除批或者线节点 */
 	const deleteSelectBatchNode = useCallback(
 		(e: any) => {
 			if (e.keyCode === 8) {
 				const val =
 					tasks?.length &&
 					tasks.filter((item) => {
-						return item.id !== inSideNodeId && item.parentNode !== inSideNodeId;
+						return (
+							item.id !== inSideBatchNodeId &&
+							item.parentNode !== inSideBatchNodeId
+						);
 					});
 				setTasks && setTasks(val || []);
 			}
 		},
-		[inSideNodeId, setTasks, tasks]
+		[inSideBatchNodeId, setTasks, tasks]
 	);
 
 	/** 监听鼠标按下事件 */
@@ -138,7 +148,7 @@ const Flow = (props: IProps) => {
 				width = val > 176 ? val : width;
 			}
 			if (positionYArr?.length) {
-				const val = positionYArr[positionYArr.length - 1];
+				const val = positionYArr[positionYArr.length - 1] + 6;
 				height = val > 22 ? val : height;
 			}
 			return {
@@ -167,9 +177,11 @@ const Flow = (props: IProps) => {
 									/** 选中状态 */
 									selectedStatus: selectedBatchNodeId
 										? selectedBatchNodeId === item.id
-										: inSideNodeId === item.id,
+										: inSideBatchNodeId === item.id,
+									/** tasks 数据 */
+									tasks: tasks,
 							  }
-							: {}),
+							: { selectedStatus: inSideFlowNodeId === item.id }),
 						/** 输入输出圆点状态 */
 						dotStatus: nodesInputAndOutputStatus(item.id),
 
@@ -200,7 +212,8 @@ const Flow = (props: IProps) => {
 		tasks,
 		isFlowNode,
 		selectedBatchNodeId,
-		inSideNodeId,
+		inSideBatchNodeId,
+		inSideFlowNodeId,
 		nodesInputAndOutputStatus,
 		getBatchStyle,
 	]);
@@ -219,10 +232,10 @@ const Flow = (props: IProps) => {
 						val.push(newLine);
 					}, []);
 			});
-		const a = val.map((item: ILine) => {
+		return val.map((item: ILine) => {
 			const newSelectId = selectedBatchNodeId
 				? selectedBatchNodeId
-				: inSideNodeId;
+				: inSideBatchNodeId;
 			return {
 				...item,
 				// type: "smoothstep",
@@ -234,27 +247,31 @@ const Flow = (props: IProps) => {
 				label: item.label ? `(${item.label})` : "",
 			};
 		});
-		return a;
-	}, [inSideNodeId, selectedBatchNodeId, tasks]);
+	}, [inSideBatchNodeId, selectedBatchNodeId, tasks]);
+
+	/** 设置nodeId方法 */
+	const setNodeIdFun = useCallback(
+		(id: string) => {
+			setSelectedBatchNodeId
+				? setSelectedBatchNodeId(id)
+				: setInSideBatchNodeId(id);
+			onBatchClick && onBatchClick(id);
+			setInSideFlowNodeId("");
+			document.getElementById(`point${id}`)?.scrollIntoView(true);
+		},
+		[onBatchClick, setSelectedBatchNodeId]
+	);
 
 	/** flowNode点击事件 */
 	const onNodeClick = (e: any, node: Node) => {
 		tasks?.forEach((item) => {
 			if (item.id === node.id) {
-				if (item.parentNode) {
-					setSelectedBatchNodeId
-						? setSelectedBatchNodeId(item.parentNode)
-						: setInSideNodeId(item.parentNode);
-					onBatchClick && onBatchClick(item.parentNode);
-					document
-						.getElementById(`point${item.parentNode}`)
-						?.scrollIntoView(true);
+				if (item.type === "BATCH") {
+					setNodeIdFun(node.id);
 				} else {
-					setSelectedBatchNodeId
-						? setSelectedBatchNodeId(node.id)
-						: setInSideNodeId(node.id);
-					onBatchClick && onBatchClick(node.id || "");
-					document.getElementById(`point${node.id}`)?.scrollIntoView(true);
+					setInSideFlowNodeId(node.id);
+					setInSideBatchNodeId("");
+					setSelectedBatchNodeId && setSelectedBatchNodeId("");
 				}
 			}
 		});
@@ -262,7 +279,10 @@ const Flow = (props: IProps) => {
 	};
 
 	const handlePaneClick = () => {
-		setSelectedBatchNodeId ? setSelectedBatchNodeId("") : setInSideNodeId("");
+		setSelectedBatchNodeId
+			? setSelectedBatchNodeId("")
+			: setInSideBatchNodeId("");
+		setInSideFlowNodeId("");
 		onBatchClick && onBatchClick("");
 	};
 
@@ -303,8 +323,10 @@ const Flow = (props: IProps) => {
 	const connectModifyParameters = useCallback(
 		(parameters: IParameter[], edgeItem: Connection) => {
 			return parameters.map((item) => {
+				const { error, helperText } =
+					getCustomTemplateParameterCheckResult(item);
 				if (item.name === edgeItem.targetHandle) {
-					return { ...item, isLine: true };
+					return { ...item, isLine: true, helperText, error };
 				} else {
 					return item;
 				}
@@ -313,37 +335,112 @@ const Flow = (props: IProps) => {
 		[]
 	);
 
-	const onConnect = useCallback(
-		(val: Connection) => {
+	/** 原始数据删除线 */
+	const tasksDeleteLine = useCallback(
+		(connection: Connection) => {
+			const result =
+				(tasks?.length &&
+					tasks.map((item) => {
+						if (item.id === connection.source) {
+							const newEdges =
+								(item.edges?.length &&
+									item.edges?.filter(
+										(every) => every.sourceHandle !== connection.sourceHandle
+									)) ||
+								[];
+							return {
+								...item,
+								edges: newEdges,
+							};
+						} else {
+							return item;
+						}
+					})) ||
+				[];
+			return result;
+		},
+		[tasks]
+	);
+
+	/** 获取连接线的端点类型 */
+	const getClassType = useCallback(
+		(connection: Connection) => {
+			let inputClassType = "",
+				outClassType: string | undefined = undefined;
+			tasks?.length &&
+				tasks.forEach((item) => {
+					if ([connection.source, connection.target].includes(item.id)) {
+						item.parameters.forEach((every) => {
+							if (every.name === connection.targetHandle) {
+								inputClassType = every.classType;
+							}
+							if (every.name === connection.sourceHandle) {
+								outClassType = every.classType;
+							}
+						});
+					}
+				});
+			return { inputClassType, outClassType };
+		},
+		[tasks]
+	);
+
+	/** 连接校验并修改值 */
+	const connectCheck = useCallback(
+		(connection: Connection) => {
 			const newVal =
 				(tasks?.length &&
 					tasks?.map((item) => {
-						if (item.id === val.source) {
+						if (item.id === connection.source) {
 							return {
 								...item,
 								edges: [
 									...item.edges,
 									{
-										...val,
+										...connection,
 										id: uuid(),
 									},
 								],
 							};
-						} else if (item.id === val.target) {
+						} else if (item.id === connection.target) {
 							return {
 								...item,
-								parameters: connectModifyParameters(item.parameters, val),
+								parameters: connectModifyParameters(
+									item.parameters,
+									connection
+								),
 							};
 						} else {
 							return item;
 						}
 					})) ||
 				[];
-			setTasks && setTasks(newVal as ITask[]);
+			return newVal;
 		},
-		[connectModifyParameters, setTasks, tasks]
+		[connectModifyParameters, tasks]
 	);
 
+	/** 已经连接线啦 */
+	const onConnect = useCallback(
+		(connection: Connection) => {
+			const { inputClassType, outClassType } = getClassType(connection);
+			let result: ITask[] = [];
+			if (inputClassType === outClassType) {
+				result = connectCheck(connection) as ITask[];
+			} else {
+				Message.error("端口数据类型不一致，无法连接！");
+				result = tasksDeleteLine(connection);
+			}
+			setTasks && setTasks(result);
+		},
+		[Message, connectCheck, getClassType, setTasks, tasksDeleteLine]
+	);
+
+	/** 点击连线 */
+	const onEdgeClick = useCallback((e: any, val: Edge) => {
+		console.log(val, "1111");
+	}, []);
+
 	return (
 		<ReactFlow
 			nodes={nodes}
@@ -353,6 +450,7 @@ const Flow = (props: IProps) => {
 			onEdgesChange={onEdgesChange}
 			onNodeDragStop={onNodeDragStop}
 			onConnect={onConnect}
+			onEdgeClick={onEdgeClick}
 			// proOptions={{ hideAttribution: true, account: "" }}
 			nodeTypes={nodeTypes}
 			onPaneClick={handlePaneClick}

src/views/Project/components/Flow/interface.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-23 11:00:29
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-12 00:26:48
+ * @LastEditTime: 2022-07-12 20:25:50
  * @FilePath: /bkunyun/src/views/Project/components/Flow/interface.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */