Merge pull request #3935 from dataease/pr@dev@refactor_layer

refactor(仪表板): 优化置顶置底逻辑适配新画布

frontend/src/components/canvas/store/layer.js

@@ -1,9 +1,11 @@
-import { toBottom, toTop, moveUp, moveDown } from '@/components/canvas/utils/utils'
+import { findCurComponentIndex, moveDown, moveUp, toBottom, toTop } from '@/components/canvas/utils/utils'
 import toast from '@/components/canvas/utils/toast'
 
 export default {
   mutations: {
-    upComponent({ componentData, curComponentIndex }) {
+
+    upComponent({ componentData, curComponent }) {
+      const curComponentIndex = findCurComponentIndex(componentData, curComponent)
       // 上移图层 index，表示元素在数组中越往后
       if (curComponentIndex < componentData.length - 1) {
         moveUp(componentData, curComponentIndex)
@@ -12,7 +14,8 @@ export default {
       }
     },
 
-    downComponent({ componentData, curComponentIndex }) {
+    downComponent({ componentData, curComponent }) {
+      const curComponentIndex = findCurComponentIndex(componentData, curComponent)
       // 下移图层 index，表示元素在数组中越往前
       if (curComponentIndex > 0) {
         moveDown(componentData, curComponentIndex)
@@ -21,14 +24,16 @@ export default {
       }
     },
 
-    topComponent({ componentData, curComponentIndex }) {
+    topComponent({ componentData, curComponent }) {
+      const curComponentIndex = findCurComponentIndex(componentData, curComponent)
       // 置顶
       if (curComponentIndex < componentData.length - 1) {
         toTop(componentData, curComponentIndex)
       }
     },
 
-    bottomComponent({ componentData, curComponentIndex }) {
+    bottomComponent({ componentData, curComponent }) {
+      const curComponentIndex = findCurComponentIndex(componentData, curComponent)
       // 置底
       if (curComponentIndex > 0) {
         toBottom(componentData, curComponentIndex)

frontend/src/components/canvas/utils/utils.js

@@ -246,3 +246,15 @@ export function getNowCanvasComponentData(canvasId, showPosition) {
     return store.state.componentData.filter(item => item.canvasId === canvasId)
   }
 }
+
+export function findCurComponentIndex(componentData, curComponent) {
+  let curIndex = 0
+  for (let index = 0; index < componentData.length; index++) {
+    const element = componentData[index]
+    if (element.id && element.id === curComponent.id) {
+      curIndex = index
+      break
+    }
+  }
+  return curIndex
+}