上个小节我们用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）参会人是不同部门