流程页面嵌入统一的审批页面

场景描述

应用中的流程页面，采用统一的审批页面

实现思路

添加一个审批页面，在流程页面中使用内嵌页面组件，嵌入审批页面，在审批页面中调用流程页面中的流程组件的流转、回退等方法

实现步骤

1 在审批页面中获取流程页面中的流程组件，执行流转或回退

统一流程页面中的流程组件的id，便于在审批页面中通过id获取主键，代码如下

this.getParentFrame().page.comp("wfmui");

其中

• this.getParentFrame()是获取内嵌页面组件
• this.getParentFrame().page是获取内嵌页面组件所在的页面，即流程页面

调用流程组件的流程查询方法，代码如下

this.getParentFrame().page.comp("wfmui").advanceQuery();

调用流程组件的回退查询方法，代码如下

this.getParentFrame().page.comp("wfmui").backQuery();

2 在审批页面中输入处理意见，并带入流转对话框

通过流程组件，在打开流转对话框前中，给流转组件的processControl设置处理意见

在审批页面加载完成事件中，获取流程页面中的流程组件，添加打开流转对话框前事件，代码如下

onPageLoaded(event){
    let wfmui = this.getParentFrame().page.comp("wfmui");
    if(wfmui){
        wfmui.on(WF.OPEN_DIALOG_BEFORE,this.setPostscript.bind(this));
    }
}

打开流转对话框前事件触发时，会调用setPostscript方法，方法中event.processControl是流程组件的processControl，event.processControl.data.postscript是其中的处理意见，代码如下

setPostscript(event){
    if (event && event.processControl && event.processControl.data){
        event.processControl.data.postscript = "我的处理意见";
    }
}

3 给流程组件添加事件，实现统一处理

流程组件提供了下面这些事件

// 流程启动事件
WF.START_BEFORE = "startBefore";
WF.START_SUCCESS = "startSuccess";
WF.START_ERROR = "startError";
WF.START_ADVANCE_QUERY_BEFORE = "startAdvanceQueryBefore";
WF.START_ADVANCE_QUERY_SUCCESS = "startAdvanceQuerySuccess";
WF.START_ADVANCE_QUERY_ERROR = "startAdvanceQueryError";

// 流转事件
WF.ADVANCE_BEFORE = "advanceBefore";
WF.ADVANCE_SUCCESS = "advanceSuccess";
WF.ADVANCE_ERROR = "advanceError";
WF.ADVANCE_QUERY_BEFORE = "advanceQueryBefore";
WF.ADVANCE_QUERY_SUCCESS = "advanceQuerySuccess";
WF.ADVANCE_QUERY_ERROR = "advanceQueryError";

// 流程对话框事件
WF.OPEN_DIALOG_BEFORE = "openDialogBefore";

// 回退事件
WF.BACK_BEFORE = "backBefore";
WF.BACK_SUCCESS = "backSuccess";
WF.BACK_ERROR = "backError";
WF.BACK_QUERY_BEFORE = "backQueryBefore";
WF.BACK_QUERY_SUCCESS = "backQuerySuccess";
WF.BACK_QUERY_ERROR = "backQueryError";

//加签事件
WF.ADD_SIGN_USER_BEFORE = "addSignUserBefore";
WF.ADD_SIGN_USER_SUCCESS = "addSignUserSuccess";
WF.ADD_SIGN_USER_ERROR = "addSignUserError";
WF.ADD_SIGN_USER_QUERY_BEFORE = "addSignUserQueryBefore";
WF.ADD_SIGN_USER_QUERY_SUCCESS = "addSignUserQuerySuccess";
WF.ADD_SIGN_USER_QUERY_ERROR = "addSignUserQueryError";

// 终止事件
WF.ABORT_BEFORE = "abortBefore";
WF.ABORT_SUCCESS = "abortSuccess";
WF.ABORT_ERROR = "abortError";
WF.ABORT_QUERY_BEFORE = "abortQueryBefore";
WF.ABORT_QUERY_SUCCESS = "abortQuerySuccess";
WF.ABORT_QUERY_ERROR = "abortQueryError";

// 暂停事件
WF.SUSPEND_BEFORE = "suspendBefore";
WF.SUSPEND_SUCCESS = "suspendSuccess";
WF.SUSPEND_ERROR = "suspendError";
WF.SUSPEND_QUERY_BEFORE = "suspendQueryBefore";
WF.SUSPEND_QUERY_SUCCESS = "suspendQuerySuccess";
WF.SUSPEND_QUERY_ERROR = "suspendQueryError";

// 转发事件
WF.TRANSFER_BEFORE = "transferBefore";
WF.TRANSFER_SUCCESS = "transferSuccess";
WF.TRANSFER_ERROR = "transferError";
WF.TRANSFER_QUERY_BEFORE = "transferQueryBefore";
WF.TRANSFER_QUERY_SUCCESS = "transferQuerySuccess";
WF.TRANSFER_QUERY_ERROR = "transferQueryError";

// 定制流程事件
WF.START_CUSTOMIZED_QUERY_BEFORE = "startCustomizedQueryBefore";
WF.START_CUSTOMIZED_QUERY_SUCCESS = "startCustomizedQuerySuccess";
WF.START_CUSTOMIZED_QUERY_ERROR = "startCustomizedQueryError";

// 特送事件
WF.SPECIAL_BEFORE = "specialBefore";
WF.SPECIAL_SUCCESS = "specialSuccess";
WF.SPECIAL_ERROR = "specialError";
WF.SPECIAL_QUERY_BEFORE = "specialQueryBefore";
WF.SPECIAL_QUERY_SUCCESS = "specialQuerySuccess";
WF.SPECIAL_QUERY_ERROR = "specialQueryError";

// 重启事件
WF.RESTART_BEFORE = "restartBefore";
WF.RESTART_SUCCESS = "restartSuccess";
WF.RESTART_ERROR = "restartError";
WF.RESTART_QUERY_BEFORE = "restartQueryBefore";
WF.RESTART_QUERY_SUCCESS = "restartQuerySuccess";
WF.RESTART_QUERY_ERROR = "restartQueryError";

和2的方法一样，给流程组件添加新的事件，触发后执行相应代码。本例为在流转成功后，调用newAdvanceQuery方法，代码如下

onPageLoaded(event){
    let wfmui = this.getParentFrame().page.comp("wfmui");
    if(wfmui){
        wfmui.on(WF.OPEN_DIALOG_BEFORE,this.setPostscript.bind(this));
        wfmui.on(WF.ADVANCE_SUCCESS,this.newAdvanceQuery.bind(this));
    }
}

newAdvanceQuery(event){
    //执行你的代码
}

特别提醒：流程如果设置为流转时启动，在第一次流转时，不触发流转查询和流转等事件，触发启动流转和启动等事件

4 显示审批信息

在审批页面中放审批信息组件，在页面加载事件中，调用审批信息组件的loadByTask方法，通过task加载审批信息，代码如下

onPageLoaded(event){
    let wfmui = this.getParentFrame().page.comp("wfmui");
    if(wfmui){
        wfmui.on(WF.OPEN_DIALOG_BEFORE,this.setPostscript.bind(this));
        wfmui.on(WF.ADVANCE_SUCCESS,this.newAdvanceQuery.bind(this));
        var task = wfmui.getTask();
        this.comp("wfRecord0").loadByTask(task);
    }
}