printModel.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <!-- 发货打印 -->
  3. <div>
  4. <a-spin :spinning="spinning" tip="Loading..." style="height: 60vh;overflow: auto;width: 100%;padding:20px 40px;">
  5. <div id="sendGood-print" v-if="financeBookList&&financeBookList.length">
  6. <table
  7. v-for="(fcItem,index) in financeBookList"
  8. :key="index+'-fcitem'"
  9. ref="printBox"
  10. cellspacing="0"
  11. cellpadding="0"
  12. style="border-collapse: collapse;width: 562pt;margin:0 auto;font-size:14px;">
  13. <tr>
  14. <td>
  15. <div class="print-box" style="width: 562pt;margin:0 auto;">
  16. <h1 style="text-align:center;margin:0.2cm 0">收款通知单</h1>
  17. <div>
  18. <div>
  19. <table border="1" style="width: 562pt;border-collapse: collapse;text-align: center;">
  20. <tr>
  21. <th style="line-height: 20pt;width: 50pt;background:#f6f6f6;">日期</th>
  22. <th style="line-height: 20pt;width: 82pt;background:#f6f6f6;">客户名称</th>
  23. <th style="line-height: 20pt;width: 60pt;background:#f6f6f6;">订单金额</th>
  24. <th style="line-height: 20pt;width: 60pt;background:#f6f6f6;">收款金额</th>
  25. <th style="line-height: 20pt;width: 60pt;background:#f6f6f6;">使用授信</th>
  26. <th style="line-height: 20pt;width: 60pt;background:#f6f6f6;">余款抵扣</th>
  27. <th style="line-height: 20pt;width: 60pt;background:#f6f6f6;">汇入银行</th>
  28. <th style="line-height: 20pt;width: 60pt;background:#f6f6f6;">足额打款</th>
  29. <th style="line-height: 20pt;width: 70pt;background:#f6f6f6;">说明</th>
  30. </tr>
  31. <tr v-for="item in fcItem.subList" :key="item.bookDetailSn">
  32. <td style="padding:3pt;width: 44pt;">{{ moment(item.receiptDate).format('M月D日') }}</td>
  33. <td style="padding:3pt;width: 76pt;text-align:left;">
  34. {{ item.payerName }}
  35. <div>
  36. {{ item.dealerEntity ? item.dealerEntity.kdMidCustomerFnumber : '' }}
  37. </div>
  38. </td>
  39. <td style="padding:3pt;width: 54pt;text-align:center;">
  40. {{ item.orderAmount?item.orderAmount.toFixed(2):'0.00' }}
  41. </td>
  42. <td style="padding:3pt;width: 54pt;text-align:center;">
  43. {{ item.receiptAmount?item.receiptAmount.toFixed(2):'0.00' }}
  44. </td>
  45. <td style="padding:3pt;width: 54pt;text-align:center;">
  46. {{ getTotal(item.detailItemUseList||[]) }}
  47. </td>
  48. <td style="padding:3pt;width: 54pt;text-align:center;">
  49. {{ item.balanceAmount?item.balanceAmount.toFixed(2):'0.00' }}
  50. </td>
  51. <td style="padding:3pt;width: 54pt;">
  52. {{ item.bankAccount }}<br>
  53. {{ item.bankName }}
  54. </td>
  55. <td style="padding:3pt;width: 54pt;">{{ item.fullPaymentFlagDictValue }}</td>
  56. <td style="padding:3pt;width: 84pt;word-break:break-all;">{{ item.remarks }}</td>
  57. </tr>
  58. </table>
  59. <div style="line-height: 30pt;border-bottom: 1px solid #666;">使用授信明细:{{ fcItem.detail }}</div>
  60. <div style="line-height: 30pt;">审批人员:</div>
  61. </div>
  62. </div>
  63. </div>
  64. </td>
  65. </tr>
  66. </table>
  67. </div>
  68. </a-spin>
  69. <div class="btn-box" style="display:flex;align-item:center;justify-content: center;">
  70. <a-button @click="handleCommonCancel">取消</a-button>
  71. <a-button :loading="spinning" type="primary" @click="handleCommonOk">立即打印</a-button>
  72. </div>
  73. </div>
  74. </template>
  75. <script>
  76. import { jGPrint } from '@/libs/JGPrint.js'
  77. import moment from 'moment'
  78. export default {
  79. data () {
  80. return {
  81. spinning: false,
  82. detail: null,
  83. financeBookList: []
  84. }
  85. },
  86. methods: {
  87. moment,
  88. getTotal (data) {
  89. let ret = 0
  90. data.map(item => {
  91. ret = ret + item.itemAmount
  92. delete item.id
  93. })
  94. return ret.toFixed(2)
  95. },
  96. handleCommonOk () {
  97. const _this = this
  98. const html = document.getElementById('sendGood-print').innerHTML
  99. _this.spinning = true
  100. // html, type, callback, printLogParams
  101. jGPrint(html, 'print', function (res) {
  102. _this.spinning = false
  103. _this.handleCommonCancel()
  104. _this.$emit('printOk')
  105. })
  106. },
  107. getData (data, flag) {
  108. console.log(data)
  109. this.financeBookList = data
  110. },
  111. handleCommonCancel () {
  112. this.$emit('cancel')
  113. this.detail = null
  114. this.financeBookList = []
  115. },
  116. clearData () {
  117. this.detail = null
  118. this.financeBookList = []
  119. }
  120. }
  121. }
  122. </script>
  123. <style>
  124. </style>