emis-frontend/src/views/emis/customerService/traceWaybillDetailView.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">&#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>)
              <!-- 签收(<span ></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>
            <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="运单信息"  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">

      </el-tab-pane>
      <el-tab-pane label="问题件" name="tab-5">
        <ProblemList :key="resetRefreshId+'_4'" :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 WaybillDetailReadOnly from '@/views/emis/emisWaybill/waybillDetailReadOnly.vue';
import { getWaybillDetail } from "@/api/emis/emisWaybill";
import {  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
  },
  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 调整后：与运单号关联的：寄件网点、目的网点、签收网点、总部、销售联系人、回款联系人 允许查看 运单信息；其他网点或员工若不相关则不允许查看；
          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;
          }

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

    },

    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>