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

最新推荐文章于 2024-08-07 16:01:59 发布

普元产品资深专家

最新推荐文章于 2024-08-07 16:01:59 发布

阅读量2.4k

点赞数

分类专栏： Primeton EOS 文章标签： bps 流程图 tag 标签普元

Primeton EOS 专栏收录该内容

104 篇文章 25 订阅

订阅专栏

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