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

一、熟悉弹窗页面

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

data: function() {
    return {
        visible: false,
        dataForm: {
            id: null,
            name: null,
            max: null,
            desc: null,
            status: 1
        },
        dataRule: {
            name: [{ required: true, pattern: '^[a-zA-Z0-9\u4e00-\u9fa5]{2,20}$', message: '会议室名称格式错误' }],
            max: [{ required: true, pattern: '^[1-9]\\d{0,4}$', message: '数字格式错误' }]
        }
    };
},

二、引用弹窗页面

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

<template>
    <div>
        ……
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="loadDataList"></add-or-update>
        ……
    </div>
</template>
<script>
import AddOrUpdate from './meeting_room-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(
                `meeting_room/${!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
                        });
                    }
                }
            );
        }
    });
}

四、显示弹窗页面

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

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

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