printModel.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  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="detail" >
  6. <table ref="printBox" cellspacing="0" cellpadding="0" style="border-collapse: collapse;width: 562pt;margin:0 auto;">
  7. <tr>
  8. <td>
  9. <div class="print-box" style="width: 562pt;font-size: 10pt;margin:0 auto;">
  10. <h1 style="text-align:center;margin:0.5cm 0">销 售 收 款 凭 证</h1>
  11. <div style="display:flex;align-item:center;justify-content: space-between;flex-wrap: wrap;line-height: 20pt;">
  12. <div style="width: 50%;">客户名称:{{ detail.settleClientName||'--' }}</div>
  13. <div style="width: 50%;">支付方式:{{ detail.settleStyleDictValue||'--' }}</div>
  14. <div style="width: 50%;">收货客户名称:{{ detail.receiverName||'--' }}</div>
  15. <div style="width: 50%;">发货编号:{{ detail.sendNo||'--' }}</div>
  16. <div style="width: 50%;">销售单号:{{ detail.bizNo||'--' }}</div>
  17. <div style="width: 50%;">下推单号:{{ detail.dispatchBillNo||'--' }}</div>
  18. <div style="width: 50%;">收款类型:{{ detail.keepTypeDictValue||'--' }}</div>
  19. <div style="width: 50%;">收款时间:{{ detail.settleTime||'--' }}</div>
  20. <div style="width: 50%;">收款人:{{ detail.settlePersonName||'--' }}</div>
  21. </div>
  22. <div v-for="(fcItem,index) in financeBookList" :key="fcItem.bookSn">
  23. <div style="line-height: 30pt;">共 {{ financeBookList.length }} 个财务收款单,以下是第 {{ index+1 }} 个</div>
  24. <div>
  25. <table border="1" style="width: 562pt;border-collapse: collapse;text-align: center;">
  26. <tr>
  27. <th style="line-height: 24pt;width: 50pt;background:#f6f6f6;">序号</th>
  28. <th style="line-height: 24pt;width: 60pt;background:#f6f6f6;">日期</th>
  29. <th style="line-height: 24pt;width: 100pt;background:#f6f6f6;">客户信息</th>
  30. <th style="line-height: 24pt;width: 100pt;background:#f6f6f6;">收款信息</th>
  31. <th style="line-height: 24pt;width: 97pt;background:#f6f6f6;">汇入银行</th>
  32. <th style="line-height: 24pt;width: 60pt;background:#f6f6f6;">足额打款</th>
  33. <th style="line-height: 24pt;width: 95pt;background:#f6f6f6;">备注</th>
  34. </tr>
  35. <tr v-for="(item,dindex) in fcItem.financeBookDetailList" :key="item.bookDetailSn">
  36. <td style="padding:3pt;width: 44pt;">{{ dindex+1 }}</td>
  37. <td style="padding:3pt;width: 54pt;">{{ moment(item.receiptDate).format('M月D日') }}</td>
  38. <td style="padding:3pt;width: 94pt;">
  39. {{ item.dealerEntity.dealerName }}<br>
  40. {{ item.dealerEntity.kdMidCustomerFnumber }}<br>
  41. {{ item.dealerEntity.licenseName }}
  42. </td>
  43. <td style="padding:3pt;width: 94pt;">
  44. 订单金额:{{ item.orderAmount }}<br>
  45. 收款金额:{{ item.receiptAmount }}<br>
  46. 使用授信:{{ getTotal(item.detailItemUseList||[]) }}<br>
  47. 授信还款:{{ getTotal(item.detailItemPayList||[]) }}<br>
  48. 余款抵扣:{{ item.balanceAmount }}<br>
  49. 跨月打款:{{ item.nextMonthAmount }}
  50. </td>
  51. <td style="padding:3pt;width: 91pt;">
  52. {{ item.bankAccount }}<br>
  53. {{ item.bankName }}<br>
  54. </td>
  55. <td style="padding:3pt;width: 54pt;">{{ item.fullPaymentFlagDictValue }}</td>
  56. <td style="padding:3pt;width: 89pt;word-break:break-all;">{{ item.remarks }}</td>
  57. </tr>
  58. </table>
  59. <div style="line-height: 30pt;">附:钉钉审批明细</div>
  60. <table border="1" style="width: 562pt;border-collapse: collapse;text-align: center;">
  61. <tr>
  62. <th style="line-height: 24pt;width: 110pt;background:#f6f6f6;">人员姓名</th>
  63. <th style="line-height: 24pt;width: 110pt;background:#f6f6f6;">人员类型</th>
  64. <th style="line-height: 24pt;width: 110pt;background:#f6f6f6;">状态</th>
  65. <th style="line-height: 24pt;width: 117pt;background:#f6f6f6;">审批意见</th>
  66. <th style="line-height: 24pt;width: 115pt;background:#f6f6f6;">操作时间</th>
  67. </tr>
  68. <tr v-for="(item,six) in fcItem.processInstanceTaskList" :key="six+'-processInstanceTask'">
  69. <td style="padding:3pt;width: 104pt;">{{ item.userName||'--' }}</td>
  70. <td style="padding:3pt;width: 104pt;">{{ item.userType||'--' }}</td>
  71. <td style="padding:3pt;width: 104pt;">{{ item.state||'--' }}</td>
  72. <td style="padding:3pt;width: 111pt;">{{ item.remark||'--' }}</td>
  73. <td style="padding:3pt;width: 109pt;">{{ item.date||'--' }}</td>
  74. </tr>
  75. </table>
  76. </div>
  77. </div>
  78. </div>
  79. </td>
  80. </tr>
  81. </table>
  82. </div>
  83. </a-spin>
  84. <div class="btn-box" style="display:flex;align-item:center;justify-content: center;" v-if="detail">
  85. <a-button @click="handleCommonCancel">取消</a-button>
  86. <a-button :loading="spinning" type="primary" @click="handleCommonOk">立即打印</a-button>
  87. </div>
  88. </div>
  89. </template>
  90. <script>
  91. import { jGPrint } from '@/libs/JGPrint.js'
  92. import moment from 'moment'
  93. import { settleReceiptPrintFindBySn } from '@/api/settleReceipt.js'
  94. export default {
  95. data () {
  96. return {
  97. spinning: false,
  98. detail: null,
  99. financeBookList: []
  100. }
  101. },
  102. methods: {
  103. moment,
  104. getTotal (data) {
  105. let ret = 0
  106. data.map(item => {
  107. ret = ret + item.itemAmount
  108. delete item.id
  109. })
  110. return ret.toFixed(2)
  111. },
  112. handleCommonOk () {
  113. const _this = this
  114. const html = document.getElementById('sendGood-print').innerHTML
  115. _this.spinning = true
  116. // html, type, callback, printLogParams
  117. jGPrint(html, 'print', function (res) {
  118. _this.spinning = false
  119. _this.handleCommonCancel()
  120. _this.$emit('printOk')
  121. }, {
  122. billType: 'SETTLE_RECEIPT',
  123. billSn: this.detail.accountReceiptSn,
  124. billNo: this.detail.accountReceiptNo,
  125. printType: '收款打印'
  126. })
  127. },
  128. getData (data, flag) {
  129. this.spinning = true
  130. settleReceiptPrintFindBySn({ sn: data.accountReceiptSn }).then(res => {
  131. if (res.status == 200) {
  132. this.detail = res.data || null
  133. if (res.data && res.data.financeBookList) {
  134. this.financeBookList = res.data.financeBookList
  135. }
  136. } else {
  137. this.handleCommonCancel()
  138. }
  139. this.spinning = false
  140. })
  141. },
  142. handleCommonCancel () {
  143. this.$emit('cancel')
  144. this.detail = null
  145. this.financeBookList = []
  146. }
  147. }
  148. }
  149. </script>
  150. <style>
  151. </style>