257 lines
7.7 KiB
Vue
257 lines
7.7 KiB
Vue
<template>
|
|
<div>
|
|
<div v-if="billDetail" style="display: inline-flex; width: 100%; margin-top: 15px;">
|
|
<div style="width:80%;">
|
|
<el-steps :active="active" align-center finish-status="finish">
|
|
<el-step >
|
|
<template slot="title">
|
|
揽收(<span >{{billDetail.sender.countryName}}</span>)
|
|
</template>
|
|
<span class="icon iconfont" slot="icon"></span>
|
|
</el-step>
|
|
<el-step title="发件" >
|
|
<span class="icon iconfont" slot="icon"></span>
|
|
</el-step>
|
|
<el-step title="到件" >
|
|
<span class="icon iconfont" slot="icon"></span>
|
|
</el-step>
|
|
<el-step title="派件" >
|
|
<span class="icon iconfont" slot="icon"></span>
|
|
</el-step>
|
|
<el-step >
|
|
<template slot="title">
|
|
签收(<span >{{billDetail.reciever.countryName}}</span>)
|
|
<!-- 签收(<span ></span>) -->
|
|
</template>
|
|
<span class="icon iconfont" slot="icon"></span>
|
|
</el-step>
|
|
</el-steps>
|
|
</div>
|
|
<div style="width:20%;font-size: 11px;color: gray; padding: 0px 10px;display: inline-flex;">
|
|
<div>
|
|
<div style="text-align: center;">
|
|
<ImagePreview height="50px" v-for="pic in (billDetail.billPicSendRmk.split(',') )" :key="pic" :src="pic" >
|
|
</ImagePreview>
|
|
</div>
|
|
<div style="text-align: center;">
|
|
揽收底单
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-left: 20px;">
|
|
<div style="text-align: center;">
|
|
<ImagePreview height="50px" v-for="pic in (billDetail.billPicDispatchRmk.split(',') )" :key="pic" :src="pic" >
|
|
</ImagePreview>
|
|
</div>
|
|
<div style="text-align: center;">
|
|
签收底单
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-tabs v-model="activeTab" class="center-tabs" style="margin-top: 15px;">
|
|
<el-tab-pane label="扫描记录" name="tab-1">
|
|
<TraceRecordList :key="resetRefreshId+'_1'" :billCode="showBillCode" @onCanSeeBillDetail="onCanSeeBillDetail"></TraceRecordList>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="物流可视化" name="tab-6">
|
|
<MapTraceView :key="resetRefreshId+'_6'" :billCode="showBillCode"></MapTraceView>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="运单信息" v-if="canViewDetail" name="tab-2">
|
|
<WaybillDetailReadOnly :key="resetRefreshId+'_2'" :billCode="showBillCode"></WaybillDetailReadOnly>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="查看图片" name="tab-3">
|
|
<BillPicList :key="resetRefreshId+'_3'" :billCode="showBillCode" ></BillPicList>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="日志记录" name="tab-4">
|
|
<OperLogList :key="resetRefreshId+'_4'" :billCode="showBillCode"></OperLogList>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="问题件" name="tab-5">
|
|
<ProblemList :key="resetRefreshId+'_5'" :billCode="showBillCode"></ProblemList>
|
|
</el-tab-pane>
|
|
|
|
</el-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TraceRecordList from './traceRecordList.vue';
|
|
import ProblemList from './problemList.vue';
|
|
import BillPicList from './billPicList.vue';
|
|
import OperLogList from './operLogList.vue';
|
|
import MapTraceView from './mapTraceView.vue';
|
|
|
|
import WaybillDetailReadOnly from '@/views/emis/emisWaybill/waybillDetailReadOnly.vue';
|
|
import { getWaybillDetail,checkIsCanViewBillDetail } from "@/api/emis/emisWaybill";
|
|
import { getNormalLastScanRecord,getTraceListByBillCode } from "@/api/emis/emisTmsScanRecord";
|
|
|
|
|
|
import {timeDiffTime,timeFormat} from '@/utils/dateUtils'
|
|
|
|
export default {
|
|
name: "TraceWaybillDetailView",
|
|
props:{
|
|
scanBillCode:{
|
|
type: String
|
|
},
|
|
resetRefreshId: {
|
|
type: String
|
|
},
|
|
},
|
|
components: {
|
|
TraceRecordList,
|
|
WaybillDetailReadOnly,
|
|
ProblemList,
|
|
BillPicList,
|
|
OperLogList,
|
|
MapTraceView
|
|
},
|
|
dicts: [],
|
|
data() {
|
|
return {
|
|
activeTab:"tab-1",
|
|
active:1,
|
|
// 遮罩层
|
|
loading: true,
|
|
billDetail:null,
|
|
traceInfoList: [],
|
|
scanRecordList:[],
|
|
canViewDetail:false,
|
|
|
|
};
|
|
},
|
|
created() {
|
|
this.initData();
|
|
},
|
|
computed: {
|
|
showBillCode() {
|
|
return this.scanBillCode;
|
|
},
|
|
},
|
|
watch: {
|
|
"billCode": {
|
|
handler (newValue, oldValue) {
|
|
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
initData(){
|
|
|
|
let ownerSiteCode=this.$store.getters.ownerSiteCode;
|
|
let ownerCountryCode =this.$store.getters.ownerCountryCode;;
|
|
let empName = this.$store.getters.empName;
|
|
|
|
getWaybillDetail(this.scanBillCode).then(response => {
|
|
|
|
this.billDetail = Object.assign({},response.data);
|
|
// console.log("==ownerCountryCode=>",this.ownerCountryCode);
|
|
// console.log("==his.billDetail.reciever.country=>",this.billDetail.reciever.country);
|
|
//bug:848 调整后：与运单号关联的：寄件网点、目的网点、签收网点、总部、销售联系人、回款联系人 允许查看 运单信息；其他网点或员工若不相关则不允许查看；
|
|
//bug- 目的国除中国外的网点能看到目的是该国的运单信息
|
|
// if(
|
|
// ownerSiteCode == this.billDetail.sendSiteCode
|
|
// || ownerSiteCode == this.billDetail.dispatchSiteCode
|
|
// || ownerSiteCode == this.billDetail.dispatchUnderlingSiteCode
|
|
// || ownerSiteCode == this.billDetail.signSiteCode
|
|
// || ownerSiteCode == '88888'
|
|
// || empName ==this.billDetail.payee
|
|
// || empName ==this.billDetail.salesmen
|
|
// || (this.billDetail.reciever.country != '0086' && this.billDetail.reciever.country == ownerCountryCode )
|
|
// ){
|
|
// this.canViewDetail=true;
|
|
// }
|
|
|
|
// 检查是否可看账单
|
|
checkIsCanViewBillDetail({billCode:this.billDetail.billCode}).then(response => {
|
|
if(response.data=='1'){
|
|
this.canViewDetail=true;
|
|
}else{
|
|
this.canViewDetail=false;
|
|
}
|
|
|
|
});
|
|
|
|
this.setLastStepFlag();
|
|
});
|
|
},
|
|
setLastStepFlag(){
|
|
getNormalLastScanRecord(this.scanBillCode).then(response => {
|
|
let scanRecord=response.data;
|
|
if(scanRecord){
|
|
if(scanRecord.scanType=='10'){
|
|
this.active=1;
|
|
}
|
|
else if(scanRecord.scanType=='20'){
|
|
this.active=2;
|
|
}
|
|
else if(scanRecord.scanType=='30'){
|
|
this.active=3;
|
|
}
|
|
else if(scanRecord.scanType=='40'){
|
|
this.active=4;
|
|
}
|
|
else if(scanRecord.scanType=='50'){
|
|
this.active=5;
|
|
}else{
|
|
this.active=2;
|
|
}
|
|
}else{
|
|
this.active=2;
|
|
}
|
|
//转件 特殊处理
|
|
if(this.billDetail.blSign === '1'){
|
|
this.active=5;
|
|
}
|
|
});
|
|
},
|
|
|
|
onCanSeeBillDetail(isCan){
|
|
console.log("======>onCanSeeBillDetail=====>",isCan);
|
|
this.canViewDetail=isCan;
|
|
},
|
|
|
|
|
|
showGotRmk(){
|
|
},
|
|
calcDeliveryTime(startData,endDate){
|
|
return timeDiffTime(startData,endDate)
|
|
},
|
|
|
|
}
|
|
};
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.margin-top{
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.el-descriptions-item__label.is-bordered-label {
|
|
min-width: 80px;
|
|
}
|
|
|
|
.printMeClass {
|
|
font-family: SimHei;
|
|
label {
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
// :deep .el-step__head.is-success {
|
|
// color: rgb(52, 158, 250);
|
|
// border-color: rgb(52, 158, 250);
|
|
// }
|
|
// :deep .el-step__title.is-success {
|
|
// font-weight: bold;
|
|
// color: rgb(52, 158, 250);
|
|
// }
|
|
// :deep .el-step__description.is-success {
|
|
// color: rgb(52, 158, 250);
|
|
// }
|
|
|
|
</style>
|