list.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6. <title>合同</title>
  7. <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
  8. <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
  9. <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
  10. </head>
  11. <body>
  12. <div class="layuimini-container">
  13. <div class="layuimini-main">
  14. <fieldset class="table-search-fieldset">
  15. <legend>搜索信息(<b>收起-展开</b>)</legend>
  16. <div id="search-div" style="margin: 5px 10px -10px 0px">
  17. <form class="layui-form" action="" lay-filter="search-form">
  18. <div class="layui-form-item">
  19. <div class="layui-inline">
  20. <label class="layui-form-label" style="width: 60px">合同名称</label>
  21. <div class="layui-input-inline" style="width: 200px">
  22. <input type="text" id="htmc" name="htmc" autocomplete="off" class="layui-input">
  23. </div>
  24. </div>
  25. <div class="layui-inline">
  26. <label class="layui-form-label" style="width: 70px">任务书名称</label>
  27. <div class="layui-input-inline" style="width: 300px">
  28. <input type="text" id="rwsmc" name="rwsmc" autocomplete="off" class="layui-input">
  29. </div>
  30. </div>
  31. <div class="layui-inline">
  32. <button type="submit" class="layui-btn" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
  33. <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-reset-btn"><i class="layui-icon layui-icon-refresh"></i> 重 置 </button>
  34. </div>
  35. </div>
  36. </form>
  37. </div>
  38. </fieldset>
  39. <script type="text/html" id="toolbarDemo">
  40. <div class="layui-btn-container">
  41. <button class="layui-btn layui-btn-sm" lay-event="add">
  42. <i class="layui-icon layui-icon-addition" style="font-size: 10px;"></i>新建
  43. </button>
  44. <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit">
  45. <i class="layui-icon layui-icon-edit" style="font-size: 10px;"></i>编辑
  46. </button>
  47. <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="view">
  48. <i class="layui-icon layui-icon-file" style="font-size: 10px;"></i>查看
  49. </button>
  50. <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">
  51. <i class="layui-icon layui-icon-delete" style="font-size: 10px;"></i>删除
  52. </button>
  53. </div>
  54. </script>
  55. <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
  56. </div>
  57. </div>
  58. <script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
  59. <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
  60. <script th:src="@{/lib/coco-message/coco-message.js}" charset="utf-8"></script>
  61. <script th:src="@{/js/lay-config.js}" charset="utf-8"></script>
  62. <script type="text/javascript" th:inline="javascript">
  63. AjaxUtil.ctx = /*[[@{/}]]*/'';
  64. var updateflag = 0;
  65. layui.use(['form', 'table', 'treeTable'], function () {
  66. var form = layui.form,
  67. table = layui.table;
  68. var currTable = table.render({
  69. elem: '#currentTableId',
  70. url: AjaxUtil.ctx + 'prjContract/list',
  71. method: 'get',
  72. toolbar: '#toolbarDemo',
  73. // defaultToolbar: ['filter', 'exports', 'print'],
  74. cols: [
  75. [
  76. {type: "checkbox", fixed: 'left'},
  77. {type: 'numbers', align: 'center'},
  78. {field: 'htmc', width: '20%',title: '合同名称', align: 'left'},
  79. {field: 'rwsmc', width: '30%', title: '任务书', align: 'left'},
  80. {field: 'htje', width: '10%', title: '合同金额(万元)', align: 'left'},
  81. {field: 'cjrxm', width: '8%', title: '创建人', align: 'center'},
  82. {field: 'cjsj', width: '10%', title: '创建时间', align: 'center'}
  83. ]
  84. ],
  85. autoSort: false,
  86. limits: [10, 15, 20, 25, 50, 100],
  87. limit: 10,
  88. page: true,
  89. skin: 'grid',
  90. parseData: function(res){ //res 即为原始返回的数据
  91. return {
  92. "code": res.code, //解析接口状态
  93. "msg": res.message, //解析提示文本
  94. "count": res.data.total, //解析数据长度
  95. "data": res.data.rows //解析数据列表
  96. };
  97. },
  98. done: function(res, curr, count) { // done为数据渲染完的回调
  99. // 测试打印出后端返回的权限列表
  100. // let permissionSet = [[${permissionSet}]];
  101. // console.log(JSON.stringify(permissionSet));
  102. }
  103. });
  104. // 监听搜索操作
  105. form.on('submit(data-search-btn)', function (data) {
  106. // 执行搜索重载
  107. currTable.reload({
  108. page: {
  109. curr: 1 // 页码从1开始
  110. },
  111. where: form.val("search-form")
  112. });
  113. return false;
  114. });
  115. // 监听重置操作
  116. form.on('submit(data-reset-btn)', function (data) {
  117. form.val("search-form", {
  118. "htmc": '',
  119. "rwsmc": ''
  120. });
  121. // 执行搜索重载
  122. currTable.reload({
  123. page: {
  124. curr: 1
  125. },
  126. where: form.val("search-form")
  127. });
  128. return false;
  129. });
  130. // 监听行工具事件
  131. table.on('toolbar(currentTableFilter)', function (obj) {
  132. if (obj.event === 'add') { // 监听添加操作
  133. var index = layer.open({
  134. title: '新建合同',
  135. type: 2,
  136. shade: 0.3,
  137. maxmin: true,
  138. area: ['950px', layerheight + 'px'],
  139. content: AjaxUtil.ctx + 'prjContract/forAdd',
  140. end: function (index) {
  141. // 重载表格
  142. if (updateflag == 1)
  143. currTable.reload();
  144. updateflag = 0;
  145. }
  146. });
  147. } else if(obj.event == 'edit') {
  148. var checkStatus = table.checkStatus('currentTableId')
  149. ,data = checkStatus.data;
  150. if (data == null || data.length === 0) {
  151. Message.warning("请选择要编辑的合同!", 1500);
  152. } else if(data.length > 1) {
  153. Message.warning("请选择一条记录进行编辑操作!", 1500);
  154. } else {
  155. var index = layer.open({
  156. title: '编辑合同',
  157. type: 2,
  158. shade: 0.2,
  159. maxmin: true,
  160. area: ['950px', layerheight + 'px'],
  161. content: AjaxUtil.ctx + 'prjContract/forUpdate/' + data[0].id,
  162. end: function (index) {
  163. // 重载表格
  164. if(updateflag == 1)
  165. currTable.reload();
  166. updateflag = 0;
  167. }
  168. });
  169. }
  170. } else if(obj.event == 'view') {
  171. var checkStatus = table.checkStatus('currentTableId')
  172. ,data = checkStatus.data;
  173. if (data == null || data.length === 0) {
  174. Message.warning("请选择要查看的合同!", 1500);
  175. } else if(data.length > 1) {
  176. Message.warning("请选择一条记录进行查看!", 1500);
  177. } else {
  178. var index = layer.open({
  179. title: '浏览合同',
  180. type: 2,
  181. shade: 0.2,
  182. maxmin: true,
  183. area: ['950px', layerheight + 'px'],
  184. content: AjaxUtil.ctx + 'prjContract/forView/' + data[0].id
  185. });
  186. }
  187. } else if (obj.event === 'delete') { // 监听删除操作
  188. var checkStatus = table.checkStatus('currentTableId')
  189. ,data = checkStatus.data;
  190. if (data == null || data.length === 0) {
  191. Message.warning("请选择要删除的合同!", 1500);
  192. return;
  193. }
  194. layer.confirm('确定批量删除合同吗?', function (index) {
  195. layer.close(index);
  196. AjaxUtil.post({
  197. url: AjaxUtil.ctx + "prjContract/batchDelete",
  198. contentType: "application/json",
  199. data: JSON.stringify(data),
  200. success: function (res) {
  201. if (res.code === 0) {
  202. Message.success(1500, res.message, function () {
  203. // 重载表格
  204. currTable.reload();
  205. });
  206. } else {
  207. Message.error(res.message, 1000);
  208. }
  209. },
  210. error: function (error) {
  211. }
  212. });
  213. });
  214. }
  215. });
  216. //双击
  217. table.on('rowDouble(currentTableFilter)', function (obj) {
  218. data = obj.data;
  219. var index = layer.open({
  220. title: '查看合同',
  221. type: 2,
  222. shade: 0.2,
  223. maxmin: true,
  224. area: ['950px', layerheight + 'px'],
  225. content: AjaxUtil.ctx + 'prjContract/forView/' + data.id,
  226. end: function (index) {
  227. layer.close(index);
  228. }
  229. });
  230. });
  231. });
  232. function setUpdateFlag() {
  233. updateflag = 1;
  234. }
  235. </script>
  236. </body>
  237. </html>