aike/emis-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

md

Browse Source
This commit is contained in:
linfso 2024-06-11 19:52:07 +08:00
parent 2e1069dba7
commit 48a0cba61b
6 changed files with 1688 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
src/views/emis/customerService/billPicList.vue Normal file
View File

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

191
src/views/emis/customerService/problemList.vue Normal file
View File

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

191
src/views/emis/customerService/traceRecordList.vue Normal file
View File

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

184
src/views/emis/customerService/traceWaybillDetailView.vue Normal file
View File

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

479
src/views/emis/emisWaybill/waybillDetailReadOnly.vue Normal file
View File

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

439
src/views/emis/emisWaybill/waybillPreCalcFee.vue Normal file
View File

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