fix: 拖拽生成数据

src/components/mui/MyMenu.tsx

@@ -21,7 +21,7 @@ const theme = createTheme({
 		MuiMenu: {
 			styleOverrides: {
 				root: {
-					maxHeight: "260px",
+					// maxHeight: "260px",
 					overflowY: "scroll",
 				},
 			},
@@ -87,7 +87,9 @@ const MyMenu = (props: IMyMenuProps) => {
 								key={index}
 							>
 								<span>{option.label}</span>
-								{value === option.value && <CheckIcon />}
+								{value === option.value && (
+									<CheckIcon sx={{ marginLeft: "12px" }} />
+								)}
 							</MenuItem>
 						);
 					})}

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

@@ -155,7 +155,7 @@ const Flow = (props: IProps) => {
 			const lineArr: IEdge[] = [];
 			tasks?.length &&
 				tasks.forEach((item) => {
-					lineArr.push(...item.edges);
+					item.edges?.length && lineArr.push(...item.edges);
 				});
 			/** 所有的输入节点ID */
 			const isInput = lineArr?.some((item) => item.target === id);
@@ -223,6 +223,7 @@ 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",
@@ -249,7 +250,10 @@ const Flow = (props: IProps) => {
 							padding: isFlowNode(item.id) ? "20px" : "12px 20px",
 						},
 					},
-					position: { x: Number(item.position.x), y: Number(item.position.y) },
+					position: {
+						x: Number(item.position?.x) || 0,
+						y: Number(item.position?.y) || 0,
+					},
 					...(item.type === "BATCH" ? { style: { zIndex: -1 } } : {}),
 					...(item.parentNode ? { parentNode: item.parentNode } : {}),
 					...(item.type === "BATCH" ? { extent: "parent" } : {}),
