index.html 24 KB

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