操作界面
1、密码重置
2、分配角色
密码重置代码实现
如下图代码路径:密码重置配置在table里面的操作封装函数。
{
title: '操作',
align: 'center',
formatter: function(value, row, index) {
if (row.userId != 1) {
var actions = [];
actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.userId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.userId + '\')"><i class="fa fa-remove"></i>删除</a> ');
var more = [];
more.push("<a class='btn btn-default btn-xs " + resetPwdFlag + "' href='javascript:void(0)' onclick='resetPwd(" + row.userId + ")'><i class='fa fa-key'></i>重置密码</a> ");
more.push("<a class='btn btn-default btn-xs " + editFlag + "' href='javascript:void(0)' onclick='authRole(" + row.userId + ")'><i class='fa fa-check-square-o'></i>分配角色</a>");
actions.push('<a tabindex="0" class="btn btn-info btn-xs" role="button" data-container="body" data-placement="left" data-toggle="popover" data-html="true" data-trigger="hover" data-content="' + more.join('') + '"><i class="fa fa-chevron-circle-right"></i>更多操作</a>');
return actions.join('');
} else {
return "";
}
}
}]如上述代码片段
第四行代码,传入row,该行的内容,index被选中的第几行
actions.push:将动作操作设置如数组。其中密码重置的点击事件是:
onclick='resetPwd(" + row.userId + ")' 其中row.userId:被选中的用户id。
具体密码重置执行方法如下
/* 用户管理-重置密码 */function resetPwd(userId) {
var url = prefix + '/resetPwd/' + userId;
$.modal.open("重置密码", url, '800', '300');
}第四行代码,$.modal.open窗口打开url连接,url执行请求java后端程序,代码如下:
@RequiresPermissions("system:user:resetPwd")
@GetMapping("/resetPwd/{userId}")
public String resetPwd(@PathVariable("userId") Long userId, ModelMap mmap)
{
mmap.put("user", userService.selectUserById(userId));
return prefix + "/resetPwd";
}java代码逻辑:
1、@PathVariable("userId")在url路径中获取userId的字段。
2、
userService.selectUserById(userId):通过userid 获取用户对象。
3、将用户对象设置到ModelMap mmap里面。
4、返回resetPwd.html页面。
resetPwd.html页面目录如下截图:
显示效果对应的代码如下截图:其中登录昵称是从ModelMap对象获取,详细代码
<div class="col-sm-8">
<input class="form-control" type="text" readonly="true" name="loginName" th:value="${user.loginName}"/>
</div>th:value="${user.loginName}":从user对象获取登录昵称。
角色分配代码实现
角色分配前端点击绑定事件函数:
/* 用户管理-分配角色 */function authRole(userId) {
var url = prefix + '/authRole/' + userId;
$.modal.openTab("用户分配角色", url);
}1、新的窗口打开url地址
2、url地址请求java接口。
java接口代码如下:
/**
* 进入授权角色页
*/
@GetMapping("/authRole/{userId}")
public String authRole(@PathVariable("userId") Long userId, ModelMap mmap)
{
SysUser user = userService.selectUserById(userId); // 获取用户所属的角色列表
List<SysRole> roles = roleService.selectRolesByUserId(userId);
mmap.put("user", user);
mmap.put("roles", SysUser.isAdmin(userId) ? roles : roles.stream().filter(r -> !r.isAdmin()).collect(Collectors.toList()));
return prefix + "/authRole";
}业务逻辑:
1、从url路径中获取userId,具体代码是@PathVariable("userId") Long userId。
2、从上述第7行,根据用户id获取用户对象。
3、从上述第9行,根据用户id,获取用户所属的角色列表
4、将角色和用户对象,保存在mmap里面
5、返回authRole.html
如上图,java后台传回来的mmap.put("roles",数据,复制到roles的变量,这个变量在传入table。由table组件进行显示。
var roles = [[${roles}]]用户昵称信息显示通过th:value="${user.userName}"读取实现。
html角色提交函数
/* 添加角色-提交 */
function submitHandler(index, layero){
var roleIds = [];
var data = $('#bootstrap-table').bootstrapTable('getData');
for (var i = 0; i < data.length; i++) {
if (data[i][0] || ($.common.isEmpty(data[i][0]) && data[i].flag)) {
roleIds.push(data[i].roleId)
}
}
$.operate.saveTab(prefix + "/insertAuthRole", { "userId": $("#userId").val(), "roleIds": roleIds.join() });
}java后台处理函数
/**
* 用户授权角色
*/
@RequiresPermissions("system:user:edit")
@Log(title = "用户管理", businessType = BusinessType.GRANT)
@PostMapping("/authRole/insertAuthRole")@ResponseBodypublic AjaxResult insertAuthRole(Long userId, Long[] roleIds)
{
userService.checkUserDataScope(userId);
userService.insertUserAuth(userId, roleIds);
AuthorizationUtils.clearAllCachedAuthorizationInfo();
return success();
}业务逻辑:
1、检查用户是否有角色权限。
2、插入角色权限。
3、清理缓存信息。
未来计划
1、ruoyi非分离版本拆解
2、ruoyi-vue-pro:讲解工作流
3、ruoyi-vue-pro:支付模块,电商模块
4、基于ruoyi-vue-pro项目开发
5、JEECG低代码开发平台
请关注我,本星球会持续推出更多的开源项目代码解析,如有更好的意见请留言回复或者私信。
来源：
互联网
本文观点不代表源码解析立场，不承担法律责任，文章及观点也不构成任何投资意见。
评论列表