previewModal.vue 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. <template>
  2. <!-- <a-modal :footer="null" v-model="isShow" width="850px"> -->
  3. <div class="container-print-view" style="width:100%;font-size: 12pt;position: fixed;font-family: auto;left:10000000px;padding:0;margin:0 auto;" id="printTest">
  4. <p class="container-title" style="text-align: center;font-size: 24px;font-weight: 600;">箭冠汽配企业费用报销单</p>
  5. <div class="container-info" style="width: 100%;border: 1px solid #000000;">
  6. <div class="container-info-basics" v-if="expenseInfo">
  7. <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
  8. <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;">申请人:{{ expenseInfo&&expenseInfo.applyPersonName?expenseInfo.applyPersonName:'' }}</span>
  9. <span style="display: inline-block;border-right: none;padding: 10px;">申请部门:{{ expenseInfo&&expenseInfo.applyDepartmentName?expenseInfo.applyDepartmentName:'' }}</span>
  10. </div>
  11. <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
  12. <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;">费用类型:{{ expenseInfo&&expenseInfo.expenseTypeDictValue?expenseInfo.expenseTypeDictValue:'' }}</span>
  13. <span style="display: inline-block;border-right: none;padding: 10px;">费用发生月份:{{ expenseInfo&&expenseInfo.expenseDate?expenseInfo.expenseDate.substring(0, 7):'' }}</span>
  14. </div>
  15. <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
  16. <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;">费用单号:{{ expenseInfo&&expenseInfo.expenseAccountNo?expenseInfo.expenseAccountNo:'' }}{{ expenseInfo&&expenseInfo.stateDictValue?'('+expenseInfo.stateDictValue+')':'' }}</span>
  17. <span style="display: inline-block;border-right: none;padding: 10px;">合计金额:{{ (expenseInfo&&expenseInfo.applyExpenseTotal ||expenseInfo&&expenseInfo.applyExpenseTotal==0)?expenseInfo.applyExpenseTotal+'元':'' }}</span>
  18. </div>
  19. <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;overflow: hidden;">
  20. <div style="border-right: none;float: left;padding: 10px 0 10px 10px;">主题:</div>
  21. <div style="padding: 10px;text-align: center;font-weight: bold;">
  22. {{ expenseInfo&&expenseInfo.title?expenseInfo.title:'' }}
  23. </div>
  24. </div>
  25. <div class="basics-item" style="width: 100%;border-bottom: 1px solid #000000;padding:0;margin:0;">
  26. <span style="display: inline-block;width: 50%;padding: 10px;border-right: 1px solid #000000;border-right: none;">详细说明:</span>
  27. <div style="padding:0 20px 20px;">
  28. <div v-for="(item,index) in expenseInfo.content" :key="index+'-content'">
  29. {{ item || '--' }}
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. <div class="container-fytable" style="padding:0 10px;" v-if="fyListData">
  35. <p class="table-title">费用明细:</p>
  36. <table
  37. border="1"
  38. cellspacing="0"
  39. cellpadding="0"
  40. style="width: 100%;border-collapse: collapse;border: 1px solid black;font-size:10pt;text-align: center;"
  41. align="center">
  42. <thead>
  43. <tr>
  44. <th style="padding:5px 10px;width:8%;">序号</th>
  45. <th style="padding:5px 10px;width:26%;">记账方</th>
  46. <!-- <th style="padding:5px 10px;width:15%;">区域/省/市</th> -->
  47. <th style="padding:5px 10px;width:10%;">记账费用</th>
  48. <th style="padding:5px 10px;width:26%;">费用承担方</th>
  49. <th style="padding:5px 10px;width:20%;">产品信息</th>
  50. </tr>
  51. </thead>
  52. <tbody>
  53. <tr v-for="(item,index) in fyListData" :key="index">
  54. <td style="text-align: center;width:8%;">{{ index+1 }}</td>
  55. <td style="text-align: left;width:26%;padding:5px 10px;">
  56. <div>{{ item.accountTypeDictValue }}</div>
  57. <div>{{ item.accountName||'' }}</div>
  58. <div v-if="item.accountNameFnumber">({{ item.accountNameFnumber }})</div>
  59. </td>
  60. <!-- <td style="text-align: left;width:15%;padding:5px 10px;">
  61. <div>{{ item.subareaNames }}</div>
  62. <div>{{ item.provinceName }}</div>
  63. <div>{{ item.cityName }}</div>
  64. </td> -->
  65. <td style="text-align: right;width:10%;padding:5px 10px;">{{ item.expense||item.expense==0?toThousands(item.expense):'' }}</td>
  66. <td style="text-align: left;width:26%;padding:5px 10px;vertical-align: top;">
  67. <div v-for="(ditem,index) in item.detailSplitList" :key="ditem.id+'-'+index" style="padding: 3px 0;" >
  68. {{ ditem.splitObjName }}
  69. <span v-if="ditem.splitObjFnumber">({{ ditem.splitObjFnumber }})</span>
  70. <span v-if="ditem.childDetailSplit&&ditem.childDetailSplit.splitObjName">/</span>
  71. {{ ditem.childDetailSplit?ditem.childDetailSplit.splitObjName:'' }}: {{ ditem.childDetailSplit?toThousands(ditem.childDetailSplit.splitAmount):toThousands(ditem.splitAmount) }}
  72. </div>
  73. </td>
  74. <td style="text-align: left;width:20%;padding:5px 10px;vertical-align: top;">
  75. <div v-for="ditem in item.detailProductsList" :key="ditem.id" style="padding: 3px 0;">
  76. <div v-if="ditem.productCode">{{ ditem.productCode }}: {{ toThousands(ditem.expense) }}</div>
  77. <div v-else-if="ditem.productBrandName">{{ ditem.productBrandName }}<span v-if="ditem.productTypeShowName">/</span>{{ ditem.productTypeShowName }}: {{ toThousands(ditem.expense) }}</div>
  78. <div v-else>{{ ditem.productTypeShowName }}: {{ toThousands(ditem.expense) }}</div>
  79. </div>
  80. </td>
  81. </tr>
  82. </tbody>
  83. </table>
  84. </div>
  85. <div class="container-fytable" style="padding:0 10px 10px;" v-if="spListData">
  86. <p class="table-title">审批信息:</p>
  87. <table
  88. border="1"
  89. cellspacing="0"
  90. cellpadding="0"
  91. style="width: 100%;border-collapse: collapse;border: 1px solid black;font-size:10pt;text-align: center;"
  92. align="center">
  93. <thead>
  94. <tr style="height: 30px;padding: 5px;">
  95. <th style="padding:5px 10px;width:8%;">序号</th>
  96. <th style="padding:5px 10px;width:15%;text-align: left;">人员姓名</th>
  97. <th style="padding:5px 10px;width:15%;">人员类型</th>
  98. <th style="padding:5px 10px;width:10%;">状态</th>
  99. <th style="padding:5px 10px;width:17%;">审批意见</th>
  100. <th style="padding:5px 10px;width:15%;">附件</th>
  101. <th style="padding:5px 10px;width:20%;">时间</th>
  102. </tr>
  103. </thead>
  104. <tbody>
  105. <tr style="height: 30px;padding: 5px;" v-for="(item,index) in spListData" :key="index">
  106. <td style="padding:5px 10px;">{{ index+1||'' }}</td>
  107. <td style="padding:5px 10px;text-align: left;">{{ item.userName||'' }}</td>
  108. <td style="padding:5px 10px;">{{ item.userType||'' }}</td>
  109. <td style="padding:5px 10px;">{{ item.state||'' }}</td>
  110. <td style="padding:5px 10px;">{{ item.remark||'' }}</td>
  111. <td style="padding:5px 10px;">{{ item.hasAttachments!= '0' ? '请在钉钉中查看附件内容' : '--' }}</td>
  112. <td style="padding:5px 10px;">{{ item.date||'' }}</td>
  113. </tr></tbody>
  114. </table>
  115. </div>
  116. </div>
  117. </div>
  118. <!-- </a-modal> -->
  119. </template>
  120. <script>
  121. import { commonMixin } from '@/utils/mixin'
  122. import { expenseAcctDetailFindList, getProcessInstance } from '@/api/expenseManagement'
  123. export default {
  124. mixins: [commonMixin],
  125. props: {
  126. showModal: {
  127. type: Boolean,
  128. default: false
  129. },
  130. detailSn: {
  131. type: [Number, String],
  132. default: ''
  133. },
  134. detailData: {
  135. type: Object,
  136. default: () => { return null }
  137. }
  138. },
  139. data () {
  140. return {
  141. isShow: this.showModal,
  142. fyListData: [],
  143. spListData: [],
  144. expenseInfo: null
  145. }
  146. },
  147. methods: {
  148. pageInfo () {
  149. this.getFyList()
  150. if (this.expenseInfo.state != 'WAIT_SUBMIT') {
  151. this.getSpList()
  152. }
  153. },
  154. getFyList () {
  155. expenseAcctDetailFindList({ expenseAccountSn: this.detailSn }).then(res => {
  156. if (res.status == 200) {
  157. this.fyListData = res.data
  158. } else {
  159. this.fyListData = []
  160. }
  161. })
  162. },
  163. getSpList () {
  164. getProcessInstance({ businessType: 'EXPENSES', businessSn: this.detailSn }).then(res => {
  165. if (res.status == 200) {
  166. this.spListData = res.data
  167. } else {
  168. this.spListData = []
  169. }
  170. })
  171. }
  172. },
  173. // mounted () {
  174. // this.pageInfo()
  175. // },
  176. watch: {
  177. detailData (nVal, oVal) {
  178. if (nVal) {
  179. this.expenseInfo = nVal
  180. this.fyListData = []
  181. this.spListData = []
  182. this.pageInfo()
  183. }
  184. }
  185. }
  186. }
  187. </script>