Merge pull request #7171 from dataease/pr@dev-v2@feat_group-menu

refactor: 数据大屏右键菜单优化

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

@@ -67,6 +67,12 @@ const shiftDataPush = curClickIndex => {
 }
 
 const onClick = (e, index) => {
+  setCurComponent(index)
+  //其他情况点击清理选择区域
+  areaData.value.components.splice(0, areaData.value.components.length)
+}
+
+const onClickBack = (e, index) => {
   // 初始化点击是 laterIndex=0
   if (!curComponent.value) {
     composeStore.setLaterIndex(null)

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

@@ -9,6 +9,7 @@ import { storeToRefs } from 'pinia'
 import { computed, toRefs } from 'vue'
 import { ElDivider } from 'element-plus-secondary'
 import eventBus from '@/utils/eventBus'
+import { getCurInfo } from '@/store/modules/data-visualization/common'
 const dvMainStore = dvMainStoreWithOut()
 const copyStore = copyStoreWithOut()
 const lockStore = lockStoreWithOut()
@@ -52,7 +53,8 @@ const menuOpt = optName => {
 }
 
 const cut = () => {
-  copyStore.cut()
+  const curInfo = getCurInfo()
+  copyStore.cut(curInfo.componentData)
   menuOpt('cut')
 }
 
@@ -85,7 +87,8 @@ const paste = () => {
 
 const deleteComponent = () => {
   if (curComponent.value) {
-    dvMainStore.deleteComponentById(curComponent.value?.id)
+    const curInfo = getCurInfo()
+    dvMainStore.deleteComponentById(curComponent.value?.id, curInfo.componentData)
   } else if (areaData.value.components.length) {
     areaData.value.components.forEach(component => {
       dvMainStore.deleteComponentById(component.id)

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

@@ -0,0 +1,29 @@
+import { storeToRefs } from 'pinia'
+import { dvMainStoreWithOut } from './dvMain'
+const dvMainStore = dvMainStoreWithOut()
+const { curComponent, componentData } = storeToRefs(dvMainStore)
+
+export const getCurInfo = () => {
+  if (curComponent.value) {
+    const curComponentId = curComponent.value.id
+    let curIndex = 0
+    let curComponentData = componentData.value
+    componentData.value.forEach((component, index) => {
+      if (curComponentId === component.id) {
+        curIndex = index
+      }
+      if (component.component === 'Group') {
+        component.propValue.forEach((subComponent, subIndex) => {
+          if (curComponentId === subComponent.id) {
+            curIndex = subIndex
+            curComponentData = component.propValue
+          }
+        })
+      }
+    })
+    return {
+      index: curIndex,
+      componentData: curComponentData
+    }
+  }
+}

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

@@ -18,7 +18,8 @@ const {
   curMultiplexingComponents,
   dvInfo,
   pcMatrixCount,
-  canvasStyleData
+  canvasStyleData,
+  componentData
 } = storeToRefs(dvMainStore)
 const { menuTop, menuLeft } = storeToRefs(contextmenuStore)
 
@@ -119,10 +120,10 @@ export const copyStore = defineStore('copy', {
       }, moveTime)
       snapshotStore.recordSnapshotCache()
     },
-    cut() {
+    cut(curComponentData = componentData.value) {
       if (curComponent.value) {
         this.copyDataInfo([curComponent.value])
-        dvMainStore.deleteComponentById(curComponent.value.id)
+        dvMainStore.deleteComponentById(curComponent.value.id, curComponentData)
       } else if (composeStore.areaData.components.length) {
         this.copyDataInfo(composeStore.areaData.components)
         composeStore.areaData.components.forEach(component => {

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

@@ -3,43 +3,60 @@ import { store } from '../../index'
 import { dvMainStoreWithOut } from './dvMain'
 import { swap } from '@/utils/utils'
 import { useEmitt } from '@/hooks/web/useEmitt'
+import { getCurInfo } from '@/store/modules/data-visualization/common'
 
 const dvMainStore = dvMainStoreWithOut()
-const { componentData, curComponentIndex, curComponent } = storeToRefs(dvMainStore)
+const { curComponentIndex, curComponent } = storeToRefs(dvMainStore)
 
 export const layerStore = defineStore('layer', {
   actions: {
     upComponent() {
-      // 上移图层 index，表示元素在数组中越往后
+      const curInfo = getCurInfo()
-      if (curComponentIndex.value < componentData.value.length - 1) {
+      if (curInfo) {
-        swap(componentData.value, curComponentIndex.value, curComponentIndex.value + 1)
+        const { index, componentData } = curInfo
-        curComponentIndex.value = curComponentIndex.value + 1
+        // 上移图层 index，表示元素在数组中越往后
+        if (index < componentData.length - 1) {
+          swap(componentData, index, index + 1)
+          curComponentIndex.value = index + 1
+        }
       }
     },
 
     downComponent() {
-      // 下移图层 index，表示元素在数组中越往前
+      const curInfo = getCurInfo()
-      if (curComponentIndex.value > 0) {
+      if (curInfo) {
-        swap(componentData.value, curComponentIndex.value, curComponentIndex.value - 1)
+        const { index, componentData } = curInfo
-        curComponentIndex.value = curComponentIndex.value - 1
+        // 下移图层 index，表示元素在数组中越往前
+        if (index > 0) {
+          swap(componentData, index, index - 1)
+          curComponentIndex.value = index - 1
+        }
       }
     },
 
     topComponent() {
       // 置顶
-      if (curComponentIndex.value < componentData.value.length - 1) {
+      const curInfo = getCurInfo()
-        componentData.value.splice(curComponentIndex.value, 1)
+      if (curInfo) {
-        componentData.value.push(curComponent.value)
+        const { index, componentData } = curInfo
-        curComponentIndex.value = componentData.value.length - 1
+        if (index < componentData.length - 1) {
+          componentData.splice(curComponentIndex.value, 1)
+          componentData.push(curComponent.value)
+          curComponentIndex.value = componentData.length - 1
+        }
       }
     },
 
     bottomComponent() {
       // 置底
-      if (curComponentIndex.value > 0) {
+      const curInfo = getCurInfo()
-        componentData.value.splice(curComponentIndex.value, 1)
+      if (curInfo) {
-        componentData.value.unshift(curComponent.value)
+        const { index, componentData } = curInfo
-        curComponentIndex.value = 0
+        if (index > 0) {
+          componentData.splice(index, 1)
+          componentData.unshift(curComponent.value)
+          curComponentIndex.value = 0
+        }
       }
     },