printModel.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <template>
  2. <!-- 发货打印 -->
  3. <div id="sendGood-print" style="height:0;overflow: hidden;" v-if="detail">
  4. <div class="print-box" style="width: 574pt;font-size: 12pt;">
  5. <div style="display: flex;align-items: center;justify-content: center;">
  6. <img src="@/assets/logo.png" height="50px"/>
  7. <h1 style="margin:0;">东莞市箭冠汽车配件制造有限公司</h1>
  8. </div>
  9. <div style="text-align: center;padding: 5px 0;position: relative;">
  10. <h2 style="margin:0;">托运单</h2>
  11. <span style="position: absolute;top: 10px;right: 0;">No:{{ detail.sendBillNo }}</span>
  12. </div>
  13. <div style="display: flex;align-items: center;justify-content:space-between;padding: 5px;">
  14. <span style="width: 70%;">托运日期:{{ detail.sendDate }}</span>
  15. <span style="width: 30%;word-break:break-all;">目的地:{{ detail.customerAddress }}</span>
  16. </div>
  17. <div>
  18. <div style="border: 1px solid #000;border-bottom:0;">
  19. <div style="border-bottom: 1px solid #000;display: flex;align-items: center;justify-content:space-between;">
  20. <span style="width: 60%;border-right: 1px solid #000;padding: 5px;">收货人:{{ detail.customerCacateName }}</span>
  21. <span style="width: 40%;padding: 5px;">电话:{{ detail.customerCacatePhone }}</span>
  22. </div>
  23. <div style="padding: 5px;word-break:break-all;">
  24. <span>详细地址:{{ detail.customerAddressDetail }}</span>
  25. </div>
  26. </div>
  27. <table border="1" style="width: 574pt;border-collapse: collapse;text-align: center;border-color:#000;">
  28. <tr style="padding: 0;">
  29. <td style="padding: 5px 0;width:70pt;">货物名称</td>
  30. <td style="padding: 0;width:56pt;">件数</td>
  31. <td style="padding: 0;width:56pt;">体积(m³)</td>
  32. <td style="padding: 0;width:56pt;">重量(kg)</td>
  33. <td style="padding: 0;width:56pt;">计费单价(元)</td>
  34. <td style="padding: 0;width:55pt;">运费(元)</td>
  35. <td style="padding: 0;width:55pt;">保价(万)</td>
  36. <td style="padding: 0;width:55pt;">送货费</td>
  37. <td style="padding: 0;width:60pt;">其他</td>
  38. <td style="padding: 0;width:60pt;">合计</td>
  39. </tr>
  40. <tr style="padding: 0;" v-for="item in detail.detailList" :key="item.id">
  41. <td style="padding: 5px 0;width:70pt;">{{ item.goodsName }}</td>
  42. <td style="padding: 0;width:56pt;">{{ item.goodsQty }}</td>
  43. <td style="padding: 0;width:56pt;">{{ item.goodsVolume.toFixed(2) }}</td>
  44. <td style="padding: 0;width:56pt;">{{ item.goodsWeight.toFixed(2) }}</td>
  45. <td style="padding: 0;width:56pt;">{{ item.unitPrice.toFixed(2) }}</td>
  46. <td style="padding: 0;width:55pt;">{{ item.transportAmount.toFixed(2) }}</td>
  47. <td style="padding: 0;width:55pt;">{{ item.supportValue.toFixed(2) }}</td>
  48. <td style="padding: 0;width:55pt;">{{ item.sendAmount.toFixed(2) }}</td>
  49. <td style="padding: 0;width:60pt;">{{ item.otherAmount.toFixed(2) }}</td>
  50. <td style="padding: 0;width:60pt;">{{ item.totalAmount.toFixed(2) }}</td>
  51. </tr>
  52. </table>
  53. <div style="border: 1px solid #000;border-top:0;">
  54. <div style="border-bottom: 1px solid #000;display: flex;align-items: center;justify-content:space-between;">
  55. <div style="width: 78%;border-right: 1px solid #000;padding: 4pt;">费用合计(大写):{{ dealBigMoney(detail.totalSendAmount.toFixed(2)) }}</div>
  56. <div style="width:22%;padding: 4pt;">¥:{{ detail.totalSendAmount.toFixed(2) }}</div>
  57. </div>
  58. <div style="border-bottom: 1px solid #000;display: flex;align-items: center;justify-content:space-between;">
  59. <div style="border-right: 1px solid #000;flex:1;text-align: center;padding: 5px;">付款方式:</div>
  60. <div style="border-right: 1px solid #000;flex:2;padding: 5px;text-align:center;">{{ detail.payTypeDictValue }}</div>
  61. <div style="border-right: 1px solid #000;flex:1;text-align: center;padding: 5px;">交货方式:</div>
  62. <div style="flex:2;padding: 5px;text-align:center;">{{ detail.handoverTypeDictValue }}</div>
  63. </div>
  64. <div style="border-bottom: 1px solid #000;display: flex;align-items: center;justify-content:space-between;">
  65. <div style="border-right: 1px solid #000;flex:1;padding: 8px 5px;">发货人签字:</div>
  66. <div style="flex:1;padding: 8px 5px;">承运人签字:</div>
  67. </div>
  68. <div style="border-bottom: 1px solid #000;display: flex;align-items: center;justify-content:space-between;">
  69. <div style="width: 8%;border-right: 1px solid #000;padding: 5px;">备注:</div>
  70. <div style="width: 92%;padding: 5px;">{{ detail.sendRemark }}</div>
  71. </div>
  72. <div style="display: flex;align-items: center;justify-content:space-between;">
  73. <div style="width: 30px;text-align: center;">注意事项</div>
  74. <div style="flex: 1;padding: 5px;border-left: 1px solid #000;">
  75. <ol style="margin: 0;padding-left: 30px;">
  76. <li>承运人需按合同规定时间内把货物送达客户所在区域(不得超出十公里).</li>
  77. <li>送货上门的货物,到达目的地后需提前和收货人联系并确定送货时间.</li>
  78. <li>货物必需完整的交接给收货人,并让收货人在物流单上签字并上传回单.</li>
  79. <li>如果发生货物丢失以及其它原因损坏需按价赔偿给客户.</li>
  80. </ol>
  81. </div>
  82. </div>
  83. </div>
  84. <div style="display: flex;align-items: center;justify-content:space-between;padding: 5px;">
  85. <div>东莞市箭冠汽车配件制造有限公司</div>
  86. <div>中国.广东.东莞.茶山工业园</div>
  87. <div>电话:0769-81860196</div>
  88. <div>传真:0769-81860108</div>
  89. </div>
  90. </div>
  91. </div>
  92. </div>
  93. </template>
  94. <script>
  95. import { jGPrint } from '@/libs/JGPrint.js'
  96. import { dealBigMoney } from '@/libs/tools.js'
  97. export default {
  98. props: {
  99. detail: {
  100. type: Object,
  101. default: function () {
  102. return null
  103. }
  104. }
  105. },
  106. methods: {
  107. dealBigMoney: dealBigMoney,
  108. printDom () {
  109. const html = document.getElementById('sendGood-print').innerHTML
  110. jGPrint(html, 'preview', function () {}, null, 3)
  111. }
  112. }
  113. }
  114. </script>
  115. <style>
  116. </style>