Merge branch 'feat-20220705-customTemplate' of http://120.77.149.83/root/bkunyun…

Merge branch 'feat-20220705-customTemplate' of http://120.77.149.83/root/bkunyun into feat-20220705-customTemplate

src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx

@@ -20,11 +20,11 @@ type ConfigFormProps = {
 	templateConfigInfo?: ITemplateConfig;
 	setParameter: any;
 	onRef?: React.Ref<any>;
-	setSelectedNodeId: (val: string) => void;
+	setSelectedBatchNodeId: (val: string) => void;
 };
 
 const ConfigForm = (props: ConfigFormProps) => {
-	const { templateConfigInfo, setParameter, setSelectedNodeId } = props;
+	const { templateConfigInfo, setParameter, setSelectedBatchNodeId } = props;
 	const [name, setName] = useState<string>(""); // 任务名称
 
 	const [nameHelp, setNameHelp] = useState({
@@ -212,8 +212,8 @@ const ConfigForm = (props: ConfigFormProps) => {
 						<div className={styles.parameterContent}>
 							{parameter.domType.toLowerCase() === "file" && (
 								<MyInput
-									onFocus={() => setSelectedNodeId(batchId || "")}
-									onBlur={() => setSelectedNodeId("")}
+									onFocus={() => setSelectedBatchNodeId(batchId || "")}
+									onBlur={() => setSelectedBatchNodeId("")}
 									value={parameter.value || ""}
 									InputProps={{
 										endAdornment: (
@@ -234,8 +234,8 @@ const ConfigForm = (props: ConfigFormProps) => {
 							)}
 							{parameter.domType.toLowerCase() === "path" && (
 								<MyInput
-									onFocus={() => setSelectedNodeId(batchId || "")}
-									onBlur={() => setSelectedNodeId("")}
+									onFocus={() => setSelectedBatchNodeId(batchId || "")}
+									onBlur={() => setSelectedBatchNodeId("")}
 									value={parameter.value || ""}
 									InputProps={{
 										endAdornment: (
@@ -256,8 +256,8 @@ const ConfigForm = (props: ConfigFormProps) => {
 							)}
 							{parameter.domType.toLowerCase() === "dataset" && (
 								<MyInput
-									onFocus={() => setSelectedNodeId(taskId)}
-									onBlur={() => setSelectedNodeId("")}
+									onFocus={() => setSelectedBatchNodeId(taskId)}
+									onBlur={() => setSelectedBatchNodeId("")}
 									value={parameter.value || ""}
 									InputProps={{
 										endAdornment: (
@@ -279,10 +279,10 @@ const ConfigForm = (props: ConfigFormProps) => {
 							{parameter.domType.toLowerCase() === "input" && (
 								<MyInput
 									onFocus={() => {
-										setSelectedNodeId(batchId || "");
+										setSelectedBatchNodeId(batchId || "");
 										console.log(batchId, "111");
 									}}
-									onBlur={() => setSelectedNodeId("")}
+									onBlur={() => setSelectedBatchNodeId("")}
 									value={parameter.value || ""}
 									onChange={(e: any) =>
 										handleParameterChange(e, taskId, parameter.name || "")
@@ -294,8 +294,8 @@ const ConfigForm = (props: ConfigFormProps) => {
 							)}
 							{parameter.domType.toLowerCase() === "select" && (
 								<MySelect
-									onFocus={() => setSelectedNodeId(batchId || "")}
-									onBlur={() => setSelectedNodeId("")}
+									onFocus={() => setSelectedBatchNodeId(batchId || "")}
+									onBlur={() => setSelectedBatchNodeId("")}
 									value={parameter.value}
 									onChange={(e: any) =>
 										handleParameterChange(e, taskId, parameter.name || "")
@@ -307,8 +307,8 @@ const ConfigForm = (props: ConfigFormProps) => {
 							)}
 							{parameter.domType.toLowerCase() === "multipleselect" && (
 								<MySelect
-									onFocus={() => setSelectedNodeId(batchId || "")}
-									onBlur={() => setSelectedNodeId("")}
+									onFocus={() => setSelectedBatchNodeId(batchId || "")}
+									onBlur={() => setSelectedBatchNodeId("")}
 									value={parameter.value}
 									onChange={(e: any) =>
 										handleParameterChange(e, taskId, parameter.name || "")
@@ -325,8 +325,8 @@ const ConfigForm = (props: ConfigFormProps) => {
 									onChange={(e: any) =>
 										handleParameterChange(e, taskId, parameter.name || "")
 									}
-									onFocus={() => setSelectedNodeId(batchId || "")}
-									onBlur={() => setSelectedNodeId("")}
+									onFocus={() => setSelectedBatchNodeId(batchId || "")}
+									onBlur={() => setSelectedBatchNodeId("")}
 									options={optionsTransform(parameter.choices, "label")}
 									error={parameter.error || false}
 									helperText={parameter.helperText}
@@ -347,8 +347,8 @@ const ConfigForm = (props: ConfigFormProps) => {
 										)
 									}
 									options={optionsTransform(parameter.choices, "label")}
-									onFocus={() => setSelectedNodeId(batchId || "")}
-									onBlur={() => setSelectedNodeId("")}
+									onFocus={() => setSelectedBatchNodeId(batchId || "")}
+									onBlur={() => setSelectedBatchNodeId("")}
 									error={parameter.error || false}
 									helperText={parameter.helperText}
 								></MyCheckBox>

src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-21 15:25:25
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-06 11:55:41
+ * @LastEditTime: 2022-07-12 14:09:20
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -10,13 +10,20 @@ import Flow from "../../components/Flow";
 import { ITemplateConfig } from "../interface";
 
 interface IProps {
-  templateConfigInfo?: ITemplateConfig;
-  setSelectedNodeId?: (val:string) => void;
-  selectedNodeId?: string;
+	templateConfigInfo?: ITemplateConfig;
+	setSelectedBatchNodeId?: (val: string) => void;
+	selectedBatchNodeId?: string;
 }
 const WorkFlow = (props: IProps) => {
-  const { templateConfigInfo,setSelectedNodeId, selectedNodeId } = props;
-  return <Flow tasks={templateConfigInfo?.tasks} setSelectedNodeId={setSelectedNodeId} selectedNodeId={selectedNodeId}/>;
+	const { templateConfigInfo, setSelectedBatchNodeId, selectedBatchNodeId } =
+		props;
+	return (
+		<Flow
+			tasks={templateConfigInfo?.tasks}
+			setSelectedBatchNodeId={setSelectedBatchNodeId}
+			selectedBatchNodeId={selectedBatchNodeId}
+		/>
+	);
 };
 
 export default WorkFlow;

src/views/Project/ProjectSubmitWork/index.tsx

@@ -42,7 +42,7 @@ const ProjectSubmitWork = observer(() => {
 	let configFormRef: any = React.createRef();
 	/** 是否全屏 */
 	const [fullScreenShow, setFullScreenShow] = useState<boolean>(false);
-	const [selectedNodeId, setSelectedNodeId] = useState<string>("");
+	const [selectedBatchNodeId, setSelectedBatchNodeId] = useState<string>("");
 
 	// 前往工作台
 	const goToWorkbench = (toWorkbenchList = false) => {
@@ -298,7 +298,7 @@ const ProjectSubmitWork = observer(() => {
 							onRef={configFormRef}
 							templateConfigInfo={templateConfigInfo}
 							setParameter={setParameter}
-							setSelectedNodeId={setSelectedNodeId}
+							setSelectedBatchNodeId={setSelectedBatchNodeId}
 						/>
 					</div>
 				)}
@@ -308,8 +308,8 @@ const ProjectSubmitWork = observer(() => {
 				>
 					<WorkFlow
 						templateConfigInfo={templateConfigInfo}
-						setSelectedNodeId={setSelectedNodeId}
-						selectedNodeId={selectedNodeId}
+						setSelectedBatchNodeId={setSelectedBatchNodeId}
+						selectedBatchNodeId={selectedBatchNodeId}
 					/>
 				</div>
 			</div>

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-09 15:57:24
+ * @LastEditTime: 2022-07-12 11:51:17
  * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/interface.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -23,7 +23,8 @@ export interface IParameter {
   tags: Array<string>;
   source: string;
   productId: string;
-  tasks: ITask[];
+  // tasks: ITask[];
+  isLine?: boolean;
   validators: Array<IValidator>;
   choices: Array<IChoice>;
   error?: boolean;
@@ -93,7 +94,7 @@ export interface IEdge {
   sourceHandle: string;
   target: string;
   targetHandle: string;
-  label: string;
+  label?: string;
 }
 
 // 提交任务时的动态表单的数据结构

src/views/Project/components/Flow/index.module.css → src/views/Project/components/Flow/components/BatchNode/index.module.css

@@ -20,16 +20,6 @@
 	border-left: 4px solid #ff4e4e;
 }
 
-.batchRotate {
-	transform: translateX(-50%) rotate(-90deg);
-}
-
-.flowNode {
-	background-color: #f5f6f7;
-	border-radius: 2px;
-	padding: 6px 12px;
-}
-
 .successDot {
 	display: inline-block;
 	line-height: 22px;
@@ -45,3 +35,7 @@
 	border: 1px solid #1370ff;
 	border-left: 4px solid #1370ff;
 }
+
+.batchRotate {
+	transform: translateX(-50%) rotate(-90deg);
+}

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

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-07-12 11:20:29
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-12 11:28:57
+ * @FilePath: /bkunyun/src/views/Project/components/Flow/components/BatchNode.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+
+import { Tooltip } from "@mui/material";
+import classNames from "classnames";
+import { useMemo } from "react";
+import { Handle, Position } from "react-flow-renderer";
+
+import { uuid } from "@/utils/util";
+import { IBatchNode } from "../../interface";
+
+import styles from "./index.module.css";
+
+/** 自定义batch节点 */
+const BatchNode = (props: IBatchNode) => {
+	const { data } = props;
+	const {
+		style,
+		isFlowNode,
+		selectedStatus,
+		info: { title, isCheck, executionStatus, parameters },
+	} = data;
+
+	/** 获取输入参数数组 */
+	const inParamsArr = useMemo(() => {
+		return parameters.filter((item) => {
+			return item.parameterGroup === "in";
+		});
+	}, [parameters]);
+
+	/** 获取输出参数数组 */
+	const outParamsArr = useMemo(() => {
+		return parameters.filter((item) => {
+			return item.parameterGroup === "out";
+		});
+	}, [parameters]);
+
+	return (
+		<div
+			className={classNames({
+				[styles.batchNode]: true,
+				[styles.selectedBatchBox]: selectedStatus,
+				[styles.runBatchNode]: executionStatus === "Running",
+				[styles.doneBatchNode]: executionStatus === "Done",
+				[styles.errorBatchNode]: executionStatus === "Failed",
+			})}
+			style={style}
+		>
+			{inParamsArr?.length &&
+				inParamsArr.map((item, index) => {
+					return (
+						<Tooltip title={item.name} key={uuid()}>
+							<Handle
+								id={item.name}
+								style={{
+									background: "#fff ",
+									border: item.error
+										? "1px solid #FF4E4E"
+										: "1px solid #D1D6DE",
+									left: index * 20 + 20,
+								}}
+								type="target"
+								position={Position.Top}
+							/>
+						</Tooltip>
+					);
+				})}
+			<div
+				className={classNames({
+					[styles.batchRotate]: isFlowNode,
+				})}
+			>
+				{title || ""}
+				{isCheck && <span className={styles.successDot}></span>}
+			</div>
+			{outParamsArr?.length &&
+				outParamsArr.map((item, index) => {
+					return (
+						<Tooltip title={item.name} key={uuid()}>
+							<Handle
+								id={item.name}
+								style={{
+									background: "#fff ",
+									border: "1px solid #D1D6DE",
+									left: index * 20 + 20,
+								}}
+								type="source"
+								position={Position.Bottom}
+							/>
+						</Tooltip>
+					);
+				})}
+		</div>
+	);
+};
+
+export default BatchNode;

src/views/Project/components/Flow/components/FlowNode/index.module.css

+.flowNode {
+	background-color: #f5f6f7;
+	border-radius: 2px;
+	padding: 6px 12px;
+}
+
+.successDot {
+	display: inline-block;
+	line-height: 22px;
+	vertical-align: middle;
+	width: 8px;
+	height: 8px;
+	background-color: #0dd09b;
+	border-radius: 8px;
+	margin-left: 8px;
+}

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

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-07-12 11:29:46
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-12 11:32:20
+ * @FilePath: /bkunyun/src/views/Project/components/Flow/components/FlowNode/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import classNames from "classnames";
+import { Handle, Position } from "react-flow-renderer";
+
+import { IExecutionStatus } from "@/views/Project/ProjectSubmitWork/interface";
+import jobFail from "@/assets/project/jobFail.svg";
+import jobRun from "@/assets/project/jobRun.svg";
+import jobSue from "@/assets/project/jobSue.svg";
+
+import styles from "./index.module.css";
+/** 自定义flow节点 */
+const FlowNode = (props: any) => {
+	/** 获取imgUrl */
+	const getImgUrl = (type: IExecutionStatus) => {
+		if (type === "Done") {
+			return jobSue;
+		}
+		if (type === "Failed") {
+			return jobFail;
+		}
+		if (type === "Running") {
+			return jobRun;
+		}
+		return undefined;
+	};
+
+	const { data } = props;
+	const {
+		dotStatus,
+		info: { title, isCheck, executionStatus },
+	} = data;
+	return (
+		<div
+			className={classNames({
+				[styles.flowNode]: true,
+			})}
+		>
+			{dotStatus?.isInput ? (
+				<Handle
+					style={{ background: "#C2C6CC ", left: 12 }}
+					type="target"
+					position={Position.Top}
+				/>
+			) : null}
+			<div style={{ display: "flex", alignItems: "center" }}>
+				{title || ""}
+				{isCheck && <span className={styles.successDot}></span>}
+				{getImgUrl(executionStatus) && (
+					<img
+						style={{ marginLeft: "6px" }}
+						src={getImgUrl(executionStatus)}
+						alt=""
+					/>
+				)}
+			</div>
+			{dotStatus?.isOutput ? (
+				<Handle
+					style={{ background: "#C2C6CC ", left: 12 }}
+					type="source"
+					position={Position.Bottom}
+				/>
+			) : null}
+		</div>
+	);
+};
+
+export default FlowNode;

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

@@ -3,30 +3,18 @@ import ReactFlow, {
 	Background,
 	useNodesState,
 	useEdgesState,
-	Handle,
-	Position,
 	ReactFlowProps,
 	Node,
-	applyNodeChanges,
-	applyEdgeChanges,
-	EdgeChange,
-	NodeChange,
+	Connection,
 } from "react-flow-renderer";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import classNames from "classnames";
 
-import jobFail from "@/assets/project/jobFail.svg";
-import jobRun from "@/assets/project/jobRun.svg";
-import jobSue from "@/assets/project/jobSue.svg";
-import {
-	IEdge,
-	IExecutionStatus,
-	ITask,
-} from "../../ProjectSubmitWork/interface";
-import { IBatchNode, ILine } from "./interface";
+import { uuid } from "@/utils/util";
+import { IEdge, IParameter, ITask } from "../../ProjectSubmitWork/interface";
+import { ILine } from "./interface";
+import BatchNode from "./components/BatchNode";
+import FlowNode from "./components/FlowNode";
 
-import styles from "./index.module.css";
-import { Tooltip } from "@mui/material";
 /*
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-22 10:15:22
@@ -39,10 +27,10 @@ interface IProps extends ReactFlowProps {
 	tasks?: ITask[];
 	/** 点击batch事件 */
 	onBatchClick?: (val: string) => void;
-	/** 设置选中节点id */
-	setSelectedNodeId?: (val: string) => void;
-	/** 选中的节点id */
-	selectedNodeId?: string;
+	/** 设置选中的batch节点id */
+	setSelectedBatchNodeId?: (val: string) => void;
+	/** 选中的batch节点id */
+	selectedBatchNodeId?: string;
 	/** 类型， edit为编辑类型 */
 	type?: "edit" | "default";
 	/** 设置组件数据 组件为编辑状态使用 */
@@ -51,150 +39,12 @@ interface IProps extends ReactFlowProps {
 	onFlowNodeClick?: (val: string) => void;
 }
 
-/** 获取imgUrl */
-const getImgUrl = (type: IExecutionStatus) => {
-	if (type === "Done") {
-		return jobSue;
-	}
-	if (type === "Failed") {
-		return jobFail;
-	}
-	if (type === "Running") {
-		return jobRun;
-	}
-	return undefined;
-};
-
-/** 自定义batch节点 */
-const BatchNode = (props: IBatchNode) => {
-	const { data } = props;
-	const {
-		dotStatus,
-		style,
-		isFlowNode,
-		selectedStatus,
-		info: { title, isCheck, executionStatus, parameters },
-	} = data;
-
-	/** 获取输入参数数组 */
-	const inParamsArr = useMemo(() => {
-		return parameters.filter((item) => {
-			return item.parameterGroup === "in";
-		});
-	}, [parameters]);
-
-	/** 获取输出参数数组 */
-	const outParamsArr = useMemo(() => {
-		return parameters.filter((item) => {
-			return item.parameterGroup === "out";
-		});
-	}, [parameters]);
-
-	return (
-		<div
-			className={classNames({
-				[styles.batchNode]: true,
-				[styles.selectedBatchBox]: selectedStatus,
-				[styles.runBatchNode]: executionStatus === "Running",
-				[styles.doneBatchNode]: executionStatus === "Done",
-				[styles.errorBatchNode]: executionStatus === "Failed",
-			})}
-			style={style}
-		>
-			{inParamsArr?.length &&
-				inParamsArr.map((item, index) => {
-					return (
-						<Tooltip title={item.name}>
-							<Handle
-								// title={item.name}
-								style={{
-									background: "#fff ",
-									border: "1px solid #D1D6DE",
-									left: index * 20 + 20,
-								}}
-								type="target"
-								position={Position.Top}
-							/>
-						</Tooltip>
-					);
-				})}
-			<div
-				className={classNames({
-					[styles.batchRotate]: isFlowNode,
-				})}
-			>
-				{title || ""}
-				{isCheck && <span className={styles.successDot}></span>}
-			</div>
-			{outParamsArr?.length &&
-				outParamsArr.map((item, index) => {
-					return (
-						<Tooltip title={item.name}>
-							<Handle
-								style={{
-									background: "#fff ",
-									border: "1px solid #D1D6DE",
-									left: index * 20 + 20,
-								}}
-								type="source"
-								position={Position.Bottom}
-							/>
-						</Tooltip>
-					);
-				})}
-		</div>
-	);
-};
-
-/** 自定义flow节点 */
-const FlowNode = (props: any) => {
-	const { data } = props;
-	const {
-		dotStatus,
-		info: { title, isCheck, executionStatus },
-	} = data;
-	return (
-		<div
-			className={classNames({
-				[styles.flowNode]: true,
-			})}
-		>
-			{dotStatus?.isInput ? (
-				<Handle
-					style={{ background: "#C2C6CC ", left: 12 }}
-					type="target"
-					position={Position.Top}
-				/>
-			) : null}
-			<div style={{ display: "flex", alignItems: "center" }}>
-				{title || ""}
-				{isCheck && <span className={styles.successDot}></span>}
-				{getImgUrl(executionStatus) && (
-					<img
-						style={{ marginLeft: "6px" }}
-						src={getImgUrl(executionStatus)}
-						alt=""
-					/>
-				)}
-			</div>
-			{dotStatus?.isOutput ? (
-				<Handle
-					style={{ background: "#C2C6CC ", left: 12 }}
-					type="source"
-					position={Position.Bottom}
-					id="a"
-				/>
-			) : null}
-		</div>
-	);
-};
-
 const Flow = (props: IProps) => {
 	const {
 		tasks,
 		onBatchClick,
-		setSelectedNodeId,
-		selectedNodeId,
+		setSelectedBatchNodeId,
+		selectedBatchNodeId,
 		type: flowType = "default",
 		setTasks,
 		onFlowNodeClick,
@@ -309,22 +159,17 @@ const Flow = (props: IProps) => {
 					type: item.type === "BATCH" ? "batchNode" : "flowNode",
 					/** 每一项的数据 */
 					data: {
-						// label: item.title || "",
 						info: item,
 						...(item.type === "BATCH"
 							? {
 									/** 是否有流节点 */
 									isFlowNode: isFlowNode(item.id),
 									/** 选中状态 */
-									selectedStatus: selectedNodeId
-										? selectedNodeId === item.id
+									selectedStatus: selectedBatchNodeId
+										? selectedBatchNodeId === item.id
 										: inSideNodeId === item.id,
 							  }
 							: {}),
-						// /** 是否选中 */
-						// isCheck: item.isCheck,
-						/** 运行状态 */
-						// executionStatus: item.executionStatus,
 						/** 输入输出圆点状态 */
 						dotStatus: nodesInputAndOutputStatus(item.id),
 
@@ -354,7 +199,7 @@ const Flow = (props: IProps) => {
 	}, [
 		tasks,
 		isFlowNode,
-		selectedNodeId,
+		selectedBatchNodeId,
 		inSideNodeId,
 		nodesInputAndOutputStatus,
 		getBatchStyle,
@@ -374,13 +219,13 @@ const Flow = (props: IProps) => {
 						val.push(newLine);
 					}, []);
 			});
-		return val.map((item: ILine) => {
-			const newSelectId = selectedNodeId ? selectedNodeId : inSideNodeId;
+		const a = val.map((item: ILine) => {
+			const newSelectId = selectedBatchNodeId
+				? selectedBatchNodeId
+				: inSideNodeId;
 			return {
-				id: item.id,
-				source: item.source,
-				target: item.target,
-				type: "smoothstep",
+				...item,
+				// type: "smoothstep",
 				...(item?.batchId === newSelectId
 					? { style: { stroke: "#1370FF" }, animated: true }
 					: {}),
@@ -389,23 +234,24 @@ const Flow = (props: IProps) => {
 				label: item.label ? `(${item.label})` : "",
 			};
 		});
-	}, [inSideNodeId, selectedNodeId, tasks]);
+		return a;
+	}, [inSideNodeId, selectedBatchNodeId, tasks]);
 
 	/** flowNode点击事件 */
 	const onNodeClick = (e: any, node: Node) => {
 		tasks?.forEach((item) => {
 			if (item.id === node.id) {
 				if (item.parentNode) {
-					setSelectedNodeId
-						? setSelectedNodeId(item.parentNode)
+					setSelectedBatchNodeId
+						? setSelectedBatchNodeId(item.parentNode)
 						: setInSideNodeId(item.parentNode);
 					onBatchClick && onBatchClick(item.parentNode);
 					document
 						.getElementById(`point${item.parentNode}`)
 						?.scrollIntoView(true);
 				} else {
-					setSelectedNodeId
-						? setSelectedNodeId(node.id)
+					setSelectedBatchNodeId
+						? setSelectedBatchNodeId(node.id)
 						: setInSideNodeId(node.id);
 					onBatchClick && onBatchClick(node.id || "");
 					document.getElementById(`point${node.id}`)?.scrollIntoView(true);
@@ -416,14 +262,14 @@ const Flow = (props: IProps) => {
 	};
 
 	const handlePaneClick = () => {
-		setSelectedNodeId ? setSelectedNodeId("") : setInSideNodeId("");
+		setSelectedBatchNodeId ? setSelectedBatchNodeId("") : setInSideNodeId("");
 		onBatchClick && onBatchClick("");
 	};
 
 	/** 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);
@@ -433,20 +279,69 @@ const Flow = (props: IProps) => {
 		setNodes(initialNodes);
 	}, [initialNodes, setNodes]);
 
-	const onNodesChange = useCallback(
-		(changes: NodeChange[]) => {
-			console.log(changes, "1111");
-			setNodes((ns) => applyNodeChanges(changes, ns));
+	/** 节点拖动停止 */
+	const onNodeDragStop = useCallback(
+		(event: React.MouseEvent, node: Node) => {
+			const newVal =
+				(tasks?.length &&
+					tasks.map((item) => {
+						if (item.id === node.id) {
+							return {
+								...item,
+								position: node.position,
+							};
+						} else {
+							return item;
+						}
+					})) ||
+				[];
+			setTasks && setTasks(newVal);
+		},
+		[setTasks, tasks]
+	);
+
+	const connectModifyParameters = useCallback(
+		(parameters: IParameter[], edgeItem: Connection) => {
+			return parameters.map((item) => {
+				if (item.name === edgeItem.targetHandle) {
+					return { ...item, isLine: true };
+				} else {
+					return item;
+				}
+			});
 		},
-		[setNodes]
+		[]
 	);
 
-	const onEdgesChange = useCallback(
-		(changes: EdgeChange[]) => {
-			console.log(changes, "222222");
-			setEdges((es) => applyEdgeChanges(changes, es));
+	const onConnect = useCallback(
+		(val: Connection) => {
+			const newVal =
+				(tasks?.length &&
+					tasks?.map((item) => {
+						if (item.id === val.source) {
+							return {
+								...item,
+								edges: [
+									...item.edges,
+									{
+										...val,
+										id: uuid(),
+									},
+								],
+							};
+						} else if (item.id === val.target) {
+							return {
+								...item,
+								parameters: connectModifyParameters(item.parameters, val),
+							};
+						} else {
+							return item;
+						}
+					})) ||
+				[];
+			setTasks && setTasks(newVal as ITask[]);
 		},
-		[setEdges]
+		[connectModifyParameters, setTasks, tasks]
 	);
 
 	return (
@@ -456,8 +351,8 @@ const Flow = (props: IProps) => {
 			fitView={flowType === "default" ? true : false}
 			onNodesChange={onNodesChange}
 			onEdgesChange={onEdgesChange}
-			deleteKeyCode={["13"]}
-			// onConnect={onConnect}
+			onNodeDragStop={onNodeDragStop}
+			onConnect={onConnect}
 			// proOptions={{ hideAttribution: true, account: "" }}
 			nodeTypes={nodeTypes}
 			onPaneClick={handlePaneClick}

src/views/Project/components/Flow/interface.ts

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-06-23 11:00:29
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-11 15:24:53
+ * @LastEditTime: 2022-07-12 00:26:48
  * @FilePath: /bkunyun/src/views/Project/components/Flow/interface.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -13,10 +13,12 @@ import { ITask } from "../../ProjectSubmitWork/interface";
 /** 线的参数 */
 export interface ILine {
     id: string,
-    label: string,
+    label?: string,
     batchId?: string,
     source: string,
     target: string,
+    sourceHandle: string,
+    targetHandle: string,
 }
 
 export interface IDotStatus {