From c10ea64ba7b2d5509d686b8f9c214ee78efc3fe6 Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Thu, 6 Aug 2020 21:12:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20add=20the=20api=20of=20global=20closing?=
 =?UTF-8?q?=20page:=20$closePage(closeRoute,=20nextRoute);:star2:=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=EF=BC=9A=E5=A2=9E=E5=8A=A0=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD=E9=A1=B5=E9=9D=A2api:=20$closePage(closeRout?=
 =?UTF-8?q?e,=20nextRoute)=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/header/HeaderAvatar.vue |  8 +++-----
 src/layouts/tabs/TabsView.vue       | 18 ++++++++++++++++--
 src/plugins/index.js                |  6 ++++--
 src/plugins/tabs-page-plugin.js     | 14 ++++++++++++++
 4 files changed, 37 insertions(+), 9 deletions(-)
 create mode 100644 src/plugins/tabs-page-plugin.js

diff --git a/src/layouts/header/HeaderAvatar.vue b/src/layouts/header/HeaderAvatar.vue
index bea6eb0..fe8066f 100644
--- a/src/layouts/header/HeaderAvatar.vue
+++ b/src/layouts/header/HeaderAvatar.vue
@@ -14,11 +14,9 @@
         <span>设置</span>
       </a-menu-item>
       <a-menu-divider />
-      <a-menu-item>
-        <a @click="logout">
-          <a-icon style="margin-right: 8px;" type="poweroff" />
-          <span>退出登录</span>
-        </a>
+      <a-menu-item @click="logout">
+        <a-icon style="margin-right: 8px;" type="poweroff" />
+        <span>退出登录</span>
       </a-menu-item>
     </a-menu>
   </a-dropdown>
diff --git a/src/layouts/tabs/TabsView.vue b/src/layouts/tabs/TabsView.vue
index 939d2b9..5c3aa3a 100644
--- a/src/layouts/tabs/TabsView.vue
+++ b/src/layouts/tabs/TabsView.vue
@@ -61,11 +61,15 @@ export default {
     const route = this.$route
     this.pageList.push(route)
     this.activePage = route.fullPath
+    if (this.multiPage) {
+      window.addEventListener('page:close', this.closePageListener)
+    }
   },
   mounted () {
     this.correctPageMinHeight(-this.tabsOffset)
   },
   beforeDestroy() {
+    window.removeEventListener('page:close', this.closePageListener)
     this.correctPageMinHeight(this.tabsOffset)
   },
   watch: {
@@ -81,6 +85,9 @@ export default {
     'multiPage': function (newVal) {
       if (!newVal) {
         this.pageList = [this.$route]
+        window.removeEventListener('page:close', this.closePageListener)
+      } else {
+        window.addEventListener('page:close', this.closePageListener)
       }
     },
     tabsOffset(newVal, oldVal) {
@@ -95,7 +102,7 @@ export default {
     editPage (key, action) {
       this[action](key) // remove
     },
-    remove (key) {
+    remove (key, next) {
       if (this.pageList.length === 1) {
         return this.$message.warning(this.$t('warn'))
       }
@@ -103,7 +110,9 @@ export default {
       let pageRoute = this.pageList[index]
       this.clearCache(pageRoute)
       this.pageList = this.pageList.filter(item => item.fullPath !== key)
-      if (key === this.activePage) {
+      if (next) {
+        this.$router.push(next)
+      } else if (key === this.activePage) {
         index = index >= this.pageList.length ? this.pageList.length - 1 : index
         this.activePage = this.pageList[index].fullPath
         this.$router.push(this.activePage)
@@ -180,6 +189,11 @@ export default {
     pageName(page) {
       return this.$t(getI18nKey(page.matched[page.matched.length - 1].path))
     },
+    closePageListener(event) {
+      const {closeRoute, nextRoute} = event.detail
+      const closePath = typeof closeRoute === 'string' ? closeRoute : closeRoute.path
+      this.remove(closePath, nextRoute)
+    },
     ...mapMutations('setting', ['setDustbins', 'correctPageMinHeight'])
   }
 }
diff --git a/src/plugins/index.js b/src/plugins/index.js
index e3c9b3a..b25f349 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -1,10 +1,12 @@
-import VueI18nPlugin from '@/plugins/i18n-extend'
-import AuthorityPlugin from '@/plugins/authority-plugin'
+import VueI18nPlugin from './i18n-extend'
+import AuthorityPlugin from './authority-plugin'
+import TabsPagePlugin from './tabs-page-plugin'
 
 const Plugins = {
   install: function (Vue) {
     Vue.use(VueI18nPlugin)
     Vue.use(AuthorityPlugin)
+    Vue.use(TabsPagePlugin)
   }
 }
 export default Plugins
diff --git a/src/plugins/tabs-page-plugin.js b/src/plugins/tabs-page-plugin.js
new file mode 100644
index 0000000..0e47e43
--- /dev/null
+++ b/src/plugins/tabs-page-plugin.js
@@ -0,0 +1,14 @@
+const TabsPagePlugin = {
+  install(Vue) {
+    Vue.mixin({
+      methods: {
+        $closePage(closeRoute, nextRoute) {
+          const event = new CustomEvent('page:close', {detail:{closeRoute, nextRoute}})
+          window.dispatchEvent(event)
+        }
+      }
+    })
+  }
+}
+
+export default TabsPagePlugin