编辑器-导航-删除分组功能实现

src/components/sceneGroupInEditor.vue

@@ -68,6 +68,7 @@
             :level="level + 1"
             @renameScene="onRenameScene"
             @deleteScene="onDeleteScene"
+            @deleteGroup="onInnerGroupConfirmDelete"
           />
           <SceneInGroupInEditor
             v-else
@@ -165,9 +166,13 @@ export default {
       }, 0);
     },
     onConfirmDelete() {
-      // this.$emit('delete', this.sceneInfo.id)
+      this.$emit('deleteGroup', this.groupNode.id, this.level)
       this.isConfirmingDeletion = false
     },
+    onInnerGroupConfirmDelete(...params) {
+      console.log('jlkjljlkj');
+      this.$emit('deleteGroup', ...params)
+    }
   },
   mounted() {
     this.$bus.on('scene-group-expanded', this.onOtherSceneGroupExpanded)

src/views/navigation/groupSettings.vue

@@ -24,6 +24,7 @@
         :level="1"
         @renameScene="onRenameScene"
         @deleteScene="onDeleteScene"
+        @deleteGroup="onDeleteGroup"
       />
 
           <div class="pano-con">
@@ -147,6 +148,7 @@ import browser from "@/utils/browser";
 import draggable from "vuedraggable";
 import SceneGroupInEditor from "@/components/sceneGroupInEditor.vue";
 import { mapGetters } from "vuex";
+import { deepClone } from "@/utils/other.js";
 
 export default {
   components: {
@@ -183,8 +185,7 @@ export default {
       loadList: true,
     };
   },
-  watch: {
-    "info.scenes": {
+  watch: {    "info.scenes": {
       deep: true,
       handler: function (newVal) {
         let arr = newVal.filter((item) => {
@@ -252,7 +253,6 @@ export default {
       },
     },
   },
-
   methods: {
     onRenameScene(sceneId, newName) {
       const renameTarget = this.info.scenes.find((item) => {
@@ -268,7 +268,85 @@ export default {
       this.delFirstScene()
       this.$msg.success("删除成功")
     },
-    
+    onDeleteGroup(groupId, groupLevel) {
+      const deleteGroupLevel2 = (groupId) => {
+        // 删除所属一级分组中的children中元素
+        // 因为用户无法看到、操作默认二级分组，所以这里要删除的group不可能是默认二级分组
+        let targetGroupIdxLevel2 = null
+        let belongGroupIdxLevel1 = null
+        for (const [groupIdxLevel1, groupLevel1] of this.info.catalogRoot.entries()) {
+          for (const [groupIdxLevel2, childId] of groupLevel1.children.entries()) {
+            if (childId === groupId) {
+              targetGroupIdxLevel2 = groupIdxLevel2
+              break
+            }
+          }
+          if (targetGroupIdxLevel2 !== null) {
+            belongGroupIdxLevel1 = groupIdxLevel1
+            break
+          }
+        }
+        if (targetGroupIdxLevel2 === null || belongGroupIdxLevel1 === null) {
+          console.log(targetGroupIdxLevel2, belongGroupIdxLevel1);
+          throw('一级分组列表中没有找到要删除的二级分组！')
+        }
+        this.info.catalogRoot[belongGroupIdxLevel1].children.splice(targetGroupIdxLevel2, 1)
+        
+        // 删除二级分组列表中元素
+        const targetIdx = this.info.catalogs.findIndex((item) => {
+          return item.id === groupId
+        })
+        if (targetIdx < 0) {
+          throw('二级分组列表中没有找到要删除的二级分组！')
+        }
+        this.info.catalogs.splice(targetIdx, 1)
+
+        // 删除场景列表中属于要删除的二级分组的那些场景
+        this.info.scenes = this.info.scenes.filter((item) => {
+          return item.category !== groupId
+        })
+        return
+      }
+
+      const backup = deepClone(this.info)
+      try {
+        if (groupLevel === 1) {
+          if (this.info.catalogRoot.length === 1) {
+            return this.$alert({
+              content: "请至少保留一个分组",
+              ok: () => {
+                return
+              },
+            })
+          }
+
+          const targetGroupIdx = this.info.catalogRoot.findIndex((groupLevel1) => {
+            return groupLevel1.id === groupId
+          })
+          if (targetGroupIdx < 0) {
+            throw('没有找到要删除的一级分组！')
+          }
+          // 删除该一级分组下的所有二级分组及属于这些二级分组的场景
+          for (const childId of this.info.catalogRoot[targetGroupIdx].children) {
+            deleteGroupLevel2(childId)
+          }
+          // 删除该一级分组
+          this.info.catalogRoot.splice(targetGroupIdx, 1)
+        } else if (groupLevel === 2) {
+          deleteGroupLevel2(groupId)
+        } else {
+          throw('group level invalid!');
+        }
+        // 酌情清空初始场景设置
+        this.delFirstScene()
+        this.$msg.success("删除成功")
+      } catch(e) {
+        console.error(e);
+        this.$msg.error('删除失败')
+        this.$store.commit("SetInfo", backup)
+      }
+    },
+
     hadnleAddGroup() {
       this.$emit("addGroup", { type: 1, oper: "add", item: {} });
     },