上节课我们用Swagger测试了Web方法，可以正常删除请假记录，而且工作流项目的Web方法返回的状态码是200，说明成功关闭了工作流实例。这节课我们把前端代码给实现了，那么就可以在前端页面中删除请假申请了。

一、为什么取消了删除多条请假记录？

原先的请假记录表格中是有复选框列的，让我们可以选中多条请假记录。但是后来我把这个复选列给去掉了。因为删除多条记录势必要短时间调用多次工作流项目，这就给工作流造成了瞬时压力。如果用户每次只能删除一条请假记录，从点击删除按钮，到对话框确认，至少几秒钟时间过去了，所以不会造成工作流瞬时高负载。

二、删除部门记录

在leave.vue页面上，每条记录的右侧都有删除按钮，至于能不能点击，还要看表达式的判断。

<el-button
    type="text"
    size="medium"
    :disabled="scope.row.status == '已同意' || scope.row.mine != true"
    @click="deleteHandle(scope.row.id)"
>
	删除
</el-button>

删除按钮点击事件回调函数，我要实现一下。

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