申请线上会议和线下会议类似，都是在弹窗页面里面完成的。只不过线上会议的弹窗没有地点，因为线上会议根本不需要实体的会议室。而且申请线上或者线下会议，可以共用相同的后端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和工作流项目运行起来。