logistics-task.vue 13.9 KB
<!-- <link rel="stylesheet" href="task.css"> -->
<style scoped>
  @import '/task.css';
/*  .container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}*/
/*@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}*/
</style>
<template>
   	<div class="container resource close-left-menu contaNEW">
      <div class="pop-banner clearfix">
			<h3 class="current-module">物流订单跟踪</h3>
			<div class="operate-btns">
				<a href="javascript:history.go(-1)" class="fbtn fb-return">返回</a>
			</div>
		</div>
		<div class="content" style='overflow: inherit;'>
    

		<div class="bd-lft">
		    <div id="container" class="main" style="width: 670px;">


		<div class="fheader" style="margin-bottom: 0px;">
		    <h4 class="fh-tit fh-wlqk">物流情况</h4>
		</div>
		    <div class="row" style="margin-top:5px;">
		        <div class="col-md-10 col-lg-10">
		            <p class="p_s3">
		                业务单号:{{billno}}
		            </p>
		            </div>
		              <!--   <div class="col-md-2 col-lg-2 text-right">
		                    <div class="from-button">
		                            <a href="/Logistics/BillRetrospective/Distribution?bbillno=401964341&amp;po=20171115102257340001" class="green-button" id="pickup">配送信息</a>
		                    </div>
		                </div> -->
		        </div>
				<table class="table table-hover table-striped table-1f">
				    <thead>
				        <tr>
				            <th style="width:160px;" class="text-center">物流执行方</th>
				            <th class="text-center">物流状态</th>
				            <th class="text-center">进度详情</th>
				        </tr>
				    </thead>
				        <tbody v-if='tracFlag'>
				                <tr  v-if='tracings1.length>0'>
				                    <td>
				                        <span class="span_sh">
				                            <p><b>货主:{{details.CargoOwnerName}}</b></p>
				                        </span>
				                        <p class="p_b2"></p>
				                    </td>
				                    <td>
				                        <div class="div_sh1">
				                                <p v-for='item in tracings1'><i>{{item.ExcuteState | excuteState}}</i>{{item.ExcuteDate}}</p>
				                                <!-- <p><i>提交</i>2017/11/15 10:25:01</p> -->
				                        </div>
				                    </td>
				                    <td></td>
				                </tr>
				                 <tr  v-if='tracings2.length>0'>
				                    <td>
				                        <span class="span_sh span_sha" id="span-sh">
				                            <p><b>公司:{{details.TPWareHouseCorpName}}</b></p>
				                        </span>
				                        <p class="p_b2" id="p_b2"></p>
				                    </td>
				                    <td>
				                        <div class="div_sh1">
				                        	<p v-for='item in tracings2'><i>{{item.ExcuteState | excuteState}}</i>{{item.ExcuteDate}}</p>
				                               <!--  <p><i>运营接单</i>2017/11/15 10:28:13</p>
				                                <p><i>物流集单中</i>2017/11/15 10:28:20</p>
				                                <p><i>物流派单中</i>2017/11/15 10:28:25</p>
				                                <p><i>物流派单确认</i>2017/11/15 10:28:26</p> -->
				                        </div>
				                    </td>
				                    <td></td>
				                </tr>
				                <tr  v-if='tracings3.length>0'>
				                    <td>
				                        <span class="span_sh span_shb">
				                            <p><b>承运商:{{details.DeliverName}}</b></p>
				                        </span>
				                        <p class="p_b2"></p>
				                    </td>
				                    <td>
				                        <div class="div_sh1 div_sh1p">
				                        	<p v-for='item in tracings3'><i>{{item.ExcuteState | excuteState}}</i>{{item.ExcuteDate}}</p>
				                               <!--  <p><i>物流出库结束</i>2017/11/15 10:27:58</p>
				                                <p><i>物流入库上架</i>2017/11/15 10:27:44</p> -->
				                        </div>
				                    </td>
				                    <td></td>
				                </tr>
				                <tr  v-if='tracings4.length>0'>
				                    <td>
				                        <span class="span_sh span_shc">
				                                    <p><b>物流集散仓</b></p>

				                        </span>
				                        <p class="p_b2"></p>
				                    </td>
				                    <td>
				                        <div class="div_sh1 div_sh1p">
				                        	<p v-for='item in tracings4'><i>{{item.ExcuteState | excuteState}}</i>{{item.ExcuteDate}}</p>
				                                   <!--  <p><i>配送派单受理</i>2017/11/15 10:28:50</p>
				                                    <p><i>已排车</i>2017/11/15 10:29:36</p>
				                                    <p><i>配送中</i>2017/11/15 10:30:30</p>
				                                    <p><i>已受理</i>2017/11/15 10:31:10</p>
				                                    <p><i>提货交接</i>2017/11/15 10:31:51</p> -->
				                        </div>
				                    </td>
				                    <td>
				                                    <div class="div_sh1 div_sh1b last" v-for='item in handovers1'>
				                                        <p><i>司机:</i>{{item.RPDriverName}}</p>
				                                        <p><i>车牌:</i>{{item.RPPlateNumber}}</p>
				                                        
				                                        <p><i>取货时间:</i>{{item.HandoverTime}}</p>

				                                    </div>
				                    </td>
				                </tr>
				                <tr  v-if='tracings5.length>0'>
				                    <td>
				                        <span class="span_sh span_shc span_shf">
				                            <p><b>物流配送</b></p>
				                        </span>
				                        <p class="p_b2"></p>
				                    </td>
				                    <td>
				                        <div class="div_sh1 div_sh1p">
				                        	<p v-for='item in tracings5'><i>{{item.ExcuteState | excuteState}}</i>{{item.ExcuteDate}}</p>
				                                   <!--  <p><i>送货交接</i>2017/11/15 10:33:12</p> -->
				                        </div>
				                    </td>
				                    <td>
				                                <div class="div_sh1 div_sh1b last" style="width: 256px;" v-for='item in handovers3'>
				                                        <!-- <p><i>电话:</i>{{item.PRContactsTel}}</p> -->
				                                        <p><i>司机:</i>{{item.DPDriverName}}</p>
				                                        <p><i>车牌:</i>{{item.DPPlateNumber}}</p>
				                                    <p><i>取货时间:</i>{{item.HandoverTime}}</p>
				                                </div>
				                    </td>
				                </tr>
				                <tr v-if='tracings7.length>0'>
				                    <td>
				                        <span class="span_sh span_she">
				                            <p><b>收货方</b></p>
				                        </span>
				                        <p class="p_b2"></p>
				                    </td>
				                    <td>
				                        <div class="div_sh1 div_shd">
				                        	<p v-for='item in tracings7'><i class="w70">{{item.ExcuteState | excuteState}}</i>{{item.ExcuteDate}}</p>
				                                <!-- <p><i>到货签收</i>2017/11/15 10:38:49</p> -->
				                        </div>
				                    </td>
				                    <td>
				                            <div class="div_sh1 div_sh1b last" style="width: 256px;">
				                                    <div  v-for='item in handovers4'>
				                                        <p><i>签收人:</i>{{item.RPDriverName}}</p>
				                                        <p><i>签收时间:</i>{{item.HandoverTime}}</p>
				                                        <p><i>件数:</i>{{details.OrdersPKGS}}</p>
				                                    </div>
				                                <p>总件数:<b>{{details.RecPKGS}}</b></p>
				                            </div>
				                    </td>
				                </tr>
				        </tbody>
				        <tbody v-else>
				        	<tr>
				                 <td  colspan='3' class="t-center" style='padding-left:10px;'>
				                    暂无物流数据   
				                 </td>
				             </tr>
				        </tbody>
				</table>
			</div>


		    <div class="aside" style="width:310px;">
		        <div class="boxzs">
		            <p class="p_s4">
		                <span><i></i>{{details.DepartureProvince}}</span>
		                <b></b>
		                <span><i></i>{{details.ArrivalProvince}}</span>
		            </p>
		            <ul class="bobgary order_dtl">
		                <li class="flexbox" style="display: flex;">
		                    <span>物流订单号:</span><span class="flex1" style="white-space:normal; word-break:break-all;">{{details.TPLPoNo}}</span>
		                </li>
		                <li class="flexbox" style="display: flex;">
		                    <span style="width:52px">货主:</span><span class="flex1" style="white-space:normal; word-break:break-all;">
		                    	{{details.CargoOwnerName}}</span>
		                </li>
		                <li class="ltspan">
		                    {{details.BillDate}}
		                </li>
		            </ul>
		            <table class="table table-hover table-striped table-1e">
		                <thead>
		                    <tr>
		                        <th data-align="center" data-sortable="true">序号</th>
		                        <th data-align="center" data-sortable="true">业务单据编号</th>
		                    </tr>
		                </thead>
		                <tbody>
		                            <tr>
		                                <td>01</td>
		                                <td><span class="p_cu1 show">{{billno}}</span></td>
		                            </tr>
		                </tbody>
		            </table>
		        </div>
		    </div>
		</div>


		</div>
   	</div>
