index.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524
  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. <script src="js/datachange.js"></script>
  22. <style>
  23. td {
  24. white-space: nowrap;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <div class="clear-backend">
  30. <div class="avatar">
  31. <div>
  32. <a href="javascript:void(0);" target="_blank">
  33. <img src="img/admin.png" alt="">
  34. </a>
  35. </div>
  36. </div>
  37. <!-- tab-menu -->
  38. <input type="radio" class="tab-1" name="tab" checked="checked">
  39. <span>Home</span><i class="fa fa-home"></i>
  40. <input type="radio" class="tab-2" name="tab" onclick="location.href='langTab.html'">
  41. <span>Lang</span><i class="fa fa-medium"></i>
  42. <input type="radio" class="tab-3" name="tab" onclick="location.href='userTab.html'">
  43. <span>Users</span><i class="fa fa-user"></i>
  44. <span></span>
  45. <span></span>
  46. <span></span>
  47. <span></span>
  48. <span></span>
  49. <span></span>
  50. <span></span>
  51. <!--
  52. <input type="radio" class="tab-5" name="tab">
  53. <span>Upload</span><i class="fa fa-cloud-upload"></i>
  54. <input type="radio" class="tab-6" name="tab">
  55. <span>Favorite</span><i class="fa fa-star"></i>
  56. <input type="radio" class="tab-7" name="tab">
  57. <span>Photos</span><i class="fa fa-photo"></i>
  58. <input type="radio" class="tab-8" name="tab">
  59. <span>Analysis</span><i class="fa fa-line-chart"></i>
  60. <input type="radio" class="tab-9" name="tab">
  61. <span>Links</span><i class="fa fa-link"></i>
  62. <input type="radio" class="tab-10" name="tab">
  63. <span>Settings</span><i class="fa fa-cog"></i>-->
  64. <!-- tab-top-bar -->
  65. <div class="top-bar">
  66. <ul>
  67. <li>
  68. <a href="login.html" title="Log Out">
  69. <i class="fa fa-sign-out"></i>
  70. </a>
  71. </li>
  72. <li>
  73. <a href="" title="Messages">
  74. <i class="fa fa-envelope"></i>
  75. </a>
  76. </li>
  77. <li>
  78. <a href="" title="Edit">
  79. <i class="fa fa-edit"></i>
  80. </a>
  81. </li>
  82. </ul>
  83. </div>
  84. <!-- tab-content -->
  85. <div class="tab-content">
  86. <section class="tab-item-1">
  87. <div class="container-fluid">
  88. <div class="row">
  89. <div id="searchCheckBox" class="col-md-12"></div>
  90. <div class="col-md-12">
  91. <input type="text" class="form-group form-control" id="searchInput"
  92. style="width: 300px;display: inline"/>
  93. <button class="btn btn-danger form-inline" style="margin-bottom: 5px"
  94. onclick="searchKeyAction()">搜索
  95. </button>
  96. </div>
  97. </div>
  98. </div>
  99. <div class="container-fluid">
  100. <div class="row">
  101. <!--add-->
  102. <div class="col-md-12" style="overflow:auto;">
  103. <table class="table table-bordered table-hover" style="width: auto;">
  104. <thead id="langTableHead"></thead>
  105. <tbody id="langTableBody"></tbody>
  106. </table>
  107. </div>
  108. </div>
  109. <hr>
  110. <div id="pagination"></div>
  111. </div>
  112. <hr>
  113. <!---->
  114. <div class="container-fluid">
  115. <div class="row">
  116. <div class="col-md-12">
  117. <div class="modal fade" id="modal-container-593541" role="dialog" aria-labelledby="myModalLabel"
  118. aria-hidden="true">
  119. <div class="modal-dialog" role="document">
  120. <div class="modal-content">
  121. <div class="modal-header">
  122. <h5 class="modal-title" id="myModalLabel">
  123. EDIT
  124. </h5>
  125. <button type="button" class="close" data-dismiss="modal">
  126. <span aria-hidden="true">×</span>
  127. </button>
  128. </div>
  129. <div class="modal-body">
  130. <div class="form-group" id="edit_model_form">
  131. <!--<label for="InputLangArea">-->
  132. <!--langArea-->
  133. <!--</label>-->
  134. <!--<input type="text" class="form-control" id="InputLangArea"/>-->
  135. </div>
  136. </div>
  137. <div class="modal-footer">
  138. <button type="button" class="btn btn-primary editRowSaveBtn"
  139. onclick="editRow(this);return false;">
  140. Save changes
  141. </button>
  142. <button type="button" class="btn btn-secondary" data-dismiss="modal">
  143. Close
  144. </button>
  145. </div>
  146. </div>
  147. </div>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. <!---->
  153. </section>
  154. <section class="tab-item-2">
  155. <div class="container-fluid">
  156. <div class="row">
  157. <div class="col-md-12">
  158. </div>
  159. </div>
  160. </div>
  161. </section>
  162. </div>
  163. </div>
  164. <script type="text/javascript">
  165. var orderByupdate = 0
  166. var page = 1
  167. var line = 10
  168. $(function () {
  169. var page = GetUrlParam('page')
  170. if (!page) {
  171. page = 1
  172. }
  173. let post_data = {
  174. 'token': $.cookie('access_token'),
  175. 'page': page,
  176. 'line': line,
  177. 'orderByupdate': orderByupdate
  178. };
  179. InitIndex(post_data)
  180. // $('#pagination').pagination({
  181. // pages: 50, //总页数
  182. // edges: 2,
  183. // cssStyle: 'pagination-sm', //按纽大小pagination-lg或写入自定义css
  184. // displayedPages: 5, //显示几个
  185. // onPageClick: function(pageNumber, event) {
  186. // //点击时调用
  187. // // alert(pageNumber);
  188. // },
  189. // onInit: function(getid) {
  190. // //刷新时或初始化调用
  191. // // alert(getid);
  192. // }
  193. // });
  194. });
  195. function orderByUpdateTimeFunc(status) {
  196. if (status === 1) {
  197. orderByupdate = 0
  198. } else {
  199. orderByupdate = 1
  200. }
  201. var page = GetUrlParam('page')
  202. if(!page){
  203. page = 1
  204. }
  205. let post_data = {
  206. 'token': $.cookie('access_token'),
  207. 'page': page,
  208. 'line': 10,
  209. 'orderByupdate': orderByupdate
  210. };
  211. InitIndex(post_data)
  212. }
  213. function InitIndex(post_data) {
  214. $.postJSON(
  215. http_ip_prot + 'langWord/query', JSON.stringify(post_data),
  216. function (data) {
  217. if (data['code'] == 0) {
  218. // console.log(data['res'])
  219. console.log(data)
  220. addTable(data['res'])
  221. let count_page = Math.ceil(data['res']['count'] / line)
  222. $('#pagination').pagination({
  223. pages: count_page, //总页数
  224. // pages: 10000, //总页数
  225. edges: 2,
  226. cssStyle: 'pagination', //按纽大小pagination-lg或写入自定义css
  227. displayedPages: 5, //显示几个
  228. onPageClick: function (pageNumber, event) {
  229. //点击时调用
  230. // alert(pageNumber);
  231. queryData(pageNumber)
  232. },
  233. onInit: function (getid) {
  234. //刷新时或初始化调用
  235. // alert(getid);
  236. }
  237. });
  238. } else {
  239. alert(data['msg'])
  240. }
  241. }
  242. );
  243. }
  244. let la_list
  245. let lw_data
  246. function queryData(page) {
  247. let post_data = {
  248. 'token': $.cookie('access_token'),
  249. 'page': page,
  250. 'line': 10,
  251. 'orderByupdate': orderByupdate
  252. };
  253. $.postJSON(
  254. http_ip_prot + 'langWord/query', JSON.stringify(post_data),
  255. function (data) {
  256. if (data['code'] == 0) {
  257. // console.log(data['res'])
  258. console.log(data)
  259. addTable(data['res'])
  260. } else {
  261. alert(data['msg'])
  262. }
  263. }
  264. );
  265. }
  266. function addTable(data) {
  267. //头部多区域语言
  268. let head_data = data['la_list'];
  269. la_list = head_data
  270. // body部详细语言
  271. let body_data = data['lw_dict'];
  272. lw_data = body_data
  273. let head_html = '<tr><th>key</th>';
  274. let search_tab = '<label><input type="radio" name="optionsRadios" value="key" checked>key</label>'
  275. //头部标签添加
  276. $.each(head_data.reverse(), function (idx, obj) {
  277. // console.log(idx)
  278. head_html += ('<th>' + obj['lang'] + '</th>')
  279. search_tab += '&nbsp;&nbsp;&nbsp;<label><input type="radio" name="optionsRadios" value="' + obj['lang'] + '">' + obj['lang'] + '</label>'
  280. });
  281. // head_html += '<th>udpateTime &nbsp;<i class="fa fa-arrow-down" aria-hidden="true"></i></td><th width="180px"><a href="#" onclick="addRow()">add</a></th></tr>';
  282. head_html += ('<th><a href="javascript:void(0);" onclick="orderByUpdateTimeFunc(' + orderByupdate + ')">udpateTime &nbsp;<i class="fa ' + (orderByupdate == 1 ? 'fa-arrow-up' : 'fa-arrow-down') + '" aria-hidden="true"></i></a></td><th width="180px"><a href="javascript:void(0);" onclick="addRow()">add</a></th></tr>');
  283. // search_tab += '<td width="180px"><button class="btn-primary btn">搜索</button></td></tr>';
  284. $('#searchCheckBox').html(search_tab)
  285. let body_html = '';
  286. console.log('--------');
  287. $.each(body_data, function (idx, obj) {
  288. // console.log(idx)
  289. console.log(obj)
  290. let edit_btn = '<a href="javascript:void(0);" title="Edit" onclick="editFunc(\'' + idx + '\')"><i class="fa fa-edit"></i></a>';
  291. let del_btn = '<a href="javascript:void(0);" title="Delete" onclick="deleteFunc(\'' + idx + '\')"><i class="fa fa-ban"></i></a>';
  292. // let del_btn = '';
  293. body_html += '<tr>';
  294. body_html += ('<td>' + idx + '</td>');
  295. $.each(la_list, function (x, y) {
  296. if (obj[y['lang']]) {
  297. body_html += ('<td>' + obj[y['lang']] + '</td>')
  298. } else {
  299. body_html += ('<td></td>')
  300. }
  301. });
  302. let updTime = $.DateChange.UnixToDate(obj['updTime'], true, 8);
  303. body_html += ('<td>' + updTime + '<span class="arrow dsc"></td><td>' + edit_btn + '&nbsp;&nbsp;&nbsp;' + del_btn + '</td></tr>');
  304. });
  305. $('#langTableHead').html(head_html);
  306. $('#langTableBody').html(body_html);
  307. addDelFunc()
  308. }
  309. function addRow() {
  310. let newRow = '<tr><td><input class="form-control" type="text" langID="key" id="newRow_key"></td>'
  311. $.each(la_list, function (idx, obj) {
  312. // console.log(idx)
  313. // newRow += ('<td>' + obj['id'] + '</td>')
  314. newRow += ('<td>' +
  315. '<input class="form-control" type="text" langID="' + obj['id'] + '" id="newRow_lang_' + obj['id'] + '">' +
  316. '</td>')
  317. })
  318. let save_btn = '<a href="javascript:void(0);" title="Save" class="save_row"><i class="fa fa-check-circle-o"></i></a>';
  319. let del_btn = '<a href="javascript:void(0);" title="Delete" class="del_row"><i class="fa fa-ban"></i></a>';
  320. newRow += '<td></td><td>' + save_btn + '&nbsp;&nbsp;&nbsp;' + del_btn + '</td></tr>'
  321. $('#langTableBody').prepend(newRow)
  322. addDelFunc()
  323. addSaveFunc()
  324. }
  325. function addDelFunc() {
  326. $(".del_row").bind("click", function () {
  327. let trRow = $(this).parent().parent()
  328. trRow.remove()
  329. });
  330. }
  331. function addSaveFunc() {
  332. $(".save_row").bind("click", function () {
  333. let post_data = {
  334. 'token': $.cookie('access_token')
  335. }
  336. let post_list = []
  337. let trRow = $(this).parent().parent()
  338. trRow.find('input').each(function () {
  339. // console.log($(this).attr('id'))
  340. // console.log($(this).attr('langID'))
  341. let inputVal = $(this).val()
  342. let langID = $(this).attr('langID')
  343. if (langID === 'key') {
  344. post_data['word_key'] = inputVal
  345. } else {
  346. post_list.push({'la_id': langID, 'val': inputVal})
  347. }
  348. })
  349. post_data['word_arr'] = post_list
  350. console.log(post_data)
  351. $.postJSON(
  352. http_ip_prot + 'langWord/add', JSON.stringify(post_data),
  353. function (data) {
  354. if (data['code'] == 0) {
  355. // console.log(data['res'])
  356. window.location.reload();
  357. console.log(data)
  358. } else {
  359. alert(data['msg'])
  360. }
  361. }
  362. )
  363. })
  364. }
  365. // 编辑模态框
  366. function editFunc(langKey) {
  367. console.log(lw_data);
  368. console.log(la_list);
  369. // alert(langKey)
  370. $('#modal-container-593541').modal('show')
  371. // let post_data = {'token': $.cookie('access_token')};
  372. let html_per = '<label for="lang_key_edit">KEY</label><input class="form-control" type="text" id="lang_key_edit" oldkey="' + langKey + '" value="' + langKey + '"> '
  373. $.each(la_list, function (idx, obj) {
  374. console.log(obj);
  375. html_per += ('<label for="InputLangArea">' + obj['lang'] + ':</label>' +
  376. '<input type="text" class="form-control" lang="' + obj['lang'] + '" value="' + (lw_data[langKey][obj['lang']] ? lw_data[langKey][obj['lang']] : '') + '"/>')
  377. });
  378. // console.log(html_per)
  379. $('#edit_model_form').html(html_per)
  380. }
  381. function deleteFunc(langKey) {
  382. var r = confirm("Press a button")
  383. if (r) {
  384. let post_data = {
  385. 'token': $.cookie('access_token'),
  386. 'word_key': langKey
  387. }
  388. console.log(post_data)
  389. $.postJSON(
  390. http_ip_prot + 'langWord/delete', JSON.stringify(post_data),
  391. function (data) {
  392. if (data['code'] == 0) {
  393. // console.log(data['res'])
  394. console.log(data);
  395. alert(data['msg']);
  396. window.location.reload();
  397. } else {
  398. alert(data['msg'])
  399. }
  400. }
  401. )
  402. }
  403. }
  404. /*post_data = {
  405. word_key_id:1,
  406. word_key:xxx,
  407. word_arr:[
  408. {'lang':'','val':''},
  409. {'lang':'','val':''},
  410. {'lang':'','val':''}
  411. ]
  412. }*/
  413. function editRow() {
  414. let post_data = {}
  415. post_data['token'] = $.cookie('access_token')
  416. post_data['word_key'] = $('#lang_key_edit').val()
  417. post_data['old_word_key'] = $('#lang_key_edit').attr('oldkey')
  418. post_data['word_arr'] = {}
  419. $('#edit_model_form').find('input').each(function () {
  420. let langArea = $(this).attr('lang')
  421. if (langArea) {
  422. post_data['word_arr'][langArea] = $(this).val()
  423. }
  424. })
  425. console.log(post_data)
  426. $.postJSON(
  427. http_ip_prot + 'langWord/update', JSON.stringify(post_data),
  428. function (data) {
  429. if (data['code'] == 0) {
  430. // console.log(data['res'])
  431. console.log(data)
  432. alert(data['msg'])
  433. window.location.reload();
  434. } else {
  435. alert(data['msg'])
  436. }
  437. }
  438. )
  439. // $('.editRowSaveBtn').bind('click', function () {
  440. // console.log('adjslkfjsdalkfj')
  441. // })
  442. }
  443. function IndexTable() {
  444. var page = GetUrlParam('page')
  445. let post_data = {
  446. 'token': $.cookie('access_token'),
  447. 'page': page,
  448. 'line': 10,
  449. 'orderByupdate': orderByupdate
  450. };
  451. InitIndex(post_data)
  452. }
  453. function searchKeyAction() {
  454. let searchKey = $('input[name="optionsRadios"]:checked').val();
  455. let searchVal = $('#searchInput').val()
  456. console.log('-------------------------------')
  457. console.log(searchKey)
  458. console.log(searchVal)
  459. console.log('-------------------------------')
  460. let post_data = {}
  461. if (searchVal && searchKey) {
  462. post_data = {
  463. 'token': $.cookie('access_token'),
  464. 'page': 1,
  465. 'line': 10,
  466. 'searchKey': searchKey,
  467. 'searchVal': searchVal
  468. };
  469. } else {
  470. post_data = {
  471. 'token': $.cookie('access_token'),
  472. 'page': 1,
  473. 'line': 10,
  474. };
  475. }
  476. InitIndex(post_data)
  477. }
  478. </script>
  479. </body>
  480. </html>