detailModal.vue 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <template>
  2. <a-modal
  3. centered
  4. class="dealerAccountDetail-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="详情"
  8. v-model="isShow"
  9. @cancel="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. // 接口
  25. import { dealerUserDetail } from '@/api/dealer'
  26. export default {
  27. name: 'DealerAccountDetailModal',
  28. props: {
  29. openModal: { // 弹框显示状态
  30. type: Boolean,
  31. default: false
  32. },
  33. itemId: {
  34. type: [Number, String],
  35. default: ''
  36. }
  37. },
  38. data () {
  39. return {
  40. isShow: this.openModal, // 是否打开弹框
  41. detailData: null // 详情数据
  42. }
  43. },
  44. methods: {
  45. // 获取详情
  46. getDetail () {
  47. dealerUserDetail({ id: this.itemId }).then(res => {
  48. if (res.status == 200) {
  49. this.detailData = res.data
  50. } else {
  51. this.detailData = null
  52. }
  53. })
  54. }
  55. },
  56. watch: {
  57. // 父页面传过来的弹框状态
  58. openModal (newValue, oldValue) {
  59. this.isShow = newValue
  60. this.detailData = null
  61. },
  62. // 重定义的弹框状态
  63. isShow (newValue, oldValue) {
  64. if (!newValue) {
  65. this.$emit('close')
  66. }
  67. },
  68. itemId (newValue, oldValue) {
  69. if (this.isShow && newValue) {
  70. this.getDetail()
  71. }
  72. }
  73. }
  74. }
  75. </script>
  76. <style lang="less">
  77. .dealerAccountDetail-modal{
  78. .ant-modal-body {
  79. padding: 40px 40px 24px;
  80. }
  81. .ant-descriptions-item-label.ant-descriptions-item-colon{
  82. width: 133px;
  83. }
  84. .btn-cont {
  85. text-align: center;
  86. margin: 35px 0 10px;
  87. }
  88. }
  89. </style>