tab drag

src/layout/header-aside/components/tabs/index.vue

@@ -11,7 +11,7 @@
             @rowClick="contextmenuClick"/>
         </d2-contextmenu>
         <el-tabs
-          class="d2-multiple-page-control"
+          class="d2-multiple-page-control d2-multiple-page-sort"
           :value="current"
           type="card"
           :closable="true"
@@ -60,6 +60,7 @@
 
 <script>
 import { mapState, mapActions } from 'vuex'
+import Sortable from 'sortablejs'
 export default {
   components: {
     D2Contextmenu: () => import('../contextmenu'),
@@ -94,7 +95,8 @@ export default {
       'closeLeft',
       'closeRight',
       'closeOther',
-      'closeAll'
+      'closeAll',
+      'openedSort'
     ]),
     /**
      * @description 右键菜单功能点击
@@ -172,6 +174,15 @@ export default {
         })
       }
     }
+  },
+  mounted () {
+    const el = document.querySelectorAll('.d2-multiple-page-sort .el-tabs__nav')[0]
+    Sortable.create(el, {
+      onEnd: (evt) => {
+        const { oldIndex, newIndex } = evt
+        this.openedSort({ oldIndex, newIndex })
+      }
+    })
   }
 }
 </script>

src/layout/header-aside/layout.vue

@@ -15,10 +15,10 @@
         }"
         flex-box="0"
         flex>
-        <div class="logo-group" :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}" flex-box="0">
+        <router-link to="/index" class="logo-group" :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}" flex-box="0">
           <img v-if="asideCollapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
           <img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`">
-        </div>
+        </router-link>
         <div class="toggle-aside-btn" @click="handleToggleAside" flex-box="0">
           <d2-icon name="bars"/>
         </div>