申请线上会议和线下会议类似，都是在弹窗页面里面完成的。只不过线上会议的弹窗没有地点，因为线上会议根本不需要实体的会议室。而且申请线上或者线下会议，可以共用相同的后端Java程序，所以这节课我们直接写前端代码就行。

一、熟悉弹窗页面

申请线上会议的弹窗页面是online_meeting-add.vue，这个页面的模型层咱们先来看看。

data: function() {
    return {
        visible: false,
        dataForm: {
            title: null,
            date: null,
            start: null,
            end: null,
            desc: null,
            members: [],
            type: 1
        },
        disabledDate(date) {
            return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        },
        users: [],
        dataRule: {
            title: [{ required: true, pattern: '^[a-zA-Z0-9\u4e00-\u9fa5]{2,30}$', message: '会议主题格式错误' }],
            desc: [{ required: true, message: '会议内容为必填' }],
            date: [{ required: true, message: '日期为必填' }],
            start: [{ required: true, message: '起始时间为必填' }],
            end: [{ required: true, message: '结束时间为必填' }],
            members: [
                { required: true, trigger: 'blur', message: '必须设置参会人' },
                { required: false, trigger: 'change', message: '必须设置参会人' }
            ]
        }
    };
},

线下会议页面弹窗的视图层标签和线上会议弹窗代码几乎相同，就是少了会议地点而已，所以视图层标签没什么可讲的，大家自己看一下代码。

二、提交表单，添加会议申请

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

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

dataFormSubmit: function() {
    let that = this;
    let data = JSON.parse(JSON.stringify(that.dataForm));
    data.date = dayjs(that.dataForm.date).format('YYYY-MM-DD');
    data.members = JSON.stringify(that.dataForm.members);
    this.$refs['dataForm'].validate(valid => {
        if (valid) {
            that.$http('meeting/insert', 'POST', data, true, function(resp) {
                if (resp.rows == 1) {
                    that.visible = false;
                    that.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1200
                    });
                    setTimeout(function() {
                        that.$emit('refresh');
                    }, 1200);
                } else {
                    that.$message({
                        message: '操作失败',
                        type: 'error',
                        duration: 1200
                    });
                }
            });
        }
    });
}

会议申请成功之后，弹窗页面消失之后，online_meeting.vue页面需要更新内容，所以需要编写refresh事件对应的回调函数。

refresh: function() {
    this.$refs['dataForm'].resetFields();
    this.loadDataList();
}

三、显示弹窗页面

在online_meeting.vue页面中，声明会议申请按钮的点击事件回调函数。

<el-button size="medium" type="danger" @click="addHandle()">会议申请</el-button>

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

四、更改后端代码

找到MeetingServiceImpl类中的insert()方法，原先我们原先插入的是线下会议，所以代码里面把会议类型写死成了线下会议，这个不好，所以要修改。

public int insert(TbMeeting meeting) {
    int rows = meetingDao.insert(meeting);
    if (rows != 1) {
        throw new EmosException("会议添加失败");
    }
    meetingWorkflowTask.startMeetingWorkflow(meeting.getUuid(), meeting.getCreatorId(), meeting.getTitle(),
            meeting.getDate(), meeting.getStart() + ":00", meeting.getType() == 1 ? "线上会议" : "线下会议");
    return rows;
}

修改完代码，你可以测试添加线上会议了，前提是把emos-api和工作流项目运行起来。