From 48a0cba61bff35345a1c00007cea0f26722089ff Mon Sep 17 00:00:00 2001
From: linfso <linfso@sina.com>
Date: Tue, 11 Jun 2024 19:52:07 +0800
Subject: [PATCH] md

---
 .../emis/customerService/billPicList.vue      | 204 ++++++++
 .../emis/customerService/problemList.vue      | 191 +++++++
 .../emis/customerService/traceRecordList.vue  | 191 +++++++
 .../traceWaybillDetailView.vue                | 184 +++++++
 .../emisWaybill/waybillDetailReadOnly.vue     | 479 ++++++++++++++++++
 .../emis/emisWaybill/waybillPreCalcFee.vue    | 439 ++++++++++++++++
 6 files changed, 1688 insertions(+)
 create mode 100644 src/views/emis/customerService/billPicList.vue
 create mode 100644 src/views/emis/customerService/problemList.vue
 create mode 100644 src/views/emis/customerService/traceRecordList.vue
 create mode 100644 src/views/emis/customerService/traceWaybillDetailView.vue
 create mode 100644 src/views/emis/emisWaybill/waybillDetailReadOnly.vue
 create mode 100644 src/views/emis/emisWaybill/waybillPreCalcFee.vue

diff --git a/src/views/emis/customerService/billPicList.vue b/src/views/emis/customerService/billPicList.vue
new file mode 100644
index 00000000..d73d5915
--- /dev/null
+++ b/src/views/emis/customerService/billPicList.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="">
+
+    <!-- <div>
+
+      <ImagePreview height="50px" v-for="pic in (scope.row.picUrl||'').split(',')" :key="pic" :src="pic" ></ImagePreview>
+
+    </div> -->
+    <xd-table v-loading="loading"
+           border stripe
+           size="mini"
+           height="300px"
+           :data="dataList"
+           :queryParams="queryParams"
+           :total="total"
+           @queryTable="getList"
+           :showRightButton="false"
+           :showPagination="false"
+           :showOperateButton="false"
+           >
+      <el-table-column label="序号" align="center" min-width="60">
+        <template slot-scope="scope">
+          <span v-text="getIndex(scope.$index)"> </span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('录入时间')" align="center" prop="registerDate" min-width="170" >
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.registerDate) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('图片')" align="center" prop="picUrl" min-width="100">
+        <template slot-scope="scope">
+          <ImagePreview height="50px" v-for="pic in (scope.row.picUrl||'').split(',')" :key="pic" :src="pic" ></ImagePreview>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column :label="$t('运单号')" align="center" prop="billCode" min-width="170" />
+      <el-table-column :label="$t('签收状态')" align="center" prop="status" min-width="100">
+        {{ $t("已签收") }}
+      </el-table-column>/> -->
+      <!-- <el-table-column :label="$t('签收地址')" align="center" prop="signAddress" min-width="100" /> -->
+      <!-- <el-table-column :label="$t('签收人')" align="center" prop="signMan" min-width="100" />
+      <el-table-column :label="$t('签收时间')" align="center" prop="signDate" min-width="170" >
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.scanDate) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('派件员')" align="center" prop="dispatchOrSendMan" min-width="170">
+        <template slot-scope="scope">
+          <span>{{ scope.row.waybillDetail.dispatchManName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('寄件日期')" align="center" prop="sendDate" min-width="170" >
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.waybillDetail.sendDate) }}</span>
+          </template>
+      </el-table-column>
+      <el-table-column :label="$t('预计到达时间')" align="center" prop="estimateDate" min-width="150" >
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.waybillDetail.estimateDate) }}</span>
+          </template>
+      </el-table-column>
+      <el-table-column :label="$t('线路')" align="center" prop="" min-width="100">
+        <template slot-scope="scope">
+          <span>{{ scope.row.waybillDetail.transLineTypeName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('产品类型')" align="center" prop="" min-width="100">
+        <template slot-scope="scope">
+          <span>{{ scope.row.waybillDetail.productTypeName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('时效')" align="center" prop="timeType" min-width="100">
+        <template slot-scope="scope">
+          <span>{{ scope.row.waybillDetail.timeType }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('录入人')" align="center" prop="registerManName" min-width="150">
+        <template slot-scope="scope">
+          <span>{{ scope.row.waybillDetail.registerManName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('录入网点')" align="center" prop="recordSiteCode" min-width="100">
+        <template slot-scope="scope">
+          <span>{{ scope.row.waybillDetail.registerSiteName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('录入时间')" align="center" prop="waybillDetail.registerDate" min-width="170" >
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.waybillDetail.registerDate) }}</span>
+          </template>
+      </el-table-column> -->
+      <!-- <el-table-column :label="$t('签收网点')" align="center" prop="signSite" min-width="100" />
+      <el-table-column :label="$t('客户名称')" align="center" prop="customerName" min-width="150">
+        <template slot-scope="scope">
+            <span class="ellipsis">{{ scope.row.waybillDetail.customerName }}</span>
+          </template>
+      </el-table-column>
+      <el-table-column :label="$t('数据产生来源')" align="center" prop="waybillDetail.dataFrom" min-width="150">
+        <template slot-scope="scope">
+          <span>{{ scope.row.waybillDetail.dataFrom }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('签收信息备注')" align="center" prop="remark" min-width="150">
+        <template slot-scope="scope">
+          <span class="ellipsis">{{ scope.row.remark }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('收件国家')" align="center" prop="waybillDetail.receiveCountryName" min-width="150">
+        <template slot-scope="scope">
+          <span class="ellipsis">{{ scope.row.waybillDetail.receiveCountryName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('收件省份')" align="center" prop="waybillDetail.receiveProvinceName" min-width="150">
+        <template slot-scope="scope">
+          <span class="ellipsis">{{ scope.row.waybillDetail.receiveProvinceName }}</span>
+        </template>
+      </el-table-column> -->
+
+
+
+    </xd-table>
+  </div>
+</template>
+
+<script>
+import { listEmisTmsScanRecord } from "@/api/emis/emisTmsScanRecord";
+
+export default {
+  name: "TraceInfoView",
+   props:{
+    billCode:{
+      type: String,
+    }
+  },
+  dicts: ['emis_scan_type'],
+  data() {
+    return {
+      reverse: false,
+      loading: true,
+      dataList: [],
+      total:0,
+      queryParams:{
+
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  watch: {
+      "billCode": {
+      handler (newValue, oldValue) {
+        this.getList();
+      },
+      deep: true
+    }
+  },
+  methods: {
+    getList() {
+         this.loading = true;
+         this.queryParams={
+            pageNum:1,
+            pageSize:1000,
+            billCode:this.billCode
+         }
+         listEmisTmsScanRecord(this.queryParams).then(response => {
+          this.dataList = response.rows;
+          this.total=response.total;
+          this.loading = false;
+        });
+
+    },
+
+    getIndex($index) {
+          return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
+    },
+
+  }
+};
+</script>
+
+
+<style rel="stylesheet/scss" 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;
+  }
+}
+
+.siteOrManHighlight {
+  color: #00BFFF;
+  font-weight: bold;
+}
+</style>
diff --git a/src/views/emis/customerService/problemList.vue b/src/views/emis/customerService/problemList.vue
new file mode 100644
index 00000000..a0e5736d
--- /dev/null
+++ b/src/views/emis/customerService/problemList.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="">
+    <xd-table v-loading="loading"
+           border stripe
+           size="mini"
+           height="300px"
+           :data="dataList"
+           :queryParams="queryParams"
+           :total="total"
+           @queryTable="getList"
+           :showRightButton="false"
+           :showPagination="false"
+           :showOperateButton="false"
+           >
+      <el-table-column label="序号" align="center" min-width="60">
+        <template slot-scope="scope">
+          <span v-text="getIndex(scope.$index)"> </span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('扫描时间')" align="center" prop="registerDate" min-width="170" >
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.registerDate) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('问题描述')" align="center" prop="problemCause" min-width="150">
+        <template slot-scope="scope">
+          <span class="ellipsis">{{scope.row.problemTypeName}}-{{ scope.row.problemCause }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('备注')" align="center" prop="remark" min-width="150">
+        <template slot-scope="scope">
+          <span class="ellipsis">{{ scope.row.remark }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('扫描类型')" align="center" prop="scanType" min-width="100" >
+        <template slot-scope="scope">
+          <span>问题件</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('扫描网点')" align="center" prop="registerSiteName" min-width="100" />
+      <el-table-column :label="$t('通知网点')" align="center" prop="sendSiteName" min-width="100" />
+      <el-table-column :label="$t('问题件类型')" align="center" prop="problemTypeName" min-width="100" />
+      <el-table-column :label="$t('处理状态')" align="center" prop="dealResult" min-width="100" />
+      <el-table-column :label="$t('问题件原因')" align="center" prop="problemCause" min-width="100" />
+      <el-table-column :label="$t('问题件回复内容')" align="center" prop="reversionStr" min-width="150" />
+      <el-table-column :label="$t('回复人')" align="center" prop="reversionManName" min-width="150" />
+      <el-table-column :label="$t('回复网点')" align="center" prop="reversionSiteName" min-width="100" />
+
+      <el-table-column :label="$t('操作人')" align="center" prop="createByName" min-width="100" />
+      <el-table-column :label="$t('重量')" align="center" prop="billWeight" min-width="100" >
+      <template slot-scope="scope">
+          <span></span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('回复时间')" align="center" prop="reversionDate" min-width="170">
+        <template slot-scope="scope">
+          <span>{{ scope.row.reversionDate }}</span>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column :label="$t('回复状态')" align="center" prop="blReversion" min-width="100" >
+        <template slot-scope="scope">
+          <span>{{ scope.row.blReversion == "1" ? "是" : "否" }}</span>
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column :label="$t('登记日期')" align="center" prop="registerDate" min-width="170">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.registerDate) }}</span>
+        </template>
+      </el-table-column> -->
+      <!-- <el-table-column :label="$t('登记人')" align="center" prop="registerManName" min-width="150" />
+      <el-table-column :label="$t('登记部门')" align="center" prop="registerManDept" min-width="100" />
+      <el-table-column :label="$t('图片路径')" align="center" prop="filePath" min-width="100">
+        <template slot-scope="scope">
+          <ImagePreview height="50px" v-for="pic in (scope.row.filePath||'').split(',')" :key="pic" :src="pic" ></ImagePreview>
+        </template>
+      </el-table-column> -->
+
+      <!-- <el-table-column :label="$t('登记保存时间')" align="center" prop="registerSaveDate" min-width="170">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.registerSaveDate) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('所属业务员')" align="center" prop="salesmen" min-width="150" />
+      <el-table-column :label="$t('业务员编号')" align="center" prop="xxx" min-width="150" />
+      <el-table-column :label="$t('回复日期')" align="center" prop="reversionDate" min-width="170">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.reversionDate) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('是否查看')" align="center" prop="blSee" min-width="100">
+        <template slot-scope="scope">
+          <span>{{ scope.row.blSee == "1" ? "是" : "否" }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('是否回复')" align="center" prop="blReversion" min-width="100">
+        <template slot-scope="scope">
+          <span>{{ scope.row.blReversion == "1" ? "是" : "否" }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('问题件路径')" align="center" prop="problemCause" min-width="100" />
+      <el-table-column :label="$t('问题件主题')" align="center" prop="problemTitle" min-width="100" />
+      <el-table-column :label="$t('备注')" align="center" prop="remark" min-width="150">
+        <template slot-scope="scope">
+          <span class="ellipsis">{{ scope.row.remark }}</span>
+        </template>
+      </el-table-column> -->
+
+    </xd-table>
+  </div>
+</template>
+
+<script>
+import { listEmisWaybillProblemInfo } from "@/api/emis/emisWaybillProblemInfo";
+
+export default {
+  name: "TraceInfoView",
+   props:{
+    billCode:{
+      type: String,
+    }
+  },
+  dicts: ['emis_scan_type'],
+  data() {
+    return {
+      reverse: false,
+      loading: true,
+      dataList: [],
+      total:0,
+      queryParams:{
+
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  watch: {
+      "billCode": {
+      handler (newValue, oldValue) {
+        this.getList();
+      },
+      deep: true
+    }
+  },
+  methods: {
+    getList() {
+         this.loading = true;
+         this.queryParams={
+            pageNum:1,
+            pageSize:1000,
+            billCode:this.billCode
+         }
+         listEmisWaybillProblemInfo(this.queryParams).then(response => {
+          this.dataList = response.rows;
+          this.total=response.total;
+          this.loading = false;
+        });
+
+    },
+
+    getIndex($index) {
+          return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
+    },
+
+  }
+};
+</script>
+
+
+<style rel="stylesheet/scss" 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;
+  }
+}
+
+.siteOrManHighlight {
+  color: #00BFFF;
+  font-weight: bold;
+}
+</style>
diff --git a/src/views/emis/customerService/traceRecordList.vue b/src/views/emis/customerService/traceRecordList.vue
new file mode 100644
index 00000000..e431a974
--- /dev/null
+++ b/src/views/emis/customerService/traceRecordList.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="">
+    <xd-table v-loading="loading"
+           border stripe
+           size="mini"
+           height="300px"
+           :data="scanRecordList"
+           :queryParams="queryParams"
+           :total="total"
+           @queryTable="getList"
+           :showRightButton="false"
+           :showPagination="false"
+           :showOperateButton="false"
+           >
+      <el-table-column label="序号" align="center" min-width="60">
+        <template slot-scope="scope">
+          <span v-text="getIndex(scope.$index)"> </span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('扫描时间')" align="center" prop="scanDate" min-width="170" >
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.scanDate) }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column :label="$t('描述')" align="left" prop="desc" min-width="300" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          <span style="color: #C53144;" v-html="cvtScanRecordToTraceStr(scope.row)"></span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('扫描类型')" align="center" prop="scanType" min-width="80" >
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.emis_scan_type" :value="scope.row.scanType"/>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('扫描网点')" align="center" prop="scanSite" min-width="120" />
+      <el-table-column :label="$t('操作人')" align="center" prop="scanMan" min-width="80" />
+
+      <el-table-column :label="$t('重量')" align="center" prop="scanWeight" min-width="80" />
+      <el-table-column :label="$t('上传时间')" align="center" prop="createTime" min-width="170" >
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('数据来源')" align="center" prop="createTime" min-width="80" >
+        <template slot-scope="scope">
+          <span>网点扫描</span>
+        </template>
+      </el-table-column>
+            <!-- <el-table-column :label="$t('上/下一网点')" align="center" prop="preOrNextStation" min-width="100" /> -->
+
+    </xd-table>
+  </div>
+</template>
+
+<script>
+import {  listEmisTmsScanRecord } from "@/api/emis/emisTmsScanRecord";
+export default {
+  name: "TraceInfoView",
+   props:{
+    billCode:{
+      type: String,
+    }
+  },
+  dicts: ['emis_scan_type'],
+  data() {
+    return {
+      reverse: false,
+      loading: true,
+      scanRecordList: [],
+      total:0,
+      queryParams:{
+
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  watch: {
+      "billCode": {
+      handler (newValue, oldValue) {
+        this.getList();
+      },
+      deep: true
+    }
+  },
+  methods: {
+    getList() {
+         this.loading = true;
+         this.queryParams={
+            pageNum:1,
+            pageSize:1000,
+            billCode:this.billCode
+         }
+         listEmisTmsScanRecord(this.queryParams).then(response => {
+          this.scanRecordList = response.rows;
+          this.total=response.total;
+          console.log(this.scanRecordList);
+          this.loading = false;
+        });
+
+    },
+    cvtScanRecordToTraceStr(scanRecord){
+         /*
+         快件在 [杭州]已做收件扫描,收件员是[刘丛鸣];网点:杭州联系人:刘丛鸣联系电话:13912996578收件员:刘丛鸣电话:
+快件在[杭州]已装车,正发往[金边],扫描员是[许亚雷];网点:杭州联系人:刘丛鸣联系电话:13912996578网点:金边联系人:王荣联系电话:0888621888扫描员:许亚雷电话:17633814764
+快件到达[金边],上一站是[],扫描员是[卿卿];网点:金边联系人:王荣联系电话:0888621888网点:联系人:王荣联系电话:0888621888扫描员:卿卿电话:095588368
+[金边]已做派件扫描,扫描员是[卿卿],派件员是[卿卿];网点:金边联系人:王荣联系电话:0888621888扫描员:卿卿电话:095588368派件员:卿卿电话:095588368
+快件已[签收],签收网点是[金边],')}签收人是[本人];网点:金边联系人:王荣联系电话:0888621888签收人:本人
+         */
+
+         let content='';
+         const scanType=scanRecord.scanType;
+
+         // 揽收扫描
+         if(scanType=="10"){
+             content='快件在<span class="siteOrManHighlight" >['+scanRecord.scanSite+']</span>已做收件扫描,收件员是<span class="siteOrManHighlight" >['+scanRecord.dispatchOrSendMan+']</span>';
+         }
+         // 发件扫描
+         else if(scanType=="20"){
+             content='快件已离开<span class="siteOrManHighlight" >['+scanRecord.scanSite+']</span>下一站发往[<span class="siteOrManHighlight" >['+scanRecord.preOrNextStation+']</span>';
+         }
+         // 到件扫描
+         else if(scanType=="30"){
+             content='快件已到达 <span class="siteOrManHighlight" >['+scanRecord.scanSite+']</span>上一站是[<span class="siteOrManHighlight" >['+scanRecord.preOrNextStation+']</span>';
+         }
+         // 派送扫描
+         else if(scanType=="40"){
+             content='快件在 <span class="siteOrManHighlight" >['+scanRecord.scanSite+']</span>开始派送,已分配派件员<span class="siteOrManHighlight" >['+scanRecord.dispatchOrSendMan+']</span>';
+         }
+         // 签收扫描
+         else if(scanType=="50"){
+             content='快件在<span class="siteOrManHighlight" >['+scanRecord.scanSite+']</span>已签收，签收人<span class="siteOrManHighlight" >['+scanRecord.signMan+']</span>';
+         }
+         // 留仓
+         else if(scanType=="60"){
+          content='快件[留仓],停留在网点 <span class="siteOrManHighlight" >['+scanRecord.scanSite+']</span>';
+         }
+         // 转单扫描
+         else if(scanType=="70"){
+          content='快件[转单],转件网点 <span class="siteOrManHighlight" >['+scanRecord.scanSite+']</span>,转件人<span class="siteOrManHighlight" >['+scanRecord.scanMan+']</span>';
+             // 查询转单轨迹
+             // 拼接三方公司物流轨迹
+         }
+         // 问题件
+         else if(scanType=="-1"){
+          content='已登记问题件,登记网点【<span class="siteOrManHighlight" >['+scanRecord.scanSite+']</span>,登记人<span class="siteOrManHighlight" >['+scanRecord.scanMan+']</span>';
+         }
+         // 报关扫描
+         else if(scanType=="800"){
+             content='报关扫描，快件已报关<span class="siteOrManHighlight" >['+scanRecord.scanSite+']</span>下一站发往【span class="siteOrManHighlight" >['+scanRecord.preOrNextStation+']</span>';
+         }
+         // 清关扫描
+         else if(scanType=="900"){
+             content='清关扫描，快件已清关<span class="siteOrManHighlight" >['+scanRecord.scanSite+']</span>下一站发往【span class="siteOrManHighlight" >['+scanRecord.preOrNextStation+']</span>';
+         }
+        //  content='<span style="color: #C53144;">'+content+'</span>';
+         return content;
+    },
+    getIndex($index) {
+          return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
+    },
+
+  }
+};
+</script>
+
+
+<style rel="stylesheet/scss" 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;
+  }
+}
+
+.siteOrManHighlight {
+  color: #00BFFF;
+  font-weight: bold;
+}
+</style>
diff --git a/src/views/emis/customerService/traceWaybillDetailView.vue b/src/views/emis/customerService/traceWaybillDetailView.vue
new file mode 100644
index 00000000..f90f4f1f
--- /dev/null
+++ b/src/views/emis/customerService/traceWaybillDetailView.vue
@@ -0,0 +1,184 @@
+<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>
+      </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() {
+    console.log("=====>xxx==>",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;
+    }
+
+  },
+  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>
diff --git a/src/views/emis/emisWaybill/waybillDetailReadOnly.vue b/src/views/emis/emisWaybill/waybillDetailReadOnly.vue
new file mode 100644
index 00000000..155030d5
--- /dev/null
+++ b/src/views/emis/emisWaybill/waybillDetailReadOnly.vue
@@ -0,0 +1,479 @@
+<template>
+  <div class="" >
+    <el-descriptions :title="$t('发货信息')" size="mini"  :column="4">
+            <el-descriptions-item label="运单号">{{ form.billCode }}</el-descriptions-item>
+            <el-descriptions-item label="寄件网点">{{ form.sendSiteName }}</el-descriptions-item>
+            <el-descriptions-item label="所属线路">{{ form.transLineTypeName }}</el-descriptions-item>
+            <!-- <el-descriptions-item label="产品类型">{{ form.productTypeName }}({{ form.timeType }})</el-descriptions-item> -->
+            <el-descriptions-item label="寄件日期">{{ parseTime(form.sendDate, '{y}-{m}-{d}') }}</el-descriptions-item>
+            <el-descriptions-item label="订单号">{{ form.orderSn }}</el-descriptions-item>
+            <el-descriptions-item label="目的网点">{{ form.dispatchUnderlingSiteName }}</el-descriptions-item>
+            <el-descriptions-item label="产品类型">{{ form.productTypeName }}</el-descriptions-item>
+            <el-descriptions-item label="预计达到日期">{{ parseTime(form.estimateDate, '{y}-{m}-{d}') }}</el-descriptions-item>
+            <el-descriptions-item label="进仓单号">{{ form.warehouseInNo }}</el-descriptions-item>
+            <el-descriptions-item label="目的地">{{ form.destinationName }}</el-descriptions-item>
+            <el-descriptions-item label="时效">{{ form.timeType }}</el-descriptions-item>
+            <el-descriptions-item label="签收日期">{{ parseTime(form.signDate, '{y}-{m}-{d}') }}</el-descriptions-item>
+            <el-descriptions-item label="取件方式">
+              <dict-tag :options="dict.type.emis_qujian_fangshi" :value="form.pickupMethod"/>
+            </el-descriptions-item>
+            <el-descriptions-item label="清关方式">
+              <dict-tag :options="dict.type.emis_customs_clear" :value="form.customsClear"/>
+            </el-descriptions-item>
+            <el-descriptions-item label="报关方式">
+              <dict-tag :options="dict.type.emis_declare_mode" :value="form.customsEclaration"/>
+            </el-descriptions-item>
+            <el-descriptions-item label="派送方式">
+              <dict-tag :options="dict.type.emis_tab_dispatch_mode" :value="form.dispatchMethod"/>
+            </el-descriptions-item>
+            <el-descriptions-item label="合同号"  :span="4">{{ form.custOrderId }}</el-descriptions-item>
+
+    </el-descriptions>
+
+    <el-descriptions :title="$t('收寄件信息')"  size="mini" :column="4"  style="margin-top:10px">
+            <el-descriptions-item label="寄件人">{{ form.sender.name }}</el-descriptions-item>
+            <el-descriptions-item label="寄件电话">{{ form.sender.phone }}</el-descriptions-item>
+            <el-descriptions-item label="寄件公司">{{ form.sender.company }}</el-descriptions-item>
+            <el-descriptions-item label="客户名称">{{ form.customerName }}</el-descriptions-item>
+            <!-- <el-descriptions-item label="寄件人国家">{{ form.sendCountry }}</el-descriptions-item> -->
+            <!-- <el-descriptions-item label="寄件省">{{ form.sendProvince }}</el-descriptions-item> -->
+            <!-- <el-descriptions-item label="寄件市">{{ form.sendCity }}</el-descriptions-item> -->
+            <!-- <el-descriptions-item label="寄件区">{{ form.sendCounty }}</el-descriptions-item> -->
+            <!-- <el-descriptions-item label="寄件县">{{ form.sendTown }}</el-descriptions-item> -->
+            <el-descriptions-item label="寄件地址"  :span="4">{{ form.sender.address }}</el-descriptions-item>
+
+            <el-descriptions-item label="收件人">{{ form.reciever.name }}</el-descriptions-item>
+            <el-descriptions-item label="收件电话">{{ form.reciever.phone }}</el-descriptions-item>
+            <el-descriptions-item label="收件公司">{{ form.reciever.company }}</el-descriptions-item>
+            <!-- <el-descriptions-item label="收件客户">{{  }}</el-descriptions-item> -->
+            <el-descriptions-item label="收件地址"  :span="4">{{ form.reciever.address }}</el-descriptions-item>
+
+  </el-descriptions>
+
+  <el-descriptions :title="$t('货物收费信息')"  :column="4" style="margin-top:10px">
+            <!-- <el-descriptions-item label="总重量">{{ form.totalWeight }}</el-descriptions-item> -->
+
+            <el-descriptions-item label="件数">{{ form.parcelQty }}件</el-descriptions-item>
+            <el-descriptions-item label="体积">{{ form.totalVolume }}(m³)</el-descriptions-item>
+            <el-descriptions-item label="支付方式">
+              <dict-tag :options="dict.type.emis_payment_type" :value="form.paymentType"/>
+            </el-descriptions-item>
+            <el-descriptions-item label="运费">{{ form.freight }}</el-descriptions-item>
+            <el-descriptions-item label="实际重量">{{ form.billWeight }}(kg)</el-descriptions-item>
+            <el-descriptions-item label="体积重量">{{ form.volumeWeight }}(kg)</el-descriptions-item>
+            <!-- <el-descriptions-item label="费用币种">{{ form.currency }}</el-descriptions-item> -->
+            <el-descriptions-item label="结算重量">{{ form.settlementWeight }}(kg)</el-descriptions-item>
+            <el-descriptions-item label="货物名称">{{ form.goodsInfo }}</el-descriptions-item>
+            <el-descriptions-item label="销售联系人">{{ form.payee }}</el-descriptions-item>
+            <el-descriptions-item label="取件员/操作员">{{ form.takePieceEmployeeName }}/{{ form.operateEmployeeName }}</el-descriptions-item>
+
+            <el-descriptions-item label="包装类型">
+
+              <dict-tag v-if="form.packType&&form.packType!=''" :options="dict.type.emis_tab_packing_type" :value="form.packType.split(',')"/>
+            </el-descriptions-item>
+
+            <el-descriptions-item label="销售联系人">{{ form.salesmen }}</el-descriptions-item>
+            <el-descriptions-item label="录单员">{{ form.registerManName }}</el-descriptions-item>
+            <el-descriptions-item label="收款人备注">{{ form.feeRemark }}</el-descriptions-item>
+            <el-descriptions-item label="录单备注">{{ form.remark }}</el-descriptions-item>
+
+
+
+            <!-- <el-descriptions-item label="实际支付方式">{{ form.realPaymentType }}</el-descriptions-item> -->
+            <!-- <el-descriptions-item label="实收运费">{{ form.realFee }}</el-descriptions-item> -->
+            <!-- <el-descriptions-item label="是否特殊报价">{{ form.blSpecialQuote }}</el-descriptions-item> -->
+            <!-- <el-descriptions-item label="是否超长">{{ form.blOverLong }}</el-descriptions-item> -->
+            <!-- <el-descriptions-item label="是否出账">{{ form.blBill }}</el-descriptions-item> -->
+
+<!--
+            <el-descriptions-item label="收货人国家">{{ form.receiveCountry }}</el-descriptions-item>
+            <el-descriptions-item label="省">{{ form.receiveProvince }}</el-descriptions-item>
+            <el-descriptions-item label="市">{{ form.receiveCity }}</el-descriptions-item>
+            <el-descriptions-item label="区">{{ form.receiveCounty }}</el-descriptions-item>
+            <el-descriptions-item label="县">{{ form.receiveTown }}</el-descriptions-item> -->
+
+            <!-- <el-descriptions-item label="子单号,逗号隔开">{{ form.billCodeSub }}</el-descriptions-item> -->
+            <!-- <el-descriptions-item label="订单状态">{{ form.orderStatus }}</el-descriptions-item> -->
+            <!-- <el-descriptions-item label="运单状态">{{ form.waybillStatus }}</el-descriptions-item>
+            <el-descriptions-item label="订单类型">{{ form.orderType }}</el-descriptions-item>
+            <el-descriptions-item label="下单时间">{{ form.orderDate }}</el-descriptions-item>
+            <el-descriptions-item label="客户ID">{{ form.userId }}</el-descriptions-item>
+            <el-descriptions-item label="客户编号2502021">{{ form.customerCode }}</el-descriptions-item>
+            <el-descriptions-item label="客户客户名称">{{ form.customerName }}</el-descriptions-item>
+            <el-descriptions-item label="wx">{{ form.openId }}</el-descriptions-item>
+
+            <el-descriptions-item label="邮编">{{ form.receivePostcode }}</el-descriptions-item>
+            <el-descriptions-item label="寄件人省市区名称，逗号分隔">{{ form.receivePcd }}</el-descriptions-item>
+
+            <el-descriptions-item label="寄件邮编">{{ form.sendPostcode }}</el-descriptions-item>
+            <el-descriptions-item label="发件人省市区名称，逗号分隔">{{ form.sendPcd }}</el-descriptions-item>
+            <el-descriptions-item label="支付方式">{{ form.paymentType }}</el-descriptions-item>
+            <el-descriptions-item label="计费方式">{{ form.calcFeeType }}</el-descriptions-item>
+            <el-descriptions-item label="支付月结编号">{{ form.custNo }}</el-descriptions-item>
+            <el-descriptions-item label="月结客户的名称">{{ form.custName }}</el-descriptions-item>
+
+            <el-descriptions-item label="计泡比例">{{ form.meterType }}</el-descriptions-item>
+            <el-descriptions-item label="取重方式">{{ form.carryType }}</el-descriptions-item>
+            <el-descriptions-item label="清关方式">{{ form.customsClear }}</el-descriptions-item>
+            <el-descriptions-item label="报关方式">{{ form.customsEclaration }}</el-descriptions-item>
+            <el-descriptions-item label="预计到达时间">{{ form.estimateDate }}</el-descriptions-item>
+            <el-descriptions-item label="包装类型">{{ form.packType }}</el-descriptions-item>
+            <el-descriptions-item label="派件方式:1-派送">{{ form.dispatchMethod }}</el-descriptions-item>
+            <el-descriptions-item label="取件方式:1-上门取件">{{ form.pickupMethod }}</el-descriptions-item>
+            <el-descriptions-item label="预计上门取件开始时间">{{ form.pickStartDate }}</el-descriptions-item>
+            <el-descriptions-item label="预计上门取件结束时间">{{ form.pickFinishDate }}</el-descriptions-item>
+            <el-descriptions-item label="取货失败原因">{{ form.pickFailReason }}</el-descriptions-item>
+            <el-descriptions-item label="入仓代码">{{ form.intoWarehouseCode }}</el-descriptions-item>
+            <el-descriptions-item label="入仓名称">{{ form.intoWarehouseName }}</el-descriptions-item>
+            <el-descriptions-item label="入仓地址">{{ form.intoWarehouseAddress }}</el-descriptions-item>
+            <el-descriptions-item label="入仓联系人">{{ form.intoWarehouseContact }}</el-descriptions-item>
+            <el-descriptions-item label="入仓联系人电话">{{ form.intoWarehousePhone }}</el-descriptions-item>
+            <el-descriptions-item label="入仓预报单号">{{ form.intoWarehouseBillCode }}</el-descriptions-item>
+            <el-descriptions-item label="实际进仓单关联">{{ form.warehouseInNo }}</el-descriptions-item>
+            <el-descriptions-item label="客户发货开始时间">{{ form.customerDeliveryBeginTime }}</el-descriptions-item>
+            <el-descriptions-item label="客户发货截止时间">{{ form.customerDeliveryEndTime }}</el-descriptions-item>
+            <el-descriptions-item label="货物大类">{{ form.goodsType }}</el-descriptions-item>
+            <el-descriptions-item label="货物描述">{{ form.goodsInfo }}</el-descriptions-item>
+            <el-descriptions-item label="货物图片，逗号隔开">{{ form.goodsPics }}</el-descriptions-item>
+            <el-descriptions-item label="预入仓代垫运费">{{ form.blPrepareInFreight }}</el-descriptions-item>
+            <el-descriptions-item label="预入仓代垫运费">{{ form.prepareInEstFee }}</el-descriptions-item>
+            <el-descriptions-item label="预入仓实际运费">{{ form.prepareInRealFee }}</el-descriptions-item>
+            <el-descriptions-item label="预入仓快递公司">{{ form.prepareInExpress }}</el-descriptions-item>
+            <el-descriptions-item label="预入仓快递单号">{{ form.prepareInBillCode }}</el-descriptions-item>
+            <el-descriptions-item label="预入仓自定义标识">{{ form.prepareInRemark }}</el-descriptions-item>
+            <el-descriptions-item label="预入仓供应商">{{ form.prepareInSupplier }}</el-descriptions-item>
+            <el-descriptions-item label="总重量">{{ form.totalWeight }}</el-descriptions-item>
+            <el-descriptions-item label="总体积">{{ form.totalVolume }}</el-descriptions-item>
+            <el-descriptions-item label="件数">{{ form.parcelQty }}</el-descriptions-item>
+            <el-descriptions-item label="实际重量">{{ form.billWeight }}</el-descriptions-item>
+            <el-descriptions-item label="体积重量">{{ form.volumeWeight }}</el-descriptions-item>
+            <el-descriptions-item label="费用币种">{{ form.currency }}</el-descriptions-item>
+            <el-descriptions-item label="结算重量">{{ form.settlementWeight }}</el-descriptions-item>
+            <el-descriptions-item label="扫描重量">{{ form.scanWeight }}</el-descriptions-item>
+            <el-descriptions-item label="计费重量">{{ form.feeWeight }}</el-descriptions-item>
+            <el-descriptions-item label="运费">{{ form.freight }}</el-descriptions-item>
+            <el-descriptions-item label="实际支付方式">{{ form.realPaymentType }}</el-descriptions-item>
+            <el-descriptions-item label="实收运费">{{ form.realFee }}</el-descriptions-item>
+            <el-descriptions-item label="是否特殊报价">{{ form.blSpecialQuote }}</el-descriptions-item>
+            <el-descriptions-item label="是否超长">{{ form.blOverLong }}</el-descriptions-item>
+            <el-descriptions-item label="是否出账">{{ form.blBill }}</el-descriptions-item>
+            <el-descriptions-item label="账单备注">{{ form.blBillText }}</el-descriptions-item>
+            <el-descriptions-item label="是否超重">{{ form.blOverWeight }}</el-descriptions-item>
+            <el-descriptions-item label="超重重量">{{ form.overWeightNumber }}</el-descriptions-item>
+            <el-descriptions-item label="费用备注">{{ form.feeRemaker }}</el-descriptions-item>
+            <el-descriptions-item label="三段码">{{ form.thirdCode }}</el-descriptions-item>
+            <el-descriptions-item label="实际货值">{{ form.realValue }}</el-descriptions-item>
+            <el-descriptions-item label="是否投保">{{ form.blInsure }}</el-descriptions-item>
+            <el-descriptions-item label="投保货值">{{ form.insureValue }}</el-descriptions-item>
+            <el-descriptions-item label="投保货值币种">{{ form.insureValueCurrency }}</el-descriptions-item>
+            <el-descriptions-item label="保费币种">{{ form.insureFeeCurrency }}</el-descriptions-item>
+            <el-descriptions-item label="保费">{{ form.insureFee }}</el-descriptions-item>
+            <el-descriptions-item label="保险备注">{{ form.insureRemark }}</el-descriptions-item>
+            <el-descriptions-item label="保险站点代码">{{ form.insureSiteCode }}</el-descriptions-item>
+            <el-descriptions-item label="投保日期">{{ form.insureDate }}</el-descriptions-item>
+            <el-descriptions-item label="是否打印">{{ form.blPrint }}</el-descriptions-item>
+            <el-descriptions-item label="打印人编号">{{ form.printManCode }}</el-descriptions-item>
+            <el-descriptions-item label="打印站点">{{ form.printSite }}</el-descriptions-item>
+            <el-descriptions-item label="打印时间">{{ form.printDate }}</el-descriptions-item>
+            <el-descriptions-item label="打印次数">{{ form.printCount }}</el-descriptions-item>
+            <el-descriptions-item label="是否同行转单">{{ form.blDispFd }}</el-descriptions-item>
+            <el-descriptions-item label="转单快递代码">{{ form.transferCode }}</el-descriptions-item>
+            <el-descriptions-item label="转单单号">{{ form.transferBillcode }}</el-descriptions-item>
+            <el-descriptions-item label="转单时间">{{ form.dispFdDate }}</el-descriptions-item>
+            <el-descriptions-item label="转单原因">{{ form.dispFdReason }}</el-descriptions-item>
+            <el-descriptions-item label="当前网点编号">{{ form.currentSiteCode }}</el-descriptions-item>
+            <el-descriptions-item label="下一网点编号">{{ form.nextSiteCode }}</el-descriptions-item>
+            <el-descriptions-item label="上一网点点号">{{ form.lastSiteCode }}</el-descriptions-item>
+            <el-descriptions-item label="登记站点代码">{{ form.registerSiteCode }}</el-descriptions-item>
+            <el-descriptions-item label="登记时间">{{ form.registerDate }}</el-descriptions-item>
+            <el-descriptions-item label="登记人编号">{{ form.registerManCode }}</el-descriptions-item>
+            <el-descriptions-item label="取件员代码">{{ form.takePieceEmployeeCode }}</el-descriptions-item>
+            <el-descriptions-item label="发件网点代码">{{ form.sendSiteCode }}</el-descriptions-item>
+            <el-descriptions-item label="发件财务中心代码">{{ form.sendCenterCode }}</el-descriptions-item>
+            <el-descriptions-item label="发货时间">{{ form.sendDate }}</el-descriptions-item>
+            <el-descriptions-item label="派件人代码">{{ form.dispatchManCode }}</el-descriptions-item>
+            <el-descriptions-item label="派件时间">{{ form.dispatchDate }}</el-descriptions-item>
+            <el-descriptions-item label="派件网点代码">{{ form.dispatchSiteCode }}</el-descriptions-item>
+            <el-descriptions-item label="生成账单时间">{{ form.produceBillDate }}</el-descriptions-item>
+            <el-descriptions-item label="生成账单站点代码">{{ form.produceBillSiteCode }}</el-descriptions-item>
+            <el-descriptions-item label="生成账单人代码">{{ form.produceBillManCode }}</el-descriptions-item>
+            <el-descriptions-item label="目的省">{{ form.destinationProvince }}</el-descriptions-item>
+            <el-descriptions-item label="目的城市">{{ form.destinationCity }}</el-descriptions-item>
+            <el-descriptions-item label="目的国家">{{ form.destinationCounty }}</el-descriptions-item>
+            <el-descriptions-item label="目的地网点代码">{{ form.dispatchUnderlingSiteCode }}</el-descriptions-item>
+            <el-descriptions-item label="目的地财务中心代码">{{ form.destinationCenterCode }}</el-descriptions-item>
+            <el-descriptions-item label="业务人代码">{{ form.marketManCode }}</el-descriptions-item>
+
+            <el-descriptions-item label="操作员代码">{{ form.operateEmployeeCode }}</el-descriptions-item>
+            <el-descriptions-item label="是否问题件">{{ form.blIsQuestion }}</el-descriptions-item>
+            <el-descriptions-item label="问题件类型">{{ form.problemType }}</el-descriptions-item>
+            <el-descriptions-item label="问题件原因">{{ form.problemCause }}</el-descriptions-item>
+            <el-descriptions-item label="问题件延期天数">{{ form.problemDelayDays }}</el-descriptions-item>
+            <el-descriptions-item label="是否给寄件人发短信">{{ form.blMessage }}</el-descriptions-item>
+            <el-descriptions-item label="是否给收件人发短信">{{ form.blAcceptMessage }}</el-descriptions-item>
+            <el-descriptions-item label="是否生成子单">{{ form.blGenSubbill }}</el-descriptions-item>
+            <el-descriptions-item label="签收状态">{{ form.blSign }}</el-descriptions-item>
+            <el-descriptions-item label="签收人(客户)">{{ form.signMan }}</el-descriptions-item>
+            <el-descriptions-item label="签收员代码">{{ form.signManCode }}</el-descriptions-item>
+            <el-descriptions-item label="签收站点代码">{{ form.signSiteCode }}</el-descriptions-item>
+            <el-descriptions-item label="sign_date">{{ form.signDate }}</el-descriptions-item>
+            <el-descriptions-item label="揽收图片备注">{{ form.billPicSendRmk }}</el-descriptions-item>
+            <el-descriptions-item label="签收底单图片">{{ form.billPicDispatchRmk }}</el-descriptions-item>
+            <el-descriptions-item label="时区偏差">{{ form.timezoneOffset }}</el-descriptions-item>
+            <el-descriptions-item label="付款状态">{{ form.paymentStatus }}</el-descriptions-item>
+            <el-descriptions-item label="付款时间">{{ form.paymentDate }}</el-descriptions-item>
+            <el-descriptions-item label="付款备注">{{ form.paymentRemark }}</el-descriptions-item>
+            <el-descriptions-item label="订单备注">{{ form.orderRemark }}</el-descriptions-item>
+            <el-descriptions-item label="数据来源">{{ form.dataFrom }}</el-descriptions-item>
+            <el-descriptions-item label="是否敏感物">{{ form.blSpecialGoods }}</el-descriptions-item>
+            <el-descriptions-item label="录单备注">{{ form.remark }}</el-descriptions-item>
+            <el-descriptions-item label="删除标志（0代表存在">{{ form.delFlag }}</el-descriptions-item>
+            <el-descriptions-item label="创建者">{{ form.createBy }}</el-descriptions-item>
+            <el-descriptions-item label="创建时间">{{ form.createTime }}</el-descriptions-item>
+            <el-descriptions-item label="更新者">{{ form.updateBy }}</el-descriptions-item>
+            <el-descriptions-item label="更新时间">{{ form.updateTime }}</el-descriptions-item>
+            <el-descriptions-item label="创建网点">{{ form.createSite }}</el-descriptions-item>
+            <el-descriptions-item label="更新网点">{{ form.updateSite }}</el-descriptions-item> -->
+
+    </el-descriptions>
+
+</div>
+</template>
+
+<script>
+import { getWaybillDetail} from "@/api/emis/emisWaybill";
+import { parseTime } from "@/utils/custom";
+
+
+export default {
+  name: "WaybillDetailReadOnly",
+  // name: "WaybillModify",
+  props: {
+      billCode: {
+        type: String,
+        required: true
+      },
+    },
+components: {
+
+},
+dicts: ['emis_qujian_fangshi','emis_declare_mode','emis_customs_clear',
+        'emis_tab_packing_type','emis_tab_dispatch_mode','emis_payment_type',
+        'emis_calc_fee_type','emis_print_type'],
+data() {
+  return {
+    activeNames:['1','2','3','4'],
+    form:{
+      id:null,
+      reciever: {
+          country: null,
+          name: null,
+          phone:null,
+          province: null,
+          city: null,
+          district: null,
+          town: null,
+          address: null,
+          postCode: null,
+          email: null,
+          company: null,
+      },
+      sender: {
+          country: null,
+          name: null,
+          phone:null,
+          province: null,
+          city: null,
+          district: null,
+          town: null,
+          address: null,
+          postCode: null,
+          email: null,
+          company: null,
+      },
+      feeItems: [],
+      cargoList: [],
+      attachmentList: [],
+      printTypeCheckList:[],
+      billCode: null,
+      orderDate:  null,
+      openId: null,
+      customerCode: null,
+      paymentType: null,
+      calcFeeType: '1',
+      custNo:  null,
+      productTypeSelArr: null,
+      transLine:  null,
+      productType: null,
+      customsClear: null,
+      customsEclaration: null,
+      packType: null,
+      dispatchMethod: "1",
+      pickupMethod: null,
+      pickStartDate: null,
+      pickFinishDate: null,
+      intoWarehouseCode: null,
+      intoWarehouseName: null,
+      intoWarehouseAddress: null,
+      intoWarehouseContact: null,
+      intoWarehousePhone:  null,
+      intoWarehouseBillCode: null,
+      customerDeliveryBeginTime: null,
+      goodsType:null,
+      goodsInfo: null,
+      length:null,
+      width:null,
+      height:null,
+      totalWeight: null,
+      totalVolume: null,
+      parcelQty: null,
+      billWeight: null,
+      volumeWeight: null,
+      settlementWeight: null,
+      feeWeight: null,
+      freight: null,
+      blOverLong: null,
+      blOverWeight: null,
+      overWeightNumber: null,
+      feeRemark: null,
+      realValue: null,
+      takePieceEmployeeCode: null,
+      sendSiteCode: null,
+      sendSiteName: null,
+      destinationCountry:  null,
+      destinationCode:  null,
+      dispatchUnderlingSiteCode: null,
+      destinationCenterCode: null,
+      marketManCode: null,
+      payee: null,
+      salesmen: null,
+      operateEmployeeCode: null,
+      blMessage: null,
+      blAcceptMessage: null,
+      meterType:null,
+      blGenSubbill:null,
+      billCodeSub:null,
+      blSpecialQuote:null,
+      blSensitive:null,
+      lockFlag:null,
+      lockReason:null,
+  },
+    // 遮罩层
+    loading: true,
+    // 表单校验
+    rules: {
+
+    }
+  };
+},
+computed: {
+},
+ watch: {
+  billCode(newVal){
+    this.initData();
+  }
+},
+
+created() {
+  this.initData();
+},
+methods: {
+    openCollapse(index){
+
+    },
+    initData() {
+        console.log("====billCode=1=>",this.billCode)
+        if(this.billCode && this.billCode!=undefined) {
+          this.loading = true;
+          getWaybillDetail(this.billCode).then(response => {
+            this.form = response.data;
+            console.log("====response.data=1=>",response.data)
+            this.loading = false;
+          });
+        }
+
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+
+.el-descriptions-item__content{
+  font-weight:bold;
+  color: #000;
+}
+
+.el-form-item__label {
+    color: #000;
+}
+
+.el-input-group__append {
+    padding: 0 4px;
+}
+
+.el-row{
+      display:flex;
+      flex-wrap: wrap;
+      // padding-right: 10px;
+ }
+
+.el-form-item__label {
+  font-size: 12px!important;
+}
+
+
+ .platform-auto-complete {
+  .el-autocomplete-suggestion__wrap {
+    padding: 5px 0;
+    ul li {
+      pointer-events: none; // 阻止可点击事件
+      .default {
+        text-align: center;
+        color: #999;
+      }
+      &:hover {
+        background-color: #fff;
+      }
+    }
+  }
+}
+
+.el-collapse {
+    border-top: none!important;
+    border-bottom: none!important;
+}
+
+.el-table .el-table__cell:first-child .cell {
+  padding: 0px;
+}
+
+.el-table .cell {
+    padding: 0px;
+}
+
+.cargoList{
+  .el-input__inner {
+      height: 28px;
+      line-height: 28px;
+      border: none;
+      background: #ffffcd;
+      font-size: 10px;
+      padding: 0px;
+      text-align: center;
+  }
+}
+
+  .el-collapse-item__content {
+      padding-bottom: 0px;
+  }
+  .el-collapse-item__header{
+    pointer-events: none;
+  }
+
+  .el-collapse-item__arrow {
+    pointer-events: auto;
+  }
+
+</style>
+
diff --git a/src/views/emis/emisWaybill/waybillPreCalcFee.vue b/src/views/emis/emisWaybill/waybillPreCalcFee.vue
new file mode 100644
index 00000000..098ba843
--- /dev/null
+++ b/src/views/emis/emisWaybill/waybillPreCalcFee.vue
@@ -0,0 +1,439 @@
+<template>
+  <div class="app-container">
+    <el-form ref="form"  size="mini" :model="form" :rules="rules"  label-width="100px">
+      <el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
+          <el-col :span="6">
+            <el-form-item label="寄件网点" prop="sendSiteCode">
+                <EmisSiteSimplePicker v-model="form.sendSiteCode"   ></EmisSiteSimplePicker>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="6">
+            <el-form-item label="目的国" prop="destinationCountry" >
+                <CountryPicker0 v-model="form.destinationCountry" @change="onDestinationCountryChange"></CountryPicker0>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="所属线路" prop="transLine">
+              <TransLinePicker v-model="form.transLine" :countryCode="form.destinationCountry"></TransLinePicker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+          </el-col>
+          <el-col :span="6">
+              <el-form-item label="目的省份" prop="reciever.province">
+                <div style="display:inline-flex">
+                  <ProvincePicker2  v-model="form.reciever.province" :countryCode="form.destinationCountry"  style="margin-left:5px" @onChange="handleCalcDestSite" ></ProvincePicker2>
+                </div>
+              </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="目的地" prop="destinationCode">
+              <DestinationPicker v-model="form.destinationCode" :countryCode="form.destinationCountry" :lineCode="form.transLine" @onChange="onDestinationChange"></DestinationPicker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="目的网点" prop="dispatchUnderlingSiteCode">
+              <el-input v-model="form.dispatchUnderlingSite" placeholder="" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="报关方式" prop="customsEclaration">
+              <el-select v-model="form.customsEclaration" placeholder="请选择">
+                <el-option
+                  v-for="dict in dict.type.emis_declare_mode"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="清关方式" prop="customsClear">
+              <el-select v-model="form.customsClear" placeholder="请选择"  >
+                <el-option
+                  v-for="dict in dict.type.emis_customs_clear"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+          </el-col>
+          <el-col :span="6">
+              <el-form-item label="实际重量" prop="billWeight" >
+                <el-input v-model="form.billWeight"  style="text-align: right;min-width: 80px" placeholder="请输入实际重量" >
+                  <span slot="suffix">(kg)</span>
+                </el-input>
+              </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="总体积" prop="totalVolume"  >
+              <div style="">
+                <el-input v-model="form.totalVolume"  style="text-align: right;width: 120px" placeholder="体积" >
+                  <span slot="suffix">(m³)</span>
+                </el-input>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+      <div style="text-align: center;margin-top:10px;margin-bottom: 10px;">
+        <el-button type="primary" @click="submitCalcFee">运费试算</el-button>
+      </div>
+
+    </el-form>
+
+    <el-row :gutter="10" style="display: flex;flex-wrap: wrap;">
+      <el-col :span="6" v-for="(item,index) in productFeeList" :key="index" >
+        <CardWithHeader :header="item.productTypeName" :isLinearBg="true" >
+            <template v-slot:body>
+              <div style="font-size: 13px;display:inline-flex;width: 100%;">
+                  <div style="width:40%;color:gray">{{ item.agingDesc }}</div>
+                  <div style="width:60%;color:gray;    text-align: right;">运费预估:<span style="font-size: 14px;font-weight:bold;color:red">￥{{ item.estFee }}</span></div>
+              </div>
+            </template>
+        </CardWithHeader>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { preCalcWaybillFee} from "@/api/emis/emisWaybill";
+import { getDestSite } from "@/api/emis/emisDestination";
+import DestinationPicker from '@/views/emis/EmisBaseTools/DestinationPicker.vue';
+import EmisSiteSimplePicker from '@/views/emis/EmisBaseTools/EmisSiteSimplePicker.vue';
+import TransLinePicker from '@/views/emis/EmisBaseTools/TransLinePicker.vue';
+import CountryPicker0 from '@/views/emis/EmisBaseTools/CountryPicker.vue';
+import ProvincePicker2 from '@/views/emis/EmisBaseTools/ProvincePicker.vue';
+import CardWithHeader from '@/components/CardWithHeader/index.vue';
+
+export default {
+  name: "WaybillPreCalcFee.vue",
+  components: {
+    EmisSiteSimplePicker,
+    DestinationPicker,
+    TransLinePicker,
+    CountryPicker0,
+    ProvincePicker2,
+    CardWithHeader
+  },
+  dicts: ['emis_qujian_fangshi','emis_declare_mode','emis_customs_clear',
+          'emis_tab_packing_type','emis_tab_dispatch_mode','emis_payment_type',
+          'emis_calc_fee_type','emis_print_type'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      productFeeList:[],
+      form:{},
+      // 表单校验
+      rules: {
+        destinationCountry: [
+            { required: true, message: "目的国不能为空",  trigger: ["blur",'change'] }
+        ],
+        reciever:{
+          province: [
+            { required: true, message: "省不能为空", trigger: ["blur",'change']  }
+          ],
+        },
+        calcFeeType: [
+          { required: true, message: "计费方式不能为空", trigger: ["blur",'change']  }
+        ],
+        transLine: [
+          { required: true, message: "快递线路不能为空", trigger: ["blur",'change']  }
+        ],
+        customsClear: [
+          { required: true, message: "清关方式不能为空", trigger: ["blur",'change']  }
+        ],
+        customsEclaration: [
+          { required: true, message: "报关方式不能为空", trigger: ["blur",'change']  }
+        ],
+        billWeight: [
+          { required: true, message: "实际重量不能为空", trigger: "blur" }
+        ],
+        sendSiteCode: [
+          { required: true, message: "寄件网点代码不能为空", trigger: ["blur",'change'] }
+        ],
+        dispatchUnderlingSiteCode: [
+          { required: true, message: "目的地网点代码不能为空", trigger: "blur" }
+        ],
+
+      }
+    };
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    onDestinationCountryChange(){
+    },
+    initData() {
+        this.reset();
+        this.form.sendSiteCode=this.$store.getters.ownerSiteCode;
+        this.form.customsEclaration='1';
+        this.form.customsClear='1';
+    },
+    // 取消按钮
+    cancel() {
+      this.reset();
+      this.$emit("on-cancel");
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id:null,
+        reciever: {
+            country: null,
+            name: null,
+            phone:null,
+            province: null,
+            city: null,
+            district: null,
+            town: null,
+            address: null,
+            postCode: null,
+            email: null,
+            company: null,
+        },
+        sender: {
+            country: null,
+            name: null,
+            phone:null,
+            province: null,
+            city: null,
+            district: null,
+            town: null,
+            address: null,
+            postCode: null,
+            email: null,
+            company: null,
+        },
+        feeItems: [],
+        cargoList: [],
+        attachmentList: [],
+        printTypeCheckList:[],
+        billCode: null,
+        orderDate:  null,
+        openId: null,
+        customerCode: null,
+        paymentType: null,
+        calcFeeType: '1',
+        custNo:  null,
+        productTypeSelArr: null,
+        transLine:  null,
+        productType: null,
+        customsClear: null,
+        customsEclaration: null,
+        packType: null,
+        dispatchMethod: "1",
+        pickupMethod: null,
+        pickStartDate: null,
+        pickFinishDate: null,
+        intoWarehouseCode: null,
+        intoWarehouseName: null,
+        intoWarehouseAddress: null,
+        intoWarehouseContact: null,
+        intoWarehousePhone:  null,
+        intoWarehouseBillCode: null,
+        customerDeliveryBeginTime: null,
+        goodsType:null,
+        goodsInfo: null,
+        length:null,
+        width:null,
+        height:null,
+        totalWeight: null,
+        totalVolume: null,
+        parcelQty: null,
+        billWeight: null,
+        volumeWeight: null,
+        settlementWeight: null,
+        feeWeight: null,
+        freight: null,
+        blOverLong: null,
+        blOverWeight: null,
+        overWeightNumber: null,
+        feeRemark: null,
+        realValue: null,
+        takePieceEmployeeCode: null,
+        sendSiteCode: null,
+        sendSiteName: null,
+        destinationCountry:  null,
+        destinationCode:  null,
+        dispatchUnderlingSiteCode: null,
+        destinationCenterCode: null,
+        marketManCode: null,
+        payee: null,
+        salesmen: null,
+        operateEmployeeCode: null,
+        blMessage: null,
+        blAcceptMessage: null,
+        meterType:null,
+        blGenSubbill:null,
+        billCodeSub:null,
+        blSpecialQuote:null,
+        blSensitive:null,
+        lockFlag:null,
+        lockReason:null,
+      };
+      this.resetForm("form");
+    },
+      /** 提交按钮 */
+    submitCalcFee() {
+        this.form.sendDate =this.sendDate;
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+
+            this.preCalcFee();
+
+          }
+        });
+    },
+    // 计算目的站点
+    handleCalcDestSite(){
+      this.calcDestSite();
+    },
+    calcDestSite(){
+      let queryParams = {
+          province:this.form.reciever.province
+      };
+      if(this.form.reciever.province){
+          getDestSite(queryParams).then(response => {
+            this.form.destinationCode = response.data.destCode+'';
+            this.form.dispatchSiteCode= response.data.siteCode;
+            this.form.dispatchSite = response.data.siteName;
+            this.form.dispatchUnderlingSiteCode= response.data.siteCode;
+            this.form.dispatchUnderlingSite= response.data.siteName;
+          });
+      }
+    },
+    onDestinationChange(item){
+      this.form.dispatchUnderlingSiteCode= item.siteCode;
+      this.form.dispatchUnderlingSite= item.siteName;
+    },
+
+  //   onDestinationChange(item){
+  //   // this.form.destinationCode = item.destCode;
+  //   this.form.dispatchUnderlingSiteCode= item.siteCode;
+  //   this.form.dispatchSiteCode= item.siteCode;
+
+  //   this.form.dispatchUnderlingSite= item.siteName;
+  //   this.form.dispatchSite= item.siteName;
+  // },
+
+    preCalcFee(){
+
+      if(this.form.billWeight
+          && this.form.transLine
+          && this.form.sendSiteCode
+          && this.form.dispatchUnderlingSiteCode
+          && this.form.customsClear
+          && this.form.customsEclaration
+        ){
+
+
+          let postData={
+            transLine: this.form.transLine,
+            calcFeeType:1,
+            sendSiteCode: this.form.sendSiteCode,
+            dispatchUnderlingSiteCode: this.form.dispatchUnderlingSiteCode,
+            billWeight: this.form.billWeight,
+            totalVolume: this.form.totalVolume,
+            customsClear:this.form.customsClear,
+            customsEclaration:this.form.customsEclaration
+          }
+
+          // 通过服务器其计算，保留自定义费用
+          preCalcWaybillFee(postData).then(response => {
+                  console.log(response);
+
+                  this.productFeeList = response.data;
+          });
+        }
+    },
+
+  }
+};
+</script>
+
+<style lang="scss">
+
+.el-form-item__label {
+    color: #000;
+}
+
+.el-input-group__append {
+    padding: 0 4px;
+}
+
+.el-row{
+      display:flex;
+      flex-wrap: wrap;
+      // padding-right: 10px;
+ }
+
+.el-form-item__label {
+  font-size: 12px!important;
+}
+
+
+ .platform-auto-complete {
+  .el-autocomplete-suggestion__wrap {
+    padding: 5px 0;
+    ul li {
+      pointer-events: none; // 阻止可点击事件
+      .default {
+        text-align: center;
+        color: #999;
+      }
+      &:hover {
+        background-color: #fff;
+      }
+    }
+  }
+}
+
+.el-collapse {
+    border-top: none!important;
+    border-bottom: none!important;
+}
+
+.el-table .el-table__cell:first-child .cell {
+  padding: 0px;
+}
+
+.el-table .cell {
+    padding: 0px;
+}
+
+.cargoList{
+  .el-input__inner {
+      height: 28px;
+      line-height: 28px;
+      border: none;
+      background: #ffffcd;
+      font-size: 10px;
+      padding: 0px;
+      text-align: center;
+  }
+}
+
+  .el-collapse-item__content {
+      padding-bottom: 0px;
+  }
+  .el-collapse-item__header{
+    pointer-events: none;
+  }
+
+  .el-collapse-item__arrow {
+    pointer-events: auto;
+  }
+
+</style>
+