role.tpl 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>欢迎页面-X-admin2.0</title>
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  8. <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  9. <link rel="stylesheet" href="./static/css/font.css">
  10. <link rel="stylesheet" href="./static/css/xadmin.css">
  11. <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  12. <script src="./static/lib/layui/layui.js" charset="utf-8"></script>
  13. <script type="text/javascript" src="./static/js/xadmin.js"></script>
  14. </head>
  15. <body>
  16. <input type="text" id="token" value={{.token}} hidden=true>
  17. <dialog open id="modalAdd" class="x-body layui-anim layui-anim-up" hidden=true style = "center;">
  18. <form action="role" method="post" class="layui-form layui-form-pane">
  19. <input id="rolename" name="rolename" placeholder="角色名" type="text" lay-verify="required" class="layui-input" >
  20. <hr class="hr15">
  21. 权限列表:
  22. {{range .permissions}}
  23. <br>
  24. <input id={{.Id}} name="cbPower" type="checkbox" value={{.Id}}>
  25. <label for={{.Id}}>{{.Name}}</label>
  26. {{end}}
  27. <br>
  28. <br>
  29. <input value="新增" class="layui-btn" style="width:100%;" type="button" onclick="addRole()">
  30. <br>
  31. <br>
  32. <input value="关闭" class="layui-btn" style="width:100%;" type="button" onclick="closeModalAdd()">
  33. <hr class="hr20" >
  34. </form>
  35. </dialog>
  36. <dialog open id="modalModify" class="x-body layui-anim layui-anim-up" hidden=true style = "center;">
  37. <form action="role" method="put" class="layui-form layui-form-pane">
  38. <input id="modify_id" hidden=true type="text">
  39. <input id="rolenamemodify" name="rolenamemodify" placeholder="角色名" type="text" lay-verify="required" class="layui-input" >
  40. <hr class="hr15">
  41. 权限列表:
  42. <tb>
  43. <tb>
  44. {{range .permissions}}
  45. <br>
  46. <input id={{.Id}} name="cbPowerModify" type="checkbox" value={{.Id}}>
  47. <label for={{.Id}}>{{.Name}}</label>
  48. {{end}}
  49. <br>
  50. <br>
  51. <input value="修改" class="layui-btn" style="width:100%;" type="button" onclick="modifyRole()">
  52. <br>
  53. <br>
  54. <input value="关闭" class="layui-btn" style="width:100%;" type="button" onclick="closeModifyRole()">
  55. <hr class="hr20" >
  56. </form>
  57. </dialog>
  58. <input class="layui-btn" type="button" onclick="OpenAddRole()" value=新增角色>
  59. <br>
  60. <br>
  61. <table border="1">
  62. <thead>
  63. <th style="width:256px;">操作</th>
  64. <th style="width:64px;">ID</th>
  65. <th style="width:128px;">角色名</th>
  66. <th style="width:512px;">权限列表</th>
  67. </thead>
  68. <tbody>
  69. {{range .roles}}
  70. <tr>
  71. <td style = "text-align:center;">
  72. <input class="layui-btn" type="button" onclick="OpenModifyRole({{.Id}}, {{.Name}})" value=修改>
  73. {{" | "}}
  74. <input class="layui-btn" type="button" onclick="clickDelete({{.Id}})" value=删除>
  75. </tb>
  76. <td style = "text-align:center;">{{.Id}}</td>
  77. <td style = "text-align:center;">{{.Name}}</td>
  78. <td style = "text-align:center;">{{PermissionToStr .Permission}}</td>
  79. </tr>
  80. {{end}}
  81. </tbody>
  82. </table>
  83. <script language="JavaScript">
  84. function OpenAddRole() {
  85. document.getElementById("modalAdd").hidden = false;
  86. }
  87. function closeModalAdd() {
  88. document.getElementById("modalAdd").hidden = true;
  89. }
  90. function addRole() {
  91. document.getElementById("modalAdd").hidden = true;
  92. var name = document.getElementById("rolename").value;
  93. var token = document.getElementById("token").value;
  94. var arr = new Array();
  95. $("input[name='cbPower']:checked").each(function(i) {
  96. var val = $(this).val();
  97. arr.push(val);
  98. })
  99. var value=0;
  100. for (var i=0;i<arr.length;i++ ){
  101. value=value | 1 << parseInt(arr[i]);
  102. }
  103. var text;
  104. text = "permission=" + encodeURI(value) + "&name=" + name + "&token=" + encodeURI(token);
  105. $.ajax({
  106. type:"post",
  107. url:"role?" + text,
  108. success:function (data) {
  109. if (data.status){
  110. window.location.href="/role";
  111. if (data.info){
  112. layer.msg(data.info,{icon:1,time:1000});
  113. }
  114. }else{
  115. if (data.info){
  116. alert(data.info);
  117. }else{
  118. window.location.href="/accountlogin";
  119. }
  120. }
  121. }
  122. });
  123. }
  124. function OpenModifyRole(id, name) {
  125. document.getElementById("modify_id").value = id;
  126. document.getElementById("rolenamemodify").value = name;
  127. document.getElementById("modalModify").hidden = false;
  128. }
  129. function closeModifyRole() {
  130. document.getElementById("modalModify").hidden = true;
  131. }
  132. function modifyRole () {
  133. document.getElementById("modalModify").hidden = true;
  134. var id = document.getElementById("modify_id").value;
  135. var name = document.getElementById("rolenamemodify").value;
  136. var token = document.getElementById("token").value;
  137. var arr = new Array();
  138. $("input[name='cbPowerModify']:checked").each(function(i) {
  139. var val = $(this).val();
  140. arr.push(val);
  141. })
  142. var value=0;
  143. for (var i=0;i<arr.length;i++ ){
  144. value=value | 1 << parseInt(arr[i]);
  145. }
  146. var text;
  147. text = "permission=" + encodeURI(value) + "&name=" + name + "&token=" + encodeURI(token);
  148. text += "&id=" + encodeURI(id);
  149. $.ajax({
  150. type:"put",
  151. url:"role?" + text,
  152. success:function (data) {
  153. if (data.status){
  154. window.location.href="/role";
  155. if (data.info){
  156. layer.msg(data.info,{icon:1,time:1000});
  157. }
  158. }else{
  159. if (data.info){
  160. alert(data.info);
  161. }else{
  162. window.location.href="/accountlogin";
  163. }
  164. }
  165. }
  166. });
  167. }
  168. function clickDelete (id) {
  169. var token = document.getElementById("token").value;
  170. var text = "id=" + encodeURI(id) + "&action=delete";
  171. text += "&token=" + encodeURI(token);
  172. $.ajax({
  173. type:"delete",
  174. url:"/role?" + text,
  175. success:function (data) {
  176. // alert(data.status);
  177. if (data.status){
  178. window.location.href="/role";
  179. if (data.info){
  180. layer.msg(data.info,{icon:1,time:1000});
  181. }
  182. }else{
  183. if (data.info){
  184. alert(data.info);
  185. }else{
  186. window.location.href="/accountlogin";
  187. }
  188. }
  189. }
  190. });
  191. }
  192. </script>
  193. </body>
  194. </html>