From 255f68709e36ea232a0a0f5d28e9ef9f03c7b981 Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Fri, 10 Jul 2020 21:48:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20solve=20the=20cache=20problem=20in=20mul?=
 =?UTF-8?q?ti=20tabs=20mode;=20:bug:=20=E4=BF=AE=E5=A4=8D:=20=E8=A7=A3?=
 =?UTF-8?q?=E5=86=B3=E5=A4=9A=E9=A1=B5=E7=AD=BE=E6=A8=A1=E5=BC=8F=E4=B8=8B?=
 =?UTF-8?q?=E7=9A=84=E5=86=85=E5=AD=98=E6=B3=84=E9=9C=B2=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/BlankView.vue    |  4 +-
 src/layouts/PageView.vue     |  4 +-
 src/layouts/TabsView.vue     | 80 +++++++++++++++++++++++-------------
 src/pages/exception/403.vue  |  1 +
 src/pages/exception/404.vue  |  1 +
 src/pages/exception/500.vue  |  1 +
 src/store/modules/setting.js |  4 ++
 7 files changed, 63 insertions(+), 32 deletions(-)

diff --git a/src/layouts/BlankView.vue b/src/layouts/BlankView.vue
index 0e3acbf..742f3b3 100644
--- a/src/layouts/BlankView.vue
+++ b/src/layouts/BlankView.vue
@@ -1,6 +1,6 @@
 <template>
   <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
-    <keep-alive v-if="multiPage">
+    <keep-alive :exclude="dustbins" v-if="multiPage">
       <router-view />
     </keep-alive>
     <router-view v-else />
@@ -15,7 +15,7 @@ export default {
   name: 'BlankView',
   components: {PageToggleTransition},
   computed: {
-    ...mapState('setting', ['multiPage', 'animate'])
+    ...mapState('setting', ['multiPage', 'animate', 'dustbins'])
   }
 }
 </script>
diff --git a/src/layouts/PageView.vue b/src/layouts/PageView.vue
index c969cf9..eee6881 100644
--- a/src/layouts/PageView.vue
+++ b/src/layouts/PageView.vue
@@ -4,7 +4,7 @@
       <img :src="extraImage"/>
     </div>
     <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
-      <keep-alive v-if="multiPage">
+      <keep-alive :exclude="dustbins" v-if="multiPage">
         <router-view ref="page" />
       </keep-alive>
       <router-view ref="page" v-else />
