printModel.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. <template>
  2. <!-- 发货打印 -->
  3. <div style="position:absolute;left:-10000px;top:-10000px;height:0;overflow: hidden;">
  4. <div id="sendGood-print" v-if="financeBookList&&financeBookList.length">
  5. <div
  6. v-for="(fcItem,index) in financeBookList"
  7. class="sendGood-print-box"
  8. :key="index+'-fcitem'"
  9. style="width:564pt;margin:0 auto;">
  10. <table
  11. ref="printBox"
  12. cellspacing="0"
  13. cellpadding="0"
  14. style="border-collapse: collapse;width: 564pt;font-size:14px;">
  15. <tr>
  16. <td>
  17. <div class="print-box" style="width: 564pt;margin-left:1.5pt;">
  18. <div style="text-align:center;margin:15pt 0 5pt;font-size:22px;font-weight: bold;">收款通知单</div>
  19. <div>
  20. <div>
  21. <table border="1" style="width: 564pt;border-collapse: collapse;text-align: center;">
  22. <tr>
  23. <th style="line-height: 20pt;width: 56pt;background:#f6f6f6;">日期</th>
  24. <th style="line-height: 20pt;width: 62pt;background:#f6f6f6;">客户名称</th>
  25. <th style="line-height: 20pt;width: 62pt;background:#f6f6f6;">营业执照名称</th>
  26. <th style="line-height: 20pt;width: 54pt;background:#f6f6f6;">订单金额</th>
  27. <th style="line-height: 20pt;width: 54pt;background:#f6f6f6;">收款金额</th>
  28. <th style="line-height: 20pt;width: 54pt;background:#f6f6f6;">使用授信</th>
  29. <th style="line-height: 20pt;width: 54pt;background:#f6f6f6;">余款抵扣</th>
  30. <th style="line-height: 20pt;width: 54pt;background:#f6f6f6;">汇入银行</th>
  31. <th style="line-height: 20pt;width: 54pt;background:#f6f6f6;">足额打款</th>
  32. <th style="line-height: 20pt;width: 60pt;background:#f6f6f6;">说明</th>
  33. </tr>
  34. <tr v-for="item in fcItem.subList" :key="item.bookDetailSn">
  35. <td style="padding:3pt;width: 50pt;">{{ moment(item.receiptDate).format('YYYY/MM/DD') }}</td>
  36. <td style="padding:3pt;width: 56pt;text-align:left;">
  37. {{ item.payerName }}
  38. <div>
  39. {{ item.dealerEntity ? item.dealerEntity.kdMidCustomerFnumber : '' }}
  40. </div>
  41. </td>
  42. <td style="padding:3pt;width: 56pt;text-align:left;">
  43. {{ item.payerAccountInfo }}
  44. </td>
  45. <td style="padding:3pt;width: 48pt;text-align:center;">
  46. {{ item.orderAmount?item.orderAmount.toFixed(2):'0.00' }}
  47. </td>
  48. <td style="padding:3pt;width: 48pt;text-align:center;">
  49. {{ item.receiptAmount?item.receiptAmount.toFixed(2):'0.00' }}
  50. </td>
  51. <td style="padding:3pt;width: 48pt;text-align:center;">
  52. {{ getTotal(item.detailItemUseList||[]) }}
  53. </td>
  54. <td style="padding:3pt;width: 48pt;text-align:center;">
  55. {{ item.balanceAmount?item.balanceAmount.toFixed(2):'0.00' }}
  56. </td>
  57. <td style="padding:3pt;width: 48pt;">
  58. {{ item.bankAccount }}<br>
  59. {{ item.bankName }}
  60. </td>
  61. <td style="padding:3pt;width: 48pt;">{{ item.fullPaymentFlagDictValue }}</td>
  62. <td style="padding:3pt;width: 54pt;word-break:break-all;">{{ item.explainInfo }}</td>
  63. </tr>
  64. </table>
  65. <div style="padding:5pt 0;border-bottom: 1px solid #333;">使用授信明细:{{ fcItem.detail||'暂无。' }}</div>
  66. <div style="padding:5pt 0;">
  67. 审批人员:{{ fcItem.audit||'暂无。' }}
  68. </div>
  69. </div>
  70. </div>
  71. </div>
  72. </td>
  73. </tr>
  74. </table>
  75. </div>
  76. </div>
  77. <!-- <div class="btn-box" style="display:flex;align-item:center;justify-content: center;">
  78. <a-button @click="handleCommonCancel">取消</a-button>
  79. <a-button :loading="spinning" type="primary" @click="handleCommonOk">立即打印</a-button>
  80. </div> -->
  81. </div>
  82. </template>
  83. <script>
  84. import { jGPlPrint } from '@/libs/JGPrint.js'
  85. import moment from 'moment'
  86. export default {
  87. data () {
  88. return {
  89. // spinning: false,
  90. detail: null,
  91. financeBookList: [],
  92. printNums: []
  93. }
  94. },
  95. methods: {
  96. moment,
  97. getTotal (data) {
  98. let ret = 0
  99. data.map(item => {
  100. ret = ret + item.itemAmount
  101. delete item.id
  102. })
  103. return ret.toFixed(2)
  104. },
  105. handleCommonOk () {
  106. const _this = this
  107. const html = document.getElementsByClassName('sendGood-print-box')
  108. const printCons = []
  109. for (let i = 0; i < html.length; i++) {
  110. const h = html[i].clientHeight
  111. printCons.push({
  112. h: h,
  113. t: html[i].innerHTML
  114. })
  115. }
  116. // 排序从小到大
  117. printCons.sort((a, b) => {
  118. return a['h'] - b['h']
  119. })
  120. const htmlStr = []
  121. for (let i = 0; i < printCons.length; i++) {
  122. if (printCons[i].h > 560) {
  123. htmlStr.push('')
  124. }
  125. htmlStr.push(printCons[i].t)
  126. }
  127. // html, type, callback, printLogParams
  128. jGPlPrint(htmlStr, 'preview', function (res) {
  129. _this.handleCommonCancel()
  130. _this.$emit('printOk')
  131. }, this.printNums, this.financeBookList)
  132. },
  133. getData (data, list) {
  134. console.log(data, list)
  135. this.financeBookList = data
  136. list.map(item => {
  137. this.printNums.push({
  138. billType: 'FINANCE_BOOK_DETAIL',
  139. billSn: item.bookDetailSn,
  140. billNo: item.bookNo,
  141. printType: '收款打印'
  142. })
  143. })
  144. // 打印预览
  145. this.$nextTick(() => {
  146. this.handleCommonOk()
  147. })
  148. },
  149. handleCommonCancel () {
  150. this.$emit('cancel')
  151. this.clearData()
  152. },
  153. clearData () {
  154. this.detail = null
  155. this.financeBookList = []
  156. this.printNums = []
  157. }
  158. }
  159. }
  160. </script>
  161. <style>
  162. </style>