role.tpl 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  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. }else{
  112. if (data.info){
  113. alert(data.info);
  114. }else{
  115. window.location.href="/accountlogin";
  116. }
  117. }
  118. }
  119. });
  120. }
  121. function OpenModifyRole(id, name) {
  122. document.getElementById("modify_id").value = id;
  123. document.getElementById("rolenamemodify").value = name;
  124. document.getElementById("modalModify").hidden = false;
  125. }
  126. function closeModifyRole() {
  127. document.getElementById("modalModify").hidden = true;
  128. }
  129. function modifyRole () {
  130. document.getElementById("modalModify").hidden = true;
  131. var id = document.getElementById("modify_id").value;
  132. var name = document.getElementById("rolenamemodify").value;
  133. var token = document.getElementById("token").value;
  134. var arr = new Array();
  135. $("input[name='cbPowerModify']:checked").each(function(i) {
  136. var val = $(this).val();
  137. arr.push(val);
  138. })
  139. var value=0;
  140. for (var i=0;i<arr.length;i++ ){
  141. value=value | 1 << parseInt(arr[i]);
  142. }
  143. var text;
  144. text = "permission=" + encodeURI(value) + "&name=" + name + "&token=" + encodeURI(token);
  145. text += "&id=" + encodeURI(id);
  146. $.ajax({
  147. type:"put",
  148. url:"role?" + text,
  149. success:function (data) {
  150. if (data.status){
  151. window.location.href="/role";
  152. }else{
  153. if (data.info){
  154. alert(data.info);
  155. }else{
  156. window.location.href="/accountlogin";
  157. }
  158. }
  159. }
  160. });
  161. }
  162. function clickDelete (id) {
  163. var token = document.getElementById("token").value;
  164. var text = "id=" + encodeURI(id) + "&action=delete";
  165. text += "&token=" + encodeURI(token);
  166. $.ajax({
  167. type:"delete",
  168. url:"/role?" + text,
  169. success:function (data) {
  170. // alert(data.status);
  171. if (data.status){
  172. window.location.href="/role";
  173. }else{
  174. if (data.info){
  175. alert(data.info);
  176. }else{
  177. window.location.href="/accountlogin";
  178. }
  179. }
  180. }
  181. });
  182. }
  183. </script>
  184. </body>
  185. </html>