fix keepAlive

README.md

@@ -1,7 +1,39 @@
-# Vue 3 + Vite
+### 设置keepAlive
+```vue
+// 配置代码
+<route>
+  {
+    name: '设置',
+    meta: { keepAlive: true }
+  }
+</route>
+//
+<script>
+
+export default {
+  name: '设置', // 需要设置页面name 和 rotue 中的name 一致
+  data () {
+    return {
+      data: { }
+    }
+  },
+  // ...
+
+// 实现逻辑代码
+// /router/index.js
+if (to.meta.keepAlive) {
+  const keepAlive = keepAliveStore()
+  keepAlive.add(to.name) // 将路由名称添加到 keepAlive 集合中
+}
+// /layout/index.vue
+<router-view v-slot="{ Component, route }">
+  <keep-alive :include='keepAlive.list'>
+    <component :is="Component" :key="route.fullPath" />
+  </keep-alive>
+</router-view>
+```
+
+
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
-## Recommended IDE Setup
 
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

src/api/index.js

@@ -1,6 +1,8 @@
 import login from './login/index.js'
+import system from './system/index.js'
 
 export default {
   uploadPath: '/api/blade-file/file/upload', // 上传
-  login
+  login,
+  system
 }

src/api/system/index.js

@@ -0,0 +1,11 @@
+import fetch from '../fetch.js'
+
+export default {
+  /**
+   * 获取用户菜单
+   * @returns {Promise<unknown>}
+   */
+  getMenus () {
+    return fetch('/blade-system/menu/routes')
+  }
+}

src/layout/index.vue

@@ -7,12 +7,13 @@
       <el-header class='header'>
           <top />
       </el-header>
-      <el-main>
+      <el-main class='wt-main'>
         <el-card >
-          <keep-alive v-if='$route.meta.keepAlive'>
-            <router-view class="avue-view"/>
-          </keep-alive>
-          <router-view v-else/>
+          <router-view v-slot="{ Component, route }">
+              <keep-alive :include='keepAlive.list'>
+                <component :is="Component" :key="route.fullPath" />
+              </keep-alive>
+          </router-view>
         </el-card>
       </el-main>
     </el-container>
@@ -22,9 +23,19 @@
 <script>
 import left from './letf.vue'
 import top from './top.vue'
+import keepAliveStore from '../store/keepAlive.js'
 export default {
   name: 'index.vue',
-  components: { left, top }
+  components: { left, top },
+  setup () {
+    const keepAlive = keepAliveStore()
+    return { keepAlive }
+  },
+  created () {
+    this.keepAlive.$subscribe((res) => {
+      console.log(this.keepAlive.list)
+    })
+  }
 }
 </script>
 
