docs: update readme

Signed-off-by: yovinchen <gzh298255@gmail.com>

src/api/system/sysMenu.js

@@ -65,5 +65,33 @@ export default {
       method: 'put',
       data: sysMenu
     })
+  },
+  /**
+   * 查看某个角色的权限列表
+   *
+   * @param roleId
+   * @returns {AxiosPromise}
+   */
+
+  toAssign(roleId) {
+    return request({
+      url: `${api_name}/toAssign/${roleId}`,
+      method: 'get'
+    })
+  },
+
+  /**
+   * 给某个角色授权
+   *
+   * @param assignMenuVo
+   * @returns {AxiosPromise}
+   */
+
+  doAssign(assignMenuVo) {
+    return request({
+      url: `${api_name}/doAssign`,
+      method: 'post',
+      data: assignMenuVo
+    })
   }
 }

src/api/user.js

@@ -12,7 +12,7 @@ export function getInfo(token) {
   return request({
     url: '/admin/system/index/info',
     method: 'get',
-    params: {token}
+    params: { token }
   })
 }
 

src/components/ParentView/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

src/layout/components/Sidebar/index.vue

@@ -3,16 +3,16 @@
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
-        :default-active="activeMenu"
+        :active-text-color="variables.menuActiveText"
-        :collapse="isCollapse"
         :background-color="variables.menuBg"
+        :collapse="isCollapse"
+        :collapse-transition="false"
+        :default-active="activeMenu"
         :text-color="variables.menuText"
         :unique-opened="false"
-        :active-text-color="variables.menuActiveText"
-        :collapse-transition="false"
         mode="vertical"
       >
-        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
+        <sidebar-item v-for="route in routes" :key="route.path" :base-path="route.path" :item="route" />
       </el-menu>
     </el-scrollbar>
   </div>
