detailModal.vue 4.2 KB

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