@@ -26,7 +26,7 @@ export default {
     }
   },
   computed: {
-    ...mapState('setting', ['isMobile', 'multiPage', 'animate', 'routesI18n']),
+    ...mapState('setting', ['isMobile', 'multiPage', 'animate', 'routesI18n', 'dustbins']),
     desc() {
       return this.page.desc
     },
diff --git a/src/layouts/TabsView.vue b/src/layouts/TabsView.vue
index deef2ab..156ae16 100644
--- a/src/layouts/TabsView.vue
+++ b/src/layouts/TabsView.vue
@@ -16,7 +16,7 @@
     </a-tabs>
     <div class="tabs-view-content">
       <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
-        <keep-alive v-if="multiPage">
+        <keep-alive :exclude="dustbins" v-if="multiPage">
           <router-view />
         </keep-alive>
         <router-view v-else />
@@ -29,7 +29,7 @@
 import AdminLayout from './AdminLayout'
 import Contextmenu from '../components/menu/Contextmenu'
 import PageToggleTransition from '../components/transition/PageToggleTransition'
-import {mapState} from 'vuex'
+import {mapState, mapMutations} from 'vuex'
 
 export default {
   name: 'TabsView',
@@ -37,7 +37,6 @@ export default {
   data () {
     return {
       pageList: [],
-      linkList: [],
       activePage: '',
       menuVisible: false,
       menuItemList: [
@@ -48,31 +47,25 @@ export default {
     }
   },
   computed: {
-    ...mapState('setting', ['multiPage', 'animate', 'layout'])
+    ...mapState('setting', ['multiPage', 'animate', 'layout', 'dustbins'])
   },
   created () {
     const route = this.$route
     this.pageList.push(route)
-    this.linkList.push(route.fullPath)
     this.activePage = route.fullPath
   },
   watch: {
     '$route': function (newRoute) {
       this.activePage = newRoute.fullPath
+      this.putCache(newRoute)
       if (!this.multiPage) {
-        this.linkList = [newRoute.fullPath]
         this.pageList = [newRoute]
-      } else if (this.linkList.indexOf(newRoute.fullPath) == -1) {
-        this.linkList.push(newRoute.fullPath)
+      } else if (this.pageList.findIndex(item => item.fullPath == newRoute.fullPath) == -1) {
         this.pageList.push(newRoute)
       }
     },
-    'activePage': function () {
-      // this.$router.push(key)
-    },
     'multiPage': function (newVal) {
       if (!newVal) {
-        this.linkList = [this.$route.fullPath]
         this.pageList = [this.$route]
       }
     }
@@ -90,12 +83,13 @@ export default {
         this.$message.warning('这是最后一页，不能再关闭了啦')
         return
       }
-      let index = this.linkList.indexOf(key)
+      let index = this.pageList.findIndex(item => item.fullPath == key)
+      let pageRoute = this.pageList[index]
+      this.clearCache(pageRoute)
       this.pageList = this.pageList.filter(item => item.fullPath !== key)
-      this.linkList = this.linkList.filter(item => item !== key)
       if (key == this.activePage) {
-        index = index >= this.linkList.length ? this.linkList.length - 1 : index
-        this.activePage = this.linkList[index]
+        index = index >= this.pageList.length ? this.pageList.length - 1 : index
+        this.activePage = this.pageList[index].fullPath
         this.$router.push(this.activePage)
       }
     },
@@ -140,29 +134,59 @@ export default {
       }
     },
     closeOthers (pageKey) {
-      let index = this.linkList.indexOf(pageKey)
-      this.linkList = this.linkList.slice(index, index + 1)
+      const index = this.pageList.findIndex(item => item.fullPath == pageKey)
+      // 要关闭的页面清除缓存
+      this.pageList.forEach(item => {
+        if (item.fullPath != pageKey){
+          this.clearCache(item)
+        }
+      })
       this.pageList = this.pageList.slice(index, index + 1)
-      this.activePage = this.linkList[0]
+      this.activePage = this.pageList[0].fullPath
+      this.$router.push(this.activePage)
     },
     closeLeft (pageKey) {
-      let index = this.linkList.indexOf(pageKey)
-      this.linkList = this.linkList.slice(index)
+      const index = this.pageList.findIndex(item => item.fullPath == pageKey)
+      // 清除缓存
+      this.pageList.forEach((item, i) => {
+        if (i < index) {
+          this.clearCache(item)
+        }
+      })
       this.pageList = this.pageList.slice(index)
-      if (this.linkList.indexOf(this.activePage) == -1) {
-        this.activePage = this.linkList[0]
+      if (this.pageList.findIndex(item => item.fullPath == this.activePage) == -1) {
+        this.activePage = this.pageList[0].fullPath
         this.$router.push(this.activePage)
       }
     },
     closeRight (pageKey) {
-      let index = this.linkList.indexOf(pageKey)
-      this.linkList = this.linkList.slice(0, index + 1)
+      const index = this.pageList.findIndex(item => item.fullPath == pageKey)
+      // 清除缓存
+      this.pageList.forEach((item, i) => {
+        if (i > index) {
+          this.clearCache(item)
+        }
+      })
       this.pageList = this.pageList.slice(0, index + 1)
-      if (this.linkList.indexOf(this.activePage) == -1) {
-        this.activePage = this.linkList[this.linkList.length - 1]
+      if (this.pageList.findIndex(item => item.fullPath == this.activePage) == -1) {
+        this.activePage = this.pageList[this.pageList.length - 1].fullPath
         this.$router.push(this.activePage)
       }
-    }
+    },
+    clearCache(route) {
+      const componentName = route.matched.slice(-1)[0].components.default.name
+      if (this.dustbins.findIndex(item => item == componentName) == -1) {
+        this.setDustbins(this.dustbins.concat(componentName))
+      }
+    },
+    putCache(route) {
+      const componentName = route.matched.slice(-1)[0].components.default.name
+      if (this.dustbins.findIndex(item => item == componentName) != -1) {
+        this.setDustbins(this.dustbins.filter(item => item != componentName))
+      }
+
+    },
+    ...mapMutations('setting', ['setDustbins'])
   }
 }
 </script>
diff --git a/src/pages/exception/403.vue b/src/pages/exception/403.vue
index 573b1f8..11de88c 100644
--- a/src/pages/exception/403.vue
+++ b/src/pages/exception/403.vue
@@ -6,6 +6,7 @@
 import ExceptionPage from '@/components/exception/ExceptionPage'
 import {mapState} from 'vuex'
 export default {
+  name: 'Exp403',
   components: {ExceptionPage},
   inject: ['layoutMinHeight'],
   computed: {
diff --git a/src/pages/exception/404.vue b/src/pages/exception/404.vue
index 3670281..d0ef4d7 100644
--- a/src/pages/exception/404.vue
+++ b/src/pages/exception/404.vue
@@ -6,6 +6,7 @@
 import ExceptionPage from '@/components/exception/ExceptionPage'
 import {mapState} from 'vuex'
 export default {
+  name: 'Exp404',
   components: {ExceptionPage},
   inject: ['layoutMinHeight'],
   computed: {
diff --git a/src/pages/exception/500.vue b/src/pages/exception/500.vue
index cbfc554..11431b1 100644
--- a/src/pages/exception/500.vue
+++ b/src/pages/exception/500.vue
@@ -6,6 +6,7 @@
 import ExceptionPage from '@/components/exception/ExceptionPage'
 import {mapState} from 'vuex'
 export default {
+  name: 'Exp500',
   components: {ExceptionPage},
   inject: ['layoutMinHeight'],
   computed: {
diff --git a/src/store/modules/setting.js b/src/store/modules/setting.js
index e5dc1ab..332a9dd 100644
--- a/src/store/modules/setting.js
+++ b/src/store/modules/setting.js
@@ -7,6 +7,7 @@ export default {
     animates: ADMIN.animates,
     palettes: ADMIN.palettes,
     routesI18n: {},
+    dustbins: [],
     ...config,
   },
   mutations: {
@@ -42,6 +43,9 @@ export default {
     },
     setHideSetting(state, hideSetting) {
       state.hideSetting = hideSetting
+    },
+    setDustbins(state, dustbins) {
+      state.dustbins = dustbins
     }
   }
 }