From 6b0d421b3697e5a20cda554abd313f256ccb1477 Mon Sep 17 00:00:00 2001
From: wanglunhui2012 <1396509884@qq.com>
Date: Thu, 24 Jun 2021 01:39:42 +0800
Subject: [PATCH] Add Nested menu cache support.

---
 src/store/modules/tagsView.js                 | 59 +++++++++++++++++--
 src/views/nested/menu1/index.vue              | 16 ++++-
 src/views/nested/menu1/menu1-1/index.vue      | 15 ++++-
 src/views/nested/menu1/menu1-2/index.vue      | 16 ++++-
 .../nested/menu1/menu1-2/menu1-2-1/index.vue  | 15 ++++-
 .../nested/menu1/menu1-2/menu1-2-2/index.vue  | 14 ++++-
 src/views/nested/menu1/menu1-3/index.vue      | 14 ++++-
 src/views/nested/menu2/index.vue              | 13 +++-
 8 files changed, 140 insertions(+), 22 deletions(-)

diff --git a/src/store/modules/tagsView.js b/src/store/modules/tagsView.js
index 57e72421..bb4bcd64 100644
--- a/src/store/modules/tagsView.js
+++ b/src/store/modules/tagsView.js
@@ -75,7 +75,13 @@ const actions = {
     commit('ADD_VISITED_VIEW', view)
   },
   addCachedView({ commit }, view) {
-    commit('ADD_CACHED_VIEW', view)
+    if (view.matched && view.matched.length > 1) {
+      for (let i = 1; i < view.matched.length; i++) { // 第0个是Layout，跳过
+        commit('ADD_CACHED_VIEW', view.matched[i])
+      }
+    } else {
+      commit('ADD_CACHED_VIEW', view)
+    }
   },
 
   delView({ dispatch, state }, view) {
@@ -94,11 +100,23 @@ const actions = {
       resolve([...state.visitedViews])
     })
   },
