feat: 处理分组展示，多选右键展示

src/store/modules/chartEditStore/chartEditStore.ts

@@ -605,10 +605,6 @@ export const useChartEditStore = defineStore({
     // * 解除分组
     setUnGroup() {
       const selectGroupIdArr = this.getTargetChart.selectId
-      if(selectGroupIdArr.length > 1) {
-        window['$message'].error('解除分组失败，请联系管理员！')
-        return
-      }
       
       // 解组
       const unGroup = (targetIndex: number) => {

src/views/chart/ContentEdit/components/EditGroup/index.ts

@@ -0,0 +1,3 @@
+import EditGroup from './index.vue'
+
+export { EditGroup }

src/views/chart/ContentEdit/components/EditGroup/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="go-edit-group-box">
+    <!-- 组合组件 -->
+    <edit-shape-box
+      v-for="item in groupData.groupList"
+      :key="item.id"
+      :data-id="item.id"
+      :index="groupIndex"
+      :style="useComponentStyle(item.attr, groupIndex)"
+      :item="item"
+      @click="mouseClickHandle($event, item)"
+      @mousedown="mousedownHandle($event, item)"
+      @mouseenter="mouseenterHandle($event, item)"
+      @mouseleave="mouseleaveHandle($event, item)"
+      @contextmenu="handleContextMenu($event, item, undefined, undefined, pickOptionsList)"
+    >
+      <component
+        class="edit-content-chart"
+        :class="animationsClass(item.styles.animations)"
+        :is="item.chartConfig.chartKey"
+        :chartConfig="item"
+        :themeSetting="themeSetting"
+        :themeColor="themeColor"
+        :style="{
+          ...useSizeStyle(item.attr),
+          ...getFilterStyle(item.styles),
+          ...getTransformStyle(item.styles)
+        }"
+      ></component>
+    </edit-shape-box>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType } from 'vue'
+import { MenuEnum } from '@/enums/editPageEnum'
+import { chartColors } from '@/settings/chartThemes/index'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
+import { useMouseHandle } from '../../hooks/useDrag.hook'
+import { useComponentStyle, useSizeStyle } from '../../hooks/useStyle.hook'
+import { EditShapeBox } from '../../components/EditShapeBox'
+
+
+const props = defineProps({
+  groupData: {
+    type: Object as PropType<CreateComponentGroupType>,
+    required: true
+  },
+  groupIndex: {
+    type: Number,
+    required: true
+  }
+})
+
+const chartEditStore = useChartEditStore()
+const { handleContextMenu } = useContextMenu()
+
+// 右键
+const pickOptionsList = [MenuEnum.UN_GROUP]
+
+// 点击事件
+const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle()
+
+// 配置项
+const themeColor = computed(() => {
+  const chartThemeColor = chartEditStore.getEditCanvasConfig.chartThemeColor
+  return chartColors[chartThemeColor]
+})
+
+// 主题色
+const themeSetting = computed(() => {
+  const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
+  return chartThemeSetting
+})
+</script>

src/views/chart/ContentEdit/index.vue

@@ -15,38 +15,43 @@
       <!-- 展示 -->
       <edit-range>
         <!-- 滤镜预览 -->
-        <div :style="{
+        <div
+          :style="{
             ...getFilterStyle(chartEditStore.getEditCanvasConfig),
             ...rangeStyle
-          }">
+          }"
+        >
           <!-- 图表 -->
