task-finish-list.html 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <!--#include file="common/_header.html"-->
  5. <link rel="stylesheet" type="text/css" href="lib/select2/select2.min.css" />
  6. <style>
  7. .center{
  8. text-align: center !important;
  9. }
  10. </style>
  11. <title>已完成流程任务列表</title>
  12. </head>
  13. <body>
  14. <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 流程管理 <span class="c-gray en">&gt;</span> 已完成流程任务列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
  15. <div class="page-container">
  16. <div class="container mb-10">
  17. <form>
  18. <div class="row mb-10">
  19. <div class="col-md-3">
  20. <input type="text" class="input-text" placeholder="输入项目名称" id="projectName">
  21. </div>
  22. <div class="col-md-3">
  23. <select id="processSelect" style="width:100%;" class="select2" data-placeholder="选择流程">
  24. <option value=""></option>
  25. </select>
  26. </div>
  27. <div class="col-md-3">
  28. <input type="text" class="input-text" placeholder="输入任务名称" id="taskName">
  29. </div>
  30. <div class="col-md-3">
  31. <button id="btnSearch" type="submit" class="btn btn-success" id="" name=""><i class="Hui-iconfont">&#xe665;</i> 查询</button>
  32. <button id="btnReset" type="reset" class="btn btn-default"><i class="Hui-iconfont">&#xe68f;</i> 重置</button>
  33. </div>
  34. </div>
  35. </form>
  36. </div>
  37. <table id="taskList" class="table table-border table-bordered table-bg" style="width:100%;">
  38. <thead>
  39. <tr>
  40. <th scope="col" colspan="8">已完成任务列表</th>
  41. </tr>
  42. <tr class="text-c">
  43. <th width="100">任务编号</th>
  44. <th width="150">项目名称</th>
  45. <th width="100">流程名称</th>
  46. <th width="100">任务名称</th>
  47. <th width="130">开始时间</th>
  48. <th width="130">规定完成时间</th>
  49. <th width="130">完成时间</th>
  50. <th width="100">操作</th>
  51. </tr>
  52. </thead>
  53. <tbody>
  54. </tbody>
  55. </table>
  56. </div>
  57. <!--#include file="common/_footer.html"-->
  58. <!--请在下方写此页面业务相关的脚本-->
  59. <script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
  60. <script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
  61. <script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
  62. <script type="text/javascript" src="lib/select2/select2.full.js"></script>
  63. <script type="text/javascript" src="lib/select2/select2.zh-CN.js"></script>
  64. <script id="rowTmpl" type="text/template">
  65. <a href="javascript:edit('{{taskId}}')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i>修改</a>
  66. </script>
  67. <script type="text/javascript" src="scripts/global.js"></script>
  68. <script type="text/javascript">
  69. function edit(taskId){
  70. layer_show("修改已办事项","task-finish-detail.html?id=" + taskId,600,500);
  71. }
  72. function reloadList(){
  73. $('#taskList').DataTable().ajax.reload(null,false);
  74. }
  75. $(document).ready(function(){
  76. var loadingIndex = -1;
  77. var processOpts = {
  78. ajax: {
  79. url: global_backend_url + "/procDef/list",
  80. dataType: 'json',
  81. delay: 250,
  82. method:'post',
  83. processResults: function (resp) {
  84. var results = resp.data.data.map(function(item){
  85. return {
  86. id : item.key,
  87. text : item.description
  88. }
  89. });
  90. return {
  91. results: results
  92. }
  93. }
  94. },
  95. language: "zh-CN",
  96. allowClear: false
  97. };
  98. $("#processSelect").select2(processOpts);
  99. $("#overtimeSelect").select2();
  100. var orgOpts = {
  101. ajax: {
  102. url: global_backend_url + "/org/allList",
  103. dataType: 'json',
  104. delay: 250,
  105. method:'post',
  106. processResults: function (resp) {
  107. var results = resp.data.map(function(item){
  108. return {
  109. id : item.orgId,
  110. text : item.orgName
  111. }
  112. });
  113. return {
  114. results: results
  115. }
  116. }
  117. },
  118. language: "zh-CN",
  119. allowClear: false
  120. };
  121. $("#orgSelect").select2(orgOpts);
  122. $('#taskList').dataTable({
  123. ajax: {
  124. url: global_backend_url + "/task/finishList",
  125. type: 'post',
  126. dataFilter: function(responseText){
  127. var jsonData = JSON.parse(responseText);
  128. if(loadingIndex!=-1){
  129. layer.close(loadingIndex);
  130. }
  131. // 处理返回json
  132. if(jsonData.result){
  133. return JSON.stringify(jsonData.data);
  134. }
  135. else{
  136. alert(jsonData.message);
  137. return null;
  138. }
  139. },
  140. data: function(searchParams){
  141. // 查询json
  142. searchParams["projectName"] = $("#projectName").val();
  143. searchParams["procDefKey"] = $("#processSelect").val();
  144. searchParams["taskName"] = $("#taskName").val();
  145. searchParams["self"] = 0;
  146. loadingIndex = layer.load(0, {shade: [0.2,'#fff']});
  147. }
  148. },
  149. serverSide: true,
  150. searching : false,
  151. ordering: false,
  152. columns: [
  153. {"data": "taskId"},
  154. {"data": "projectName"},
  155. {"data": "processName"},
  156. {"data": "taskName"},
  157. {"data": "startTime"},
  158. {"data": "dueDate"},
  159. {"data": "endTime"},
  160. {"data":null}
  161. ],
  162. columnDefs: [{
  163. targets:2,
  164. sClass:'center',
  165. bSortable:false,
  166. render: function (data, type, row) {
  167. return row.processName + "v" + row.processVersion
  168. }
  169. },{
  170. targets:7,
  171. sClass:'center',
  172. bSortable:false,
  173. render: function (data, type, row) {
  174. return template("rowTmpl",row);
  175. }
  176. }
  177. ]
  178. });
  179. $("#btnSearch").click(function(){
  180. event.preventDefault();
  181. var table = $('#taskList').DataTable();
  182. table.ajax.reload();
  183. });
  184. $("#btnReset").click(function(){
  185. $(".select2").val(null).trigger('change');
  186. });
  187. });
  188. </script>
  189. </body>
  190. </html>