detail.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. <template>
  2. <div class="financialCollectionDetailwrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <a-page-header :ghost="false" :backIcon="false" class="financialCollectionAddcont" v-if="!bookSn" >
  5. <!-- 自定义的二级文字标题 -->
  6. <template slot="subTitle">
  7. <a id="purchaseOrderEdit-back-btn" href="javascript:;" @click="handleBack(0)"><a-icon type="left" /> 返回列表</a>
  8. <span style="margin: 0 15px;color: #666;font-weight: bold;">单号:{{ detailData&&detailData.bookNo || '--' }}</span>
  9. <span style="margin: 0 10px;color: #666;">申请人:{{ detailData&&detailData.applyPersonName }}</span>
  10. <a-button type="link" size="small" class="button-default" @click="showDetail=!showDetail">
  11. <a-icon :type="showDetail ? 'eye-invisible' : 'eye'"/> {{ showDetail?'隐藏':'查看' }}信息
  12. </a-button>
  13. </template>
  14. </a-page-header>
  15. <a-card :bordered="false" class="financialCollectionAddcont" v-show="showDetail">
  16. <a-descriptions :column="{ xs: 2, sm: 3, md: 3}" v-if="detailData" ref="tableSearch">
  17. <a-descriptions-item label="创建时间">{{ detailData&&detailData.createDate || '--' }}</a-descriptions-item>
  18. <a-descriptions-item label="收款单号">
  19. {{ detailData&&detailData.bookNo || '--' }}
  20. </a-descriptions-item>
  21. <a-descriptions-item label="申请人">{{ detailData&&detailData.applyPersonName || '--' }}</a-descriptions-item>
  22. <a-descriptions-item label="审核时间">{{ detailData&&detailData.auditDate || '--' }}</a-descriptions-item>
  23. <a-descriptions-item span="2" label="收款事由">{{ detailData&&detailData.bookReason || '--' }}</a-descriptions-item>
  24. <a-descriptions-item label="状态">{{ detailData&&detailData.statusDictValue || '--' }}</a-descriptions-item>
  25. <a-descriptions-item label="付款方类型">{{ detailData&&detailData.payerTypeDictValue || '--' }}</a-descriptions-item>
  26. <a-descriptions-item label="付款方">{{ detailData&&detailData.payerName || '--' }}</a-descriptions-item>
  27. <a-descriptions-item label="备注" :span="3">{{ detailData&&detailData.remarks||'--' }}</a-descriptions-item>
  28. <a-descriptions-item label="附件" :span="3">
  29. <a target="_blank" style="color: #00aaff;text-decoration: underline;margin-right: 15px;" :href="item.filePath" v-for="item in detailData.attachmentList" :key="item.id">
  30. {{ item.fileName }}
  31. </a>
  32. </a-descriptions-item>
  33. </a-descriptions>
  34. </a-card>
  35. <!-- 财务明细 -->
  36. <a-card :bordered="false" size="small" class="financialCollectionAddcont" v-if="$route.params.sn||bookSn">
  37. <div slot="title">
  38. <div style="display: flex;justify-content: space-between;align-items: center;">
  39. <div>财务明细</div>
  40. </div>
  41. </div>
  42. <a-alert type="info" style="margin-bottom:10px" v-if="detailData">
  43. <div slot="message">
  44. 共 {{ total }} 条,
  45. 订单金额合计 {{ toThousands(detailData.orderTotalAmount ||0) }},
  46. 收款金额合计 {{ toThousands(detailData.receiptTotalAmount ||0) }},
  47. 使用授信合计 {{ toThousands(detailData.useTotalAmount||0) }},
  48. 授信还款合计 {{ toThousands(detailData.payTotalAmount||0) }},
  49. 余款抵扣合计 {{ toThousands(detailData.balanceTotalAmount||0) }}
  50. </div>
  51. </a-alert>
  52. <!-- 列表 -->
  53. <s-table
  54. class="sTable fixPagination"
  55. ref="table"
  56. size="small"
  57. :style="{ height: tableHeight+5+'px' }"
  58. :rowKey="(record) => record.id"
  59. :columns="columns"
  60. :data="loadData"
  61. :scroll="{ y: tableHeight }"
  62. :defaultLoadData="false"
  63. :showPagination="false"
  64. bordered>
  65. <template slot="expandedRowRender" slot-scope="record">
  66. <div style="padding:10px;overflow: hidden;" v-if="record.detailItemUseList.length || record.detailItemPayList.length">
  67. <a-table
  68. style="width:45%;background:#fff;float:left;border-bottom: 1px solid #eee;"
  69. :bordered="false"
  70. :pagination="false"
  71. :columns="useCol"
  72. :data-source="record.detailItemUseList">
  73. </a-table>
  74. <a-table
  75. :bordered="false"
  76. style="width:45%;background:#fff;float:left;border-bottom: 1px solid #eee;margin-left:2%;"
  77. :pagination="false"
  78. :columns="payCol"
  79. :data-source="record.detailItemPayList">
  80. </a-table>
  81. </div>
  82. <div style="padding:10px;text-align:center;" v-else>暂无数据</div>
  83. </template>
  84. <!-- 付款账户(营业执照) -->
  85. <template slot="payerAccountInfo" slot-scope="record">
  86. {{ record.payerAccountInfo || '--' }}
  87. </template>
  88. </s-table>
  89. </a-card>
  90. </a-spin>
  91. </div>
  92. </template>
  93. <script>
  94. import { commonMixin } from '@/utils/mixin'
  95. import { VSelect, STable } from '@/components'
  96. import { financeBookFindBySn, financeBookDetailQueryList } from '@/api/financeBook.js'
  97. export default {
  98. name: 'FinancialCollectionEdit',
  99. mixins: [commonMixin],
  100. components: { VSelect, STable },
  101. data () {
  102. return {
  103. spinning: false,
  104. detailData: null,
  105. openDepartUserModal: false,
  106. showDetail: false,
  107. total: 0,
  108. bookSn: null,
  109. tableHeight: 300,
  110. loadData: parameter => {
  111. const params = Object.assign(parameter, { bookSn: this.$route.params.sn || this.bookSn })
  112. return financeBookDetailQueryList(params).then(res => {
  113. let data
  114. if (res.status == 200) {
  115. data = res.data
  116. const no = 0
  117. for (var i = 0; i < data.length; i++) {
  118. data[i].no = no + i + 1
  119. // 计算使用授信和授信还款的合计
  120. data[i].useTotalAmount = this.getTotal(data[i].detailItemUseList)
  121. data[i].payTotalAmount = this.getTotal(data[i].detailItemPayList)
  122. }
  123. this.total = data.length
  124. this.disabled = false
  125. this.spinning = false
  126. }
  127. return data
  128. })
  129. },
  130. columns: [
  131. { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
  132. { title: '收款日期', dataIndex: 'receiptDate', align: 'center', width: '6%', customRender: function (text) { return text || '--' } },
  133. { title: '付款方类型', dataIndex: 'payerTypeDictValue', align: 'center', width: '6%', customRender: function (text) { return text || '--' } },
  134. { title: '付款方', dataIndex: 'payerName', align: 'center', width: '8%', customRender: function (text) { return text || '--' } },
  135. { title: '财务编码', dataIndex: 'dealerEntity.kdMidCustomerFnumber', align: 'center', width: '6%', customRender: function (text) { return text || '--' } },
  136. { title: '付款账户(营业执照)', scopedSlots: { customRender: 'payerAccountInfo' }, align: 'center', width: '8%' },
  137. { title: '订单金额', dataIndex: 'orderAmount', align: 'right', width: '5%', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') },
  138. { title: '收款金额', dataIndex: 'receiptAmount', align: 'right', width: '5%', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') },
  139. { title: '使用授信', dataIndex: 'useTotalAmount', align: 'right', width: '5%', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') },
  140. { title: '授信还款', dataIndex: 'payTotalAmount', align: 'right', width: '5%', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') },
  141. { title: '余款抵扣', dataIndex: 'balanceAmount', align: 'right', width: '5%', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') },
  142. { title: '跨月打款', dataIndex: 'nextMonthAmount', align: 'right', width: '5%', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') },
  143. { title: '户名', dataIndex: 'bankAccount', align: 'center', width: '8%', customRender: function (text) { return text || '--' } },
  144. { title: '汇入银行', dataIndex: 'bankName', align: 'center', width: '8%', customRender: function (text) { return text || '--' } },
  145. { title: '足额打款', dataIndex: 'fullPaymentFlagDictValue', align: 'center', width: '5%', customRender: function (text) { return (text == 0 || text) ? text : '--' } },
  146. { title: '说明', dataIndex: 'explainInfo', align: 'center', width: '10%', customRender: function (text) { return text || '--' } }
  147. ],
  148. useCol: [
  149. { title: '使用授信项目', dataIndex: 'itemName', width: '50%', align: 'center', customRender: function (text) { return text || '--' } },
  150. { title: '使用授信金额', dataIndex: 'itemAmount', width: '50%', align: 'right', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') }
  151. ],
  152. payCol: [
  153. { title: '授信还款项目', dataIndex: 'itemName', width: '50%', align: 'center', customRender: function (text) { return text || '--' } },
  154. { title: '授信还款金额', dataIndex: 'itemAmount', width: '50%', align: 'right', customRender: text => ((text || text == 0) ? this.toThousands(text) : '--') }
  155. ]
  156. }
  157. },
  158. watch: {
  159. showDetail (newValue, oldValue) {
  160. const _this = this
  161. this.$nextTick(() => { // 页面渲染完成后的回调
  162. _this.setTableH()
  163. })
  164. },
  165. '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
  166. this.setTableH()
  167. }
  168. },
  169. methods: {
  170. setTableH () {
  171. const tableSearchH = this.showDetail ? this.$refs.tableSearch.offsetHeight : 0
  172. this.tableHeight = window.innerHeight - tableSearchH - 240
  173. },
  174. getTotal (data) {
  175. let ret = 0
  176. data.map(item => {
  177. ret = ret + item.itemAmount
  178. })
  179. return ret.toFixed(2)
  180. },
  181. // 财务单基础详情
  182. getDetail () {
  183. this.spinning = true
  184. this.disabled = true
  185. financeBookFindBySn({ bookSn: this.$route.params.sn || this.bookSn }).then(res => {
  186. if (res.status == 200) {
  187. this.detailData = res.data
  188. this.spinning = false
  189. this.disabled = false
  190. }
  191. })
  192. this.$nextTick(() => {
  193. this.$refs.table.refresh(true)
  194. this.setTableH()
  195. })
  196. },
  197. // 返回
  198. handleBack (data) {
  199. this.$router.push({ name: 'financialCollectionList' })
  200. },
  201. pageInit (bookSn) {
  202. this.bookSn = bookSn
  203. if (this.$route.params.sn || this.bookSn) { // 编辑页
  204. this.getDetail()
  205. }
  206. }
  207. },
  208. mounted () {
  209. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  210. this.pageInit()
  211. }
  212. },
  213. activated () {
  214. // 如果是新页签打开或者进入新的子页(例:存在列表第2条数据编辑页页签时再打开第4条数据的编辑页),则重置当前页面
  215. if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
  216. this.pageInit()
  217. }
  218. },
  219. beforeRouteEnter (to, from, next) {
  220. next(vm => {})
  221. }
  222. }
  223. </script>
  224. <style lang="less">
  225. .financialCollectionDetailwrap{
  226. position: relative;
  227. height: 100%;
  228. box-sizing: border-box;
  229. .financialCollectionAddcont{
  230. margin-bottom: 6px;
  231. }
  232. .affix{
  233. .ant-affix{
  234. z-index: 101;
  235. }
  236. }
  237. }
  238. </style>