feat: 添加节点

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

@@ -7,6 +7,10 @@ import ReactFlow, {
 	Position,
 	ReactFlowProps,
 	Node,
+	applyNodeChanges,
+	applyEdgeChanges,
+	EdgeChange,
+	NodeChange,
 } from "react-flow-renderer";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import classNames from "classnames";
@@ -22,6 +26,7 @@ import {
 import { IBatchNode, ILine } from "./interface";
 
 import styles from "./index.module.css";
+import { Tooltip } from "@mui/material";
 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-22 10:15:22
@@ -42,6 +47,8 @@ interface IProps extends ReactFlowProps {
 	type?: "edit" | "default";
 	/** 设置组件数据 组件为编辑状态使用 */
 	setTasks?: (val: ITask[]) => void;
+	/** 点击流程node 节点 返回唯一标识符 */
+	onFlowNodeClick?: (val: string) => void;
 }
 
 /** 获取imgUrl */
@@ -61,40 +68,80 @@ const getImgUrl = (type: IExecutionStatus) => {
 /** 自定义batch节点 */
 const BatchNode = (props: IBatchNode) => {
 	const { data } = props;
-	const { dotStatus, style, isFlowNode, label, selectedStatus } = data;
+	const {
+		dotStatus,
+		style,
+		isFlowNode,
+		selectedStatus,
+		info: { title, isCheck, executionStatus, parameters },
+	} = data;
+
+	/** 获取输入参数数组 */
+	const inParamsArr = useMemo(() => {
+		return parameters.filter((item) => {
+			return item.parameterGroup === "in";
+		});
+	}, [parameters]);
+
+	/** 获取输出参数数组 */
+	const outParamsArr = useMemo(() => {
+		return parameters.filter((item) => {
+			return item.parameterGroup === "out";
+		});
+	}, [parameters]);
+
 	return (
 		<div
 			className={classNames({
 				[styles.batchNode]: true,
 				[styles.selectedBatchBox]: selectedStatus,
-				[styles.runBatchNode]: data.executionStatus === "Running",
-				[styles.doneBatchNode]: data.executionStatus === "Done",
-				[styles.errorBatchNode]: data.executionStatus === "Failed",
+				[styles.runBatchNode]: executionStatus === "Running",
+				[styles.doneBatchNode]: executionStatus === "Done",
+				[styles.errorBatchNode]: executionStatus === "Failed",
 			})}
 			style={style}
 		>
-			{dotStatus?.isInput ? (
-				<Handle
-					style={{ background: "#fff ", border: "1px solid #D1D6DE", left: 20 }}
-					type="target"
-					position={Position.Top}
-				/>
-			) : null}
+			{inParamsArr?.length &&
+				inParamsArr.map((item, index) => {
+					return (
+						<Tooltip title={item.name}>
+							<Handle
+								// title={item.name}
+								style={{
+									background: "#fff ",
+									border: "1px solid #D1D6DE",
+									left: index * 20 + 20,
+								}}
+								type="target"
+								position={Position.Top}
+							/>
+						</Tooltip>
+					);
+				})}
 			<div
 				className={classNames({
 					[styles.batchRotate]: isFlowNode,
 				})}
 			>
-				{label || ""}
-				{data.isCheck && <span className={styles.successDot}></span>}
+				{title || ""}
+				{isCheck && <span className={styles.successDot}></span>}
 			</div>
-			{dotStatus?.isOutput ? (
-				<Handle
-					style={{ background: "#fff ", border: "1px solid #D1D6DE", left: 20 }}
-					type="source"
-					position={Position.Bottom}
-				/>
-			) : null}
+			{outParamsArr?.length &&
+				outParamsArr.map((item, index) => {
+					return (
+						<Tooltip title={item.name}>
+							<Handle
+								style={{
+									background: "#fff ",
+									border: "1px solid #D1D6DE",
+									left: index * 20 + 20,
+								}}
+								type="source"
+								position={Position.Bottom}
+							/>
+						</Tooltip>
+					);
+				})}
 		</div>
 	);
 };
@@ -102,13 +149,17 @@ const BatchNode = (props: IBatchNode) => {
 /** 自定义flow节点 */
 const FlowNode = (props: any) => {
 	const { data } = props;
+	const {
+		dotStatus,
+		info: { title, isCheck, executionStatus },
+	} = data;
 	return (
 		<div
 			className={classNames({
 				[styles.flowNode]: true,
 			})}
 		>
-			{data?.dotStatus?.isInput ? (
+			{dotStatus?.isInput ? (
 				<Handle
 					style={{ background: "#C2C6CC ", left: 12 }}
 					type="target"
@@ -116,17 +167,17 @@ const FlowNode = (props: any) => {
 				/>
 			) : null}
 			<div style={{ display: "flex", alignItems: "center" }}>
-				{data?.label || ""}
-				{data.isCheck && <span className={styles.successDot}></span>}
-				{getImgUrl(data.executionStatus) && (
+				{title || ""}
+				{isCheck && <span className={styles.successDot}></span>}
+				{getImgUrl(executionStatus) && (
 					<img
 						style={{ marginLeft: "6px" }}
-						src={getImgUrl(data.executionStatus)}
+						src={getImgUrl(executionStatus)}
 						alt=""
 					/>
 				)}
 			</div>
-			{data?.dotStatus?.isOutput ? (
+			{dotStatus?.isOutput ? (
 				<Handle
 					style={{ background: "#C2C6CC ", left: 12 }}
 					type="source"
@@ -146,6 +197,7 @@ const Flow = (props: IProps) => {
 		selectedNodeId,
 		type: flowType = "default",
 		setTasks,
+		onFlowNodeClick,
 	} = props;
 	/** 自定义的节点类型 */
 	const nodeTypes = useMemo(() => {
@@ -257,8 +309,8 @@ const Flow = (props: IProps) => {
 					type: item.type === "BATCH" ? "batchNode" : "flowNode",
 					/** 每一项的数据 */
 					data: {
-						label: item.title || "",
-
+						// label: item.title || "",
+						info: item,
 						...(item.type === "BATCH"
 							? {
 									/** 是否有流节点 */
@@ -269,12 +321,13 @@ const Flow = (props: IProps) => {
 										: inSideNodeId === item.id,
 							  }
 							: {}),
-						/** 是否选中 */
-						isCheck: item.isCheck,
+						// /** 是否选中 */
+						// isCheck: item.isCheck,
 						/** 运行状态 */
-						executionStatus: item.executionStatus,
+						// executionStatus: item.executionStatus,
 						/** 输入输出圆点状态 */
 						dotStatus: nodesInputAndOutputStatus(item.id),
+
 						/** 样式 */
 						style: {
 							...getBatchStyle(item),
@@ -359,6 +412,7 @@ const Flow = (props: IProps) => {
 				}
 			}
 		});
+		onFlowNodeClick && onFlowNodeClick(node.id);
 	};
 
 	const handlePaneClick = () => {
@@ -367,9 +421,9 @@ const Flow = (props: IProps) => {
 	};
 
 	/** node节点 */
-	const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+	const [nodes, setNodes] = useNodesState(initialNodes);
 	/** 连线数组 */
-	const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+	const [edges, setEdges] = useEdgesState(initialEdges);
 
 	useEffect(() => {
 		setEdges(initialEdges);
@@ -379,6 +433,22 @@ const Flow = (props: IProps) => {
 		setNodes(initialNodes);
 	}, [initialNodes, setNodes]);
 
+	const onNodesChange = useCallback(
+		(changes: NodeChange[]) => {
+			console.log(changes, "1111");
+			setNodes((ns) => applyNodeChanges(changes, ns));
+		},
+		[setNodes]
+	);
+
+	const onEdgesChange = useCallback(
+		(changes: EdgeChange[]) => {
+			console.log(changes, "222222");
+			setEdges((es) => applyEdgeChanges(changes, es));
+		},
+		[setEdges]
+	);
+
 	return (
 		<ReactFlow
 			nodes={nodes}

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

@@ -2,12 +2,13 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-23 11:00:29
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-07 11:23:14
+ * @LastEditTime: 2022-07-11 15:24:53
  * @FilePath: /bkunyun/src/views/Project/components/Flow/interface.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 
 import { CSSProperties } from "react";
+import { ITask } from "../../ProjectSubmitWork/interface";
 
 /** 线的参数 */
 export interface ILine {
@@ -40,7 +41,11 @@ export interface IBatchNodeData {
     isCheck?: boolean;
     /** 运行状态 */
     executionStatus: string
+    /** 每一项信息 */
+    info: ITask
 }
+
 export interface IBatchNode {
     data: IBatchNodeData
+   
 }
\ No newline at end of file

src/views/WorkFlowEdit/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 20:03:56
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-11 11:31:14
+ * @LastEditTime: 2022-07-11 14:40:34
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -69,6 +69,7 @@ const WorkFlowEdit = (props: IProps) => {
 	const handleNodeClick = useCallback((val: string) => {
 		setSelectTaskId(val);
 	}, []);
+
 	return (
 		<div className={styles.swBox}>
 			<div className={styles.swHeader}>
@@ -148,6 +149,7 @@ const WorkFlowEdit = (props: IProps) => {
 						tasks={templateConfigInfo}
 						setTasks={setTemplateConfigInfo}
 						type="edit"
+						onFlowNodeClick={handleNodeClick}
 					/>
 				</div>
 			</div>