detailModal.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <template>
  2. <a-modal
  3. centered
  4. class="customerManagementDetail-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="客户详情"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. :width="960">
  11. <!-- 客户详情 -->
  12. <div>
  13. <a-spin :spinning="!detailData" tip="Loading...">
  14. <a-descriptions :column="3" bordered size="small">
  15. <a-descriptions-item label="客户名称:">{{ detailData&&detailData.customerName || '--' }}</a-descriptions-item>
  16. <a-descriptions-item label="联系人:">{{ detailData&&detailData.contactName || '--' }}</a-descriptions-item>
  17. <a-descriptions-item label="联系电话:">{{ detailData&&detailData.contactTel || '--' }}</a-descriptions-item>
  18. <a-descriptions-item label="客户地址:" :span="3">{{ addressStr }}</a-descriptions-item>
  19. <a-descriptions-item label="客户传真:">{{ detailData&&detailData.fax || '--' }}</a-descriptions-item>
  20. <a-descriptions-item label="配送方式:">{{ detailData&&detailData.dispatchTypeDictValue || '--' }}</a-descriptions-item>
  21. <a-descriptions-item label="是否卫星仓客户:">{{ detailData&&detailData.satelliteFlagDictValue || '--' }}</a-descriptions-item>
  22. <a-descriptions-item label="价格类型:">{{ detailData&&detailData.priceTypeDictValue || '--' }}</a-descriptions-item>
  23. <a-descriptions-item label="收款方式:">{{ detailData&&detailData.settleStyleName || '--' }}</a-descriptions-item>
  24. <a-descriptions-item label="客户类型:">{{ detailData&&detailData.customerTypeName || '--' }}</a-descriptions-item>
  25. </a-descriptions>
  26. </a-spin>
  27. <div class="btn-cont"><a-button id="customer-management-detail-modal-back" @click="isShow = false">返回列表</a-button></div>
  28. </div>
  29. </a-modal>
  30. </template>
  31. <script>
  32. import { STable } from '@/components'
  33. import { custFindById } from '@/api/customer'
  34. export default {
  35. name: 'CustomerManagementDetailModal',
  36. components: { STable },
  37. props: {
  38. openModal: { // 弹框显示状态
  39. type: Boolean,
  40. default: false
  41. },
  42. itemId: {
  43. type: [Number, String],
  44. default: ''
  45. }
  46. },
  47. computed: {
  48. // 地址处理
  49. addressStr () {
  50. const provinceName = this.detailData && this.detailData.provinceName ? this.detailData.provinceName : ''
  51. const cityName = this.detailData && this.detailData.cityName ? this.detailData.cityName : ''
  52. const countyName = this.detailData && this.detailData.countyName ? this.detailData.countyName : ''
  53. const customerAddr = this.detailData && this.detailData.customerAddr ? this.detailData.customerAddr : ''
  54. const str = (provinceName || cityName || countyName || customerAddr) ? (provinceName + cityName + countyName + customerAddr) : '--'
  55. return str
  56. }
  57. },
  58. data () {
  59. return {
  60. isShow: this.openModal, // 是否打开弹框
  61. detailData: null // 网点数据
  62. }
  63. },
  64. methods: {
  65. // 获取详情
  66. getDetail () {
  67. custFindById({ id: this.itemId }).then(res => {
  68. if (res.status == 200) {
  69. this.detailData = res.data
  70. } else {
  71. this.detailData = null
  72. }
  73. })
  74. }
  75. },
  76. watch: {
  77. // 父页面传过来的弹框状态
  78. openModal (newValue, oldValue) {
  79. this.isShow = newValue
  80. },
  81. // 重定义的弹框状态
  82. isShow (newValue, oldValue) {
  83. if (!newValue) {
  84. this.detailData = null
  85. this.$emit('close')
  86. }
  87. },
  88. itemId (newValue, oldValue) {
  89. if (this.isShow && newValue) {
  90. this.getDetail()
  91. }
  92. }
  93. }
  94. }
  95. </script>
  96. <style lang="less">
  97. .customerManagementDetail-modal{
  98. .ant-modal-body {
  99. padding: 40px 40px 24px;
  100. }
  101. .ant-descriptions-item-label.ant-descriptions-item-colon{
  102. width: 145px;
  103. }
  104. .item-cont {
  105. margin-bottom: 15px;
  106. display: flex;
  107. .item-label {
  108. width: 115px;
  109. font-size: 14px;
  110. color: rgba(0, 0, 0, 0.85);
  111. flex-shrink: 0;
  112. }
  113. .item-main {
  114. flex-grow: 1;
  115. word-break: break-all;
  116. }
  117. }
  118. .btn-cont {
  119. text-align: center;
  120. margin: 35px 0 10px;
  121. }
  122. }
  123. </style>