Merge pull request #11646 from dataease/pr@dev-v2@refactor_edit-canvas-tab

refactor(数据大屏): 编辑时预览逻辑针对Tab画布优化

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

@@ -101,7 +101,7 @@ const dashboardActive = computed(() => {
 
 // 大屏是否保持宽高比例 非全屏 full 都需要保持宽高比例
 const dataVKeepRadio = computed(() => {
-  return canvasStyleData.value.screenAdaptor !== 'full'
+  return canvasStyleData.value?.screenAdaptor !== 'full'
 })
 const isReport = computed(() => {
   return !!router.currentRoute.value.query?.report
@@ -205,12 +205,13 @@ const resetLayout = () => {
           : outerScale.value * 100
       } else {
         // 需要保持宽高比例时 高度伸缩和宽度伸缩保持一致 否则 高度伸缩单独计算
+        // tip 当当前画布是tab时 使用的事 outerScale.value 因为 canvasStyleData.value为 {} 此处取数逻辑需进一步优化
         const scaleMinHeight = dataVKeepRadio.value ? scaleMin.value : scaleHeightPoint.value
         changeRefComponentsSizeWithScalePoint(
           baseComponentData.value,
           canvasStyleData.value,
-          scaleMin.value,
-          scaleMinHeight
+          scaleMin.value || outerScale.value * 100,
+          scaleMinHeight || outerScale.value * 100
         )
         scaleMin.value = isMainCanvas(canvasId.value) ? scaleMin.value : outerScale.value * 100
       }

core/core-frontend/src/custom-component/de-tabs/Component.vue

@@ -66,7 +66,7 @@
             :dv-info="dvInfo"
             :cur-gap="curPreviewGap"
             :component-data="tabItem.componentData"
-            :canvas-style-data="canvasStyleData"
+            :canvas-style-data="{}"
             :canvas-view-info="canvasViewInfo"
             :canvas-id="element.id + '--' + tabItem.name"
             :preview-active="editableTabsValue === tabItem.name"
@@ -289,11 +289,9 @@ const componentMoveIn = component => {
           component.style.left = 0
           component.style.top = 0
           tabItem.componentData.push(component)
-          if (isDashboard()) {
-            nextTick(() => {
-              refInstance.addItemBox(component) //在适当的时候初始化布局组件
-            })
-          }
+          nextTick(() => {
+            refInstance.addItemBox(component) //在适当的时候初始化布局组件
+          })
         }
       } else {
         // 从主画布删除
@@ -310,7 +308,9 @@ const componentMoveIn = component => {
 }
 
 const componentMoveOut = component => {
-  canvasChangeAdaptor(component, bashMatrixInfo.value, true)
+  if (isDashboard()) {
+    canvasChangeAdaptor(component, bashMatrixInfo.value, true)
+  }
   // 从Tab画布中移除
   eventBus.emit('removeMatrixItemById-' + component.canvasId, component.id)
   dvMainStore.setCurComponent({ component: null, index: null })
@@ -324,6 +324,9 @@ const componentMoveOut = component => {
 }
 
 const addToMain = component => {
+  const { left, top } = element.value.style
+  component.style.left = component.style.left + left
+  component.style.top = component.style.top + top
   component.canvasId = 'canvas-main'
   dvMainStore.addComponent({
     component,

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

@@ -33,18 +33,18 @@ export function changeComponentsSizeWithScale(scale, changeAttrs = needToChangeA
           getOriginStyle(component.style[key], canvasStyleData.value.scale),
           scale
         )
-        // 如果是分组组件 则要进行分组内部组件groupStyle进行深度计算
-        // 计算逻辑 Group 中样式 * groupComponent.groupStyle[sonKey].
-        if (['Group', 'DeTabs'].includes(component.component)) {
-          try {
-            groupSizeStyleAdaptor(component)
-          } catch (e) {
-            // 旧Group适配
-            console.error('group adaptor error:' + e)
-          }
-        }
       }
     })
+    // 如果是分组组件 则要进行分组内部组件groupStyle进行深度计算
+    // 计算逻辑 Group 中样式 * groupComponent.groupStyle[sonKey].
+    if (['Group', 'DeTabs'].includes(component.component)) {
+      try {
+        groupSizeStyleAdaptor(component)
+      } catch (e) {
+        // 旧Group适配
+        console.error('group adaptor error:' + e)
+      }
+    }
   })
 
   dvMainStore.setComponentData(componentDataCopy)