继续上一篇文章进行功能代码拆解
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低代码开发平台
请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信。
来源：
互联网
本文观点不代表源码解析立场，不承担法律责任，文章及观点也不构成任何投资意见。
评论列表