上个小节我们用Swagger测试Web方法，成功的删除了会议申请。既然后端代码已经没有问题了，下面咱们就来写一下前端的JS语句。

一、熟悉前端页面

周日历的会议卡片上面带有关闭图标，用户点击这个图标可以删除会议申请。只有进入当前VUE页面的用户是这个会议的申请人，而且会议状态是1或者3，这个删除图标才会显示。

<SvgIcon
    name="close"
    class="icon-svg-close"
    v-if="
        calendar.map[`${day.date}#${one}`].isCreator == 'true' &&
            [1, 3].includes(calendar.map[`${day.date}#${one}`].status)
    "
    @click.stop="deleteHandle(`${day.date}#${one}`)"
/>

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

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

deleteHandle: function(key) {
    let that = this;
    that.$confirm('是否删除该会议?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        let json = that.calendar.map[key];
        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
                });
            }
        });
    });
}