fix: 点击表单允许定位到流节点

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

@@ -23,11 +23,11 @@ type ConfigFormProps = {
 	templateConfigInfo?: ITemplateConfig;
 	setParameter: any;
 	onRef?: React.Ref<any>;
-	setSelectedBatchNodeId: (val: string) => void;
+	setExternalSelectedNodeId: (val: string) => void;
 };
 
 const ConfigForm = (props: ConfigFormProps) => {
-	const { templateConfigInfo, setParameter, setSelectedBatchNodeId } = props;
+	const { templateConfigInfo, setParameter, setExternalSelectedNodeId } = props;
 	const [name, setName] = useState<string>(""); // 任务名称
 	const [fileSelectType, setFileSelectType] = useState<FileSelectType>("path");
 
@@ -192,7 +192,6 @@ const ConfigForm = (props: ConfigFormProps) => {
 	const randerParameters = (
 		parameters: Array<IParameter>,
 		taskId: string,
-		batchId?: string
 	) => {
 		return parameters
 			.filter((parameter) => parameter.hidden === false)
@@ -221,7 +220,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 								{(parameter.domType || "").toLowerCase() === "file" && (
 									<MyInput
 										onClick={() => {
-											setSelectedBatchNodeId(batchId || "");
+											setExternalSelectedNodeId(taskId || "");
 											setFileSelectType("file");
 											handleOpenFileSelect(taskId, parameter.name);
 										}}
@@ -244,7 +243,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 								{(parameter.domType || "").toLowerCase() === "path" && (
 									<MyInput
 										onClick={() => {
-											setSelectedBatchNodeId(batchId || "");
+											setExternalSelectedNodeId(taskId || "");
 											setFileSelectType("path");
 											handleOpenFileSelect(taskId, parameter.name);
 										}}
@@ -267,7 +266,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 								{(parameter.domType || "").toLowerCase() === "dataset" && (
 									<MyInput
 										onClick={() => {
-											setSelectedBatchNodeId(taskId);
+											setExternalSelectedNodeId(taskId);
 											setFileSelectType("dataset");
 											handleOpenFileSelect(taskId, parameter.name);
 										}}
@@ -290,10 +289,9 @@ const ConfigForm = (props: ConfigFormProps) => {
 								{(parameter.domType || "").toLowerCase() === "input" && (
 									<MyInput
 										onFocus={() => {
-											setSelectedBatchNodeId(batchId || "");
-											console.log(batchId, "111");
+											setExternalSelectedNodeId(taskId || "");
 										}}
-										onBlur={() => setSelectedBatchNodeId("")}
+										onBlur={() => setExternalSelectedNodeId("")}
 										value={parameter.value || ""}
 										onChange={(e: any) =>
 											handleParameterChange(e, taskId, parameter.name || "")
@@ -306,8 +304,8 @@ const ConfigForm = (props: ConfigFormProps) => {
 								)}
 								{(parameter.domType || "").toLowerCase() === "select" && (
 									<MySelect
-										onFocus={() => setSelectedBatchNodeId(batchId || "")}
-										onBlur={() => setSelectedBatchNodeId("")}
+										onFocus={() => setExternalSelectedNodeId(taskId || "")}
+										onBlur={() => setExternalSelectedNodeId("")}
 										value={parameter.value}
 										onChange={(e: any) =>
 											handleParameterChange(
@@ -329,8 +327,8 @@ const ConfigForm = (props: ConfigFormProps) => {
 								{(parameter.domType || "").toLowerCase() ===
 									"multipleselect" && (
 									<MySelect
-										onFocus={() => setSelectedBatchNodeId(batchId || "")}
-										onBlur={() => setSelectedBatchNodeId("")}
+										onFocus={() => setExternalSelectedNodeId(taskId || "")}
+										onBlur={() => setExternalSelectedNodeId("")}
 										value={parameter.value}
 										onChange={(e: any) =>
 											handleParameterChange(
@@ -356,8 +354,8 @@ const ConfigForm = (props: ConfigFormProps) => {
 										onChange={(e: any) =>
 											handleParameterChange(e, taskId, parameter.name || "")
 										}
-										onFocus={() => setSelectedBatchNodeId(batchId || "")}
-										onBlur={() => setSelectedBatchNodeId("")}
+										onFocus={() => setExternalSelectedNodeId(taskId || "")}
+										onBlur={() => setExternalSelectedNodeId("")}
 										options={parameter?.choices || []}
 										error={parameter.error || false}
 										helperText={parameter.helperText}
@@ -378,8 +376,8 @@ const ConfigForm = (props: ConfigFormProps) => {
 											)
 										}
 										options={parameter?.choices || []}
-										onFocus={() => setSelectedBatchNodeId(batchId || "")}
-										onBlur={() => setSelectedBatchNodeId("")}
+										onFocus={() => setExternalSelectedNodeId(taskId || "")}
+										onBlur={() => setExternalSelectedNodeId("")}
 										error={parameter.error || false}
 										helperText={parameter.helperText}
 									/>
@@ -448,7 +446,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 							<MyInput
 								value={outputPath || ""}
 								onClick={() => {
-									setSelectedBatchNodeId("");
+									setExternalSelectedNodeId("");
 									setFileSelectType("path");
 									handleOpenFileSelect();
 								}}
@@ -500,7 +498,6 @@ const ConfigForm = (props: ConfigFormProps) => {
 							{randerParameters(
 								task.parameters.filter((parameter) => !parameter?.thrown),
 								task.id,
-								task.id
 							)}
 							{task.flows.map((flow) => {
 								if (
@@ -527,7 +524,6 @@ const ConfigForm = (props: ConfigFormProps) => {
 										{randerParameters(
 											flow.parameters,
 											flow.id,
-											flow.parentNode ? flow.parentNode : flow.id
 										)}
 									</div>
 								);

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

@@ -12,11 +12,11 @@ import { ITemplateConfig } from "../interface";
 
 interface IProps {
 	templateConfigInfo?: ITemplateConfig;
-	setSelectedBatchNodeId?: (val: string) => void;
-	selectedBatchNodeId?: string;
+	setExternalSelectedNodeId?: (val: string) => void;
+	externalSelectedNodeId?: string;
 }
 const WorkFlow = (props: IProps) => {
-	const { templateConfigInfo, setSelectedBatchNodeId, selectedBatchNodeId } =
+	const { templateConfigInfo, setExternalSelectedNodeId, externalSelectedNodeId } =
 		props;
 
 	/** 页面刷新提醒 */
@@ -36,8 +36,8 @@ const WorkFlow = (props: IProps) => {
 	return (
 		<Flow
 			tasks={templateConfigInfo?.tasks}
-			setSelectedBatchNodeId={setSelectedBatchNodeId}
-			selectedBatchNodeId={selectedBatchNodeId}
+			setExternalSelectedNodeId={setExternalSelectedNodeId}
+			externalSelectedNodeId={externalSelectedNodeId}
 		/>
 	);
 };

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 [selectedBatchNodeId, setSelectedBatchNodeId] = useState<string>("");
+	const [externalSelectedNodeId, setExternalSelectedNodeId] = useState<string>("");
 
 	// 前往工作台
 	const goToWorkbench = (toWorkbenchList = false) => {
@@ -313,7 +313,7 @@ const ProjectSubmitWork = observer(() => {
 							onRef={configFormRef}
 							templateConfigInfo={templateConfigInfo}
 							setParameter={setParameter}
-							setSelectedBatchNodeId={setSelectedBatchNodeId}
+							setExternalSelectedNodeId={setExternalSelectedNodeId}
 						/>
 					</div>
 				)}
@@ -323,8 +323,8 @@ const ProjectSubmitWork = observer(() => {
 				>
 					<WorkFlow
 						templateConfigInfo={templateConfigInfo}
-						setSelectedBatchNodeId={setSelectedBatchNodeId}
-						selectedBatchNodeId={selectedBatchNodeId}
+						setExternalSelectedNodeId={setExternalSelectedNodeId}
+						externalSelectedNodeId={externalSelectedNodeId}
 					/>
 				</div>
 			</div>

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

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-07-12 11:20:29
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-22 16:41:54
+ * @LastEditTime: 2022-08-31 17:09:26
  * @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
  */

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

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-07-12 11:29:46
  * @LastEditors: 吴永生 15770852798@163.com
- * @LastEditTime: 2022-08-22 19:16:06
+ * @LastEditTime: 2022-08-31 17:09:31
  * @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
  */

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

@@ -33,9 +33,9 @@ interface IProps extends ReactFlowProps {
 	/** 点击batch事件 */
 	onBatchClick?: (val: string) => void;
 	/** 设置选中的batch节点id */
-	setSelectedBatchNodeId?: (val: string) => void;
+	setExternalSelectedNodeId?: (val: string) => void;
 	/** 选中的batch节点id */
-	selectedBatchNodeId?: string;
+	externalSelectedNodeId?: string;
 	/** 类型， edit为编辑类型 */
 	type?: "edit" | "default";
 	/** 设置组件数据 组件为编辑状态使用 */
@@ -52,8 +52,8 @@ const Flow = (props: IProps) => {
 	const {
 		tasks,
 		onBatchClick,
-		setSelectedBatchNodeId,
-		selectedBatchNodeId,
+		setExternalSelectedNodeId,
+		externalSelectedNodeId,
 		type: flowType = "default",
 		setTasks,
 		onFlowNodeClick,
@@ -305,13 +305,15 @@ const Flow = (props: IProps) => {
 									/** 是否有流节点 */
 									isFlowNode: isFlowNode(item.id),
 									/** 选中状态 */
-									selectedStatus: selectedBatchNodeId
-										? selectedBatchNodeId === item.id
+									selectedStatus: externalSelectedNodeId
+										? externalSelectedNodeId.includes(item.id)
 										: inSideBatchNodeId === item.id,
 									/** tasks 数据 */
 									tasks: tasks,
 							  }
-							: { selectedStatus: inSideFlowNodeId === item.id }),
+							: { 	selectedStatus: externalSelectedNodeId
+								? externalSelectedNodeId.includes(item.id)
+								: inSideFlowNodeId === item.id,}),
 						/** 输入输出圆点状态 */
 						// dotStatus: nodesInputAndOutputStatus(item.id),
 
@@ -343,7 +345,7 @@ const Flow = (props: IProps) => {
 		tasks,
 		flowType,
 		isFlowNode,
-		selectedBatchNodeId,
+		externalSelectedNodeId,
 		inSideBatchNodeId,
 		inSideFlowNodeId,
 		// nodesInputAndOutputStatus,
@@ -365,8 +367,8 @@ const Flow = (props: IProps) => {
 					}, []);
 			});
 		return val.map((item: ILine) => {
-			const newSelectId = selectedBatchNodeId
-				? selectedBatchNodeId
+			const newSelectId = externalSelectedNodeId
+				? externalSelectedNodeId
 				: inSideBatchNodeId;
 			return {
 				...item,
@@ -387,18 +389,18 @@ const Flow = (props: IProps) => {
 				label: item.label ? `(${item.label})` : "",
 			};
 		});
-	}, [inSideBatchNodeId, selectedBatchNodeId, selectedEdge?.id, tasks]);
+	}, [inSideBatchNodeId, externalSelectedNodeId, selectedEdge?.id, tasks]);
 
 	/** 设置nodeId方法 */
 	const setNodeIdFun = useCallback(
 		(id: string) => {
-			setSelectedBatchNodeId
-				? setSelectedBatchNodeId(id)
+			setExternalSelectedNodeId
+				? setExternalSelectedNodeId(id)
 				: setInSideBatchNodeId(id);
 			onBatchClick && onBatchClick(id);
 			setInSideFlowNodeId("");
 		},
-		[onBatchClick, setSelectedBatchNodeId]
+		[onBatchClick, setExternalSelectedNodeId]
 	);
 
 	/** flowNode点击事件 */
@@ -410,7 +412,7 @@ const Flow = (props: IProps) => {
 				} else {
 					setInSideFlowNodeId(node.id);
 					setInSideBatchNodeId("");
-					setSelectedBatchNodeId && setSelectedBatchNodeId("");
+					setExternalSelectedNodeId && setExternalSelectedNodeId("");
 				}
 				document.getElementById(`point${node.id}`)?.scrollIntoView(true);
 			}
@@ -423,8 +425,8 @@ const Flow = (props: IProps) => {
 	};
 
 	const handlePaneClick = () => {
-		setSelectedBatchNodeId
-			? setSelectedBatchNodeId("")
+		setExternalSelectedNodeId
+			? setExternalSelectedNodeId("")
 			: setInSideBatchNodeId("");
 		setInSideFlowNodeId("");
 		onBatchClick && onBatchClick("");
@@ -632,9 +634,9 @@ const Flow = (props: IProps) => {
 			/** 点击连线清除选中的node ID */
 			setInSideFlowNodeId("");
 			setInSideBatchNodeId("");
-			setSelectedBatchNodeId && setSelectedBatchNodeId("");
+			setExternalSelectedNodeId && setExternalSelectedNodeId("");
 		},
-		[setSelectedBatchNodeId]
+		[setExternalSelectedNodeId]
 	);
 
 	// const onNodesChange = (val: any)=>{