fix: 自定义模版删除功能

src/api/api_manager.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-13 09:56:57
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-07 18:19:20
+ * @LastEditTime: 2022-07-10 13:47:53
  * @FilePath: /bkunyun/src/api/api_manager.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -37,6 +37,7 @@ const RESTAPI = {
   API_SUBMIT_WORKFLOW: `${BACKEND_API_URI_PREFIX}/cpp/workflow/submit`, //提交工作流
   API_WORKBENCH_WORKFLOW_TASKINFO: `${BACKEND_API_URI_PREFIX}/cpp/workbench/workflowjob/task-info`, //查询任务某个算子详情
   API_OPERATOR_LIST:`${BACKEND_API_URI_PREFIX}/cpp/workflow/actorspecs`,  // 获取算子列表
+  API_VERSION_OPERATOR:`${BACKEND_API_URI_PREFIX}/cpp/workflow/actorversion`,  // 获取指定版本算子
 };
 
 export default RESTAPI;

src/api/workbenchInterface.ts

-export interface IGetOperatorList {
+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-07-08 09:26:58
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-10 13:53:26
+ * @FilePath: /bkunyun/src/api/workbenchInterface.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+export interface IGetOperatorListParams {
   owner: string;
   productId: string;
   keyword?: string
+}
+
+export interface IFetchOperatorListParams {
+  version: string;
+  title: string
 }
\ No newline at end of file

src/api/workbench_api.ts

@@ -2,13 +2,13 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-07-05 14:00:37
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-07 18:24:16
+ * @LastEditTime: 2022-07-10 13:54:04
  * @FilePath: /bkunyun/src/api/workbench_api.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 import request from "@/utils/axios/service";
 import Api from "./api_manager";
-import { IGetOperatorList } from "./workbenchInterface";
+import { IGetOperatorListParams, IFetchOperatorListParams } from "./workbenchInterface";
 
 function current() {
     return request({
@@ -129,7 +129,7 @@ const cancelWorkflowJob = (params: workflowJobCancelParams) => {
 };
 
 // 获取算子列表数据
-const fetchOperatorList = (params: IGetOperatorList) => {
+const fetchOperatorList = (params: IGetOperatorListParams) => {
     return request({
         url: Api.API_OPERATOR_LIST,
         method: "get",
@@ -137,6 +137,15 @@ const fetchOperatorList = (params: IGetOperatorList) => {
     });
 };
 
+
+// 获取指定版本算子
+const fetchVersionOperator = (params: IFetchOperatorListParams) => {
+    return request({
+        url: Api.API_VERSION_OPERATOR,
+        method: "get",
+        params,
+    });
+};
 export {
     current,
     menu,
@@ -147,5 +156,6 @@ export {
     getWorkflowJobList,
     deleteWorkflowJob,
     cancelWorkflowJob,
-    fetchOperatorList
+    fetchOperatorList,
+    fetchVersionOperator
 };

src/components/mui/MyMenu.tsx

@@ -63,7 +63,11 @@ const MyMenu = (props: IMyMenuProps) => {
 	};
 	const handleClose = (value: string) => {
 		setAnchorEl(null);
+	};
+
+	const handleMenuClick = (value: string) => {
 		setValue && setValue(value);
+		setAnchorEl(null);
 	};
 
 	return (
@@ -82,7 +86,7 @@ const MyMenu = (props: IMyMenuProps) => {
 					{options.map((option, index) => {
 						return (
 							<MenuItem
-								onClick={() => handleClose(option.value)}
+								onClick={() => handleMenuClick(option.value)}
 								selected={value === option.value}
 								key={index}
 							>

src/views/Project/ProjectSubmitWork/interface.ts

@@ -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-07 17:39:49
+ * @LastEditTime: 2022-07-09 15:57:24
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/interface.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -38,6 +38,7 @@ export interface ITask {
   title: string;
   description: string;
   version?: string;
+  allVersions?: string[]
   position: {
     x: number;
     y: number;

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

@@ -34,9 +34,14 @@ interface IProps extends ReactFlowProps {
 	tasks?: ITask[];
 	/** 点击batch事件 */
 	onBatchClick?: (val: string) => void;
+	/** 设置选中节点id */
 	setSelectedNodeId?: (val: string) => void;
+	/** 选中的节点id */
 	selectedNodeId?: string;
+	/** 类型， edit为编辑类型 */
 	type?: "edit" | "default";
+	/** 设置组件数据 组件为编辑状态使用 */
+	setTasks?: (val: ITask[]) => void;
 }
 
 /** 获取imgUrl */
@@ -140,6 +145,7 @@ const Flow = (props: IProps) => {
 		setSelectedNodeId,
 		selectedNodeId,
 		type: flowType = "default",
+		setTasks,
 	} = props;
 	/** 自定义的节点类型 */
 	const nodeTypes = useMemo(() => {
@@ -148,6 +154,27 @@ const Flow = (props: IProps) => {
 	/** 内部维护的选择的节点Id */
 	const [inSideNodeId, setInSideNodeId] = useState<string>("");
 
+	const deleteSelectBatchNode = useCallback(
+		(e: any) => {
+			if (e.keyCode === 8) {
+				const val =
+					tasks?.length &&
+					tasks.filter((item) => {
+						return item.id !== inSideNodeId && item.parentNode !== inSideNodeId;
+					});
+				setTasks && setTasks(val || []);
+			}
+		},
+		[inSideNodeId, setTasks, tasks]
+	);
+
+	useEffect(() => {
+		window.addEventListener("keyup", deleteSelectBatchNode);
+		return () => {
+			window.removeEventListener("keyup", deleteSelectBatchNode);
+		};
+	}, [deleteSelectBatchNode]);
+
 	/** 获取是否有输入节点或者是否有输出节点 */
 	const nodesInputAndOutputStatus = useCallback(
 		(id: string) => {
@@ -223,10 +250,10 @@ const Flow = (props: IProps) => {
 		const val: any = [];
 		tasks?.length &&
 			tasks.forEach((item) => {
-				console.log(item, "item");
 				val.push({
 					id: item.id,
 					type: item.type === "BATCH" ? "batchNode" : "flowNode",
+					/** 每一项的数据 */
 					data: {
 						label: item.title || "",
 
@@ -240,7 +267,9 @@ const Flow = (props: IProps) => {
 										: inSideNodeId === item.id,
 							  }
 							: {}),
+						/** 是否选中 */
 						isCheck: item.isCheck,
+						/** 运行状态 */
 						executionStatus: item.executionStatus,
 						/** 输入输出圆点状态 */
 						dotStatus: nodesInputAndOutputStatus(item.id),
@@ -250,13 +279,20 @@ const Flow = (props: IProps) => {
 							padding: isFlowNode(item.id) ? "20px" : "12px 20px",
 						},
 					},
+					/** 坐标 */
 					position: {
 						x: Number(item.position?.x) || 0,
 						y: Number(item.position?.y) || 0,
 					},
-					...(item.type === "BATCH" ? { style: { zIndex: -1 } } : {}),
+					/**
+					 * extent: "parent" 跟随父节点移动
+					 * draggable: false 节点不可移动
+					 */
+					...(item.type === "BATCH"
+						? { style: { zIndex: -1 }, extent: "parent" }
+						: { draggable: false }),
+					/** parentNode 父节点ID */
 					...(item.parentNode ? { parentNode: item.parentNode } : {}),
-					...(item.type === "BATCH" ? { extent: "parent" } : {}),
 				});
 			});
 		return val;
@@ -329,9 +365,9 @@ const Flow = (props: IProps) => {
 	};
 
 	/** node节点 */
-	const [nodes, setNodes] = useNodesState(initialNodes);
+	const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
 	/** 连线数组 */
-	const [edges, setEdges] = useEdgesState(initialEdges);
+	const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
 	useEffect(() => {
 		setEdges(initialEdges);
@@ -346,7 +382,11 @@ const Flow = (props: IProps) => {
 			nodes={nodes}
 			edges={edges}
 			fitView={flowType === "default" ? true : false}
-			proOptions={{ hideAttribution: true, account: "" }}
+			onNodesChange={onNodesChange}
+			onEdgesChange={onEdgesChange}
+			deleteKeyCode={["13"]}
+			// onConnect={onConnect}
+			// proOptions={{ hideAttribution: true, account: "" }}
 			nodeTypes={nodeTypes}
 			onPaneClick={handlePaneClick}
 			onNodeClick={onNodeClick}

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

@@ -51,3 +51,11 @@
 	overflow-y: scroll;
 	height: calc(100% - 48px);
 }
+
+.versionBox {
+	background: #e6e8eb;
+	color: #1e2633;
+	cursor: pointer;
+	padding: 0 8px;
+	border-radius: 2px;
+}

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

 import { OutlinedInput } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import classNames from "classnames";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { toJS } from "mobx";
 import cloneDeep from "lodash/cloneDeep";
@@ -10,7 +10,7 @@ import { IOperatorItemProps, IOperatorListProps } from "./interface";
 import { ITask } from "@/views/Project/ProjectSubmitWork/interface";
 import useMyRequest from "@/hooks/useMyRequest";
 import { IResponse } from "@/api/http";
-import { fetchOperatorList } from "@/api/workbench_api";
+import { fetchOperatorList, fetchVersionOperator } from "@/api/workbench_api";
 import { useStores } from "@/store";
 
 import styles from "./index.module.css";
@@ -29,7 +29,7 @@ let count = 1;
 
 const OperatorItem = (props: IOperatorItemProps) => {
 	const {
-		info: { title, description, tags },
+		info: { title, description, tags, allVersions, version },
 		setTemplateConfigInfo,
 		templateConfigInfo,
 		setOperatorListData,
@@ -37,6 +37,7 @@ const OperatorItem = (props: IOperatorItemProps) => {
 		info,
 	} = props;
 	const [isDragStyle, setIsDragStyle] = useState<boolean>(false);
+	const [versionValue, setVersionValue] = useState<string>("");
 
 	/** 拖拽开始 */
 	const onDragStart = useCallback(() => {
@@ -44,6 +45,26 @@ const OperatorItem = (props: IOperatorItemProps) => {
 		count++;
 	}, []);
 
+	// 获取指定版本的算子
+	const { run: getVersionOperator } = useMyRequest(fetchVersionOperator, {
+		onSuccess: (res: IResponse<any>) => {
+			if (res.data) {
+				let index: number | undefined = undefined;
+				const newVal = operatorListData.filter((item, i) => {
+					const bol = item.id === info.id || item.parentNode === info.id;
+					if (bol && index === undefined) {
+						index = i;
+					}
+					return !bol;
+				});
+				if (index !== undefined) {
+					newVal.splice(index, 0, ...res.data);
+				}
+				setOperatorListData(newVal);
+			}
+		},
+	});
+
 	/** 通过id查找相对的批流数组 */
 	const getBatchFlowArr = useCallback(
 		(id: string) => {
@@ -121,6 +142,27 @@ const OperatorItem = (props: IOperatorItemProps) => {
 		]
 	);
 
+	/** 所有版本信息格式化 */
+	const getAllVersion = useMemo(() => {
+		return (
+			allVersions?.length &&
+			allVersions?.map((item) => {
+				return { label: item, value: item };
+			})
+		);
+	}, [allVersions]);
+
+	/** 切换版本 */
+	const changeVersion = useCallback(
+		(val: string) => {
+			if (val !== versionValue) {
+				setVersionValue(val);
+				getVersionOperator({ title: info.title, version: val });
+			}
+		},
+		[getVersionOperator, info.title, versionValue]
+	);
+
 	return (
 		<div
 			className={classNames({
@@ -149,14 +191,15 @@ const OperatorItem = (props: IOperatorItemProps) => {
 					);
 				})}
 				<MyMenu
-					options={[
-						{ label: "1.1.0", value: "1.1.0" },
-						{ label: "1.2.0", value: "1.2.0" },
-						{ label: "1.3.0", value: "1.3.0" },
-					]}
-					value="1.1.0"
+					options={getAllVersion || []}
+					value={versionValue || version || ""}
+					setValue={(val: string) => {
+						changeVersion(val);
+					}}
 				>
-					<div>ddd</div>
+					<div className={styles.versionBox}>{`版本：${
+						versionValue || version
+					}`}</div>
 				</MyMenu>
 			</div>
 		</div>

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-08 11:51:07
+ * @LastEditTime: 2022-07-09 15:11:17
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -108,7 +108,11 @@ const WorkFlowEdit = (props: IProps) => {
 					)}
 				</div>
 				<div className={styles.swFlowBox} id="workFlowEditRight">
-					<Flow tasks={templateConfigInfo} type="edit" />
+					<Flow
+						tasks={templateConfigInfo}
+						setTasks={setTemplateConfigInfo}
+						type="edit"
+					/>
 				</div>
 			</div>
 		</div>