detailModal.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <template>
  2. <a-modal
  3. centered
  4. class="vinRecord-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="VIN详情"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. width="60%">
  11. <!-- 详情 -->
  12. <div v-if="itemData">
  13. <a-descriptions :column="2" size="default">
  14. <a-descriptions-item label="扫描时间">{{ itemData.scanTime || '--' }}</a-descriptions-item>
  15. <a-descriptions-item label="VIN">{{ itemData.vinCode || '--' }}</a-descriptions-item>
  16. <a-descriptions-item label="车型" :span="1">{{ itemData.carType || '--' }}</a-descriptions-item>
  17. </a-descriptions>
  18. </div>
  19. <!-- 表格 -->
  20. <div class="table-body" v-if="itemData">
  21. <table>
  22. <tr>
  23. <th width="10%">产品分类</th>
  24. <th width="10%">产品编码</th>
  25. <th width="50%">产品名称</th>
  26. <th width="10%">原厂编码</th>
  27. <th width="10%">当前是否铺货</th>
  28. <th width="10%">当前可用库存数量</th>
  29. </tr>
  30. <!-- 空调滤清器 -->
  31. <tr v-for="(item,index) in itemData.airConditionerFilter" :key="item.productSn">
  32. <td v-if="index==0" colSpan="1" :rowSpan="itemData.airConditionerFilter.length">空调滤清器</td>
  33. <td>{{ item.productCode|| '--' }}</td>
  34. <td>{{ item.productName|| '--' }}</td>
  35. <td>{{ item.origCode || '--' }}</td>
  36. <td>{{ item.isShelfProduct|| '--' }}</td>
  37. <td>{{ (item.qty||item.qty==0) ? item.qty :'--' }}</td>
  38. </tr>
  39. <!-- 空气滤清器 -->
  40. <tr v-for="(item,index) in itemData.airFilterFlag" :key="item.productSn">
  41. <td v-if="index==0" colSpan="1" :rowSpan="itemData.airFilterFlag.length">空气滤清器</td>
  42. <td>{{ item.productCode|| '--' }}</td>
  43. <td>{{ item.productName|| '--' }}</td>
  44. <td>{{ item.origCode || '--' }}</td>
  45. <td>{{ item.isShelfProduct|| '--' }}</td>
  46. <td>{{ (item.qty||item.qty==0) ? item.qty :'--' }}</td>
  47. </tr>
  48. <!-- 机油滤清器 -->
  49. <tr v-for="(item,index) in itemData.engineOilFilterFlag" :key="item.productSn">
  50. <td v-if="index==0" colSpan="1" :rowSpan="itemData.engineOilFilterFlag.length">机油滤清器</td>
  51. <td>{{ item.productCode|| '--' }}</td>
  52. <td>{{ item.productName|| '--' }}</td>
  53. <td>{{ item.origCode || '--' }}</td>
  54. <td>{{ item.isShelfProduct|| '--' }}</td>
  55. <td>{{ (item.qty||item.qty==0) ? item.qty : '--' }}</td>
  56. </tr>
  57. </table>
  58. </div>
  59. <div class="btn-cont"><a-button id="vinRecord-modal-back" @click="isShow = false">关闭</a-button></div>
  60. </a-modal>
  61. </template>
  62. <script>
  63. export default {
  64. name: 'DetailModal',
  65. props: {
  66. openModal: { // 弹框显示状态
  67. type: Boolean,
  68. default: false
  69. },
  70. itemData: {
  71. type: Object,
  72. default: function () {
  73. return []
  74. }
  75. }
  76. },
  77. data () {
  78. return {
  79. isShow: this.openModal// 是否打开弹框
  80. }
  81. },
  82. watch: {
  83. // 父页面传过来的弹框状态
  84. openModal (newValue, oldValue) {
  85. this.isShow = newValue
  86. },
  87. // 重定义的弹框状态
  88. isShow (newValue, oldValue) {
  89. if (!newValue) {
  90. this.$emit('close')
  91. }
  92. // else {
  93. // this.getDetailList()
  94. // }
  95. }
  96. }
  97. }
  98. </script>
  99. <style lang="less">
  100. .vinRecord-modal{
  101. .ant-modal-body {
  102. padding: 40px 40px 24px;
  103. }
  104. .btn-cont {
  105. text-align: center;
  106. margin: 35px 0 10px;
  107. }
  108. .table-body{
  109. table{
  110. th,td{
  111. text-align: center;
  112. padding: 5px;
  113. border:1px solid #ddd;
  114. }
  115. th{
  116. background:#f8f8f8;
  117. }
  118. }
  119. }
  120. }
  121. </style>