@@ -32,4 +43,7 @@ export default {
 .header{
   padding: 0;
 }
+.wt-main {
+  background-color: #F2F3F5;
+}
 </style>

src/layout/letf.vue

@@ -3,10 +3,12 @@
     <div class='padding'>
       <div class='flex flex-center logo'>
         <img src='/public/vite.svg'/>
-        <span class='font-16 bold ml-20'>梧桐文档</span>
+        <span class='font-16 bold ml-20'>项目管理平台</span>
       </div>
     </div>
-
+    <div>
+      <div class='item flex flex-center' v-for='item in data' :key='item.id'>{{item.name}}</div>
+    </div>
   </div>
 </template>
 
@@ -14,31 +16,27 @@
 export default {
   data () {
     return {
-      data: [
-        {
-          label: '主页'
-        },
-        {
-          label: '我的空间',
-          children: [
-            {
-              label: '环评相关方案'
-            }
-          ]
-        },
-        {
-          label: '共享空间'
-        },
-        {
-          label: '知识库'
-        },
-        {
-          label: '收藏'
-        },
-        {
-          label: '回收站'
+      data: []
+    }
+  },
+  created () {
+    this.init()
+  },
+  methods: {
+    init () {
+      this.$api.system.getMenus().then(res => {
+        if (res.code === 200) {
+          this.data = res.data
+          console.log(typeof this.data)
+          if (this.data.length === 0) {
+            this.$router.push('/login')
+          } else {
+            // this.$router.push(this.data[0].path)
+          }
+        } else {
+          console.log(res)
         }
-      ]
+      })
     }
   }
 }
@@ -53,5 +51,11 @@ export default {
   background-color: white;
   box-shadow: 5px 0 10px -5px rgba(0, 0, 0, 0.1);
 }
+.item {
+  background-color: #efefef;
+  height: 40px;
+  margin: 10px;
+  border-radius: 10px;
+}
 
 </style>

src/layout/top.vue

@@ -48,9 +48,7 @@ export default {
     return { nav, user }
   },
   created () {
-    this.nav.$subscribe((res) => {
-      console.log(res.events.target)
-    })
+
   },
   methods: {
     dropDown (res) {

src/page/login.vue

@@ -36,7 +36,7 @@
                     </template>
                 </el-input>
               </el-form-item>
-              <el-form-item prop='name'>
+              <el-form-item prop='code'>
                 <el-input
                   v-model='form.code'
                   size='large'
@@ -109,6 +109,10 @@ export default {
         pass: [
           { required: true, message: '请输入密码', trigger: 'blur' },
           { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: '请输入验证码', trigger: 'blur' },
+          { min: 5, max: 5, message: '验证码不正确', trigger: 'blur' }
         ]
       },
       code: '',
@@ -142,7 +146,6 @@ export default {
             }
           })
         } else {
-          this.$message.error('登录失败')
           return false
         }
       })

src/router/index.js

@@ -1,6 +1,7 @@
 import { createRouter } from 'vue-router'
 import * as vueRouter from 'vue-router'
 import navStore from '../store/nav.js'
+import keepAliveStore from '../store/keepAlive.js'
 import generatedRoutes from '~pages'
 import { setupLayouts } from 'layouts-generated'
 
