继续上一章节，介绍用户管理功能

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文件路径如下：

#头条家时光#

未来计划

1、ruoyi非分离版本拆解

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

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

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

5、JEECG低代码开发平台

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