tb-print.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>打印报表</title>
  6. <style type="text/css">
  7. /* @page {
  8. size: A4 portrait;
  9. margin: 1.9cm 2.5cm 1.5cm 2.5cm;
  10. } */
  11. .print-btn {
  12. color: white;
  13. background: #2D8CF0;
  14. border: none;
  15. border-radius: 3px;
  16. padding: 5px 10px;
  17. font-size: 10px;
  18. margin: 10px 20px;
  19. cursor: pointer;
  20. }
  21. .content-box {
  22. text-align: center;
  23. height: 500px;
  24. /* width: 794px; */
  25. margin: 0 auto;
  26. font-family: 黑体;
  27. }
  28. h1{
  29. font-weight: bold;
  30. font-size: 32px;
  31. }
  32. table {
  33. border-collapse: collapse;
  34. border-spacing: 0;
  35. border-left: 1px solid #888;
  36. border-top: 1px solid #888;
  37. font-size: 18px;
  38. }
  39. table td{ padding: 10px; border: 1px solid #000;}
  40. .title-top {
  41. margin-top: 248px;
  42. }
  43. </style>
  44. <link rel="stylesheet" href="../../static/sa.css">
  45. <script src="../../static/kj/vue.min.js"></script>
  46. <script src="../../static/kj/element-ui/index.js"></script>
  47. <script src="../../static/print/jquery-2.0.3.js" type="text/javascript"></script>
  48. <script src="../../static/print/print2.js" type="text/javascript"></script>
  49. <script src="../../static/kj/layer/layer.js"></script>
  50. <script src="../../static/sa.js"></script>
  51. </head>
  52. <body>
  53. <div>
  54. <div class="box">
  55. <button class="print-btn" @click="printFn">打印3</button>
  56. <div id="myPrintArea">
  57. <div class="content-box" style="position: relative;">
  58. <div class="header-title" style="text-align: center;">
  59. <h1 style="font-size: 30px;">东兴口岸(二桥)跨境物流中心B区</h1>
  60. <h1 style="font-size: 30px;margin-top: 20px;">过磅单</h1>
  61. </div>
  62. <table style="margin: 0 auto;margin-top: 20px;text-align: center;width: 900px;">
  63. <tr style="padding: 0 0.5px;height: 50px;">
  64. <td style="width: 21%">时间</td>
  65. <td style="width: 29%">{{sa.forDate(nowDay,'yyyy-MM-dd HH:mm')}}</td>
  66. <td style="width: 21%">编号</td>
  67. <td >{{m.no}}</td>
  68. </tr>
  69. <tr style="padding: 0 0.5px;height: 50px;">
  70. <td style="width: 21%">货名</td>
  71. <td style="width: 29%">{{m.goodsName}}</td>
  72. <td style="width: 21%">结算公司</td>
  73. <td style="width: 29%">{{m.companyName}}</td>
  74. </tr>
  75. <tr style="padding: 0 0.5px;height: 50px;">
  76. <td colspan="2">进场</td>
  77. <td colspan="2">出场</td>
  78. </tr>
  79. <tr style="padding: 0 0.5px;height: 50px;">
  80. <td >过磅时间</td>
  81. <td >{{sa.forDate(m.inTime,'HH:mm')}}</td>
  82. <td >过磅时间</td>
  83. <td >{{sa.forDate(m.outTime,'HH:mm')}}</td>
  84. </tr>
  85. <tr style="padding: 0 0.5px;height: 50px;">
  86. <td >车号</td>
  87. <td >{{m.carNo}}</td>
  88. <td >车号</td>
  89. <td >{{m.carNo}}</td>
  90. </tr>
  91. <tr style="padding: 0 0.5px;height: 50px;">
  92. <td >车身重量(吨)</td>
  93. <td >{{m.carWeight}}</td>
  94. <td >总重量 (吨)</td>
  95. <td >{{m.totalWeight}}</td>
  96. </tr>
  97. <tr style="padding: 0 0.5px;height: 50px;">
  98. <td rowspan="2">货物重量 (吨)</td>
  99. <td rowspan="2">{{m.goodsWeight}}</td>
  100. <td >司磅员</td>
  101. <td>{{m.weightPerson}}</td>
  102. </tr>
  103. <tr style="padding: 0 0.5px;height: 50px;">
  104. <td >司机</td>
  105. <td ></td>
  106. </tr>
  107. </table>
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. <script type="text/javascript">
  113. var app = new Vue({
  114. el: '.box',
  115. data: {
  116. nowDay:new Date(),
  117. id: sa.p('id', ''),
  118. dataList: [],
  119. m:{}
  120. },
  121. methods: {
  122. getDataList() {
  123. sa.ajax('/TbCarWeight/getById?id=' + this.id, function(resp) {
  124. this.m=resp.data;
  125. console.log(this.m)
  126. sa.loading("准备打印...");
  127. setTimeout(() => {
  128. sa.hideLoading();
  129. this.printFn();
  130. }, 1000)
  131. }.bind(this))
  132. },
  133. printFn() {
  134. // window.print()
  135. Print('#myPrintArea', {
  136. noPrint: '.noPrint'
  137. });
  138. }
  139. },
  140. mounted() {
  141. this.getDataList();
  142. }
  143. })
  144. </script>
  145. </body>
  146. </html>