</template>
<script>
	module.exports = {
		data: function() {
			return {
				billno:'',
				suppliername:'',
				details:{},
				tracFlag:false,

				tracings:[],
				tracings1:[],
				tracings2:[],
				tracings3:[],
				tracings4:[],
				tracings5:[],
				tracings7:[],

				handovers1:[],
				handovers2:[],
				handovers3:[],
				handovers4:[],

				supplierList: [],
				supplierNameList: [],
				checkIdList: [],
				search: {
					pageSize: 3,
					pageNo: 1,
					totalPages: 1,
					itemName: '',
					supplierId: '',
					medguid: '',
					clienttype: 'o',
				},
				authoritySetting: {
					oneSearchFlag: false,
				},
				height: 0,

			};
		},
		computed: {
			dual: function() {
				var self = this;
				var curMenuRole = this.$store.state.user.curMenuRole;

				//this.$store.state.user.userName;
				return '';
			},
		},
		watch: {
			'$route':function (to, from) {
			   location.reload()
			  }
		},
		methods: {
			getData: function() {
				var self = this;
				self.tracings1=[];
				self.tracings2=[];
				self.tracings3=[];
				self.tracings4=[];
				self.tracings5=[];
				self.tracings7=[];
				// {'BillNO':'ywd201712220001','ReceiveID':'物流公司T'}
				 // {'BillNO':self.billno,'ReceiveID':self.suppliername}
				 Ajax.post('/documentTraceability/logisticsTracking', {'BillNO':self.billno,'ReceiveID':self.suppliername})
		          .then(function (response){
		            var data = response.data.data;
		         
		            if(response.data.errorCode==0){
		             	
		            	self.$set('details',data.Datas);
		            	var tracings=data.Datas.Tracings;

		            	for(var a=0;a<tracings.length;a++){

		            		if(tracings[a].ExcutivePartyRole==1){
		            			self.tracings1.push(tracings[a]);
		            		}else if(tracings[a].ExcutivePartyRole==2){
		            			self.tracings2.push(tracings[a]);
		            		}else if(tracings[a].ExcutivePartyRole==3){
		            			self.tracings3.push(tracings[a]);
		            		}else if(tracings[a].ExcutivePartyRole==4){
		            			self.tracings4.push(tracings[a]);
		            		}else if(tracings[a].ExcutivePartyRole==5){
		            			self.tracings5.push(tracings[a]);
		            		}else if(tracings[a].ExcutivePartyRole==7){
		            			self.tracings7.push(tracings[a]);
		            		}
		            		
		            	}
		            	var handovers=data.Datas.Handovers;

		            	for(var i=0;i<handovers.length;i++){

		            		if(handovers[i].HandoverType==1){
		            			self.handovers1.push(handovers[i]);
		            		}else if(handovers[i].HandoverType==2){
		            			self.handovers2.push(handovers[i]);
		            		}else if(handovers[i].HandoverType==3){
		            			self.handovers3.push(handovers[i]);
		            		}else if(handovers[i].HandoverType==4){

		            			self.handovers4.push(handovers[i]);
		            		}
		            	}
		            	self.tracFlag=true;
		            	// self.$set('Tracings',data.Tracings);
		            	

		            }else{
		            	layer.msg(response.data.message);
		            	self.tracFlag=false;
		            }
		            
		        })     
			// /documentTraceability/logisticsTracking
				
			},
			
		},
		route: {
			data: function(transition) {
				this.$set('billno',this.$route.params.billno);
				this.$set('suppliername',window.localStorage.getItem('suppliername'));
				this.getData();
			}
		}
	};
</script>