上节课我们测试了用Swagger调用Web方法的方式，创建了会议申请，数据库中的记录我们也都看到了。这节课我们去编写前端的JS代码，让用户可以在弹窗页面上面填写会议申请信息。

一、熟悉弹窗页面

offline_meeting-add.vue页面是会议申请的弹窗页面，里面也是放置了表单和各种表单控件，下面咱们先去看看模型层都定义了什么东西？

data: function() {
    return {
        visible: false,
        dataForm: {
            title: null,
            date: null,
            start: null,
            end: null,
            place: null,
            desc: null,
            members: [],
            type: 2
        },
        disabledDate(date) {
            return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        },
        placeList: [],
        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: '结束时间为必填' }],
            place: [{ required: true, message: '选择一个会议室' }],
            members: [
                { required: true, trigger: 'blur', message: '必须设置参会人' },
                { required: false, trigger: 'change', message: '必须设置参会人' }
            ]
        }
    };
},

视图层部分需要说的就是很多控件都会动态影响会议室列表的内容。比如说我们选中某个日期，以及会议开始和结束之间之后，那么会议室列表里面的选项就是这个时间段空闲的会议室，这样我们创建会议申请的时候就不用担心跟其他的会议产生冲突。

<el-dialog title="会议申请" :close-on-click-modal="false" v-model="visible" width="692px">
    <el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="60px">
        <el-form-item label="主题" prop="title">
            <el-input v-model="dataForm.title" size="medium" style="width:100%" clearable="clearable" />
        </el-form-item>
        <el-form-item label="内容" prop="desc">
            <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="dataForm.desc"
                size="medium"
                resize="none"
                maxlength="200"
                clearable="clearable"
            />
        </el-form-item>
        <el-form-item label="日期" prop="date">
            <el-date-picker
                v-model="dataForm.date"
                type="date"
                placeholder="选择日期"
                style="width:34.5%"
                size="medium"
                :disabledDate="disabledDate"
                clearable="clearable"
                @change="loadPlaceList()"
            ></el-date-picker>
            <span class="note">会议日期只能是当前或者未来的日期，不能是以往的日期</span>
        </el-form-item>
        <el-form-item label="时间">
            <el-col :span="11">
                <el-form-item prop="start" class="inner-item">
                    <el-time-select
                        placeholder="起始时间"
                        v-model="dataForm.start"
                        start="08:30"
                        step="00:30"
                        end="18:30"
                        size="medium"
                        style="width:96%"
                        clearable="clearable"
                        @change="loadPlaceList()"
                    ></el-time-select>
                </el-form-item>
            </el-col>
            <el-col :span="2">  ~  </el-col>
            <el-col :span="11" prop="end">
                <el-form-item prop="end" class="inner-item">
                    <el-time-select
                        placeholder="结束时间"
                        v-model="dataForm.end"
                        start="08:30"
                        step="00:30"
                        end="18:30"
                        size="medium"
                        style="width:96%"
                        clearable="clearable"
                        :minTime="dataForm.start"
                        @change="loadPlaceList()"
                    ></el-time-select>
                </el-form-item>
            </el-col>
            <span class="note">注意会议时间范围</span>
        </el-form-item>
        <el-form-item label="地点" prop="place">
            <el-select
                v-model="dataForm.place"
                placeholder="会议室"
                size="medium"
                style="width:34.5%"
                clearable="clearable"
            >
                <el-option v-for="one in placeList" :label="one" :value="one"></el-option>
            </el-select>
            <span class="note">列表中的会议室均为时间段内空闲的，请选择一个会议室</span>
        </el-form-item>
        <el-form-item label="成员" prop="members">
            <el-transfer
                v-model="dataForm.members"
                :data="users"
                :titles="['员工', '参会人']"
                filterable
                filter-placeholder="请输入姓名"
            />
        </el-form-item>
    </el-form>
    <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>
</el-dialog>

关于loadPlaceList()函数，咱们有必要认真看一下它的内容。

loadPlaceList: function() {
    let that = this;
    that.dataForm.place = null;
    that.placeList = [];
    if (
        that.dataForm.date == null ||
        that.dataForm.date == '' ||
        that.dataForm.start == null ||
        that.dataForm.start == '' ||
        that.dataForm.end == null ||
        that.dataForm.end == ''
    ) {
        return;
    }
    let data = {
        date: dayjs(that.dataForm.date).format('YYYY-MM-DD'),
        start: that.dataForm.start,
        end: that.dataForm.end
    };
    that.$http('meeting_room/searchFreeMeetingRoom', 'POST', data, true, function(resp) {
        that.placeList = resp.list;
    });
},

二、引用弹窗页面

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

<template>
    <div>
        ……
        <add v-if="addVisible" ref="add" @refresh="refresh"></add>
        ……
    </div>
</template>
<script>
import Add from './offline_meeting-add.vue';
export default {
    components: {
        Add
    },
    ……
}
</script>

三、提交会议申请

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

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

dataFormSubmit: function() {
    let that = this;
    let data = 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
                    });
                }
            });
        }
    });
}

四、显示弹窗页面

在offline_meeting.vue页面中，声明会议申请按钮的点击事件回调函数和刷新函数，然后就可以测试发起会议申请了。

<el-form-item>
    <el-button size="medium" type="primary" @click="searchHandle()">查询</el-button>
    <el-button size="medium" type="danger" @click="addHandle()">会议申请</el-button>
</el-form-item>

addHandle: function() {
    this.addVisible = true;
    this.$nextTick(() => {
        this.$refs.add.init();
    });
},
refresh: function() {
    this.mode = 'gantt';
    this.$refs['dataForm'].resetFields();
    this.loadDataList();
},

五、注意事项

有的同学添加会议申请的时候提示成功，但是在tb_meeting数据表里面会议记录的instance_id字段是空值，这是什么原因呢？

你需要认真检查emos-api和emos-workflow两个项目的控制台的信息，如果emos-api项目的控制台中出现了这么一句话，则说明你的tcode已经过期了，需要更新yml文件中的tcode授权码。