detailModal.vue 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <template>
  2. <a-modal
  3. centered
  4. class="financialPaymentDetail-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="凭证"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. :width="600">
  11. <!-- 详情 -->
  12. <div>
  13. <a-descriptions :column="1" size="default">
  14. <a-descriptions-item label="收款单号">{{ detailsData&&detailsData.settleNo || '--' }}</a-descriptions-item>
  15. <a-descriptions-item label="关联单号">{{ detailsData&&detailsData.bizNo || '--' }}</a-descriptions-item>
  16. <a-descriptions-item label="商户名称">{{ detailsData&&detailsData.settleClientName || '--' }}</a-descriptions-item>
  17. <a-descriptions-item label="收款金额">{{ detailsData&&(detailsData.settledAmount || detailsData.settledAmount==0) ? '¥'+ detailsData.settledAmount : '--' }}</a-descriptions-item>
  18. <a-descriptions-item label="收款类型">{{ detailsData&&detailsData.bizTypeDictValue || '--' }}</a-descriptions-item>
  19. <a-descriptions-item label="收款方式">{{ detailsData&&detailsData.settleStyleSnDictValue || '--' }}</a-descriptions-item>
  20. <a-descriptions-item label="收款时间">{{ detailsData&&detailsData.settleTime || '--' }}</a-descriptions-item>
  21. <a-descriptions-item label="审核时间">{{ detailsData&&detailsData.auditTime || '--' }}</a-descriptions-item>
  22. </a-descriptions>
  23. <div class="btn-cont"><a-button id="financialPaymentDetail-modal-back" @click="isShow = false">关闭</a-button></div>
  24. </div>
  25. </a-modal>
  26. </template>
  27. <script>
  28. import { findReceiptDetail } from '@/api/settleReceipt'
  29. export default {
  30. name: 'FinancialPaymentDetailModal',
  31. props: {
  32. openModal: { // 弹框显示状态
  33. type: Boolean,
  34. default: false
  35. },
  36. itemId: {
  37. type: [Number, String],
  38. default: ''
  39. }
  40. },
  41. data () {
  42. return {
  43. isShow: this.openModal, // 是否打开弹框
  44. detailsData: null
  45. }
  46. },
  47. methods: {
  48. // 获取详情
  49. getDetail (id) {
  50. findReceiptDetail({ id: id }).then(res => {
  51. if (res.status == 200) {
  52. this.detailsData = res.data
  53. } else {
  54. this.detailsData = null
  55. }
  56. })
  57. }
  58. },
  59. watch: {
  60. // 父页面传过来的弹框状态
  61. openModal (newValue, oldValue) {
  62. this.isShow = newValue
  63. },
  64. // 重定义的弹框状态
  65. isShow (newValue, oldValue) {
  66. if (!newValue) {
  67. this.$emit('close')
  68. this.detailsData = null
  69. }
  70. }
  71. }
  72. }
  73. </script>
  74. <style lang="less">
  75. .financialPaymentDetail-modal{
  76. .ant-modal-body {
  77. padding: 40px 40px 24px;
  78. }
  79. .btn-cont {
  80. text-align: center;
  81. margin: 35px 0 10px;
  82. }
  83. }
  84. </style>