本章对某个角色进行分配用户

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));
}