feat: 处理分组与其它单组件/分组之间的成组

src/store/modules/chartEditStore/chartEditStore.ts

@@ -223,27 +223,14 @@ export const useChartEditStore = defineStore({
       if (x) this.mousePosition.x = x
       if (y) this.mousePosition.y = y
     },
-    // * 找到目标 id 数据下标位置（无则返回-1）
+    // * 找到目标 id 数据的下标位置，id可为父级或子集数组（无则返回-1）
     fetchTargetIndex(id?: string): number {
       const targetId = id || this.getTargetChart.selectId.length && this.getTargetChart.selectId[0] || undefined
       if (!targetId) {
         loadingFinish()
         return -1
       }
-      const index = this.componentList.findIndex(e => e.id === targetId)
-      if (index === -1) {
-        loadingError()
-      }
-      return index
-    },
-    // * 找到组数据的下标位置，id可为父级或子集数组（无则返回-1）
-    fetchTargetGroupIndex(id?: string): number {
-      const targetId = id || this.getTargetChart.selectId.length && this.getTargetChart.selectId[0] || undefined
-      if(!targetId) {
-        loadingFinish()
-        return -1
-      }
-      const targetIndex = this.fetchTargetIndex(targetId)
+      const targetIndex = this.componentList.findIndex(e => e.id === targetId)
 
       // 当前
       if (targetIndex !== -1) {
@@ -280,10 +267,10 @@ export const useChartEditStore = defineStore({
       this.componentList.push(chartConfig)
     },
     // * 删除单个组件
-    removeComponentList(isHistory = true): void {
+    removeComponentList(id?:string, isHistory = true): void {
       try {
         loadingStart()
-        const index  = this.fetchTargetIndex()
+        const index  = this.fetchTargetIndex(id)
         if (index !== -1) {
           isHistory ? chartHistoryStore.createDeleteHistory(this.getComponentList[index]) : undefined
           this.componentList.splice(index, 1)
@@ -454,7 +441,7 @@ export const useChartEditStore = defineStore({
             // 剪切需删除原数据
             if (isCut) {
               this.setTargetSelectChart(e.id)
-              this.removeComponentList(true)
+              this.removeComponentList(undefined, true)
             }
           })
           if (isCut) this.setRecordChart(undefined)
@@ -492,7 +479,7 @@ export const useChartEditStore = defineStore({
           this.addComponentList(historyData)
           return  
         }
-        this.removeComponentList(false)
+        this.removeComponentList(undefined, false)
         return
       }
 
@@ -595,7 +582,8 @@ export const useChartEditStore = defineStore({
     // * 创建分组
     setGroup() {
       try {
-        if(this.getTargetChart.selectId.length < 2) return 
+        const selectIds = this.getTargetChart.selectId
+        if (selectIds.length < 2) return 
 
         loadingStart()
         const groupClass = new PublicGroupConfigClass()
@@ -607,7 +595,23 @@ export const useChartEditStore = defineStore({
           b: 0
         }
         const targetList: CreateComponentType[] = []
-        this.getTargetChart.selectId.forEach((id: string) => {
+
+        // 若目标中有数组则先解组
+        const newSelectIds: string[] = []
+        selectIds.forEach((id: string) => {
+          const targetIndex = this.fetchTargetIndex(id)
+          if (targetIndex !== -1 && this.getComponentList[targetIndex].isGroup) {
+            this.setUnGroup([id], (e: CreateComponentType[]) => {
+              e.forEach(e => {
+                this.addComponentList(e)
+                newSelectIds.push(e.id)
+              })
+            }, false)
+          } else {
+            newSelectIds.push(id)
+          }
+        })
+        newSelectIds.forEach((id: string) => {
           // 获取目标数据并从 list 中移除 (成组后不可再次成组, 断言处理)
           const item = this.componentList.splice(this.fetchTargetIndex(id), 1)[0] as CreateComponentType
           const { x, y, w, h } = item.attr
@@ -642,14 +646,15 @@ export const useChartEditStore = defineStore({
 
         loadingFinish()
       } catch (error) {
+        console.log(error)
         window['$message'].error('创建分组失败，请联系管理员！')
         loadingFinish()
       }
     },
     // * 解除分组
-    setUnGroup() {
+    setUnGroup(ids?:string[] , callBack?:(e: CreateComponentType[]) => void, isHistory = true) {
       try {
-        const selectGroupIdArr = this.getTargetChart.selectId
+        const selectGroupIdArr = ids || this.getTargetChart.selectId
         if (selectGroupIdArr.length !== 1) return
         loadingStart()
 
@@ -662,14 +667,20 @@ export const useChartEditStore = defineStore({
           targetGroup.groupList.forEach(item => {
             item.attr.x = item.attr.x + targetGroup.attr.x
             item.attr.y = item.attr.y + targetGroup.attr.y
+            if (!callBack) {
               this.addComponentList(item)
+            }
           })
           this.setTargetSelectChart(targetGroup.id)
           // 删除分组
-          this.removeComponentList(false)
+          this.removeComponentList(targetGroup.id, false)
+
+          if (callBack) {
+            callBack(targetGroup.groupList) 
+          }
         }
 
-        const targetIndex = this.fetchTargetGroupIndex(selectGroupIdArr[0])
+        const targetIndex = this.fetchTargetIndex(selectGroupIdArr[0])
         // 判断目标是否为分组父级
         if (targetIndex !== -1) {
           unGroup(targetIndex)