上节课我们用Swagger测试了Web方法，只要符合条件，可以正常删除报销申请记录。这节课我们把前端JS代码给写了，我们就能在VUE页面上删除报销申请了。

在reim.vue页面上，每行报销申请的右侧都有删除按钮。想要删除报销申请是有条件的，首先必须是申请人当事人，而且报销申请是“待审批”或者“待审批”状态。

<el-button
    type="text"
    size="medium"
    :disabled="!(['待审批', '已否决'].includes(scope.row.status) && scope.row.mine == 'true')"
    @click="deleteHandle(scope.row.id)"
>
    删除
</el-button>

编写删除按钮点击事件的回调函数deleteHandle()，发出Ajax请求删除某个报销申请。

deleteHandle: function(id) {
    let that = this;
    that.$confirm(`确定要删除选中的记录？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        that.$http('reim/deleteReimById', 'POST', { id: id }, true, function(resp) {
            if (resp.rows > 0) {
                that.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1200,
                    onClose: () => {
                        that.loadDataList();
                    }
                });
            } else {
                that.$message({
                    message: '未能删除记录',
                    type: 'warning',
                    duration: 1200
                });
            }
        });
    });
},