本章对某个角色进行分配用户
1、选择某个角色,分配用户
2、角色列表向分配用户页面传角色id参数
<el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']"> <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button> <el-dropdown-menu slot="dropdown"> <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check" v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item> <el-dropdown-item command="handleAuthUser" icon="el-icon-user" v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item> </el-dropdown-menu></el-dropdown>
上面是用户角色列表的下拉按钮代码片段
// 更多操作触发handleCommand(command, row) {
switch (command) {
case "handleDataScope": this.handleDataScope(row); break;
case "handleAuthUser": this.handleAuthUser(row); break; default: break;
}
},/** 分配用户操作 */
handleAuthUser: function(row) {
const roleId = row.roleId;
this.$router.push("/system/role-auth/user/" + roleId);
},其中分配用户是通过动态路由,将roleId作为url参数跳转到用分配用户页面
分配用户页面通过下面代码获取角色id
const roleId = this.$route.params && this.$route.params.roleId;
在获取用户列表的时候,会将roleId送到后台,后台根据roleid获取该角色下的所有用户
/** 查询授权用户列表 */
getList() {
this.loading = true;
allocatedUserList(this.queryParams).then(response => {
this.userList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},如下图:请求地址是
localhost:1024/dev-api/system/role/authUser/allocatedList
请求的参数是
pageNum=1&pageSize=10&roleId=2
3、后端接口服务
前端送的参数pageNum=1&pageSize=10&roleId=2
通过spring 转换,将参数设置到SysUser user的对象
可以通过user对象获取pageNum,pageSize,roleId变量
/**
* 查询已分配用户角色列表
*/
@PreAuthorize("@ss.hasPermi('system:role:list')")
@GetMapping("/authUser/allocatedList")public TableDataInfo allocatedList(SysUser user)
{
startPage();
List<SysUser> list = userService.selectAllocatedList(user);return getDataTable(list);
}4、添加用户
1、点击添加用户
点击添加用户后,前端打开selectUser组件
/** 打开授权用户表弹窗 */openSelectUser() { this.$refs.select.show();
},3、在selectUser组件选择用户后,点击确定操作,前端向后端发起api请求,api接口地址是:
http://localhost:1024/dev-api/system/role/authUser/selectAll?roleId=2&userIds=1
请求方式是put。如下图
响应结果是200,处理成功
处理成功后,调用getList函数,刷新分配用户列表
如下图是选择用户页面代码
5、后端接口处理方法
/**
* 批量选择用户授权
*/
@PreAuthorize("@ss.hasPermi('system:role:edit')")
@Log(title = "角色管理", businessType = BusinessType.GRANT)
@PutMapping("/authUser/selectAll")
public AjaxResult selectAuthUserAll(Long roleId, Long[] userIds)
{
roleService.checkRoleDataScope(roleId); return toAjax(roleService.insertAuthUsers(roleId, userIds));
}
来源：
互联网
本文观点不代表源码解析立场，不承担法律责任，文章及观点也不构成任何投资意见。
评论列表