Skip to end of metadata
Go to start of metadata

       在使用UFLO开发业务流程的时候,我们可能需要根据任务ID、历史任务ID、流程实例的ID、历史流程实例ID或流程模版ID或Key来显示对应的流程模版。如果您的项目中包含uflo-console模块,那么要在网页中显示对应的流程进度图是一件非常的简单的事,在uflo-console模块当中,我们已添加了这一功能。

       显示流程进度图的URL为:

http://localhost:8080/uflo-test/uflo/diagram

我们可以在这个URL后面添加下面这些参数之一来显示流程图:

参数名含义示例描述
taskId任务ID或历史任务IDhttp://localhost:8080/uflo-test/uflo/diagram?taskId=202

系统会查询任务ID为202的任务,如果存在就显示这个任务对应的流程图,

否则查询历史任务ID为202的历史任务,如果存在就显示。

processId流程模版IDhttp://localhost:8080/uflo-test/uflo/diagram?processId=202查询流程模版ID为202的流程模版,如果存在就显示对应的流程图。
processKey流程模版Keyhttp://localhost:8080/uflo-test/uflo/diagram?processId=demo-2查询流程模版key为"demo-2"的流程模版,如果存在就显示对应的流程图。
processInstanceId流程实例ID或历史流程实例IDhttp://localhost:8080/uflo-test/uflo/diagram?processInstanceId=202

系统会查询流程实例IID为202的流程实例,如果存在就显示这个流程实例I对应的流程图,

否则查询历史流程实例IID为202的历史流程实例,如果存在就显示。

       可以看到Uflo中提供的流程图在线展示,并不是简单的图片展示,而是根据流程模版信息,在网页当中通过JS进行重绘来显示流程图。尽管与流程模版设计器IDE中采用的技术不同,但在线显示流程图可以做到与IDE中显示效果100%相同,不存在任何差异。同时,对于经过的流程节点与连线,在线流程图在展示的时候会以灰色调进行显示,对于经过的人工任务节点,鼠标移到节点图片上还在tooltip的提示信息,及右上角的节点在流程流转上经历多少次的圆圈数字提示等。同时,当我们的鼠标移到流程图节点对应的图标上时,还会有类似tooltip的默认提示,在这个默认提示当中,显示了当前任务相关信息。

流程图中任务节点提示信息修改

默认情况下,当我们的鼠标移到流程图节点对应的图标上时,会显示当前任务的完成情况,如果需要禁用,那么可以在properties文件中将uflo.disableDefaultTaskDiagramInfoProvider属性值设置成true,这个默认的提示信息就不会再显示;同时如果需要自定义任务节点上tooltip的显示信息,我们可以实现com.bstek.uflo.diagram.TaskDiagramInfoProvider,在其中填充需要提示的信息,然后将实现类配置到spring中即可。

       同时,为了更加友好的显示在线流程图效果,我们还允许大家对流程图中经过节点的颜色、字体、字体大小、边框色、连线颜色、是否显示节点经过次数等通过属性文件中进行自定义,这些属性如下表所示:

属性名数据类型默认值描述

uflo.diagram.showTime

布尔true是否显示节点流转次数

uflo.diagram.passedNodeBgcolor

字符串245,245,245一个RGB数值,用来决定经过的节点的背景颜色

uflo.diagram.passedNodeFontColor

字符串150,150,150一个RGB数值,用来决定经过的节点的字体颜色

uflo.diagram.passedNodeFontSize

数字13定义经过节点字体大小

uflo.diagram.passedNodeBorderColor

字符串200,200,200一个RGB数值,用来决定经过的节点的边框颜色

uflo.diagram.passedConnectionColor

字符串200,200,200一个RGB数值,用来决定经过的节点之间连线的颜色

uflo.diagram.passedConnectionFontColor

字符串150,150,150一个RGB数值,用来决定经过的节点之间连线的上文字的颜色(如果连线上有文字的话)

uflo.diagram.passedConnectionFontSize

数字12定义经过节点之间连线文字大小

uflo.diagram.connectionColor

字符串0,69,123一个RGB数值,定义未经过节点间连线颜色

uflo.diagram.connectionFontColor

字符串0,69,123一个RGB数值,定义未经过节点间连线上文字颜色

uflo.diagram.connectionFontSize

数字12定义未经过节点之间连线文字大小

uflo.diagram.nodeBgcolor

字符串220,220,220一个RGB数值,定义未经过节点的背景颜色

uflo.diagram.nodeFontColor

字符串18,42,136一个RGB数值,定义未经过节点的文字颜色

uflo.diagram.nodeFontSize

数字13定义未经过节点的文字大小

uflo.diagram.nodeBorderColor

字符串18,42,136一个RGB数值,定义未经过节点的边框颜色

uflo.diagram.currentNodeBgcolor

字符串250,250,250一个RGB数值,定义当前流程实例所在任务节点的背景颜色

uflo.diagram.currentNodeFontColor

字符串76,177,255一个RGB数值,定义当前流程实例所在任务节点的字体颜色

uflo.diagram.currentNodeFontSize

数字13定义当前流程实例所在任务节点的字体大小

uflo.diagram.currentNodeBorderColor

字符串76,121,156一个RGB数值,定义当前流程实例所在任务节点的边框颜色
uflo.diagram.multiCurrentNodeBgcolor字符串250,250,250一个RGB数值,定义当前流程实例并行情况下所在任务节点的背景颜色
uflo.diagram.multiCurrentNodeFontColor字符串0,160,233一个RGB数值,定义当前流程实例并行情况下所在任务节点的字体颜色
uflo.diagram.multiCurrentNodeFontSize数字13定义当前流程实例并行情况下所在任务节点的字体大小
uflo.diagram.multiCurrentNodeBorderColor字符串0,160,233一个RGB数值,定义当前流程实例并行情况下所在任务节点的边框颜色


Labels
  • No labels