feat(数据大屏): 支持分组移入Tab

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 &&

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)
         }
       })

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
 }