-          <edit-shape-box
+          <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
-            v-for="(item, index) in chartEditStore.getComponentList"
+            <EditGroup v-if="item.isGroup" :groupData="item" :groupIndex="index"> </EditGroup>
-            :key="item.id"
+            <!-- 单组件 -->
-            :data-id="item.id"
+            <edit-shape-box
-            :index="index"
+              v-else
-            :style="useComponentStyle(item.attr, index)"
+              :data-id="item.id"
-            :item="item"
+              :index="index"
-            @click="mouseClickHandle($event, item)"
+              :style="useComponentStyle(item.attr, index)"
-            @mousedown="mousedownHandle($event, item)"
+              :item="item"
-            @mouseenter="mouseenterHandle($event, item)"
+              @click="mouseClickHandle($event, item)"
-            @mouseleave="mouseleaveHandle($event, item)"
+              @mousedown="mousedownHandle($event, item)"
-            @contextmenu="handleContextMenu($event, item, optionsHandle)"
+              @mouseenter="mouseenterHandle($event, item)"
-          >
+              @mouseleave="mouseleaveHandle($event, item)"
-            <component
+              @contextmenu="handleContextMenu($event, item, optionsHandle)"
-              class="edit-content-chart"
+            >
-              :class="animationsClass(item.styles.animations)"
+              <component
-              :is="item.chartConfig.chartKey"
+                class="edit-content-chart"
-              :chartConfig="item"
+                :class="animationsClass(item.styles.animations)"
-              :themeSetting="themeSetting"
+                :is="item.chartConfig.chartKey"
-              :themeColor="themeColor"
+                :chartConfig="item"
-              :style="{
+                :themeSetting="themeSetting"
-                ...useSizeStyle(item.attr),
+                :themeColor="themeColor"
-                ...getFilterStyle(item.styles),
+                :style="{
-                ...getTransformStyle(item.styles),
+                  ...useSizeStyle(item.attr),
-              }"
+                  ...getFilterStyle(item.styles),
-            ></component>
+                  ...getTransformStyle(item.styles)
-          </edit-shape-box>
+                }"
+              ></component>
+            </edit-shape-box>
+          </div>
         </div>
       </edit-range>
     </div>
@@ -79,6 +84,7 @@ import { dragHandle, dragoverHandle, useMouseHandle } from './hooks/useDrag.hook
 import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
 
 import { ContentBox } from '../ContentBox/index'
+import { EditGroup } from './components/EditGroup'
 import { EditRange } from './components/EditRange'
 import { EditBottom } from './components/EditBottom'
 import { EditShapeBox } from './components/EditShapeBox'
@@ -94,15 +100,21 @@ useLayout()
 const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle()
 
 // 右键事件
-const optionsHandle = (targetList: MenuOptionsItemType[], allList: MenuOptionsItemType[], item: CreateComponentType | CreateComponentGroupType) => {
+const optionsHandle = (
+  targetList: MenuOptionsItemType[],
+  allList: MenuOptionsItemType[],
+  item: CreateComponentType
+) => {
   // 多选处理
-  if(chartEditStore.getTargetChart.selectId.length > 1) {
+  if (chartEditStore.getTargetChart.selectId.length > 1) {
+    const list: MenuOptionsItemType[] = []
     targetList.forEach(item => {
-      if(item.key !== MenuEnum.GROUP) {
+      // 成组
-        item.disabled = true
+      if (item.key === MenuEnum.GROUP) {
+        list.push(item)
       }
     })
-    return targetList
+    return list
   }
   return targetList
 }

src/views/chart/ContentLayers/index.vue

@@ -20,16 +20,16 @@
       <template #item="{ element }">
         <div>
           <!-- 组合 -->
-          <LayersGroupListItem v-if="element.isGroup" :componentGroupData="element"></LayersGroupListItem>
+          <layers-group-list-item v-if="element.isGroup" :componentGroupData="element"></layers-group-list-item>
           <!-- 单组件 -->
-          <LayersListItem
+          <layers-list-item
             v-else
             :componentData="element"
             @mousedown="mousedownHandle(element)"
             @mouseenter="mouseenterHandle(element)"
             @mouseleave="mouseleaveHandle(element)"
             @contextmenu="handleContextMenu($event, element)"
-          ></LayersListItem>
+          ></layers-list-item>
         </div>
       </template>
     </draggable>