作者 RuoYi

用户管理新增分配角色功能

@@ -202,4 +202,31 @@ public class SysUserController extends BaseController @@ -202,4 +202,31 @@ public class SysUserController extends BaseController
202 user.setUpdateBy(SecurityUtils.getUsername()); 202 user.setUpdateBy(SecurityUtils.getUsername());
203 return toAjax(userService.updateUserStatus(user)); 203 return toAjax(userService.updateUserStatus(user));
204 } 204 }
  205 +
  206 + /**
  207 + * 根据用户编号获取授权角色
  208 + */
  209 + @PreAuthorize("@ss.hasPermi('system:user:query')")
  210 + @GetMapping("/authRole/{userId}")
  211 + public AjaxResult authRole(@PathVariable("userId") Long userId)
  212 + {
  213 + AjaxResult ajax = AjaxResult.success();
  214 + SysUser user = userService.selectUserById(userId);
  215 + List<SysRole> roles = roleService.selectRolesByUserId(userId);
  216 + ajax.put("user", user);
  217 + ajax.put("roles", SysUser.isAdmin(userId) ? roles : roles.stream().filter(r -> !r.isAdmin()).collect(Collectors.toList()));
  218 + return ajax;
  219 + }
  220 +
  221 + /**
  222 + * 用户授权角色
  223 + */
  224 + @PreAuthorize("@ss.hasPermi('system:user:edit')")
  225 + @Log(title = "用户管理", businessType = BusinessType.GRANT)
  226 + @PutMapping("/authRole")
  227 + public AjaxResult insertAuthRole(Long userId, Long[] roleIds)
  228 + {
  229 + userService.insertUserAuth(userId, roleIds);
  230 + return success();
  231 + }
205 } 232 }
@@ -20,7 +20,15 @@ public interface ISysRoleService @@ -20,7 +20,15 @@ public interface ISysRoleService
20 public List<SysRole> selectRoleList(SysRole role); 20 public List<SysRole> selectRoleList(SysRole role);
21 21
22 /** 22 /**
23 - * 根据用户ID查询角色 23 + * 根据用户ID查询角色列表
  24 + *
  25 + * @param userId 用户ID
  26 + * @return 角色列表
  27 + */
  28 + public List<SysRole> selectRolesByUserId(Long userId);
  29 +
  30 + /**
  31 + * 根据用户ID查询角色权限
24 * 32 *
25 * @param userId 用户ID 33 * @param userId 用户ID
26 * @return 权限列表 34 * @return 权限列表
@@ -96,6 +96,14 @@ public interface ISysUserService @@ -96,6 +96,14 @@ public interface ISysUserService
96 * @return 结果 96 * @return 结果
97 */ 97 */
98 public int updateUser(SysUser user); 98 public int updateUser(SysUser user);
  99 +
  100 + /**
  101 + * 用户授权角色
  102 + *
  103 + * @param userId 用户ID
  104 + * @param roleIds 角色组
  105 + */
  106 + public void insertUserAuth(Long userId, Long[] roleIds);
