feat: merge multi-tab

Author: sendya

src/components/MultiTab/MultiTab.vue

@@ -0,0 +1,56 @@
+<template>
+  <div style="margin: -23px -24px 24px -24px">
+    <a-tabs
+      hideAdd
+      v-model="activeKey"
+      type="editable-card"
+      :tabBarStyle="{ background: '#FFF', margin: 0, paddingLeft: '16px', paddingTop: '1px' }"
+      @edit="onEdit"
+    >
+      <a-tab-pane v-for="page in pages" :style="{ height: 0 }" :tab="page.meta.title" :key="page.fullPath" :closable="pages.length > 1">
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MultiTab',
+  data () {
+    return {
+      fullPathList: [],
+      pages: [],
+      activeKey: '',
+      newTabIndex: 0
+    }
+  },
+  created () {
+    this.pages.push(this.$route)
+    this.fullPathList.push(this.$route.fullPath)
+  },
+  methods: {
+    onEdit (targetKey, action) {
+      this[action](targetKey)
+    },
+    remove (targetKey) {
+      if (this.pages.length === 1) {
+        return
+      }
+      this.pages = this.pages.filter(page => page.fullPath !== targetKey)
+      this.fullPathList = this.fullPathList.filter(path => path !== targetKey)
+    },
+  },
+  watch: {
+    '$route': function (newVal) {
+      this.activeKey = newVal.fullPath
+      if (this.fullPathList.indexOf(newVal.fullPath) < 0) {
+        this.fullPathList.push(newVal.fullPath)
+        this.pages.push(newVal)
+      }
+    },
+    activeKey: function (newPathKey) {
+      this.$router.push({ path: newPathKey })
+    }
+  }
+}
+</script>

src/components/MultiTab/index.js

@@ -0,0 +1,2 @@
+import MultiTab from './MultiTab'
+export default MultiTab

src/components/layouts/BasicLayout.vue

@@ -1,49 +1,52 @@
-<template>
-  <global-layout>
-    <transition name="page-transition">
-      <route-view />
-    </transition>
-  </global-layout>
-</template>
-
-<script>
-import RouteView from '@/components/layouts/RouteView'
-import GlobalLayout from '@/components/page/GlobalLayout'
-
-export default {
-  name: 'BasicLayout',
-  components: {
-    RouteView,
-    GlobalLayout
-  },
-  data () {
-    return {}
-  }
-}
-</script>
-
-<style lang="less">
-
-  /*
- * The following styles are auto-applied to elements with
- * transition="page-transition" when their visibility is toggled
- * by Vue.js.
- *
- * You can easily play with the page transition by editing
- * these styles.
- */
-
-  .page-transition-enter {
-    opacity: 0;
-  }
-
-  .page-transition-leave-active {
-    opacity: 0;
-  }
-
-  .page-transition-enter .page-transition-container,
-  .page-transition-leave-active .page-transition-container {
-    -webkit-transform: scale(1.1);
-    transform: scale(1.1);
-  }
+<template>
+  <global-layout>
+    <multi-tab v-if="$store.getters.multiTab"></multi-tab>
+    <transition name="page-transition">
+      <route-view />
+    </transition>
+  </global-layout>
+</template>
+
+<script>
+import RouteView from '@/components/layouts/RouteView'
+import MultiTab from '@/components/MultiTab'
+import GlobalLayout from '@/components/page/GlobalLayout'
+
+export default {
+  name: 'BasicLayout',
+  components: {
+    RouteView,
+    MultiTab,
+    GlobalLayout
+  },
+  data () {
+    return {}
+  }
+}
+</script>
+
+<style lang="less">
+
+  /*
+ * The following styles are auto-applied to elements with
+ * transition="page-transition" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the page transition by editing
+ * these styles.
+ */
+
+  .page-transition-enter {
+    opacity: 0;
+  }
+
+  .page-transition-leave-active {
+    opacity: 0;
+  }
+
+  .page-transition-enter .page-transition-container,
+  .page-transition-leave-active .page-transition-container {
+    -webkit-transform: scale(1.1);
+    transform: scale(1.1);
+  }
 </style>