From 33df9c4a5fec499cb11d5f656369448296f6a262 Mon Sep 17 00:00:00 2001
From: linfso <linfso@sina.com>
Date: Mon, 6 Jan 2025 08:33:22 +0800
Subject: [PATCH] md

---
 .../oms/emisWaybill/OrderDetailReadOnly.vue   | 581 ++++++++++++++++++
 1 file changed, 581 insertions(+)
 create mode 100644 src/views/oms/emisWaybill/OrderDetailReadOnly.vue

diff --git a/src/views/oms/emisWaybill/OrderDetailReadOnly.vue b/src/views/oms/emisWaybill/OrderDetailReadOnly.vue
new file mode 100644
index 0000000..cfe59db
--- /dev/null
+++ b/src/views/oms/emisWaybill/OrderDetailReadOnly.vue
@@ -0,0 +1,581 @@
+<template>
+<div class=""  >
+
+  <div >
+    <div style="    font-size: 13px;
+    color: black;
+    margin-bottom: 8px;display: inline-flex;    width: 100%;">
+      <div style="width:40%"> 运单号:<span style="font-weight: bold; ">{{ form.billCode }} </span> 订单号:{{ form.orderSn }}     </div>
+      <div>下单时间:{{ form.orderDate }}</div>
+    </div>
+    <el-row :gutter="0" style="display: flex;flex-wrap: wrap;">
+      <el-col :span="12" >
+        <div style="line-height: 30px;">
+          <span style="border-radius: 15px;
+                              padding: 5px 15px;
+                              background: black;
+                              font-size: 13px;
+                              color: white;">{{ $t('寄') }} - {{ form.sender.countryName }} {{ form.sender.provinceName }} - {{ form.sendSiteName }} </span>
+          </div>
+
+          <div style="    font-size: 12px;
+    font-weight: bold;
+    color: black;
+    border: 1px solid #e6ebf5;
+    margin-top: 10px;    min-height: 90px;">
+            <div>{{ form.sender.name }} {{ form.sender.phone }}</div>
+              <div>{{ form.sender.countryName }} {{ form.sender.provinceName }} {{ form.sender.cityName }} {{ form.sender.countyName }} {{ form.sender.address }}</div>
+              <div>{{ form.sender.company }}</div>
+          </div>
+
+      </el-col>
+      <el-col :span="12" >
+        <div style="line-height: 30px;">
+          <span style="border-radius: 15px;
+                              padding: 5px 15px;
+                              background: #b12e29;
+                              font-size: 13px;
+                              color: white;"> {{ $t('收') }} - {{ form.reciever.countryName }} {{ form.reciever.provinceName }} - {{ form.dispatchUnderlingSiteName }}</span>
+          </div>
+
+          <div style="    font-size: 12px;
+    font-weight: bold;
+    color: black;
+    border: 1px solid #e6ebf5;
+    margin-top: 10px;    min-height: 90px;">
+             <div>{{ form.reciever.name }} {{ form.reciever.phone }}</div>
+              <div>{{ form.reciever.countryName }} {{ form.reciever.provinceName }} {{ form.reciever.cityName }} {{ form.reciever.countyName }} {{ form.reciever.address }}</div>
+              <div>{{ form.reciever.company }}</div>
+              <!-- <div style="margin-top: 10px;">目的网点:{{ form.sendSiteName }}  目的地:{{ form.destinationName }}</div> -->
+          </div>
+
+      </el-col>
+    </el-row>
+  </div>
+
+    <el-descriptions :title="$t('发货信息')" size="small"  :column="2" style="margin-top:10px">
+            <!-- <el-descriptions-item label="产品类型">{{ form.productTypeName }}{{ form.timeType }}</el-descriptions-item> -->
+            <el-descriptions-item label="产品">{{ form.transLineTypeName }}-{{ form.productTypeName }}({{ form.timeType }})</el-descriptions-item>
+            <!-- <el-descriptions-item label="发件日期">{{ parseTime(form.sendDate, '{y}-{m}-{d}') }}</el-descriptions-item> -->
+            <!-- <el-descriptions-item label="预计送达时间">{{ parseTime(form.estimateDate, '{y}-{m}-{d}') }}</el-descriptions-item> -->
+            <!-- <el-descriptions-item label="目的网点">{{ form.dispatchUnderlingSiteName }}</el-descriptions-item> -->
+            <!-- <el-descriptions-item label="目的地">{{ form.destinationName }}</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="派件员">{{ form.dispatchManName }}/{{ form.operateEmployeeName }}</el-descriptions-item> -->
+            <!-- <el-descriptions-item label="合同号"  :span="4">{{ form.custOrderId }}</el-descriptions-item> -->
+            <!-- <el-descriptions-item label="专属取件员">{{ form.takePieceEmployeeName }}/{{ form.operateEmployeeName }}</el-descriptions-item> -->
+            <!-- <el-descriptions-item label="录单员">{{ form.registerManName }}</el-descriptions-item> -->
+            <el-descriptions-item v-if="form.paymentType == 2 || form.paymentType == 4 || form.paymentType == 5"  label="月结客户" >{{ form.customerName }}</el-descriptions-item>
+            <!-- <el-descriptions-item label="回款联系人">{{ form.payee }}</el-descriptions-item> -->
+            <el-descriptions-item label="销售联系人">{{ form.salesmen }}</el-descriptions-item>
+    </el-descriptions>
+
+    <el-descriptions title="" size="small"  :column="4" v-if="form.pickupMethod==1 || form.pickupMethod==3">
+      <el-descriptions-item label="仓库收货信息" :span="1">
+        <div>
+              仓库名：<span>{{ form.intoWarehouseName }}</span>
+            </div>
+            <div>
+              联系人: <span>{{ form.intoWarehouseContact }} {{ form.intoWarehousePhone }} </span>
+            </div>
+            <div>
+              地址:{{ form.intoWarehouseAddress }}
+            </div>
+            <div>
+              进仓单号：{{ form.warehouseInNo }}  预计进仓日期：{{ form.pickStartDate }}
+            </div>
+      </el-descriptions-item>
+    </el-descriptions>
+
+    <el-descriptions title="" size="small"  :column="4" v-if="form.pickupMethod==2 ">
+      <el-descriptions-item label="上门取件信息" :span="1">
+            <div>
+              取件员:{{ form.takePieceEmployeeName }}
+            </div>
+            <div>
+              预约取件时间：{{ form.pickStartDate }}
+            </div>
+      </el-descriptions-item>
+    </el-descriptions>
+
+
+  <el-row :gutter="0" style="display: flex;flex-wrap: wrap;margin-top: 10px;">
+    <el-col :span="12">
+      <el-descriptions :title="$t('货物信息')" size="small" :column="4" style="margin-top:10px">
+            <el-descriptions-item label="货物名称" :span="4">{{ form.goodsInfo }}</el-descriptions-item>
+            <el-descriptions-item label="件数">{{ form.parcelQty }}件</el-descriptions-item>
+            <el-descriptions-item label="包装类型" :span="4">
+              <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.billWeight }}(kg)</el-descriptions-item>
+            <el-descriptions-item label="体积">{{ form.totalVolume }}(m³)</el-descriptions-item>
+            <el-descriptions-item label="体积重量" :span="4">{{ form.volumeWeight }}(kg)</el-descriptions-item>
+            <el-descriptions-item label="包裹明细" :span="4">
+              <el-table
+                            class="cargoList"
+                            :cell-style="{
+                              'padding': '0px!important',
+                              'padding-left': '0px!important',
+                              'padding-right': '0px!important',
+                              'font-size':'11px'
+                            }"
+                            :header-cell-style="{
+                              'font-size':'11px'
+                            }"
+                            border
+                            stripe
+                            :data="form.cargoList"
+                            size="small"
+                            style="width: 100%"
+                            max-height="300px"
+                          >
+
+                            <el-table-column  :label="$t('序号')" align="center" width="30">
+                                  <template slot-scope="scope">
+                                      <span > {{scope.$index+1}}</span>
+                                  </template>
+                            </el-table-column>
+                            <!-- <el-table-column prop="goodsName"  :label="$t('货物名称')" align="center" width="80" :show-overflow-tooltip="true">
+                              <template slot-scope="scope">
+                                {{  scope.row.goodsName }}
+                              </template>
+                            </el-table-column> -->
+                            <el-table-column prop="length"  :label="$t('长(cm)')"  align="center" width="60">
+                              <template slot-scope="scope">
+                                {{ scope.row.length }}
+                              </template>
+                            </el-table-column>
+                            <el-table-column prop="width"  :label="$t('宽(cm)')"  align="center" width="60">
+                              <template slot-scope="scope">
+                                {{  scope.row.width }}
+                              </template>
+                            </el-table-column>
+                            <el-table-column prop="height"   :label="$t('高(cm)')" align="center" width="60">
+                              <template slot-scope="scope">
+                                {{  scope.row.height }}
+                              </template>
+                            </el-table-column>
+                            <el-table-column prop="cargoQty" :label="$t('件数')" align="center" width="60">
+                              <template slot-scope="scope">
+                                {{  scope.row.cargoQty }}
+                              </template>
+                            </el-table-column>
+                            <el-table-column prop="volume"  :label="$t('体积(m³)')" align="center" width="80">
+                              <template slot-scope="scope">
+                                {{  scope.row.volume }}
+                              </template>
+                            </el-table-column>
+
+                            <!-- <el-table-column prop="price" label="单价" align="center" width="60" :show-overflow-tooltip="true">
+                              <template slot-scope="scope">
+                                {{  scope.row.price }}
+                              </template>
+                            </el-table-column> -->
+                            <!-- <el-table-column prop="volume"  :label="$t('体积(m³)')" align="center" width="80">
+                              <template slot-scope="scope">
+                                <el-input  v-model="scope.row.volume" size="mini" placeholder="" disabled></el-input>
+                              </template>
+                            </el-table-column> -->
+
+<!--
+                            <el-table-column prop="goodsModel" label="规格型号" align="center" width="80" :show-overflow-tooltip="true">
+                              <template slot-scope="scope">
+                                {{  scope.row.goodsModel }}
+                              </template>
+                            </el-table-column>
+                            <el-table-column prop="goodsName" label="品牌" align="center" width="60" :show-overflow-tooltip="true">
+                              <template slot-scope="scope">
+                                {{  scope.row.brand }}
+                              </template>
+                            </el-table-column> -->
+                            <!-- <el-table-column prop="hscode" label="海关编码" align="center" width="80" :show-overflow-tooltip="true">
+                              <template slot-scope="scope">
+                                <el-input  v-model="scope.row.hscode" size="mini" placeholder=""></el-input>
+                              </template>
+                            </el-table-column> -->
+
+                            <!-- <el-table-column prop="material" label="材质" align="center" width="60" :show-overflow-tooltip="true">
+                              <template slot-scope="scope">
+                                {{  scope.row.material }}
+                              </template>
+                            </el-table-column>
+                            <el-table-column prop="purpose" label="用途" align="center" width="60" :show-overflow-tooltip="true">
+                              <template slot-scope="scope">
+                                {{  scope.row.purpose }}
+                              </template>
+                            </el-table-column>
+                            <el-table-column prop="ingredients" label="成分" align="center" width="60" :show-overflow-tooltip="true">
+                              <template slot-scope="scope">
+                                {{  scope.row.ingredients }}
+                              </template>
+                            </el-table-column>
+                            <el-table-column prop="supplier" label="供应商" align="center" width="80" :show-overflow-tooltip="true">
+                              <template slot-scope="scope">
+                                {{  scope.row.supplier }}
+                              </template>
+                            </el-table-column> -->
+
+
+                            <!-- <el-table-column prop="volume"  :label="$t('描述')" align="center" width="80">
+                              <template slot-scope="scope">
+                                {{  scope.row.goodsName }}
+                              </template>
+                            </el-table-column> -->
+
+                       </el-table>
+
+            </el-descriptions-item>
+            <el-descriptions-item label="结算重量" :span="4">{{ form.settlementWeight }}(kg)</el-descriptions-item>
+
+      </el-descriptions>
+    </el-col>
+    <el-col :span="12">
+      <el-descriptions :title="$t('收费信息')" size="small" :column="4" style="margin-top:10px">
+            <!-- <el-descriptions-item label="计费方式" :span="4">
+              <dict-tag :options="dict.type.emis_calc_fee_type" :value="form.calcFeeType"/>
+            </el-descriptions-item> -->
+            <!-- <el-descriptions-item label="是否特殊报价" :span="1">
+              <span v-if="form.blSpecialQuote == 1"> 是 </span>
+              <span v-else> 否 </span>
+            </el-descriptions-item>
+            <el-descriptions-item label="是否敏感物" :span="4">
+              <span v-if="form.blSensitive == 1"> 是 </span>
+              <span v-else> 否 </span>
+            </el-descriptions-item> -->
+            <el-descriptions-item label="支付方式" :span="4">
+              <dict-tag :options="dict.type.emis_payment_type" :value="form.paymentType"/>
+            </el-descriptions-item>
+            <!-- <el-descriptions-item label="费用币种">{{ form.currency }}</el-descriptions-item> -->
+            <el-descriptions-item v-if="form.paymentType == 2 || form.paymentType == 4 || form.paymentType == 5"  label="月结客户" :span="4">{{ form.customerName }}</el-descriptions-item>
+            <!-- <el-descriptions-item label="回款联系人">{{ form.payee }}</el-descriptions-item>
+            <el-descriptions-item label="销售联系人" :span="3">{{ form.salesmen }}</el-descriptions-item> -->
+            <el-descriptions-item label="费用明细" :span="4">
+              <el-table
+                            class="cargoList"
+                            :cell-style="{
+                              'padding': '0px!important',
+                              'padding-left': '0px!important',
+                              'padding-right': '0px!important',
+                              'font-size':'11px'
+                            }"
+                            :header-cell-style="{
+                              'font-size':'11px'
+                            }"
+                            border
+                            stripe
+                            :data="form.feeItems"
+                            size="mini"
+                            max-height="300px"
+                            style="width: 100%"
+                          >
+
+
+                            <el-table-column prop="feeName"  :label="$t('收费项')"  align="center" width="70">
+                              <template slot-scope="scope">
+                                <span style="font-weight:600;color:red">{{ scope.row.feeName }}({{scope.row.currency}})</span>
+                              </template>
+                            </el-table-column>
+                            <el-table-column prop="fee"  :label="$t('应收')"  align="center" width="50">
+                              <template slot-scope="scope">
+                                <span>{{ scope.row.fee }}</span>
+                              </template>
+                            </el-table-column>
+
+                            <el-table-column prop="initialWeightFee"  :label="$t('首重费')"  align="center" width="60">
+                              <template slot-scope="scope">
+                                <div> {{scope.row.initialWeightFee}} </div>
+                              </template>
+                            </el-table-column>
+                            <el-table-column prop="addWeightPrice"  :label="$t('续重单价')"  align="center" width="70">
+                              <template slot-scope="scope">
+                                <div> {{scope.row.addWeightPrice}} </div>
+                              </template>
+                            </el-table-column>
+                            <el-table-column prop="realFee" :label="$t('实收')" align="center" width="50">
+                              <template slot-scope="scope">
+                                <div> {{scope.row.realFee}} </div>
+                              </template>
+                            </el-table-column>
+                            <el-table-column  prop="remark" :label="$t('描述')"  align="center" min-width="100">
+                              <template slot-scope="scope">
+                                <div> {{scope.row.remark}} </div>
+                              </template>
+                            </el-table-column>
+                          </el-table>
+
+            </el-descriptions-item>
+            <el-descriptions-item label="总运费(CNY)" :span="4"><span style="color:red;font-weight:bold;font-size:15px">{{ form.freight }}</span></el-descriptions-item>
+            <el-descriptions-item label="费用备注" :span="4">{{ form.feeRemark }}</el-descriptions-item>
+
+      </el-descriptions>
+    </el-col>
+  </el-row>
+  <el-descriptions title="" size="small" :column="1" style="margin-top:10px;margin-bottom: 30px;">
+    <el-descriptions-item label="订单备注" :span="4">{{ form.orderRemark }}</el-descriptions-item>
+    <el-descriptions-item label="录单备注" :span="4">{{ form.remark }}</el-descriptions-item>
+
+  </el-descriptions>
+
+</div>
+</template>
+
+<script>
+import { getWaybillDetail} from "@/api/oms/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 {
+    canViewDetail:false,
+    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__header {
+    margin-bottom: 8px!important;
+    border-bottom: 1px solid #fafafa!important;
+    border-left: 4px solid #b30000!important;
+}
+
+.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-descriptions__title{
+  font-size: 12px;
+}
+
+  .el-collapse-item__content {
+      padding-bottom: 0px;
+  }
+  .el-collapse-item__header{
+    pointer-events: none;
+  }
+
+  .el-collapse-item__arrow {
+    pointer-events: auto;
+  }
+
+</style>
+