feat: 新增自定义算子交互优化 流节点展示多个输入输出

src/views/CustomOperator/components/OperatorList/index.tsx

@@ -113,7 +113,7 @@ const OperatorList = (props: IProps) => {
 				productId: productId as string,
 				keyword,
 				page,
-				size: 5,
+				size: 20,
 			});
 			// size: 20   todo
 		},

src/views/CustomOperator/components/SaveOperator/index.tsx

@@ -16,9 +16,15 @@ interface IProps {
 	saveFormDialog: boolean;
 	setSaveFormDialog: (val: boolean) => void;
 	operatorList: ITask[];
+	setShowCustomOperator: any;
 }
 const SaveOperator = (props: IProps) => {
-	const { saveFormDialog, setSaveFormDialog, operatorList } = props;
+	const {
+		saveFormDialog,
+		setSaveFormDialog,
+		operatorList,
+		setShowCustomOperator,
+	} = props;
 	const { currentProjectStore } = useStores();
 	const Message = useMessage();
 	const productId = toJS(currentProjectStore.currentProductInfo.id);
@@ -30,8 +36,9 @@ const SaveOperator = (props: IProps) => {
 	const { run: saveBatchActorRun } = useMyRequest(saveBatchActor, {
 		onSuccess: (res) => {
 			Message.success("保存算子成功");
-			setSaveFormDialog(false);
 			sessionStorage.setItem("operatorList", "[]");
+			setSaveFormDialog(false);
+			setShowCustomOperator();
 			console.log("res", res);
 		},
 	});

src/views/CustomOperator/index.tsx

@@ -168,6 +168,7 @@ const CustomOperator = observer((props: IProps) => {
 						saveFormDialog={saveFormDialog}
 						setSaveFormDialog={setSaveFormDialog}
 						operatorList={operatorList}
+						setShowCustomOperator={setShowCustomOperator}
 					></SaveOperator>
 				</div>
 				<div className={styles.coContent} id="customOperatorFlow">

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

@@ -90,7 +90,6 @@ const BatchOperatorFlow = (props: IProps) => {
 	/** 删除流节点或者线 */
 	const deleteSelectFlowNode = useCallback(
 		(e: any) => {
-			console.log(tasks);
 			if (e.keyCode === 8 && ListenState) {
 				/** 删除流节点逻辑 */
 				if (inSideFlowNodeId) {
@@ -216,7 +215,6 @@ const BatchOperatorFlow = (props: IProps) => {
 	const onNodeClick = (e: any, node: Node) => {
 		tasks?.forEach((item) => {
 			if (item.id === node.id) {
-				console.log("setInSideFlowNodeId", node.id);
 				setInSideFlowNodeId(node.id);
 			}
 		});
@@ -362,8 +360,6 @@ const BatchOperatorFlow = (props: IProps) => {
 
 	/** 点击连线 */
 	const onEdgeClick = useCallback((e: any, val: Edge) => {
-		console.log(e);
-		console.log(val);
 		setSelectedEdge(val);
 		/** 点击连线清除选中的node ID */
 		setInSideFlowNodeId("");

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

@@ -68,6 +68,7 @@ const FlowNode = (props: any) => {
 			[]
 		);
 	}, [parameters]);
+
 	return (
 		<div
 			style={flowNodeStyle}
@@ -76,14 +77,14 @@ const FlowNode = (props: any) => {
 				[styles.selectedFlowBox]: selectedStatus,
 			})}
 		>
-			{dotStatus?.isInput ? (
+			{/* {dotStatus?.isInput ? (
 				<Handle
 					className={styles.handleBox}
 					style={inStyle}
 					type="target"
 					position={Position.Top}
 				/>
-			) : null}
+			) : null} */}
 			{inParamsArr?.length
 				? inParamsArr.map((item: any, index: number) => {
 						return (
@@ -94,8 +95,8 @@ const FlowNode = (props: any) => {
 									style={{
 										background: "#fff ",
 										border: "1px solid #D1D6DE",
-										left: index * 24 + 20,
 										...inStyle,
+										left: index * 24 + 16,
 									}}
 									type="target"
 									position={Position.Top}
@@ -120,14 +121,14 @@ const FlowNode = (props: any) => {
 					/>
 				)}
 			</div>
-			{dotStatus?.isOutput ? (
+			{/* {dotStatus?.isOutput ? (
 				<Handle
 					className={styles.handleBox}
 					style={outStyle}
 					type="source"
 					position={Position.Bottom}
 				/>
-			) : null}
+			) : null} */}
 			{outParamsArr?.length
 				? outParamsArr.map((item: any, index: number) => {
 						return (
@@ -138,8 +139,8 @@ const FlowNode = (props: any) => {
 									style={{
 										background: "#fff ",
 										border: "1px solid #D1D6DE",
-										left: index * 24 + 20,
 										...outStyle,
+										left: index * 24 + 16,
 									}}
 									type="source"
 									position={Position.Bottom}

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

@@ -145,9 +145,12 @@ const Flow = (props: IProps) => {
 						[];
 					// 删除节点时同时删除相关的线
 					newVal?.forEach((task) => {
-						task.edges = task.edges.filter(
-							(edge) => edge.target !== inSideBatchNodeId
-						);
+						task.edges =
+							(task?.edges?.length &&
+								task.edges.filter(
+									(edge) => edge.target !== inSideBatchNodeId
+								)) ||
+							[];
 					});
 					setTasks && setTasks(newVal);
 				}
@@ -157,7 +160,14 @@ const Flow = (props: IProps) => {
 				}
 			}
 		},
-		[inSideBatchNodeId, selectedEdge, setTasks, tasks, tasksDeleteLine]
+		[
+			inSideBatchNodeId,
+			selectedEdge,
+			setTasks,
+			tasks,
+			tasksDeleteLine,
+			ListenState,
+		]
 	);
 
 	/** 监听鼠标按下事件 */
@@ -169,25 +179,25 @@ const Flow = (props: IProps) => {
 	}, [deleteSelectBatchNode]);
 
 	/** 获取是否有输入节点或者是否有输出节点 */
-	const nodesInputAndOutputStatus = useCallback(
-		(id: string) => {
-			/** 所有的连线 */
-			const lineArr: IEdge[] = [];
-			tasks?.length &&
-				tasks.forEach((item) => {
-					item.edges?.length && lineArr.push(...item.edges);
-				});
-			/** 所有的输入节点ID */
-			const isInput = lineArr?.some((item) => item.target === id);
-			/** 所有的输出节点ID */
-			const isOutput = lineArr?.some((item) => item.source === id);
-			return {
-				isInput,
-				isOutput,
-			};
-		},
-		[tasks]
-	);
+	// const nodesInputAndOutputStatus = useCallback(
+	// 	(id: string) => {
+	// 		/** 所有的连线 */
+	// 		const lineArr: IEdge[] = [];
+	// 		tasks?.length &&
+	// 			tasks.forEach((item) => {
+	// 				item.edges?.length && lineArr.push(...item.edges);
+	// 			});
+	// 		/** 所有的输入节点ID */
+	// 		const isInput = lineArr?.some((item) => item.target === id);
+	// 		/** 所有的输出节点ID */
+	// 		const isOutput = lineArr?.some((item) => item.source === id);
+	// 		return {
+	// 			isInput,
+	// 			isOutput,
+	// 		};
+	// 	},
+	// 	[tasks]
+	// );
 
 	/** 获取是否有流节点 */
 	const isFlowNode = useCallback(
@@ -264,7 +274,7 @@ const Flow = (props: IProps) => {
 							  }
 							: { selectedStatus: inSideFlowNodeId === item.id }),
 						/** 输入输出圆点状态 */
-						dotStatus: nodesInputAndOutputStatus(item.id),
+						// dotStatus: nodesInputAndOutputStatus(item.id),
 
 						/** 样式 */
 						style: {
@@ -296,7 +306,7 @@ const Flow = (props: IProps) => {
 		selectedBatchNodeId,
 		inSideBatchNodeId,
 		inSideFlowNodeId,
-		nodesInputAndOutputStatus,
+		// nodesInputAndOutputStatus,
 		getBatchStyle,
 	]);
 

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

@@ -156,7 +156,8 @@ const OperatorItem = (props: IOperatorItemProps) => {
 const OperatorList = observer((props: IOperatorListProps) => {
 	const { currentProjectStore } = useStores();
 	const productId = toJS(currentProjectStore.currentProductInfo.id);
-	const { templateConfigInfo, setTemplateConfigInfo } = props;
+	const { templateConfigInfo, setTemplateConfigInfo, showCustomOperator } =
+		props;
 	const [operatorListData, setOperatorListData] = useState<ITask[]>([]);
 	const [keyword, setKeyword] = useState<string>("");
 
@@ -168,22 +169,29 @@ const OperatorList = observer((props: IOperatorListProps) => {
 	});
 
 	useEffect(() => {
-		run({
-			owner: "root",
-			productId: "cadd" || "",
-		});
-	}, [productId, run]);
+		if (!showCustomOperator) {
+			run({
+				owner: "root",
+				productId: productId as string,
+			});
+		}
+	}, [productId, run, showCustomOperator]);
 
 	/** 处理回车键 */
 	const handleEnterCode = (e: React.KeyboardEvent<HTMLInputElement>) => {
 		if (e.keyCode === 13) {
-			run({
-				owner: "root",
-				productId: "cadd" || "",
-				keyword,
-			});
+			getOperatorList();
 		}
 	};
+
+	const getOperatorList = useCallback(() => {
+		run({
+			owner: "root",
+			productId: productId as string,
+			keyword,
+		});
+	}, [run, keyword, productId]);
+
 	return (
 		<div className={styles.operatorListBox}>
 			<div className={styles.searchBox}>

src/views/WorkFlowEdit/components/OperatorList/interface.ts

@@ -19,4 +19,5 @@ export interface IOperatorItemProps {
 export interface IOperatorListProps {
     templateConfigInfo: ITask[]
     setTemplateConfigInfo: (val: ITask[]) => void
+    showCustomOperator: boolean
 }
\ No newline at end of file

src/views/WorkFlowEdit/index.tsx

@@ -218,6 +218,7 @@ const WorkFlowEdit = observer((props: IProps) => {
 					</div>
 					{leftContentType === "list" && (
 						<OperatorList
+							showCustomOperator={showCustomOperator}
 							templateConfigInfo={templateConfigInfo}
 							setTemplateConfigInfo={setTemplateConfigInfo}
 						/>
@@ -242,7 +243,7 @@ const WorkFlowEdit = observer((props: IProps) => {
 						setTasks={setTemplateConfigInfo}
 						type="edit"
 						onFlowNodeClick={handleNodeClick}
-						ListenState={!saveFormDialog}
+						ListenState={!saveFormDialog && !showCustomOperator}
 					/>
 				</div>
 			</div>