previewModal.vue 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <template>
  2. <div class="container-print-view"
  3. style="width:100%;font-size: 12pt;position: fixed;font-family: auto;left:-1000000px;padding:0;margin:0 auto;background-color: #fff;"
  4. >
  5. <div class="expense-detail-print" style="width:564pt;margin:0 auto;" v-for="item in list" :key="item.expenseInfo.expenseAccountSn">
  6. <p class="container-title" style="text-align: center;font-size: 24px;font-weight: 600;">箭冠汽配企业费用报销单</p>
  7. <div class="container-info" style="width: 100%;border: 1px solid #000000;">
  8. <div class="container-info-basics" v-if="item.expenseInfo">
  9. <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
  10. <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;">申请人:{{ item.expenseInfo.applyPersonName?item.expenseInfo.applyPersonName:'' }}</span>
  11. <span style="display: inline-block;border-right: none;padding: 10px;">申请部门:{{ item.expenseInfo.applyDepartmentName?item.expenseInfo.applyDepartmentName:'' }}</span>
  12. </div>
  13. <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
  14. <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;">费用类型:{{ item.expenseInfo.expenseTypeDictValue?item.expenseInfo.expenseTypeDictValue:'' }}</span>
  15. <span style="display: inline-block;border-right: none;padding: 10px;">费用发生月份:{{ item.expenseInfo.expenseDate?item.expenseInfo.expenseDate.substring(0, 7):'' }}</span>
  16. </div>
  17. <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
  18. <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;">费用单号:{{ item.expenseInfo.expenseAccountNo?item.expenseInfo.expenseAccountNo:'' }}{{ item.expenseInfo.stateDictValue?'('+item.expenseInfo.stateDictValue+')':'' }}</span>
  19. <span style="display: inline-block;border-right: none;padding: 10px;">合计金额:{{ (item.expenseInfo.applyExpenseTotal ||item.expenseInfo.applyExpenseTotal==0)?item.expenseInfo.applyExpenseTotal+'元':'' }}</span>
  20. </div>
  21. <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;overflow: hidden;">
  22. <div style="border-right: none;float: left;padding: 10px 0 10px 10px;">主题:</div>
  23. <div style="padding: 10px 10px 10px 50px;text-align: center;font-weight: bold;">
  24. {{ item.expenseInfo.title?item.expenseInfo.title:'' }}
  25. </div>
  26. </div>
  27. <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
  28. <span style="display: inline-block;width: 100%;padding: 10px 10px 5px;border-right: 1px solid #000000;border-right: none;">详细说明:</span>
  29. <div style="padding:0 20px 10px 40px;">
  30. <div v-for="(ditem,index) in item.expenseInfo.content" :key="index+'-content'">
  31. {{ ditem || '--' }}
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. <div class="container-fytable" style="padding:0 10px;" v-if="item.fyListData">
  37. <div class="table-title" style="padding: 10px 0;">费用明细:</div>
  38. <table
  39. border="1"
  40. cellspacing="0"
  41. cellpadding="0"
  42. style="width: 100%;border-collapse: collapse;font-size:10pt;text-align: center;"
  43. align="center">
  44. <thead>
  45. <tr>
  46. <th style="padding:5px 10px;width:6%;">序号</th>
  47. <th style="padding:5px 10px;width:22%;">记账方</th>
  48. <!-- <th style="padding:5px 10px;width:15%;">区域/省/市</th> -->
  49. <th style="padding:5px 10px;width:10%;">记账费用</th>
  50. <th style="padding:5px 10px;width:30%;">费用承担方</th>
  51. <th style="padding:5px 10px;width:22%;">产品信息</th>
  52. </tr>
  53. </thead>
  54. <tbody>
  55. <tr v-for="(fyItem,index) in item.fyListData" :key="index">
  56. <td style="text-align: center;width:6%;">{{ index+1 }}</td>
  57. <td style="text-align: left;width:22%;padding:0 10px;">
  58. <div>{{ fyItem.accountTypeDictValue }}</div>
  59. <div>{{ fyItem.accountName||'' }}</div>
  60. <div v-if="fyItem.accountNameFnumber">({{ fyItem.accountNameFnumber }})</div>
  61. </td>
  62. <!-- <td style="text-align: left;width:15%;padding:5px 10px;">
  63. <div>{{ fyItem.subareaNames }}</div>
  64. <div>{{ fyItem.provinceName }}</div>
  65. <div>{{ fyItem.cityName }}</div>
  66. </td> -->
  67. <td style="text-align: right;width:10%;padding:0 10px;">{{ fyItem.expense||fyItem.expense==0?toThousands(fyItem.expense):'' }}</td>
  68. <td style="text-align: left;width:30%;padding:0 10px;vertical-align: top;">
  69. <div v-for="(ditem,index) in fyItem.detailSplitList" :key="ditem.id+'-'+index" style="padding: 3px 0;" >
  70. {{ ditem.splitObjName }}
  71. <span v-if="ditem.splitObjFnumber">({{ ditem.splitObjFnumber }})</span>
  72. <span v-if="ditem.childDetailSplit&&ditem.childDetailSplit.splitObjName">/</span>
  73. {{ ditem.childDetailSplit?ditem.childDetailSplit.splitObjName:'' }}: {{ ditem.childDetailSplit?toThousands(ditem.childDetailSplit.splitAmount):toThousands(ditem.splitAmount) }}
  74. </div>
  75. </td>
  76. <td style="text-align: left;width:22%;padding:0 10px;vertical-align: top;">
  77. <div v-for="ditem in fyItem.detailProductsList" :key="ditem.id" style="padding: 3px 0;">
  78. <div v-if="ditem.productCode">{{ ditem.productCode }}: {{ toThousands(ditem.expense) }}</div>
  79. <div v-else-if="ditem.productBrandName">{{ ditem.productBrandName }}<span v-if="ditem.productTypeShowName">/</span>{{ ditem.productTypeShowName }}: {{ toThousands(ditem.expense) }}</div>
  80. <div v-else>{{ ditem.productTypeShowName }}: {{ toThousands(ditem.expense) }}</div>
  81. </div>
  82. </td>
  83. </tr>
  84. </tbody>
  85. </table>
  86. </div>
  87. <div class="container-fytable" style="padding:0 10px 10px;" v-if="item.spListData&&item.spListData.length">
  88. <p class="table-title">审批信息:</p>
  89. <table
  90. border="1"
  91. cellspacing="0"
  92. cellpadding="0"
  93. style="width: 100%;border-collapse: collapse;border: 1px solid black;font-size:10pt;text-align: center;"
  94. align="center">
  95. <thead>
  96. <tr style="height: 30px;padding: 5px;">
  97. <th style="padding:5px 10px;width:8%;">序号</th>
  98. <th style="padding:5px 10px;width:15%;text-align: left;">人员姓名</th>
  99. <th style="padding:5px 10px;width:15%;">人员类型</th>
  100. <th style="padding:5px 10px;width:10%;">状态</th>
  101. <th style="padding:5px 10px;width:17%;">审批意见</th>
  102. <th style="padding:5px 10px;width:15%;">附件</th>
  103. <th style="padding:5px 10px;width:20%;">时间</th>
  104. </tr>
  105. </thead>
  106. <tbody>
  107. <tr style="height: 30px;padding: 5px;" v-for="(spitem,index) in item.spListData" :key="index">
  108. <td style="padding:5px 10px;">{{ index+1||'' }}</td>
  109. <td style="padding:5px 10px;text-align: left;">{{ spitem.userName||'' }}</td>
  110. <td style="padding:5px 10px;">{{ spitem.userType||'' }}</td>
  111. <td style="padding:5px 10px;">{{ spitem.state||'' }}</td>
  112. <td style="padding:5px 10px;">{{ spitem.remark||'' }}</td>
  113. <td style="padding:5px 10px;">{{ spitem.hasAttachments!= '0' ? '请在钉钉中查看附件内容' : '--' }}</td>
  114. <td style="padding:5px 10px;">{{ spitem.date||'' }}</td>
  115. </tr></tbody>
  116. </table>
  117. </div>
  118. <div class="container-fytable" style="padding:0 10px 10px;" v-else>
  119. <p class="table-title">审批信息:暂无</p>
  120. </div>
  121. </div>
  122. </div>
  123. </div>
  124. </template>
  125. <script>
  126. import { commonMixin } from '@/utils/mixin'
  127. import { jGPlPrint } from '@/libs/JGPrint.js'
  128. export default {
  129. mixins: [commonMixin],
  130. data () {
  131. return {
  132. list: [],
  133. printNums: []
  134. }
  135. },
  136. methods: {
  137. setData (list) {
  138. this.list = list
  139. // list.map(item => {
  140. // this.printNums.push({
  141. // billType: 'FINANCE_BOOK_DETAIL',
  142. // billSn: item.bookDetailSn,
  143. // billNo: item.bookNo,
  144. // printType: '费用单打印'
  145. // })
  146. // })
  147. setTimeout(()=>{
  148. this.prints()
  149. },100)
  150. },
  151. // 打印
  152. prints(){
  153. const _this = this
  154. const html = document.getElementsByClassName('expense-detail-print')
  155. const printCons = []
  156. for (let i = 0; i < html.length; i++) {
  157. const h = html[i].clientHeight
  158. printCons.push({
  159. h: h,
  160. t: html[i].innerHTML
  161. })
  162. }
  163. // 排序从小到大
  164. printCons.sort((a, b) => {
  165. return a['h'] - b['h']
  166. })
  167. const htmlStr = []
  168. for (let i = 0; i < printCons.length; i++) {
  169. if (printCons[i].h > 560) {
  170. htmlStr.push('')
  171. }else{
  172. printCons[i].t = '<div style="width:564pt;margin:0 auto;height:535px;">' +printCons[i].t+'</div>'
  173. }
  174. htmlStr.push(printCons[i].t)
  175. }
  176. this.$store.state.app.curActionPermission = 'B_eRPrint'
  177. // html, type, callback, printLogParams
  178. jGPlPrint(htmlStr, 'preview', function (res) {
  179. _this.$store.state.app.curActionPermission = ''
  180. _this.$emit('printOk', res)
  181. })
  182. }
  183. }
  184. }
  185. </script>