Merge pull request #3420 from dataease/pr@dev@feat_panel-tab-canvas

feat(仪表板): 仪表板Tab组件支持移入移出自由布局

frontend/src/components/DeDrag/index.vue

@@ -434,10 +434,10 @@ export default {
     }
   },
   computed: {
-    parentWidthOffset(){
-      if(this.canvasId==='canvas-main'){
+    parentWidthOffset() {
+      if (this.canvasId === 'canvas-main') {
         return 0
-      }else{
+      } else {
         return this.parentWidthTabOffset
       }
     },
@@ -677,7 +677,9 @@ export default {
       'tabMoveInActiveId',
       'tabActiveTabNameMap',
       'mousePointShadowMap',
-      'tabMoveOutComponentId'
+      'tabMoveOutComponentId',
+      'tabCollisionActiveId',
+      'tabMoveInActiveId'
     ])
   },
   watch: {
@@ -1495,14 +1497,14 @@ export default {
         const targetCanvasScale = this.curCanvasScaleMap['canvas-main']
         // 按照阴影位置定位
         this.element.style.left = (this.mousePointShadowMap.mouseX - (this.mousePointShadowMap.width)) / targetCanvasScale.scalePointWidth
-        this.element.style.top = (this.mousePointShadowMap.mouseY - (this.mousePointShadowMap.height / 2))/ targetCanvasScale.scalePointHeight
-        this.element.style.width = this.mousePointShadowMap.width/ targetCanvasScale.scalePointWidth
-        this.element.style.height = this.mousePointShadowMap.height/ targetCanvasScale.scalePointHeight
+        this.element.style.top = (this.mousePointShadowMap.mouseY - (this.mousePointShadowMap.height / 2)) / targetCanvasScale.scalePointHeight
+        this.element.style.width = this.mousePointShadowMap.width / targetCanvasScale.scalePointWidth
+        this.element.style.height = this.mousePointShadowMap.height / targetCanvasScale.scalePointHeight
 
         if (this.element.auxiliaryMatrix) {
           this.element.x = Math.round(this.element.style.left / targetCanvasScale.matrixStyleOriginWidth) + 1
           this.element.y = Math.round(this.element.style.top / targetCanvasScale.matrixStyleOriginHeight) + 1
-          this.element.sizex = Math.round(this.element.style.width /targetCanvasScale.matrixStyleOriginWidth)
+          this.element.sizex = Math.round(this.element.style.width / targetCanvasScale.matrixStyleOriginWidth)
           this.element.sizey = Math.round(this.element.style.height / targetCanvasScale.matrixStyleOriginHeight)
           this.recordMatrixCurShadowStyle(targetCanvasScale)
         }
@@ -1922,8 +1924,8 @@ export default {
       const left = this.left
       const width = this.width
       const height = this.height
-      // tab 移入检测开启
-      if (this.isTabMoveCheck) {
+      // tab 移入检测开启 tab组件不能相互移入另一个tab组件
+      if (this.isTabMoveCheck && this.element.type !== 'de-tabs') {
         const nodes = this.$el.parentNode.childNodes // 获取当前父节点下所有子节点
         for (const item of nodes) {
           if (
@@ -1953,7 +1955,7 @@ export default {
             const brAndBr = (collisionT + collisionH) >= (top + height) && (collisionL + collisionW) >= (left + width)
             if (tfAndTf && bfAndBf && trAndTr && brAndBr) {
               this.$store.commit('setTabCollisionActiveId', item.getAttribute('component-id'))
-            } else {
+            } else if (this.tabCollisionActiveId === item.getAttribute('component-id')) {
               this.$store.commit('setTabCollisionActiveId', null)
             }
 
@@ -1974,7 +1976,7 @@ export default {
             const activeBrAndBr = (activeT + activeH) >= (top + height) && (activeL + activeW) >= (left + width)
             if (activeTfAndTf && activeBfAndBf && activeTrAndTr && activeBrAndBr) {
               this.$store.commit('setTabMoveInActiveId', item.getAttribute('component-id'))
-            } else {
+            } else if (this.tabMoveInActiveId === item.getAttribute('component-id')) {
               this.$store.commit('setTabMoveInActiveId', null)
             }
 

frontend/src/components/canvas/DeCanvas.vue

@@ -268,7 +268,6 @@ export default {
       })
     },
     handleDragOver(e) {
-      // console.log("handleDragOver-"+this.canvasId)
       e.preventDefault()
       e.dataTransfer.dropEffect = 'copy'
       this.$refs[this.editorRefName].handleDragOver(e)

frontend/src/components/canvas/components/Editor/DeEditor.vue

@@ -1482,7 +1482,6 @@ export default {
       }
     },
     handleDragOver(e) {
-      console.log('handleDragOver--x='+e.pageX+';y='+e.pageY)
       this.dragComponentInfo.shadowStyle.x = e.pageX - 220
       this.dragComponentInfo.shadowStyle.y = e.pageY - 90 + this.scrollTop
       this.dragComponentInfo.style.left = this.dragComponentInfo.shadowStyle.x / this.scalePointWidth

frontend/src/components/widget/DeWidget/DeTabs.vue

@@ -45,14 +45,6 @@
                 {{ $t('detabs.eidttitle') }}
               </el-dropdown-item>
 
-              <el-dropdown-item :command="beforeHandleCommand('selectView', item)">
-                {{ $t('detabs.selectview') }}
-              </el-dropdown-item>
-
-              <el-dropdown-item :command="beforeHandleCommand('selectOthers', item)">
-                {{ $t('detabs.selectOthers') }}
-              </el-dropdown-item>
-
               <el-dropdown-item
                 v-if=" element.options.tabList.length > 1"
                 :command="beforeHandleCommand('deleteCur', item)"

frontend/src/store/index.js

@@ -229,7 +229,6 @@ const data = {
         if (height || height === 0) curComponent.style.height = (height / curCanvasScaleSelf.scalePointHeight) + 0.0000001
         if (rotate || rotate === 0) curComponent.style.rotate = rotate
       }
-      // console.log("setShapeStyle==="+curComponent.style.width)
     },
 
     setShapeSingleStyle({ curComponent }, { key, value }) {
@@ -764,7 +763,6 @@ const data = {
       state.mousePointShadowMap.mouseY = mousePoint.mouseY
       state.mousePointShadowMap.width = mousePoint.width
       state.mousePointShadowMap.height = mousePoint.height
-      // console.log("mousePointMap:"+JSON.stringify(state.mousePointMap))
     }
   },
   modules: {