自定义流程页面

流程组件提供了流程使用的5个页面，分别是流转确认页面、批流转页面、流程记录页面、流程图页面和催办任务页面。按照不同的技术架构和前端类型，提供 react 桌面端、react 移动端、vue 桌面端和 vue 移动端总共20个页面。下面列举了 react 桌面端页面路径及截图：

流转确认页面 UI2/comp/wfmui/components/wfmui/pcxDialog/dialog.w

批流转页面 UI2/comp/wfmui/components/wfmui/pcxDialog/batchTask.w

流程记录页面 UI2/comp/wfmui/components/wfmui/pcxDialog/record.w

流程图页面 UI2/comp/wfmui/components/wfmui/pcxDialog/chart.w

催办任务页面 UI2/comp/wfmui/components/wfmui/pcxDialog/remind.w

react 移动端页面目录：UI2/comp/wfmui/components/wfmui/mxDialog vue 桌面端页面目录：UI2/comp/wfmui/components/wfmui/antdvDialog vue 移动端页面目录：UI2/comp/wfmui/components/wfmui/vantDialog

系统提供了工作流扩展组件，提供开发者使用自定义页面的能力。

先了解流程组件提供的页面，再自定义页面。

流转确认页面

当流程中选中了流转确认（默认为选中），在页面上执行流转查询、回退查询、转发查询和终止查询等操作后，会弹出流转确认页面。

根据不同的操作，页面收到不同的数据。

• 执行流转查询后，页面会收到下一步将会流转到的环节和处理人、通知人等数据。
• 执行回退查询后，页面会收到上一步的处理人等数据

页面展示接收到的数据，用户可以添加、删除处理人、通知人，填写审批意见、上传附件和签名。

鉴于流转确认页面接收到的参数和返回的数据比较复杂，自定义页面时，尽量使用现有的数据集展现。下面分块介绍界面及其对应的数据集。

环节及处理人

流转时，下一步可能会有多个环节，每个环节可能有多个处理人。环节信息存储在工作流环节数据中，处理人信息存储在执行者数据中，因此流转确认页面采用两个列表嵌套的方式展现。

• 外层列表关联工作流环节数据，展现环节列表
• 内层列表关联执行者数据，过滤出某个环节的处理人，用组织列表组件展现

工作流环节数据 activityData

执行者数据 executorData

二者的关联关系是：执行者数据.owner = 工作流环节数据.rowid。

一个环节对应一条执行者数据，多个处理人在同一条数据中。

环节及处理人（简洁模式）

在流程配置中，处理人选择方式设置为简洁，系统将执行者数据按人分成多条数据（一个执行者对应一条数据）。根据在流程中设置的处理人数量（单人/多人），使用单选组或多选组组件展示。用户选择后，将rowid或rowid列表写入工作流环节数据的executor列。

工作流环节数据 activityData

简洁模式执行人数据 simpleExecutorData

二者的关联关系是：简洁模式执行人数据.owner = 工作流环节数据.rowid

一个环节对应多条执行者数据，一个处理人对应一条数据。

流转高级选项

每个环节可以设置任务名称、执行模式、抢占模式、返回模式、处理人表决权重等信息。

• 任务名称、执行模式、抢占模式：存入流转高级数据
• 处理人表决权重：存入执行者表决权重数据

流转高级数据 flowToFromData

执行者表决权重数据 executorVoteData

• 下面几个是下拉选择的数据

执行模式数据 executeModeData

返回模式数据 executeMode2Data

抢占模式数据 preemptModeData

通知人

流转时，可能有多个通知人。通知数据和通知人数据分别存储在通知数据和执行者数据中，因此流转确认页面采用两个列表嵌套的方式展现。

• 外层列表关联通知数据，展现通知信息
• 内层列表关联执行者数据，过滤出通知人，用组织列表组件展现

通知数据 noticeData

执行者数据 executorData

二者的关联关系是：执行者数据.owner = 通知数据.rowid

一个通知对应一条通知者数据，多个通知人在同一条数据中。

通知人（简洁模式）

在流程配置中，处理人选择方式设置为简洁，系统将执行者数据按人分成多条数据（一个执行者对应一条数据），使用多选组组件展示。用户选择后，将rowid或rowid列表写入通知数据的executor列。

通知数据 noticeData

简洁模式执行人数据 simpleExecutorData

二者的关联关系是：简洁模式执行人数据.owner = 通知数据.rowid

一个通知对应多条通知人数据，一个通知人对应一条数据。

处理意见

用户选择常用意见或输入处理意见，处理意见存入流程信息数据的处理意见postscript列

流程信息数据 controlData

• 下面的数据是下拉选择的数据

常用意见 oftenUseNoticeData

附件

用户上传文件，附件信息存入流程信息数据的附件files列

流程信息数据 controlData

