index.html 22 KB

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