feat: 删除逻辑修改

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

@@ -52,6 +52,7 @@ const Flow = (props: IProps) => {
 		type: flowType = "default",
 		setTasks,
 		onFlowNodeClick,
+		...other
 	} = props;
 	/** 自定义的节点类型 */
 	const nodeTypes = useMemo(() => {
@@ -96,10 +97,9 @@ const Flow = (props: IProps) => {
 	const deleteSelectBatchNode = useCallback(
 		(e: any) => {
 			if (e.keyCode === 8) {
-				let val: ITask[] = [];
 				/** 删除批节点逻辑 */
 				if (inSideBatchNodeId) {
-					val =
+					const newVal =
 						(tasks?.length &&
 							tasks.filter((item) => {
 								return (
@@ -108,11 +108,12 @@ const Flow = (props: IProps) => {
 								);
 							})) ||
 						[];
+					setTasks && setTasks(newVal);
 				}
 				if (selectedEdge) {
-					val = tasksDeleteLine(selectedEdge);
+					const newVal = tasksDeleteLine(selectedEdge);
+					setTasks && setTasks(newVal);
 				}
-				setTasks && setTasks(val);
 			}
 		},
 		[inSideBatchNodeId, selectedEdge, setTasks, tasks, tasksDeleteLine]
@@ -316,11 +317,16 @@ const Flow = (props: IProps) => {
 				} else {
 					setInSideFlowNodeId(node.id);
 					setInSideBatchNodeId("");
+
 					setSelectedBatchNodeId && setSelectedBatchNodeId("");
 				}
 			}
 		});
-		onFlowNodeClick && onFlowNodeClick(node.id);
+		if (onFlowNodeClick) {
+			onFlowNodeClick(node.id);
+		}
+		/** 点击node统一清除选中的edge */
+		setSelectedEdge(undefined);
 	};
 
 	const handlePaneClick = () => {
@@ -456,9 +462,16 @@ const Flow = (props: IProps) => {
 	);
 
 	/** 点击连线 */
-	const onEdgeClick = useCallback((e: any, val: Edge) => {
-		setSelectedEdge(val);
-	}, []);
+	const onEdgeClick = useCallback(
+		(e: any, val: Edge) => {
+			setSelectedEdge(val);
+			/** 点击连线清除选中的node ID */
+			setInSideFlowNodeId("");
+			setInSideBatchNodeId("");
+			setSelectedBatchNodeId && setSelectedBatchNodeId("");
+		},
+		[setSelectedBatchNodeId]
+	);
 
 	return (
 		<ReactFlow
@@ -474,7 +487,7 @@ const Flow = (props: IProps) => {
 			nodeTypes={nodeTypes}
 			onPaneClick={handlePaneClick}
 			onNodeClick={onNodeClick}
-			{...props}
+			{...other}
 		>
 			<Controls />
 			<Background color="#aaa" gap={16} />

src/views/WorkFlowEdit/components/OperatorList/index.module.css

@@ -59,3 +59,18 @@
 	padding: 0 8px;
 	border-radius: 2px;
 }
+
+.noData {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+}
+.noDataImg {
+	margin: 160px 0 8px 0;
+}
+.noDataText {
+	font-size: 14px;
+	line-height: 22px;
+	color: rgba(138, 144, 153, 1);
+}

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

@@ -12,9 +12,10 @@ import useMyRequest from "@/hooks/useMyRequest";
 import { IResponse } from "@/api/http";
 import { fetchOperatorList, fetchVersionOperator } from "@/api/workbench_api";
 import { useStores } from "@/store";
+import noTemplate from "@/assets/project/noTemplate.svg";
+import MyMenu from "@/components/mui/MyMenu";
 
 import styles from "./index.module.css";
-import MyMenu from "@/components/mui/MyMenu";
 
 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
@@ -255,20 +256,27 @@ const OperatorList = observer((props: IOperatorListProps) => {
 				/>
 			</div>
 			<div className={styles.listBox}>
-				{operatorListData
-					.filter((item) => item.type === "BATCH")
-					.map((item) => {
-						return (
-							<OperatorItem
-								key={item.id}
-								info={item}
-								setOperatorListData={setOperatorListData}
-								operatorListData={operatorListData}
-								templateConfigInfo={templateConfigInfo}
-								setTemplateConfigInfo={setTemplateConfigInfo}
-							/>
-						);
-					})}
+				{operatorListData.filter((item) => item.type === "BATCH")?.length ? (
+					operatorListData
+						.filter((item) => item.type === "BATCH")
+						.map((item) => {
+							return (
+								<OperatorItem
+									key={item.id}
+									info={item}
+									setOperatorListData={setOperatorListData}
+									operatorListData={operatorListData}
+									templateConfigInfo={templateConfigInfo}
+									setTemplateConfigInfo={setTemplateConfigInfo}
+								/>
+							);
+						})
+				) : (
+					<div className={styles.noData}>
+						<img src={noTemplate} alt="" className={styles.noDataImg} />
+						<span className={styles.noDataText}>没有找到相关算子</span>
+					</div>
+				)}
 			</div>
 		</div>
 	);