loginLogs.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. const $ = require('jquery');
  2. require("../css/logManagement.less");
  3. require('./../resource/jquery-ui/jquery-ui.min.js');
  4. require('./modal.js');
  5. const { api } = require('./api.js')
  6. const { post, getCookie, getUrlArgObjectNew, emptyBox, setDatePicker, getPickerDate, listenScroll } = require('./utils.js')
  7. const iconCalenBlue = require("./../images/icon_calen_blue.png")
  8. const iconCalenGrey = require("./../images/icon_calen_grey.png")
  9. const arrowLeft= require("./../images/arrow_left.png")
  10. const arrowRight = require("./../images/arrow_right.png")
  11. let size=15, loginName = "", loginIp = ""
  12. $(function () {
  13. listenScroll('.mukuai')
  14. dateChange()
  15. $(".abnormalClear").click(function () {
  16. // window.location.reload()
  17. loginName = ""
  18. loginIp=""
  19. setDatePicker($("#datepicker"), $("#datepicker2"), 1)
  20. $(".loginName ").val("")
  21. $(".loginIp ").val("")
  22. getTabData(1)
  23. })
  24. setDatePicker($("#datepicker"), $("#datepicker2"), 1)
  25. getTabData(1)//条目缺陷
  26. })
  27. $('.loginName').on("input", function (e) {
  28. let val = $(this).val().trim()
  29. loginName = val
  30. })
  31. $('.loginIp').on("input", function (e) {
  32. let val = $(this).val().trim()
  33. loginIp = val
  34. })
  35. $(".menu .page", parent.document).removeClass("active")
  36. $(parent.document).find(".menu .page[code=YH-RZGL-DLRZ]").addClass("active")
  37. //所有数据切换日期筛选
  38. function dateChange() {
  39. $(".monthYear .mon").click(function () {
  40. $(this).css({
  41. backgroundColor: '#00A1FF',
  42. color: '#fff'
  43. }).siblings().css({
  44. color: '#00A1FF',
  45. backgroundColor: '#fff'
  46. })
  47. setDatePicker($("#datepicker"), $("#datepicker2"), 1)
  48. getTabData(1)
  49. })
  50. $(".monthYear .year").click(function () {
  51. $(this).css({
  52. backgroundColor: '#00A1FF',
  53. color: '#fff'
  54. }).siblings().css({
  55. color: '#00A1FF',
  56. backgroundColor: '#fff'
  57. })
  58. setDatePicker($("#datepicker"), $("#datepicker2"), 2)
  59. getTabData(1)
  60. })
  61. }
  62. //获取表格数据
  63. function getTabData(activePage) {
  64. const dateStatrt = getPickerDate($("#datepicker"), 1)
  65. const dateEnd = getPickerDate($("#datepicker2"), 2)
  66. const start = new Date(dateStatrt).getTime()
  67. const end = new Date(dateEnd).getTime()
  68. if (start > end) {
  69. $.alerModal({ "message": '开始时间不能大于结束时间~', type: "tip", time: '1000', isFather: true, fatherWrapper: $("#mainBox", parent.document) });
  70. return
  71. }
  72. const param = {
  73. loginName: loginName.replace(/%/g,"/%").replace(/_/g,"/_"),
  74. loginIp: loginIp.replace(/%/g,"/%").replace(/_/g,"/_"),
  75. "startDate": dateStatrt,
  76. "endDate": dateEnd,
  77. size: size,
  78. current:activePage,
  79. }
  80. $('.pagination').html("")
  81. $('.tbody').html(emptyBox('努力加载中...', '', 1))
  82. post(api.loginLogPage, param).then(res => {
  83. if (res.data.code == '0') {
  84. const data = res.data.data.records
  85. const totalPage = res.data.data.pages
  86. const totalNum = res.data.data.total
  87. renderTab(data, activePage)
  88. if(totalPage > 1){
  89. renderPagination(totalPage,Number(activePage),totalNum)
  90. } else{
  91. $('.pagination').html("")
  92. }
  93. }else{
  94. $('.tbody').html(emptyBox())
  95. }
  96. }).catch((e) =>{
  97. })
  98. }
  99. $(".filter").on("click", function (e) {
  100. getTabData(1)
  101. })
  102. function renderTab(data, activePage) {
  103. let str = ``;
  104. for (let i = 0; i < data.length; i++) {
  105. const item = data[i]
  106. str += `
  107. <tr data-id=${item.id} data-index=${i}>
  108. <td class="textCenter">${(activePage - 1) * 15 + i + 1}</td>
  109. <td data-model="${item.loginName}">${item.loginName}</td>
  110. <td class="loginDate">${item.loginDate}</td>
  111. <td class="loginIp">${item.loginIp||"-"}</td>
  112. <td class="loginAddress">${item.loginAddress}</td>
  113. <td class="loginBrowser">${item.loginBrowser}</td>
  114. </tr>
  115. `
  116. }
  117. $('.tbody').html(str ? str : emptyBox())
  118. }
  119. //分页渲染
  120. function renderPagination(totalPage,activePage,totalNum){
  121. let str = `<span class="totalSum">共${totalPage}页/${totalNum}条数据</span><span class="prePage"><img class="arrowPage" src=${arrowLeft} /></span>`
  122. if(totalPage <= 6){
  123. for(let i = 1; i <= totalPage; i++){
  124. str += `<span class="pageNum ${'page'+i}" data-page=${i}>${i}</span>`
  125. }
  126. }else{
  127. if(activePage <= 3){ //选中页数小于4
  128. for(let i = 1; i <= 4; i++){
  129. str += `<span class="pageNum ${'page'+i}" data-page=${i}>${i}</span>`
  130. }
  131. str += `<span class="more" >...</span>`
  132. str += `<span class="pageNum ${'page'+totalPage}" data-page=${totalPage}>${totalPage}</span>`
  133. } else if(activePage > totalPage -3){
  134. str += `<span class="pageNum page1" data-page=1>1</span>`
  135. str += `<span class="more" >...</span>`
  136. str += `<span class="pageNum ${'page'+(totalPage-3)}" data-page=${totalPage -3}>${totalPage -3}</span>`
  137. str += `<span class="pageNum ${'page'+(totalPage-2)}" data-page=${totalPage -2}>${totalPage -2}</span>`
  138. str += `<span class="pageNum ${'page'+(totalPage-1)}" data-page=${totalPage -1}>${totalPage -1}</span>`
  139. str += `<span class="pageNum ${'page'+totalPage}" data-page=${totalPage}>${totalPage}</span>`
  140. } else {
  141. str += `<span class="pageNum page1" data-page=1>1</span>`
  142. str += `<span class="more" >...</span>`
  143. str += `<span class="pageNum ${'page'+(activePage -1)}" data-page=${activePage -1}>${activePage -1}</span>`
  144. str += `<span class="pageNum ${'page'+activePage}" data-page=${activePage}>${activePage}</span>`
  145. str += `<span class="pageNum ${'page'+(activePage +1)}" data-page=${activePage +1}>${activePage +1}</span>`
  146. str += `<span class="more" >...</span>`
  147. str += `<span class="pageNum ${'page'+totalPage}" data-page=${totalPage}>${totalPage}</span>`
  148. }
  149. }
  150. str += `<span class="nextPage"><img class="arrowPage" src=${arrowRight} /></span>`
  151. $('.pagination').html(str)
  152. $('.page' + activePage).addClass('activePage')
  153. $(".pageNum").on("click", function(e){
  154. const activePageNow = Number($(this).attr('data-page'))
  155. getTabData(activePageNow)
  156. })
  157. $(".prePage").on("click", function(e){
  158. let activePageNow = Number($(".activePage").attr('data-page'))
  159. if(activePageNow > 1){
  160. activePageNow--
  161. getTabData(activePageNow)
  162. }
  163. })
  164. $(".nextPage").on("click", function(e){
  165. let activePageNow = Number($(".activePage").attr('data-page'))
  166. if(activePageNow < totalPage){
  167. activePageNow++
  168. getTabData(activePageNow)
  169. }
  170. })
  171. }
  172. $(function () {
  173. $('.datapickerBox').append(`<img class="iconCalen" src=${iconCalenGrey} />`)
  174. $('.iconCalen').on("mouseenter", function (e) {
  175. $(this).attr("src", iconCalenBlue)
  176. })
  177. $('.iconCalen').on("mouseleave", function (e) {
  178. $(this).attr("src", iconCalenGrey)
  179. })
  180. $('.iconCalen').on("click", function (e) {
  181. $(this).parent().find("input").focus()
  182. })
  183. });