系统菜单先提交

server/app/controller/menu.js

@@ -0,0 +1,25 @@
+const Controller = require("egg").Controller
+
+const table = "sys_menu";
+
+class User extends Controller {
+  async list() {
+    const {ctx} = this
+    const result = await this.service.db.list("sys_menu", ctx.query)
+    this.ctx.status = 200
+    this.ctx.body = result
+  }
+
+  async info() {
+    const {ctx, app} = this
+    if (!ctx.state.user?.id) {
+      this.ctx.body = {code: 1, msg: "找不到授权用户"}
+      return this.ctx.status = 401
+    }
+    const user = await app.mysql.get(table, {id: ctx.state.user?.id})
+    this.ctx.body = {code: 0, data: user}
+    this.ctx.status = 200
+  }
+}
+
+module.exports = User

web/src/apps/AppMenu.vue

@@ -0,0 +1,23 @@
+<template>
+  <section class="AppMenu">
+
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AppMenu",
+  label: "菜单管理",
+  data() {
+    return {}
+  },
+  methods: {},
+  created() {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppMenu {
+}
+</style>

web/src/components/sliderNav.vue

@@ -4,7 +4,9 @@
     <div class="fill">
       <div class="item" v-for="menu in menus" :key="menu.id">
         <el-row class="pad-h8" align="middle" @click="menu.expand=!menu.expand">
-          <i class="iconfont icon-shujuqingxi"/>
+          <el-icon :size="20">
+            <Grid/>
+          </el-icon>
           <div class="fill" v-text="menu.label"/>
           <el-icon :size="20">
             <component :is="arrow(menu.expand)"/>
@@ -19,11 +21,11 @@
 </template>
 
 <script>
-import {ArrowDownBold, ArrowUpBold, Histogram} from "@element-plus/icons-vue";
+import {ArrowDownBold, ArrowUpBold, Grid} from "@element-plus/icons-vue";
 
 export default {
   name: "sliderNav",
-  components: {Histogram, ArrowUpBold, ArrowDownBold},
+  components: {Grid, ArrowUpBold, ArrowDownBold},
   data() {
     return {
       menus: [
@@ -47,7 +49,22 @@ export default {
   methods: {
     arrow(expand) {
       return expand ? ArrowUpBold : ArrowDownBold
+    },
+    getMenus() {
+      this.$http.post("/api/menu/list", null, {
+        params: {size: 9999}
+      }).then(res => {
+        if (res?.data) {
+          //过滤哪些未加载进来的应用
+          const loaded = JSON.parse(localStorage.getItem("apps") || null)
+          const menus = res.data.records.filter(e => !!loaded.find(s => s.name == e.route))
+          this.menus = this.$arr2tree(menus, {parent: "parent"})
+        }
+      })
     }
+  },
+  created() {
+    this.getMenus()
   }
 }
 </script>
@@ -95,4 +112,4 @@ export default {
     }
   }
 }
-</style>
+</style>

web/src/utils/axios.js

@@ -35,6 +35,10 @@ ins.interceptors.response.use(res => {
     console.error("服务器异常,请联系管理员!")
   }
 }, ({response}) => {
-  if (response?.data?.error) ElMessage.error(response.data.error)
+  if (response.status == 401) {
+    mainStore().logout()
+    location.replace("/")
+  } else if (response?.data?.error) ElMessage.error(response.data.error)
+
 })
-export default ins
+export default ins

web/src/utils/tools.js

@@ -3,7 +3,29 @@ import {mainStore} from "./store";
 export const getToken = () => mainStore()?.token
 export const $confirm = () => {
 
+}
+/**
+ * 数组转tree
+ * @param list 待转化的数组
+ * @param config 配置
+ */
+const $arr2tree = (list, config = {}) => {
+  const {key = 'id', parent = 'parentId', children = 'children'} = config, result = [], itemMap = {}, ids = list?.map(e => `${e[key]}`)?.toString()
+  for (const e of list) {
+    const id = e[key], pid = e[parent]
+    itemMap[id] = {...e, [children]: [itemMap[id]?.[children]].flat().filter(Boolean)}
+    const treeItem = itemMap[id]
+    if (!!pid && ids.indexOf(pid) > -1) {
+      if (!itemMap[pid]) {
+        itemMap[pid] = {
+          children: [],
+        }
+      }
+      itemMap[pid].children.push(treeItem)
+    } else result.push(treeItem)
+  }
+  return result
 }
 export default {
-  getToken, $confirm
-}
+  getToken, $confirm, $arr2tree
+}