From e380ead651aaa83b4ba77f019c72a7c9cbf3cae2 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: Fri, 12 Aug 2022 20:39:20 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=A4=84=E7=90=86=E5=88=86=E7=BB=84?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E5=92=8C=E5=8A=A8=E6=80=81=E5=BC=95=E5=85=A5?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/chart/ContentEdit/index.vue         |  4 +-
 src/views/chart/hooks/useSync.hook.ts         | 70 +++++++++++++------
 .../components/PreviewRenderGroup/index.ts    |  3 +
 .../components/PreviewRenderGroup/index.vue   | 55 +++++++++++++++
 .../components/PreviewRenderList/index.vue    | 18 +++--
 src/views/preview/hooks/useComInstall.hook.ts | 22 ++++--
 6 files changed, 137 insertions(+), 35 deletions(-)
 create mode 100644 src/views/preview/components/PreviewRenderGroup/index.ts
 create mode 100644 src/views/preview/components/PreviewRenderGroup/index.vue

diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index 61c533c5..0bbb5190 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -23,7 +23,9 @@
         >
           <!-- 图表 -->
           <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
-            <EditGroup v-if="item.isGroup" :groupData="item" :groupIndex="index"> </EditGroup>
+            <!-- 分组 -->
+            <edit-group v-if="item.isGroup" :groupData="item" :groupIndex="index"></edit-group>
+            
             <!-- 单组件 -->
             <edit-shape-box
               v-if="!item.isGroup"
diff --git a/src/views/chart/hooks/useSync.hook.ts b/src/views/chart/hooks/useSync.hook.ts
index 3f782eb4..bda37c8e 100644
--- a/src/views/chart/hooks/useSync.hook.ts
+++ b/src/views/chart/hooks/useSync.hook.ts
@@ -4,6 +4,7 @@ import { ChartEditStoreEnum, ChartEditStorage } from '@/store/modules/chartEditS
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
 import { CreateComponentType, CreateComponentGroupType, ConfigType } from '@/packages/index.d'
