增加角色的管理功能

可以分配菜单权限

back/src/main/java/com/heeexy/example/controller/UserController.java

@@ -3,6 +3,7 @@ package com.heeexy.example.controller;
 import com.alibaba.fastjson.JSONObject;
 import com.heeexy.example.service.UserService;
 import com.heeexy.example.util.CommonUtil;
+import org.apache.shiro.authz.annotation.Logical;
 import org.apache.shiro.authz.annotation.RequiresPermissions;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.*;
@@ -46,9 +47,68 @@ public class UserController {
         return userService.updateUser(requestJson);
     }
 
-    @RequiresPermissions("user:update")
+    @RequiresPermissions(value = {"user:add", "user:update"}, logical = Logical.OR)
     @GetMapping("/getAllRoles")
     public JSONObject getAllRoles() {
         return userService.getAllRoles();
     }
+
+    /**
+     * 角色列表
+     *
+     * @return
+     */
+    @RequiresPermissions("role:list")
+    @GetMapping("/listRole")
+    public JSONObject listRole() {
+        return userService.listRole();
+    }
+
+    /**
+     * 查询所有权限, 给角色分配权限时调用
+     *
+     * @return
+     */
+    @RequiresPermissions("role:list")
+    @GetMapping("/listAllPermission")
+    public JSONObject listAllPermission() {
+        return userService.listAllPermission();
+    }
+
+    /**
+     * 新增角色
+     *
+     * @return
+     */
+    @RequiresPermissions("role:add")
+    @PostMapping("/addRole")
+    public JSONObject addRole(@RequestBody JSONObject requestJson) {
+        CommonUtil.hasAllRequired(requestJson, "roleName,permissions");
+        return userService.addRole(requestJson);
+    }
+
+    /**
+     * 修改角色
+     *
+     * @return
+     */
+    @RequiresPermissions("role:update")
+    @PostMapping("/updateRole")
+    public JSONObject updateRole(@RequestBody JSONObject requestJson) {
+        CommonUtil.hasAllRequired(requestJson, "roleId,roleName,permissions");
+        return userService.updateRole(requestJson);
+    }
+
+    /**
+     * 删除角色
+     *
+     * @param requestJson
+     * @return
+     */
+    @RequiresPermissions("role:delete")
+    @PostMapping("/deleteRole")
+    public JSONObject deleteRole(@RequestBody JSONObject requestJson) {
+        CommonUtil.hasAllRequired(requestJson, "roleId");
+        return userService.deleteRole(requestJson);
+    }
 }

back/src/main/java/com/heeexy/example/dao/UserDao.java

@@ -1,6 +1,7 @@
 package com.heeexy.example.dao;
 
 import com.alibaba.fastjson.JSONObject;
+import org.apache.ibatis.annotations.Param;
 
 import java.util.List;
 
@@ -49,4 +50,76 @@ public interface UserDao {
      * @return
      */
     int updateUser(JSONObject jsonObject);
+    /**
+     * 角色列表
+     *
+     * @return
+     */
+    List<JSONObject> listRole();
+
+    /**
+     * 查询所有权限, 给角色分配权限时调用
+     *
+     * @return
+     */
+    List<JSONObject> listAllPermission();
+
+    /**
+     * 新增角色
+     *
+     * @param jsonObject
+     * @return
+     */
+    int insertRole(JSONObject jsonObject);
+
+    /**
+     * 批量插入角色的权限
+     *
+     * @param roleId      角色ID
+     * @param permissions 权限
+     * @return
+     */
+    int insertRolePermission(@Param("roleId") String roleId, @Param("permissions") List<Integer> permissions);
+
+    /**
+     * 将角色曾经拥有而修改为不再拥有的权限 delete_status改为'2'
+     *
+     * @param roleId
+     * @param permissions
+     * @return
+     */
+    int removeOldPermission(@Param("roleId") String roleId, @Param("permissions") List<Integer> permissions);
+
+    /**
+     * 修改角色名称
+     *
+     * @param jsonObject
+     * @return
+     */
+    int updateRoleName(JSONObject jsonObject);
+
+    /**
+     * 查询某角色的全部数据
+     * 在删除和修改角色时调用
+     *
+     * @param jsonObject
+     * @return
+     */
+    JSONObject getRoleAllInfo(JSONObject jsonObject);
+
+    /**
+     * 删除角色
+     *
+     * @param jsonObject
+     * @return
+     */
+    int removeRole(JSONObject jsonObject);
+
+    /**
+     * 删除本角色全部权限
+     *
+     * @param jsonObject
+     * @return
+     */
+    int removeRoleAllPermission(JSONObject jsonObject);
 }

