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.sendCountryName}}</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.receiveCountryName}}</span>)
            </template>
            <span class="icon iconfont" slot="icon">&#xe819;</span>
          </el-step>
        </el-steps>
      </div>
      <div style="width:10%">
        <div>
          <el-button
              type="primary"
              @click="showGotRmk"
            >揽收底单</el-button>
        </div>
        <div><el-button
              type="primary"
              @click="showSignRmk"
            >签收底单</el-button>
          <div>
            <!-- <ImagePreview height="50px" v-for="pic in (billDetail.row.picUrl||'').split(',')" :key="pic" :src="pic" ></ImagePreview> -->

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

      </el-tab-pane>
      <el-tab-pane label="查看图片" >
        <!-- <div v-for="item in billDetail.split(',')">
          <ImagePreview height="50px" v-for="pic in (scope.row.picUrl||'').split(',')" :key="pic" :src="pic" ></ImagePreview>
        </div>
        </div> -->
        <BillPicList :billCode="billDetail.billCode"></BillPicList>

      </el-tab-pane>
      <el-tab-pane label="日志记录" >

      </el-tab-pane>
      <el-tab-pane label="问题件" >
        <ProblemList :billCode="billDetail.billCode"></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 {timeDiffTime,timeFormat} from '@/utils/dateUtils'

export default {
  name: "TraceWaybillDetailView.vue",
   props:{
    billDetail: {
       type: Object
    }
  },
  components: {
    TraceRecordList,
    WaybillDetailReadOnly,
    ProblemList,
    BillPicList
  },
  dicts: [],
  data() {
    return {
      active:1,
      // 遮罩层
      loading: true,
      // 地球洲表格数据
      traceInfoList: []

    };
  },
  created() {

    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;
    }

  },
  watch: {
      "billCode": {
      handler (newValue, oldValue) {
      },
      deep: true
    }
  },
  methods: {
    showGotRmk(){

    },
    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>