上个小节我们用Swagger检测了调用Web方法审批会议申请，无论是部门经理还是总经理，都可以正常审批。工作流项目会把审批结果发送给recieveNotify对应的URL地址。这个小节我们把前端页面的JS代码给写一下，让用户可以在前端页面执行审批。

一、封装审批函数

无论审批人同意或者不同意会议申请，都要发送Ajax请求，不如我们把发送审批结果的函数给封装起来。所以我们在approval.vue页面中定义approve()函数。

approve: function(taskId, approval) {
    let that = this;
    that.dataListLoading = true;
    let data = {
        taskId: taskId,
        approval: approval
    };
    that.$http('approval/approvalTask', 'POST', data, true, function() {
        that.pageIndex = 1;
        that.loadDataList();
    });
},

审批按钮点击事件的回调函数我们要写一下，顺带把查看按钮点击事件的回调函数给写了。

<el-button
    type="text"
    size="medium"
    v-if="isAuth(['ROOT', 'WORKFLOW:APPROVAL']) && dataForm.status == '待审批' && !scope.row.filing"
    @click="approveHandle(scope.row.taskId)"
>
    审批
</el-button>
<el-button
    type="text"
    size="medium"
    v-if="dataForm.status != '待审批'"
    @click="viewHandle(scope.row)"
>
    查看
</el-button>

点击审批按钮之后，页面要出现对话框，所以我们在JS里面去弹出这个对话框。有个细节大家要注意，如果我们点击对话框右上角的关闭图标，会触发cancel事件。Cancel按钮现在对应的是不同意，所以只要我们点击关闭图标就触发不同意这个审批，这个不太适合，所以我干脆把这个关闭图标给去掉。

approveHandle: function(taskId) {
    let that = this;
    that.$confirm('请选择对该条申请的处理意见', '提示', {
        confirmButtonText: '同意',
        cancelButtonText: '否决',
        type: 'warning',
   	    //去除关闭图标
        distinguishCancelAndClose: true,
        callback: function(action) {
            if (action == 'confirm') {
                that.approve(taskId, '同意');
            } else if (action == 'cancel') {
                that.approve(taskId, '不同意');
            }
        }
    });
},
  
viewHandle: function(row) {
    this.$refs.approvalTable.toggleRowExpansion(row, true);
}

二、测试审批功能

1. 用总经理身份创建会议申请，看看无需审批是什么效果。
2. 用非总经理身份创建会议申请
   （1）参会人是相同部门
   （2）参会人是不同部门