detailModal.vue 6.3 KB

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