index.html 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627
  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. $(function () {
  167. toastr.options = {
  168. "closeButton": true,
  169. "debug": false,
  170. "newestOnTop": false,
  171. "progressBar": true,
  172. "positionClass": "toast-top-right",
  173. "preventDuplicates": false,
  174. "onclick": null,
  175. "showDuration": "300",
  176. "hideDuration": "500",
  177. "timeOut": "5000",
  178. "extendedTimeOut": "1000",
  179. "showEasing": "swing",
  180. "hideEasing": "linear",
  181. "showMethod": "fadeIn",
  182. "hideMethod": "fadeOut"
  183. }
  184. var page = GetUrlParam('page')
  185. if (!page) {
  186. page = 1
  187. }
  188. let searchKey = $('input[name="optionsRadios"]:checked').val();
  189. let searchVal = $('#searchInput').val()
  190. let post_data = {
  191. 'token': $.cookie('access_token'),
  192. 'page': page,
  193. 'line': line,
  194. 'orderByupdate': orderByupdate,
  195. 'searchKey': searchKey?searchKey:"key",
  196. 'searchVal': searchVal
  197. };
  198. InitIndex(post_data,1)
  199. // $('#pagination').pagination({
  200. // pages: 50, //总页数
  201. // edges: 2,
  202. // cssStyle: 'pagination-sm', //按纽大小pagination-lg或写入自定义css
  203. // displayedPages: 5, //显示几个
  204. // onPageClick: function(pageNumber, event) {
  205. // //点击时调用
  206. // // alert(pageNumber);
  207. // },
  208. // onInit: function(getid) {
  209. // //刷新时或初始化调用
  210. // // alert(getid);
  211. // }
  212. // });
  213. });
  214. function orderByUpdateTimeFunc(status) {
  215. if (status === 1) {
  216. orderByupdate = 0
  217. } else {
  218. orderByupdate = 1
  219. }
  220. var page = GetUrlParam('page')
  221. if (!page) {
  222. page = 1
  223. }
  224. let searchKey = $('input[name="optionsRadios"]:checked').val();
  225. let searchVal = $('#searchInput').val()
  226. let post_data = {
  227. 'token': $.cookie('access_token'),
  228. 'page': page,
  229. 'line': 10,
  230. 'orderByupdate': orderByupdate,
  231. 'searchKey': searchKey?searchKey:"key",
  232. 'searchVal': searchVal
  233. };
  234. InitIndex(post_data,1)
  235. }
  236. function InitSearchTab(data) {
  237. let head_data = data['la_list'];
  238. // body部详细语言
  239. let search_tab = '<label><input type="radio" name="optionsRadios" value="key" checked>key</label>'
  240. //头部标签添加
  241. $.each(head_data.reverse(), function (idx, obj) {
  242. search_tab += '&nbsp;&nbsp;&nbsp;<label><input type="radio" name="optionsRadios" value="' + obj['lang'] + '">' + obj['lang'] + '</label>'
  243. });
  244. $('#searchCheckBox').html(search_tab)
  245. }
  246. function InitIndex(post_data,type) {
  247. console.log(post_data)
  248. $.postJSON(
  249. http_ip_prot + 'langWord/query', JSON.stringify(post_data),
  250. function (data) {
  251. if (data['code'] == 0) {
  252. // console.log(data['res'])
  253. console.log(data)
  254. if(type==1) {
  255. InitSearchTab(data['res'])
  256. }
  257. addTable(data['res'])
  258. let count_page = Math.ceil(data['res']['count'] / line)
  259. $('#pagination').pagination({
  260. pages: count_page, //总页数
  261. // pages: 10000, //总页数
  262. edges: 2,
  263. cssStyle: 'pagination', //按纽大小pagination-lg或写入自定义css
  264. displayedPages: 5, //显示几个
  265. onPageClick: function (pageNumber, event) {
  266. //点击时调用
  267. // alert(pageNumber);
  268. queryData(pageNumber)
  269. },
  270. onInit: function (getid) {
  271. //刷新时或初始化调用
  272. // alert(getid);
  273. }
  274. });
  275. } else {
  276. window.location.href = "http://" + domain + ":7724/web/login.html";
  277. alert(data['msg'])
  278. }
  279. }
  280. );
  281. $.postJSON(
  282. http_ip_prot + 'user/init', JSON.stringify(post_data),
  283. function (data) {
  284. if (data['code'] == 0) {
  285. initData = data['res']
  286. } else {
  287. window.location.href = "http://" + domain + ":7724/web/login.html";
  288. alert(data['msg'])
  289. }
  290. }
  291. );
  292. }
  293. let la_list
  294. let lw_data
  295. function queryData(page) {
  296. let searchKey = $('input[name="optionsRadios"]:checked').val();
  297. let searchVal = $('#searchInput').val()
  298. var post_data = {}
  299. if (searchVal) {
  300. post_data = {
  301. 'token': $.cookie('access_token'),
  302. 'page': page,
  303. 'line': 10,
  304. 'orderByupdate': orderByupdate,
  305. 'searchKey': searchKey?searchKey:"key",
  306. 'searchVal': searchVal
  307. };
  308. } else {
  309. post_data = {
  310. 'token': $.cookie('access_token'),
  311. 'page': page,
  312. 'line': 10,
  313. 'orderByupdate': orderByupdate,
  314. 'searchKey': searchKey?searchKey:"key",
  315. 'searchVal': searchVal
  316. };
  317. }
  318. console.log('----')
  319. console.log(post_data)
  320. console.log('====')
  321. $.postJSON(
  322. http_ip_prot + 'langWord/query', JSON.stringify(post_data),
  323. function (data) {
  324. if (data['code'] == 0) {
  325. // console.log(data['res'])
  326. console.log(data)
  327. addTable(data['res'])
  328. } else {
  329. alert(data['msg'])
  330. }
  331. }
  332. );
  333. }
  334. function addTable(data) {
  335. //头部多区域语言
  336. let head_data = data['la_list'];
  337. la_list = head_data
  338. // body部详细语言
  339. let body_data = data['lw_dict'];
  340. lw_data = body_data
  341. let head_html = '<tr><th width="180px"><a href="javascript:void(0);" onclick="addRow()">add</a></th><th>key</th>';
  342. //头部标签添加
  343. $.each(head_data.reverse(), function (idx, obj) {
  344. // console.log(idx)
  345. head_html += ('<th>' + obj['lang'] + '</th>')
  346. });
  347. 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>');
  348. let body_html = '';
  349. $.each(body_data, function (idx, obj) {
  350. let edit_btn = '<a href="javascript:void(0);" title="Edit" onclick="editFunc(this)"><i class="fa fa-edit"></i></a>';
  351. let del_btn = '<a href="javascript:void(0);" title="Delete" onclick="deleteFunc(this)"><i class="fa fa-ban"></i></a>';
  352. // let del_btn = '';
  353. body_html += '<tr><td>' + edit_btn + '&nbsp;&nbsp;&nbsp;' + del_btn + '</td>';
  354. body_html += ('<td>' + idx + '</td>');
  355. $.each(la_list, function (x, y) {
  356. if (obj[y['lang']]) {
  357. body_html += ('<td>' + obj[y['lang']] + '</td>')
  358. } else {
  359. body_html += ('<td></td>')
  360. }
  361. });
  362. let updTime = $.DateChange.UnixToDate(obj['updTime'], true, 8);
  363. body_html += ('<td>' + updTime + '<span class="arrow dsc"></td></tr>');
  364. });
  365. $('#langTableHead').empty().html(head_html);
  366. $('#langTableBody').empty().html(body_html);
  367. addDelFunc()
  368. }
  369. function addRow() {
  370. let save_btn = '<a href="javascript:void(0);" title="Save" class="save_row"><i class="fa fa-check-circle-o"></i></a>';
  371. let del_btn = '<a href="javascript:void(0);" title="Delete" class="del_row"><i class="fa fa-ban"></i></a>';
  372. 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>'
  373. $.each(la_list, function (idx, obj) {
  374. // console.log(idx)
  375. // newRow += ('<td>' + obj['id'] + '</td>')
  376. newRow += ('<td>' +
  377. '<input class="form-control" type="text" langID="' + obj['id'] + '" id="newRow_lang_' + obj['id'] + '">' +
  378. '</td>')
  379. })
  380. newRow += '<td></td></tr>'
  381. $('#langTableBody').prepend(newRow)
  382. addDelFunc()
  383. addSaveFunc()
  384. }
  385. function addDelFunc() {
  386. $(".del_row").bind("click", function () {
  387. let trRow = $(this).parent().parent()
  388. trRow.remove()
  389. });
  390. }
  391. function addSaveFunc() {
  392. $(".save_row").bind("click", function () {
  393. let post_data = {
  394. 'token': $.cookie('access_token')
  395. }
  396. let post_list = []
  397. let trRow = $(this).parent().parent()
  398. trRow.find('input').each(function () {
  399. // console.log($(this).attr('id'))
  400. // console.log($(this).attr('langID'))
  401. let inputVal = $(this).val()
  402. let langID = $(this).attr('langID')
  403. if (langID === 'key') {
  404. post_data['word_key'] = inputVal
  405. } else {
  406. post_list.push({'la_id': langID, 'val': inputVal})
  407. }
  408. })
  409. post_data['word_arr'] = post_list
  410. console.log(post_data)
  411. $.postJSON(
  412. http_ip_prot + 'langWord/add', JSON.stringify(post_data),
  413. function (data) {
  414. if (data['code'] == 0) {
  415. // console.log(data['res'])
  416. window.location.reload();
  417. console.log(data)
  418. } else {
  419. alert(data['msg'])
  420. }
  421. }
  422. )
  423. })
  424. }
  425. // 编辑模态框
  426. function editFunc($this) {
  427. let langKey = $($this).parent().parent().children().eq(1).text()
  428. $('#modal-container-593541').modal('show')
  429. let user_perm = initData['user_perm']
  430. console.log(initData)
  431. // let post_data = {'token': $.cookie('access_token')};
  432. 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 + '"> '
  433. $.each(la_list, function (idx, obj) {
  434. let lang_perm_ls = initData['lang_perm_ls']
  435. let check_perm_flag = $.inArray(obj['lang'], lang_perm_ls)
  436. if (check_perm_flag >= 0) {
  437. var inputAttr = ''
  438. } else {
  439. var inputAttr = 'disabled="disabled"'
  440. }
  441. //console.log(obj);
  442. html_per += ('<label for="InputLangArea">' + obj['lang'] + ':</label>' +
  443. '<textarea type="text" ' + inputAttr + ' class="form-control disabled" lang="' + obj['lang'] + '">' + (lw_data[langKey][obj['lang']] ? lw_data[langKey][obj['lang']] : '') + '</textarea>')
  444. //html_per += ('<label for="InputLangArea">' + obj['lang'] + ':</label>' +
  445. // '<input type="text" ' + inputAttr + ' class="form-control disabled" lang="' + obj['lang'] + '" value="' + (lw_data[langKey][obj['lang']] ? lw_data[langKey][obj['lang']] : '') + '"/>')
  446. });
  447. // console.log(html_per)
  448. $('#edit_model_form').html(html_per)
  449. }
  450. function deleteFunc($this) {
  451. let langKey = $($this).parent().parent().children().eq(1).text()
  452. var r = confirm("Press a button")
  453. if (r) {
  454. let post_data = {
  455. 'token': $.cookie('access_token'),
  456. 'word_key': langKey
  457. }
  458. console.log(post_data)
  459. $.postJSON(
  460. http_ip_prot + 'langWord/delete', JSON.stringify(post_data),
  461. function (data) {
  462. if (data['code'] == 0) {
  463. // console.log(data['res'])
  464. console.log(data);
  465. alert(data['msg']);
  466. window.location.reload();
  467. } else {
  468. alert(data['msg'])
  469. }
  470. }
  471. )
  472. }
  473. }
  474. /*post_data = {
  475. word_key_id:1,
  476. word_key:xxx,
  477. word_arr:[
  478. {'lang':'','val':''},
  479. {'lang':'','val':''},
  480. {'lang':'','val':''}
  481. ]
  482. }*/
  483. function editRow() {
  484. let post_data = {}
  485. post_data['token'] = $.cookie('access_token')
  486. post_data['word_key'] = $('#lang_key_edit').val()
  487. post_data['old_word_key'] = $('#lang_key_edit').attr('oldkey')
  488. post_data['word_arr'] = {}
  489. // $('#edit_model_form').find('input').each(function () {
  490. // let langArea = $(this).attr('lang')
  491. // if (langArea) {
  492. // post_data['word_arr'][langArea] = $(this).val()
  493. //}
  494. //})
  495. $('#edit_model_form').find('textarea').each(function () {
  496. let langArea = $(this).attr('lang')
  497. if (langArea) {
  498. post_data['word_arr'][langArea] = $(this).val()
  499. }
  500. })
  501. console.log(post_data)
  502. $.postJSON(
  503. http_ip_prot + 'langWord/update', JSON.stringify(post_data),
  504. function (data) {
  505. if (data['code'] == 0) {
  506. // console.log(data['res'])
  507. console.log(data)
  508. toastr["success"](data['msg'])
  509. $('#modal-container-593541').modal('hide')
  510. IndexTable()
  511. //window.location.reload();
  512. } else {
  513. alert(data['msg'])
  514. }
  515. }
  516. )
  517. // $('.editRowSaveBtn').bind('click', function () {
  518. // console.log('adjslkfjsdalkfj')
  519. // })
  520. }
  521. function IndexTable() {
  522. var page = GetUrlParam('page')
  523. if (!page) {
  524. page = 1
  525. }
  526. let searchKey = $('input[name="optionsRadios"]:checked').val();
  527. let searchVal = $('#searchInput').val()
  528. let post_data = {
  529. 'token': $.cookie('access_token'),
  530. 'page': page,
  531. 'line': line,
  532. 'orderByupdate': orderByupdate,
  533. 'searchKey': searchKey?searchKey:"key",
  534. 'searchVal': searchVal
  535. };
  536. $.postJSON(
  537. http_ip_prot + 'langWord/query', JSON.stringify(post_data),
  538. function (data) {
  539. if (data['code'] == 0) {
  540. // console.log(data['res'])
  541. console.log(data)
  542. addTable(data['res'])
  543. let count_page = Math.ceil(data['res']['count'] / line)
  544. queryData(page)
  545. } else {
  546. alert(data['msg'])
  547. }
  548. }
  549. );
  550. }
  551. function searchKeyAction() {
  552. var page = GetUrlParam('page')
  553. if (!page) {
  554. page = 1
  555. }
  556. let searchKey = $('input[name="optionsRadios"]:checked').val();
  557. let searchVal = $('#searchInput').val()
  558. let post_data = {}
  559. if (searchVal && searchKey) {
  560. post_data = {
  561. 'token': $.cookie('access_token'),
  562. 'page': page,
  563. 'line': 10,
  564. 'searchKey': searchKey ? searchKey : "key",
  565. 'searchVal': searchVal
  566. };
  567. } else {
  568. post_data = {
  569. 'token': $.cookie('access_token'),
  570. 'page': page,
  571. 'line': 10,
  572. };
  573. }
  574. InitIndex(post_data,2)
  575. }
  576. </script>
  577. </body>
  578. </html>