detailModal.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <template>
  2. <a-modal
  3. centered
  4. class="dealerAccountDetail-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="详情"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. :width="800">
  11. <div>
  12. <a-descriptions bordered size="small" :column="2">
  13. <a-descriptions-item label="经销商名称:">{{ (detailData&&detailData.org&&detailData.org.name) ? detailData.org.name : '--' }}</a-descriptions-item>
  14. <a-descriptions-item label="管理员姓名:">{{ detailData&&detailData.name ? detailData.name : '--' }}</a-descriptions-item>
  15. <a-descriptions-item label="管理员手机:">{{ detailData&&detailData.phone ? detailData.phone : '--' }}</a-descriptions-item>
  16. <a-descriptions-item label="管理员账号:">{{ detailData&&detailData.loginName ? detailData.loginName : '--' }}</a-descriptions-item>
  17. <a-descriptions-item label="最大可开通用户数(含管理员账号):">{{ (detailData&&detailData.org&&detailData.org.childUserMaxNum) ? detailData.org.childUserMaxNum : '--' }}</a-descriptions-item>
  18. </a-descriptions>
  19. <div class="btn-cont"><a-button id="dealerAccountDetail-modal-back" @click="isShow = false">关闭</a-button></div>
  20. </div>
  21. </a-modal>
  22. </template>
  23. <script>
  24. import { dealerUserDetail } from '@/api/dealer'
  25. export default {
  26. name: 'DealerAccountDetailModal',
  27. props: {
  28. openModal: { // 弹框显示状态
  29. type: Boolean,
  30. default: false
  31. },
  32. itemId: {
  33. type: [Number, String],
  34. default: ''
  35. }
  36. },
  37. data () {
  38. return {
  39. isShow: this.openModal, // 是否打开弹框
  40. detailData: null // 详情数据
  41. }
  42. },
  43. methods: {
  44. // 获取详情
  45. getDetail () {
  46. dealerUserDetail({ id: this.itemId }).then(res => {
  47. if (res.status == 200) {
  48. this.detailData = res.data
  49. } else {
  50. this.detailData = null
  51. }
  52. })
  53. }
  54. },
  55. watch: {
  56. // 父页面传过来的弹框状态
  57. openModal (newValue, oldValue) {
  58. this.isShow = newValue
  59. this.detailData = null
  60. },
  61. // 重定义的弹框状态
  62. isShow (newValue, oldValue) {
  63. if (!newValue) {
  64. this.$emit('close')
  65. }
  66. },
  67. itemId (newValue, oldValue) {
  68. if (this.isShow && newValue) {
  69. this.getDetail()
  70. }
  71. }
  72. }
  73. }
  74. </script>
  75. <style lang="less">
  76. .dealerAccountDetail-modal{
  77. .ant-modal-body {
  78. padding: 40px 40px 24px;
  79. }
  80. .ant-descriptions-item-label.ant-descriptions-item-colon{
  81. width: 133px;
  82. }
  83. .btn-cont {
  84. text-align: center;
  85. margin: 35px 0 10px;
  86. }
  87. }
  88. </style>