585 lines
23 KiB
Vue
585 lines
23 KiB
Vue
<template>
|
|
<div class="" >
|
|
|
|
<div >
|
|
<div style=" font-size: 13px;
|
|
color: black;
|
|
margin-bottom: 8px;display: inline-flex; width: 100%;">
|
|
<div style="width:40%"> 订单号:{{ form.orderSn }} 运单号:{{ form.billCode }} </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="24">
|
|
<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="24">
|
|
<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 }}</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="运费" :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>
|
|
|
|
</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 {
|
|
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 #e6ebf5!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>
|
|
|