emis-frontend/src/views/emis/customerService/traceWaybillDetailView.vue

<template>
  <div>
    <!-- <div style="font-weight: 600;">运单号:{{ billCode }}</div> -->
    <div style="display: inline-flex; width: 100%; margin-top: 15px;">
      <!-- <div style="width:20%">
        <el-row :gutter="0" style="display: flex;flex-wrap: wrap;font-size: 12px;border: 1px solid #bcbcbc;border-radius: 3px;">
          <el-col  :span="24">线路:{{ billDetail.transLineTypeName }}</el-col>
          <el-col  :span="24">产品:{{ billDetail.productTypeName }}</el-col>
          <el-col  :span="24">寄件网点:{{ billDetail.sendSiteName }}</el-col>
          <el-col  :span="24">目的网点:{{ billDetail.dispatchUnderlingSiteName }}</el-col>
        </el-row>
      </div> -->
      <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">&#xe7b0;</span>
          </el-step>
          <el-step title="发件" >
            <span class="icon iconfont" slot="icon">&#xe689;</span>
          </el-step>
          <el-step title="到件" >
            <span class="icon iconfont" slot="icon">&#xe688;</span>
          </el-step>
          <el-step title="派件" >
            <span class="icon iconfont" slot="icon">&#xe660;</span>
          </el-step>
          <el-step >
            <template slot="title">
              签收(<span >{{billDetail.reciever.countryName}}</span>)
            </template>
            <span class="icon iconfont" slot="icon">&#xe819;</span>
          </el-step>
        </el-steps>
      </div>
      <div style="width:20%;font-size: 11px;color: gray; padding: 0px 10px;display: inline-flex;">
        <div>
          <!-- <el-button
              type="primary"
              @click="showGotRmk"
            >揽收底单</el-button> -->
        </div>

        <div>
          <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 class="center-tabs" style="margin-top: 15px;">
      <el-tab-pane label="扫描记录" >
        <TraceRecordList :billCode="scanBillCode"></TraceRecordList>
      </el-tab-pane>
      <el-tab-pane label="运单信息" >
        <WaybillDetailReadOnly :billCode="scanBillCode"></WaybillDetailReadOnly>

      </el-tab-pane>
      <el-tab-pane label="查看图片" >
        <BillPicList :billCode="scanBillCode"></BillPicList>
      </el-tab-pane>
      <el-tab-pane label="日志记录" >

      </el-tab-pane>
      <el-tab-pane label="问题件" >
        <ProblemList :billCode="scanBillCode"></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 WaybillDetailReadOnly from '@/views/emis/emisWaybill/waybillDetailReadOnly.vue';
import { getWaybillDetail } from "@/api/emis/emisWaybill";

import {timeDiffTime,timeFormat} from '@/utils/dateUtils'

export default {
  name: "TraceWaybillDetailView",
   props:{
    scanBillCode:{
      type: String
    },
    // billDetail: {
    //    type: Object
    //   },
  },
  components: {
    TraceRecordList,
    WaybillDetailReadOnly,
    ProblemList,
    BillPicList
  },
  dicts: [],
  data() {
    return {
      active:1,
      // 遮罩层
      loading: true,
      billDetail:{},
      traceInfoList: []

    };
  },
  created() {
      this.initData();
  },
  watch: {
      "billCode": {
      handler (newValue, oldValue) {
      },
      deep: true
    }
  },
  methods: {

    initData(){
      getWaybillDetail(this.scanBillCode).then(response => {
          this.billDetail = Object.assign({},response.data);
          console.log("===>",this.billDetail);
          if(this.billDetail.waybillStatus=='10'){
            this.active=1;
          }
          else if(this.billDetail.waybillStatus=='20'){
            this.active=2;
          }
          else if(this.billDetail.waybillStatus=='30'){
            this.active=3;
          }
          else if(this.billDetail.waybillStatus=='40'){
            this.active=4;
          }
          else if(this.billDetail.waybillStatus=='50'){
            this.active=5;
          }else{
            this.active=2;
          }
      });
    },

    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>