继续上一章节，介绍用户管理功能
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)
@PutMapping
public 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文件路径如下：
#头条家时光#