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

应用中的流程页面，采用统一的审批页面，如下图所示，在审批页面中流转、回退、输入处理意见、显示审批信息

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

流转、回退

在审批页面中获取流程页面中的流程组件，执行流转或回退。统一流程页面中的流程组件的 id，便于在审批页面中通过 id 获取主键，代码如下

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

其中

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

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

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

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

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

输入处理意见

在审批页面中输入处理意见，并带入流转对话框。通过流程组件，在打开对话框前事件中，给流程组件的 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 = "我的处理意见";
        }
    }

添加流转成功事件

给流程组件添加事件，实现统一处理。流程组件提供了下面这些事件

    // 流程启动事件
    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";

和上面的方法一样，给流程组件添加新的事件，触发后执行相应代码。本例为在流转成功后，调用 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){
        //执行你的代码
    }

特别提醒

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

显示审批信息

在审批页面中放审批信息组件，在页面加载事件中，调用审批信息组件的 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);
        }
    }