Merge pull request #11794 from dataease/pr@dev-v2@refactor_tab-group

Pr@dev v2@refactor tab group

core/core-frontend/src/components/data-visualization/RealTimeListTree.vue

@@ -39,7 +39,7 @@ const areaDataPush = component => {
     component.isShow &&
     component.canvasId === 'canvas-main' &&
     component.category !== 'hidden' &&
-    !['Group', 'GroupArea'].includes(component.component)
+    !['Group', 'GroupArea', 'DeTabs'].includes(component.component)
   ) {
     areaData.value.components.push(component)
   }
@@ -75,7 +75,7 @@ const shiftDataPush = curClickIndex => {
         !component.isLock &&
         component.isShow &&
         component.category !== 'hidden' &&
-        !['Group', 'GroupArea'].includes(component.component)
+        !['Group', 'GroupArea', 'DeTabs'].includes(component.component)
     )
   areaData.value.components.push(...shiftAreaComponents)
   dvMainStore.setCurComponent({ component: null, index: null })

core/core-frontend/src/components/data-visualization/canvas/Shape.vue

@@ -160,7 +160,7 @@ const state = reactive({
     id: ''
   },
   // 禁止移入Tab中的组件
-  ignoreTabMoveComponent: ['de-button', 'de-reset-button', 'DeTabs'],
+  ignoreTabMoveComponent: ['de-button', 'de-reset-button', 'DeTabs', 'Group'],
   // 当画布在tab中是 宽度左右拓展的余量
   parentWidthTabOffset: 40,
   canvasChangeTips: 'none',
@@ -431,7 +431,7 @@ const areaDataPush = component => {
     !component.isLock &&
     component.isShow &&
     component.canvasId === 'canvas-main' &&
-    !['Group', 'GroupArea'].includes(component.component)
+    !['Group', 'GroupArea', 'DeTabs'].includes(component.component)
   ) {
     areaData.value.components.push(component)
   }

core/core-frontend/src/store/modules/data-visualization/compose.ts

@@ -142,9 +142,7 @@ export const composeStore = defineStore('compose', {
 
       const components = []
       areaData.components.forEach(component => {
-        if (!['Group', 'GroupArea'].includes(component.component)) {
+        if (['Group'].includes(component.component)) {
-          components.push(component)
-        } else {
           // 如果要组合的组件中，已经存在组合数据，则需要提前拆分
           const parentStyle = { ...component.style }
           const subComponents = component.propValue
@@ -155,6 +153,10 @@ export const composeStore = defineStore('compose', {
           })
 
           components.push(...component.propValue)
+        } else if (['DeTabs', 'GroupArea'].includes(component.component)) {
+          // do nothing GroupAreas组合视阔区 DeTabs 均不加入分组中
+        } else {
+          components.push(component)
         }
       })
 
@@ -202,10 +204,12 @@ export const composeStore = defineStore('compose', {
     // 将已经放到 Group 组件数据删除，也就是在 componentData 中删除，因为它们已经从 componentData 挪到 Group 组件中了
     batchDeleteComponent(deleteData) {
       deleteData.forEach(component => {
-        for (let i = 0, len = componentData.value.length; i < len; i++) {
+        if (!['DeTabs', 'GroupArea'].includes(component.component)) {
-          if (component.id == componentData.value[i].id) {
+          for (let i = 0, len = componentData.value.length; i < len; i++) {
-            componentData.value.splice(i, 1)
+            if (component.id == componentData.value[i].id) {
-            break
+              componentData.value.splice(i, 1)
+              break
+            }
           }
         }
       })

core/core-frontend/src/utils/DeShortcutKey.ts

@@ -5,6 +5,7 @@ import { copyStoreWithOut } from '@/store/modules/data-visualization/copy'
 import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
 import { lockStoreWithOut } from '@/store/modules/data-visualization/lock'
 import { storeToRefs } from 'pinia'
+import { getCurInfo } from '@/store/modules/data-visualization/common'
 
 const dvMainStore = dvMainStoreWithOut()
 const composeStore = composeStoreWithOut()
@@ -235,7 +236,10 @@ function preview() {
 
 function deleteComponent() {
   if (curComponent.value) {
-    dvMainStore.deleteComponentById(curComponent.value.id)
+    const curInfo = getCurInfo()
+    if (curInfo) {
+      dvMainStore.deleteComponent(curInfo.index, curInfo.componentData)
+    }
   } else if (areaData.value.components.length) {
     areaData.value.components.forEach(component => {
       dvMainStore.deleteComponentById(component.id)