back/src/main/java/com/heeexy/example/service/UserService.java

@@ -43,10 +43,16 @@ public interface UserService {
     /**
      * 角色列表
      *
-     * @param jsonObject
      * @return
      */
-    JSONObject listRole(JSONObject jsonObject);
+    JSONObject listRole();
+
+    /**
+     * 查询所有权限, 给角色分配权限时调用
+     *
+     * @return
+     */
+    JSONObject listAllPermission();
 
     /**
      * 添加角色
@@ -63,4 +69,12 @@ public interface UserService {
      * @return
      */
     JSONObject updateRole(JSONObject jsonObject);
+
+    /**
+     * 删除角色
+     *
+     * @param jsonObject
+     * @return
+     */
+    JSONObject deleteRole(JSONObject jsonObject);
 }

back/src/main/java/com/heeexy/example/service/impl/UserServiceImpl.java

@@ -4,10 +4,15 @@ import com.alibaba.fastjson.JSONObject;
 import com.heeexy.example.dao.UserDao;
 import com.heeexy.example.service.UserService;
 import com.heeexy.example.util.CommonUtil;
+import com.heeexy.example.util.constants.ErrorEnum;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
 
+import java.util.ArrayList;
+import java.util.Collection;
 import java.util.List;
+import java.util.Set;
 
 /**
  * @author: hxy
@@ -72,12 +77,23 @@ public class UserServiceImpl implements UserService {
     /**
      * 角色列表
      *
-     * @param jsonObject
      * @return
      */
     @Override
-    public JSONObject listRole(JSONObject jsonObject) {
-        return null;
+    public JSONObject listRole() {
+        List<JSONObject> roles = userDao.listRole();
+        return CommonUtil.successPage(roles);
+    }
+
+    /**
+     * 查询所有权限, 给角色分配权限时调用
+     *
+     * @return
+     */
+    @Override
+    public JSONObject listAllPermission() {
+        List<JSONObject> permissions = userDao.listAllPermission();
+        return CommonUtil.successPage(permissions);
     }
 
     /**
@@ -86,9 +102,12 @@ public class UserServiceImpl implements UserService {
      * @param jsonObject
      * @return
      */
+    @Transactional(rollbackFor = Exception.class)
     @Override
     public JSONObject addRole(JSONObject jsonObject) {
-        return null;
+        userDao.insertRole(jsonObject);
+        userDao.insertRolePermission(jsonObject.getString("roleId"), (List<Integer>) jsonObject.get("permissions"));
+        return CommonUtil.successJson();
     }
 
     /**
@@ -97,8 +116,92 @@ public class UserServiceImpl implements UserService {
      * @param jsonObject
      * @return
      */
+    @Transactional(rollbackFor = Exception.class)
     @Override
     public JSONObject updateRole(JSONObject jsonObject) {
-        return null;
+        String roleId = jsonObject.getString("roleId");
+        System.out.println("jsonObject的值为:" + jsonObject);
+        List<Integer> newPerms = (List<Integer>) jsonObject.get("permissions");
+        System.out.println("ids的值为:" + newPerms);
+        JSONObject roleInfo = userDao.getRoleAllInfo(jsonObject);
+        Set<Integer> oldPerms = (Set<Integer>) roleInfo.get("permissionIds");
+        //修改角色名称
+        dealRoleName(jsonObject, roleInfo);
+        //添加新权限
+        saveNewPermission(roleId, newPerms, oldPerms);
+        //移除旧的不再拥有的权限
+        removeOldPermission(roleId, newPerms, oldPerms);
+        return CommonUtil.successJson();
+    }
+
+    /**
+     * 修改角色名称
+     *
+     * @param paramJson
+     * @param roleInfo
+     */
+    private void dealRoleName(JSONObject paramJson, JSONObject roleInfo) {
+        String roleName = paramJson.getString("roleName");
+        if (!roleName.equals(roleInfo.getString("roleName"))) {
+            userDao.updateRoleName(paramJson);
+        }
+    }
+
+    /**
+     * 为角色添加新权限
+     *
+     * @param newPerms
+     * @param oldPerms
+     */
+    private void saveNewPermission(String roleId, Collection<Integer> newPerms, Collection<Integer> oldPerms) {
+        List<Integer> waitInsert = new ArrayList<>();
+        for (Integer newPerm : newPerms) {
+            if (!oldPerms.contains(newPerm)) {
+                waitInsert.add(newPerm);
+            }
+        }
+        System.out.println("waitInsert的值为:" + waitInsert);
+        if (waitInsert.size() > 0) {
+            userDao.insertRolePermission(roleId, waitInsert);
+        }
+    }
+
+    /**
+     * 删除角色 旧的 不再拥有的权限
+     *
+     * @param roleId
+     * @param newPerms
+     * @param oldPerms
+     */
+    private void removeOldPermission(String roleId, Collection<Integer> newPerms, Collection<Integer> oldPerms) {
+        List<Integer> waitRemove = new ArrayList<>();
+        for (Integer oldPerm : oldPerms) {
+            if (!newPerms.contains(oldPerm)) {
+                waitRemove.add(oldPerm);
+            }
+        }
+        System.out.println("waitRemove的值为:" + waitRemove);
+        if (waitRemove.size() > 0) {
+            userDao.removeOldPermission(roleId, waitRemove);
+        }
+    }
+
+    /**
+     * 删除角色
+     *
+     * @param jsonObject
+     * @return
+     */
+    @Transactional(rollbackFor = Exception.class)
+    @Override
+    public JSONObject deleteRole(JSONObject jsonObject) {
+        JSONObject roleInfo = userDao.getRoleAllInfo(jsonObject);
+        List<JSONObject> users = (List<JSONObject>) roleInfo.get("users");
+        if (users != null && users.size() > 0) {
+            return CommonUtil.errorJson(ErrorEnum.E_10008);
+        }
+        userDao.removeRole(jsonObject);
+        userDao.removeRoleAllPermission(jsonObject);
+        return CommonUtil.successJson();
     }
 }

