|  |  | 
 |  |  | <template> | 
 |  |  |   <GlobalWindow | 
 |  |  |     title="运单详情" | 
 |  |  |     center | 
 |  |  |     :visible.sync="isShowModal" | 
 |  |  |     width="420px" | 
 |  |  |     :confirm-working="subLoading" | 
 |  |  |     @confirm="isShowDetail = false" | 
 |  |  |   > | 
 |  |  |   <GlobalWindow title="运单详情" center :visible.sync="isShowModal" width="600px" :confirm-working="subLoading" | 
 |  |  |     @confirm="isShowModal = false"> | 
 |  |  |     <div class="detail_modal"> | 
 |  |  |       <div class="head"> | 
 |  |  |         <div class="plate">皖A12122</div> | 
 |  |  |         <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>22222</span> | 
 |  |  |             <span>{{ info.carryBillCode }}</span> | 
 |  |  |           </div> | 
 |  |  |           <div class="item"> | 
 |  |  |             <span>总运输量:</span> | 
 |  |  |             <span>22222</span> | 
 |  |  |             <span>{{ info.ioQty }}万支</span> | 
 |  |  |           </div> | 
 |  |  |           <div class="item"> | 
 |  |  |             <span>驾驶员:</span> | 
 |  |  |             <span>22222</span> | 
 |  |  |             <span>{{ info.driverName }} {{ info.driverPhone }}</span> | 
 |  |  |           </div> | 
 |  |  |         </div> | 
 |  |  |       </div> | 
 |  |  |       <div class="title">合同列表</div> | 
 |  |  |       <div class="content"> | 
 |  |  |         <div class="item"> | 
 |  |  |           <div class="contract">合同号:1292992</div> | 
 |  |  |           <div class="placeholder6">收货地:address</div> | 
 |  |  |         <div class="item" v-for="item in info.wmsJobContractVOList"> | 
 |  |  |           <div class="contract"> | 
 |  |  |             <span>合同号:{{ item.contractCode }}</span> | 
 |  |  |             <!-- <div> --> | 
 |  |  |               <span class="scs" v-if="item.status == 1">WMS作业已完成</span> | 
 |  |  |               <span class="pad" v-if="item.status == 0">WMS作业未完成</span> | 
 |  |  |               <span class="err" v-if="item.status == 2">WMS作业已取消</span> | 
 |  |  |  | 
 |  |  |               <span class="scs" v-if="item.lockStatus == 1">电子锁已上锁</span> | 
 |  |  |               <span class="pad" v-if="item.lockStatus == 0">电子锁未上锁</span> | 
 |  |  |             <!-- </div> --> | 
 |  |  |           </div> | 
 |  |  |           <div class="placeholder6">收货地:{{ item.address }}</div> | 
 |  |  |           <div class="list"> | 
 |  |  |             <div class="line"> | 
 |  |  |               <div class="left"><span>物料名称:</span><span>黄山</span></div> | 
 |  |  |               <div class="right"><span>数量:</span><span>100</span></div> | 
 |  |  |             <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> | 
 |  |  | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  | import GlobalWindow from '@/components/common/GlobalWindow' | 
 |  |  | import { getPlatform, PlatformEdit, PlatformDel } from '@/api' | 
 |  |  | import { platformWmsJobDetail } from '@/api' | 
 |  |  | export default { | 
 |  |  |   components: { | 
 |  |  |     GlobalWindow | 
 |  |  | 
 |  |  |     return { | 
 |  |  |       isShowModal: false, | 
 |  |  |       subLoading: false, | 
 |  |  |       param: {} | 
 |  |  |       info: {}, | 
 |  |  |       id: '' | 
 |  |  |  | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     handleSub() { | 
 |  |  |       const { param } = this | 
 |  |  |       this.subLoading = true | 
 |  |  |       PlatformEdit({ | 
 |  |  |         ...param | 
 |  |  |       }).then(res => { | 
 |  |  |         this.subLoading = false | 
 |  |  |         this.isShowEdit = false | 
 |  |  |         this.$tip.success('提交成功') | 
 |  |  |         this.getList() | 
 |  |  |       }, () => { | 
 |  |  |         this.subLoading = false | 
 |  |  |     getDetail() { | 
 |  |  |       const { id } = this | 
 |  |  |       platformWmsJobDetail(id).then(res => { | 
 |  |  |         this.info = res | 
 |  |  |       }) | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | 
 |  |  |  | 
 |  |  | <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 { | 
 |  |  |       width: 90px; | 
 |  |  |       text-align: center; | 
 |  |  |       display: flex; | 
 |  |  |       font-weight: 600; | 
 |  |  |       height: 30px; | 
 |  |  |       line-height: 30px; | 
 |  |  |       font-size: 15px; | 
 |  |  |       color: #111111; | 
 |  |  |       padding: 4px 5px; | 
 |  |  |       font-weight: 700; | 
 |  |  |       border: 1px solid #279baa; | 
 |  |  |       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; | 
 |  |  |         display: flex; | 
 |  |  |         justify-content: space-between; | 
 |  |  |         .scs{ | 
 |  |  |           color: #00ba67; | 
 |  |  |         } | 
 |  |  |         .pad{ | 
 |  |  |           color: #f19c3f; | 
 |  |  |         } | 
 |  |  |         .err{ | 
 |  |  |           color: red; | 
 |  |  |         } | 
 |  |  |       } | 
 |  |  |  | 
 |  |  |       .line { | 
 |  |  |         display: flex; | 
 |  |  |         margin-bottom: 8px; | 
 |  |  |  | 
 |  |  |         &:nth-last-child(1) { | 
 |  |  |           margin: 0; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         div { | 
 |  |  |           span { | 
 |  |  |             &:nth-child(1) { | 
 |  |  | 
 |  |  |             } | 
 |  |  |           } | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .left { | 
 |  |  |           flex: 6; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         .right { | 
 |  |  |           flex: 4; | 
 |  |  |         } |