From 2030fcc7110220d8f54309ac890ea668020dc3e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Sat, 6 Aug 2022 18:16:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=84=E7=90=86=E5=88=86=E7=BB=84?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=EF=BC=8C=E5=A4=9A=E9=80=89=E5=8F=B3=E9=94=AE?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/chartEditStore/chartEditStore.ts  |  4 -
 .../ContentEdit/components/EditGroup/index.ts |  3 +
 .../components/EditGroup/index.vue            | 78 ++++++++++++++++++
 src/views/chart/ContentEdit/index.vue         | 80 +++++++++++--------
 src/views/chart/ContentLayers/index.vue       |  6 +-
 5 files changed, 130 insertions(+), 41 deletions(-)
 create mode 100644 src/views/chart/ContentEdit/components/EditGroup/index.ts
 create mode 100644 src/views/chart/ContentEdit/components/EditGroup/index.vue

diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index 53f13c35..a74b4d43 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/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) => {
diff --git a/src/views/chart/ContentEdit/components/EditGroup/index.ts b/src/views/chart/ContentEdit/components/EditGroup/index.ts
new file mode 100644
index 00000000..4fd9d529
--- /dev/null
+++ b/src/views/chart/ContentEdit/components/EditGroup/index.ts
@@ -0,0 +1,3 @@
+import EditGroup from './index.vue'
+
+export { EditGroup }
diff --git a/src/views/chart/ContentEdit/components/EditGroup/index.vue b/src/views/chart/ContentEdit/components/EditGroup/index.vue
new file mode 100644
index 00000000..c20e0108
--- /dev/null
+++ b/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>
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index f08cb06c..f982920d 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -15,38 +15,43 @@
       <!-- 展示 -->
       <edit-range>
         <!-- 滤镜预览 -->
-        <div :style="{
+        <div
+          :style="{
             ...getFilterStyle(chartEditStore.getEditCanvasConfig),
             ...rangeStyle
-          }">
+          }"
+        >
           <!-- 图表 -->
-          <edit-shape-box
-            v-for="(item, index) in chartEditStore.getComponentList"
-            :key="item.id"
-            :data-id="item.id"
-            :index="index"
-            :style="useComponentStyle(item.attr, index)"
-            :item="item"
-            @click="mouseClickHandle($event, item)"
-            @mousedown="mousedownHandle($event, item)"
-            @mouseenter="mouseenterHandle($event, item)"
-            @mouseleave="mouseleaveHandle($event, item)"
-            @contextmenu="handleContextMenu($event, item, optionsHandle)"
-          >
-            <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 v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
+            <EditGroup v-if="item.isGroup" :groupData="item" :groupIndex="index"> </EditGroup>
+            <!-- 单组件 -->
+            <edit-shape-box
+              v-else
+              :data-id="item.id"
+              :index="index"
+              :style="useComponentStyle(item.attr, index)"
+              :item="item"
+              @click="mouseClickHandle($event, item)"
+              @mousedown="mousedownHandle($event, item)"
+              @mouseenter="mouseenterHandle($event, item)"
+              @mouseleave="mouseleaveHandle($event, item)"
+              @contextmenu="handleContextMenu($event, item, optionsHandle)"
+            >
+              <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>
         </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
 }
diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue
index 13ec488f..13184805 100644
--- a/src/views/chart/ContentLayers/index.vue
+++ b/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>