warrantyInfoModal.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. <template>
  2. <a-modal
  3. centered
  4. class="warrantyInfo-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="质保信息"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="600">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <div v-if="detailsData">
  13. <div class="infoList">
  14. <div class="infoTopList">
  15. <div class="uniqueStyle">
  16. <div>轮胎名称:</div>
  17. <a-tooltip placement="topLeft">
  18. <template slot="title">
  19. <span>{{ detailsData.productName || '--' }}</span>
  20. </template>
  21. <div class="text-overflow">{{ detailsData.productName || '--' }}</div>
  22. </a-tooltip>
  23. </div>
  24. <a-descriptions :column="1">
  25. <a-descriptions-item label="产品编码">
  26. {{ productCode || '--' }}
  27. </a-descriptions-item>
  28. <a-descriptions-item label="轮胎唯一码">
  29. {{ detailsData.traceCode || '--' }}
  30. </a-descriptions-item>
  31. <a-descriptions-item label="质保时间" v-if="detailsData.warrantyStartDate">
  32. {{ detailsData.warrantyStartDate }}{{ detailsData.warrantyEndDate?'至'+detailsData.warrantyEndDate:'' }}
  33. </a-descriptions-item>
  34. <a-descriptions-item label="质保时间" v-else>
  35. --
  36. </a-descriptions-item>
  37. </a-descriptions>
  38. </div>
  39. <div class="imgBox">
  40. <img
  41. v-if="detailsData.productMsg"
  42. style="margin-bottom:6px;object-fit: cover;border:1px dashed #ccc;"
  43. :src="detailsData.productMsg"
  44. alt="图片走丢啦"
  45. width="86"
  46. height="55"
  47. align="middle"
  48. @click="viewLargeImg"/>
  49. <div style="text-align:right;">
  50. <img
  51. v-if="detailsData.state ==='END'"
  52. src="@/assets/img/outOfDateImg.png"
  53. alt=""
  54. width="50"
  55. height="50" />
  56. <img v-if="detailsData.state ==='RUN'" src="@/assets/img/ongoing.png" alt="" width="50" height="50" />
  57. </div>
  58. </div>
  59. </div>
  60. <div class="infoList">
  61. <a-descriptions title="门店信息" :column="1">
  62. <a-descriptions-item label="门店名称">
  63. {{ detailsData.storeName|| '--' }}
  64. </a-descriptions-item>
  65. <a-descriptions-item label="姓名">
  66. {{ detailsData.storeManager ||'--' }}
  67. </a-descriptions-item>
  68. <a-descriptions-item label="电话">
  69. {{ detailsData.storeMobile ||'--' }}
  70. </a-descriptions-item>
  71. <a-descriptions-item label="汽配经销商">
  72. {{ detailsData.dealerName ||'--' }}
  73. </a-descriptions-item>
  74. </a-descriptions>
  75. </div>
  76. <div class="infoList">
  77. <a-descriptions title="车辆信息" :column="1">
  78. <a-descriptions-item label="车辆品牌">
  79. {{ detailsData.carBrand ||'--' }}
  80. </a-descriptions-item>
  81. <a-descriptions-item label="车型">
  82. {{ detailsData.carModel ||'--' }}
  83. </a-descriptions-item>
  84. <a-descriptions-item label="里程数">
  85. {{ detailsData.mileage ||'--' }}
  86. </a-descriptions-item>
  87. <a-descriptions-item label="车牌号">
  88. {{ detailsData.vehicleNumber ||'--' }}
  89. </a-descriptions-item>
  90. <a-descriptions-item label="客户姓名">
  91. {{ detailsData.customName ||'--' }}
  92. </a-descriptions-item>
  93. <a-descriptions-item label="手机号码">
  94. {{ detailsData.customMobile ||'--' }}
  95. </a-descriptions-item>
  96. </a-descriptions>
  97. </div>
  98. </div>
  99. <div class="btn-cont">
  100. <a-button id="warrantyInfo-back" @click="isShow = false">关闭</a-button>
  101. </div>
  102. </a-spin>
  103. <!-- 查看图片 -->
  104. <a-modal v-model="openImgModal" :title="null" :footer="null" :width="600" centered>
  105. <div class="viewImg">
  106. <img
  107. :src="detailsData.productMsg"
  108. alt="图片走丢啦"
  109. width="100%"
  110. height="100%"
  111. align="middle"/>
  112. </div>
  113. </a-modal>
  114. </a-modal>
  115. </template>
  116. <script>
  117. import { getWarrantyInfo } from '@/api/reportData'
  118. export default {
  119. name: 'ProductPricingAuditModal',
  120. props: {
  121. openModal: { // 弹框显示状态
  122. type: Boolean,
  123. default: false
  124. },
  125. itemSn: {
  126. type: String,
  127. default: ''
  128. },
  129. productCode: {
  130. type: String,
  131. default: ''
  132. }
  133. },
  134. data () {
  135. return {
  136. isShow: this.openModal, // 是否打开弹框
  137. spinning: false,
  138. detailsData: null, // 详情数据
  139. openImgModal: false
  140. }
  141. },
  142. methods: {
  143. // 获取详情
  144. getDetail () {
  145. getWarrantyInfo({ id: this.itemSn }).then(res => {
  146. if (res.status == 200) {
  147. this.detailsData = res.data
  148. } else {
  149. this.detailsData = null
  150. }
  151. })
  152. },
  153. // 查看图片
  154. viewLargeImg () {
  155. this.openImgModal = true
  156. }
  157. },
  158. watch: {
  159. // 父页面传过来的弹框状态
  160. openModal (newValue, oldValue) {
  161. this.isShow = newValue
  162. },
  163. // 重定义的弹框状态
  164. isShow (newValue, oldValue) {
  165. if (!newValue) {
  166. this.$emit('close')
  167. } else {
  168. this.getDetail()
  169. }
  170. }
  171. }
  172. }
  173. </script>
  174. <style lang="less">
  175. .warrantyInfo-modal{
  176. .ant-modal-body {
  177. padding: 30px 40px 24px;
  178. }
  179. .infoList {
  180. margin-bottom:26px;
  181. .uniqueStyle{
  182. display:flex;
  183. algin-items:center;
  184. margin-bottom:5px;
  185. div:last-child{
  186. width:78%;
  187. }
  188. }
  189. .ant-descriptions-title{
  190. margin-bottom:10px !important;
  191. }
  192. .ant-descriptions-row > th, .ant-descriptions-row > td{
  193. padding-bottom: 5px !important;
  194. }
  195. .infoTopList{
  196. max-width:70%;
  197. position: relative;
  198. .ant-descriptions-row{
  199. font-weight: bold;
  200. }
  201. .ant-descriptions-row .ant-descriptions-item > span{
  202. font-weight: bold;
  203. }
  204. }
  205. .imgBox{
  206. position:absolute;
  207. top:0;
  208. left:71%;
  209. }
  210. }
  211. .btn-cont {
  212. text-align: center;
  213. margin: 35px 0 20px;
  214. }
  215. }
  216. </style>