@@ -31,7 +31,8 @@ export default {
       'sidebar'
     ]),
     routes() {
-      return this.$router.options.routes
+      // return this.$router.options.routes
+      return this.$router.options.routes.concat(global.antRouter)
     },
     activeMenu() {
       const route = this.$route

src/main.js

@@ -1,19 +1,20 @@
 import Vue from 'vue'
 
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
-
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import locale from 'element-ui/lib/locale/lang/en' // lang i18n
-
 import '@/styles/index.scss' // global css
-
 import App from './App'
 import store from './store'
 import router from './router'
 
 import '@/icons' // icon
 import '@/permission' // permission control
+// 新增
+import hasBtnPermission from '@/utils/btn-permission'
+
+Vue.prototype.$hasBP = hasBtnPermission
 
 /**
  * If you don't want to use mock-server
@@ -29,9 +30,9 @@ if (process.env.NODE_ENV === 'production') {
 }
 
 // set ElementUI lang to EN
-Vue.use(ElementUI, { locale })
+// Vue.use(ElementUI, { locale })
 // 如果想要中文版 element-ui，按如下方式声明
-// Vue.use(ElementUI)
+Vue.use(ElementUI)
 
 Vue.config.productionTip = false
 

src/permission.js

@@ -1,25 +1,23 @@
 import router from './router'
 import store from './store'
+import { getToken } from '@/utils/auth'
 import { Message } from 'element-ui'
-import NProgress from 'nprogress' // progress bar
+import NProgress from 'nprogress' // 水平进度条提示: 在跳转路由时使用
-import 'nprogress/nprogress.css' // progress bar style
+import 'nprogress/nprogress.css' // 水平进度条样式
-import { getToken } from '@/utils/auth' // get token from cookie
+import getPageTitle from '@/utils/get-page-title' // 获取应用头部标题的函数
-import getPageTitle from '@/utils/get-page-title'
+import Layout from '@/layout'
+import ParentView from '@/components/ParentView'
+
+const _import = require('./router/_import_' + process.env.NODE_ENV) // 获取组件的方法
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
-
 const whiteList = ['/login'] // no redirect whitelist
-
 router.beforeEach(async(to, from, next) => {
-  // start progress bar
   NProgress.start()
-
   // set page title
   document.title = getPageTitle(to.meta.title)
-
   // determine whether the user has logged in
   const hasToken = getToken()
-
   if (hasToken) {
     if (to.path === '/login') {
       // if is logged in, redirect to the home page
@@ -32,11 +30,25 @@ router.beforeEach(async(to, from, next) => {
       } else {
         try {
           // get user info
-          await store.dispatch('user/getInfo')
+          await store.dispatch('user/getInfo')// 请求获取用户信息
-
+          if (store.getters.menus.length < 1) {
+            global.antRouter = []
             next()
+          }
+          const menus = filterAsyncRouter(store.getters.menus)// 1.过滤路由
+          console.log(menus)
+          router.addRoutes(menus) // 2.动态添加路由
+          const lastRou = [{ path: '*', redirect: '/404', hidden: true }]
+          router.addRoutes(lastRou)
+          global.antRouter = menus // 3.将路由数据传递给全局变量，做侧边栏菜单渲染工作
+          next({
+            ...to,
+            replace: true
+          })
+          // next()
         } catch (error) {
           // remove token and go to login page to re-login
+          console.log(error)
           await store.dispatch('user/resetToken')
           Message.error(error || 'Has Error')
           next(`/login?redirect=${to.path}`)
@@ -44,9 +56,7 @@ router.beforeEach(async(to, from, next) => {
         }
       }
     }
-  } else {
+  } else { /* has no token*/
-    /* has no token*/
-
     if (whiteList.indexOf(to.path) !== -1) {
       // in the free login whitelist, go directly
       next()
@@ -58,7 +68,32 @@ router.beforeEach(async(to, from, next) => {
   }
 })
 
-router.afterEach(() => {
+router.afterEach(() => { // finish progress bar
-  // finish progress bar
   NProgress.done()
-})
+}) // // 遍历后台传来的路由字符串，转换为组件对象
+function filterAsyncRouter(asyncRouterMap) {
+  const accessedRouters = asyncRouterMap.filter(route => {
+    if (route.component) {
+      if (route.component === 'Layout') {
+        route.component = Layout
+      } else if (route.component === 'ParentView') {
+        route.component = ParentView
+      } else {
+        try {
+          route.component = _import(route.component)// 导入组件
+        } catch (error) {
+          debugger
+          console.log(error)
+          route.component = _import('dashboard/index')// 导入组件
+        }
+      }
+    }
+    if (route.children && route.children.length > 0) {
+      route.children = filterAsyncRouter(route.children)
+    } else {
+      delete route.children
+    }
+    return true
+  })
+  return accessedRouters
+}

src/router/_import_development.js

@@ -0,0 +1,2 @@
+// 开发环境导入组件
+module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+

src/router/_import_production.js

@@ -0,0 +1,2 @@
+// 生产环境导入组件
+module.exports = file => () => import('@/views/' + file + '.vue')

src/router/index.js

@@ -35,13 +35,6 @@ export const constantRoutes = [
     component: () => import('@/views/login/index'),
     hidden: true
   },
-
-  {
-    path: '/404',
-    component: () => import('@/views/404'),
-    hidden: true
-  },
-
   {
     path: '/',
     component: Layout,
@@ -52,152 +45,7 @@ export const constantRoutes = [
       component: () => import('@/views/dashboard/index'),
       meta: { title: 'Dashboard', icon: 'dashboard' }
     }]
-  },
-  {
-    path: '/system',
-    component: Layout,
-    meta: {
-      title: '系统管理',
-      icon: 'el-icon-s-tools'
-    },
-    alwaysShow: true,
-    children: [
-      {
-        name: 'sysUser',
-        path: 'sysUser',
-        component: () => import('@/views/system/sysUser/list'),
-        meta: {
-          title: '用户管理',
-          icon: 'el-icon-s-custom'
   }
-      },
-      {
-        path: 'sysRole',
-        component: () => import('@/views/system/sysRole/list'),
-        meta: {
-          title: '角色管理',
-          icon: 'el-icon-s-help'
-        }
-      },
-      {
-        name: 'sysMenu',
-        path: 'sysMenu',
-        component: () => import('@/views/system/sysMenu/list'),
-        meta: {
-          title: '菜单管理',
-          icon: 'el-icon-s-unfold'
-        }
-      }
-    ]
-  },
-
-  {
-    path: '/example',
-    component: Layout,
-    redirect: '/example/table',
-    name: 'Example',
-    meta: { title: 'Example', icon: 'el-icon-s-help' },
-    children: [
-      {
-        path: 'table',
-        name: 'Table',
-        component: () => import('@/views/table/index'),
-        meta: { title: 'Table', icon: 'table' }
-      },
-      {
-        path: 'tree',
-        name: 'Tree',
-        component: () => import('@/views/tree/index'),
-        meta: { title: 'Tree', icon: 'tree' }
-      }
-    ]
-  },
-
-  {
-    path: '/form',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        name: 'Form',
-        component: () => import('@/views/form/index'),
-        meta: { title: 'Form', icon: 'form' }
-      }
-    ]
-  },
-
-  {
-    path: '/nested',
-    component: Layout,
-    redirect: '/nested/menu1',
-    name: 'Nested',
-    meta: {
-      title: 'Nested',
-      icon: 'nested'
-    },
-    children: [
-      {
-        path: 'menu1',
-        component: () => import('@/views/nested/menu1/index'), // Parent router-view
-        name: 'Menu1',
-        meta: { title: 'Menu1' },
-        children: [
-          {
-            path: 'menu1-1',
-            component: () => import('@/views/nested/menu1/menu1-1'),
-            name: 'Menu1-1',
-            meta: { title: 'Menu1-1' }
-          },
-          {
-            path: 'menu1-2',
-            component: () => import('@/views/nested/menu1/menu1-2'),
-            name: 'Menu1-2',
-            meta: { title: 'Menu1-2' },
-            children: [
-              {
-                path: 'menu1-2-1',
-                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
-                name: 'Menu1-2-1',
-                meta: { title: 'Menu1-2-1' }
-              },
-              {
-                path: 'menu1-2-2',
-                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
-                name: 'Menu1-2-2',
-                meta: { title: 'Menu1-2-2' }
-              }
-            ]
-          },
-          {
-            path: 'menu1-3',
-            component: () => import('@/views/nested/menu1/menu1-3'),
-            name: 'Menu1-3',
-            meta: { title: 'Menu1-3' }
-          }
-        ]
-      },
-      {
-        path: 'menu2',
-        component: () => import('@/views/nested/menu2/index'),
-        name: 'Menu2',
-        meta: { title: 'menu2' }
-      }
-    ]
-  },
-
-  {
-    path: 'external-link',
-    component: Layout,
-    children: [
-      {
-        path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
-        meta: { title: 'External Link', icon: 'link' }
-      }
-    ]
-  },
-
-  // 404 page must be placed at the end !!!
-  { path: '*', redirect: '/404', hidden: true }
 ]
 
 const createRouter = () => new Router({

src/store/getters.js

@@ -3,6 +3,9 @@ const getters = {
   device: state => state.app.device,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
-  name: state => state.user.name
+  name: state => state.user.name,
+  // 新增
+  buttons: state => state.user.buttons,
+  menus: state => state.user.menus
 }
 export default getters

src/store/modules/user.js

@@ -1,12 +1,15 @@
-import { login, logout, getInfo } from '@/api/user'
+import { getInfo, login, logout } from '@/api/user'
-import { getToken, setToken, removeToken } from '@/utils/auth'
+import { getToken, removeToken, setToken } from '@/utils/auth'
 import { resetRouter } from '@/router'
 
 const getDefaultState = () => {
   return {
     token: getToken(),
     name: '',
-    avatar: ''
+    avatar: '',
+
+    buttons: [], // 新增
+    menus: '' // 新增
   }
 }
 
@@ -24,6 +27,14 @@ const mutations = {
   },
   SET_AVATAR: (state, avatar) => {
     state.avatar = avatar
+  },
+  // 新增
+  SET_BUTTONS: (state, buttons) => {
+    state.buttons = buttons
+  },
+  // 新增
+  SET_MENUS: (state, menus) => {
+    state.menus = menus
   }
 }
 
@@ -46,7 +57,7 @@ const actions = {
   // get user info
   getInfo({ commit, state }) {
     return new Promise((resolve, reject) => {
-      getInfo(state.token).then(response => {
+      getInfo().then(response => {
         const { data } = response
 
         if (!data) {
@@ -57,6 +68,9 @@ const actions = {
 
         commit('SET_NAME', name)
         commit('SET_AVATAR', avatar)
+
+        commit('SET_BUTTONS', data.buttons)
+        commit('SET_MENUS', data.routers)
         resolve(data)
       }).catch(error => {
         reject(error)

src/utils/btn-permission.js

@@ -0,0 +1,12 @@
+import store from '@/store'
+
+/**
+ * 判断当前用户是否有此按钮权限
+ * 按钮权限字符串 permission
+ */
+export default function hasBtnPermission(permission) {
+  // 得到当前用户的所有按钮权限
+  const myBtns = store.getters.buttons
+  // 如果指定的功能权限在myBtns中, 返回true ==> 这个按钮就会显示, 否则隐藏
+  return myBtns.indexOf(permission) !== -1
+}

src/utils/request.js

@@ -19,7 +19,7 @@ service.interceptors.request.use(
       // let each request carry token
       // ['X-Token'] is a custom headers key
       // please modify it according to the actual situation
-      config.headers['X-Token'] = getToken()
+      config.headers['token'] = getToken()
     }
     return config
   },

src/views/login/index.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="login-container">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      auto-complete="on"
+      class="login-form"
+      label-position="left"
+    >
 
       <div class="title-container">
         <h3 class="title">Login Form</h3>
@@ -13,11 +20,11 @@
         <el-input
           ref="username"
           v-model="loginForm.username"
-          placeholder="Username"
-          name="username"
-          type="text"
-          tabindex="1"
           auto-complete="on"
+          name="username"
+          placeholder="Username"
+          tabindex="1"
+          type="text"
         />
       </el-form-item>
 
@@ -30,10 +37,10 @@
           ref="password"
           v-model="loginForm.password"
           :type="passwordType"
-          placeholder="Password"
-          name="password"
-          tabindex="2"
           auto-complete="on"
+          name="password"
+          placeholder="Password"
+          tabindex="2"
           @keyup.enter.native="handleLogin"
         />
         <span class="show-pwd" @click="showPwd">
@@ -41,7 +48,13 @@
         </span>
       </el-form-item>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
+      <el-button
+        :loading="loading"
+        style="width:100%;margin-bottom:30px;"
+        type="primary"
+        @click.native.prevent="handleLogin"
+      >Login
+      </el-button>
 
       <div class="tips">
         <span style="margin-right:20px;">username: admin</span>
@@ -53,13 +66,12 @@
 </template>
 
 <script>
-import { validUsername } from '@/utils/validate'
 
 export default {
   name: 'Login',
   data() {
     const validateUsername = (rule, value, callback) => {
-      if (!validUsername(value)) {
+      if (value.length < 4) {
         callback(new Error('Please enter the correct user name'))
       } else {
         callback()
@@ -129,8 +141,8 @@ export default {
 /* 修复input 背景不协调 和光标变色 */
 /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
-$bg:#283443;
+$bg: #283443;
-$light_gray:#fff;
+$light_gray: #fff;
 $cursor: #fff;
 
 @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
@@ -173,9 +185,9 @@ $cursor: #fff;
 </style>
 
 <style lang="scss" scoped>
-$bg:#2d3a4b;
+$bg: #2d3a4b;
-$dark_gray:#889aa4;
+$dark_gray: #889aa4;
-$light_gray:#eee;
+$light_gray: #eee;
 
 .login-container {
   min-height: 100%;

src/views/system/sysMenu/list.vue

@@ -0,0 +1,332 @@
+<template>
+  <div class="app-container">
+
+    <!-- 工具条 -->
+    <div class="tools-div">
+      <el-button icon="el-icon-plus" size="mini" type="success" @click="add()">添 加</el-button>
+    </div>
+    <el-table
+      :data="sysMenuList"
+      :default-expand-all="false"
+      :tree-props="{children: 'children'}"
+      border
+      row-key="id"
+      style="width: 100%;margin-bottom: 20px;margin-top: 10px;"
+    >
+
+      <el-table-column label="菜单名称" prop="name" width="160" />
+      <el-table-column label="图标">
+        <template slot-scope="scope">
+          <i :class="scope.row.icon" />
+        </template>
+      </el-table-column>
+      <el-table-column label="权限标识" prop="perms" width="160" />
+      <el-table-column label="路由地址" prop="path" width="120" />
+      <el-table-column label="组件路径" prop="component" width="160" />
+      <el-table-column label="排序" prop="sortValue" width="60" />
+      <el-table-column label="状态" width="80">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.status === 1"
+            disabled="true"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" prop="createTime" width="160" />
+      <el-table-column align="center" fixed="right" label="操作" width="180">
+        <template slot-scope="scope">
+          <el-button
+            v-if="scope.row.type !== 2"
+            icon="el-icon-plus"
+            size="mini"
+            title="添加下级节点"
+            type="success"
+            @click="add(scope.row)"
+          />
+          <el-button icon="el-icon-edit" size="mini" title="修改" type="primary" @click="edit(scope.row)" />
+          <el-button
+            :disabled="scope.row.children.length > 0"
+            icon="el-icon-delete"
+            size="mini"
+            title="删除"
+            type="danger"
+            @click="removeDataById(scope.row.id)"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%">
+      <el-form ref="dataForm" :model="sysMenu" label-width="150px" size="small" style="padding-right: 40px;">
+        <el-form-item v-if="sysMenu.id === ''" label="上级部门">
+          <el-input v-model="sysMenu.parentName" disabled="true" />
+        </el-form-item>
+        <el-form-item label="菜单类型" prop="type">
+          <el-radio-group v-model="sysMenu.type" :disabled="typeDisabled">
+            <el-radio :disabled="type0Disabled" :label="0">目录</el-radio>
+            <el-radio :disabled="type1Disabled" :label="1">菜单</el-radio>
+            <el-radio :disabled="type2Disabled" :label="2">按钮</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="菜单名称" prop="name">
+          <el-input v-model="sysMenu.name" />
+        </el-form-item>
+        <el-form-item v-if="sysMenu.type !== 2" label="图标" prop="icon">
+          <el-select v-model="sysMenu.icon" clearable>
+            <el-option v-for="item in iconList" :key="item.class" :label="item.class" :value="item.class">
+              <span style="float: left;">
+                <i :class="item.class" />  <!-- 如果动态显示图标，这里添加判断 -->
+              </span>
+              <span style="padding-left: 6px;">{{ item.class }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="排序">
+          <el-input-number v-model="sysMenu.sortValue" :min="0" controls-position="right" />
+        </el-form-item>
+        <el-form-item prop="path">
+          <span slot="label">
+            <el-tooltip content="访问的路由地址，如：`sysUser`" placement="top">
+              <i class="el-icon-question" />
+            </el-tooltip>
+            路由地址
+          </span>
+          <el-input v-model="sysMenu.path" placeholder="请输入路由地址" />
+        </el-form-item>
+        <el-form-item v-if="sysMenu.type !== 0" prop="component">
+          <span slot="label">
+            <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
+              <i class="el-icon-question" />
+            </el-tooltip>
+            组件路径
+          </span>
+          <el-input v-model="sysMenu.component" placeholder="请输入组件路径" />
+        </el-form-item>
+        <el-form-item v-if="sysMenu.type === 2">
+          <el-input v-model="sysMenu.perms" maxlength="100" placeholder="请输入权限标识" />
+          <span slot="label">
+            <el-tooltip
+              content="控制器中定义的权限字符，如：@PreAuthorize(hasAuthority('bnt.sysRole.list'))"
+              placement="top"
+            >
+              <i class="el-icon-question" />
+            </el-tooltip>
+            权限字符
+          </span>
+        </el-form-item>
+        <el-form-item label="状态" prop="type">
+          <el-radio-group v-model="sysMenu.status">
+            <el-radio :label="1">正常</el-radio>
+            <el-radio :label="0">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button icon="el-icon-refresh-right" size="small" @click="dialogVisible = false">取 消</el-button>
+        <el-button icon="el-icon-check" size="small" type="primary" @click="saveOrUpdate()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import api from '@/api/system/sysMenu'
+
+const defaultForm = {
+  id: '',
+  parentId: '',
+  name: '',
+  type: 0,
+  path: '',
+  component: '',
+  perms: '',
+  icon: '',
+  sortValue: 1,
+  status: 1
+}
+export default {
+  // 定义数据
+  data() {
+    return {
+      sysMenuList: [],
+      expandKeys: [], // 需要自动展开的项
+
+      typeDisabled: false,
+      type0Disabled: false,
+      type1Disabled: false,
+      type2Disabled: false,
+      dialogTitle: '',
+
+      dialogVisible: false,
+      sysMenu: defaultForm,
+      saveBtnDisabled: false,
+
+      iconList: [
+        {
+          class: 'el-icon-s-tools'
+        },
+        {
+          class: 'el-icon-s-custom'
+        },
+        {
+          class: 'el-icon-setting'
+        },
+        {
+          class: 'el-icon-user-solid'
+        },
+        {
+          class: 'el-icon-s-help'
+        },
+        {
+          class: 'el-icon-phone'
+        },
+        {
+          class: 'el-icon-s-unfold'
+        },
+        {
+          class: 'el-icon-s-operation'
+        },
+        {
+          class: 'el-icon-more-outline'
+        },
+        {
+          class: 'el-icon-s-check'
+        },
+        {
+          class: 'el-icon-tickets'
+        },
+        {
+          class: 'el-icon-s-goods'
+        },
+        {
+          class: 'el-icon-document-remove'
+        },
+        {
+          class: 'el-icon-warning'
+        },
+        {
+          class: 'el-icon-warning-outline'
+        },
+        {
+          class: 'el-icon-question'
+        },
+        {
+          class: 'el-icon-info'
+        }
+      ]
+    }
+  },
+
+  // 当页面加载时获取数据
+  created() {
+    this.fetchData()
+  },
+
+  methods: {
+    // 调用api层获取数据库中的数据
+    fetchData() {
+      console.log('加载列表')
+      api.findNodes().then(response => {
+        this.sysMenuList = response.data
+        console.log(this.sysMenuList)
+      })
+    },
+
+    // 根据id删除数据
+    removeDataById(id) {
+      // debugger
+      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => { // promise
+        // 点击确定，远程调用ajax
+        return api.removeById(id)
+      }).then((response) => {
+        this.fetchData()
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        })
+      }).catch(() => {
+        this.$message.info('取消删除')
+      })
+    },
+
+    // -------------
+    add(row) {
+      debugger
+      this.typeDisabled = false
+      this.dialogTitle = '添加下级节点'
+      this.dialogVisible = true
+
+      this.sysMenu = Object.assign({}, defaultForm)
+      this.sysMenu.id = ''
+      if (row) {
+        this.sysMenu.parentId = row.id
+        this.sysMenu.parentName = row.name
+        // this.sysMenu.component = 'ParentView'
+        if (row.type === 0) {
+          this.sysMenu.type = 1
+          this.typeDisabled = false
+          this.type0Disabled = false
+          this.type1Disabled = false
+          this.type2Disabled = true
+        } else if (row.type === 1) {
+          this.sysMenu.type = 2
+          this.typeDisabled = true
+        }
+      } else {
+        this.dialogTitle = '添加目录节点'
+        this.sysMenu.type = 0
+        this.sysMenu.component = 'Layout'
+        this.sysMenu.parentId = 0
+        this.typeDisabled = true
+      }
+    },
+
+    edit(row) {
+      debugger
+      this.dialogTitle = '修改节点'
+      this.dialogVisible = true
+
+      this.sysMenu = Object.assign({}, row)
+      this.typeDisabled = true
+    },
+
+    saveOrUpdate() {
+      if (this.sysMenu.type === 0 && this.sysMenu.parentId !== 0) {
+        this.sysMenu.component = 'ParentView'
+      }
+      this.$refs.dataForm.validate(valid => {
+        if (valid) {
+          this.saveBtnDisabled = true // 防止表单重复提交
+          if (!this.sysMenu.id) {
+            this.saveData()
+          } else {
+            this.updateData()
+          }
+        }
+      })
+    },
+
+    // 新增
+    saveData() {
+      api.save(this.sysMenu).then(response => {
+        this.$message.success(response.message || '操作成功')
+        this.dialogVisible = false
+        this.fetchData(this.page)
+      })
+    },
+
+    // 根据id更新记录
+    updateData() {
+      api.updateById(this.sysMenu).then(response => {
+        this.$message.success(response.message || '操作成功')
+        this.dialogVisible = false
+        this.fetchData()
+      })
+    }
+  }
+}
+</script>

src/views/system/sysRole/assignAuth.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="app-container">
+    <div style="padding: 20px 20px 0 20px;">
+      授权角色：{{ $route.query.roleName }}
+    </div>
+    <el-tree
+      ref="tree"
+      :data="sysMenuList"
+      :props="defaultProps"
+      default-expand-all
+      node-key="id"
+      show-checkbox
+      style="margin: 20px 0"
+    />
+    <div style="padding: 20px 20px;">
+      <el-button :loading="loading" icon="el-icon-check" size="mini" type="primary" @click="save">保存</el-button>
+      <el-button icon="el-icon-refresh-right" size="mini" @click="$router.push('/system/sysRole')">返回</el-button>
+    </div>
+  </div>
+</template>
+<script>
+import api from '@/api/system/sysMenu'
+
+export default {
+  name: 'RoleAuth',
+
+  data() {
+    return {
+      loading: false, // 用来标识是否正在保存请求中的标识, 防止重复提交
+      sysMenuList: [], // 所有
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      }
+    }
+  },
+
+  created() {
+    this.fetchData()
+  },
+
+  methods: {
+    /*
+      初始化
+      */
+    fetchData() {
+      const roleId = this.$route.query.id
+      api.toAssign(roleId).then(result => {
+        const sysMenuList = result.data
+        this.sysMenuList = sysMenuList
+        const checkedIds = this.getCheckedIds(sysMenuList)
+        console.log('getPermissions() checkedIds', checkedIds)
+        this.$refs.tree.setCheckedKeys(checkedIds)
+      })
+    },
+
+    /*
+      得到所有选中的id列表
+      */
+    getCheckedIds(auths, initArr = []) {
+      return auths.reduce((pre, item) => {
+        if (item.select && item.children.length === 0) {
+          pre.push(item.id)
+        } else if (item.children) {
+          this.getCheckedIds(item.children, initArr)
+        }
+        return pre
+      }, initArr)
+    },
+
+    /*
+      保存权限列表
+      */
+    save() {
+      // 获取到当前子节点
+      // const checkedNodes = this.$refs.tree.getCheckedNodes()
+      // 获取到当前子节点及父节点
+      const allCheckedNodes = this.$refs.tree.getCheckedNodes(false, true)
+      const idList = allCheckedNodes.map(node => node.id)
+      console.log(idList)
+      const assginMenuVo = {
+        roleId: this.$route.query.id,
+        menuIdList: idList
+      }
+      this.loading = true
+      api.doAssign(assginMenuVo).then(result => {
+        this.loading = false
+        this.$message.success(result.$message || '分配权限成功')
+        this.$router.push('/system/sysRole')
+      })
+    }
+  }
+}
+</script>

src/views/system/sysRole/list.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="app-container">
-
     <!--查询表单-->
     <div class="search-div">
       <el-form label-width="70px" size="small">
@@ -16,14 +15,20 @@
           </el-button>
           <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
           <!-- 工具条 -->
-          <!--          <div class="tools-div" style="padding-left: 15px">-->
+          <!--          <div class="tools-div">-->
-          <el-button icon="el-icon-plus" size="mini" type="success" @click="add">添 加</el-button>
+          <el-button
+            :disabled="$hasBP('bnt.sysRole.add') === false"
+            icon="el-icon-plus"
+            size="mini"
+            type="success"
+            @click="add"
+          >添 加
+          </el-button>
           <el-button class="btn-add" size="mini" @click="batchRemove()">批量删除</el-button>
           <!--          </div>-->
         </el-row>
       </el-form>
     </div>
-
     <!-- 表格 -->
     <el-table
       v-loading="listLoading"
@@ -59,10 +64,17 @@
             type="danger"
             @click="removeDataById(scope.row.id)"
           />
+          <el-button
+            icon="el-icon-baseball"
+            size="mini"
+            title="分配权限"
+            type="warning"
+            @click="showAssignAuth(scope.row)"
+          />
+
         </template>
       </el-table-column>
     </el-table>
-
     <!-- 分页组件 -->
     <el-pagination
       :current-page="page"
@@ -92,38 +104,42 @@
 </template>
 
 <script>
+// 引入定义接口js文件
 import api from '@/api/system/sysRole'
 
 export default {
-  // 定义数据模型
+  // vue代码结构
+  // 初始值
   data() {
     return {
-      list: [], // 列表
+      list: [], // 角色列表
+      page: 1, // 当前页
+      limit: 10, // 每页显示记录数
       total: 0, // 总记录数
-      page: 1, // 页码
+      searchObj: {}, // 条件对象
-      limit: 10, // 每页记录数
+
-      searchObj: {}, // 查询条件
+      selections: [], // 多个复选框值
-      multipleSelection: [], // 批量删除选中的记录列表
+      sysRole: {}, // 封装表单角色数据
-      dialogVisible: false, // 是否弹框
+      dialogVisible: false// 是否弹框
-      sysRole: {}, // 封装表单用户数据
-      saveBtnDisabled: false
     }
   },
-  // 页面渲染成功后获取数据
+  created() { // 渲染之前执行
-  created() {
     this.fetchData()
   },
-  // 定义方法
+  methods: { // 操作方法
-  methods: {
+    // 跳转分配菜单页面
-
+    showAssignAuth(row) {
-    // 当多选选项发生变化的时候调用
+      this.$router.push('/system/assignAuth?id=' + row.id + '&roleName=' + row.roleName)
+    },
+    // 选择复选框，把复选框所在行内容传递
     handleSelectionChange(selection) {
-      console.log(selection)
+      this.selections = selection
-      this.multipleSelection = selection
+      console.log(this.selections)
     },
     // 批量删除
     batchRemove() {
-      if (this.multipleSelection.length === 0) {
+      // 判断
+      if (this.selections.length === 0) {
         this.$message.warning('请选择要删除的记录！')
         return
       }
@@ -132,20 +148,19 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        // 点击确定，远程调用ajax
+        // [1,2,3]
-        // 遍历selection，将id取出放入id列表
         var idList = []
-        this.multipleSelection.forEach(item => {
+        // 选择复选框数据在数组里面 this.selections
-          idList.push(item.id)
+        this.selections.forEach(item => {
+          var id = item.id
+          idList.push(id)
         })
-        // 调用api
         return api.batchRemove(idList)
-      }).then((response) => {
+      }).then(response => {
-        this.fetchData()
         this.$message.success(response.message)
+        this.fetchData()
       })
     },
-
     // 点击修改，弹出框，根据id查询数据显示
     edit(id) {
       // 弹出框
@@ -153,74 +168,69 @@ export default {
       // 根据id查询
       this.fetchDataById(id)
     },
-
+    // 根据id查询
     fetchDataById(id) {
-      api.getById(id).then(response => {
+      api.getById(id)
+        .then(response => {
           this.sysRole = response.data
         })
     },
-
+    // 点击添加弹出框
-    // 点击添加弹框
     add() {
       this.dialogVisible = true
     },
-
+    // 添加或者修改
     saveOrUpdate() {
-      this.saveBtnDisabled = true // 防止表单重复提交
       // 根据id判断
       if (!this.sysRole.id) { // 添加
-        this.saveData()
+        this.save()
       } else { // 修改
-        this.updateData()
+        this.update()
       }
     },
-
+    save() { // 添加
-    // 新增
+      api.saveRole(this.sysRole)
-    saveData() {
+        .then(response => {
-      api.save(this.sysRole).then(response => {
           // 提示
           this.$message.success(response.message || '操作成功')
           // 关闭弹框
           this.dialogVisible = false
           // 刷新页面
-        this.fetchData(this.page)
+          this.fetchData()
         })
     },
-
+    update() { // 修改
-    // 修改
+      api.updateById(this.sysRole)
-    updateData() {
+        .then(response => {
-      api.updateById(this.sysRole).then(response => {
           // 提示
           this.$message.success(response.message || '操作成功')
           // 关闭弹框
           this.dialogVisible = false
           // 刷新页面
-        this.fetchData(this.page)
+          this.fetchData()
         })
     },
-
     // 条件分页查询
     fetchData(current = 1) {
       this.page = current
-      // 调用api
+      api.getPageList(this.page, this.limit, this.searchObj)
-      api.getPageList(this.page, this.limit, this.searchObj).then(response => {
+        .then(response => {
           this.list = response.data.records
           this.total = response.data.total
         })
     },
-    // 根据id删除数据
+    // 删除
     removeDataById(id) {
-      // debugger
       this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-      }).then(() => { // promise
+      }).then(() => {
-        // 点击确定，远程调用ajax
+        // 调用
         return api.removeById(id)
-      }).then((response) => {
+      }).then(response => {
         // 刷新页面
-        this.fetchData(this.page)
+        this.fetchData()
         // 提示信息
         this.$message.success(response.message || '删除成功')
       })

src/views/system/sysUser/list.vue

@@ -66,7 +66,10 @@
       </el-table-column>
       <el-table-column label="状态" width="80">
         <template slot-scope="scope">
-          <el-switch v-model="scope.row.status === 1" @change="switchStatus(scope.row)" />
+          <el-switch
+            v-model="scope.row.status === 1"
+            @change="switchStatus(scope.row)"
+          />
         </template>
       </el-table-column>
       <el-table-column label="创建时间" prop="createTime" width="160" />