继续上一章节,介绍用户管理功能
1、编辑用户信息
1.1、用户列表
上述几篇文章也有讲述相关代码,本章节就不在继续讲解
1.2、点击右侧修改按钮
点击修改按钮,按钮的代码如下:
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']">修改</el-button>
v-hasPermi判断用户是否拥有system:user:edit这个权限,拥有权限展示按钮,否则不展示按钮
/** 修改按钮操作 */handleUpdate(row) {
this.reset(); const userId = row.userId || this.ids;
getUser(userId).then(response => {
this.form = response.data;
this.postOptions = response.posts;
this.roleOptions = response.roles;
this.$set(this.form, "postIds", response.postIds);
this.$set(this.form, "roleIds", response.roleIds);
this.open = true;
this.title = "修改用户";
this.form.password = "";
});
},如上述,修改代码的按钮处理函数,业务逻辑说明:
1、row:点击行的用户信息。
2、userId:从row获取userId 字段的值。
3、调用getUser的函数,获取用户的想象信息。
4、调用api接口“url: '/system/user/' + parseStrEmpty(userId),”,接口成功处理后,返回response数据,将对应的数据赋值到指定变量里面。
5、显示对话框。如下图,显示了编辑对话框。
其中编辑对话框的代码如下,其中通过:visible.sync="open"这个属性控制对话框是否显示,如果open=true表示显示,如果open=false表示关闭。
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body></el-dialog>
再调用handleUpdate方法中,调用接口成功后,执行了this.open = true; 这个代码,将编辑器显示出来。
2、编辑用户信息
修改用户后,执行如下代码。
/** 提交按钮 */submitForm: function() { this.$refs["form"].validate(valid => { if (valid) { if (this.form.userId != undefined) {
updateUser(this.form).then(response => { this.$modal.msgSuccess("修改成功"); this.open = false; this.getList();
});
} else {
addUser(this.form).then(response => { this.$modal.msgSuccess("新增成功"); this.open = false; this.getList();
});
}
}
});
},业务逻辑:
1、验证参数是否正确,对应执行的方法是this.$refs["form"].validate,
上述验证方法用到的规则如下:
rules: {
userName: [
{ required: true, message: "用户名称不能为空", trigger: "blur" },
{ min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
],
nickName: [
{ required: true, message: "用户昵称不能为空", trigger: "blur" }
],
password: [
{ required: true, message: "用户密码不能为空", trigger: "blur" },
{ min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
],
email: [
{
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"]
}
],
phonenumber: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
]
}3、java接口更新代码
/**
* 修改用户
*/@PreAuthorize("@ss.hasPermi('system:user:edit')")@Log(title = "用户管理", businessType = BusinessType.UPDATE)@PutMappingpublic AjaxResult edit(@Validated @RequestBody SysUser user)
{ userService.checkUserAllowed(user); userService.checkUserDataScope(user.getUserId()); if (!userService.checkUserNameUnique(user))
{ return error("修改用户'" + user.getUserName() + "'失败,登录账号已存在");
} else if (StringUtils.isNotEmpty(user.getPhonenumber()) && !userService.checkPhoneUnique(user))
{ return error("修改用户'" + user.getUserName() + "'失败,手机号码已存在");
} else if (StringUtils.isNotEmpty(user.getEmail()) && !userService.checkEmailUnique(user))
{ return error("修改用户'" + user.getUserName() + "'失败,邮箱账号已存在");
} user.setUpdateBy(getUsername()); return toAjax(userService.updateUser(user));
}业务逻辑:
1、判断当前登录用户是否拥有权限,
userService.checkUserAllowed(user);。
2、判断当前用户是否有数据权限
userService.checkUserDataScope(user.getUserId());。
3、判断用户名称是否唯一。
4、判断用户手机号码是否已经存在。
5、判断是否用户邮箱是否已经存在。
6、执行修改sql,修改sql对应如下xml
<update id="updateUser" parameterType="SysUser">
update sys_user
<set>
<if test="deptId != null and deptId != 0">dept_id = #{deptId},</if>
<if test="userName != null and userName != ''">user_name = #{userName},</if>
<if test="nickName != null and nickName != ''">nick_name = #{nickName},</if>
<if test="email != null ">email = #{email},</if>
<if test="phonenumber != null ">phonenumber = #{phonenumber},</if>
<if test="sex != null and sex != ''">sex = #{sex},</if>
<if test="avatar != null and avatar != ''">avatar = #{avatar},</if>
<if test="password != null and password != ''">password = #{password},</if>
<if test="status != null and status != ''">status = #{status},</if>
<if test="loginIp != null and loginIp != ''">login_ip = #{loginIp},</if>
<if test="loginDate != null">login_date = #{loginDate},</if>
<if test="updateBy != null and updateBy != ''">update_by = #{updateBy},</if>
<if test="remark != null">remark = #{remark},</if>
update_time = sysdate()
</set> where user_id = #{userId}</update>xml文件路径如下:
未来计划
1、ruoyi非分离版本拆解
2、ruoyi-vue-pro:讲解工作流
3、ruoyi-vue-pro:支付模块,电商模块
4、基于ruoyi-vue-pro项目开发
5、JEECG低代码开发平台
请关注我,本星球会持续推出更多的开源项目代码解析,如有更好的意见请留言回复或者私信。
来源：
互联网
本文观点不代表源码解析立场，不承担法律责任，文章及观点也不构成任何投资意见。
评论列表