detailModal.vue 5.8 KB

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