detailModal.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <template>
  2. <a-modal
  3. centered
  4. class="productInfoDetail-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="产品详情"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="800">
  11. <!-- 产品详情 -->
  12. <div>
  13. <a-descriptions bordered :column="2" size="small">
  14. <a-descriptions-item label="产品名称:">{{ detailsData&&detailsData.name || '--' }}</a-descriptions-item>
  15. <a-descriptions-item label="产品编码:">{{ detailsData&&detailsData.code || '--' }}</a-descriptions-item>
  16. <a-descriptions-item label="原厂编码:">{{ detailsData&&detailsData.origCode || '--' }}</a-descriptions-item>
  17. <a-descriptions-item label="基本单位:">{{ detailsData&&detailsData.unit || '--' }}</a-descriptions-item>
  18. <a-descriptions-item label="产品品牌:">{{ detailsData&&detailsData.productBrandName || '--' }}</a-descriptions-item>
  19. <a-descriptions-item label="产品分类:">{{ productTypeName || '--' }}</a-descriptions-item>
  20. <a-descriptions-item label="经销批发价:">{{ detailsData&&(detailsData.specialPrice || detailsData.specialPrice==0) ? toThousands(detailsData.specialPrice,2) : '--' }}</a-descriptions-item>
  21. <a-descriptions-item label="终端价:">{{ detailsData&&(detailsData.terminalPrice || detailsData.terminalPrice==0) ? toThousands(detailsData.terminalPrice,2) : '--' }}</a-descriptions-item>
  22. <a-descriptions-item label="车主价:">{{ detailsData&&(detailsData.carOwnersPrice || detailsData.carOwnersPrice==0) ? toThousands(detailsData.carOwnersPrice,2) : '--' }}</a-descriptions-item>
  23. </a-descriptions>
  24. <div class="btn-cont"><a-button id="product-management-detail-modal-back" @click="isShow = false">返回列表</a-button></div>
  25. </div>
  26. </a-modal>
  27. </template>
  28. <script>
  29. import { commonMixin } from '@/utils/mixin'
  30. import { dealerProductDetail } from '@/api/dealerProduct'
  31. export default {
  32. name: 'ProductInfoDetailModal',
  33. mixins: [commonMixin],
  34. props: {
  35. openModal: { // 弹框显示状态
  36. type: Boolean,
  37. default: false
  38. },
  39. itemId: {
  40. type: [Number, String],
  41. default: ''
  42. }
  43. },
  44. computed: {
  45. productTypeName () {
  46. const productTypeName1 = this.detailsData && this.detailsData.productTypeName1 ? this.detailsData.productTypeName1 : ''
  47. const productTypeName2 = this.detailsData && this.detailsData.productTypeName2 ? ' > ' + this.detailsData.productTypeName2 : ''
  48. const productTypeName3 = this.detailsData && this.detailsData.productTypeName3 ? ' > ' + this.detailsData.productTypeName3 : ''
  49. return productTypeName1 + productTypeName2 + productTypeName3
  50. }
  51. },
  52. data () {
  53. return {
  54. isShow: this.openModal, // 是否打开弹框
  55. detailsData: null // 详情数据
  56. }
  57. },
  58. methods: {
  59. // 获取详情
  60. getDetail () {
  61. dealerProductDetail({ id: this.itemId }).then(res => {
  62. if (res.status == 200) {
  63. this.detailsData = res.data
  64. } else {
  65. this.detailsData = null
  66. }
  67. })
  68. }
  69. },
  70. watch: {
  71. // 父页面传过来的弹框状态
  72. openModal (newValue, oldValue) {
  73. this.isShow = newValue
  74. },
  75. // 重定义的弹框状态
  76. isShow (newValue, oldValue) {
  77. if (!newValue) {
  78. this.$emit('close')
  79. this.detailsData = null
  80. }
  81. },
  82. itemId (newValue, oldValue) {
  83. if (this.isShow && newValue) {
  84. this.getDetail()
  85. }
  86. }
  87. }
  88. }
  89. </script>
  90. <style lang="less">
  91. .productInfoDetail-modal{
  92. .ant-modal-body {
  93. padding: 40px 40px 24px;
  94. }
  95. .ant-descriptions-item-label.ant-descriptions-item-colon{
  96. width: 120px;
  97. }
  98. .btn-cont {
  99. text-align: center;
  100. margin: 35px 0 10px;
  101. }
  102. }
  103. </style>