<template>
|
<GlobalWindow title="运单详情" center :visible.sync="isShowModal" width="600px" :confirm-working="subLoading"
|
@confirm="isShowModal = false">
|
<div class="detail_modal">
|
<div class="head">
|
<div class="plate" v-if="info.plateNumber">
|
<span>{{ info.plateNumber.slice(0, 1) }}</span>
|
<span>{{ info.plateNumber.slice(1, 2) }}</span>
|
<span>·</span>
|
<span>{{ info.plateNumber.slice(2) }}</span>
|
</div>
|
<div class="list">
|
<div class="item">
|
<span>运输单号：</span>
|
<span>{{ info.carryBillCode }}</span>
|
</div>
|
<div class="item">
|
<span>总运输量：</span>
|
<span>{{ info.ioQty }}万支</span>
|
</div>
|
<div class="item">
|
<span>驾驶员：</span>
|
<span>{{ info.driverName }} {{ info.driverPhone }}</span>
|
</div>
|
</div>
|
</div>
|
<div class="title">合同列表</div>
|
<div class="content">
|
<div class="item" v-for="item in info.wmsJobContractVOList">
|
<div class="contract">合同号：{{ item.contractCode }}</div>
|
<div class="placeholder6">收货地：{{ item.address }}</div>
|
<div class="list">
|
<div class="line" v-for="line in item.platformWmsDetailList">
|
<div class="left"><span>物料名称：</span><span>{{ line.materialName }}</span></div>
|
<div class="right"><span>数量：</span><span>{{ line.ioQty }}万支</span></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { platformWmsJobDetail } from '@/api'
|
export default {
|
components: {
|
GlobalWindow
|
},
|
data() {
|
return {
|
isShowModal: false,
|
subLoading: false,
|
info: {},
|
id: ''
|
|
}
|
},
|
methods: {
|
getDetail() {
|
const { id } = this
|
platformWmsJobDetail(id).then(res => {
|
this.info = res
|
})
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/style/variables.scss";
|
|
.detail_modal {
|
font-size: 12px;
|
color: #282828;
|
|
.head {
|
background: rgba(39, 155, 170, 0.05);
|
border-radius: 4px;
|
border: 1px solid #dfe2e8;
|
padding: 16px;
|
|
.plate {
|
display: flex;
|
font-weight: 600;
|
height: 30px;
|
line-height: 30px;
|
font-size: 15px;
|
color: #111111;
|
background-color: #fff;
|
border-radius: 4px;
|
border: 1px solid $primaryColor;
|
padding-right: 4px;
|
width:106px;
|
span {
|
&:nth-of-type(1) {
|
background: $primaryColor;
|
padding: 0 8px;
|
color: #fff;
|
}
|
|
&:nth-of-type(2) {
|
padding-left: 4px;
|
}
|
}
|
}
|
|
.list {
|
display: flex;
|
flex-wrap: wrap;
|
margin-top: 16px;
|
|
.item {
|
width: 50%;
|
margin-bottom: 8px;
|
|
span {
|
&:nth-child(1) {
|
color: #666666;
|
}
|
}
|
}
|
}
|
}
|
|
.title {
|
margin: 16px 0;
|
font-weight: 500;
|
font-size: 16px;
|
color: #222222;
|
}
|
|
.content {
|
.item {
|
border-radius: 4px;
|
border: 1px solid #dfe2e8;
|
padding: 16px;
|
margin-bottom: 10px;
|
|
.list {
|
background: #f7f7f7;
|
border-radius: 4px;
|
padding: 12px 16px;
|
margin-top: 10px;
|
}
|
|
.contract {
|
font-weight: 500;
|
font-size: 15px;
|
color: #279baa;
|
margin-bottom: 4px;
|
}
|
|
.line {
|
display: flex;
|
margin-bottom: 8px;
|
|
&:nth-last-child(1) {
|
margin: 0;
|
}
|
|
div {
|
span {
|
&:nth-child(1) {
|
color: #666666;
|
}
|
}
|
}
|
|
.left {
|
flex: 6;
|
}
|
|
.right {
|
flex: 4;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