签名

用户使用已有的个人签名或新签名，签名信息存入流程信息数据的签名sign列

流程信息数据 controlData

加签

用户选择加签范围，加签范围存入流程信息数据的新增签名模式addSignUserMode列

流程信息数据 controlData

• 下面的数据是单选组选择的数据

加签范围 addSignUserModeRangeData

标题

界面上的标题，可在流程配置中配置，从标题数据中获取

标题数据 tipData

自定义流转页面

下面以自定义一个简单版的流转页面为例，说明自定义流转页面的过程。

添加工作流扩展组件

从市场添加工作流扩展组件，无需将组件放到页面上。添加组件后，点击下图中红框圈出的按钮，打开市场组件对话框。

找到工作流扩展组件，点击右侧的定制按钮。组件未开启定制，则源码只读，开启定制后，才能编辑组件。

切换到代码页，打开model/UI2/comp/wfmuiext/components/wfmuiext/wfmuiext.config.js文 件，在这里设置自定义流程页面的路径。

• react 的桌面端页面写在 react-pc 里
• react 的移动端页面写在 react-m 里
• vue 的桌面端页面写在 vue-pc 里
• vue 的移动端页面写在 vue-m 里
• dialog 对应流转确认页面
• record 对应流程记录页面
• chart 对应流程图页面
• batch 对应批流转页面
• remind 对应催办任务页面

添加流转页面

本例定义 react 桌面端的流转页面，因此页面路径写在 react-pc-dialog 里

    "react": {
        "pc": {
            "dialog": base + "/reactpc/dialog.w"
        }
    }

如果是 vue 桌面端，需要修改的是 vue 对应的内如，如下：

    "vue": {
        "pc": {
            "dialog": base + "/vuepc/dialog.w"
        }
    }

将流程组件中的 react 桌面端的流程页面 model/UI2/comp/wfmui/components/wfmui/pcxDialog/dialog.w、dialog.js、dialog..w.meta 等文件复制到 model/UI2/pcx 目录下。(备注：vue 则需要复制 model/UI2/comp/wfmui/components/wfmui/antdvDialog/ 目录下的文件)

在设计器中打开流程对话框页面，进行编辑，不修改 js，只修改 w 文件里面的组件。

添加审批意见

审批意见使用长文本组件显示，绑定“流转表单数据.处理意见”列

添加处理人

下一个审批人使用选择器组件显示，绑定“工作流环节数据.executor”列。范围数据集使用“简洁模式执行人数据”（使用简洁模式需要在流程配置中，将处理人选择方式设置为简洁）。选择项值设置为 rowid。选择项名称设置为 sName

过滤条件设置为：行记录.owner==工作流环节数据.rowid

添加当前人和日期

审批人（即当前人）和日期，在原来的流转确认页面中没有。在当前页面中放上下文组件，在页面数据中添加两列：审批人和日期，

设置这两列的默认值规则和只读规则

审批人和日期使用输入框显示，绑定“页面数据中的审批人和日期”列

添加附件

附件使用附件组件显示，绑定“流转表单数据.附件”列

调试运行

将 UI2/pcx/dialog.w、dialog.js、dialog..w.meta 等文件复制到 model/comp/wfmuiext/components/wfmuiext/dialog/reactpc 目录下。从门户调试运行，打开流程功能，点流转按钮，显示出新添加的流转确认页面。

批流转页面

从某条待办任务，打开批流转页面，显示出和这条待办任务处于同一环节的其它待办任务，用户选择后，这些任务会按照相同的方式进行流转。

接收参数

批流转页面接收到任务id参数，调用 ProcessUtil.getBatchTasks 方法获取同环节的其它待办任务，显示到页面上，代码如下：

    onTaskDataCustomRefresh = (event) => {
        event.promise = ProcessUtil.getBatchTasks(this, this.params.task, {
            "searchText": this.comp("pageData").getValue("searchText")
        }).then((data) => {
            event.source.loadData(data);
            event.source.setTotal(data.length);
        });
    }

其中 ProcessUtil 来自流程组件

    import ProcessUtil from "$UI/comp/wfmui/components/wfmui/js/processUtil";

返回数据

批流转页面返回任务 id 数组和业务数据 id 数据，代码如下：

    onOkBtnClick = (event) => {
        var sData1s = [];
        var tasks = [];
        var selectData = this.comp("selectData");
        selectData.each((option)=>{
            tasks.push(option.row.id);
            sData1s.push(option.row.sData1);
        })
        if (selectData.count() > 0) {
            this.getOpener().postMessage({ tasks: tasks, sData1s: sData1s, action: "ok" });
            this.navigateBack();
        } else {
            message.info(this.i18n("请选择批量流转的任务"));
        }
    }

流程记录页面

