index.jsp 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338
  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. <jsp:include page="/resources/inc/head.jsp" flush="true"/>
  17. </head>
  18. <body>
  19. <div id="main">
  20. <div id="toolbar">
  21. <shiro:hasPermission name="upms:user:create"><a class="waves-effect waves-button" href="javascript:;" onclick="createAction()"><i class="zmdi zmdi-plus"></i> 新增用户</a></shiro:hasPermission>
  22. <shiro:hasPermission name="upms:user:update"><a class="waves-effect waves-button" href="javascript:;" onclick="updateAction()"><i class="zmdi zmdi-edit"></i> 编辑用户</a></shiro:hasPermission>
  23. <shiro:hasPermission name="upms:user:delete"><a class="waves-effect waves-button" href="javascript:;" onclick="deleteAction()"><i class="zmdi zmdi-close"></i> 删除用户</a></shiro:hasPermission>
  24. <shiro:hasPermission name="upms:user:organization"><a class="waves-effect waves-button" href="javascript:;" onclick="organizationAction()"><i class="zmdi zmdi-accounts-list"></i> 用户组织</a></shiro:hasPermission>
  25. <shiro:hasPermission name="upms:user:role"><a class="waves-effect waves-button" href="javascript:;" onclick="roleAction()"><i class="zmdi zmdi-accounts"></i> 用户角色</a></shiro:hasPermission>
  26. <shiro:hasPermission name="upms:user:permission"><a class="waves-effect waves-button" href="javascript:;" onclick="permissionAction()"><i class="zmdi zmdi-key"></i> 用户权限</a></shiro:hasPermission>
  27. </div>
  28. <table id="table"></table>
  29. </div>
  30. <jsp:include page="/resources/inc/footer.jsp" flush="true"/>
  31. <script>
  32. var $table = $('#table');
  33. $(function() {
  34. // bootstrap table初始化
  35. $table.bootstrapTable({
  36. url: '${basePath}/manage/user/list',
  37. height: getHeight(),
  38. striped: true,
  39. search: true,
  40. showRefresh: true,
  41. showColumns: true,
  42. minimumCountColumns: 2,
  43. clickToSelect: true,
  44. detailView: true,
  45. detailFormatter: 'detailFormatter',
  46. pagination: true,
  47. paginationLoop: false,
  48. sidePagination: 'server',
  49. silentSort: false,
  50. smartDisplay: false,
  51. escape: true,
  52. searchOnEnterKey: true,
  53. idField: 'userId',
  54. maintainSelected: true,
  55. toolbar: '#toolbar',
  56. columns: [
  57. {field: 'ck', checkbox: true},
  58. {field: 'userId', title: '编号', sortable: true, align: 'center'},
  59. {field: 'username', title: '帐号'},
  60. {field: 'realname', title: '姓名'},
  61. {field: 'avatar', title: '头像', align: 'center', formatter: 'avatarFormatter'},
  62. {field: 'phone', title: '电话'},
  63. {field: 'email', title: '邮箱'},
  64. {field: 'sex', title: '性别', formatter: 'sexFormatter'},
  65. {field: 'locked', title: '状态', sortable: true, align: 'center', formatter: 'lockedFormatter'},
  66. {field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
  67. ]
  68. });
  69. });
  70. // 格式化操作按钮
  71. function actionFormatter(value, row, index) {
  72. return [
  73. '<a class="update" href="javascript:;" onclick="updateAction()" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a> ',
  74. '<a class="delete" href="javascript:;" onclick="deleteAction()" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
  75. ].join('');
  76. }
  77. // 格式化图标
  78. function avatarFormatter(value, row, index) {
  79. return '<img src="${basePath}' + value + '" style="width:20px;height:20px;"/>';
  80. }
  81. // 格式化性别
  82. function sexFormatter(value, row, index) {
  83. if (value == 1) {
  84. return '男';
  85. }
  86. if (value == 2) {
  87. return '女';
  88. }
  89. return '-';
  90. }
  91. // 格式化状态
  92. function lockedFormatter(value, row, index) {
  93. if (value == 1) {
  94. return '<span class="label label-default">锁定</span>';
  95. } else {
  96. return '<span class="label label-success">正常</span>';
  97. }
  98. }
  99. // 新增
  100. var createDialog;
  101. function createAction() {
  102. createDialog = $.dialog({
  103. animationSpeed: 300,
  104. title: '新增用户',
  105. content: 'url:${basePath}/manage/user/create',
  106. onContentReady: function () {
  107. initMaterialInput();
  108. }
  109. });
  110. }
  111. // 编辑
  112. var updateDialog;
  113. function updateAction() {
  114. var rows = $table.bootstrapTable('getSelections');
  115. if (rows.length != 1) {
  116. $.confirm({
  117. title: false,
  118. content: '请选择一条记录!',
  119. autoClose: 'cancel|3000',
  120. backgroundDismiss: true,
  121. buttons: {
  122. cancel: {
  123. text: '取消',
  124. btnClass: 'waves-effect waves-button'
  125. }
  126. }
  127. });
  128. } else {
  129. updateDialog = $.dialog({
  130. animationSpeed: 300,
  131. title: '编辑用户',
  132. content: 'url:${basePath}/manage/user/update/' + rows[0].userId,
  133. onContentReady: function () {
  134. initMaterialInput();
  135. }
  136. });
  137. }
  138. }
  139. // 删除
  140. var deleteDialog;
  141. function deleteAction() {
  142. var rows = $table.bootstrapTable('getSelections');
  143. if (rows.length == 0) {
  144. $.confirm({
  145. title: false,
  146. content: '请至少选择一条记录!',
  147. autoClose: 'cancel|3000',
  148. backgroundDismiss: true,
  149. buttons: {
  150. cancel: {
  151. text: '取消',
  152. btnClass: 'waves-effect waves-button'
  153. }
  154. }
  155. });
  156. } else {
  157. deleteDialog = $.confirm({
  158. type: 'red',
  159. animationSpeed: 300,
  160. title: false,
  161. content: '确认删除该用户吗?',
  162. buttons: {
  163. confirm: {
  164. text: '确认',
  165. btnClass: 'waves-effect waves-button',
  166. action: function () {
  167. var ids = new Array();
  168. for (var i in rows) {
  169. ids.push(rows[i].userId);
  170. }
  171. $.ajax({
  172. type: 'get',
  173. url: '${basePath}/manage/user/delete/' + ids.join("-"),
  174. success: function(result) {
  175. if (result.code != 1) {
  176. if (result.data instanceof Array) {
  177. $.each(result.data, function(index, value) {
  178. $.confirm({
  179. theme: 'dark',
  180. animation: 'rotateX',
  181. closeAnimation: 'rotateX',
  182. title: false,
  183. content: value.errorMsg,
  184. buttons: {
  185. confirm: {
  186. text: '确认',
  187. btnClass: 'waves-effect waves-button waves-light'
  188. }
  189. }
  190. });
  191. });
  192. } else {
  193. $.confirm({
  194. theme: 'dark',
  195. animation: 'rotateX',
  196. closeAnimation: 'rotateX',
  197. title: false,
  198. content: result.data.errorMsg,
  199. buttons: {
  200. confirm: {
  201. text: '确认',
  202. btnClass: 'waves-effect waves-button waves-light'
  203. }
  204. }
  205. });
  206. }
  207. } else {
  208. deleteDialog.close();
  209. $table.bootstrapTable('refresh');
  210. }
  211. },
  212. error: function(XMLHttpRequest, textStatus, errorThrown) {
  213. $.confirm({
  214. theme: 'dark',
  215. animation: 'rotateX',
  216. closeAnimation: 'rotateX',
  217. title: false,
  218. content: textStatus,
  219. buttons: {
  220. confirm: {
  221. text: '确认',
  222. btnClass: 'waves-effect waves-button waves-light'
  223. }
  224. }
  225. });
  226. }
  227. });
  228. }
  229. },
  230. cancel: {
  231. text: '取消',
  232. btnClass: 'waves-effect waves-button'
  233. }
  234. }
  235. });
  236. }
  237. }
  238. // 用户组织
  239. var organizationDialog;
  240. var organizationUserId;
  241. function organizationAction() {
  242. var rows = $table.bootstrapTable('getSelections');
  243. if (rows.length != 1) {
  244. $.confirm({
  245. title: false,
  246. content: '请选择一条记录!',
  247. autoClose: 'cancel|3000',
  248. backgroundDismiss: true,
  249. buttons: {
  250. cancel: {
  251. text: '取消',
  252. btnClass: 'waves-effect waves-button'
  253. }
  254. }
  255. });
  256. } else {
  257. organizationUserId = rows[0].userId;
  258. organizationDialog = $.dialog({
  259. animationSpeed: 300,
  260. title: '用户组织',
  261. content: 'url:${basePath}/manage/user/organization/' + organizationUserId,
  262. onContentReady: function () {
  263. initMaterialInput();
  264. $('select').select2({
  265. placeholder: '请选择用户组织',
  266. allowClear: true
  267. });
  268. }
  269. });
  270. }
  271. }
  272. // 用户角色
  273. var roleDialog;
  274. var roleUserId;
  275. function roleAction() {
  276. var rows = $table.bootstrapTable('getSelections');
  277. if (rows.length != 1) {
  278. $.confirm({
  279. title: false,
  280. content: '请选择一条记录!',
  281. autoClose: 'cancel|3000',
  282. backgroundDismiss: true,
  283. buttons: {
  284. cancel: {
  285. text: '取消',
  286. btnClass: 'waves-effect waves-button'
  287. }
  288. }
  289. });
  290. } else {
  291. roleUserId = rows[0].userId;
  292. roleDialog = $.dialog({
  293. animationSpeed: 300,
  294. title: '用户角色',
  295. content: 'url:${basePath}/manage/user/role/' + roleUserId,
  296. onContentReady: function () {
  297. initMaterialInput();
  298. $('select').select2({
  299. placeholder: '请选择用户角色',
  300. allowClear: true
  301. });
  302. }
  303. });
  304. }
  305. }
  306. // 用户权限
  307. var permissionDialog;
  308. var permissionUserId;
  309. function permissionAction() {
  310. var rows = $table.bootstrapTable('getSelections');
  311. if (rows.length != 1) {
  312. $.confirm({
  313. title: false,
  314. content: '请选择一条记录!',
  315. autoClose: 'cancel|3000',
  316. backgroundDismiss: true,
  317. buttons: {
  318. cancel: {
  319. text: '取消',
  320. btnClass: 'waves-effect waves-button'
  321. }
  322. }
  323. });
  324. } else {
  325. permissionUserId = rows[0].userId;
  326. permissionDialog = $.dialog({
  327. animationSpeed: 300,
  328. title: '用户授权',
  329. content: 'url:${basePath}/manage/user/permission/' + permissionUserId,
  330. onContentReady: function () {
  331. initMaterialInput();
  332. }
  333. });
  334. }
  335. }
  336. </script>
  337. </body>
  338. </html>