123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123 |
- <template>
- <a-modal
- centered
- class="vinRecord-modal"
- :footer="null"
- :maskClosable="false"
- title="VIN详情"
- v-model="isShow"
- @cancel="isShow=false"
- width="60%">
- <!-- 详情 -->
- <div v-if="itemData">
- <a-descriptions :column="2" size="default">
- <a-descriptions-item label="扫描时间">{{ itemData.scanTime || '--' }}</a-descriptions-item>
- <a-descriptions-item label="VIN">{{ itemData.vinCode || '--' }}</a-descriptions-item>
- <a-descriptions-item label="车型" :span="1">{{ itemData.carType || '--' }}</a-descriptions-item>
- </a-descriptions>
- </div>
- <!-- 表格 -->
- <div class="table-body" v-if="itemData">
- <table>
- <tr>
- <th width="10%">产品分类</th>
- <th width="10%">产品编码</th>
- <th width="50%">产品名称</th>
- <th width="10%">原厂编码</th>
- <th width="10%">当前是否铺货</th>
- <th width="10%">当前可用库存数量</th>
- </tr>
- <!-- 空调滤清器 -->
- <tr v-for="(item,index) in itemData.airConditionerFilter" :key="item.productSn">
- <td v-if="index==0" colSpan="1" :rowSpan="itemData.airConditionerFilter.length">空调滤清器</td>
- <td>{{ item.productCode|| '--' }}</td>
- <td>{{ item.productName|| '--' }}</td>
- <td>{{ item.origCode || '--' }}</td>
- <td>{{ item.isShelfProduct|| '--' }}</td>
- <td>{{ (item.qty||item.qty==0) ? item.qty :'--' }}</td>
- </tr>
- <!-- 空气滤清器 -->
- <tr v-for="(item,index) in itemData.airFilterFlag" :key="item.productSn">
- <td v-if="index==0" colSpan="1" :rowSpan="itemData.airFilterFlag.length">空气滤清器</td>
- <td>{{ item.productCode|| '--' }}</td>
- <td>{{ item.productName|| '--' }}</td>
- <td>{{ item.origCode || '--' }}</td>
- <td>{{ item.isShelfProduct|| '--' }}</td>
- <td>{{ (item.qty||item.qty==0) ? item.qty :'--' }}</td>
- </tr>
- <!-- 机油滤清器 -->
- <tr v-for="(item,index) in itemData.engineOilFilterFlag" :key="item.productSn">
- <td v-if="index==0" colSpan="1" :rowSpan="itemData.engineOilFilterFlag.length">机油滤清器</td>
- <td>{{ item.productCode|| '--' }}</td>
- <td>{{ item.productName|| '--' }}</td>
- <td>{{ item.origCode || '--' }}</td>
- <td>{{ item.isShelfProduct|| '--' }}</td>
- <td>{{ (item.qty||item.qty==0) ? item.qty : '--' }}</td>
- </tr>
- </table>
- </div>
- <div class="btn-cont"><a-button id="vinRecord-modal-back" @click="isShow = false">关闭</a-button></div>
- </a-modal>
- </template>
- <script>
- export default {
- name: 'DetailModal',
- props: {
- openModal: { // 弹框显示状态
- type: Boolean,
- default: false
- },
- itemData: {
- type: Object,
- default: function () {
- return []
- }
- }
- },
- data () {
- return {
- isShow: this.openModal// 是否打开弹框
- }
- },
- watch: {
- // 父页面传过来的弹框状态
- openModal (newValue, oldValue) {
- this.isShow = newValue
- },
- // 重定义的弹框状态
- isShow (newValue, oldValue) {
- if (!newValue) {
- this.$emit('close')
- }
- // else {
- // this.getDetailList()
- // }
- }
- }
- }
- </script>
- <style lang="less">
- .vinRecord-modal{
- .ant-modal-body {
- padding: 40px 40px 24px;
- }
- .btn-cont {
- text-align: center;
- margin: 35px 0 10px;
- }
- .table-body{
- table{
- th,td{
- text-align: center;
- padding: 5px;
- border:1px solid #ddd;
- }
- th{
- background:#f8f8f8;
- }
- }
- }
- }
- </style>
|