自定义流程页面

流程组件提供了流程使用的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

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

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

1 流转确认页面

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

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

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

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

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

1.1 环节及处理人

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

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

工作流环节数据 activityData

执行者数据 executorData

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

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

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

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

工作流环节数据 activityData

简洁模式执行人数据 simpleExecutorData

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

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

1.3 流转高级选项

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

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

流转高级数据 flowToFromData

执行者表决权重数据 executorVoteData

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

执行模式数据 executeModeData

返回模式数据 executeMode2Data

抢占模式数据 preemptModeData

1.3 通知人

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

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

通知数据 noticeData

执行者数据 executorData

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

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

1.4 通知人（简洁模式）

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

通知数据 noticeData

简洁模式执行人数据 simpleExecutorData

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

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

1.5 处理意见

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

流程信息数据 controlData

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

常用意见 oftenUseNoticeData

1.6 附件

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

流程信息数据 controlData

1.7 签名

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

流程信息数据 controlData

1.8 加签

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

流程信息数据 controlData

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

加签范围 addSignUserModeRangeData

1.9 标题

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

标题数据 tipData

2 自定义流转页面

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

2.1 添加工作流扩展组件

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

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

切换到代码页，打开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对应催办任务页面

2.2 添加流转页面

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

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

将流程组件中的react桌面端的流程页面model/UI2/comp/wfmui/components/wfmui/pcxDialog/dialog.w、dialog.js、dialog..w.meta等文件复制到model/UI2/pcx目录下。

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

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

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

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

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

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

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

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

2.3 调试运行

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

3 批流转页面

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

1 接收参数

批流转页面接收到任务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";

2 返回数据

批流转页面返回任务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("请选择批量流转的任务"));
    }
}

4 流程记录页面

通过流程实例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";

5 流程图页面

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

请求地址: /wf/BusinessServer/business-action 请求方式：POST 输入参数:

{
    "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

{
    "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

6 催办任务页面

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

1 接收参数

催办任务页面收到任务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获取通知方式

2 返回数据

催办任务页面返回任务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();
}