fix: 处理分组预览和动态引入的问题

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
   }
-}
+}