Ver código fonte

编辑器-导航:新增分组时不弹窗,直接新增并进入重命名状态。

任一存 2 anos atrás
pai
commit
2578304ecb

+ 6 - 1
packages/qjkankan-editor/src/components/sceneGroupInEditor.vue

@@ -93,6 +93,7 @@
         >
           <component
             :is="'SceneGroup'"
+            ref="scene-group"
             v-if="!item.type"
             :groupNode="item"
             :level="level + 1"
@@ -247,7 +248,11 @@ export default {
       this.isRenaming = true
       this.newName = this.groupNode.name
       this.$nextTick(() => {
-        this.$refs['input-for-rename'].focus()
+        // this.$refs['input-for-rename'].focus()
+        this.$refs['input-for-rename'].select()
+        this.$refs['input-for-rename'].scrollIntoView({
+          behavior: 'smooth',
+        })
       })
     },
     onInputNewNameComplete() {

+ 43 - 71
packages/qjkankan-editor/src/views/navigation/groupSettings.vue

@@ -18,6 +18,7 @@
         :key=item.id
       >
         <SceneGroupInEditor
+          ref="scene-group"
           :groupNode="item"
           :level="1"
           @addGroup="onRequestForAddGroupLevel2"
@@ -29,39 +30,6 @@
         <InsertPositionTip position-debug="0" :index="index + 1"></InsertPositionTip>
       </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.trim="newGroupName"
-            maxlength="15"
-            @keydown.enter="newGroupName && onConfirmAddingGroup()"
-          >
-        </div>
-
-        <div class="ui-message-footer">
-          <button class="ui-button deepcancel" @click="addGroupLevel = 0">
-            取消
-          </button>
-          <button
-            class="ui-button submit"
-            :class="{disable: !newGroupName}"
-            @click="onConfirmAddingGroup"
-          >
-            确定
-          </button>
-        </div>
-      </div>
-    </popup>
   </div>
 </template>
 
@@ -69,13 +37,11 @@
 import SceneGroupInEditor from "@/components/sceneGroupInEditor.vue";
 import { mapGetters } from "vuex";
 import { deepClone } from "@/utils/other.js";
-import Popup from "@/components/shared/popup/index.vue";
 import InsertPositionTip from "@/components/insertPositionTipInEditor.vue";
 
 export default {
   components: {
     SceneGroupInEditor,
-    Popup,
     InsertPositionTip,
   },
   computed: {
@@ -86,51 +52,57 @@ export default {
   },
   data() {
     return {
-      addGroupLevel: 0, // 0: 没有在新增分组;1:在新增一级分组;2:在新增二级分组
-      newGroupName: '',
-      parentGroupId: '',
     };
   },
   watch: {
   },
   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({
-          id: newGroupLevel2Id,
-          name: '默认二级分组',
-        })
-      } else if (this.addGroupLevel === 2) {
-        let id = 'c_' + this.$randomWord(true, 8, 8)
-        let parent = this.info.catalogRoot.find((item) => {
-          return item.id === this.parentGroupId
-        })
-        parent.children.push(id);
-        const newGroupLevel2 = {
-          id,
-          name: this.newGroupName,
-        }
-        this.info.catalogs.push(newGroupLevel2);
+      const newGroupLevel1Id = 'r_' + this.$randomWord(true, 8, 8)
+      const newGroupLevel2Id = 'c_' + this.$randomWord(true, 8, 8)
+
+      const newGroupLevel1 = {
+        id: newGroupLevel1Id,
+        name: '一级分组',
+        children: [newGroupLevel2Id],
       }
-      this.$msg.success("操作成功")
-      this.newGroupName = ''
-      this.parentGroupId = ''
-      this.addGroupLevel = 0
+      this.info.catalogRoot.push(newGroupLevel1)
+      this.info.catalogs.push({
+        id: newGroupLevel2Id,
+        name: '默认二级分组',
+      })
+
+      this.$nextTick(() => {
+        const newGroupComp = this.$refs['scene-group'].find((item) => {
+          return item.groupNode.id === newGroupLevel1Id
+        })
+        newGroupComp.onClickForRename()
+      })
     },
     onRequestForAddGroupLevel2(parentGroupId) {
-      this.addGroupLevel = 2
-      this.parentGroupId = parentGroupId
+      let id = 'c_' + this.$randomWord(true, 8, 8)
+      let parent = this.info.catalogRoot.find((item) => {
+        return item.id === parentGroupId
+      })
+      parent.children.push(id);
+      const newGroupLevel2 = {
+        id,
+        name: '二级分组',
+      }
+      this.info.catalogs.push(newGroupLevel2);
+
+      this.$nextTick(() => {
+        const parentGroupComp = this.$refs['scene-group'].find((item) => {
+          return item.groupNode.id === parentGroupId
+        })
+        parentGroupComp.isExpanded = true
+        this.$nextTick(() => {
+          const newGroupComp = parentGroupComp.$refs['scene-group'].find((item) => {
+            return item.groupNode.id === id
+          })
+          newGroupComp.onClickForRename()
+        })
+      })
     },
     onRenameScene(sceneId, newName) {
       const renameTarget = this.info.scenes.find((item) => {