通过流程实例 id、任务 id、业务数据 id、流程编码都可以查出对应的流程记录。

流程记录页面可以有4个参数，分别是实例 id、任务 id、业务数据 id、流程编码，使用这些参数调用 ProcessUtil.queryRecord 方法获取流程记录，显示到页面上，代码如下：

    onTaskDataCustomRefresh = (event) => {
        var option = {
            task: this.params.task,
            pi: this.params.pi,
            process: this.params.process||"",
            sData1: this.params.data,
            limit: event.limit,
            offset: event.offset,
            searchText: this.comp("pageData").getValue("searchText")
        };
        event.promise = ProcessUtil.queryRecord(this, option).then((res)=>{
            event.source.loadData(res.data);
            event.source.setTotal(ProcessUtil.getTotal(res));
        })
    }

其中 ProcessUtil 来自流程组件

    import ProcessUtil from "$UI/comp/wfmui/components/wfmui/js/processUtil";

流程图页面

目前流程组件的流程图页面是用 jQuery 实现的，如果需要自定义，就调用下面这个 api 获取流程图相关数据，自行渲染。

请求地址: 
    /wf/BusinessServer/business-action
请求方式：
    POST
输入参数:
    process：固定值 /SA/wf/manager/managerProcess                  
    activity：固定值 main                                           
    executor：String 当前人的 fid                                          
    params：JSONObject 查询参数，里面包含 executor 和 task 两个参数，其它为固定值 
        {
            "contentType": "json",
            "accept": "application/json",
            "process": "/SA/wf/manager/managerProcess",
            "activity": "main",
            "actionFlag": "__action_0__",
            "executor": "当前人的fid",
            "executeContext": "",
            "action": "getProcessChartByTaskAction",
            "parameters": {
                "task": "任务id",
                "ext": "sContent,处理意见" 
            },
            "translateParameter": null 
        }

案例

/wf/BusinessServer/business-action?process=/SA/wf/manager/managerProcess&activity=main&executor=/oDJaLi833XQoQQTS2fl.ogn/oIzH5nu33fdpJ4oBfcQ.psm

params 如下

    {
        "contentType": "json",
        "accept": "application/json",
        "process": "/SA/wf/manager/managerProcess",
        "activity": "main",
        "actionFlag": "__action_0__",
        "executor": "/oDJaLi833XQoQQTS2fl.ogn/oIzH5nu33fdpJ4oBfcQ.psm",
        "executeContext": "",
        "action": "getProcessChartByTaskAction",
        "parameters": {
            "task": "09D7AD299F794E1B896090B43E5D1931",
            "ext": "sContent,处理意见"
        },
        "translateParameter": null
    }

返回结果

data 中的 value 是流程图和波特图的数据，说明如下

• gMeta 中的数据用于渲染流程图，包括节点（businessActivity1-1560574174）和线（businessActivity1|businessActivity2）的信息

• otherMeta 中的数据用于渲染流程图的执行情况，包括当前 livings、完成 finisheds、终止 aborts、暂停 suspends、会签环节部分已完成 lasts、已经过 flowTrack2、回退 backTrack 等的信息

• botChart 中的数据是任务数组，用于渲染波特图。每一条任务包括前序任务 ahead 和后续任务 next

催办任务页面

传入某个任务 id，打开催办任务页面，显示出这个流程的所有待办任务和系统设置的通知方式，用户选择催办任务和通知方式，系统会给处理人发送通知。

接收参数

催办任务页面收到任务 id 参数，调用 taskUtil.queryActiveTaskByPIForTask 方法获取这个流程的所有待办任务，显示到页面上，代码如下：

    async onActivityDataCustomRefresh(event) {
        let activityData = event.source;
        let { task } = this.params;
        let append = event.options && event.options.append;
        event.promise = taskUtil.queryActiveTaskByPIForTask(task, this).then((data) => {
            activityData.loadData(data, append);
            activityData.setTotal(data.length);
        })
    }

其中 taskUtil 来自流程组件

    import taskUtil from "$UI/comp/wfmui/components/wfmui/js/taskUtil";

调用消息中心提供的 api：/message/main/message/getmessagechannel 获取通知方式

返回数据

催办任务页面返回任务 id 数组和通知方式，代码如下：

    onOkBtnClick = (event) => {
        let selectRows = this.comp("selectedData").toJson({ format: "simple" });
        if (selectRows.length == 0) {
            message.error(this.i18n("请选择需要通知的人"));
            return;
        }
        let channel = this.comp("mainData").getValue("fcode");
        if (!channel) {
            message.error(this.i18n("请选择通知方式"));
            return;
        }
        let msgUser = [];
        selectRows.forEach(item => msgUser.push(item.t));
        this.getOpener().postMessage({ isOk: true, channel: channel, task: msgUser.join() });
        this.navigateBack();
    }