fix: 新增多选的全部列表添加, 结构设计

src/packages/index.d.ts

@@ -60,9 +60,8 @@ export enum FilterEnum {
 }
 
 // 组件实例类
-export interface PublicConfigType extends requestConfig {
+export interface PublicConfigType {
   id: string
-  rename?: string
   attr: { x: number; y: number; w: number; h: number; zIndex: number }
   styles: {
     [FilterEnum.OPACITY]: number;
@@ -84,12 +83,20 @@ export interface PublicConfigType extends requestConfig {
   setPosition: Function
 }
 
-export interface CreateComponentType extends PublicConfigType {
+export interface CreateComponentType extends PublicConfigType, requestConfig {
   key: string
   chartConfig: ConfigType
   option: GlobalThemeJsonType
 }
 
+// 组件成组实例类 (部分属性用不到设置为 any)
+export interface CreateComponentGroupType extends PublicConfigType {
+  chartConfig: {
+    categoryName: string
+  }
+  groupList: Array<CreateComponentType>
+}
+
 // 获取组件实例类中某个key对应value类型的方法
 export type PickCreateComponentType<T extends keyof CreateComponentType> = Pick<CreateComponentType, T>[T]
 

src/packages/public/publicConfig.ts

@@ -1,5 +1,5 @@
 import { getUUID } from '@/utils'
-import { PublicConfigType } from '@/packages/index.d'
+import { PublicConfigType, CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 import {
   RequestHttpEnum,
@@ -10,6 +10,7 @@ import {
 } from '@/enums/httpEnum'
 import { chartInitConfig } from '@/settings/designSetting'
 
+// 请求基础属性
 const requestConfig: RequestConfigType = {
   requestDataType: RequestDataTypeEnum.STATIC,
   requestHttpType: RequestHttpEnum.GET,
@@ -33,10 +34,9 @@ const requestConfig: RequestConfigType = {
   }
 }
 
+// 单实例类
 export class publicConfig implements PublicConfigType {
   public id = getUUID()
-  // 重命名
-  public rename = undefined
   // 基本信息
   public attr = { ...chartInitConfig, zIndex: -1 }
   // 基本样式
@@ -75,3 +75,45 @@ export class publicConfig implements PublicConfigType {
     this.attr.y = y
   }
 }
+
+// 成组类 (部分属性不需要, 不继承 publicConfig)
+export class PublicGroupConfigClass implements CreateComponentGroupType {
+  public id = getUUID()
+  chartConfig = {
+    categoryName: '分组'
+  }
+  // 基本信息
+  public attr = { ...chartInitConfig, zIndex: -1 }
+  // 基本样式
+  public styles = {
+    // 色相
+    hueRotate: 0,
+    // 饱和度
+    saturate: 1,
+    // 对比度
+    contrast: 1,
+    // 亮度
+    brightness: 1,
+    // 透明
+    opacity: 1,
+
+    // 旋转
+    rotateZ: 0,
+    rotateX: 0,
+    rotateY: 0,
+
+    // 倾斜
+    skewX: 0,
+    skewY: 0,
+
+    // 动画
+    animations: []
+  }
+  // 组成员列表
+  public groupList: Array<CreateComponentType> = []
+  // 设置坐标
+  public setPosition(x: number, y: number): void {
+    this.attr.x = x
+    this.attr.y = y
+  }
+}

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -1,4 +1,4 @@
-import { CreateComponentType, FilterEnum } from '@/packages/index.d'
+import { CreateComponentType, CreateComponentGroupType, FilterEnum } from '@/packages/index.d'
 import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
 import {
   RequestHttpEnum,
@@ -117,7 +117,7 @@ export type TargetChartType = {
 
 // 数据记录
 export type RecordChartType = {
-  charts: CreateComponentType | CreateComponentType[]
+  charts: CreateComponentType | CreateComponentType[] | CreateComponentGroupType
   type: HistoryActionTypeEnum.CUT | HistoryActionTypeEnum.COPY
 }
 
@@ -180,11 +180,12 @@ export interface ChartEditStoreType {
   [ChartEditStoreEnum.TARGET_CHART]: TargetChartType
   [ChartEditStoreEnum.RECORD_CHART]?: RecordChartType
   [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType
-  [ChartEditStoreEnum.COMPONENT_LIST]: CreateComponentType[]
+  [ChartEditStoreEnum.COMPONENT_LIST]: Array<CreateComponentType | CreateComponentGroupType>
 }
 
+// 存储数据类型
 export interface ChartEditStorage {
   [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType
   [ChartEditStoreEnum.REQUEST_GLOBAL_CONFIG]: RequestGlobalConfigType
-  [ChartEditStoreEnum.COMPONENT_LIST]: CreateComponentType[]
+  [ChartEditStoreEnum.COMPONENT_LIST]: Array<CreateComponentType | CreateComponentGroupType>
 }

src/store/modules/chartEditStore/chartEditStore.ts

@@ -1,10 +1,10 @@
 import { defineStore } from 'pinia'
-import { CreateComponentType } from '@/packages/index.d'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+import { PublicGroupConfigClass } from '@/packages/public/publicConfig'
 import debounce from 'lodash/debounce'
 import cloneDeep from 'lodash/cloneDeep'
 import { defaultTheme, globalThemeJson } from '@/settings/chartThemes/index'
 import { requestInterval, previewScaleType, requestIntervalUnit } from '@/settings/designSetting'
-import { RequestBodyEnum } from '@/enums/httpEnum'
 // 记录记录
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 // 全局设置
@@ -148,7 +148,7 @@ export const useChartEditStore = defineStore({
     getRequestGlobalConfig(): RequestGlobalConfigType {
       return this.requestGlobalConfig
     },
-    getComponentList(): CreateComponentType[] {
+    getComponentList(): Array<CreateComponentType | CreateComponentGroupType> {
       return this.componentList
     },
     // 获取需要存储的数据项
@@ -243,7 +243,7 @@ export const useChartEditStore = defineStore({
      * @param isHistory 是否进行记录
      * @returns
      */
-    addComponentList(chartConfig: CreateComponentType, isHead = false, isHistory = false): void {
+    addComponentList(chartConfig: CreateComponentType | CreateComponentGroupType, isHead = false, isHistory = false): void {
       if (isHistory) {
         chartHistoryStore.createAddHistory(chartConfig)
       }
@@ -253,7 +253,7 @@ export const useChartEditStore = defineStore({
       }
       this.componentList.push(chartConfig)
     },
-    // * 删除组件列表
+    // * 删除单个组件
     removeComponentList(isHistory = true): void {
       try {
         loadingStart()
@@ -269,7 +269,7 @@ export const useChartEditStore = defineStore({
       }
     },
     // * 更新组件列表某一项的值
-    updateComponentList(index: number, newData: CreateComponentType) {
+    updateComponentList(index: number, newData: CreateComponentType | CreateComponentGroupType) {
       if (index < 1 && index > this.getComponentList.length) return
       this.componentList[index] = newData
     },
@@ -303,7 +303,7 @@ export const useChartEditStore = defineStore({
           }
 
           // 记录原有位置
-          const setIndex = (t:CreateComponentType, i:number) => {
+          const setIndex = (t:CreateComponentType | CreateComponentGroupType, i:number) => {
             const temp = cloneDeep(t)
             temp.attr.zIndex = i
             return temp
@@ -412,7 +412,7 @@ export const useChartEditStore = defineStore({
           loadingFinish()
           return
         }
-        const parseHandle = (e: CreateComponentType) => {
+        const parseHandle = (e: CreateComponentType | CreateComponentGroupType) => {
           e = cloneDeep(e)
           // 生成新 id
           e.id = getUUID()
@@ -565,6 +565,22 @@ export const useChartEditStore = defineStore({
           attr.x -= distance
           break;
       }
+    }, 
+    // * 创建分组
+    setGroup() {
+      const groupClass = new PublicGroupConfigClass()
+      this.getTargetChart.selectId.forEach((id: string) => {
+        // 获取目标数据并从 list 中移除 (成组后不可再次成组, 断言处理)
+        const item = this.componentList.splice(this.fetchTargetIndex(id), 1)[0] as CreateComponentType
+        groupClass.groupList.push(item)
+      })
+      this.addComponentList(groupClass)
+      // todo 输出
+      console.log(this.getComponentList)
+    },
+    // * 解除分组
+    setUnGroup() {
+
     },
     // ----------------
     // * 设置页面大小

src/store/modules/chartHistoryStore/chartHistoryStore.d.ts

@@ -1,4 +1,4 @@
-import { CreateComponentType } from '@/packages/index.d'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
 // 操作类型枚举
@@ -55,7 +55,7 @@ export interface HistoryItemType {
   [HistoryStackItemEnum.ID]: string | string[]
   [HistoryStackItemEnum.TARGET_TYPE]: HistoryTargetTypeEnum
   [HistoryStackItemEnum.ACTION_TYPE]: HistoryActionTypeEnum
-  [HistoryStackItemEnum.HISTORY_DATA]: CreateComponentType | EditCanvasType
+  [HistoryStackItemEnum.HISTORY_DATA]: CreateComponentType | CreateComponentGroupType | EditCanvasType
 }
 
 // 历史 Store 类型

src/store/modules/chartHistoryStore/chartHistoryStore.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { CreateComponentType } from '@/packages/index.d'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { loadingStart, loadingFinish, loadingError } from '@/utils'
 import { editHistoryMax } from '@/settings/designSetting'
@@ -35,7 +35,7 @@ export const useChartHistoryStore = defineStore({
      * @param targetType 对象类型（默认图表）
      */
     createStackItem(
-      item: CreateComponentType | EditCanvasType,
+      item: CreateComponentType | CreateComponentGroupType | EditCanvasType,
       actionType: HistoryActionTypeEnum,
       targetType: HistoryTargetTypeEnum = HistoryTargetTypeEnum.CHART
     ) {
@@ -148,7 +148,7 @@ export const useChartHistoryStore = defineStore({
       }
     },
     // * 新增组件记录
-    createAddHistory(item: CreateComponentType) {
+    createAddHistory(item: CreateComponentType | CreateComponentGroupType) {
       this.createStackItem(
         item,
         HistoryActionTypeEnum.ADD,
@@ -156,7 +156,7 @@ export const useChartHistoryStore = defineStore({
       )
     },
     // * 更新属性记录（大小、图表属性）
-    createUpdateHistory(item: CreateComponentType) {
+    createUpdateHistory(item: CreateComponentType | CreateComponentGroupType) {
       this.createStackItem(
         item,
         HistoryActionTypeEnum.UPDATE,
@@ -164,7 +164,7 @@ export const useChartHistoryStore = defineStore({
       )
     },
     // * 删除组件记录
-    createDeleteHistory(item: CreateComponentType) {
+    createDeleteHistory(item: CreateComponentType | CreateComponentGroupType) {
       this.createStackItem(
         item,
         HistoryActionTypeEnum.DELETE,
@@ -172,7 +172,7 @@ export const useChartHistoryStore = defineStore({
       )
     },
     // * 移动组件记录
-    createMoveHistory(item: CreateComponentType) {
+    createMoveHistory(item: CreateComponentType | CreateComponentGroupType) {
       this.createStackItem(
         item,
         HistoryActionTypeEnum.MOVE,
@@ -181,7 +181,7 @@ export const useChartHistoryStore = defineStore({
     },
     // * 改变层级组件记录
     createLayerHistory(
-      item: CreateComponentType,
+      item: CreateComponentType | CreateComponentGroupType,
       type:
         | HistoryActionTypeEnum.TOP
         | HistoryActionTypeEnum.DOWN
@@ -195,7 +195,7 @@ export const useChartHistoryStore = defineStore({
       )
     },
     // * 剪切组件记录
-    createPasteHistory(item: CreateComponentType) {
+    createPasteHistory(item: CreateComponentType | CreateComponentGroupType) {
       this.createStackItem(
         item,
         HistoryActionTypeEnum.CUT,

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue

@@ -15,7 +15,7 @@
       <template #action>
         <n-space justify="space-between">
           <div>
-            <n-text>「 {{ chartConfig.categoryName || rename }} 」</n-text>
+            <n-text>「 {{ chartConfig.categoryName }} 」</n-text>
             <n-text>—— </n-text>
             <n-tag type="primary" :bordered="false" style="border-radius: 5px"> {{ requestContentTypeObj[requestContentType] }} </n-tag>
           </div>
@@ -37,9 +37,8 @@ const emit = defineEmits(['update:modelShow'])
 
 const { targetData } = useTargetData()
 // 解构基础配置
-const { chartConfig, rename } = toRefs(targetData.value)
+const { chartConfig } = toRefs(targetData.value)
 const { requestContentType } = toRefs(targetData.value.request)
-
 const requestContentTypeObj = {
   [RequestContentTypeEnum.DEFAULT]: '普通请求',
   [RequestContentTypeEnum.SQL]: 'SQL 请求'

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

@@ -78,12 +78,12 @@ const defaultOptions: MenuOptionsItemType[] = [
 ]
 
 // * 默认多选组件选项
-const defaultMultiSelectionOptions: MenuOptionsItemType[] = [
+const defaultMultiSelectOptions: MenuOptionsItemType[] = [
   {
-    label: '成组',
+    label: '创建分组',
     key: MenuEnum.COPY,
     icon: renderIcon(Carbon3DSoftwareIcon),
-    fnHandle: chartEditStore.setCopy
+    fnHandle: chartEditStore.setGroup
   }
 ]
 
@@ -141,7 +141,7 @@ const handleContextMenu = (
 
   // * 多选默认选项
   if (chartEditStore.getTargetChart.selectId.length > 1) {
-    menuOptions.value = defaultMultiSelectionOptions
+    menuOptions.value = defaultMultiSelectOptions
   } else {
     // * 单选默认选项
     menuOptions.value = defaultOptions