@@ -270,13 +274,14 @@ const Flow = (props: IProps) => {
 		const val: ILine[] = [];
 		tasks?.length &&
 			tasks.forEach((item) => {
-				item.edges.forEach((every) => {
-					const newLine = {
-						...every,
-						batchId: item.parentNode ? item.parentNode : item.id,
-					};
-					val.push(newLine);
-				}, []);
+				item?.edges?.length &&
+					item?.edges.forEach((every) => {
+						const newLine = {
+							...every,
+							batchId: item.parentNode ? item.parentNode : item.id,
+						};
+						val.push(newLine);
+					}, []);
 			});
 		return val.map((item: ILine) => {
 			const newSelectId = selectedNodeId ? selectedNodeId : inSideNodeId;
@@ -340,7 +345,7 @@ const Flow = (props: IProps) => {
 		<ReactFlow
 			nodes={nodes}
 			edges={edges}
-			fitView={flowType === "default" ? false : true}
+			fitView={flowType === "default" ? true : false}
 			proOptions={{ hideAttribution: true, account: "" }}
 			nodeTypes={nodeTypes}
 			onPaneClick={handlePaneClick}

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

@@ -12,7 +12,6 @@ import useMyRequest from "@/hooks/useMyRequest";
 import { IResponse } from "@/api/http";
 import { fetchOperatorList } from "@/api/workbench_api";
 import { useStores } from "@/store";
-import { uuid } from "@/utils/util";
 
 import styles from "./index.module.css";
 import MyMenu from "@/components/mui/MyMenu";
@@ -25,19 +24,66 @@ import MyMenu from "@/components/mui/MyMenu";
  * @FilePath: /bkunyun/src/views/WorkFlowEdit/components/OperatorList/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
+
+let count = 1;
+
 const OperatorItem = (props: IOperatorItemProps) => {
 	const {
 		info: { title, description, tags },
 		setTemplateConfigInfo,
 		templateConfigInfo,
+		setOperatorListData,
+		operatorListData,
+		info,
 	} = props;
 	const [isDragStyle, setIsDragStyle] = useState<boolean>(false);
 
 	/** 拖拽开始 */
 	const onDragStart = useCallback(() => {
 		setIsDragStyle(true);
+		count++;
 	}, []);
 
+	/** 通过id查找相对的批流数组 */
+	const getBatchFlowArr = useCallback(
+		(id: string) => {
+			const newVal = operatorListData.filter((item) => {
+				return item.id === id || item.parentNode === id;
+			});
+			return newVal;
+		},
+		[operatorListData]
+	);
+
+	/** 生成批流副本 */
+	const getCopyBatchFlowArr = useCallback(
+		(arr: ITask[], x: number, y: number) => {
+			const newVal = arr.map((item) => {
+				const newEdges =
+					item?.edges &&
+					item?.edges.map((every) => {
+						return {
+							...every,
+							source: `${every.source}_${count}`,
+							target: `${every.target}_${count}`,
+						};
+					});
+				return {
+					...item,
+					id: `${item.id}_${count}`,
+					parentNode: item.parentNode ? `${item.parentNode}_${count}` : "",
+					position: {
+						x: item.type === "BATCH" ? x : item.position?.x,
+						y: item.type === "BATCH" ? y : item.position?.y,
+					},
+					edges: newEdges.length ? newEdges : item?.edges,
+				};
+			});
+			return newVal;
+		},
+		[]
+	);
+
 	/** 拖拽结束 */
 	const onDragEnd = useCallback(
 		(e: React.DragEvent<HTMLDivElement>) => {
@@ -54,27 +100,25 @@ const OperatorItem = (props: IOperatorItemProps) => {
 				clientX < lowerRightX &&
 				clientY < lowerRightY
 			) {
-				console.log(
+				const batchFlowArr = getBatchFlowArr(info.id);
+				const newBatchFlowArr = getCopyBatchFlowArr(
+					batchFlowArr,
 					clientX - upperLeftPointX,
-					clientY - upperLeftPointY,
-					"0000000"
+					clientY - upperLeftPointY
 				);
-				const newVal = [
-					...cloneDeep(templateConfigInfo),
-					{
-						...props.info,
-						uuid: uuid(),
-						position: {
-							x: clientX - upperLeftPointX,
-							y: clientY - upperLeftPointY,
-						},
-					},
-				];
+				const newVal = cloneDeep(templateConfigInfo);
+				newVal.push(...newBatchFlowArr);
 				setTemplateConfigInfo(newVal);
 			}
 			setIsDragStyle(false);
 		},
-		[props.info, setTemplateConfigInfo, templateConfigInfo]
+		[
+			getBatchFlowArr,
+			getCopyBatchFlowArr,
+			info.id,
+			setTemplateConfigInfo,
+			templateConfigInfo,
+		]
 	);
 
 	return (
@@ -152,7 +196,6 @@ const OperatorList = observer((props: IOperatorListProps) => {
 			});
 		}
 	};
-
 	return (
 		<div className={styles.operatorListBox}>
 			<div className={styles.searchBox}>
@@ -169,12 +212,14 @@ const OperatorList = observer((props: IOperatorListProps) => {
 			</div>
 			<div className={styles.listBox}>
 				{operatorListData
-					// .filter((item) => item.type === "BATCH")
+					.filter((item) => item.type === "BATCH")
 					.map((item) => {
 						return (
 							<OperatorItem
 								key={item.id}
 								info={item}
+								setOperatorListData={setOperatorListData}
+								operatorListData={operatorListData}
 								templateConfigInfo={templateConfigInfo}
 								setTemplateConfigInfo={setTemplateConfigInfo}
 							/>

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

@@ -4,14 +4,16 @@ import { ITask } from "@/views/Project/ProjectSubmitWork/interface"
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-07-06 15:32:11
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-07 16:22:08
+ * @LastEditTime: 2022-07-08 16:05:21
  * @FilePath: /bkunyun/src/views/WorkFlowEdit/components/OperatorList/interface.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 export interface IOperatorItemProps {
     info: ITask
     setTemplateConfigInfo: (val: ITask[]) => void;
-    templateConfigInfo: ITask[]
+    templateConfigInfo: ITask[];
+    setOperatorListData: (val: ITask[]) => void;
+    operatorListData: ITask[]
 }
 
 export interface IOperatorListProps {