99 107
100 /** 108 /**
101 * 修改用户状态 109 * 修改用户状态
@@ -56,6 +56,31 @@ public class SysRoleServiceImpl implements ISysRoleService @@ -56,6 +56,31 @@ public class SysRoleServiceImpl implements ISysRoleService
56 } 56 }
57 57
58 /** 58 /**
  59 + * 根据用户ID查询角色
  60 + *
  61 + * @param userId 用户ID
  62 + * @return 角色列表
  63 + */
  64 + @Override
  65 + public List<SysRole> selectRolesByUserId(Long userId)
  66 + {
  67 + List<SysRole> userRoles = roleMapper.selectRolePermissionByUserId(userId);
  68 + List<SysRole> roles = selectRoleAll();
  69 + for (SysRole role : roles)
  70 + {
  71 + for (SysRole userRole : userRoles)
  72 + {
  73 + if (role.getRoleId().longValue() == userRole.getRoleId().longValue())
  74 + {
  75 + role.setFlag(true);
  76 + break;
  77 + }
  78 + }
  79 + }
  80 + return roles;
  81 + }
  82 +
  83 + /**
59 * 根据用户ID查询权限 84 * 根据用户ID查询权限
60 * 85 *
61 * @param userId 用户ID 86 * @param userId 用户ID
@@ -243,6 +243,18 @@ public class SysUserServiceImpl implements ISysUserService @@ -243,6 +243,18 @@ public class SysUserServiceImpl implements ISysUserService
243 } 243 }
244 244
245 /** 245 /**
  246 + * 用户授权角色
  247 + *
  248 + * @param userId 用户ID
  249 + * @param roleIds 角色组
  250 + */
  251 + public void insertUserAuth(Long userId, Long[] roleIds)
  252 + {
  253 + userRoleMapper.deleteUserRoleByUserId(userId);
  254 + insertUserRole(userId, roleIds);
  255 + }
  256 +
  257 + /**
246 * 修改用户状态 258 * 修改用户状态
247 * 259 *
248 * @param user 用户信息 260 * @param user 用户信息
@@ -357,6 +369,32 @@ public class SysUserServiceImpl implements ISysUserService @@ -357,6 +369,32 @@ public class SysUserServiceImpl implements ISysUserService
357 } 369 }
358 370
359 /** 371 /**
  372 + * 新增用户角色信息
  373 + *
  374 + * @param userId 用户ID
  375 + * @param roleIds 角色组
  376 + */
  377 + public void insertUserRole(Long userId, Long[] roleIds)
  378 + {
  379 + if (StringUtils.isNotNull(roleIds))
  380 + {
  381 + // 新增用户与角色管理
  382 + List<SysUserRole> list = new ArrayList<SysUserRole>();
  383 + for (Long roleId : roleIds)
  384 + {
  385 + SysUserRole ur = new SysUserRole();
  386 + ur.setUserId(userId);
  387 + ur.setRoleId(roleId);
  388 + list.add(ur);
  389 + }
  390 + if (list.size() > 0)
  391 + {
  392 + userRoleMapper.batchUserRole(list);
  393 + }
  394 + }
  395 + }
  396 +
  397 + /**
360 * 通过用户ID删除用户 398 * 通过用户ID删除用户
361 * 399 *
362 * @param userId 用户ID 400 * @param userId 用户ID
@@ -125,3 +125,20 @@ export function importTemplate() { @@ -125,3 +125,20 @@ export function importTemplate() {
125 method: 'get' 125 method: 'get'
126 }) 126 })
127 } 127 }
  128 +
  129 +// 查询授权角色
  130 +export function getAuthRole(userId) {
  131 + return request({
  132 + url: '/system/user/authRole/' + userId,
  133 + method: 'get'
  134 + })
  135 +}
  136 +
  137 +// 保存授权角色
  138 +export function updateAuthRole(data) {
  139 + return request({
  140 + url: '/system/user/authRole',
  141 + method: 'put',
  142 + params: data
  143 + })
  144 +}
@@ -53,6 +53,13 @@ @@ -53,6 +53,13 @@
53 margin-left: 20px; 53 margin-left: 20px;
54 } 54 }
55 55
  56 +.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  57 + font-family: inherit;
  58 + font-weight: 500;
  59 + line-height: 1.1;
  60 + color: inherit;
  61 +}
  62 +
56 .el-dialog:not(.is-fullscreen){ 63 .el-dialog:not(.is-fullscreen){
57 margin-top: 6vh !important; 64 margin-top: 6vh !important;
58 } 65 }
@@ -120,6 +127,17 @@ @@ -120,6 +127,17 @@
120 width: inherit; 127 width: inherit;
121 } 128 }
122 129
  130 +/** 表格更多操作下拉样式 */
  131 +.el-table .el-dropdown-link {
  132 + cursor: pointer;
  133 + color: #1890ff;
  134 + margin-left: 5px;
  135 +}
  136 +
  137 +.el-table .el-dropdown, .el-icon-arrow-down {
  138 + font-size: 12px;
  139 +}
  140 +
