This commit is contained in:
linfso 2025-01-06 08:33:22 +08:00
parent 8b94cea893
commit 33df9c4a5f

View File

@ -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>