继续上一篇文章进行功能代码拆解

1、岗位和角色下拉框实现

<el-col :span="12">
  <el-form-item label="岗位">
    <el-select v-model="form.postIds" multiple placeholder="请选择岗位">
      <el-option
        v-for="item in postOptions"
        :key="item.postId"
        :label="item.postName"
        :value="item.postId"
        :disabled="item.status == 1"
      ></el-option>
    </el-select>
  </el-form-item>
</el-col>
<el-col :span="12">
  <el-form-item label="角色">
    <el-select v-model="form.roleIds" multiple placeholder="请选择角色">
      <el-option
        v-for="item in roleOptions"
        :key="item.roleId"
        :label="item.roleName"
        :value="item.roleId"
        :disabled="item.status == 1"
      ></el-option>
    </el-select>
  </el-form-item>
</el-col>

如上述代码，岗位的下拉数据源是postOptions。

v-for="item in postOptions"：循环postOptions对象，展示的内容是:label="item.roleName"，key值是:key="item.roleId"。展示结果如下图。

roleOptions是角色列表数据，实现方式跟岗位逻辑一样。

角色对应的数据库表：

CREATE TABLE `sys_role` (
  `role_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '角色ID',
  `role_name` varchar(30) NOT NULL COMMENT '角色名称',
  `role_key` varchar(100) NOT NULL COMMENT '角色权限字符串',
  `role_sort` int(4) NOT NULL COMMENT '显示顺序',
  `data_scope` char(1) DEFAULT '1' COMMENT '数据范围（1：全部数据权限 2：自定数据权限 3：本部门数据权限 4：本部门及以下数据权限）',
  `menu_check_strictly` tinyint(1) DEFAULT '1' COMMENT '菜单树选择项是否关联显示',
  `dept_check_strictly` tinyint(1) DEFAULT '1' COMMENT '部门树选择项是否关联显示',
  `status` char(1) NOT NULL COMMENT '角色状态（0正常 1停用）',
  `del_flag` char(1) DEFAULT '0' COMMENT '删除标志（0代表存在 2代表删除）',
  `create_by` varchar(64) DEFAULT '' COMMENT '创建者',
  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
  `update_by` varchar(64) DEFAULT '' COMMENT '更新者',
  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
  `remark` varchar(500) DEFAULT NULL COMMENT '备注',
  PRIMARY KEY (`role_id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8 COMMENT='角色信息表';

岗位对应的数据库表：

CREATE TABLE `sys_post` (
  `post_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '岗位ID',
  `post_code` varchar(64) NOT NULL COMMENT '岗位编码',
  `post_name` varchar(50) NOT NULL COMMENT '岗位名称',
  `post_sort` int(4) NOT NULL COMMENT '显示顺序',
  `status` char(1) NOT NULL COMMENT '状态（0正常 1停用）',
  `create_by` varchar(64) DEFAULT '' COMMENT '创建者',
  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
  `update_by` varchar(64) DEFAULT '' COMMENT '更新者',
  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
  `remark` varchar(500) DEFAULT NULL COMMENT '备注',
  PRIMARY KEY (`post_id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8 COMMENT='岗位信息表';

2、岗位和角色数据来源，通过API接口获取

用户点击新增按钮的时候，调用接口获取岗位和角色数据，代码片段如下：

/** 新增按钮操作 */
handleAdd() {
  this.reset();
  getUser().then(response => {
    this.postOptions = response.posts;
    this.roleOptions = response.roles;
    this.open = true;
    this.title = "添加用户";
    this.form.password = this.initPassword;
  });
},

// 查询用户详细
export function getUser(userId) {
  return request({
    url: '/system/user/' + parseStrEmpty(userId),
    method: 'get'
  })
}

3、java 后端接口实现

/**
 * 根据用户编号获取详细信息
 */
@PreAuthorize("@ss.hasPermi('system:user:query')")
@GetMapping(value = { "/", "/{userId}" })
public AjaxResult getInfo(@PathVariable(value = "userId", required = false) Long userId)
{
    userService.checkUserDataScope(userId);
    AjaxResult ajax = AjaxResult.success();
    List<SysRole> roles = roleService.selectRoleAll();
    ajax.put("roles", SysUser.isAdmin(userId) ? roles : roles.stream().filter(r -> !r.isAdmin()).collect(Collectors.toList()));
    ajax.put("posts", postService.selectPostAll());
    if (StringUtils.isNotNull(userId))
    {
        SysUser sysUser = userService.selectUserById(userId);
        ajax.put(AjaxResult.DATA_TAG, sysUser);
        ajax.put("postIds", postService.selectPostListByUserId(userId));
        ajax.put("roleIds", sysUser.getRoles().stream().map(SysRole::getRoleId).collect(Collectors.toList()));
    }
    return ajax;
}

调用sys_role和sys_post这两张表数据，并返回。

请求接口：
http://localhost:1024/dev-api/system/user/

响应数据：

{
	"msg": "操作成功",
	"code": 200,
	"roles": [
		{
			"createBy": null,
			"createTime": "2023-06-14 14:17:39",
			"updateBy": null,
			"updateTime": null,
			"remark": "普通角色",
			"roleId": 2,
			"roleName": "普通角色",
			"roleKey": "common",
			"roleSort": 2,
			"dataScope": "2",
			"menuCheckStrictly": true,
			"deptCheckStrictly": true,
			"status": "0",
			"delFlag": "0",
			"flag": false,
			"menuIds": null,
			"deptIds": null,
			"permissions": null,
			"admin": false
		}
	],
	"posts": [
		{
			"createBy": "admin",
			"createTime": "2023-06-14 14:17:39",
			"updateBy": null,
			"updateTime": null,
			"remark": "",
			"postId": 1,
			"postCode": "ceo",
			"postName": "董事长",
			"postSort": 1,
			"status": "0",
			"flag": false
		},
		{
			"createBy": "admin",
			"createTime": "2023-06-14 14:17:39",
			"updateBy": null,
			"updateTime": null,
			"remark": "",
			"postId": 2,
			"postCode": "se",
			"postName": "项目经理",
			"postSort": 2,
			"status": "0",
			"flag": false
		},
		{
			"createBy": "admin",
			"createTime": "2023-06-14 14:17:39",
			"updateBy": null,
			"updateTime": null,
			"remark": "",
			"postId": 3,
			"postCode": "hr",
			"postName": "人力资源",
			"postSort": 3,
			"status": "0",
			"flag": false
		},
		{
			"createBy": "admin",
			"createTime": "2023-06-14 14:17:39",
			"updateBy": null,
			"updateTime": null,
			"remark": "",
			"postId": 4,
			"postCode": "user",
			"postName": "普通员工",
			"postSort": 4,
			"status": "0",
			"flag": false
		}
	]
}

#头条家时光#

未来计划

1、ruoyi非分离版本拆解

2、ruoyi-vue-pro：讲解工作流

3、ruoyi-vue-pro：支付模块，电商模块

4、基于ruoyi-vue-pro项目开发

5、JEECG低代码开发平台

请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信。