123 .el-tree-node__content > .el-checkbox { 141 .el-tree-node__content > .el-checkbox {
124 margin-right: 8px; 142 margin-right: 8px;
125 } 143 }
@@ -81,6 +81,19 @@ export const constantRoutes = [ @@ -81,6 +81,19 @@ export const constantRoutes = [
81 ] 81 ]
82 }, 82 },
83 { 83 {
  84 + path: '/auth',
  85 + component: Layout,
  86 + hidden: true,
  87 + children: [
  88 + {
  89 + path: 'role/:userId(\\d+)',
  90 + component: (resolve) => require(['@/views/system/user/authRole'], resolve),
  91 + name: 'AuthRole',
  92 + meta: { title: '分配角色'}
  93 + }
  94 + ]
  95 + },
  96 + {
84 path: '/dict', 97 path: '/dict',
85 component: Layout, 98 component: Layout,
86 hidden: true, 99 hidden: true,
  1 +<template>
  2 + <div class="app-container">
  3 + <h4 class="form-header h4">基本信息</h4>
  4 + <el-form ref="form" :model="form" label-width="80px">
  5 + <el-row>
  6 + <el-col :span="8" :offset="2">
  7 + <el-form-item label="用户昵称" prop="nickName">
  8 + <el-input v-model="form.nickName" disabled />
  9 + </el-form-item>
  10 + </el-col>
  11 + <el-col :span="8" :offset="2">
  12 + <el-form-item label="登录账号" prop="phonenumber">
  13 + <el-input v-model="form.userName" disabled />
  14 + </el-form-item>
  15 + </el-col>
  16 + </el-row>
  17 + </el-form>
  18 +
  19 + <h4 class="form-header h4">角色信息</h4>
  20 + <el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="table" @selection-change="handleSelectionChange" :data="roles.slice((pageNum-1)*pageSize,pageNum*pageSize)">
  21 + <el-table-column label="序号" type="index" align="center">
  22 + <template slot-scope="scope">
  23 + <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
  24 + </template>
  25 + </el-table-column>
  26 + <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
  27 + <el-table-column label="角色编号" align="center" prop="roleId" />
  28 + <el-table-column label="角色名称" align="center" prop="roleName" />
  29 + <el-table-column label="权限字符" align="center" prop="roleKey" />
  30 + <el-table-column label="创建时间" align="center" prop="createTime" width="180">
  31 + <template slot-scope="scope">
  32 + <span>{{ parseTime(scope.row.createTime) }}</span>
  33 + </template>
  34 + </el-table-column>
  35 + </el-table>
  36 +
  37 + <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
  38 +
  39 + <el-form label-width="100px">
  40 + <el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
  41 + <el-button type="primary" @click="submitForm()">提交</el-button>
  42 + <el-button @click="close()">返回</el-button>
  43 + </el-form-item>
  44 + </el-form>
  45 + </div>
  46 +</template>
  47 +
  48 +<script>
  49 +import { getAuthRole, updateAuthRole } from "@/api/system/user";
  50 +
  51 +export default {
  52 + name: "AuthRole",
  53 + data() {
  54 + return {
  55 + // 遮罩层
  56 + loading: true,
  57 + // 分页信息
  58 + total: 0,
  59 + pageNum: 1,
  60 + pageSize: 10,
  61 + // 选中角色编号
  62 + roleIds:[],
  63 + // 角色信息
  64 + roles: [],
  65 + // 用户信息
  66 + form: {}
  67 + };
  68 + },
  69 + created() {
  70 + const userId = this.$route.params && this.$route.params.userId;
  71 + if (userId) {
  72 + this.loading = true;
  73 + getAuthRole(userId).then((response) => {
  74 + this.form = response.user;
  75 + this.roles = response.roles;
  76 + this.total = this.roles.length;
  77 + this.$nextTick(() => {
  78 + this.roles.forEach((row) => {
  79 + if (row.flag) {
  80 + this.$refs.table.toggleRowSelection(row);
  81 + }
  82 + });
  83 + });
  84 + this.loading = false;
  85 + });
  86 + }
  87 + },
  88 + methods: {
  89 + /** 单击选中行数据 */
  90 + clickRow(row) {
  91 + this.$refs.table.toggleRowSelection(row);
  92 + },
  93 + // 多选框选中数据
  94 + handleSelectionChange(selection) {
  95 + this.roleIds = selection.map((item) => item.roleId);
  96 + },
  97 + // 保存选中的数据编号
  98 + getRowKey(row) {
  99 + return row.roleId;
  100 + },
  101 + /** 提交按钮 */
  102 + submitForm() {
  103 + const userId = this.form.userId;
  104 + const roleIds = this.roleIds.join(",");
  105 + updateAuthRole({ userId: userId, roleIds: roleIds }).then((response) => {
  106 + this.msgSuccess("授权成功");
  107 + this.close();
  108 + });
  109 + },
  110 + /** 关闭按钮 */
  111 + close() {
  112 + this.$store.dispatch("tagsView/delView", this.$route);
  113 + this.$router.push({ path: "/system/user" });
  114 + },
  115 + },
  116 +};
  117 +</script>
@@ -175,21 +175,19 @@ @@ -175,21 +175,19 @@
175 @click="handleUpdate(scope.row)" 175 @click="handleUpdate(scope.row)"
176 v-hasPermi="['system:user:edit']" 176 v-hasPermi="['system:user:edit']"
177 >修改</el-button> 177 >修改</el-button>
178 - <el-button  
179 - v-if="scope.row.userId !== 1"  
180 - size="mini"  
181 - type="text"  
182 - icon="el-icon-delete"  
183 - @click="handleDelete(scope.row)"  
184 - v-hasPermi="['system:user:remove']"  
185 - >删除</el-button>  
186 - <el-button  
187 - size="mini"  
188 - type="text"  
189 - icon="el-icon-key"  
190 - @click="handleResetPwd(scope.row)"  
191 - v-hasPermi="['system:user:resetPwd']"  
192 - >重置</el-button> 178 + <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
  179 + <span class="el-dropdown-link">
  180 + <i class="el-icon-d-arrow-right el-icon--right"></i>更多操作
  181 + </span>
  182 + <el-dropdown-menu slot="dropdown">
  183 + <el-dropdown-item command="handleDelete" v-if="scope.row.userId !== 1" icon="el-icon-delete"
  184 + v-hasPermi="['system:user:remove']">删除用户</el-dropdown-item>
  185 + <el-dropdown-item command="handleResetPwd" icon="el-icon-key"
  186 + v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
  187 + <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check"
  188 + v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
  189 + </el-dropdown-menu>
  190 + </el-dropdown>
193 </template> 191 </template>
194 </el-table-column> 192 </el-table-column>
195 </el-table> 193 </el-table>
@@ -561,6 +559,22 @@ export default { @@ -561,6 +559,22 @@ export default {
561 this.single = selection.length != 1; 559 this.single = selection.length != 1;
562 this.multiple = !selection.length; 560 this.multiple = !selection.length;
563 }, 561 },
  562 + // 更多操作触发
  563 + handleCommand(command, row) {
  564 + switch (command) {
  565 + case "handleDelete":
  566 + this.handleDelete(row);
  567 + break;
  568 + case "handleResetPwd":
  569 + this.handleResetPwd(row);
  570 + break;
  571 + case "handleAuthRole":
  572 + this.handleAuthRole(row);
  573 + break;
  574 + default:
  575 + break;
  576 + }
  577 + },
564 /** 新增按钮操作 */ 578 /** 新增按钮操作 */
565 handleAdd() { 579 handleAdd() {
566 this.reset(); 580 this.reset();
@@ -603,6 +617,11 @@ export default { @@ -603,6 +617,11 @@ export default {
603 }); 617 });
604 }).catch(() => {}); 618 }).catch(() => {});
605 }, 619 },
  620 + /** 分配角色操作 */
  621 + handleAuthRole: function(row) {
  622 + const userId = row.userId;
  623 + this.$router.push("/auth/role/" + userId);
  624 + },
606 /** 提交按钮 */ 625 /** 提交按钮 */
607 submitForm: function() { 626 submitForm: function() {
608 this.$refs["form"].validate(valid => { 627 this.$refs["form"].validate(valid => {