菜单功能完善

src/router/modules/sys.js

@@ -28,7 +28,7 @@ const sysRouter = {
           path: 'form',
           hidden: true,
           component: () => import('@/views/sys/menus/form.vue'),
-          name: 'SysAddMenus',
+          name: 'SysMenuEdit',
           meta: { title: '菜单编辑' }
         }
       ]

src/store/modules/permission.js

@@ -29,10 +29,11 @@ export function filterAsyncRoutes(routes, menus) {
     const meun = filterMeun(menus, tmp.name)
     if (meun != null && meun.title) {
       tmp.meta.title = meun.title
+      tmp.sort = meun.sort
+      tmp.hidden = meun.hidden !== 0
       if (meun.icon) {
         tmp.meta.icon = meun.icon
       }
-      tmp.sort = meun.sort
       if (tmp.children) {
         tmp.children = filterAsyncRoutes(tmp.children, menus)
       }
@@ -42,6 +43,30 @@ export function filterAsyncRoutes(routes, menus) {
   return res
 }
 
+/**
+ * 对菜单进行排序
+ */
+function sortRouters(accessedRouters) {
+  for (let i = 0; i < accessedRouters.length; i++) {
+    const router = accessedRouters[i]
+    if (router.children && router.children.length > 0) {
+      router.children.sort(compare('sort'))
+    }
+  }
+  accessedRouters.sort(compare('sort'))
+}
+
+/**
+ * 升序比较函数
+ */
+function compare(p) {
+  return (m, n) => {
+    const a = m[p]
+    const b = n[p]
+    return a - b
+  }
+}
+
 const state = {
   routes: [],
   addRoutes: []
@@ -57,7 +82,12 @@ const mutations = {
 const actions = {
   generateRoutes({ commit }, menus) {
     return new Promise(resolve => {
-      const accessedRoutes = filterAsyncRoutes(asyncRoutes, menus).concat(afterRoutes)
+      // 通过后台请求的菜单列表递归过滤路由表
+      const roleAsyncRoutes = filterAsyncRoutes(asyncRoutes, menus)
+      // 对可访问菜单进行排序
+      sortRouters(roleAsyncRoutes)
+      // 拼接尾部公共菜单
+      const accessedRoutes = roleAsyncRoutes.concat(afterRoutes)
       commit('SET_ROUTES', accessedRoutes)
       resolve(accessedRoutes)
     })

src/utils/request.js

@@ -35,7 +35,7 @@ service.interceptors.response.use(
   /**
    * If you want to get http information such as headers or status
    * Please return  response => response
-  */
+   */
 
   /**
    * Determine the request status by custom code
@@ -67,14 +67,15 @@ service.interceptors.response.use(
         })
       }
       return Promise.reject(new Error(res.message || 'Error'))
-    } if (res.code === -99) {
+    }
+    if (res.code === -99) {
       MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
         confirmButtonText: '重新登录',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        store.dispatch('resetToken').then(() => {
-          location.reload()// 为了重新实例化vue-router对象 避免bug
+        store.dispatch('user/resetToken').then(() => {
+          location.reload() // 为了重新实例化vue-router对象 避免bug
         })
       })
     } else {

src/views/sys/menus/form.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="app-container">
-    <el-page-header :content="isEdit?'编辑菜单':'添加菜单'" />
+    <el-page-header @back="goBack" :content="isEdit?'编辑菜单':'添加菜单'" />
     <el-card class="form-container" shadow="never">
       <el-form ref="menuFrom" :model="menu" :rules="rules" label-width="150px">
         <el-form-item label="上级菜单：" prop="parentId">
-          <el-input v-model="parentTitle" />
+          <el-input v-model="parentTitle" readonly />
+          <input v-model="menu.parentId" type="hidden" />
         </el-form-item>
         <el-form-item label="菜单名称：" prop="title">
           <el-input v-model="menu.title" />
@@ -12,8 +13,14 @@
         <el-form-item label="前端名称：" prop="name">
           <el-input v-model="menu.name" />
         </el-form-item>
+        <el-form-item label="显示隐藏：" prop="hidden">
+          <el-radio-group v-model="menu.hidden">
+            <el-radio :label="0">显示</el-radio>
+            <el-radio :label="1">隐藏</el-radio>
+          </el-radio-group>
+        </el-form-item>
         <el-form-item label="前端图标：" prop="icon">
-          <el-input v-model="menu.icon" style="width: 80%" />
+          <el-input v-model="menu.icon" style="width: 80%" placeholder="系统图标里拷贝Class" />
           <template>
             <i v-if="isElementIcon(menu.icon)" :class="menu.icon" />
             <svg-icon v-else-if="menu.icon" :icon-class="menu.icon" />
@@ -43,9 +50,10 @@ const defaultMenu = {
   title: '',
   name: '',
   icon: '',
+  hidden: 0,
   status: 0,
   sort: 0,
-  parentId: ''
+  parentId: 0
 }
 export default {
   name: 'MenuForm',
@@ -62,41 +70,35 @@ export default {
   },
   watch: {
     $route(route) {
-      if (this.$route.query.parentId != null) {
-        this.resetParentId()
-      } else {
-        this.getFormData()
-      }
+      this.getFormData()
     }
   },
   created() {
-    if (this.$route.query.parentId != null) {
-      this.resetParentId()
-    } else {
-      this.getFormData()
-    }
+    this.getFormData()
   },
   methods: {
+    goBack() {
+      window.history.go(-1)
+    },
     isElementIcon(value) {
       return value && value.substr(0, 7) === 'el-icon'
     },
-    resetParentId() {
-      if (this.$route.query.parentId != null) {
+    getFormData() {
+      if (this.$route.query.parentId) {
         this.menu.parentId = this.$route.query.parentId
         this.parentTitle = this.$route.query.title
       } else {
-        this.menu.parentId = ''
-        this.parentTitle = ''
+        this.menu.parentId = 0
+        this.parentTitle = '无'
       }
-    },
-    getFormData() {
-      if (this.$route.query.id != null) {
+      if (this.$route.query.id) {
         this.menu.id = this.$route.query.id
         this.isEdit = true
         getMenu(this.menu.id).then(response => {
           this.menu.title = response.data.title
           this.menu.name = response.data.name
           this.menu.icon = response.data.icon
+          this.menu.hidden = response.data.hidden
           this.menu.status = response.data.status
           this.menu.sort = response.data.sort
           this.menu.parentId = response.data.parentId
@@ -106,7 +108,6 @@ export default {
         this.isEdit = false
         this.menu = Object.assign({}, defaultMenu)
       }
-      console.log('this.menu', this.menu)
     },
     resetForm(formName) {
       this.$refs[formName].resetFields()

src/views/sys/menus/list.vue

@@ -30,14 +30,7 @@
       </el-table-column>
       <el-table-column label="状态" width="80" align="center">
         <template slot-scope="{row}">
-          <el-switch
-            v-model="row.status"
-            :active-value="0"
-            :inactive-value="1"
-            active-color="#1890ff"
-            inactive-color="#DCDFE6"
-            @change="handleHiddenChange($index, row)"
-          />
+          <el-switch v-model="row.status" :active-value="0" :inactive-value="1" active-color="#1890ff" inactive-color="#DCDFE6" @change="handleHiddenChange($index, row)" />
         </template>
       </el-table-column>
       <el-table-column label="排序" width="80" align="center">
@@ -49,7 +42,7 @@
         <template slot-scope="{row}">
           <el-button plain size="mini" :disabled="row.childCount | disableNextLevel" @click="handleShowNextLevel(row)">查看子菜单
           </el-button>
-          <el-button plain size="mini" @click="handleAddMenus(row)">添加子菜单
+          <el-button plain size="mini" @click="handleCreateNextLevel(row)">添加子菜单
           </el-button>
         </template>
       </el-table-column>
@@ -130,7 +123,7 @@ export default {
     },
     resetParentId() {
       this.listQuery.pageNum = 1
-      if (this.$route.query.parentId != null) {
+      if (this.$route.query.parentId) {
         this.listQuery.parentId = this.$route.query.parentId
         this.parentTitle = this.$route.query.title
       } else {
@@ -157,17 +150,17 @@ export default {
     goBack() {
       this.$router.push({ path: '/sys/menus/list' })
     },
-    handleShowNextLevel(row) {
-      this.$router.push({ path: '/sys/menus/list', query: { parentId: row.id, title: row.title }})
+    handleCreate() {
+      this.$router.push({ path: '/sys/menus/form', query: { parentId: this.listQuery.parentId, title: this.parentTitle } })
     },
     handleUpdate(row) {
-      this.$router.push({ path: '/sys/menus/form', query: { id: row.id }})
+      this.$router.push({ path: '/sys/menus/form', query: { id: row.id, parentId: this.listQuery.parentId, title: this.parentTitle } })
     },
-    handleCreate() {
-      this.$router.push({ path: '/sys/menus/form' })
+    handleShowNextLevel(row) {
+      this.$router.push({ path: '/sys/menus/list', query: { parentId: row.id, title: row.title } })
     },
-    handleAddMenus(row) {
-      this.$router.push({ path: '/sys/menus/form', query: { parentId: row.id, title: row.title }})
+    handleCreateNextLevel(row) {
+      this.$router.push({ path: '/sys/menus/form', query: { parentId: row.id, title: row.title } })
     },
     handleDelete(row) {
       this.$confirm('是否要删除该菜单', '提示', {
@@ -185,7 +178,8 @@ export default {
         })
       })
     },
-    handleOnInputBlur(row) { // 更新排序
+    handleOnInputBlur(row) {
+      // 更新排序
       updateSelective(row.id, { sort: row.sort }).then(response => {
         this.$message({
           message: '操作成功',
@@ -195,7 +189,8 @@ export default {
         this.getList()
       })
     },
-    handleHiddenChange(index, row) { // 操作开关
+    handleHiddenChange(index, row) {
+      // 操作开关
       updateSelective(row.id, { status: row.status }).then(response => {
         this.$message({
           message: '操作成功',