userTab.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360
  1. <!doctype html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>afaa</title>
  8. <link rel="stylesheet" type="text/css" href="css/normalize.css"/>
  9. <link rel="stylesheet" type="text/css" href="css/default.css">
  10. <link rel="stylesheet" href="css/style.css">
  11. <link href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
  12. <link href="css/bootstrap.min.css" rel="stylesheet">
  13. <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
  14. <script src="js/jquery.min.js"></script>
  15. <script src="js/bootstrap.min.js"></script>
  16. <script src="js/jquery_cookie_min.js"></script>
  17. <script src="js/scripts.js"></script>
  18. <script src="js/jqhttpsdk.js"></script>
  19. <script src="js/jkcor.js"></script>
  20. <script src="js/pages.js"></script>
  21. </head>
  22. <body>
  23. <div class="clear-backend">
  24. <div class="avatar">
  25. <div>
  26. <a href="#" target="_blank">
  27. <img src="img/admin.png" alt="">
  28. </a>
  29. </div>
  30. </div>
  31. <input type="radio" class="tab-1" name="tab" onclick="location.href='index.html'">
  32. <span>Home</span><i class="fa fa-home"></i>
  33. <input type="radio" class="tab-5" name="tab" onclick="location.href='avss_index.html'">
  34. <span>AVSS</span><i class="fa fa-language"></i>
  35. <input type="radio" class="tab-2" name="tab" onclick="location.href='langTab.html'">
  36. <span>Lang</span><i class="fa fa-medium"></i>
  37. <input type="radio" class="tab-3" name="tab" checked="checked">
  38. <span>Users</span><i class="fa fa-user"></i>
  39. <input type="radio" class="tab-4" name="tab" onclick="location.href='imgTab.html'">
  40. <span>Azimg</span><i class="fa fa-image"></i>
  41. <!-- tab-top-bar -->
  42. <div class="top-bar">
  43. <ul>
  44. <li>
  45. <a href="login.html" title="Log Out">
  46. <i class="fa fa-sign-out"></i>
  47. </a>
  48. </li>
  49. <!--
  50. <li>
  51. <a href="" title="Messages">
  52. <i class="fa fa-envelope"></i>
  53. </a>
  54. </li>
  55. <li>
  56. <a href="" title="Edit">
  57. <i class="fa fa-edit"></i>
  58. </a>
  59. </li>
  60. -->
  61. </ul>
  62. </div>
  63. <!-- tab-content -->
  64. <div class="tab-content" style="overflow: auto">
  65. <section class="tab-item-3" style="height: 100%;width: 100%">
  66. <div class="container-fluid">
  67. <div class="row">
  68. <div class="col-md-12">
  69. <form role="form">
  70. <div class="form-group">
  71. <label for="InputUsername">
  72. 用户
  73. </label>
  74. <input type="text" class="form-control" id="InputUsername"/>
  75. <label for="InputPassword">
  76. 密码
  77. </label>
  78. <input type="text" class="form-control" id="InputPassword"/>
  79. <label for="InputRole">
  80. 角色
  81. </label>
  82. <input type="text" class="form-control" id="InputRole"/>
  83. </div>
  84. <button type="submit" class="btn btn-primary" onclick="subRegAction();return false;">
  85. 保存
  86. </button>
  87. </form>
  88. </div>
  89. </div>
  90. </div>
  91. <hr>
  92. <div class="container-fluid">
  93. <div class="row">
  94. <div class="col-md-12">
  95. <table class="table table-bordered table-hover">
  96. <thead id="tabHead">
  97. <tr>
  98. <th>编号</th>
  99. <th>用户</th>
  100. <th>语言</th>
  101. <th>角色</th>
  102. <th>操作</th>
  103. </tr>
  104. </thead>
  105. <tbody id="tabBody"></tbody>
  106. </table>
  107. </div>
  108. </div>
  109. </div>
  110. <!--模态框start-->
  111. <div class="container-fluid">
  112. <div class="row">
  113. <div class="col-md-12">
  114. <div class="modal fade" id="modal-container-edit" role="dialog"
  115. aria-labelledby="myModalLabel"
  116. aria-hidden="true">
  117. <div class="modal-dialog" role="document">
  118. <div class="modal-content">
  119. <div class="modal-header">
  120. <h5 class="modal-title" id="myModalLabel">
  121. EDIT
  122. </h5>
  123. <button type="button" class="close" data-dismiss="modal">
  124. <span aria-hidden="true">×</span>
  125. </button>
  126. </div>
  127. <div class="modal-body">
  128. <div class="form-group" id="edit_model_form">
  129. </div>
  130. </div>
  131. <div class="modal-footer">
  132. <button type="button" class="btn btn-primary editRowSaveBtn"
  133. onclick="editRow(this);return false;">
  134. Save changes
  135. </button>
  136. <button type="button" class="btn btn-secondary" data-dismiss="modal">
  137. Close
  138. </button>
  139. </div>
  140. </div>
  141. </div>
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. <!--模态框end-->
  147. </section>
  148. </div>
  149. </div>
  150. <script type="text/javascript">
  151. let index_data
  152. let lang_data
  153. $(function () {
  154. let post_data = {
  155. 'token': $.cookie('access_token'),
  156. };
  157. $.postJSON(
  158. http_ip_prot + 'user/query', JSON.stringify(post_data),
  159. function (data) {
  160. if (data['code'] == 0) {
  161. console.log(data)
  162. index_data = data['res']
  163. addTable(data['res'])
  164. } else {
  165. alert(data['msg'])
  166. }
  167. }
  168. );
  169. $.postJSON(
  170. http_ip_prot + 'langArea/query', JSON.stringify(post_data),
  171. function (data) {
  172. if (data['code'] == 0) {
  173. lang_data = data['res']
  174. console.log(lang_data)
  175. } else {
  176. alert(data['msg'])
  177. }
  178. }
  179. );
  180. });
  181. function addTable(data) {
  182. let body_html = ''
  183. $.each(data, function (idx, obj) {
  184. let edit_btn = '<a href="#" title="Edit" onclick="editFunc(\'' + obj['id'] + '\')"><i class="fa fa-edit"></i></a>';
  185. let del_btn = '<a href="#" title="Delete" onclick="delArea(\'' + obj['id'] + '\')"><i class="fa fa-ban"></i></a>';
  186. let langArr_td = '<td>';
  187. $.each(obj['lang_arr'], function (x, y) {
  188. langArr_td += (y + '&nbsp;&nbsp')
  189. });
  190. langArr_td += '</td>';
  191. body_html += '<tr><td>' + obj['id'] + '</td><td>' + obj['username'] + '</td>' + langArr_td + '<td>' + obj['role_id'] + '</td><td>' + edit_btn + '&nbsp;&nbsp;&nbsp;' + del_btn + '</td> </tr>'
  192. })
  193. $('#tabBody').html(body_html)
  194. }
  195. function subLangAre() {
  196. let access_token = $.cookie('access_token')
  197. let langArea = $('#InputLangArea').val()
  198. let post_data = {
  199. 'token': access_token,
  200. 'lang': langArea,
  201. }
  202. console.log(post_data)
  203. $.postJSON(
  204. http_ip_prot + 'langArea/add',
  205. JSON.stringify(post_data),
  206. function (data) {
  207. if (data['code'] == 0) {
  208. alert(data['msg'])
  209. window.location.reload();
  210. } else {
  211. alert(data['msg'])
  212. }
  213. }
  214. );
  215. }
  216. function delArea(id) {
  217. let post_data = {
  218. 'token': $.cookie('access_token'),
  219. 'id': id
  220. }
  221. let cr = confirm('delete it ?')
  222. if (cr) {
  223. $.postJSON(
  224. http_ip_prot + 'user/delete', JSON.stringify(post_data),
  225. function (data) {
  226. if (data['code'] == 0) {
  227. console.log(data)
  228. // alert(data['msg'])
  229. window.location.reload()
  230. } else {
  231. alert(data['msg'])
  232. }
  233. }
  234. );
  235. }
  236. }
  237. function editFunc(id) {
  238. // alert(langKey)
  239. console.log(index_data)
  240. $('#modal-container-edit').modal('show')
  241. let user_lang_arr
  242. let html_edit = '<label for="editDataInput" class="form-group">用户名:</label>'
  243. let user_lang_perm
  244. $.each(index_data, function (idx, obj) {
  245. if (id == obj['id']) {
  246. user_lang_arr = obj['lang_arr']
  247. user_lang_perm = obj['lp_arr']
  248. html_edit += '<input type="text" class="form-control" id="editDataInput" value="' + obj['username'] + '" lid="' + id + '">'
  249. html_edit += '<label for="editDataRole" class="form-group">角色:</label>'
  250. html_edit += '<input type="text" class="form-control" id="editDataRole" value="' + obj['role_id'] + '" lid="' + id + '">'
  251. }
  252. });
  253. html_edit += '<hr><span class="form-group">显示语言:</span><span class="float-right">可否编辑</span>';
  254. $.each(lang_data, function (idx, obj) {
  255. let checkbox_val=''
  256. let check_perm_val=''
  257. if(user_lang_arr){
  258. let check_flag = $.inArray(obj['lang'],user_lang_arr)
  259. console.log(check_flag)
  260. if(check_flag>=0){
  261. checkbox_val+='checked="checked"'
  262. }
  263. }
  264. if(user_lang_perm){
  265. let check_perm_flag = $.inArray(obj['lang'],user_lang_perm)
  266. console.log(check_perm_flag)
  267. if(check_perm_flag>=0){
  268. check_perm_val+='checked="checked"'
  269. }
  270. }
  271. html_edit += ('<label class="form-control"><input name="langsetname" type="checkbox" '+checkbox_val+' aria-label="Checkbox for following text input" value="' + obj['id'] + '">' + obj['lang'] + '<input name="langpermname" type="checkbox" '+check_perm_val+' aria-label="Checkbox for following text input" class="float-right" value="' + obj['id'] + '"></label>')
  272. })
  273. //console.log(user_lang_arr)
  274. $('#edit_model_form').html(html_edit)
  275. }
  276. function editRow() {
  277. let sub_lang_arr = []
  278. let sub_perm_arr = []
  279. $.each($('input[name="langsetname"]:checked'), function () {
  280. sub_lang_arr.push($(this).val())
  281. });
  282. $.each($('input[name="langpermname"]:checked'), function () {
  283. sub_perm_arr.push($(this).val())
  284. });
  285. console.log('--------')
  286. console.log(sub_perm_arr)
  287. console.log('--------')
  288. let post_data = {
  289. 'token': $.cookie('access_token'),
  290. 'id': $('#editDataInput').attr('lid'),
  291. 'username': $('#editDataInput').val(),
  292. 'role_id': $('#editDataRole').val(),
  293. 'langSetArr': sub_lang_arr,
  294. 'langPermArr':sub_perm_arr,
  295. }
  296. console.log(post_data)
  297. $.postJSON(
  298. http_ip_prot + 'user/update', JSON.stringify(post_data),
  299. function (data) {
  300. if (data['code'] == 0) {
  301. console.log(data)
  302. // alert(data['msg'])
  303. window.location.reload()
  304. } else {
  305. alert(data['msg'])
  306. }
  307. }
  308. );
  309. }
  310. function subRegAction() {
  311. let username = $("#InputUsername").val();
  312. let password = $("#InputPassword").val();
  313. let role_id = $("#InputRole").val();
  314. let post_data = {
  315. 'username': username,
  316. 'password': password,
  317. 'role_id':role_id
  318. };
  319. $.postJSON(
  320. http_ip_prot + 'user/register',
  321. JSON.stringify(post_data),
  322. function (data) {
  323. if (data['code'] == 0) {
  324. alert(data['msg'])
  325. window.location.reload()
  326. } else {
  327. alert(data['msg'])
  328. }
  329. }
  330. );
  331. }
  332. </script>
  333. </body>
  334. </html>