From e8cbbfbca24551840e0022918661148c7d8d44a6 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Wed, 18 Dec 2024 18:18:36 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=88=86=E7=BB=84=E7=A7=BB=E5=85=A5Tab?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../data-visualization/canvas/Shape.vue | 10 ++-- .../modules/data-visualization/compose.ts | 3 +- core/core-frontend/src/utils/canvasUtils.ts | 47 ++++++++++++++++--- 3 files changed, 50 insertions(+), 10 deletions(-) diff --git a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue index 895f5a32de..16cac7fc00 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue @@ -133,6 +133,7 @@ import { useEmitt } from '@/hooks/web/useEmitt' import ComposeShow from '@/components/data-visualization/canvas/ComposeShow.vue' import { groupSizeStyleAdaptor, groupStyleRevert, tabInnerStyleRevert } from '@/utils/style' import { + checkJoinTab, isDashboard, isGroupCanvas, isMainCanvas, @@ -184,7 +185,7 @@ const state = reactive({ id: '' }, // 禁止移入Tab中的组件 - ignoreTabMoveComponent: ['de-button', 'de-reset-button', 'DeTabs', 'Group', 'GroupArea'], + ignoreTabMoveComponent: ['de-button', 'de-reset-button', 'DeTabs', 'GroupArea'], // 当画布在tab中是 宽度左右拓展的余量 parentWidthTabOffset: 40, canvasChangeTips: 'none', @@ -283,7 +284,8 @@ const { canvasActive } = toRefs(props) -let pTabGroupFlag = itemCanvasPathCheck(element.value, 'pTabGroup') +const pTabGroupFlag = itemCanvasPathCheck(element.value, 'pTabGroup') +const pJoinTab = checkJoinTab(element.value) const domId = ref('shape-id-' + element.value.id) const pointList = ['lt', 't', 'rt', 'r', 'rb', 'b', 'lb', 'l'] const pointCorner = ['lt', 'rt', 'rb', 'lb'] @@ -552,9 +554,11 @@ const handleMouseDownOnShape = e => { // 非主画布非分组画布的情况 需要检测是否从Tab中移除组件(向左移除30px 或者向右移除30px 向左移除30px) // 因为仪表板中组件向下移动可能只是为了挤占空间 不一定是为了移出 这里无法判断明确意图 暂时支不支持向下移出 // 大屏和仪表板暂时做位置算法区分 仪表板暂时使用curX 因为缩放的影响 大屏使用 tab位置 + 组件位置（相对内部画布）+初始触发点 - // 如果组件再tab中且tab在Group中 不允许移入移出 pTabGroupFlag = true + // 如果组件在tab中且tab在Group中 不允许移入移出 pTabGroupFlag = true + // 如当前是分组且分组中含有Tab 不允许移入 pJoinTab = false if ( !pTabGroupFlag && + pJoinTab && !isMainCanvas(canvasId.value) && !isGroupCanvas(canvasId.value) && !isGroupArea.value && 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 de0529ce13..13e899412e 100644 --- a/core/core-frontend/src/store/modules/data-visualization/compose.ts +++ b/core/core-frontend/src/store/modules/data-visualization/compose.ts @@ -11,6 +11,7 @@ import { } from '@/custom-component/component-list' import { createGroupStyle, getComponentRotatedStyle } from '@/utils/style' import eventBus from '@/utils/eventBus' +import { checkJoinGroup } from '@/utils/canvasUtils' const dvMainStore = dvMainStoreWithOut() const { curComponent, componentData, curOriginThemes } = storeToRefs(dvMainStore) @@ -159,7 +160,7 @@ export const composeStore = defineStore('compose', { components.push(...component.propValue) } else if (['GroupArea'].includes(component.component)) { // do nothing GroupAreas组合视阔区 DeTabs 均不加入分组中 - } else { + } else if (checkJoinGroup(component)) { components.push(component) } }) diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts index b090278e4f..58c215c49e 100644 --- a/core/core-frontend/src/utils/canvasUtils.ts +++ b/core/core-frontend/src/utils/canvasUtils.ts @@ -632,10 +632,39 @@ export function setIdValueTrans(from, to, content, colList) { export function isMainCanvas(canvasId) { return canvasId === 'canvas-main' } +// 检查是否可以加入到分组 +export function checkJoinGroup(item) { + if (item.component === 'DeTabs') { + let result = true + item.propValue.forEach(tabItem => { + tabItem.componentData.forEach(tabComponent => { + if (tabComponent.component === 'Group') { + result = false + } + }) + }) + return result + } else { + return true + } +} +// 检查是否可以移入tab +export function checkJoinTab(item) { + if (item.component === 'Group') { + let result = true + item.propValue.forEach(groupItem => { + if (groupItem.component === 'DeTabs') { + result = false + } + }) + return result + } else { + return true + } +} // 目前仅允许group中还有一层Tab 或者 Tab中含有一层group export function itemCanvasPathCheck(item, checkType) { - console.log('===test==' + item.component + '==' + checkType) if (checkType === 'canvas-main') { return isMainCanvas(item.canvasId) } @@ -644,7 +673,7 @@ export function itemCanvasPathCheck(item, checkType) { canvasIdMapCheck(componentItem, null, pathMap) }) - // 父组件是Tab且否在group中 + // 父组件是Tab且在group中 if (checkType === 'pTabGroup') { return Boolean( pathMap[item.id] && @@ -653,15 +682,21 @@ export function itemCanvasPathCheck(item, checkType) { pathMap[pathMap[item.id].id].component === 'Group' ) } - // 父组件是group且否在Tab中 - if (checkType === 'pGroupTab') { + // 当前组件是group且在Tab中 + if (checkType === 'groupInTab') { return Boolean( - pathMap[item.id] && - pathMap[item.id].component === 'Group' && + item.component === 'Group' && pathMap[pathMap[item.id].id] && pathMap[pathMap[item.id].id].component === 'DeTabs' ) } + + // 当前组件是Tab且在Group中 + if (checkType === 'tabInGroup') { + return Boolean( + item.component === 'DeTabs' && pathMap[item.id] && pathMap[item.id].component === 'Group' + ) + } return false }