-  delCachedView({ commit, state }, view) {
-    return new Promise(resolve => {
-      commit('DEL_CACHED_VIEW', view)
-      resolve([...state.cachedViews])
-    })
+  delCachedView({ dispatch, commit, state, rootState }, view) {
+    if (view.matched && view.matched.length > 1) {
+      return new Promise(resolve => {
+        const deleteView = view.matched[view.matched.length - 1]
+        console.log('delete ' + deleteView.name)
+        commit('DEL_CACHED_VIEW', deleteView)
+
+        dispatch('recursionDeleteParent', { routes: rootState.permission.routes, view: deleteView.parent, excludeView: view.matched[0] })
+
+        resolve([...state.cachedViews])
+      })
+    } else {
+      return new Promise(resolve => {
+        commit('DEL_CACHED_VIEW', view)
+        resolve([...state.cachedViews])
+      })
+    }
   },
 
   delOthersViews({ dispatch, state }, view) {
@@ -149,6 +167,35 @@ const actions = {
 
   updateVisitedView({ commit }, view) {
     commit('UPDATE_VISITED_VIEW', view)
+  },
+
+  getRouteByName({ dispatch }, { routes, name }) {
+    let stark = []
+    stark = stark.concat(routes)
+    while (stark.length) {
+      const temp = stark.shift()
+      if (temp.children) {
+        stark = stark.concat(temp.children)
+      }
+      if (temp.name === name) {
+        return temp
+      }
+    }
+    return null
+  },
+  async recursionDeleteParent({ dispatch, commit, state }, { routes, view, excludeView }) {
+    const route = await dispatch('getRouteByName', { routes: routes, name: view.name })
+    if (route && route.children) {
+      const childrenNames = route.children.map(r => r.name).filter(Boolean)
+      const visitedViewNames = state.visitedViews.map(s => s.name)
+
+      const needDelete = !(childrenNames.some(item => visitedViewNames.includes(item)) || view === excludeView)
+      if (needDelete) {
+        console.log('delete ' + view.name)
+        commit('DEL_CACHED_VIEW', view)
+        dispatch('recursionDeleteParent', { routes: routes, view: view.parent, excludeView: excludeView })
+      }
+    }
   }
 }
 
diff --git a/src/views/nested/menu1/index.vue b/src/views/nested/menu1/index.vue
index 30cb6701..8d64b7a6 100644
--- a/src/views/nested/menu1/index.vue
+++ b/src/views/nested/menu1/index.vue
@@ -1,7 +1,17 @@
 <template>
   <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1">
-      <router-view />
-    </el-alert>
+    <el-input v-model="input" />
+    <router-view />
   </div>
 </template>
+<script>
+
+export default {
+  name: 'Menu1',
+  data() {
+    return {
+      input: 'Menu1'
+    }
+  }
+}
+</script>
diff --git a/src/views/nested/menu1/menu1-1/index.vue b/src/views/nested/menu1/menu1-1/index.vue
index 27e173a6..f58b9180 100644
--- a/src/views/nested/menu1/menu1-1/index.vue
+++ b/src/views/nested/menu1/menu1-1/index.vue
@@ -1,7 +1,16 @@
 <template>
   <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-1" type="success">
-      <router-view />
-    </el-alert>
+    <el-input v-model="input" />
   </div>
 </template>
+<script>
+
+export default {
+  name: 'Menu11',
+  data() {
+    return {
+      input: 'Menu1-1'
+    }
+  }
+}
+</script>
diff --git a/src/views/nested/menu1/menu1-2/index.vue b/src/views/nested/menu1/menu1-2/index.vue
index 0c86276e..81054ed1 100644
--- a/src/views/nested/menu1/menu1-2/index.vue
+++ b/src/views/nested/menu1/menu1-2/index.vue
@@ -1,7 +1,17 @@
 <template>
   <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-2" type="success">
-      <router-view />
-    </el-alert>
+    <el-input v-model="input" />
+    <router-view />
   </div>
 </template>
+
+<script>
+export default {
+  name: 'Menu12',
+  data() {
+    return {
+      input: 'Menu1-2'
+    }
+  }
+}
+</script>
diff --git a/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue b/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
index f87d88f4..982cfc63 100644
--- a/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
+++ b/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
@@ -1,5 +1,16 @@
-<template functional>
+<template>
   <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-2-1" type="warning" />
+    <el-input v-model="input" />
   </div>
 </template>
+<script>
+
+export default {
+  name: 'Menu121',
+  data() {
+    return {
+      input: 'Menu1-2-1'
+    }
+  }
+}
+</script>
diff --git a/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue b/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
index d88789f2..60f4ffed 100644
--- a/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
+++ b/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
@@ -1,5 +1,15 @@
-<template functional>
+<template>
   <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-2-2" type="warning" />
+    <el-input v-model="input" />
   </div>
 </template>
+<script>
+export default {
+  name: 'Menu122',
+  data() {
+    return {
+      input: 'Menu1-2-2'
+    }
+  }
+}
+</script>
diff --git a/src/views/nested/menu1/menu1-3/index.vue b/src/views/nested/menu1/menu1-3/index.vue
index f7cd0738..b61f2b58 100644
--- a/src/views/nested/menu1/menu1-3/index.vue
+++ b/src/views/nested/menu1/menu1-3/index.vue
@@ -1,5 +1,15 @@
-<template functional>
+<template>
   <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 1-3" type="success" />
+    <el-input v-model="input" />
   </div>
 </template>
+<script>
+export default {
+  name: 'Menu13',
+  data() {
+    return {
+      input: 'Menu1-3'
+    }
+  }
+}
+</script>
diff --git a/src/views/nested/menu2/index.vue b/src/views/nested/menu2/index.vue
index 19dd48f0..bd4491be 100644
--- a/src/views/nested/menu2/index.vue
+++ b/src/views/nested/menu2/index.vue
@@ -1,5 +1,16 @@
 <template>
   <div style="padding:30px;">
-    <el-alert :closable="false" title="menu 2" />
+    <el-input v-model="input" />
   </div>
 </template>
+
+<script>
+export default {
+  name: 'Menu2',
+  data() {
+    return {
+      input: 'Menu2'
+    }
+  }
+}
+</script>