继续上一章节

1、新增用户

操作界面如下：

代码片段如下：下图代码中，组成界面的组件包括

el-dialog:对话框标签，点击新增和添加弹出对话框。对话框的宽度是600px，具体看width="600px"这个属性值的设置

el-form：定义表单，表单绑定的变量是form :model="form" ，验证规则是:rules="rules",如下图代码，是定义了form变量和rules变量

// 表单参数
form: {},

// 表单校验
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"
    }
  ]
}

下面代码片段是表单的input输入框，其中v-model="form.nickName"是绑定表单的变量。

<el-form-item label="用户昵称" prop="nickName">
  <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
</el-form-item>

下来部门树代码片段

treeselect表示是一个下来树，效果如下图：

<el-col :span="12">
  <el-form-item label="归属部门" prop="deptId">
    <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
  </el-form-item>
</el-col>

其中下拉菜单的数据是:options="deptOptions"，使用

数据获取通过以下方法，和接口服务响应的数据如下

/** 查询部门下拉树结构 */
getDeptTree() {
  deptTreeSelect().then(response => {
    this.deptOptions = response.data;
  });
},

{
	"msg": "操作成功",
	"code": 200,
	"data": [
		{
			"id": 100,
			"label": "若依科技",
			"children": [
				{
					"id": 101,
					"label": "深圳总公司",
					"children": [
						{
							"id": 103,
							"label": "研发部门"
						},
						{
							"id": 104,
							"label": "市场部门"
						},
						{
							"id": 105,
							"label": "测试部门"
						},
						{
							"id": 106,
							"label": "财务部门"
						},
						{
							"id": 107,
							"label": "运维部门"
						}
					]
				},
				{
					"id": 102,
					"label": "长沙分公司",
					"children": [
						{
							"id": 108,
							"label": "市场部门"
						},
						{
							"id": 109,
							"label": "财务部门"
						}
					]
				}
			]
		}
	]
}

2、表单提交

<div slot="footer" class="dialog-footer">
  <el-button type="primary" @click="submitForm">确 定</el-button>
  <el-button @click="cancel">取 消</el-button>
</div>

@click="submitForm"：点击后触发submitForm方法：

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();
        });
      }
    }
  });
},

根据表单form变量是否有userId，如果有则修改用户信息，没有则新增用户信息，判断语句

if (this.form.userId != undefined)

更新和修改成功后，调用this.getList();重新获取数据

3、新增和修改的后台api接口

/**
 * 新增用户
 */
@PreAuthorize("@ss.hasPermi('system:user:add')")
@Log(title = "用户管理", businessType = BusinessType.INSERT)
@PostMapping
public AjaxResult add(@Validated @RequestBody SysUser user)
{
    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.setCreateBy(getUsername());
    user.setPassword(SecurityUtils.encryptPassword(user.getPassword()));
    return toAjax(userService.insertUser(user));
}

/**
 * 修改用户
 */
@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、ruoyi非分离版本拆解

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

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

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

5、JEECG低代码开发平台

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