465 lines
14 KiB
Vue
465 lines
14 KiB
Vue
<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="6">
|
|
<el-form-item label="月结账号" prop="custNo" >
|
|
<EmisMonthpayAccountPicker v-model="form.custNo" :salesmen="$store.getters.empName" :payee="$store.getters.empName"></EmisMonthpayAccountPicker>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
|
|
</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;" placeholder="体积" >
|
|
<span slot="suffix">(m³)</span>
|
|
</el-input>
|
|
</div>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="计算方式" prop="calcFeeType" >
|
|
<el-radio-group v-model="form.calcFeeType" >
|
|
<el-radio
|
|
v-for="dict in dict.type.emis_calc_fee_type.filter(item=>item.value != '3')"
|
|
:key="dict.value"
|
|
:label="dict.value"
|
|
>{{dict.label}}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</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" >
|
|
<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';
|
|
import EmisMonthpayAccountPicker from '@/views/emis/EmisBaseTools/EmisMonthpayAccountPicker.vue';
|
|
|
|
export default {
|
|
name: "WaybillPreCalcFee",
|
|
components: {
|
|
EmisSiteSimplePicker,
|
|
DestinationPicker,
|
|
TransLinePicker,
|
|
CountryPicker0,
|
|
ProvincePicker2,
|
|
CardWithHeader,
|
|
EmisMonthpayAccountPicker
|
|
},
|
|
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: null,
|
|
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.productFeeList=[];
|
|
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:this.form.calcFeeType,
|
|
sendSiteCode: this.form.sendSiteCode,
|
|
dispatchUnderlingSiteCode: this.form.dispatchUnderlingSiteCode,
|
|
billWeight: this.form.billWeight,
|
|
totalVolume: this.form.totalVolume,
|
|
custNo: this.form.custNo,
|
|
customsClear:this.form.customsClear,
|
|
customsEclaration:this.form.customsEclaration
|
|
}
|
|
|
|
// 通过服务器其计算，保留自定义费用
|
|
preCalcWaybillFee(postData).then(response => {
|
|
console.log(response);
|
|
|
|
this.productFeeList = response.data;
|
|
if(!this.productFeeList || this.productFeeList.length==0){
|
|
this.$message.error(`无报价`);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
}
|
|
};
|
|
</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>
|
|
|