button.jsp 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. <%@ page contentType="text/html; charset=utf-8"%>
  2. <%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
  3. <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
  4. <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
  5. <%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
  6. <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
  7. <%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
  8. <c:set var="basePath" value="${pageContext.request.contextPath}"/>
  9. <!DOCTYPE HTML>
  10. <html lang="zh-cn">
  11. <head>
  12. <meta charset="utf-8">
  13. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  14. <meta name="viewport" content="width=device-width, initial-scale=1">
  15. <title>权限管理</title>
  16. <link href="${basePath}/resources/zheng-ui/plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
  17. <link href="${basePath}/resources/zheng-ui/plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
  18. <link href="${basePath}/resources/zheng-ui/plugins/bootstrap-table-1.11.0/bootstrap-table.min.css" rel="stylesheet"/>
  19. <link href="${basePath}/resources/zheng-ui/plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
  20. <link href="${basePath}/resources/zheng-ui/plugins/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"/>
  21. <link href="${basePath}/resources/zheng-ui/css/common.css" rel="stylesheet"/>
  22. </head>
  23. <body>
  24. <div id="main">
  25. <div id="toolbar">
  26. <shiro:hasPermission name="upms:permission:create"><a class="waves-effect waves-button" href="javascript:;" onclick="createAction()"><i class="zmdi zmdi-plus"></i> 新增权限</a></shiro:hasPermission>
  27. <shiro:hasPermission name="upms:permission:update"><a class="waves-effect waves-button" href="javascript:;" onclick="updateAction()"><i class="zmdi zmdi-edit"></i> 编辑权限</a></shiro:hasPermission>
  28. <shiro:hasPermission name="upms:permission:delete"><a class="waves-effect waves-button" href="javascript:;" onclick="deleteAction()"><i class="zmdi zmdi-close"></i> 删除权限</a></shiro:hasPermission>
  29. </div>
  30. <table id="table"></table>
  31. </div>
  32. <script src="${basePath}/resources/zheng-ui/plugins/jquery.1.12.4.min.js"></script>
  33. <script src="${basePath}/resources/zheng-ui/plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
  34. <script src="${basePath}/resources/zheng-ui/plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
  35. <script src="${basePath}/resources/zheng-ui/plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
  36. <script src="${basePath}/resources/zheng-ui/plugins/waves-0.7.5/waves.min.js"></script>
  37. <script src="${basePath}/resources/zheng-ui/plugins/jquery-confirm/jquery-confirm.min.js"></script>
  38. <script src="${basePath}/resources/zheng-ui/js/common.js"></script>
  39. <script>
  40. var $table = $('#table');
  41. $(function() {
  42. $(document).on('focus', 'input[type="text"]', function() {
  43. $(this).parent().find('label').addClass('active');
  44. }).on('blur', 'input[type="text"]', function() {
  45. if ($(this).val() == '') {
  46. $(this).parent().find('label').removeClass('active');
  47. }
  48. });
  49. // bootstrap table初始化
  50. $table.bootstrapTable({
  51. url: '${basePath}/manage/permission/list?type=2',
  52. height: getHeight(),
  53. striped: true,
  54. search: true,
  55. showRefresh: true,
  56. showColumns: true,
  57. minimumCountColumns: 2,
  58. clickToSelect: true,
  59. detailView: true,
  60. detailFormatter: 'detailFormatter',
  61. pagination: true,
  62. paginationLoop: false,
  63. sidePagination: 'server',
  64. silentSort: false,
  65. smartDisplay: false,
  66. escape: true,
  67. searchOnEnterKey: true,
  68. idField: 'permissionId',
  69. maintainSelected: true,
  70. toolbar: '#toolbar',
  71. columns: [
  72. {field: 'ck', checkbox: true},
  73. {field: 'permissionId', title: '编号', sortable: true, align: 'center'},
  74. {field: 'systemId', title: '所属系统'},
  75. {field: 'pid', title: '所属上级'},
  76. {field: 'name', title: '权限名称'},
  77. {field: 'type', title: '类型', formatter: 'typeFormatter'},
  78. {field: 'permissionValue', title: '权限值'},
  79. {field: 'uri', title: '路径'},
  80. {field: 'icon', title: '图标', align: 'center', formatter: 'iconFormatter'},
  81. {field: 'status', title: '状态', sortable: true, align: 'center', formatter: 'statusFormatter'},
  82. {field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
  83. ]
  84. });
  85. });
  86. // 格式化操作按钮
  87. function actionFormatter(value, row, index) {
  88. return [
  89. '<a class="update" href="javascript:;" onclick="updateAction()" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a> ',
  90. '<a class="delete" href="javascript:;" onclick="deleteAction()" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
  91. ].join('');
  92. }
  93. // 格式化图标
  94. function iconFormatter(value, row, index) {
  95. return '<i class="' + value + '"></i>';
  96. }
  97. // 格式化类型
  98. function typeFormatter(value, row, index) {
  99. if (value == 1) {
  100. return '菜单';
  101. }
  102. if (value == 2) {
  103. return '按钮';
  104. }
  105. return '-';
  106. }
  107. // 格式化状态
  108. function statusFormatter(value, row, index) {
  109. if (value == 1) {
  110. return '<span class="label label-success">正常</span>';
  111. } else {
  112. return '<span class="label label-danger">锁定</span>';
  113. }
  114. }
  115. // 新增
  116. var createDialog;
  117. function createAction() {
  118. createDialog = $.dialog({
  119. animationSpeed: 300,
  120. title: '新增权限',
  121. content: 'url:${basePath}/manage/permission/create'
  122. });
  123. }
  124. // 编辑
  125. var updateDialog;
  126. function updateAction() {
  127. var rows = $table.bootstrapTable('getSelections');
  128. if (rows.length != 1) {
  129. $.confirm({
  130. title: false,
  131. content: '请选择一条记录!',
  132. autoClose: 'cancel|3000',
  133. backgroundDismiss: true,
  134. buttons: {
  135. cancel: {
  136. text: '取消',
  137. btnClass: 'waves-effect waves-button'
  138. }
  139. }
  140. });
  141. } else {
  142. updateDialog = $.dialog({
  143. animationSpeed: 300,
  144. title: '编辑权限',
  145. content: 'url:${basePath}/manage/permission/update/' + rows[0].permissionId
  146. });
  147. }
  148. }
  149. // 删除
  150. var deleteDialog;
  151. function deleteAction() {
  152. var rows = $table.bootstrapTable('getSelections');
  153. if (rows.length == 0) {
  154. $.confirm({
  155. title: false,
  156. content: '请至少选择一条记录!',
  157. autoClose: 'cancel|3000',
  158. backgroundDismiss: true,
  159. buttons: {
  160. cancel: {
  161. text: '取消',
  162. btnClass: 'waves-effect waves-button'
  163. }
  164. }
  165. });
  166. } else {
  167. deleteDialog = $.confirm({
  168. type: 'red',
  169. animationSpeed: 300,
  170. title: false,
  171. content: '确认删除该权限吗?',
  172. buttons: {
  173. confirm: {
  174. text: '确认',
  175. btnClass: 'waves-effect waves-button',
  176. action: function () {
  177. var ids = new Array();
  178. for (var i in rows) {
  179. ids.push(rows[i].permissionId);
  180. }
  181. $.ajax({
  182. type: 'get',
  183. url: '${basePath}/manage/permission/delete/' + ids.join("-"),
  184. success: function(result) {
  185. if (result.code != 1) {
  186. if (result.data instanceof Array) {
  187. $.each(result.data, function(index, value) {
  188. $.confirm({
  189. theme: 'dark',
  190. animation: 'rotateX',
  191. closeAnimation: 'rotateX',
  192. title: false,
  193. content: value.errorMsg,
  194. buttons: {
  195. confirm: {
  196. text: '确认',
  197. btnClass: 'waves-effect waves-button waves-light'
  198. }
  199. }
  200. });
  201. });
  202. } else {
  203. $.confirm({
  204. theme: 'dark',
  205. animation: 'rotateX',
  206. closeAnimation: 'rotateX',
  207. title: false,
  208. content: result.data.errorMsg,
  209. buttons: {
  210. confirm: {
  211. text: '确认',
  212. btnClass: 'waves-effect waves-button waves-light'
  213. }
  214. }
  215. });
  216. }
  217. } else {
  218. deleteDialog.close();
  219. $table.bootstrapTable('refresh');
  220. }
  221. },
  222. error: function(XMLHttpRequest, textStatus, errorThrown) {
  223. $.confirm({
  224. theme: 'dark',
  225. animation: 'rotateX',
  226. closeAnimation: 'rotateX',
  227. title: false,
  228. content: textStatus,
  229. buttons: {
  230. confirm: {
  231. text: '确认',
  232. btnClass: 'waves-effect waves-button waves-light'
  233. }
  234. }
  235. });
  236. }
  237. });
  238. }
  239. },
  240. cancel: {
  241. text: '取消',
  242. btnClass: 'waves-effect waves-button'
  243. }
  244. }
  245. });
  246. }
  247. }
  248. </script>
  249. </body>
  250. </html>