detailModal.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  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 size="small" :column="2">
  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.productBrandName || '--' }}</a-descriptions-item>
  18. <a-descriptions-item label="产品分类:">{{ productTypeName || '--' }}</a-descriptions-item>
  19. <a-descriptions-item label="其他编码:">{{ detailsData&&detailsData.otherCode || '--' }}</a-descriptions-item>
  20. <a-descriptions-item label="包装数:">
  21. {{ detailsData&&detailsData.packQty || '--' }}
  22. {{ detailsData&&detailsData.unit || '--' }}/
  23. {{ detailsData&&detailsData.packQtyUnit || '--' }}
  24. </a-descriptions-item>
  25. <a-descriptions-item label="箭冠产品:">{{ detailsData&&detailsData.arrowFalgDictValue || '--' }}</a-descriptions-item>
  26. <a-descriptions-item label="条形码:" :span="2">{{ detailsData&&detailsData.qrCode || '--' }}</a-descriptions-item>
  27. <a-descriptions-item label="出库仓库:">{{ detailsData&&detailsData.outWarehouseName || '--' }}</a-descriptions-item>
  28. <a-descriptions-item label="退货仓库:">{{ detailsData&&detailsData.returnWarehouseName || '--' }}</a-descriptions-item>
  29. <a-descriptions-item label="产品图片:" :span="2">
  30. <div style="display: flex;">
  31. <p class="pic-box" v-for="(item,index) in fileList" :key="index">
  32. <img :src="item.imageUrl" title="点击查看大图" class="productPic" @click="getPreview(item.imageUrl)" />
  33. </p>
  34. </div>
  35. <span v-if="fileList.length == 0">--</span>
  36. </a-descriptions-item>
  37. <a-descriptions-item label="单位:">{{ detailsData&&detailsData.unit || '--' }}</a-descriptions-item>
  38. <a-descriptions-item label="产品尺寸:">{{ detailsData&&detailsData.size || '--' }}</a-descriptions-item>
  39. <a-descriptions-item label="产品内盒尺寸:">{{ detailsData&&detailsData.boxSize || '--' }}</a-descriptions-item>
  40. <a-descriptions-item label="产品重量:">{{ detailsData&&detailsData.weight || '--' }}</a-descriptions-item>
  41. <a-descriptions-item label="颜色:" span="2">{{ detailsData&&detailsData.color || '--' }}</a-descriptions-item>
  42. <a-descriptions-item label="产品说明:" span="2">
  43. <div v-html="detailsData.description" v-if="detailsData&&detailsData.description" style="overflow-y: scroll;height: 300px;"></div>
  44. <div v-else>--</div>
  45. </a-descriptions-item>
  46. <a-descriptions-item label="其他说明:" span="2">
  47. <div v-html="detailsData.otherDesc" v-if="detailsData&&detailsData.otherDesc"></div>
  48. <div v-else>--</div>
  49. </a-descriptions-item>
  50. </a-descriptions>
  51. <div class="btn-cont"><a-button id="product-management-detail-modal-back" @click="isShow = false">返回列表</a-button></div>
  52. </div>
  53. <a-modal :visible="previewVisible" :footer="null" centered :maskClosable="false" @cancel="previewVisible=false">
  54. <img alt="example" style="width: 100%" :src="previewImage" />
  55. </a-modal>
  56. </a-modal>
  57. </template>
  58. <script>
  59. import { productSnDetail } from '@/api/product'
  60. export default {
  61. name: 'ProductInfoDetailModal',
  62. props: {
  63. openModal: { // 弹框显示状态
  64. type: Boolean,
  65. default: false
  66. },
  67. itemSn: {
  68. type: [Number, String],
  69. default: ''
  70. }
  71. },
  72. computed: {
  73. productTypeName () {
  74. const productTypeName2 = this.detailsData && this.detailsData.productTypeName2 ? this.detailsData.productTypeName2 : ''
  75. const productTypeName3 = this.detailsData && this.detailsData.productTypeName3 ? ' > ' + this.detailsData.productTypeName3 : ''
  76. return productTypeName2 + productTypeName3
  77. }
  78. },
  79. data () {
  80. return {
  81. isShow: this.openModal, // 是否打开弹框
  82. detailsData: null, // 详情数据
  83. previewVisible: false,
  84. previewImage: '',
  85. fileList: []
  86. }
  87. },
  88. methods: {
  89. // 获取详情
  90. getDetail () {
  91. productSnDetail({ sn: this.itemSn }).then(res => {
  92. if (res.status == 200) {
  93. this.detailsData = res.data
  94. if (res.data && res.data.productPicList && res.data.productPicList.length > 0) {
  95. this.fileList = res.data.productPicList
  96. } else {
  97. this.fileList = []
  98. }
  99. } else {
  100. this.detailsData = null
  101. }
  102. })
  103. },
  104. // 查看大图
  105. getPreview (url) {
  106. this.previewImage = url
  107. this.previewVisible = true
  108. }
  109. },
  110. watch: {
  111. // 父页面传过来的弹框状态
  112. openModal (newValue, oldValue) {
  113. this.isShow = newValue
  114. },
  115. // 重定义的弹框状态
  116. isShow (newValue, oldValue) {
  117. if (!newValue) {
  118. this.$emit('close')
  119. this.detailsData = null
  120. }
  121. },
  122. itemSn (newValue, oldValue) {
  123. if (this.isShow && newValue) {
  124. this.getDetail()
  125. }
  126. }
  127. }
  128. }
  129. </script>
  130. <style lang="less">
  131. .productInfoDetail-modal{
  132. .ant-modal-body {
  133. padding: 40px 40px 24px;
  134. }
  135. .pic-box{
  136. width: 100px;
  137. height: 100px;
  138. margin-right: 10px;
  139. display: inline-flex;
  140. align-items: center;
  141. border: 1px dashed #d9d9d9;
  142. border-radius: 4px;
  143. padding: 3px;
  144. .productPic{
  145. cursor: pointer;
  146. max-width: 100%;
  147. max-height: 100%;
  148. display: block;
  149. margin: 0 auto;
  150. }
  151. }
  152. .btn-cont {
  153. text-align: center;
  154. margin: 35px 0 10px;
  155. }
  156. .ant-descriptions-item-label.ant-descriptions-item-colon{
  157. width: 130px;
  158. }
  159. .ant-descriptions-item-content{
  160. max-width: 229px;
  161. }
  162. }
  163. </style>