Platform7.5中BPS客户端流程NUI控件的使用说明

在Platform7.5产品的开源组件中提供了《BPS客户端常用控件说明.pdf》，也就是介绍了扩展的四个流程NUI控件。本文在原有基础上介绍这四个控件的使用方法及注意事项。 

使用前提：

    使用流程NUI控件时，页面上需要引入\webapps\default\bps\web\control\js下面的js，可以在页面上引入流程客户端的通用页面：

<%@include file="/bps/wfclient/common/common.jsp"%>

一、选择参与者控件 <div class = "nui-bps-select-participant"/>

l  继承自editButton

l  控件特有属性

selectorMaxCount：允许选择的个数，默认为-1，即不限制个数；

agentFrom：设置代理的时候使用，为需要设置代理的人的ID，设置之后只能看到代理人范围内的参与者；

processDefID和activityDefID：在设置后继活动参与者时使用；

l  特有方法

getData() 获取选择的参与者信息；

setData() 给控件设置选择项；

l  参考代码

BPS客户端工作项执行代码：bps/wfclient/task/task.jsp

l  使用示例

//jsp代码
<input id="participants" name="participants" class="nui-bps-select-participant" visible="true" />
//js代码
var ps = nui.get("participants").getData();

ps变量的格式如下所示：

[{"typeCode":"emp","id":"1003","name":"王五"},{"typeCode":"org","id":"2","name":"能源事业部"},{"typeCode":"role","id":"1001","name":"demo管理员"}]

通过ajax调用逻辑流时，变量类型可以直接定义成WFParticipant[]，或者DataObject[]。

二、选择流程和活动控件 <div class = "nui-bps-select-process-activity"/>

l  继承自editButton

l  控件特有属性

selectorMaxCount：允许选择的个数，默认为-1，即不限制个数

containActivity：选择项是否包含活动，默认为false

l  特有方法

getData() 获取选择的流程和活动信息；

setData() 给控件设置选择项；

l  参考代码

BPS客户端代理设置的相关代码：bps/wfclient/agent/editFullAgent.jsp；bps/wfclient/agent/editPartAgent.jsp

l  使用示例

//jsp代码
<input id="selectProcess" name="process"  style="width:130px" class="nui-bps-select-process-activity"  allowInput="false" />
//js代码
var process=nui.get("selectProcess").getData();

process变量的格式如下：

[{"itemType":"PROCESS","itemID":"1","itemName":"firstwf"},{"itemType":"PROCESS","itemID":"2","itemName":"请假流程"}]

通过ajax调用逻辑流时，变量的类型可以定义成DataObject[]，但是需要注意的是，传入到逻辑流后，itemType，itemID，itemName的顺序会改变（感觉是按字母进行了排序），变成了itemID，itemName，itemType。

三、指派后继活动或者后继活动参与者 <div class = "nui-bps-appoint-activity"/>

l  继承自Button

l  特有属性

workItemID：需要进行指派的工作项ID

l  参考代码

BPS客户端工作项执行代码：bps/wfclient/task/task.jsp

l  使用示例

该控件用于自由流场景，若当前人工活动未设置为自由活动，该控件会自动隐藏。

//jsp代码
<input class="nui-hidden" id="workItemID" name="projectrecommond.workitemid"/>
<a class="nui-bps-appoint-activity" id="appointActivity"></a>
//js代码
var appointActivity = nui.get("appointActivity");
appointActivity.setWorkItemID(workitemid); //在控件中通过workItemID属性配置也可以
appointActivity.load();

注意：使用该控件时，jsp页面上一定要有个id为workItemID的控件（区分大小写），否则会报js错误：Uncaught ReferenceError: workItemID is not defined。

四、流程图控件 <div class = "nui-bps-processgraph"/>

l  特有属性

showParticipants：当鼠标在流程图上停留的时候是否显示参与者信息，默认为false

procInstID：流程实例ID，设置之后控件显示的为流程实例图

procDefID：流程定义ID，设置之后控件显示流程定义图

l  参考代码

BPS客户端工作项执行代码：bps/wfclient/task/task.jsp

l  使用示例

//jsp代码
<div id="processgraph" class="nui-bps-processgraph" showParticipants="true" height="400px"></div>
//js代码
var processGraphObj = nui.get("processgraph");     			    		               
processGraphObj.setProcInstID(processinstid); //在控件中通过procInstID属性配置也可以
processGraphObj.load();