阅读原文 更多流程相关知识点,请访问http://doc.primeton.com
1、 当创建项目选择的页面框架是Richweb时,可以在页面的选用板中选择工作流组件“Workflow Tag------ProcessGraph”,页面中会自动引入相关的jsp和标签,但最后一个workflow-tag.js路径错误,需要去掉前面的“/common”。如果页面只是用来显示流程图或图元信息,去掉这个js也可以。如下所示:
<%@taglib uri="http://eos.primeton.com/tags/workflow" prefix="wf"%> <%@page pageEncoding="UTF-8"%> <%@include file="/common/common.jsp"%> <%@include file="/common/skins/skin0/component.jsp" %> <html> <!-- - Author(s): primeton - Date: 2015-04-23 13:57:27 - Description: --> <head> <title>显示流程图</title> <h:script src="/workflow/wfcomponent/web/js/workflow.js"/> <h:script src="/workflow/wfcomponent/web/js/Graphic.js"/> <h:script src="/workflow/wfcomponent/web/js/workflow-tag.js"/> </head> <body> <wf:processGraph/> </body> </html>
2、 若将上面的<h:script />标签换成标准的<script></script>标签,src中一定要加上当前应用上下文,否则无法显示流程图中的连接线,如下代码所示:
<script src="<%=request.getContextPath() %>/workflow/wfcomponent/web/js/workflow.js"></script> <script src="<%=request.getContextPath() %>/workflow/wfcomponent/web/js/Graphic.js"></script> <script src="<%=request.getContextPath() %>/workflow/wfcomponent/web/js/workflow-tag.js"></script>
3、 也可以按照BPS帮助文档中的说明,用下面的代码替换自动引入的JSP和JS,此时代码比较简洁,如下所示:
<%@page pageEncoding="UTF-8"%> <%@include file="/workflow/wfcomponent/web/common/common.jsp"%> <html> <!-- - Author(s): primeton - Date: 2015-04-23 13:57:27 - Description: --> <head> <title>显示流程图</title> </head> <body> <wf:processGraph/> </body> </html>
注意:在NUI页面框架中,缺省模板中有如下代码: < !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 在显示流程图的页面中一定要去掉该行代码,否则流程图会错位。 |
4、 若想显示活动图元的信息,需要嵌套使用activityGraph标签,如下代码所示:
<wf:processGraph processInstID="321" zoomQuotiety="1" > <wf:activityGraph activityType="manual" οnclick="show(this)" /> </wf:processGraph>
产品联机帮助中有属性的详细说明,但是双击事件在该版本中不支持。
5、在上面代码中show中需要取得人工活动图元的信息,方法如下:
function show(e){ alert("流程定义ID:"+ e.getAttribute("processdefid")); alert("活动定义ID:"+ e.getAttribute("activitydefid")); alert("流程实例ID:"+ e.getAttribute("processinstid")); alert("活动实例ID:"+ e.getAttribute("activityinstid")); }
6、使用NUI控件显示活动信息时,有多种方式,除了nui.open外,还有nui的messagebox和window等,可以根据实际情况选择。本文提供三种方式,详细代码如下:
<%--<%@taglib uri="http://eos.primeton.com/tags/workflow" prefix="wf"%>--%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false" %> <%@include file="/workflow/wfcomponent/web/common/common.jsp"%> <%--<%@include file="/common/common.jsp"%> <%@include file="/common/skins/skin0/component.jsp"%>--%> <html> <!-- - Author(s): primeton - Date: 2015-04-23 13:57:27 - Description:--> <head> <title>显示流程图</title> <script src="<%= request.getContextPath() %>/common/nui/nui.js" type="text/javascript"></script> <%--<script src="<%=request.getContextPath() %>/workflow/wfcomponent/web/js/workflow.js"></script> <script src="<%=request.getContextPath() %>/workflow/wfcomponent/web/js/Graphic.js"></script> <script src="<%=request.getContextPath() %>/workflow/wfcomponent/web/js/workflow-tag.js"></script>--%> </head> <body> <wf:processGraph processInstID="321" zoomQuotiety="1" > <wf:activityGraph activityType="manual" οnclick="show(this)"/> </wf:processGraph> <%--方法二需要--%> <div id="htmlContent" style="padding-left:10px;display:none;"/> <%--方法三需要--%> <div id="win1" class="nui-window" title="信息" style="width:400px;height:100px;" showMaxButton="true" showModal="false" allowResize="true" allowDrag="true" > </div> <script type="text/javascript"> nui.parse(); //方法二需要 var htmlContent = document.getElementById("htmlContent"); function show(e){ //alert("流程定义ID:"+ e.getAttribute("processdefid")); //alert("活动定义ID:"+ e.getAttribute("activitydefid")); //alert("流程实例ID:"+ e.getAttribute("processinstid")); //alert("活动实例ID:"+ e.getAttribute("activityinstid")); var actX = event.x; var actY = event.y; //根据实际情况,可以通过nui.ajax获取所需数据进行组装 var content=[]; content.push("<div >"); content.push("<table style=\"font-size:15\">"); content.push("<tr><td>操作人:"); content.push("</td></tr>"); content.push("<tr><td>操作时间:"); content.push("</td></tr>"); content.push("<tr><td>审批意见:"); content.push("</td></tr>"); content.push("</table></div>"); //方法一:适用于IE //var p=window.createPopup(); //var pbody=p.document.body; //pbody.style.backgroundColor='#ffffee'; //pbody.style.border='solid red 1px'; //pbody.style.fontSize = '1'; //pbody.innerHTML=content.join(""); //p.show(actX+15, actY+15, 200, 100, document.body); //方法二: htmlContent.style.display = ""; nui.showMessageBox({ width: 250, title: "信息", buttons: ["ok"],//有【确定】按钮 timeout: 2000,//2s后自动关闭 html: content.join(""), showModal: false, x: actX+15, y: actY+15 }); //方法三: //var win = nui.get("win1"); //win.getBodyEl().innerHTML = content.join(""); //win.showAtPos(actX+15, actY+15); //延迟2s,自动隐藏 //setTimeout(function () { // win.hide(); // }, 2000); } </script> </body> </html>