Fix 731 (#750)

* fix:#731 (#749)
* 代码生成器样式调整
Co-authored-by: Nsongkang1993 <38366752+songkang1993@users.noreply.github.com>

web/src/store/module/router.js

@@ -3,6 +3,7 @@ import { asyncRouterHandle } from '@/utils/asyncRouter'
 import { asyncMenu } from '@/api/menu'
 
 const routerList = []
+const keepAliveRouters = []
 
 const formatRouter = (routes) => {
   routes && routes.forEach(item => {
@@ -16,11 +17,24 @@ const formatRouter = (routes) => {
   })
 }
 
+const KeepAliveFilter = (routes) => {
+  routes && routes.forEach(item => {
+    // 子菜单中有 keep-alive 的，父菜单也必须 keep-alive，否则无效。这里将子菜单中有 keep-alive 的父菜单也加入。
+    if ((item.children && item.children.some(ch => ch.meta.keepAlive) || item.meta.keepAlive)) {
+      item.component().then(val => { keepAliveRouters.push(val.default.name) })
+    }
+    if (item.children && item.children.length > 0) {
+      KeepAliveFilter(item.children)
+    }
+  })
+}
+
 export const router = {
   namespaced: true,
   state: {
     asyncRouters: [],
     routerList: routerList,
+    keepAliveRouters: keepAliveRouters
   },
   mutations: {
     setRouterList(state, routerList) {
@@ -29,6 +43,10 @@ export const router = {
     // 设置动态路由
     setAsyncRouter(state, asyncRouters) {
       state.asyncRouters = asyncRouters
+    },
+    // 设置需要缓存的路由
+    setKeepAliveRouters(state, keepAliveRouters) {
+      state.keepAliveRouters = keepAliveRouters
     }
   },
   actions: {
@@ -62,8 +80,10 @@ export const router = {
 
       })
       asyncRouterHandle(baseRouter)
+      KeepAliveFilter(asyncRouter)
       commit('setAsyncRouter', baseRouter)
       commit('setRouterList', routerList)
+      commit('setKeepAliveRouters', keepAliveRouters)
       return true
     }
   },
@@ -74,6 +94,9 @@ export const router = {
     },
     routerList(state) {
       return state.routerList
+    },
+    keepAliveRouters(state) {
+      return state.keepAliveRouters
     }
   }
 }

web/src/view/dashboard/index.vue

@@ -96,6 +96,7 @@
 import echartsLine from '@/view/dashboard/dashbordCharts/echartsLine.vue'
 import dashbordTable from '@/view/dashboard/dashbordTable/dashbordTable.vue'
 export default {
+  name: 'Dashboard',
   components: {
     echartsLine,
     dashbordTable

web/src/view/example/index.vue

 <template>
   <div>
-    <router-view v-if="$route.meta.keepAlive" v-slot="{ Component }">
+    <router-view v-slot="{ Component }">
       <transition mode="out-in" name="el-fade-in-linear">
-        <keep-alive>
+        <keep-alive :include="$store.getters['router/keepAliveRouters']">
           <component :is="Component" />
         </keep-alive>
       </transition>
     </router-view>
-    <router-view v-if="!$route.meta.keepAlive" v-slot="{ Component }">
-      <transition mode="out-in" name="el-fade-in-linear">
-        <component :is="Component" />
-      </transition>
-    </router-view>
   </div>
 </template>
 

web/src/view/layout/index.vue

@@ -78,19 +78,13 @@
             <HistoryComponent ref="layoutHistoryComponent" />
           </div>
         </transition>
-        <router-view v-if="$route.meta.keepAlive && reloadFlag" v-slot="{ Component }" v-loading="loadingFlag" element-loading-text="正在加载中" class="admin-box">
+        <router-view v-if="reloadFlag" v-slot="{ Component }" v-loading="loadingFlag" element-loading-text="正在加载中" class="admin-box">
           <transition mode="out-in" name="el-fade-in-linear">
-            <keep-alive>
+            <keep-alive :include="$store.getters['router/keepAliveRouters']">
               <component :is="Component" />
             </keep-alive>
           </transition>
         </router-view>
-        <router-view v-if="!$route.meta.keepAlive && reloadFlag" v-slot="{ Component }" v-loading="loadingFlag" element-loading-text="正在加载中" class="admin-box">
-          <transition mode="out-in" name="el-fade-in-linear">
-            <component :is="Component" />
-          </transition>
-        </router-view>
-
         <BottomInfo />
         <setting />
       </el-main>

web/src/view/routerHolder.vue

 <!-- 此路由可作为父类路由通用路由页面使用 如需自定义父类路由页面 请参考 @/view/superAdmin/index.vue -->
 <template>
   <div>
-    <router-view v-if="$route.meta.keepAlive" v-slot="{ Component }">
+    <router-view v-slot="{ Component }">
       <transition mode="out-in" name="el-fade-in-linear">
-        <keep-alive>
+        <keep-alive :include="$store.getters['router/keepAliveRouters']">
           <component :is="Component" />
         </keep-alive>
       </transition>
     </router-view>
-    <router-view v-if="!$route.meta.keepAlive" v-slot="{ Component }">
-      <transition mode="out-in" name="el-fade-in-linear">
-        <component :is="Component" />
-      </transition>
-    </router-view>
   </div>
 </template>
 

web/src/view/superAdmin/index.vue

 <template>
   <div>
-    <router-view v-if="$route.meta.keepAlive" v-slot="{ Component }">
+    <router-view v-slot="{ Component }">
       <transition mode="out-in" name="el-fade-in-linear">
-        <keep-alive>
+        <keep-alive :include="$store.getters['router/keepAliveRouters']">
           <component :is="Component" />
         </keep-alive>
       </transition>
     </router-view>
-    <router-view v-if="!$route.meta.keepAlive" v-slot="{ Component }">
-      <transition mode="out-in" name="el-fade-in-linear">
-        <component :is="Component" />
-      </transition>
-    </router-view>
   </div>
 </template>
 

web/src/view/systemTools/autoCode/index.vue

@@ -129,9 +129,8 @@
           </template>
         </el-table-column>
       </el-table>
-      <el-tag type="danger" style="margin:12px 0;">id , created_at , updated_at , deleted_at 会自动生成请勿重复创建</el-tag>
       <!-- 组件列表 -->
-      <div class="gva-btn-list justify-content-flex-end">
+      <div class="gva-btn-list justify-content-flex-end auto-btn-list">
         <el-button size="mini" type="primary" @click="enterForm(true)">预览代码</el-button>
         <el-button size="mini" type="primary" @click="enterForm(false)">生成代码</el-button>
       </div>
@@ -454,4 +453,7 @@ export default {
     float: right;
   }
 }
+.auto-btn-list{
+  margin-top: 16px;
+}
 </style>

web/src/view/systemTools/index.vue

 <template>
   <div>
-    <router-view v-if="$route.meta.keepAlive" v-slot="{ Component }">
+    <router-view v-slot="{ Component }">
       <transition mode="out-in" name="el-fade-in-linear">
-        <keep-alive>
+        <keep-alive :include="$store.getters['router/keepAliveRouters']">
           <component :is="Component" />
         </keep-alive>
       </transition>
     </router-view>
-    <router-view v-if="!$route.meta.keepAlive" v-slot="{ Component }">
-      <transition mode="out-in" name="el-fade-in-linear">
-        <component :is="Component" />
-      </transition>
-    </router-view>
   </div>
 </template>