showSerial.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. //获取前缀
  2. const serialPrefix = document.getElementById("serial_prefix").innerText;
  3. let oldShowSerialContent = $("#head").attr("content");
  4. const showSerialContent = "width=device-width, initial-scale=1,maximum-scale=10,minimum-scale=0.1,user-scalable=no";
  5. //js添加html
  6. if (serialPrefix !== null && serialPrefix.length > 0) {
  7. const serialBtn = $(".table-serial-btn")
  8. if (serialBtn && serialBtn.length>0) {
  9. serialBtn.removeClass("none");
  10. } else {
  11. const scale = getScale();
  12. let transform = 0.84;
  13. let bottom = 20;
  14. if (scale !== 1) {
  15. transform = 0.84 / scale;
  16. bottom = 1 / scale * 20 + (1 / scale - 1) * 36 / 2;
  17. }
  18. let pageDiv = '<div style=" position: fixed;\n' +
  19. ' right: 0;\n' +
  20. ' margin-right: 130px;\n' +
  21. ' width: 260px;\n' +
  22. 'transform:scale(' + transform + ');bottom:' + bottom + 'px; ">' +
  23. '<button class="table-serial-btn">选择</button> ' +
  24. '</div>'
  25. $(".condition-box").append(pageDiv);
  26. }
  27. const showSerialHtml = '<div class="serial-menu none"> ' +
  28. '<div class="serial-content">' + ' </div>' +
  29. '<div class="serial-box"><button class="serial-btn cancel">关闭</button> <button class="serial-btn determine">确定</button> </div>'
  30. + ' </div>';
  31. $("body").append(showSerialHtml);
  32. }
  33. //显示序号
  34. function showSerial() {
  35. const serialContent = $(".serial-content")
  36. serialContent.html("");
  37. const table = $('#table')
  38. let qtTableTop = table.offset().top;
  39. let qtTableHeight = table.outerHeight(true);
  40. let winScrollTop = $(window).scrollTop();
  41. let winHeight = $(window).height();
  42. //遍历
  43. $('#tableContent tr').each(function () {
  44. const serialNumber = $(this).children().eq(0).html();
  45. if (serialNumber !== null && serialNumber !== undefined && serialNumber.length > 0 && serialNumber !== "&nbsp;") {
  46. let cardOffsetTop = $(this).offset().top;
  47. let cardOuterHeight = $(this).outerHeight(true);
  48. if ((cardOffsetTop > winScrollTop - cardOuterHeight + qtTableTop + qtTableHeight) &&
  49. (cardOffsetTop < winScrollTop + winHeight - qtTableHeight)) {
  50. const serialValue = $(this).data("value");
  51. if (serialValue !== null && serialValue !== undefined) {
  52. serialContent.append('<button class="serial-btn" data-value=' + serialValue + '>' + serialNumber + '</button>');
  53. }
  54. }
  55. }
  56. });
  57. const yu = 7;
  58. if (yu > 0) {
  59. for (let x = 0; x < yu; x++) serialContent.append('<button class="serial-btn visibility-hidden"></button>');
  60. }
  61. //选择选项
  62. $(".serial-content .serial-btn").click(function () {
  63. if (serialPrefix == null || serialPrefix.length <= 0) {
  64. return;
  65. }
  66. const content = $(this).data("value");
  67. if (content == null || content.length <= 0) {
  68. return;
  69. }
  70. alert(serialPrefix + content);
  71. });
  72. }
  73. //点击关闭
  74. function closeSerial() {
  75. $(".condition-box").removeClass("none");
  76. $(".serial-menu").addClass("none");
  77. $("#head").attr("content", oldShowSerialContent);
  78. alert("Closed@closeSerial");
  79. }
  80. //点击显示
  81. $(".table-serial-btn").click(function () {
  82. if (serialPrefix == null || serialPrefix.length <= 0) {
  83. return;
  84. }
  85. const head = $("#head");
  86. oldShowSerialContent = head.attr("content");
  87. showSerial();
  88. head.attr("content", showSerialContent);
  89. $(".condition-box").addClass("none");
  90. $(".serial-menu").removeClass("none");
  91. alert("Close@closeSerial");
  92. });
  93. $(".serial-box .cancel").click(function () {
  94. closeSerial();
  95. });
  96. $(".serial-box .determine").click(function () {
  97. closeSerial();
  98. });