feat: 自定义批算子删除流算子、删除线逻辑修改

src/views/CustomOperator/index.tsx

@@ -13,18 +13,13 @@ import styles from "./index.module.css";
 
 type IProps = {
 	setShowCustomOperator: any;
+	initOperatorList: ITask[];
 };
 
 const CustomOperator = observer((props: IProps) => {
-	const { setShowCustomOperator } = props;
+	const { setShowCustomOperator, initOperatorList } = props;
 	const Message = useMessage();
-	const sessionStorageOperatorList = JSON.parse(
-		sessionStorage.getItem("operatorList") || "[]"
-	);
-	console.log("sessionStorageOperatorList", sessionStorageOperatorList);
-	const [operatorList, setOperatorList] = useState<ITask[]>(
-		sessionStorageOperatorList
-	);
+	const [operatorList, setOperatorList] = useState<ITask[]>(initOperatorList);
 	const [saveFormDialog, setSaveFormDialog] = useState(false);
 	// const [showCustomOperator, setShowCustomOperator] = useState(false);
 

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

@@ -13,11 +13,7 @@ import ReactFlow, {
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { uuid } from "@/utils/util";
-import {
-	IEdge,
-	IParameter,
-	ITask,
-} from "../../../../ProjectSubmitWork/interface";
+import { IParameter, ITask } from "../../../../ProjectSubmitWork/interface";
 import { ILine } from "../../interface";
 import BatchNode from "../BatchNode";
 import FlowNode from "../FlowNode";
@@ -68,46 +64,18 @@ const BatchOperatorFlow = (props: IProps) => {
 			const result =
 				(tasks?.length &&
 					tasks.map((item) => {
-						/** 删除batch起始的edges中的一项 === 等于删除了一根连线 */
-						if (item.id === connection.source && item.type === "BATCH") {
+						// /** 删除batch起始的edges中的一项 === 等于删除了一根连线 */
+						if (item.id === connection.source) {
 							const newEdges =
 								(item.edges?.length &&
 									item.edges?.filter(
 										(every) => every.sourceHandle !== connection.sourceHandle
 									)) ||
 								[];
-
 							return {
 								...item,
 								edges: newEdges,
 							};
-							/** 选中batch结束位置&&更新校验值 */
-						} else if (item.id === connection.target && item.type === "BATCH") {
-							const newParameters =
-								(item.parameters?.length &&
-									item.parameters.map((every) => {
-										if (every.name === connection.targetHandle) {
-											const { error, helperText } =
-												getCustomTemplateParameterCheckResult({
-													...every,
-													linked: false,
-													hidden: false,
-												});
-											return {
-												...every,
-												hidden: false,
-												error,
-												helperText,
-											};
-										} else {
-											return every;
-										}
-									})) ||
-								[];
-							return {
-								...item,
-								parameters: newParameters,
-							};
 						} else {
 							return item;
 						}
@@ -123,8 +91,6 @@ const BatchOperatorFlow = (props: IProps) => {
 		(e: any) => {
 			if (e.keyCode === 8 && ListenState) {
 				/** 删除流节点逻辑 */
-				// inSideFlowNodeId
-				console.log(inSideFlowNodeId);
 				if (inSideFlowNodeId) {
 					const newVal =
 						(tasks?.length &&
@@ -156,7 +122,7 @@ const BatchOperatorFlow = (props: IProps) => {
 		return () => {
 			window.removeEventListener("keyup", deleteSelectFlowNode);
 		};
-	}, []);
+	}, [deleteSelectFlowNode]);
 
 	/** 生成初始化node节点 */
 	const initialNodes = useMemo(() => {
@@ -165,7 +131,7 @@ const BatchOperatorFlow = (props: IProps) => {
 			tasks.forEach((item) => {
 				val.push({
 					id: item.id,
-					type: item.type === "BATCH" ? "batchNode" : "flowNode",
+					type: "flowNode",
 					/** 每一项的数据 */
 					data: {
 						info: item,
@@ -201,15 +167,11 @@ const BatchOperatorFlow = (props: IProps) => {
 					 * extent: "parent" 跟随父节点移动
 					 * draggable: false 节点不可移动
 					 */
-					...(item.type === "BATCH"
-						? { style: { zIndex: -1 }, extent: "parent" }
-						: { draggable: flowNodeDraggable }),
-					/** parentNode 父节点ID */
-					// ...(item.parentNode ? { parentNode: item.parentNode } : {}),
+					draggable: flowNodeDraggable,
 				});
 			});
 		return val;
-	}, [tasks, flowType, inSideFlowNodeId, flowNodeDraggable]);
+	}, [tasks, inSideFlowNodeId, flowNodeDraggable]);
 
 	/** 生成初始化的连线节点 */
 	const initialEdges = useMemo(() => {
@@ -220,7 +182,6 @@ const BatchOperatorFlow = (props: IProps) => {
 					item?.edges.forEach((every) => {
 						const newLine = {
 							...every,
-							batchId: item.parentNode ? item.parentNode : item.id,
 						};
 						val.push(newLine);
 					}, []);
@@ -242,21 +203,11 @@ const BatchOperatorFlow = (props: IProps) => {
 		});
 	}, [selectedEdge?.id, tasks]);
 
-	/** 设置nodeId方法 */
-	// const setNodeIdFun = useCallback(
-	// 	(id: string) => {
-	// 		setInSideFlowNodeId("");
-	// 		document.getElementById(`point${id}`)?.scrollIntoView(true);
-	// 	},
-	// 	[]
-	// );
-
 	/** flowNode点击事件 */
 	const onNodeClick = (e: any, node: Node) => {
-		console.log(tasks);
-		console.log(node);
 		tasks?.forEach((item) => {
 			if (item.id === node.id) {
+				console.log("setInSideFlowNodeId", node.id);
 				setInSideFlowNodeId(node.id);
 			}
 		});
@@ -402,6 +353,8 @@ const BatchOperatorFlow = (props: IProps) => {
 
 	/** 点击连线 */
 	const onEdgeClick = useCallback((e: any, val: Edge) => {
+		console.log(e);
+		console.log(val);
 		setSelectedEdge(val);
 		/** 点击连线清除选中的node ID */
 		setInSideFlowNodeId("");
@@ -425,7 +378,6 @@ const BatchOperatorFlow = (props: IProps) => {
 			edges={edges}
 			fitView={flowType === "default" ? true : false}
 			{...reactFlowParams}
-			// proOptions={{ hideAttribution: true, account: "" }}
 			nodeTypes={nodeTypes}
 			onPaneClick={handlePaneClick}
 			onNodeClick={onNodeClick}

src/views/WorkFlowEdit/index.tsx

@@ -259,6 +259,9 @@ const WorkFlowEdit = observer((props: IProps) => {
 			{showCustomOperator && (
 				<CustomOperator
 					setShowCustomOperator={() => setShowCustomOperator(false)}
+					initOperatorList={JSON.parse(
+						sessionStorage.getItem("operatorList") || "[]"
+					)}
 				/>
 			)}
 		</div>