add menus

package.json

@@ -14,7 +14,7 @@
     "blueimp-md5": "^2.10.0",
     "dayjs": "^1.8.12",
     "echarts": "^4.2.1",
-    "element-ui": "^2.6.1",
+    "element-ui": "^2.10.1",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "vue": "^2.6.6",

src/config/api.js

@@ -349,11 +349,19 @@ const apis = {
   menu:{
     list: {
       method: 'get',
-      url: `${commPrefix}/sysmenu`
+      url: `${commPrefix}/menu`
     },
-    add: {
+    save: {
       method: 'post',
-      url: `${commPrefix}/sysmenuAdd`
+      url: `${commPrefix}/menu`
+    },
+    update: {
+      method: 'put',
+      url: `${commPrefix}/menu/:id`
+    },
+    delete: {
+      method: 'delete',
+      url: `${commPrefix}/menu/:id`
     },
     
   },

src/router.js

@@ -56,24 +56,18 @@ router.beforeEach((to, from, next) => {
   const toLogin = { name: 'login', query: { from: to.name } }
   const toIndex = { name: 'index' }
   const to403 = { name: 'norights' }
-  
-  // 白名单, 异常页不处理
-  if (to.fullPath.indexOf('/exception') > -1) {
-    next()
-    return
-  }
 
   // 尝试去获取人员
   store.dispatch('getUser').then(() => {
     // 校验权限
     if (checkAuthority(store.state, to.name)) {
-      return to.name === 'login' ? next(toIndex) : next()
+      return to.name === 'login' || to.fullPath.indexOf('/exception') > -1 ? next(toIndex) : next()
     } else {
-      next(to403)
+      return to.name === 'login' || to.fullPath.indexOf('/exception') > -1 ? next() : next(to403)
     }
   }).catch((err) => {
     window.console.error(err.message || err)
-    return to.name === 'login' ? next() : next(toLogin)
+    return to.name === 'login' || to.fullPath.indexOf('/exception') > -1 ? next() : next(toLogin)
   })
 
 })

src/store/modules/sysmenu.js

@@ -1,23 +1,28 @@
-import lodash from 'lodash'
-import { interact } from '../../utils'
+import { interact, replaceApiParams } from '../../utils'
 import apis from '../../config/api'
 
 export default {
   namespaced: true,
   state: {
-    safety : {}
   },
   mutations: {
-    updateSafety(state, payload) {
-      state.safety  = payload || {}
-    }
   },
   actions: {
-    sysMenu({ commit }, payload) { // 查询所有
-      const api = lodash.get(apis, 'menu.list')
-      interact(api, payload).then((data) => {
-        commit('updateSafety', data)
-      })
-    }
+    getAllMenus() { // 查询所有
+      return interact(apis.menu.list)
+    },
+    deleteMenu(_, menu) {
+      return interact(replaceApiParams(apis.menu.delete, { id: menu.menuId }))
+    },
+    insertMenu(_, menu) {
+      const { children, authority, ...dt } = menu // eslint-disable-line
+      const dtStr = window.JSON.stringify(dt)
+      return interact(apis.menu.save, dtStr)
+    },
+    editMenu(_, menu) {
+      const { children, authority, ...dt } = menu // eslint-disable-line
+      const dtStr = window.JSON.stringify(dt)
+      return interact(replaceApiParams(apis.menu.update, { id: menu.menuId }), dtStr)
+    },
   }
 }

src/views/index.js

@@ -50,9 +50,9 @@ const pages = [
       //   },
       // },
       {
-        path: 'sysmenu/list',
+        path: 'sysmenu',
         name: 'sysmenu',
-        component: () => import('./sysmenu/list.vue'),
+        component: () => import('./sysmenu'),
         meta: {
           menuShow: true,
           title: '菜单管理',

src/views/sysmenu/index.vue

@@ -0,0 +1,227 @@
+<template>
+  <div>
+    <div class="page-bar">
+      <el-button icon="el-icon-plus" @click="insertRootMenu">顶级节点</el-button>
+    </div>
+    <div class="tree-box">
+      <div
+        v-for="(menus, inx) in treeData"
+        :key="inx">
+        <el-tree
+          :data="[menus]"
+          node-key="menuId"
+          :check-on-click-node="true"
+          :expand-on-click-node="false"
+          :default-expand-all="true"
+          @node-click="handleNodeClick"
+          @node-contextmenu="showContextMenu"
+        >
+          <el-popover
+            trigger="manual"
+            placement="right"
+            :value="checkMenu.menuId == data.menuId && contextMenuVisible"
+            slot-scope="{ data }"
+          >
+            <div>
+              <el-button type="text" icon="el-icon-plus" @click="() => insertSubMenu(data)">子菜单</el-button>
+            </div>
+            <div>
+              <el-button type="text" icon="el-icon-edit" @click="dialogVisible = true">编辑</el-button>
+            </div>
+            <div>
+              <el-button type="text" icon="el-icon-delete" @click="() => deleteNode(data)">删除</el-button>
+            </div>
+            <span slot="reference" class="custom-tree-node">
+              <span>{{data.menuName}} <small>({{data.menuId}})</small></span>
+            </span>
+          </el-popover>
+        </el-tree>
+      </div>
+    </div>
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible"
+      width="30%">
+      <el-form :model="checkMenu" label-width="80px">
+        <el-form-item label="菜单ID">
+          <el-input v-model="checkMenu.menuId" :disabled="!!checkMenu.createDate"></el-input>
+        </el-form-item>
+        <el-form-item label="菜单名称">
+          <el-input v-model="checkMenu.menuName"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="editNode">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex'
+const { mapActions: mapMenuActions } = createNamespacedHelpers('sysmenu')
+
+
+export default {
+  name: 'SysMenu',
+  data () {
+    return {
+      menusRaw: [],
+      menusWithChildren: [],
+      menuDetailTPL: {
+        menuId: '',
+        menuName: '',
+        menuPid: '',
+        menuParents: '',
+        status: 1,
+        sortNo: 0,
+      },
+      checkMenu: {},
+      contextMenuVisible: false,
+      dialogVisible: false,
+    }
+  },
+  computed: {
+    treeData () {
+      return (this.menusWithChildren || []).filter(m => m.menuPid === "-1") || []
+    },
+  },
+  created () {
+    this.initData()
+  },
+  methods: {
+    ...mapMenuActions([
+      'getAllMenus',
+      'deleteMenu',
+      'insertMenu',
+      'editMenu',
+    ]),
+    initData () {
+      this.getAllMenus().then((menus) => {
+        this.menusRaw = menus
+        this.menusWithChildren = menus.map((menu) => {
+          const parent = menus.filter((m) => m.menuId === menu.menuPid)[0]
+          if (parent) {
+            parent.children = (parent.children || []).concat(menu)
+          }
+          return menu
+        })
+      })
+    },
+    handleNodeClick (data) {
+      this.checkMenu = data
+      this.contextMenuVisible = false
+    },
+    showContextMenu (e, data) {
+      this.checkMenu = data
+      this.contextMenuVisible = true
+    },
+    insertRootMenu () {
+      this.checkMenu = {
+        ...this.menuDetailTPL,
+        menuPid: "-1",
+        menuParents: "",
+      }
+      this.dialogVisible = true
+    },
+    insertSubMenu (menu) {
+      const children = menu.children || []
+      const lastSortNo = (children[children.length - 1] || {}).sortNo || menu.sortNo
+
+      this.checkMenu = {
+        ...this.menuDetailTPL,
+        menuPid: menu.menuId,
+        menuParents: menu.menuParents.split(",").filter(x => x).concat(menu.menuId).join(","),
+        sortNo: lastSortNo + 1
+      }
+      this.dialogVisible = true
+    },
+    editNode () {
+      const newMenu = !this.checkMenu.createDate      
+      const api = newMenu ? this.insertMenu : this.editMenu
+      api(this.checkMenu).then(data => {
+        this.checkMenu.createDate = data.createDate
+        const parent = this.menusWithChildren.filter(m => m.menuId === data.menuPid)[0]
+        if (parent) {
+          const exists = (parent.children || []).filter(m => m.menuId === data.menuId)[0]
+          if (!exists) {
+            parent.children = (parent.children || []).concat(data)
+          }
+        } else {
+          this.menusWithChildren = this.menusWithChildren.concat(data)
+        }
+
+        this.contextMenuVisible = false
+        this.dialogVisible = false
+        this.$notify({
+          title: '成功',
+          message: '数据更新成功',
+          type: 'success'
+        });
+      }).catch((err) => {
+        // this.contextMenuVisible = false
+        // this.dialogVisible = false
+        this.$notify.error({
+          title: '失败',
+          message: err.message || err,
+        });
+      })
+    },
+    deleteNode (menu) {
+      this.$confirm(`确认删除菜单 [${menu.menuName}] ?`).then(() => {
+        //
+        this.deleteMenu(menu).then(() => {
+          const parent = this.menusWithChildren.filter(m => m.menuId === menu.menuPid)[0]
+          if (parent) {
+            parent.children = (parent.children || []).filter(m => m.menuId !== menu.menuId)
+          } else {
+            this.menusWithChildren = this.menusWithChildren.filter(m => m.menuId !== menu.menuId)
+          }
+          this.contextMenuVisible = false
+          this.dialogVisible = false
+
+          this.$notify({
+            title: '成功',
+            message: '删除菜单成功',
+            type: 'success'
+          });
+        }).catch((err) => {
+          this.$notify.error({
+            title: '失败',
+            message: err.message || err,
+          });
+        })
+      }).catch(() => {
+        // 取消删除
+        this.contextMenuVisible = false
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.page-bar {
+  padding: 24px 0;
+}
+
+.tree-box {
+  display: flex;
+
+  & > div {
+    flex: auto;
+
+    & + div {
+      margin-left: 24px;
+    }
+  }
+}
+</style>
+
+
+<style lang="scss">
+  .custom-tree-node {
+    font-size: 14px;
+  }
+</style>

src/views/sysuser/edit.vue

@@ -108,7 +108,6 @@ export default {
             this.$notify.success('编辑信息成功')
           })
           // 保存角色
-          console.log('this.formInline.menuArray',this.formInline.menuArray)
           this.formInline.menuArray = this.roleId
           this.updateUserRolede(this.formInline)
         }

src/views/sysuser/list.vue

@@ -188,8 +188,7 @@ export default {
     },
     TransactionReplyAdd(){
           this.filterData.menuArray = this.userRoleId
-          this.updateUserRolede(this.filterData).then((res)=>{
-            console.log('测试返回值：', res)
+          this.updateUserRolede(this.filterData).then(()=>{
             this.getList()
           })
           this.filterData.dialogFormVisible = false