detailModal.vue 3.6 KB

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