From 4b6e4b8556823bee1076d6d2e05cd2bea46e2ca8 Mon Sep 17 00:00:00 2001 From: ZLY Date: Mon, 27 Oct 2025 10:29:47 +0800 Subject: [PATCH] =?UTF-8?q?feat(flow):=20=E5=A2=9E=E5=8A=A0=E5=AF=B9?= =?UTF-8?q?=E5=A4=8D=E5=90=88=E7=BB=84=E4=BB=B6=E7=9A=84=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E5=A4=96=E5=A3=B3=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 | 54 +++++++++++++++++++++++++++++------ src/utils/convertFlowData.ts | 17 +++++++++-- 2 files changed, 61 insertions(+), 10 deletions(-) diff --git a/src/hooks/useFlowCallbacks.ts b/src/hooks/useFlowCallbacks.ts index 3a0833d..5006a19 100644 --- a/src/hooks/useFlowCallbacks.ts +++ b/src/hooks/useFlowCallbacks.ts @@ -617,6 +617,7 @@ export const useFlowCallbacks = ( }, [nodes, edges]); // 在边上添加节点的具体实现 const addNodeOnEdge = useCallback((nodeType: string, node: any) => { + const { currentAppData, flowData } = store.getState().ideContainer; if (!edgeForNodeAdd || !reactFlowInstance) return; // 查找节点定义 @@ -801,6 +802,22 @@ export const useFlowCallbacks = ( }) }; } + else if (nodeType === 'SUB') { + const flowMainData = flowData[currentAppData.id]?.main?.components; + const sameData: any = Object.values(flowMainData).filter((item: any) => { + if (item?.component?.compId === newNode.data.compId) return item; + }); + if (sameData.length) { + newNode.data.component = { + ...sameData[0].component + }; + } + else { + newNode.data.component = { + type: nodeType + }; + } + } else if (nodeType === 'EVENTSEND' || nodeType === 'EVENTLISTENE') { const { eventList } = store.getState().ideContainer; const emptyEvent = eventList.find(item => item.topic.includes('**empty**')); @@ -885,6 +902,7 @@ export const useFlowCallbacks = ( }, [edgeForNodeAdd, nodes, reactFlowInstance, edges, addLoopNodeWithStartEnd]); // 在画布上添加节点 const addNodeOnPane = useCallback((nodeType: string, position: { x: number; y: number }, node?: any) => { + const { currentAppData, flowData } = store.getState().ideContainer; if (!reactFlowInstance) return; // 查找节点定义 @@ -919,6 +937,22 @@ export const useFlowCallbacks = ( }) }; } + else if (nodeType === 'SUB') { + const flowMainData = flowData[currentAppData.id]?.main?.components; + const sameData: any = Object.values(flowMainData).filter((item: any) => { + if (item?.component?.compId === newNode.data.compId) return item; + }); + if (sameData.length) { + newNode.data.component = { + ...sameData[0].component + }; + } + else { + newNode.data.component = { + type: nodeType + }; + } + } else if (nodeType === 'EVENTSEND' || nodeType === 'EVENTLISTENE') { const { eventList } = store.getState().ideContainer; const emptyEvent = eventList.find(item => item.topic.includes('**empty**')); @@ -1023,16 +1057,21 @@ export const useFlowCallbacks = ( updateAppEvent(initialData.appId, params); } }; - const upDatePublish = (revertedData) => { + const upDatePublish = async (revertedData) => { const { currentAppData } = store.getState().ideContainer; const params = { appId: currentAppData.id, publishAppId: [] }; revertedData.forEach(item => { - if (item?.component && item.component.type === 'SUB') params.publishAppId.push(item.component.compId); // 复合组件的这个compId实际上就是flowHousVO里面的id + if (item?.component && item.component.type === 'SUB' && !item.component.customDef) params.publishAppId.push(item.component.compId); // 复合组件的这个compId实际上就是flowHousVO里面的id }); - if (params.publishAppId.length > 0) refPublish(params); + if (params.publishAppId.length > 0) { + const res: any = await refPublish(params); + if (res.code === 200) return res.data; + else return {}; + } + else return {}; }; const saveFlowDataToServer = useCallback(async () => { if (useDefault) { @@ -1050,19 +1089,18 @@ export const useFlowCallbacks = ( showValidationErrors(edgeValidation.errors); return; } - // 转换会原始数据类型 const revertedData = revertFlowData(nodes, edges); - const newRevertedData = reverseConvertFlowData(nodes, edges); + const upDatePublishCB = await upDatePublish(revertedData.nodeConfigs); + const newRevertedData = reverseConvertFlowData(nodes, edges, upDatePublishCB); const { flowData, currentAppData } = store.getState().ideContainer; - // console.log('revertedData(中断):', revertedData); - // console.log('newRevertedData(中断):', newRevertedData); + // console.log('revertedData:', revertedData); + // console.log('newRevertedData:', newRevertedData); const params = { ...flowData[currentAppData.id]?.main || {}, components: newRevertedData }; // return; - upDatePublish(revertedData.nodeConfigs); updateEvent(revertedData.nodeConfigs); // 旧版数据结构 // const res: any = await setMainFlow(revertedData, initialData.appId); diff --git a/src/utils/convertFlowData.ts b/src/utils/convertFlowData.ts index 417bb30..9fb861a 100644 --- a/src/utils/convertFlowData.ts +++ b/src/utils/convertFlowData.ts @@ -471,9 +471,10 @@ 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} * @returns 可用于 convertFlowData 的数据结构 */ -export const reverseConvertFlowData = (nodes: any[], edges: any[]) => { +export const reverseConvertFlowData = (nodes: any[], edges: any[], complexKV: any) => { // 初始化返回的数据结构 const flowData: any = {}; @@ -490,7 +491,19 @@ export const reverseConvertFlowData = (nodes: any[], edges: any[]) => { }; // 处理 component 信息 - if (node.data?.component) { + if (node.type === 'SUB' && !node.customDef) { + 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], + name: node.data.title + }) + }; + } + else if (node.data?.component) { nodeConfig.component = { ...node.data.component }; } else {