删除线上会议申请和删除线下会议申请，可以共用相同的后端代码。所以我们本小节只需要编写前端JS代码即可。每个线上会议都有删除按钮，每次只能删除一条会议申请。这是为了避免用户失误选中多个会议记录，然后全都删除了。另外删除线上会议的要求和删除线下会议的要求是一致的。

至于说删除按钮左侧的进入会议功能，咱们先搁置。因为只有会议审批通过了，我们才能进入在线视频会议室，所以现在我们还没办法做这个功能。下一章我们实现了工作流审批之后，咱们再做进入视频会议室的功能。

一、熟悉弹窗页面

删除按钮上面用了条件判断，只有是会议申请人并且会议状态是未开始或者未开始，删除按钮才有效。

<el-button
    type="text"
    size="medium"
    :disabled="
        !(
            (scope.row.status == '待审批' || scope.row.status == '未开始') &&
            scope.row.isCreator == 'true'
        )
    "
    @click="deleteHandle(scope.row)"
>
    删除
</el-button>

二、编写JS代码，删除会议记录

我们需要声明deleteHandle()函数，发送Ajax请求，要求后端项目删除会议申请，关闭工作流实例。

deleteHandle: function(json) {
    let that = this;
    that.$confirm('是否删除该会议?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        let data = {
            id: json.id,
            uuid: json.uuid,
            instanceId: json.instanceId,
            reason: '删除会议申请'
        };
        that.$http('meeting/deleteMeetingApplication', 'post', data, true, function(resp) {
            if (resp.rows == 1) {
                that.$message({
                    message: '删除成功',
                    type: 'success',
                    duration: 1200
                });
                that.searchHandle();
            } else {
                that.$message({
                    message: '删除失败',
                    type: 'error',
                    duration: 1200
                });
            }
        });
    });
},

测试删除会议申请的时候，务必要开启工作流项目，切记！而且不要创建会议申请就立即删除会议，那会弹出instanceId不能为空，这是因为创建工作流实例要有个过程，大概1~2秒钟。所以正确的做法是检查数据表中会议记录有instance_id字段值以后，刷新浏览器页面，然后选择删除会议申请。