procdef-list.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <!--#include file="common/_header.html"-->
  5. <style>
  6. .center{
  7. text-align: center !important;
  8. }
  9. </style>
  10. <title>流程定义列表</title>
  11. </head>
  12. <body>
  13. <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>
  14. <div class="page-container">
  15. <div class="container mb-10">
  16. <form>
  17. <div class="row mb-10">
  18. <input type="text" class="input-text" style="width:250px" placeholder="输入流程定义名称" id="procDefName">
  19. <button id="btnSearch" type="submit" class="btn btn-success" id="" name=""><i class="Hui-iconfont">&#xe665;</i> 查询</button>
  20. <button id="btnReset" type="reset" class="btn btn-default"><i class="Hui-iconfont">&#xe68f;</i> 重置</button>
  21. </div>
  22. </form>
  23. </div>
  24. <table id="procDefList" class="table table-border table-bordered table-bg" style="width:100%;">
  25. <thead>
  26. <tr>
  27. <th scope="col" colspan="9">流程定义列表</th>
  28. </tr>
  29. <tr class="text-c">
  30. <th width="25"><input type="checkbox" name="" value=""></th>
  31. <th width="40">名称</th>
  32. <th width="150">描述</th>
  33. <th width="90">关键字</th>
  34. <th width="150">版本</th>
  35. <th width="130">发布时间</th>
  36. <th width="100">操作</th>
  37. </tr>
  38. </thead>
  39. <tbody>
  40. </tbody>
  41. </table>
  42. </div>
  43. <!--#include file="common/_footer.html"-->
  44. <!--请在下方写此页面业务相关的脚本-->
  45. <script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
  46. <script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
  47. <script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
  48. <script id="rowTmpl" type="text/template">
  49. <a href="javascript:item_edit('{{id}}')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i>模板</a>
  50. <!--
  51. <a href="javascript:item_del('{{deploymentId}}','{{name}}')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i>删除</a>
  52. -->
  53. </script>
  54. <script type="text/javascript" src="scripts/global.js"></script>
  55. <script type="text/javascript">
  56. function item_edit(id){
  57. //window.location = "procdef-tmpl-list.html?id=" + id;
  58. var link = $("a");
  59. link.attr("data-href","procdef-tmpl-list.html?id=" + id);
  60. link.attr("data-title","模板列表");
  61. Hui_admin_tab(link);
  62. }
  63. function item_del(procDefId,name){
  64. layer.confirm("是否删除"+name+"?",function(){
  65. $.get(global_backend_url + "/procDef/delete/" + procDefId,null,function(json){
  66. if(json.result){
  67. layer.msg("删除成功!",{icon:1,time:2000});
  68. $("#btnSearch").click();
  69. }
  70. else{
  71. layer.msg("删除失败!" + json.message);
  72. }
  73. });
  74. });
  75. }
  76. $(document).ready(function(){
  77. $('#procDefList').dataTable({
  78. ajax: {
  79. url: global_backend_url + "/procDef/list",
  80. type: 'post',
  81. // 'beforeSend': function (request) {
  82. // request.setRequestHeader("Authorization", sessionStorage.getItem("token"));
  83. // },
  84. dataFilter: function(responseText){
  85. var jsonData = JSON.parse(responseText);
  86. // 处理返回json
  87. if(jsonData.result){
  88. return JSON.stringify(jsonData.data);
  89. }
  90. else{
  91. processError(jsonData);
  92. return null;
  93. }
  94. },
  95. data: function(searchParams){
  96. // 查询json
  97. searchParams["name"] = $("#procDefName").val();
  98. }
  99. },
  100. serverSide: true,
  101. searching : false,
  102. ordering: false,
  103. columns: [
  104. {"data": "id"},
  105. {"data": "name"},
  106. {"data": "description"},
  107. {"data": "key"},
  108. {"data": "version"},
  109. {"data": "deploymentTime"},
  110. {"data":null}
  111. ],
  112. columnDefs: [
  113. {
  114. targets:0,
  115. sClass:'center',
  116. bSortable:false,
  117. render: function (data, type, row) {
  118. return '<input type="checkbox" name="checkItems" value="'+ data + '">';
  119. }
  120. },{
  121. targets:6,
  122. sClass:'center',
  123. bSortable:false,
  124. render: function (data, type, row) {
  125. return template("rowTmpl",row);
  126. }
  127. }
  128. ]
  129. });
  130. $("#checkAll").change(function(){
  131. var checked = $(this).is(':checked');
  132. $("input[name='checkItems']").each(function(){
  133. $(this).attr("checked",checked);
  134. });
  135. });
  136. $("#btnSearch").click(function(){
  137. event.preventDefault();
  138. var table = $('#procDefList').DataTable();
  139. table.ajax.reload();
  140. });
  141. });
  142. </script>
  143. </body>
  144. </html>