上个小节我们用Swagger测试添加新用户，执行结果是成功的，那么剩下的任务就是完成页面中的添加新用户功能。因为添加用户的时候需要在弹窗中输入新用户基本信息。所以我们先来看看弹窗页面的设计。
一、熟悉弹窗页面
添加新用户的弹窗页面是user-add-or-update.vue，该弹窗既可以用在添加用户，也可以用于修改用户信息。差别在于，修改用户信息的时候，表单控件是有初始值的，而添加新用户是没有初始值的。
弹窗页面的模型层定义了很多的东西，包括用户存储表单数据的变量、下拉列表内容变量、表单验证规则等等。我们先看懂模型层的变量，再去看其他的JS事件代码就简单多了。
data: function() {
return {
visible: false,
dataForm: {
id: null,
username: null,
password: null,
name: null,
sex: null,
tel: null,
email: null,
hiredate: new Date(),
role: null,
deptId: null,
status: 1
},
roleList: [],
deptList: [],
dataRule: {
username: [{ required: true, pattern: '^[a-zA-Z0-9]{5,20}$', message: '用户名格式错误' }],
password: [{ required: true, pattern: '^[a-zA-Z0-9]{6,20}$', message: '密码格式错误' }],
name: [{ required: true, pattern: '^[\u4e00-\u9fa5]{2,10}$', message: '姓名格式错误' }],
sex: [{ required: true, message: '性别不能为空' }],
tel: [{ required: true, pattern: '^1\\d{10}$', message: '电话格式错误' }],
email: [
{
required: true,
pattern: '^([a-zA-Z]|[0-9])(\\w|\\-)+@[a-zA-Z0-9]+\\.([a-zA-Z]{2,4})$',
message: '邮箱格式错误'
}
],
hiredate: [{ required: true, trigger: 'blur', message: '入职日期不能为空' }],
role: [{ required: true, message: '角色不能为空' }],
deptId: [{ required: true, message: '部门不能为空' }],
status: [{ required: true, message: '状态不能为空' }]
}
};
},
如何判断弹窗页面用于新增用户还是修改用户信息业务中？这个很好办，用户管理页面在执行弹窗的时候，要调用弹窗页面的init()函数。如果是新增用户，调用init()函数就不传入参数。要是修改用户信息，调用init()函数的时候，就传入用户的ID。
init: function(id) {
let that = this;
that.dataForm.id = id || 0;
that.visible = true;
//加载列表数据的Ajax请求放在下次DOM更新来执行
that.$nextTick(() => {
that.$refs['dataForm'].resetFields();
//加载角色列表数据
that.$http('role/searchAllRole', 'GET', null, true, function(resp) {
that.roleList = resp.list;
});
//加载部门列表数据
that.$http('dept/searchAllDept', 'GET', null, true, function(resp) {
that.deptList = resp.list;
});
//修改用户业务中，还要给表单加载用户信息
if (that.dataForm.id) {
that.$http('user/searchById', 'POST', { userId: id }, true, function(resp) {
that.dataForm.username = resp.username;
that.dataForm.name = resp.name;
that.dataForm.sex = resp.sex;
that.dataForm.tel = resp.tel;
that.dataForm.email = resp.email;
that.dataForm.hiredate = resp.hiredate;
that.dataForm.role = JSON.parse(resp.role);
that.dataForm.deptId = resp.deptId;
that.dataForm.status = resp.status;
});
}
});
},
二、提交表单，添加新用户
当用户点击确定按钮的时候，我们要编写点击事件的回调函数，提交Ajax请求给后端的Web方法。因为新增用户和修改用户信息是不同的Web方法，所以我们在提交Ajax请求之前，必须要先判断应该把请求提交给哪个Web方法才行。
<template #footer>
<span class="dialog-footer">
<el-button size="medium" @click="visible = false">取消</el-button>
<el-button type="primary" size="medium" @click="dataFormSubmit">确定</el-button>
</span>
</template>
dataFormSubmit: function() {
let that = this;
this.$refs['dataForm'].validate(valid => {
if (valid) {
let data = {
userId: that.dataForm.id,
username: that.dataForm.username,
password: that.dataForm.password,
name: that.dataForm.name,
sex: that.dataForm.sex,
tel: that.dataForm.tel,
email: that.dataForm.email,
hiredate: dayjs(that.dataForm.hiredate).format('YYYY-MM-DD'),
role: that.dataForm.role,
deptId: that.dataForm.deptId,
status: that.dataForm.status
};
that.$http(`user/${!that.dataForm.id ? 'insert' : 'update'}`, 'POST', data, true, resp => {
if (resp.rows == 1) {
that.$message({
message: '操作成功',
type: 'success',
duration: 1200
});
that.visible = false;
that.$emit('refreshDataList');
} else {
that.$message({
message: '操作失败',
type: 'error',
duration: 1200
});
}
});
}
});
}
三、显示弹窗页面
用户管理页面引用了user-add-or-update.vue这个弹窗页面。
<template>
<div v-if="isAuth(['ROOT', 'USER:SELECT'])">
……
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="loadDataList"></add-or-update>
</div>
</template>
import AddOrUpdate from './user-add-or-update.vue';
……
export default {
components: {
AddOrUpdate,
……
},
……
}
新增用户的按钮的点击事件回调函数addHandle()，需要我们实现一下。
<el-button size="medium"
type="primary"
:disabled="!isAuth(['ROOT', 'USER:INSERT'])"
@click="addHandle()">
新增
</el-button>
addHandle: function() {
this.addOrUpdateVisible = true;
this.$nextTick(() => {
this.$refs.addOrUpdate.init();
});
}