dayStatsPrint.html 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  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 landscape;
  9. margin: 19mm 25mm 15mm 25mm;
  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: 794px;
  24. width: 1123px;
  25. margin: 0 auto;
  26. }
  27. table {
  28. border-collapse: collapse;
  29. border-spacing: 0;
  30. border-left: 1px solid #888;
  31. border-top: 1px solid #888;
  32. }
  33. th,
  34. td {
  35. border-right: 1px solid #888;
  36. border-bottom: 1px solid #888;
  37. word-break: break-all;
  38. }
  39. th {
  40. font-weight: bold;
  41. }
  42. .title-top {
  43. margin-top: 248px;
  44. }
  45. </style>
  46. <link rel="stylesheet" href="../../static/sa.css">
  47. <script src="../../static/kj/vue.min.js"></script>
  48. <script src="../../static/kj/element-ui/index.js"></script>
  49. <script src="../../static/print/jquery-2.0.3.js" type="text/javascript"></script>
  50. <script src="../../static/print/print2.js" type="text/javascript"></script>
  51. <script src="../../static/kj/layer/layer.js"></script>
  52. <script src="../../static/sa.js"></script>
  53. </head>
  54. <body>
  55. <div>
  56. <div class="box">
  57. <button class="print-btn" @click="printFn">打印</button>
  58. <div id="myPrintArea" style="position: relative;">
  59. <div class="content-box" style="position: relative;" v-for="(item,index) in dataList" :class="index>0?'title-top':''"
  60. :key="index">
  61. <div class="header-title" style="text-align: center;" v-if="index==0">
  62. <h2 style="font-size: 20px;">东兴口岸(二桥)进口货物集散区 (A1地块)(日)统计表</h2>
  63. </div>
  64. <table style="margin-top: 20px;text-align: center;width: 1123px;">
  65. <tr style="height: 60px;">
  66. <th colspan="7">单位:广西东兴北投口岸投资有限公司</th>
  67. <th colspan="4">金额单位:元</th>
  68. <th colspan="6" style="padding: 0 1px;">期间:{{item.time}}</th>
  69. </tr>
  70. <tr style="font-weight: 500;">
  71. <td style="width: 60px;" rowspan="2">日期</td>
  72. <td style="width: 60px;" rowspan="2"> 收费项目</td>
  73. <td style="width: 30px;" rowspan="2">数量</td>
  74. <td style="width: 60px;" rowspan="2">总价</td>
  75. <td style="width: 70px;" rowspan="2">不含税金额</td>
  76. <td style="width: 30px;" rowspan="2">税率</td>
  77. <td style="width: 60px;" rowspan="2">税款</td>
  78. <td colspan="4">收费方式</td>
  79. <td style="width: 60px;" rowspan="2">开单员</td>
  80. <td style="width: 60px;" rowspan="2">复核员</td>
  81. <td style="width: 75px;" rowspan="2">统计稽查员</td>
  82. <td style="width: 75px;" rowspan="2">部门负责人</td>
  83. </tr>
  84. <tr style="font-weight: 500;">
  85. <td style="width: 60px;">微信</td>
  86. <td style="width: 40px;">支付宝</td>
  87. <td style="width: 40px;">银联</td>
  88. <td style="width: 55px;">预存金额</td>
  89. </tr>
  90. <tr v-for="cel in item.list" :key="cel.index" style="height: 55px;font-size: 12px;">
  91. <td>{{cel.dayTime}}</td>
  92. <td>{{cel.feeType}}</td>
  93. <td>{{cel.num}}</td>
  94. <td>{{cel.taxMoney}}</td>
  95. <td>{{cel.noTaxMoney}}</td>
  96. <td>{{cel.taxRate}}</td>
  97. <td>{{cel.taxes}}</td>
  98. <td>{{cel.wxPrice}}</td>
  99. <td>{{cel.aliPrice}}</td>
  100. <td>{{cel.cardPrice}}</td>
  101. <td>{{cel.yuePrice}}</td>
  102. <td>{{cel.kaiDanPerson}}</td>
  103. <td>{{cel.diaoDuPerson}}</td>
  104. <td>{{cel.jiChaPerson}}</td>
  105. <td>{{cel.judgeBy}}</td>
  106. </tr>
  107. <tr style="height: 60px;font-size: 12px;" v-if="index==dataList.length-1">
  108. <td colspan="2">合计</td>
  109. <td>{{total.num}}</td>
  110. <td>{{total.totalMoney}}</td>
  111. <td>{{(total.totalNoTaxMoney).toFixed(2)}}</td>
  112. <td>-</td>
  113. <td>{{(total.totalTaxes).toFixed(2)}}</td>
  114. <td>{{total.totalWxPrice}}</td>
  115. <td>0</td>
  116. <td>0</td>
  117. <td>{{total.totalYuePrice}}</td>
  118. <td>-</td>
  119. <td>-</td>
  120. <td>-</td>
  121. <td>-</td>
  122. </tr>
  123. </table>
  124. <span style="position: absolute;top: 780px;left: 1050px">{{index+1}}/{{dataList.length}}</span>
  125. </div>
  126. </div>
  127. </div>
  128. </div>
  129. <script type="text/javascript">
  130. var app = new Vue({
  131. el: '.box',
  132. data: {
  133. p: {
  134. "beginDay": sa.p('beginDay', ''),
  135. "endDay": sa.p('endDay', ''),
  136. "feeType": sa.p('feeType', '')
  137. },
  138. dataList: [],
  139. total:{
  140. totalAliPrice: 0,
  141. totalCardPrice: 0,
  142. totalMoney: 0,
  143. totalNoTaxMoney: 0,
  144. totalTaxes: 0,
  145. totalWxPrice: 0,
  146. totalYuePrice: 0,
  147. num:0
  148. }
  149. },
  150. methods: {
  151. getDataList() {
  152. let data = {
  153. isMonth: '',
  154. isYear: '',
  155. year: '',
  156. beginMonth: '',
  157. endMonth: '',
  158. beginDay: this.p.beginDay,
  159. endDay: this.p.endDay,
  160. feeType: this.p.feeType
  161. }
  162. sa.ajax('/TbFeeStatistics/prePrint', data, function(resp) {
  163. this.total=resp.data;
  164. var list = resp.data.list;
  165. let len = list.length;
  166. let child = [];
  167. let dataList = [];
  168. let wxTotal = 0;
  169. let yuePrice = 0;
  170. let totalNum = 0;
  171. let totalMoney = 0;
  172. let totalTaxMoney = 0;
  173. let totalNoTaxMoney = 0;
  174. for (i = 0; i < len; i++) {
  175. let item = list[i];
  176. wxTotal += item.wxPrice;
  177. yuePrice += item.yuePrice;
  178. totalNum =parseFloat(totalNum)+ parseFloat(item.num);
  179. totalMoney += item.taxMoney;
  180. totalTaxMoney += item.taxes;
  181. totalNoTaxMoney += item.noTaxMoney;
  182. child.push(item);
  183. if(child.length == 11&&dataList.length==0){
  184. let title = {
  185. time: this.p.ids ? "勾选打印" : this.p.beginTime ? this.p.beginTime +
  186. '至' + this.p.endTime : '所有时间',
  187. list: child
  188. }
  189. dataList.push(title);
  190. child = [];
  191. }
  192. if (child.length == 12 || i == len - 1) {
  193. let title = {
  194. time: this.p.beginDay ? this.p.beginDay + '至' + this.p.endDay :
  195. '所有时间',
  196. list: child,
  197. wxTotal: wxTotal,
  198. yuePrice: yuePrice,
  199. totalNum: totalNum,
  200. totalMoney: totalMoney,
  201. totalTaxMoney: totalTaxMoney,
  202. totalNoTaxMoney: totalNoTaxMoney
  203. }
  204. dataList.push(title);
  205. child = [];
  206. }
  207. }
  208. this.total.num=totalNum;
  209. this.dataList = dataList;
  210. sa.loading("准备打印...");
  211. setTimeout(() => {
  212. this.printFn();
  213. sa.hideLoading();
  214. }, 2000)
  215. }.bind(this))
  216. },
  217. printFn() {
  218. Print('#myPrintArea', {
  219. noPrint: '.noPrint'
  220. });
  221. }
  222. },
  223. mounted() {
  224. this.getDataList();
  225. }
  226. })
  227. </script>
  228. </body>
  229. </html>