balance-print.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. <!DOCTYPE html
  2. PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>打印收费明细</title>
  7. <style type="text/css">
  8. @page {
  9. size: A4 portrait;
  10. margin: 19mm 25mm 15mm 25mm;
  11. }
  12. .print-btn {
  13. color: white;
  14. background: #2D8CF0;
  15. border: none;
  16. border-radius: 3px;
  17. padding: 5px 10px;
  18. font-size: 10px;
  19. margin: 10px 20px;
  20. cursor: pointer;
  21. }
  22. .content-box {
  23. text-align: center;
  24. height: 1123px;
  25. width: 794px;
  26. margin: 0 auto;
  27. }
  28. table {
  29. border-collapse: collapse;
  30. border-spacing: 0;
  31. border-left: 1px solid #888;
  32. border-top: 1px solid #888;
  33. }
  34. th,
  35. td {
  36. border-right: 1px solid #888;
  37. border-bottom: 1px solid #888;
  38. word-break: break-all;
  39. padding: 0 2px;
  40. }
  41. th {
  42. /* font-weight: bold; */
  43. }
  44. .title-top {
  45. margin-top: 248px;
  46. }
  47. </style>
  48. <link rel="stylesheet" href="../../static/sa.css">
  49. <script src="../../static/kj/vue.min.js"></script>
  50. <script src="../../static/kj/element-ui/index.js"></script>
  51. <script src="../../static/print/jquery-2.0.3.js" type="text/javascript"></script>
  52. <script src="../../static/print/print2.js" type="text/javascript"></script>
  53. <script src="../../static/kj/layer/layer.js"></script>
  54. <script src="../../static/sa.js"></script>
  55. </head>
  56. <body>
  57. <div>
  58. <div class="box">
  59. <button class="print-btn" @click="printFn">打印</button>
  60. <div id="myPrintArea" style="position: relative;">
  61. <div class="content-box" style="position: relative;" v-for="(item,index) in dataList"
  62. :key="index" :class="index>0?'title-top':''" >
  63. <div class="header-title" style="text-align: center;" v-if="index==0">
  64. <span
  65. style="font-size: 20px;font-weight: 500;font-family: 黑体;">东兴口岸(二桥)进口货物集散区(A1地块)预存款余额表</span>
  66. </div>
  67. <table style="margin: 0 auto;text-align: center;width: 790px;" >
  68. <div
  69. style="text-align: left;width: 790px;margin: auto;padding: 5px 0;font-family: 黑体;font-weight: 500;">
  70. <span colspan="9">单位:广西东兴北投口岸投资有限公司
  71. <span style="margin-left: 10px;">期间:{{item.time}}</span>
  72. <span style="margin-left: 10px;">金额单位:元</span></span>
  73. </div>
  74. <tr style="height: 60px;font-size:10px;">
  75. <th style="min-width: 30px;">序号</th>
  76. <th style="width: 180px;">企业名称</th>
  77. <th style="min-width: 60px;"> 期初余额</th>
  78. <th style="min-width: 60px;">本期充值</th>
  79. <th style="min-width: 60px;">本期扣除</th>
  80. <th style="min-width: 60px;">余额退款</th>
  81. <th style="min-width: 60px;">异常退款</th>
  82. <th style="width: 70px;">期末余额</th>
  83. <th style="width: 110px;">统计稽核员</th>
  84. <th style="width: 100px;">复核员</th>
  85. <th style="width: 100px;">开单员</th>
  86. </tr>
  87. <tr v-for="(cel,i) in item.list" :key="cel.index" style="height:60px;font-size: 10px;">
  88. <td>{{i+1}}</td>
  89. <td>{{cel.customerName}}</td>
  90. <td>{{cel.beginMoney}}</td>
  91. <td>{{cel.chargeMoney}}</td>
  92. <td>{{cel.deuctionMoney}}</td>
  93. <td>{{cel.balanceRefundMoney}}</td>
  94. <td>{{cel.errorRefundMoney}}</td>
  95. <td>{{cel.endMoney}}</td>
  96. <td></td>
  97. <td></td>
  98. <td></td>
  99. </tr>
  100. <tr style="height: 60px;padding: 0 0.5px;" v-if="index==dataList.length-1">
  101. <td></td>
  102. <td>合计</td>
  103. <td>{{totalInit}}</td>
  104. <td>{{totalCharge}}</td>
  105. <td>{{totalDeuctionMoney}}</td>
  106. <td>{{totalRefundMoney}}</td>
  107. <td>{{totalErrorRefund}}</td>
  108. <td>{{totalEnd}}</td>
  109. <td></td>
  110. <td></td>
  111. <td></td>
  112. </tr>
  113. </table>
  114. <span style="position: absolute;top: 1250px;left: 750px">{{index+1}}/{{dataList.length}}</span>
  115. </div>
  116. </div>
  117. </div>
  118. </div>
  119. <script type="text/javascript">
  120. var app = new Vue({
  121. el: '.box',
  122. data: {
  123. p: {
  124. "beginTime": sa.p('bDay', ''),
  125. "endTime": sa.p('eDay', ''),
  126. "customerName": sa.p('customerName', '')
  127. },
  128. dataList: [],
  129. allDayFee: 0,
  130. allDayTaxes: 0,
  131. allDayNoTaxFee: 0,
  132. totalCharge:0,
  133. totalInit:0,
  134. totalDeuctionMoney:0,
  135. totalRefundMoney:0,
  136. totalErrorRefund:0,
  137. totalEnd:0
  138. },
  139. methods: {
  140. getDataList() {
  141. sa.ajax('/TbAccount/getBalance/list', this.p, function(resp) {
  142. var list = resp.data;
  143. let len = list.length;
  144. let child = [];
  145. let dataList = [];
  146. let totalCharge=0;
  147. let totalInit=0;
  148. let totalDeuctionMoney=0;
  149. let totalRefundMoney=0;
  150. let totalErrorRefund=0;
  151. let totalEnd=0;
  152. for (i = 0; i < len; i++) {
  153. let item = list[i];
  154. child.push(item);
  155. totalInit+=item.beginMoney;
  156. totalCharge+=item.chargeMoney;
  157. totalDeuctionMoney+=item.deuctionMoney;
  158. totalRefundMoney+=item.balanceRefundMoney;
  159. totalErrorRefund+=item.errorRefundMoney;
  160. totalEnd+=item.endMoney;
  161. if (child.length == 18 || i == len - 1) {
  162. let title = {
  163. time: this.p.beginTime + '至' + this.p.endTime,
  164. list: child
  165. }
  166. dataList.push(title);
  167. child = [];
  168. }
  169. }
  170. this.dataList = dataList;
  171. this.totalCharge=totalCharge;
  172. this.totalInit=totalInit;
  173. this.totalDeuctionMoney=totalDeuctionMoney;
  174. this.totalErrorRefund=totalErrorRefund;
  175. this.totalRefundMoney=totalRefundMoney;
  176. this.totalEnd=totalEnd;
  177. // sa.loading("准备打印...");
  178. // setTimeout(() => {
  179. // this.printFn();
  180. // sa.hideLoading();
  181. // }, 2000)
  182. }.bind(this))
  183. },
  184. printFn() {
  185. Print('#myPrintArea', {
  186. noPrint: '.noPrint'
  187. });
  188. }
  189. },
  190. mounted() {
  191. this.getDataList();
  192. }
  193. })
  194. </script>
  195. </body>
  196. </html>