feat: 合并多选功能，解决冲突，升级版本到2.0.4

src/views/chart/hooks/useSync.hook.ts

@@ -6,7 +6,6 @@ import { EditCanvasTypeEnum, ChartEditStoreEnum, ProjectInfoEnum, ChartEditStora
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 import { useSystemStore } from '@/store/modules/systemStore/systemStore'
 import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
-import { CreateComponentType } from '@/packages/index.d'
 import { saveInterval } from '@/settings/designSetting'
 import throttle from 'lodash/throttle'
 // 接口状态
@@ -15,6 +14,8 @@ import { ResultEnum } from '@/enums/httpEnum'
 import { saveProjectApi, fetchProjectApi, uploadFile, updateProjectApi } from '@/api/path'
 // 画布枚举
 import { SyncEnum } from '@/enums/editPageEnum'
+import { CreateComponentType, CreateComponentGroupType, ConfigType } from '@/packages/index.d'
+import { PublicGroupConfigClass } from '@/packages/public/publicConfig'
 
 // 请求处理
 export const useSync = () => {
@@ -25,11 +26,11 @@ export const useSync = () => {
   /**
    * * 组件动态注册
    * @param projectData 项目数据
-   * @param isSplace 是否替换数据
-   * @returns 
+   * @param isReplace 是否替换数据
+   * @returns
    */
-  const updateComponent = async (projectData: ChartEditStorage, isSplace = false) => {
-    if (isSplace) {
+  const updateComponent = async (projectData: ChartEditStorage, isReplace = false, changeId = false) => {
+    if (isReplace) {
       // 清除列表
       chartEditStore.componentList = []
       // 清除历史记录
@@ -37,16 +38,20 @@ export const useSync = () => {
       chartHistoryStore.clearForwardStack()
     }
     // 列表组件注册
-    projectData.componentList.forEach(async (e: CreateComponentType) => {
-      if (!window['$vue'].component(e.chartConfig.chartKey)) {
-        window['$vue'].component(
-          e.chartConfig.chartKey,
-          fetchChartComponent(e.chartConfig)
-        )
-        window['$vue'].component(
-          e.chartConfig.conKey,
-          fetchConfigComponent(e.chartConfig)
-        )
+    projectData.componentList.forEach(async (e: CreateComponentType | CreateComponentGroupType) => {
+      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)
       }
     })
     // 数据赋值
@@ -54,20 +59,60 @@ export const useSync = () => {
       // 组件
       if (key === ChartEditStoreEnum.COMPONENT_LIST) {
         for (const comItem of projectData[key]) {
-          // 补充 class 上的方法
-          let newComponent: CreateComponentType = await createComponent(
-            comItem.chartConfig
-          )
-          chartEditStore.addComponentList(
-            Object.assign(newComponent, {...comItem, id: getUUID()}),
-            false,
-            true
-          )
+          // 重新创建是为了处理类种方法消失的问题
+          const create = async (
+            _componentInstance: CreateComponentType,
+            callBack?: (componentInstance: CreateComponentType) => void
+          ) => {
+            // 补充 class 上的方法
+            let newComponent: CreateComponentType = await createComponent(_componentInstance.chartConfig)
+            if (callBack) {
+              if (changeId) {
+                callBack(Object.assign(newComponent, { ..._componentInstance, id: getUUID() }))
+              } else {
+                callBack(Object.assign(newComponent))
+              }
+            } else {
+              if (changeId) {
+                chartEditStore.addComponentList(
+                  Object.assign(newComponent, { ..._componentInstance, id: getUUID() }),
+                  false,
+                  true
+                )
+              } else {
+                chartEditStore.addComponentList(Object.assign(newComponent), false, true)
+              }
+            }
+          }
+
+          if (comItem.isGroup) {
+            // 创建分组
+            let groupClass = new PublicGroupConfigClass()
+            if (changeId) {
+              groupClass = Object.assign(groupClass, { ...comItem, id: getUUID() })
+            } else {
+              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 {
         // 非组件(顺便排除脏数据)
         if (key !== 'editCanvasConfig' && key !== 'requestGlobalConfig') return
-        Object.assign((chartEditStore as any)[key], projectData[key])
+        Object.assign(chartEditStore[key], projectData[key])
       }
     }
   }
@@ -187,4 +232,4 @@ export const useSync = () => {
     dataSyncUpdate,
     intervalDataSyncUpdate
   }
-}
+}