detail.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <template>
  2. <div>
  3. <a-page-header :ghost="false" :backIcon="false" class="newProductDetail-back">
  4. <!-- 自定义的二级文字标题 -->
  5. <template slot="subTitle">
  6. <a id="newProductDetail-back-btn" href="javascript:;" @click="goBack">
  7. <a-icon type="left" />
  8. 返回
  9. </a>
  10. </template>
  11. </a-page-header>
  12. <div class="newProductDetail-modal">
  13. <!-- 产品详情 -->
  14. <h4>{{ (detailsData && detailsData.name) || '--' }}</h4>
  15. <div class="productHead">
  16. <div class="productInfo">
  17. <a-descriptions bordered :column="2" size="small">
  18. <a-descriptions-item label="产品品牌:">{{ (detailsData && detailsData.productBrandName) || '--' }}</a-descriptions-item>
  19. <a-descriptions-item label="产品编码:">{{ (detailsData && detailsData.code) || '--' }}</a-descriptions-item>
  20. <a-descriptions-item label="原厂编码:">{{ (detailsData && detailsData.origCode) || '--' }}</a-descriptions-item>
  21. <a-descriptions-item label="商品尺寸:">{{ (detailsData && detailsData.size) || '--' }}</a-descriptions-item>
  22. <a-descriptions-item label="重量:">{{ (detailsData && detailsData.weight) || '--' }}</a-descriptions-item>
  23. <a-descriptions-item label="计量单位:">{{ (detailsData && detailsData.unit) || '--' }}</a-descriptions-item>
  24. </a-descriptions>
  25. <div class="productDetail">
  26. <h4>产品介绍</h4>
  27. <div class="productDesc">
  28. <div v-if="detailsData && detailsData.description" v-html="detailsData.description"></div>
  29. <span v-else>暂无产品介绍</span>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="productImg" v-if="detailsData && detailsData.productMsg">
  34. <a-carousel arrows>
  35. <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1"><a-icon type="left-circle" /></div>
  36. <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px"><a-icon type="right-circle" /></div>
  37. <div><img :src="detailsData.productMsg" /></div>
  38. </a-carousel>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. </template>
  44. <script>
  45. import { productDetail } from '@/api/product.js'
  46. export default {
  47. name: 'ProductInfoDetail',
  48. computed: {
  49. productTypeName () {
  50. const productTypeName1 = this.detailsData && this.detailsData.productTypeName1 ? this.detailsData.productTypeName1 : ''
  51. const productTypeName2 = this.detailsData && this.detailsData.productTypeName2 ? ' > ' + this.detailsData.productTypeName2 : ''
  52. const productTypeName3 = this.detailsData && this.detailsData.productTypeName3 ? ' > ' + this.detailsData.productTypeName3 : ''
  53. return productTypeName1 + productTypeName2 + productTypeName3
  54. }
  55. },
  56. data () {
  57. return {
  58. itemId: null,
  59. detailsData: null, // 详情数据
  60. prevPageInfo: null
  61. }
  62. },
  63. methods: {
  64. // 获取详情
  65. getDetail () {
  66. this.detailsData = null
  67. productDetail({ sn: this.itemId }).then(res => {
  68. if (res.status == 200) {
  69. this.detailsData = res.data
  70. } else {
  71. this.detailsData = null
  72. }
  73. })
  74. },
  75. // 返回
  76. goBack () {
  77. this.$router.push({ path: this.prevPageInfo && this.prevPageInfo.path, query: { closeLastOldTab: true } })
  78. }
  79. },
  80. mounted () {
  81. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  82. this.itemId = this.$route.params.sn
  83. this.getDetail()
  84. }
  85. },
  86. activated () {
  87. // 如果是新页签打开或者进入新的子页(例:存在列表第2条数据编辑页页签时再打开第4条数据的编辑页),则重置当前页面 (当前产品详情页的上级页分别有 上下线产品列表、箭冠产品列表和采购新增编辑页。因此处判断是否为子页是通过上级页路由路径是否有'/list',故需单独处理)
  88. if ((this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) || (this.prevPageInfo && (this.prevPageInfo.name == 'purchaseOrderEdit' || this.prevPageInfo.name == 'purchaseOrderAdd'))) {
  89. this.itemId = this.$route.params.sn
  90. this.getDetail()
  91. }
  92. },
  93. beforeRouteEnter (to, from, next) {
  94. next(vm => {
  95. vm.prevPageInfo = from
  96. })
  97. }
  98. }
  99. </script>
  100. <style lang="less">
  101. /* For demo */
  102. .ant-carousel .slick-slide {
  103. text-align: center;
  104. overflow: hidden;
  105. border: 1px solid #eee;
  106. display: flex;
  107. justify-content: center;
  108. align-items: center;
  109. }
  110. .ant-carousel .custom-slick-arrow {
  111. width: 25px;
  112. height: 25px;
  113. font-size: 25px;
  114. color: #fff;
  115. opacity: 0.3;
  116. }
  117. .ant-carousel .custom-slick-arrow:before {
  118. display: none;
  119. }
  120. .ant-carousel .custom-slick-arrow:hover {
  121. opacity: 0.5;
  122. }
  123. .ant-carousel .slick-slide img {
  124. width: 100%;
  125. max-height: 100%;
  126. }
  127. .newProductDetail-back {
  128. margin-bottom: 10px;
  129. }
  130. .newProductDetail-modal {
  131. background-color: #fff;
  132. padding: 15px;
  133. h4 {
  134. font-size: 18px;
  135. }
  136. .productHead {
  137. display: flex;
  138. .productImg {
  139. width: 240px;
  140. }
  141. .productInfo {
  142. flex-grow: 1;
  143. margin-right: 10px;
  144. }
  145. .sycxImg {
  146. margin-top: 10px;
  147. p {
  148. font-size: 14px;
  149. padding: 5px 10px;
  150. background-color: #dcf1ff;
  151. }
  152. img {
  153. width: 100px;
  154. }
  155. }
  156. }
  157. .productDetail {
  158. border: 1px solid #eee;
  159. margin-top: 10px;
  160. h4 {
  161. font-size: 14px;
  162. padding: 5px 10px;
  163. background-color: #dcf1ff;
  164. }
  165. .productDesc {
  166. padding: 15px;
  167. }
  168. }
  169. .ant-descriptions-item-label.ant-descriptions-item-colon {
  170. width: 120px;
  171. }
  172. .btn-cont {
  173. text-align: center;
  174. margin: 35px 0 10px;
  175. }
  176. }
  177. </style>