feat: 新增多选删除功能

src/store/modules/chartEditStore/chartEditStore.ts

@@ -139,7 +139,7 @@ export const useChartEditStore = defineStore({
     getEditCanvasConfig(): EditCanvasConfigType {
       return this.editCanvasConfig
     },
-    getTargetChart():TargetChartType {
+    getTargetChart(): TargetChartType {
       return this.targetChart
     },
     getRecordChart(): RecordChartType | undefined {
@@ -249,6 +249,14 @@ export const useChartEditStore = defineStore({
       }
       return -1
     },
+    // * 统一格式化处理入参 id
+    idPreFormat(id?: string | string[]) {
+      const idArr = []
+      if (!id) idArr.push(...this.getTargetChart.selectId)
+      if (isString(id)) idArr.push(id)
+      if (isArray(id)) idArr.push(...id)
+      return idArr
+    },
     /**
      * * 新增组件列表
      * @param chartConfig 新图表实例
@@ -266,17 +274,21 @@ export const useChartEditStore = defineStore({
       }
       this.componentList.push(chartConfig)
     },
-    // * 删除单个组件
+    // * 删除组件
-    removeComponentList(id?:string, isHistory = true): void {
+    removeComponentList(id?:string | string[], isHistory = true): void {
       try {
         loadingStart()
-        const index  = this.fetchTargetIndex(id)
+        const idArr = this.idPreFormat(id)
-        if (index !== -1) {
+        // 遍历所有对象
-          isHistory ? chartHistoryStore.createDeleteHistory(this.getComponentList[index]) : undefined
+        idArr.forEach(ids => {
-          this.componentList.splice(index, 1)
+          const index  = this.fetchTargetIndex(ids)
-          loadingFinish()
+          if (index !== -1) {
-          return
+            isHistory ? chartHistoryStore.createDeleteHistory(this.getComponentList[index]) : undefined
-        }
+            this.componentList.splice(index, 1)
+          }
+        })
+        loadingFinish()
+        return
       } catch(value) {
         loadingError()
       }
@@ -299,6 +311,9 @@ export const useChartEditStore = defineStore({
     // * 移动组件列表层级位置到两端
     setBothEnds(isEnd = false, isHistory = true): void {
       try {
+        // 暂不支持多选
+        if (this.getTargetChart.selectId.length > 1) return
+
         loadingStart()
         const length = this.getComponentList.length
         if (length < 2) {
@@ -351,6 +366,9 @@ export const useChartEditStore = defineStore({
     // * 上移/下移互换图表位置
     wrap(isDown = false, isHistory = true) {
       try {
+        // 暂不支持多选
+        if (this.getTargetChart.selectId.length > 1) return
+
         loadingStart()
         const length = this.getComponentList.length
         if (length < 2) {
@@ -397,6 +415,9 @@ export const useChartEditStore = defineStore({
     // * 复制
     setCopy(isCut = false) {
       try {
+        // 暂不支持多选
+        if (this.getTargetChart.selectId.length > 1) return
+
         loadingStart()
         const index:number  = this.fetchTargetIndex()
         if (index !== -1) {

src/views/chart/ContentEdit/components/EditGroup/index.vue

@@ -88,6 +88,12 @@ const optionsHandle = (
   allList: MenuOptionsItemType[],
   targetInstance: CreateComponentType
 ) => {
+
+  // 多选
+  const moreMenuEnums = [MenuEnum.GROUP, MenuEnum.DELETE]
+  // 单选
+  const singleMenuEnums = [MenuEnum.UN_GROUP]
+
   const filter = (menulist: MenuEnum[]) => {
     const list: MenuOptionsItemType[] = []
     allList.forEach(item => {
@@ -100,9 +106,9 @@ const optionsHandle = (
 
   // 多选处理
   if (chartEditStore.getTargetChart.selectId.length > 1) {
-    return filter([MenuEnum.GROUP])
+    return filter(moreMenuEnums)
   } else {
-    return [...filter([MenuEnum.UN_GROUP]), divider(), ...targetList]
+    return [...filter(singleMenuEnums), divider(), ...targetList]
   }
 }
 

src/views/chart/ContentEdit/index.vue

@@ -107,18 +107,24 @@ const optionsHandle = (
   allList: MenuOptionsItemType[],
   targetInstance: CreateComponentType
 ) => {
+  // 多选
+  const moreMenuEnums = [MenuEnum.GROUP, MenuEnum.DELETE]
+  // 单选
+  const singleMenuEnums = targetList
+
   // 多选处理
   if (chartEditStore.getTargetChart.selectId.length > 1) {
     const list: MenuOptionsItemType[] = []
-    targetList.forEach(item => {
+    
+    allList.forEach(item => {
       // 成组
-      if (item.key === MenuEnum.GROUP) {
+      if (moreMenuEnums.includes(item.key as MenuEnum)) {
         list.push(item)
       }
     })
     return list
   }
-  return targetList
+  return singleMenuEnums
 }
 
 // 主题色