编辑器-导航-新增一级分组功能

src/views/navigation/groupSettings.vue

@@ -9,7 +9,9 @@
         />
       </i>
     </div>
-    <button class="ui-button create-group-btn">
+    <button class="ui-button create-group-btn"
+      @click="onRequestForAddLevel1Group"
+    >
       <i class="iconfont icon-editor_add"></i>
       新增分组
     </button>
@@ -28,7 +30,7 @@
         @deleteGroup="onDeleteGroup"
       />
 
-          <div class="pano-con">
+      <div class="pano-con">
         <tabList
           :deviation="-35"
           :list="info.catalogRoot"
@@ -139,6 +141,38 @@
         </div>
       </div>
     </div>
+
+    <popup v-if="addGroupLevel" :canClose="false">
+      <div class="ui-message ui-message-confirm dark add-group-window">
+        <div class="ui-message-header">
+          <span>新增{{addGroupLevel === 1 ? '一' : addGroupLevel === 2 ? '二' : ''}}级分组</span>
+          <span @click="addGroupLevel = 0">
+            <i class="iconfont icon_close"></i>
+          </span>
+        </div>
+
+        <div class="ui-message-main">
+          <input
+            class="name-input"
+            placeholder="请输入分组名称，限15个字"
+            v-model="newGroupName"
+            maxlength="15"
+          >
+        </div>
+
+        <div class="ui-message-footer">
+          <button class="ui-button deepcancel" @click="addGroupLevel = 0">
+            取消
+          </button>
+          <button
+            class="ui-button submit"
+            @click="onConfirmAddingGroup"
+          >
+            确定
+          </button>
+        </div>
+      </div>
+    </popup>
   </div>
 </template>
 
@@ -150,6 +184,7 @@ import draggable from "vuedraggable";
 import SceneGroupInEditor from "@/components/sceneGroupInEditor.vue";
 import { mapGetters } from "vuex";
 import { deepClone } from "@/utils/other.js";
+import Popup from "@/components/shared/popup/index.vue";
 
 export default {
   components: {
@@ -157,6 +192,7 @@ export default {
     draggable,
     tabList,
     SceneGroupInEditor,
+    Popup,
   },
   computed: {
     ...mapGetters({
@@ -179,14 +215,14 @@ export default {
       tabtowActive: "",
       childTab: [],
       scenes: [],
-      interval: null,
       list: [],
-      isLongPolling: false,
-      oneLeft: 0,
-      loadList: true,
+
+      addGroupLevel: 0, // 0: 没有在新增分组；1：在新增一级分组；2：在新增二级分组
+      newGroupName: '',
     };
   },
-  watch: {    "info.scenes": {
+  watch: {
+    "info.scenes": {
       deep: true,
       handler: function (newVal) {
         let arr = newVal.filter((item) => {
@@ -255,6 +291,27 @@ export default {
     },
   },
   methods: {
+    onRequestForAddLevel1Group() {
+      this.newGroupName = ''
+      this.addGroupLevel = 1
+    },
+    onConfirmAddingGroup() {
+      if (this.addGroupLevel === 1) {
+        let newGroupLevel2Id = 'c_' + this.$randomWord(true, 8, 8)
+        const newGroupLevel1 = {
+          id: 'r_' + this.$randomWord(true, 8, 8),
+          name: this.newGroupName,
+          children: [newGroupLevel2Id],
+        }
+        this.info.catalogRoot.push(newGroupLevel1)
+        this.info.catalogs.push({
+          newGroupLevel2Id,
+          name: '默认二级分组',
+        })
+      }
+      this.$msg.success("操作成功")
+      this.addGroupLevel = 0
+    },
     onRenameScene(sceneId, newName) {
       const renameTarget = this.info.scenes.find((item) => {
         return item.id === sceneId
@@ -611,5 +668,24 @@ export default {
       }
     }
   }
+  
+  .ui-message {
+    > .ui-message-main {
+      > .name-input {
+        height: 36px;
+        background: #252526;
+        border-radius: 2px;
+        border: 1px solid #404040;
+        color: #fff;
+        font-size: 14px;
+        padding: 0 16px;
+        letter-spacing: 1px;
+        width: 100%;
+        &:focus {
+          border-color: #0076F6;
+        }
+      }
+    }
+  }
 }
 </style>