上个小节我们用Swagger测试过了添加新部门，这节课我们来把前端JS代码写一下。

一、熟悉弹窗页面

部门管理页面的弹窗页面是dept-add-or-update.vue，添加新部门和修改部门信息都是用这个弹窗页面。下面我们来看看弹窗页面的模型层都定义了什么东西？

data: function() {
    return {
        visible: false,
        dataForm: {
            id: null,
            deptName: null,
            tel: null,
            email: null,
            desc: null
        },
        dataRule: {
            deptName: [
                { required: true, pattern: '^[a-zA-Z0-9\u4e00-\u9fa5]{2,10}$', message: '部门名称格式错误' }
            ],
            tel: [
                {
                    required: false,
                    pattern: '^1\\d{10}$|^(0\\d{2,3}\-){0,1}[1-9]\\d{6,7}$',
                    message: '电话格式错误'
                }
            ],
            email: [
                {
                    required: false,
                    pattern: '^([a-zA-Z]|[0-9])(\\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$',
                    message: '邮箱格式错误'
                }
            ]
        }
    };
},

二、引用弹窗页面

在dept.vue页面，引用了弹窗页面，所以我们才能调用弹窗页面。

<template>
    <div v-if="isAuth(['ROOT', 'DEPT:SELECT'])">
        ……
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="loadDataList"></add-or-update>
        ……
    </div>
</template>
<script>
import AddOrUpdate from './dept-add-or-update.vue';
export default {
    components: {
        AddOrUpdate
    },
    ……
}
</script>

三、提交表单，添加新部门

弹窗页面中的确定按钮绑定了点击事件回调函数，所以我们来把这个函数给声明一下。

<el-button type="primary" size="medium" @click="dataFormSubmit">确定</el-button>

dataFormSubmit: function() {
    let that = this;
    this.$refs['dataForm'].validate(valid => {
        if (valid) {
            that.$http(`dept/${!that.dataForm.id ? 'insert' : 'update'}`, 'POST', that.dataForm, true, function(
                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
                    });
                }
            });
        }
    });
}

四、显示弹窗页面

在dept.vue页面中，声明新增按钮的点击事件回调函数，然后大家就可以调试添加新角色功能了。

<el-button
    size="medium"
    type="primary"
    :disabled="!isAuth(['ROOT', 'DEPT:INSERT'])"
    @click="addHandle()"
>
    新增
</el-button>

addHandle: function() {
    this.addOrUpdateVisible = true;
    this.$nextTick(() => {
        this.$refs.addOrUpdate.init();
    });
},