@@ -16,7 +17,12 @@ router.beforeEach((to, from, next) => {
     const nav = navStore()
     nav.updateMenu(to)
   }
+  if (to.meta.keepAlive) {
+    const keepAlive = keepAliveStore()
+    keepAlive.add(to.name) // 将路由名称添加到 keepAlive 集合中
+  }
   if (to.matched.length) {
+    console.log(to.fullPath)
     next()
   } else {
     next('/404')

src/store/keepAlive.js

@@ -0,0 +1,26 @@
+import { defineStore } from 'pinia'
+
+export const keepAliveStore = defineStore('keepAliveStore', {
+  /** 持久化 **/
+  persist: true,
+  state: () => ({ list: [] }),
+  actions: {
+    /**
+     * 添加浏览记录菜单
+     * @param menu
+     */
+    add (name) {
+      this.list.includes(name) || this.list.push(name)
+    },
+    /**
+     * 清空浏览记录菜单（用户退出时候，必须调调用此菜单）
+     */
+    remove (name) {
+      this.list = this.list.filter(v => {
+        return v !== name
+      })
+    }
+  }
+})
+
+export default keepAliveStore

src/views/desk/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <el-button @click='push'>工作台</el-button>
+    <el-button @click='drawer = true'>open</el-button>
+
+    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
+      <span>Hi there!</span>
+    </el-drawer>
+  </div>
+</template>
+
+<route>
+  {
+    title: '工作台',
+    meta: {
+     keepAlive:true
+    }
+  }
+</route>
+
+<script>
+export default {
+  name: 'index',
+  data () {
+    return {
+      drawer: false
+    }
+  },
+  methods: {
+    push () {
+      this.$router.push('/')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/setting/index.vue

@@ -20,13 +20,14 @@
 <route>
   {
     name: '设置',
+    meta: { keepAlive: true }
   }
 </route>
 
 <script>
 
 export default {
-  name: 'index',
+  name: '设置',
   data () {
     return {
       list: [],
@@ -36,7 +37,6 @@ export default {
         align: 'center',
         menuAlign: 'center',
         menuWidth: 380,
-        size: 'mini',
         addBtn: false,
         refreshBtn: false,
         columnBtn: false,

src/views/system/index.vue

@@ -7,6 +7,9 @@
 <route>
   {
     name: '系统',
+    meta: {
+      keepAlive:true
+    }
   }
 </route>
 

src/views/user/index.vue

@@ -1,18 +1,142 @@
 <template>
-  <div>
-    <router-link to='/user/pass'><el-button >调整到404</el-button></router-link>
+  <div class='full-width full-height flex flex-col flex-justify-start'>
+    <div>
+      <el-button @click='push'>设置</el-button>
+    </div>
+    <avue-crud
+      :option="option"
+      :data="list"
+      ref="crud"
+      v-model="form"
+      :before-open="beforeOpen"
+      @row-del="rowDel"
+      @row-save="rowSave"
+      @row-update="rowUpdate"
+      @on-load="onLoad">
+    </avue-crud>
   </div>
 </template>
+
 <route>
   {
-    name: '个人中心',
+    meta: { keepAlive: true }
   }
 </route>
+
 <script>
+
 export default {
-  name: 'index.vue'
+  name: 'index',
+  data () {
+    return {
+      list: [],
+      form: {},
+      data: [],
+      option: {
+        align: 'center',
+        menuAlign: 'center',
+        menuWidth: 380,
+        size: 'mini',
+        addBtn: false,
+        refreshBtn: false,
+        columnBtn: false,
+        labelWidth: 140,
+        border: true,
+        column: [
+          {
+            label: '文章名称',
+            prop: 'title'
+          },
+          {
+            label: '标签名称',
+            prop: 'tagsName'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.data = this.$route.query
+      this.$api.login.sendSMS({ current: 1, size: 200 }).then((res) => {
+        if (res.code === 200) {
+          this.list = res.data.records
+        }
+      })
+    },
+    push () {
+      this.$router.push({ path: '/user', query: { id: 12, type: 'test' } })
+    },
+    onLoad () {
+      this.$api.login.sendSMS({ current: 1, size: 10 }).then((res) => {
+        if (res.code === 200) {
+          this.list = res.data.records
+        }
+      })
+    },
+    beforeOpen (done, type) {
+      if (['view', 'edit'].includes(type)) {
+        this.getDetail()
+      }
+      done()
+    },
+    refreshChange () {
+      this.onLoad()
+    },
+    rowSave (row, done, loading) {
+      const data = {
+        projectInfoId: this.info.id
+      }
+      this.$api.projects.meeting.save(Object.assign(row, data)).then((res) => {
+        if (res.code === 200) {
+          this.$message.success(res.msg)
+        } else {
+          this.$message.error(res.msg)
+        }
+        done(row)
+        this.onLoad()
+      }, error => {
+        window.console.log(error)
+        loading()
+      })
+    },
+    rowUpdate (row, index, done, loading) {
+      const data = {
+        projectInfoId: this.info.id
+      }
+      this.$api.projects.meeting.update(Object.assign(row, data)).then((res) => {
+        if (res.code === 200) {
+          this.$message.success(res.msg)
+        } else {
+          this.$message.error(res.msg)
+        }
+        done(row)
+        this.onLoad()
+      }, error => {
+        window.console.log(error)
+        loading()
+      })
+    },
+    rowDel (row, index, done) {
+      this.$confirm('确定将选择数据删除?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        return this.$api.projects.meeting.removeList({ ids: row.id })
+      }).then(() => {
+        this.$message({
+          type: 'success',
+          message: '操作成功!'
+        })
+        // 数据回调进行刷新
+        done(row)
+        this.onLoad()
+      }).catch(() => {
+      })
+    }
+  }
 }
-
 </script>
 
 <style scoped>