process-his-tab.jsp 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <%@include file="/context/mytags.jsp"%>
  3. <!DOCTYPE html>
  4. <html lang="zh-cn" class="pui-app">
  5. <head>
  6. <meta charset="utf-8" />
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  8. <meta http-equiv="Cache-Control" content="no-siteapp" />
  9. <meta name="renderer" content="webkit" />
  10. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  11. <meta name="apple-mobile-web-app-capable" content="yes">
  12. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  13. <meta name="description" content="JEECG BPM" />
  14. <meta name="keywords" content="JEECG BPM" />
  15. <title>历史</title>
  16. <link rel="stylesheet" type="text/css" href="plug-in/planeui/dist/css/planeui.css" />
  17. </head>
  18. <body>
  19. <!--[if lte IE 9]>
  20. <div class="pui-layout pui-browsehappy">
  21. <a href="javascript:;" class="pui-close" onclick="document.body.removeChild(this.parentNode);"></a>
  22. <p>您正在使用 <strong class="pui-text-yellow pui-text-xl">过时</strong> 的非现代浏览器,<strong class="pui-text-success pui-text-xl">91.23%</strong> 的人选择 <a href="http://browsehappy.com/" target="_blank" class="pui-text-green-400 pui-text-xl"><strong>升级浏览器</strong></a>,获得了更好、更安全的浏览体验!</p>
  23. </div>
  24. <![endif]-->
  25. <div class="pui-layout pui-app-layout">
  26. <div class="pui-app-main pui-app-main-prev">
  27. <div class="mask mask-bg pui-side-position-mask"></div>
  28. <header class="pui-app-header pui-bg-blue-300">
  29. <div class="pui-app-header-aside">
  30. <a href="mobileTaskController.do?goMyApply"><i class="fa fa-chevron-left fa-2x pui-text-white"></i></a>
  31. </div>
  32. <div class="pui-app-header-middle">
  33. <strong class="pui-h4 pui-text-white">历史</strong>
  34. </div>
  35. <div class="pui-app-header-offside">
  36. <a href="javascript:;" pui-side-slide="right" ><i class="fa fa-list fa-2x pui-text-white"></i></a>
  37. </div>
  38. </header>
  39. <div class="pui-app-main-container" id="wrapper1" style="width:99.99%;height:100%">
  40. <div id="operateTab" class="pui-tab pui-tab-underline pui-tab-justify" style="width:99.99%;height:100%">
  41. <ul class="pui-tab-head">
  42. <li tab-ajax-url="mobileTaskController.do?goProcessHisForm&load=detail&processInstanceId=${processInstanceId }" class="active">表单</li>
  43. <li tab-ajax-url="mobileTaskController.do?goProcessHisOperate&processInstanceId=${processInstanceId }">办理记录</li>
  44. <li tab-ajax-url="mobileTaskController.do?viewProcessInstanceHistory&processInstanceId=${processInstanceId }">流程图</li>
  45. </ul>
  46. <div class="pui-tab-container" style="width:99.99%;height:100%">
  47. <div class="pui-tab-box" style="display: block;width:99.99%;height:100%;padding:1px 0">
  48. </div>
  49. <div class="pui-tab-box" style="width:99.99%;height:100%;padding:1px 0"></div>
  50. <div class="pui-tab-box" style="width:99.99%;height:100%;padding:1px 0"></div>
  51. </div>
  52. </div>
  53. </div>
  54. <div class="pui-mask pui-mask-bg" style="display: none;opacity:0;"></div>
  55. </div>
  56. <div class="pui-side-slide-right">
  57. <div>
  58. <ul class="pui-menu pui-menu-accordion pui-menu-bordered pui-bg-blue click-toggle">
  59. <li>
  60. <a href="mobileTaskController.do?goRunningTask">
  61. <i class="fa fa-home pui-text-xl"></i>
  62. <span>首页</span>
  63. </a>
  64. </li>
  65. <li>
  66. <a href="mLoginController.do?logout"><i class="fa fa-sign-out pui-text-lg"></i>退出登录</a>
  67. </li>
  68. </ul>
  69. </div>
  70. </div>
  71. </div>
  72. <!--[if (gte IE 9) | !(IE)]><!-->
  73. <script type="text/javascript" src="plug-in/jquery/jquery-2.1.1.min.js"></script>
  74. <!--<![endif]-->
  75. <!--[if lt IE 9]>
  76. <script type="text/javascript" src="plug-in/jquery/jquery-1.11.3.min.js"></script>
  77. <script type="text/javascript" src="plug-in/planeui/dist/js/planeui.patch.ie8.js"></script>
  78. <![endif]-->
  79. <!--[if lt IE 10]>
  80. <script type="text/javascript" src="plug-in/planeui/dist/js/planeui.patch.ie9.js"></script>
  81. <![endif]-->
  82. <script type="text/javascript" src="plug-in/planeui/dist/js/planeui.js"></script>
  83. <script type="text/javascript" src="plug-in/planeui/app/js/iscroll.js"></script>
  84. <script type="text/javascript">
  85. $(function() {
  86. $().sideSlide();
  87. $().sidePosition();
  88. $("#operateTab").tab({
  89. speed : "slow",
  90. showMode : "slide",
  91. ajaxLoading : '<div class="pui-loading-spinner pui-animation-rotate pui-animation-repeat pui-animation-reverse pui-text-center"><span class="fa fa-spinner fa-2x"></span></div> 正在加载内容,请稍后...',
  92. callback : function(tab, tabHead, tabBox, index, settings) {
  93. if(tabHead.eq(index).attr("tab-ajax-cached")) {
  94. return ;
  95. }else{
  96. //tabBox.eq(index).html(settings.ajaxLoading);
  97. //var url = tabHead.eq(index).attr("tab-ajax-url");
  98. //tabBox.eq(index).html("<iframe src=\""+url+"\" width=\"99.99%\" height=\"100%\" frameborder=\"0\">"+settings.ajaxLoading+"</iframe>");
  99. //tabHead.eq(index).attr("tab-ajax-cached", true);
  100. tabBox.eq(index).html(settings.ajaxLoading);
  101. var url = tabHead.eq(index).attr("tab-ajax-url");
  102. $.post(url, {}, function(data) {
  103. tabBox.eq(index).html(data);
  104. tabHead.eq(index).attr("tab-ajax-cached", true);
  105. if(index==2){
  106. getMoreData();
  107. }
  108. });
  109. }
  110. }
  111. });
  112. init();
  113. });
  114. function init(){
  115. var tabHead =$("#operateTab").find(".pui-tab-head li:first");
  116. var tabBox = $("#operateTab").find(".pui-tab-box:first");
  117. var url = tabHead.attr("tab-ajax-url");
  118. tabBox.html('<div class="pui-loading-spinner pui-animation-rotate pui-animation-repeat pui-animation-reverse pui-text-center"><span class="fa fa-spinner fa-2x"></span></div> 正在加载内容,请稍后...');
  119. $.post(url, {}, function(data) {
  120. tabBox.html(data);
  121. tabHead.attr("tab-ajax-cached", true);
  122. });
  123. }
  124. function getMoreData(){
  125. $.getJSON("activitiController.do?taskHistoryList&processInstanceId=${processInstanceId}", {page: 1,rows:100}, function(data) {
  126. if (data.rows&&data.rows.length>0) {
  127. var str = "";
  128. $.each(data.rows, function(index, array) {
  129. var str ="<div class=\"pui-timeline-item\" style=\"padding-left: 32px\">"
  130. var str = str + "<label class=\"pui-badge pui-badge-info pui-badge-dot\"></label>";
  131. var str = str + "<div class=\"pui-timeline-item-context\">";
  132. var str = str + "<div class=\"pui-timeline-divider\"><summary><h6>流程节点:"+array['name']+"</h6></summary></div>";
  133. var str = str + "<div class=\"pui-tooltip pui-tooltip-bordered pui-tooltip-arrow-lt \">";
  134. var str = str + "<summary><h6>负责人:"+array['assignee']+"</h6></summary>";
  135. var str = str + "开始时间:"+array['startTime']+"<br/>";
  136. var str = str + "结束时间:"+array['endTime']+"<br/>";
  137. var str = str + array['deleteReason'];
  138. var str = str + "</div>";
  139. var str = str + "</div>";
  140. var str = str + "</div>";
  141. $("#container").before(str);
  142. });
  143. }
  144. });
  145. }
  146. </script>
  147. </body>
  148. </html>