上个小节我们用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();
    });
}