role.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <!DOCTYPE html>
  2. <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
  3. <head>
  4. <th:block th:include="include :: header('角色列表')" />
  5. </head>
  6. <body class="gray-bg">
  7. <div class="container-div">
  8. <div class="row">
  9. <div class="col-sm-12 search-collapse">
  10. <form id="role-form">
  11. <div class="select-list">
  12. <ul>
  13. <li>
  14. 角色名称:<input type="text" name="roleName"/>
  15. </li>
  16. <li>
  17. 权限字符:<input type="text" name="roleKey"/>
  18. </li>
  19. <li>
  20. 角色状态:<select name="status" th:with="type=${@dict.getType('sys_normal_disable')}">
  21. <option value="">所有</option>
  22. <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
  23. </select>
  24. </li>
  25. <li class="select-time">
  26. <label>创建时间: </label>
  27. <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
  28. <span>-</span>
  29. <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
  30. </li>
  31. <li>
  32. <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
  33. <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
  34. </li>
  35. </ul>
  36. </div>
  37. </form>
  38. </div>
  39. <div class="btn-group-sm" id="toolbar" role="group">
  40. <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="system:role:add">
  41. <i class="fa fa-plus"></i> 新增
  42. </a>
  43. <a class="btn btn-primary btn-edit disabled" onclick="$.operate.edit()" shiro:hasPermission="system:role:edit">
  44. <i class="fa fa-edit"></i> 修改
  45. </a>
  46. <a class="btn btn-danger btn-del disabled" onclick="$.operate.removeAll()" shiro:hasPermission="system:role:remove">
  47. <i class="fa fa-remove"></i> 删除
  48. </a>
  49. <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:role:export">
  50. <i class="fa fa-download"></i> 导出
  51. </a>
  52. </div>
  53. <div class="col-sm-12 select-table table-striped">
  54. <table id="bootstrap-table" data-mobile-responsive="true"></table>
  55. </div>
  56. </div>
  57. </div>
  58. <th:block th:include="include :: footer" />
  59. <script th:inline="javascript">
  60. var editFlag = [[${@permission.hasPermi('system:role:edit')}]];
  61. var removeFlag = [[${@permission.hasPermi('system:role:remove')}]];
  62. var dataScopeFlag = [[${@permission.hasPermi('system:role:data:scope')}]];
  63. var authUsersFlag = [[${@permission.hasPermi('system:role:auth:users')}]];
  64. var prefix = ctx + "system/role";
  65. $(function() {
  66. var options = {
  67. url: prefix + "/list",
  68. createUrl: prefix + "/add",
  69. updateUrl: prefix + "/edit/{id}",
  70. removeUrl: prefix + "/remove",
  71. exportUrl: prefix + "/export",
  72. sortName: "roleSort",
  73. modalName: "角色",
  74. columns: [{
  75. checkbox: true
  76. },
  77. {
  78. field: 'roleId',
  79. title: '角色编号'
  80. },
  81. {
  82. field: 'roleName',
  83. title: '角色名称',
  84. sortable: true
  85. },
  86. {
  87. field: 'roleKey',
  88. title: '权限字符',
  89. sortable: true
  90. },
  91. {
  92. field: 'roleSort',
  93. title: '显示顺序',
  94. sortable: true
  95. },
  96. {
  97. visible: editFlag == 'hidden' ? false : true,
  98. title: '角色状态',
  99. align: 'center',
  100. formatter: function (value, row, index) {
  101. return statusTools(row);
  102. }
  103. },
  104. {
  105. field: 'createTime',
  106. title: '创建时间',
  107. sortable: true
  108. },
  109. {
  110. title: '操作',
  111. align: 'center',
  112. formatter: function(value, row, index) {
  113. var actions = [];
  114. actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.roleId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
  115. actions.push('<a class="btn btn-primary btn-xs ' + dataScopeFlag + '" href="javascript:void(0)" onclick="authDataScope(\'' + row.roleId + '\')"><i class="fa fa-check-square-o"></i>数据权限</a> ');
  116. actions.push('<a class="btn btn-info btn-xs ' + authUsersFlag + '" href="javascript:void(0)" onclick="authUser(\'' + row.roleId + '\')"><i class="fa fa-user"></i>分配用户</a> ');
  117. actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.roleId + '\')"><i class="fa fa-remove"></i>删除</a> ');
  118. return actions.join('');
  119. }
  120. }]
  121. };
  122. $.table.init(options);
  123. });
  124. /* 角色管理-分配数据权限 */
  125. function authDataScope(roleId) {
  126. var url = prefix + '/authDataScope/' + roleId;
  127. $.modal.open("分配数据权限", url);
  128. }
  129. /* 角色管理-分配用户 */
  130. function authUser(roleId) {
  131. var url = prefix + '/authUser/' + roleId;
  132. $.modal.openTab("分配用户", url);
  133. }
  134. /* 角色状态显示 */
  135. function statusTools(row) {
  136. if (row.status == 1) {
  137. return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.roleId + '\')"></i> ';
  138. } else {
  139. return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.roleId + '\')"></i> ';
  140. }
  141. }
  142. /* 角色管理-停用 */
  143. function disable(roleId) {
  144. $.modal.confirm("确认要停用角色吗?", function() {
  145. $.operate.post(prefix + "/changeStatus", { "roleId": roleId, "status": 1 });
  146. })
  147. }
  148. /* 角色管理启用 */
  149. function enable(roleId) {
  150. $.modal.confirm("确认要启用角色吗?", function() {
  151. $.operate.post(prefix + "/changeStatus", { "roleId": roleId, "status": 0 });
  152. })
  153. }
  154. </script>
  155. </body>
  156. </html>