+import { PublicGroupConfigClass } from '@/packages/public/publicConfig'
 
 // 请求处理
 export const useSync = () => {
@@ -14,7 +15,7 @@ export const useSync = () => {
    * * 组件动态注册
    * @param projectData 项目数据
    * @param isSplace 是否替换数据
-   * @returns 
+   * @returns
    */
   const updateComponent = async (projectData: ChartEditStorage, isSplace = false) => {
     if (isSplace) {
@@ -26,18 +27,19 @@ export const useSync = () => {
     }
     // 列表组件注册
     projectData.componentList.forEach(async (e: CreateComponentType | CreateComponentGroupType) => {
-      // 排除分组
-      if (e.isGroup) return
-      const target = e as CreateComponentType
-      if (!window['$vue'].component(target.chartConfig.chartKey)) {
-        window['$vue'].component(
-          target.chartConfig.chartKey,
-          fetchChartComponent(target.chartConfig)
-        )
-        window['$vue'].component(
-          target.chartConfig.conKey,
-          fetchConfigComponent(target.chartConfig)
-        )
+      const intComponent = (target: CreateComponentType) => {
+        if (!window['$vue'].component(target.chartConfig.chartKey)) {
+          window['$vue'].component(target.chartConfig.chartKey, fetchChartComponent(target.chartConfig))
+          window['$vue'].component(target.chartConfig.conKey, fetchConfigComponent(target.chartConfig))
+        }
+      }
+
+      if (e.isGroup) {
+        ;(e as CreateComponentGroupType).groupList.forEach(groupItem => {
+          intComponent(groupItem)
+        })
+      } else {
+        intComponent(e as CreateComponentType)
       }
     })
     // 数据赋值
@@ -45,15 +47,37 @@ export const useSync = () => {
       // 组件
       if (key === ChartEditStoreEnum.COMPONENT_LIST) {
         for (const comItem of projectData[key]) {
-          // 补充 class 上的方法
-          let newComponent: CreateComponentType = await createComponent(
-            comItem.chartConfig as ConfigType
-          )
-          chartEditStore.addComponentList(
-            Object.assign(newComponent, {...comItem, id: getUUID()}),
-            false,
-            true
-          )
+
+          // 重新创建是为了处理类种方法消失的问题
+          const create = async (e: CreateComponentType, callBack?: (e: CreateComponentType) => void) => {
+            // 补充 class 上的方法
+            let newComponent: CreateComponentType = await createComponent(e.chartConfig as ConfigType)
+            if (callBack) {
+              callBack(Object.assign(newComponent, { ...e, id: getUUID() }))
+            } else {
+              chartEditStore.addComponentList(Object.assign(newComponent, { ...e, id: getUUID() }), false, true)
+            }
+          }
+
+          if (comItem.isGroup) {
+            // 创建分组
+            let groupClass = new PublicGroupConfigClass()
+            groupClass = Object.assign(groupClass, comItem)
+
+            // 注册子应用
+            const targetList: CreateComponentType[] = []
+            ;(comItem as CreateComponentGroupType).groupList.forEach(groupItem => {
+              create(groupItem, e => {
+                targetList.push(e)
+              })
+            })
+            groupClass.groupList = targetList
+            
+            // 分组插入到列表
+            chartEditStore.addComponentList(groupClass, false, true)
+          } else {
+            create(comItem as CreateComponentType)
+          }
         }
       } else {
         // 非组件(顺便排除脏数据)
@@ -66,4 +90,4 @@ export const useSync = () => {
   return {
     updateComponent
   }
-}
\ No newline at end of file
+}
diff --git a/src/views/preview/components/PreviewRenderGroup/index.ts b/src/views/preview/components/PreviewRenderGroup/index.ts
new file mode 100644
index 00000000..5d5a652c
--- /dev/null
+++ b/src/views/preview/components/PreviewRenderGroup/index.ts
@@ -0,0 +1,3 @@
+import PreviewRenderGroup from './index.vue'
+
+export { PreviewRenderGroup }
diff --git a/src/views/preview/components/PreviewRenderGroup/index.vue b/src/views/preview/components/PreviewRenderGroup/index.vue
new file mode 100644
index 00000000..6ef63d12
--- /dev/null
+++ b/src/views/preview/components/PreviewRenderGroup/index.vue
@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="chart-item"
+    v-for="item in groupData.groupList"
+    :class="animationsClass(item.styles.animations)"
+    :key="item.id"
+    :style="{ 
+      ...getComponentAttrStyle(item.attr, groupIndex),
+      ...getFilterStyle(item.styles),
+      ...getTransformStyle(item.styles)
+    }"
+  >
+    <component
+      :is="item.chartConfig.chartKey"
+      :chartConfig="item"
+      :themeSetting="themeSetting"
+      :themeColor="themeColor"
+      :style="{...getSizeStyle(item.attr)}"
+    ></component>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { CreateComponentGroupType } from '@/packages/index.d'
+import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
+import { getSizeStyle, getComponentAttrStyle } from '../../utils'
+
+const props = defineProps({
+  groupData: {
+    type: Object as PropType<CreateComponentGroupType>,
+    required: true
+  },
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  groupIndex: {
+    type: Number,
+    required: true
+  }
+})
+
+console.log(props.groupData)
+</script>
+
+<style lang="scss" scoped>
+.chart-item {
+  position: absolute;
+}
+</style>
diff --git a/src/views/preview/components/PreviewRenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue
index 665ba487..5551b952 100644
--- a/src/views/preview/components/PreviewRenderList/index.vue
+++ b/src/views/preview/components/PreviewRenderList/index.vue
@@ -1,21 +1,31 @@
 <template>
   <div
     class="chart-item"
-    :class="animationsClass(item.styles.animations)"
     v-for="(item, index) in localStorageInfo.componentList"
+    :class="animationsClass(item.styles.animations)"
     :key="item.id"
-    :style="{ 
+    :style="{
       ...getComponentAttrStyle(item.attr, index),
       ...getFilterStyle(item.styles),
       ...getTransformStyle(item.styles)
     }"
   >
+    <!-- 分组 -->
+    <preview-render-group
+      v-if="item.isGroup"
+      :groupData="item"
+      :groupIndex="index"
+      :themeSetting="themeSetting"
+      :themeColor="themeColor"
+    ></preview-render-group>
+
+    <!-- 单组件 -->
     <component
       :is="item.chartConfig.chartKey"
       :chartConfig="item"
       :themeSetting="themeSetting"
       :themeColor="themeColor"
-      :style="{...getSizeStyle(item.attr)}"
+      :style="{ ...getSizeStyle(item.attr) }"
     ></component>
   </div>
 </template>
@@ -23,6 +33,7 @@
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
 import { ChartEditStorageType } from '../../index.d'
+import { PreviewRenderGroup } from '../PreviewRenderGroup/index'
 import { chartColors } from '@/settings/chartThemes/index'
 import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
 import { getSizeStyle, getComponentAttrStyle } from '../../utils'
@@ -45,7 +56,6 @@ const themeColor = computed(() => {
   const chartThemeColor = props.localStorageInfo.editCanvasConfig.chartThemeColor
   return chartColors[chartThemeColor]
 })
-
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/preview/hooks/useComInstall.hook.ts b/src/views/preview/hooks/useComInstall.hook.ts
index 4ce45576..faf4f155 100644
--- a/src/views/preview/hooks/useComInstall.hook.ts
+++ b/src/views/preview/hooks/useComInstall.hook.ts
@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 import { ChartEditStorageType } from '../index.d'
-import { CreateComponentType } from '@/packages/index.d'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { fetchChartComponent } from '@/packages/index'
 
 export const useComInstall = (localStorageInfo: ChartEditStorageType) => {
@@ -10,12 +10,20 @@ export const useComInstall = (localStorageInfo: ChartEditStorageType) => {
   const intervalTiming = setInterval(() => {
     if (window['$vue'].component) {
       clearInterval(intervalTiming)
-      localStorageInfo.componentList.forEach(async (e: CreateComponentType) => {
-        if (!window['$vue'].component(e.chartConfig.chartKey)) {
-          window['$vue'].component(
-            e.chartConfig.chartKey,
-            fetchChartComponent(e.chartConfig)
-          )
+
+      const intComponent = (target: CreateComponentType) => {
+        if (!window['$vue'].component(target.chartConfig.chartKey)) {
+          window['$vue'].component(target.chartConfig.chartKey, fetchChartComponent(target.chartConfig))
+        }
+      }
+
+      localStorageInfo.componentList.forEach(async (e: CreateComponentType | CreateComponentGroupType) => {
+        if (e.isGroup) {
+          (e as CreateComponentGroupType).groupList.forEach(groupItem => {
+            intComponent(groupItem)
+          })
+        } else {
+          intComponent(e as CreateComponentType)
         }
       })
       show.value = true