back/src/main/java/com/heeexy/example/util/constants/ErrorEnum.java

@@ -12,6 +12,7 @@ public enum ErrorEnum {
     E_500("500", "请求方式有误,请检查 GET/POST"),
     E_501("501", "请求路径不存在"),
     E_502("502", "权限不足"),
+    E_10008("10008", "角色删除失败,尚有用户属于此角色"),
 
     E_20011("20011", "登陆已过期,请重新登陆"),
 

back/src/main/java/com/heeexy/example/util/model/One2Many.java

@@ -2,6 +2,7 @@ package com.heeexy.example.util.model;
 
 import com.alibaba.fastjson.JSONObject;
 
+import java.util.List;
 import java.util.Set;
 
 /**
@@ -14,6 +15,51 @@ public class One2Many extends JSONObject {
     private Set<String> roleList;
     private Set<String> menuList;
     private Set<String> permissionList;
+    private Set<Integer> permissionIds;
+    private List<JSONObject> picList;
+    private List<JSONObject> menus;
+    private List<JSONObject> users;
+    private List<JSONObject> permissions;
+
+    public Set<Integer> getPermissionIds() {
+        return permissionIds;
+    }
+
+    public void setPermissionIds(Set<Integer> permissionIds) {
+        this.permissionIds = permissionIds;
+    }
+
+    public List<JSONObject> getPicList() {
+        return picList;
+    }
+
+    public void setPicList(List<JSONObject> picList) {
+        this.picList = picList;
+    }
+
+    public List<JSONObject> getMenus() {
+        return menus;
+    }
+
+    public void setMenus(List<JSONObject> menus) {
+        this.menus = menus;
+    }
+
+    public List<JSONObject> getUsers() {
+        return users;
+    }
+
+    public void setUsers(List<JSONObject> users) {
+        this.users = users;
+    }
+
+    public List<JSONObject> getPermissions() {
+        return permissions;
+    }
+
+    public void setPermissions(List<JSONObject> permissions) {
+        this.permissions = permissions;
+    }
 
     public Set<String> getRoleList() {
         return roleList;

back/src/main/resources/mapper/UserMapper.xml

@@ -26,8 +26,8 @@
     <select id="listUser" resultMap="userMap">
         SELECT
             u.*,
-            r.role_name                             roleName,
-            CONCAT(p.menu_name, p.permission_name)  permissionName
+            r.role_name                            roleName,
+            CONCAT(p.menu_name, p.permission_name) permissionName
         FROM (
                  SELECT
                      id                                      userId,
@@ -58,8 +58,8 @@
 
     <insert id="addUser" useGeneratedKeys="true" keyProperty="userId">
         INSERT INTO sys_user
-        (username, password, nickname,  role_id) VALUES
-            (#{username}, #{password}, #{nickname},   #{roleId})
+        (username, password, nickname, role_id) VALUES
+            (#{username}, #{password}, #{nickname}, #{roleId})
     </insert>
 
     <update id="updateUser">
@@ -74,4 +74,123 @@
         , delete_status = #{deleteStatus}
         WHERE id = #{userId}
     </update>
+    <resultMap id="roleMap" type="com.heeexy.example.util.model.One2Many">
+        <id column="roleId" property="roleId"/>
+        <result column="roleName" property="roleName"/>
+        <collection property="users" ofType="com.alibaba.fastjson.JSONObject">
+            <id column="userId" property="userId"/>
+            <result column="nickname" property="nickname"/>
+        </collection>
+        <collection property="menus" ofType="com.heeexy.example.util.model.One2Many">
+            <id column="menuCode" property="menuCode"/>
+            <result column="menuName" property="menuName"/>
+            <collection property="permissions" ofType="com.alibaba.fastjson.JSONObject">
+                <id column="permissionId" property="permissionId"/>
+                <result column="permissionName" property="permissionName"/>
+            </collection>
+        </collection>
+    </resultMap>
+    <select id="listRole" resultMap="roleMap">
+        SELECT
+            r.id              roleId,
+            r.role_name       roleName,
+            u.id              userId,
+            u.nickname        nickname,
+            p.id              permissionId,
+            p.menu_code       menuCode,
+            p.menu_name       menuName,
+            p.permission_name permissionName
+        FROM sys_role r
+            LEFT JOIN sys_user u ON r.id = u.role_id AND u.delete_status = '1'
+            LEFT JOIN sys_role_permission rp ON r.id = rp.role_id AND rp.delete_status = '1'
+            LEFT JOIN sys_permission p ON rp.permission_id = p.id
+        WHERE r.delete_status = '1'
+        ORDER BY r.id, p.id
+    </select>
+    <resultMap id="permissionMap" type="com.heeexy.example.util.model.One2Many">
+        <id column="menuName" property="menuName"/>
+        <collection property="permissions" ofType="com.alibaba.fastjson.JSONObject">
+            <id column="id" property="id"/>
+            <result column="permissionName" property="permissionName"/>
+            <result column="requiredPerm" property="requiredPerm" javaType="Integer"/>
+        </collection>
+    </resultMap>
+    <select id="listAllPermission" resultMap="permissionMap">
+        SELECT
+            p.id                  id,
+            p.menu_name           menuName,
+            p.permission_name     permissionName,
+            p.required_permission requiredPerm
+        FROM sys_permission p;
+    </select>
+
+    <insert id="insertRole" useGeneratedKeys="true" keyProperty="roleId">
+        INSERT INTO sys_role
+        (role_name)
+        VALUES (#{roleName})
+    </insert>
+
+    <insert id="insertRolePermission">
+        insert into sys_role_permission (role_id, permission_id)
+        values
+        <foreach collection="permissions" item="item" index="index" separator=",">
+            (#{roleId}, #{item})
+        </foreach>
+    </insert>
+
+
+    <resultMap id="aRole" type="com.heeexy.example.util.model.One2Many">
+        <id column="roleId" property="roleId"/>
+        <result column="roleName" property="roleName"/>
+        <collection property="users" ofType="com.alibaba.fastjson.JSONObject">
+            <id column="userId" property="userId"/>
+        </collection>
+        <collection property="permissionIds" ofType="Integer">
+            <id column="permissionId" property="permissionId"/>
+        </collection>
+    </resultMap>
+    <select id="getRoleAllInfo" resultMap="aRole">
+        SELECT
+            r.id        roleId,
+            r.role_name roleName,
+            u.id        userId,
+            p.id        permissionId
+        FROM sys_role r
+            LEFT JOIN sys_user u ON r.id = u.role_id AND u.delete_status = '1'
+            LEFT JOIN sys_role_permission rp ON r.id = rp.role_id AND rp.delete_status = '1'
+            LEFT JOIN sys_permission p ON rp.permission_id = p.id
+        WHERE r.id = #{roleId}
+    </select>
+
+
+    <update id="removeRole">
+        UPDATE sys_role
+        SET
+            delete_status = '2'
+        WHERE id = #{roleId}
+    </update>
+    <update id="removeRoleAllPermission">
+        UPDATE sys_role_permission
+        SET
+            delete_status = '2'
+        WHERE role_id = #{roleId}
+    </update>
+
+    <update id="removeOldPermission">
+        UPDATE sys_role_permission
+        SET
+        delete_status = '2'
+        WHERE role_id = #{roleId}
+        AND permission_id in (
+        <foreach collection="permissions" item="item" index="index" separator=",">
+            #{item}
+        </foreach>
+        )
+    </update>
+    <update id="updateRoleName">
+        UPDATE sys_role
+        SET
+            role_name = #{roleName}
+        WHERE id = #{roleId}
+    </update>
 </mapper>

vue/src/router/index.js

@@ -50,6 +50,7 @@ export const asyncRouterMap = [
     icon: '管理员',
     children: [
       {path: '', component: _import('user/user'), name: '用户列表', menu: 'user'},
+      {path: 'role', component: _import('user/role'), name: '权限管理', menu: 'role'},
     ]
   },
   {path: '*', redirect: '/404', hidden: true}

vue/src/views/user/role.vue

@@ -0,0 +1,336 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-form>
+        <el-form-item>
+          <el-button type="success" icon="plus" v-if="hasPerm('user:add')" @click="showCreate">添加角色
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit
+              highlight-current-row>
+      <el-table-column align="center" label="序号" width="80">
+        <template scope="scope">
+          <span v-text="getIndex(scope.$index)"> </span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="角色" prop="roleName" width="150"></el-table-column>
+      <el-table-column align="center" label="用户">
+        <template scope="scope">
+          <div v-for="user in scope.row.users">
+            <div v-text="user.nickname" style="display: inline-block;vertical-align: middle;"></div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="菜单&权限" width="420">
+        <template scope="scope">
+          <el-tag v-if="scope.row.roleName==adminName" type="success">全部</el-tag>
+          <div v-else>
+            <div v-for="menu in scope.row.menus" style="text-align: left">
+              <span style="width: 100px;display: inline-block;text-align: right ">{{menu.menuName}}</span>
+              <el-tag v-for="perm in menu.permissions" :key="perm.permissionName" v-text="perm.permissionName"
+                      style="margin-right: 3px;"
+                      type="primary"></el-tag>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="管理" width="220" v-if="hasPerm('role:update') ||hasPerm('role:delete') ">
+        <template scope="scope">
+          <div v-if="scope.row.roleName!='管理员'">
+            <el-button type="primary" icon="edit" @click="showUpdate(scope.$index)" v-if="hasPerm('role:update')">修改
+            </el-button>
+            <el-button v-if=" scope.row.users && scope.row.users.length===0 && hasPerm('role:delete')" type="danger"
+                       icon="delete"
+                       @click="removeRole(scope.$index)">
+              删除
+            </el-button>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
+      <el-form class="small-space" :model="tempRole" label-position="left" label-width="100px"
+               style='width: 500px; margin-left:50px;'>
+        <el-form-item label="角色名称" required>
+          <el-input type="text" v-model="tempRole.roleName" style="width: 250px;">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="菜单&权限" required>
+          <div v-for=" (menu,_index) in allPermission" :key="menu.menuName">
+            <span style="width: 100px;display: inline-block;">
+              <el-button :type="isMenuNone(_index)?'':(isMenuAll(_index)?'success':'primary')" size="mini"
+                         style="width:80px;"
+                         @click="checkAll(_index)">{{menu.menuName}}</el-button>
+            </span>
+            <div style="display: inline-block;margin-left:20px;">
+              <el-checkbox-group v-model="tempRole.permissions">
+                <el-checkbox v-for="perm in menu.permissions" :label="perm.id" @change="checkRequired(perm,_index)"
+                             :key="perm.id">
+                  <span :class="{requiredPerm:perm.requiredPerm===1}">{{perm.permissionName}}</span>
+                </el-checkbox>
+              </el-checkbox-group>
+            </div>
+          </div>
+          <p style="color:#848484;">说明:红色权限为对应菜单内的必选权限</p>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button v-if="dialogStatus=='create'" type="success" @click="createRole">创 建</el-button>
+        <el-button type="primary" v-else @click="updateRole">修 改</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        list: [],//表格的数据
+        allPermission: [],
+        listLoading: false,//数据加载等待动画
+        dialogStatus: 'create',
+        dialogFormVisible: false,
+        textMap: {
+          update: '编辑',
+          create: '新建角色'
+        },
+        tempRole: {
+          roleName: '',
+          roleId: '',
+          permissions: [],
+        },
+        adminName: '管理员'
+      }
+    },
+    created() {
+      this.getList();
+      this.getAllPermisson();
+    },
+    methods: {
+      getAllPermisson() {
+        //查询所有权限
+        this.api({
+          url: "/user/listAllPermission",
+          method: "get"
+        }).then(data => {
+          console.info(data);
+          this.allPermission = data.list;
+        })
+      },
+      getList() {
+        //查询列表
+        this.listLoading = true;
+        this.api({
+          url: "/user/listRole",
+          method: "get"
+        }).then(data => {
+          console.info(data);
+          this.listLoading = false;
+          this.list = data.list;
+        })
+      },
+      getIndex($index) {
+        //表格序号
+        return $index + 1
+      },
+      showCreate() {
+        //显示新增对话框
+        this.tempRole.roleName = '';
+        this.tempRole.roleId = '';
+        this.tempRole.permissions = [];
+        this.dialogStatus = "create"
+        this.dialogFormVisible = true
+      },
+      showUpdate($index) {
+        let role = this.list[$index];
+        this.tempRole.roleName = role.roleName;
+        this.tempRole.roleId = role.roleId;
+        this.tempRole.permissions = [];
+        for (let i = 0; i < role.menus.length; i++) {
+          let perm = role.menus[i].permissions;
+          for (let j = 0; j < perm.length; j++) {
+            this.tempRole.permissions.push(perm[j].permissionId);
+          }
+        }
+        this.dialogStatus = "update"
+        this.dialogFormVisible = true
+      },
+      createRole() {
+        if (!this.checkRoleNameUnique()) {
+          return;
+        }
+        if (!this.checkPermissionNum()) {
+          return;
+        }
+        //添加新角色
+        this.api({
+          url: "/user/addRole",
+          method: "post",
+          data: this.tempRole
+        }).then(() => {
+          this.getList();
+          this.dialogFormVisible = false
+        })
+      },
+      updateRole() {
+        if (!this.checkRoleNameUnique(this.tempRole.roleId)) {
+          return;
+        }
+        if (!this.checkPermissionNum()) {
+          return;
+        }
+        //修改角色
+        this.api({
+          url: "/user/updateRole",
+          method: "post",
+          data: this.tempRole
+        }).then(() => {
+          this.getList();
+          this.dialogFormVisible = false
+        })
+      },
+      checkPermissionNum() {
+        //校验至少有一种权限
+        if (this.tempRole.permissions.length === 0) {
+          this.$message.error("请至少选择一种权限");
+          return false;
+        }
+        return true;
+      },
+      checkRoleNameUnique(roleId) {
+        //校验名称重复
+        let roleName = this.tempRole.roleName;
+        if (!roleName) {
+          this.$message.error("请填写角色名称");
+          return false;
+        }
+        let roles = this.list;
+        let result = true;
+        for (let j = 0; j < roles.length; j++) {
+          if (roles[j].roleName === roleName && (!roleId || roles[j].roleId !== roleId  )) {
+            this.$message.error("角色名称已存在");
+            result = false;
+            break;
+          }
+        }
+        return result;
+      },
+      removeRole($index) {
+        let _vue = this;
+        this.$confirm('确定删除此角色?', '提示', {
+          confirmButtonText: '确定',
+          showCancelButton: false,
+          type: 'warning'
+        }).then(() => {
+          let role = _vue.list[$index];
+          _vue.api({
+            url: "/user/deleteRole",
+            method: "post",
+            data: {
+              roleId: role.roleId
+            }
+          }).then(() => {
+            _vue.getList()
+          }).catch(e => {
+            console.info(e);
+          })
+        })
+      },
+      isMenuNone(_index) {
+        //判断本级菜单内的权限是否一个都没选
+        let menu = this.allPermission[_index].permissions;
+        let result = true;
+        for (let j = 0; j < menu.length; j++) {
+          if (this.tempRole.permissions.indexOf(menu[j].id) > -1) {
+            result = false;
+            break;
+          }
+        }
+        return result;
+      },
+      isMenuAll(_index) {
+        //判断本级菜单内的权限是否全选了
+        let menu = this.allPermission[_index].permissions;
+        let result = true;
+        for (let j = 0; j < menu.length; j++) {
+          if (this.tempRole.permissions.indexOf(menu[j].id) < 0) {
+            result = false;
+            break;
+          }
+        }
+        return result;
+      },
+      checkAll(_index) {
+        //点击菜单   相当于全选按钮
+        let v = this;
+        if (v.isMenuAll(_index)) {
+          //如果已经全选了,则全部取消
+          v.noPerm(_index);
+        } else {
+          //如果尚未全选,则全选
+          v.allPerm(_index);
+        }
+      },
+      allPerm(_index) {
+        //全部选中
+        let menu = this.allPermission[_index].permissions;
+        for (let j = 0; j < menu.length; j++) {
+          this.addUnique(menu[j].id, this.tempRole.permissions)
+        }
+      },
+      noPerm(_index) {
+        //全部取消选中
+        let menu = this.allPermission[_index].permissions;
+        for (let j = 0; j < menu.length; j++) {
+          let idIndex = this.tempRole.permissions.indexOf(menu[j].id);
+          if (idIndex > -1) {
+            this.tempRole.permissions.splice(idIndex, 1);
+          }
+        }
+      },
+      addUnique(val, arr) {
+        //数组内防重复地添加元素
+        let _index = arr.indexOf(val);
+        if (_index < 0) {
+          arr.push(val);
+        }
+      },
+      checkRequired(_perm, _index) {
+        //本方法会在勾选状态改变之后触发
+        let permId = _perm.id;
+        if (this.tempRole.permissions.indexOf(permId) > -1) {
+          //选中事件
+          //如果之前未勾选本权限,现在勾选完之后,tempRole里就会包含本id
+          //那么就要将必选的权限勾上
+          this.makeReuqiredPermissionChecked(_index);
+        } else {
+          //取消选中事件
+          if (_perm.requiredPerm === 1) {
+            //如果是必勾权限,就把本菜单的权限全部移出
+            //(其实也可以提示用户本权限是菜单里的必选,请先取消勾选另外几个权限,交互太麻烦,此处就直接全部取消选中了)
+            this.noPerm(_index);
+          }
+        }
+      },
+      makeReuqiredPermissionChecked(_index) {
+        //将本菜单必选的权限勾上
+        let menu = this.allPermission[_index].permissions;
+        for (let j = 0; j < menu.length; j++) {
+          let perm = menu[j];
+          if (perm.requiredPerm === 1) {
+            //找到本菜单的必选权限,将其勾上
+            this.addUnique(perm.id, this.tempRole.permissions)
+          }
+        }
+      }
+    }
+  }
+</script>
+<style scoped>
+  .requiredPerm {
+    color: #ff0e13;
+  }
+</style>

vue/src/views/user/user.vue

@@ -112,7 +112,9 @@
     },
     created() {
       this.getList();
-      this.getAllRoles();
+      if (this.hasPerm('user:add') || this.hasPerm('user:update')) {
+        this.getAllRoles();
+      }
     },
     computed: {
       ...mapGetters([
@@ -178,7 +180,6 @@
         this.dialogStatus = "update"
         this.dialogFormVisible = true
       },
-
       createUser() {
         //添加新用户
         this.api({