diff --git a/core/core-frontend/src/store/modules/data-visualization/compose.ts b/core/core-frontend/src/store/modules/data-visualization/compose.ts index 13e899412e..173295c350 100644 --- a/core/core-frontend/src/store/modules/data-visualization/compose.ts +++ b/core/core-frontend/src/store/modules/data-visualization/compose.ts @@ -11,7 +11,7 @@ import { } from '@/custom-component/component-list' import { createGroupStyle, getComponentRotatedStyle } from '@/utils/style' import eventBus from '@/utils/eventBus' -import { checkJoinGroup } from '@/utils/canvasUtils' +import { canvasIdMapCheck, checkJoinGroup, isMainCanvas, isTabCanvas } from '@/utils/canvasUtils' const dvMainStore = dvMainStoreWithOut() const { curComponent, componentData, curOriginThemes } = storeToRefs(dvMainStore) @@ -220,15 +220,36 @@ export const composeStore = defineStore('compose', { }) }, - decompose(canvasId = 'canvas-main') { + decompose() { + const canvasId = curComponent.value.canvasId const editor = this.editorMap[canvasId] const parentStyle = { ...curComponent.value.style } const components = curComponent.value.propValue const editorRect = editor.getBoundingClientRect() - dvMainStore.deleteComponentById(curComponent.value.id) + const isInTab = isTabCanvas(canvasId) + let decomposeComponentData = componentData.value + if (isInTab) { + const pathMap = {} + componentData.value.forEach(componentItem => { + canvasIdMapCheck(componentItem, null, pathMap) + }) + const pComponent = pathMap[curComponent.value.id] + const pComponentTarget = pComponent.propValue.filter( + item => canvasId.indexOf(item.name) > -1 + ) + if (pComponentTarget && pComponentTarget.length > 0) { + decomposeComponentData = pComponentTarget[0].componentData + } + } + dvMainStore.deleteComponentById(curComponent.value.id, decomposeComponentData) components.forEach(component => { - decomposeComponent(component, editorRect, parentStyle) - dvMainStore.addComponent({ component: component, index: undefined, isFromGroup: true }) + decomposeComponent(component, editorRect, parentStyle, canvasId) + dvMainStore.addComponent({ + component: component, + index: undefined, + isFromGroup: true, + componentData: decomposeComponentData + }) }) }, calcComposeArea(areaDataValue = this.areaData) { diff --git a/core/core-frontend/src/utils/decomposeComponent.ts b/core/core-frontend/src/utils/decomposeComponent.ts index 9ac7f7ed31..bca1917bb0 100644 --- a/core/core-frontend/src/utils/decomposeComponent.ts +++ b/core/core-frontend/src/utils/decomposeComponent.ts @@ -1,8 +1,13 @@ // 将组合中的各个子组件拆分出来,并计算它们新的 style -export default function decomposeComponent(component, editorRect, parentStyle) { +export default function decomposeComponent( + component, + editorRect, + parentStyle, + canvasId = 'canvas-main' +) { // 计算出元素新的 top left 坐标 component.style.left = component.style.left + parentStyle.left component.style.top = component.style.top + parentStyle.top component.groupStyle = {} - component.canvasId = 'canvas-main' + component.canvasId = canvasId }