EOS7+中结合NUI实现流程图和活动信息的显示

来源：互联网发布：2016中小企业数据统计编辑：程序博客网时间：2024/06/05 14:47

阅读原文更多流程相关知识点，请访问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" onclick="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" onclick="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>

0 0