From 12d6e89b6e5ca54b486a5b8147c1b4430da7e207 Mon Sep 17 00:00:00 2001 From: ZLY Date: Thu, 13 Nov 2025 13:24:31 +0800 Subject: [PATCH] =?UTF-8?q?feat(flow):=E4=BC=98=E5=8C=96=E5=A4=8D=E5=90=88?= =?UTF-8?q?=E7=BB=84=E4=BB=B6ID=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useFlowCallbacks.ts | 67 +++++++--------------------- src/pages/flowEditor/utils/common.ts | 4 +- src/pages/ideContainer/index.tsx | 3 +- src/utils/convertFlowData.ts | 23 ++++++++-- 4 files changed, 40 insertions(+), 57 deletions(-) diff --git a/src/hooks/useFlowCallbacks.ts b/src/hooks/useFlowCallbacks.ts index 8d8b294..c39ea0f 100644 --- a/src/hooks/useFlowCallbacks.ts +++ b/src/hooks/useFlowCallbacks.ts @@ -39,10 +39,10 @@ import { appFLowHandle } from '@/pages/flowEditor/utils/appFlowhandle'; import { handelEventNodeList, updateEvent, upDatePublish } from '@/pages/flowEditor/utils/common'; import { Dispatch } from 'redux'; -import { runMainFlow, stopApp } from '@/api/apps'; +import { getAppListBySceneId, runMainFlow, stopApp } from '@/api/apps'; import store from '@/store'; import { updateAppEvent, updateAppEventChannel, updateAppFlowData } from '@/api/appEvent'; -import { sleep } from '@/utils/common'; +import { getUrlParams, sleep } from '@/utils/common'; import { queryEventItemBySceneIdOld, deleteEventSub, deleteEventPub } from '@/api/event'; export const useFlowCallbacks = ( @@ -912,26 +912,10 @@ export const useFlowCallbacks = ( }; } else if (nodeType === 'SUB') { - const flowSubMap = flowData[currentAppData.id]?.subMap || {}; - const sameData: any = flowSubMap[newNode.data.compId]; - if (sameData) { - newNode.data.component = { - type: nodeType, - compId: newNode.data.compId, - customDef: JSON.stringify({ - dataIns: newNode.data.parameters.dataIns, - dataOuts: newNode.data.parameters.dataOuts, - subflowId: sameData, - name: newNode.data.title - }) - }; - } - else { - newNode.data.component = { - type: nodeType, - compId: newNode.data.compId - }; - } + newNode.data.component = { + type: nodeType, + compId: newNode.data.compId + }; } else if (nodeType === 'EVENTSEND' || nodeType === 'EVENTLISTENE') { const { eventList } = store.getState().ideContainer; @@ -1067,26 +1051,10 @@ export const useFlowCallbacks = ( }; } else if (nodeType === 'SUB') { - const flowSubMap = flowData[currentAppData.id]?.subMap || {}; - const sameData: any = flowSubMap[newNode.data.compId]; - if (sameData) { - newNode.data.component = { - type: nodeType, - compId: newNode.data.compId, - customDef: JSON.stringify({ - dataIns: newNode.data.parameters.dataIns, - dataOuts: newNode.data.parameters.dataOuts, - subflowId: sameData, - name: newNode.data.title - }) - }; - } - else { - newNode.data.component = { - type: nodeType, - compId: newNode.data.compId - }; - } + newNode.data.component = { + type: nodeType, + compId: newNode.data.compId + }; } else if (nodeType === 'EVENTSEND' || nodeType === 'EVENTLISTENE') { const { eventList } = store.getState().ideContainer; @@ -1181,22 +1149,15 @@ export const useFlowCallbacks = ( const res1: any = await queryEventItemBySceneIdOld(info.id); if (res1.code === 200) dispatch(updateEventListOld(res1.data)); - // 更新缓存数据 - 与主流程保持一致 - dispatch(updateCanvasDataMap({ - ...canvasDataMap, - [currentAppData.id]: { nodes, edges } - })); - const appRes: any = await getAppInfoNew(currentAppData.id); + const appRes: any = await getAppInfoNew(currentAppData.parentAppId); // 更新 flowData 中的数据 - dispatch(updateFlowData({ [currentAppData.id]: appRes.data })); + dispatch(updateFlowData({ [currentAppData.parentAppId]: appRes.data })); // 同步更新到 canvasDataMap if (appRes.data.main?.components) { const { nodes, edges } = convertFlowData(appRes.data.main.components, true); - setNodes(nodes); - setEdges(edges); dispatch(updateCanvasDataMap({ ...canvasDataMap, - [currentAppData.id]: { nodes, edges } + [currentAppData.parentAppId]: { nodes, edges } })); } } @@ -1213,6 +1174,7 @@ export const useFlowCallbacks = ( appEventDefinition, sceneId: info.id }; + const res: any = await setMainFlowNew(params, initialData.appId); if (res.code === 200) { Message.success('保存成功'); @@ -1328,6 +1290,7 @@ export const useFlowCallbacks = ( } } }, [nodes, edges, initialData?.appId]); + // 运行处理函数 const handleRun = useCallback(async (running: boolean) => { const { currentAppData, socketId, appRuntimeData } = store.getState().ideContainer; diff --git a/src/pages/flowEditor/utils/common.ts b/src/pages/flowEditor/utils/common.ts index e01145a..113ade7 100644 --- a/src/pages/flowEditor/utils/common.ts +++ b/src/pages/flowEditor/utils/common.ts @@ -244,8 +244,10 @@ export const upDatePublish = async (revertedData) => { publishAppId: [] }; revertedData.forEach(item => { - if (item?.component && item.component.type === 'SUB' && !item.component.customDef) params.publishAppId.push(item.component.compId); // 复合组件的这个compId实际上就是flowHousVO里面的id + // 复合组件的这个compId实际上就是flowHousVO里面的id + if (item?.component && item.component.type === 'SUB' && !item.component.customDef) params.publishAppId.push(`${item.component.compId}/${item.nodeId}`); }); + if (params.publishAppId.length > 0) { const res: any = await refPublish(params); if (res.code === 200) return res.data; diff --git a/src/pages/ideContainer/index.tsx b/src/pages/ideContainer/index.tsx index fa705fb..5a66770 100644 --- a/src/pages/ideContainer/index.tsx +++ b/src/pages/ideContainer/index.tsx @@ -120,13 +120,14 @@ function IDEContainer() { // 监听自定义事件，处理打开子节点标签页的逻辑 useEffect(() => { - const handleOpenSubNodeTab = (event: CustomEvent) => { + const handleOpenSubNodeTab = async (event: CustomEvent) => { const { node } = event.detail; const subCompList = flowData[currentAppData.id].subs; const customDef = isJSON(node.data.component.customDef) ? JSON.parse(node.data.component.customDef) : {}; const currentSubComp = subCompList.find((item) => item.flowId === customDef.subflowId); // 根据节点信息创建新的标签页 if (currentSubComp && Object.keys(currentSubComp).length > 0) { + await getAppList(); const newNodeKey = currentSubComp.flowId; // 查找菜单项 diff --git a/src/utils/convertFlowData.ts b/src/utils/convertFlowData.ts index 1ee4ab4..4ff6ad8 100644 --- a/src/utils/convertFlowData.ts +++ b/src/utils/convertFlowData.ts @@ -516,7 +516,7 @@ export const revertFlowData = (nodes: any[], edges: any[]) => { * 将 React Flow 的 nodes 和 edges 数据结构反向转换为 convertFlowData 可以处理的格式 * @param nodes - React Flow 节点数组 * @param edges - React Flow 边数组 - * @param complexKV - 复合组件使用的组件id对照表 {数字ID：sub_ID} + * @param complexKV - 复合组件使用的组件id对照表 {数字ID/nodeId：sub_ID} * @returns 可用于 convertFlowData 的数据结构 */ export const reverseConvertFlowData = (nodes: any[], edges: any[], complexKV: any) => { @@ -537,13 +537,28 @@ export const reverseConvertFlowData = (nodes: any[], edges: any[], complexKV: an // 处理 component 信息 if (node.type === 'SUB' && !node.data.component.customDef) { + let subflowId = ''; + if (complexKV && node.data.compId) { + // 遍历complexKV找到匹配的条目，使用节点ID进行匹配 + for (const key in complexKV) { + if (key.includes('/')) { + const [numericId, nodeId] = key.split('/'); + // 使用节点ID进行匹配 + if (nodeId === node.id) { + subflowId = complexKV[key]; + break; + } + } + } + } + nodeConfig.component = { type: 'SUB', compId: node.data.compId, customDef: JSON.stringify({ dataIns: node.data.parameters.dataIns, dataOuts: node.data.parameters.dataOuts, - subflowId: complexKV[node.data.compId], + subflowId: subflowId, name: node.data.title }) }; @@ -552,7 +567,9 @@ export const reverseConvertFlowData = (nodes: any[], edges: any[], complexKV: an nodeConfig.component = { ...node.data.component }; } else { - nodeConfig.component = null; + nodeConfig.component = { + type: node.type + }; } // 处理参数信息