md
This commit is contained in:
linfso
parent
fb705c8b02
commit
2362411833
137
src/views/oms/common/LineOrderChart.vue
Normal file
137
src/views/oms/common/LineOrderChart.vue
Normal file
@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '350px'
|
||||
},
|
||||
autoResize: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.setOptions(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
this.setOptions(this.chartData)
|
||||
},
|
||||
setOptions({ xAxisData,orderStateData } = {}) {
|
||||
this.chart.setOption({
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 20,
|
||||
top: 30,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
padding: [5, 10]
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['expected', 'actual']
|
||||
},
|
||||
series: [{
|
||||
name: '订单统计', itemStyle: {
|
||||
normal: {
|
||||
color: '#FF005A',
|
||||
lineStyle: {
|
||||
color: '#FF005A',
|
||||
width: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
data: orderStateData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'cubicInOut'
|
||||
},
|
||||
// {
|
||||
// name: '应付',
|
||||
// smooth: true,
|
||||
// type: 'line',
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: '#3888fa',
|
||||
// lineStyle: {
|
||||
// color: '#3888fa',
|
||||
// width: 2
|
||||
// },
|
||||
// areaStyle: {
|
||||
// color: '#f3f8ff'
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// data: actualData,
|
||||
// animationDuration: 2800,
|
||||
// animationEasing: 'quadraticOut'
|
||||
// }
|
||||
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
322
src/views/oms/emisWaybill/panel/traceInfoPanel.vue
Normal file
322
src/views/oms/emisWaybill/panel/traceInfoPanel.vue
Normal file
@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<div class="" style="background-color: #F3F4F8;padding:0px">
|
||||
<div v-if="extBillInfo!=null" style="line-height:30px;margin-top: 0px; font-size: 14px;width:100%" class="panel" >
|
||||
<div style="display: inline-flex; width: 100%;">
|
||||
<div style="width:20%;color:black;font-weight: 600; font-size: 18px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;">{{ extBillInfo.sendSiteName }}</div>
|
||||
<div style="position: relative; text-align: center;">
|
||||
<svg t="1726269105329" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="2426" width="200" height="50" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M 1467.617 655.095 L -534.095 655.095 C -589.52 653.579 -620.594 625.007 -590.029 603.666 C -577.517 594.93 -556.788 589.42 -534.095 588.798 L 1467.617 588.798 C 1523.042 587.282 1561.249 613.957 1536.386 636.814 C 1523.467 648.693 1496.419 655.882 1467.617 655.095 Z" p-id="2427" style="fill: rgb(135, 5, 5);"/>
|
||||
<path d="M 1522.012 638.505 C 1515.688 638.601 1509.572 636.246 1504.945 631.934 L 1319.089 456.404 C 1304.914 444.275 1309.185 421.349 1326.776 415.138 C 1335.725 411.978 1345.694 414.332 1352.284 421.161 L 1538.567 596.692 C 1552.099 609.534 1546.655 632.209 1528.767 637.507 C 1526.574 638.157 1524.3 638.493 1522.012 638.505 Z" p-id="2428" style="fill: rgb(148, 6, 6);"/>
|
||||
</svg>
|
||||
<div style="position: absolute; top:0px;left:35%; color: gray;">{{ extBillInfo.waybillStatus }}</div>
|
||||
<div style="position: absolute; top:30px;left:35%; color: gray;">{{ extBillInfo.productTypeName }}</div>
|
||||
|
||||
</div>
|
||||
<div style="width:20%;color:black;font-weight: 600;font-size: 18px; display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;text-align: center;">{{ extBillInfo.destinationName }}</div>
|
||||
</div>
|
||||
<div style="width: 100%;color:black;font-weight: 600;padding-left: 10px;">
|
||||
<div style="color: #880504;text-align: left;" v-if="extBillInfo.blSign==0"> 预计送达:{{ extBillInfo.estimateDate }}</div>
|
||||
<div style="color: #880504;text-align: left;" v-if="extBillInfo.blSign==1"> 签收时间:{{ extBillInfo.signDate }}</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div v-if="extBillInfo!=null&&extBillInfo.blBillPicDispatchRmk==1" style="line-height:30px;margin-top: 5px; font-size: 14px;display: inline-flex;width:100%" class="panel" >
|
||||
<div style="width: 85%;color:gray;padding-left: 10px;">签收底单</div>
|
||||
<div style="width: 15%;text-align: center;font-size: 14px;" @click="viewSignedPic">查看</div>
|
||||
</div>
|
||||
|
||||
<!-- <el-scrollbar style="height:400px;"> -->
|
||||
<div style="min-height:50px;margin-top: 10px;" class="panel" >
|
||||
<!-- <div style="font-weight: 600;margin-bottom: 20px;padding-left: 40px;">运单号:{{ billCode }}</div> -->
|
||||
<el-timeline :reverse="reverse">
|
||||
<el-timeline-item
|
||||
v-for="(step, stepIndex) in traceInfoList"
|
||||
:key="stepIndex"
|
||||
:timestamp="step.time"
|
||||
:type="stepIndex==0?'primary ':''"
|
||||
>
|
||||
{{step.content}}
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
<!-- </el-scrollbar> -->
|
||||
|
||||
|
||||
<div v-if="open" style="z-index: 2004;width: 97%;
|
||||
padding: 15px 15px;
|
||||
color: gray;" class="code-wrapper code-dialog">
|
||||
<div class="input-captcha" style=" position: relative;">
|
||||
<div>
|
||||
请输入手机号码后四位
|
||||
</div>
|
||||
<div style="position: absolute;right: 5px;top: 0px;">
|
||||
<span
|
||||
@click.stop="clostBtnClick"
|
||||
>
|
||||
<i class="el-icon-close" style="font-size: 26px;color: black"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="input-box">
|
||||
<div class="input-content">
|
||||
<input v-model.trim.number="input0" ref="input0" @keydown.8="deleteValue('input0','input0')" @keyup="changeValue($event,'input0','input1')" type="number" placeholder="">
|
||||
<input v-model.trim.number="input1" ref="input1" @keydown.8="deleteValue('input1','input0')" @keyup="changeValue($event,'input1','input2')" type="number" placeholder="">
|
||||
<input v-model.trim.number="input2" ref="input2" @keydown.8="deleteValue('input2','input1')" @keyup="changeValue($event,'input2','input3')" type="number" placeholder="">
|
||||
<input v-model.trim.number="input3" ref="input3" @keydown.8="deleteValue('input3','input2')" @keyup="changeValue($event,'input3','input0')" type="number" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:100%;text-align: center">
|
||||
<el-button type="primary" plain style=" margin-top: 10px;
|
||||
width: 60%;
|
||||
height: 40px;" @click="handleShowSignPic" >确 定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="open" class="code-mask" tabindex="0" style="z-index: 2003;"></div>
|
||||
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
title="图片"
|
||||
width="100%"
|
||||
append-to-body
|
||||
>
|
||||
<img
|
||||
:src="signImageUrl"
|
||||
style="display: block; max-width: 100%; margin: 0 auto"
|
||||
/>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { queryTraceInfo,querySignedPic } from "@/api/oms/emisCommon";
|
||||
|
||||
export default {
|
||||
name: "TraceInfoPanel",
|
||||
props:{
|
||||
billCode:{
|
||||
type: String,
|
||||
}
|
||||
},
|
||||
dicts: [],
|
||||
data() {
|
||||
return {
|
||||
reverse: false,
|
||||
open:false,
|
||||
showSignPic:false,
|
||||
dialogVisible:false,
|
||||
signImageUrl:"",
|
||||
input0: '',
|
||||
input1: '',
|
||||
input2: '',
|
||||
input3: '',
|
||||
latestBillList:[],
|
||||
extBillInfo:null,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 地球洲表格数据
|
||||
traceInfoList: []
|
||||
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.queryTrace();
|
||||
},
|
||||
watch: {
|
||||
"billCode": {
|
||||
handler (newValue, oldValue) {
|
||||
this.queryTrace();
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/** 查询地球洲列表 */
|
||||
queryTrace() {
|
||||
|
||||
console.log("queryTrace===>==>",this.billCode);
|
||||
this.loading = true;
|
||||
// if(!this.billCode){
|
||||
// return this.$message.error("输入查询单号")
|
||||
// }
|
||||
queryTraceInfo(this.billCode,"1234").then(response => {
|
||||
this.traceInfoList = response.data;
|
||||
this.extBillInfo=response.extBillInfo;
|
||||
// this.recordLatestBill(this.billCode);
|
||||
this.loading = false;
|
||||
});
|
||||
|
||||
},
|
||||
latestClick(item){
|
||||
this.billCode=item;
|
||||
this.queryTrace();
|
||||
},
|
||||
clostBtnClick(){
|
||||
this.open=false;
|
||||
},
|
||||
viewSignedPic(){
|
||||
this.input0='';
|
||||
this.input1='';
|
||||
this.input2='';
|
||||
this.input3='';
|
||||
this.open=true;
|
||||
},
|
||||
handleShowSignPic(){
|
||||
let code=this.input0+""+this.input1+""+this.input2+""+this.input3;
|
||||
this.loading = true;
|
||||
querySignedPic(this.billCode,code).then(response => {
|
||||
// console.log(response.data);
|
||||
this.signImageUrl = response.data;
|
||||
this.loading = false;
|
||||
this.open=false;
|
||||
this.dialogVisible=true;
|
||||
});
|
||||
|
||||
},
|
||||
deleteValue (inputValue, previousItem) { // 键盘按下时$event，当前input，上一个input
|
||||
if (this[inputValue].length > 0) { // 当前有值，清空之
|
||||
this[inputValue] = ''
|
||||
} else { // 当前没有值，光标跳转到上一个input，并清空该input值
|
||||
this.$nextTick(() => {
|
||||
this.$refs[previousItem].focus()
|
||||
this[previousItem] = ''
|
||||
this[inputValue] = ''
|
||||
})
|
||||
}
|
||||
},
|
||||
changeValue (e, inputValue, nextItem) { // 键盘抬起时$event，当前input，下一个input
|
||||
if (e.keyCode !== 8) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs[nextItem].focus() // 截取当前值最后一位，跳到下一个input
|
||||
this[inputValue] = (this[inputValue]).toString().slice(-1)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss">
|
||||
|
||||
:deep #app{
|
||||
background-color: #fff!important;
|
||||
}
|
||||
|
||||
.el-input__inner:hover {
|
||||
border-color: #eeeeee;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background-color: #fff;
|
||||
padding: 5px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.input-captcha{
|
||||
min-height: 200px;
|
||||
.input-box {
|
||||
text-align: center;
|
||||
min-height: 100px;
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
& + .input-box {
|
||||
margin-top: 20px;
|
||||
}
|
||||
// 六个span时的样式
|
||||
.simple-input-content {
|
||||
label {
|
||||
padding: 20px;
|
||||
}
|
||||
span {
|
||||
vertical-align: middle;
|
||||
border: 1px solid silver;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
&.highlight {
|
||||
border-color: purple;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 六个input时的样式
|
||||
.input-content {
|
||||
padding: 0px;
|
||||
input {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
margin-right: 5px;
|
||||
border: 1px solid #d3d3d3;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
/* 去掉input[type=number]浏览器默认的icon显示 */
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button { // chrome
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
input{ // 火狐
|
||||
-moz-appearance:textfield;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code-wrapper {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
.code-dialog{
|
||||
margin: 0 auto 50px;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.code-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: .5;
|
||||
background: #000
|
||||
}
|
||||
|
||||
.his-q-code {
|
||||
background-color: #fcfcfc;
|
||||
border-color: #d2d2d2;
|
||||
color: #000000;
|
||||
font-weight: 700;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
177
src/views/oms/emisWaybill/waybillTracking.vue
Normal file
177
src/views/oms/emisWaybill/waybillTracking.vue
Normal file
@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<XdPageContainer class="dashboard-container" >
|
||||
<!-- class="app-container" -->
|
||||
<el-form slot="pageHeader" style="background: white; padding: 10px;" class="queryForm" :model="queryParams" ref="queryForm" size="mini" :maxShow="9" label-width="100px" @search="handleQuery" @reset="resetQuery">
|
||||
<el-form-item label="按运单号查询" prop="billCode">
|
||||
<XdTextareaInput
|
||||
v-model="queryParams.billCode"
|
||||
:placeholder="$t('多个流水号逗号或换行隔开')"
|
||||
clearable
|
||||
:rows="4"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
|
||||
|
||||
</el-form>
|
||||
|
||||
<div
|
||||
slot="pageContent"
|
||||
style="padding: 0px 10px 5px 0px;overflow:auto;max-height: 700px"
|
||||
>
|
||||
|
||||
<div style="display:inline-flex;width: 100%;border-bottom: 1px solid #d9d9d9;margin-bottom: 20px;">
|
||||
<div class="form-group-title"><span class="title">{{ $t('跟踪信息') }}</span></div>
|
||||
</div>
|
||||
<!-- <el-scrollbar style="height: 100%"> -->
|
||||
<!-- 如果显示子单勾选则循环显示子单 -->
|
||||
<div v-for="(item,index) in emisWaybillList" :key="resetRefreshId+'.'+index">
|
||||
<CardWithHeader :header="'运单号:'+item" >
|
||||
<template v-slot:body>
|
||||
<TraceInfoPanel :billCode="item" :key="resetRefreshId+'.d.'+index" ></TraceInfoPanel>
|
||||
</template>
|
||||
</CardWithHeader>
|
||||
</div>
|
||||
|
||||
<!-- </el-scrollbar> -->
|
||||
</div>
|
||||
|
||||
</XdPageContainer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { formatSearchStr,deepClone } from '@/utils/index'
|
||||
import CardWithHeader from '@/components/CardWithHeader/index.vue';
|
||||
import TraceInfoPanel from '@/views/oms/emisWaybill/panel/traceInfoPanel.vue';
|
||||
|
||||
export default {
|
||||
name: "WaybillTracking",
|
||||
props:{
|
||||
},
|
||||
components: {
|
||||
CardWithHeader,
|
||||
TraceInfoPanel
|
||||
},
|
||||
dicts: [],
|
||||
data() {
|
||||
return {
|
||||
resetRefreshId:null,
|
||||
// 运单列表表格数据
|
||||
emisWaybillList: [],
|
||||
blSubBill:0,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
billCode: null,
|
||||
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
"$route": {
|
||||
handler (newValue, oldValue) {
|
||||
console.log("===>billCode==>",this.$route.query.billCode);
|
||||
this.queryParams.billCode=this.$route.query.billCode;
|
||||
this.handleQuery();
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if(this.$route.query.action=="query"){
|
||||
this.queryParams.billCode=this.$route.query.billCode;
|
||||
this.handleQuery();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUUID() {
|
||||
return Math.random().toString(36).substring(3,10);
|
||||
},
|
||||
lpadZero(val,len) {
|
||||
return (new Array(len + 1).join('0') + val).slice(-len);
|
||||
},
|
||||
/** 查询运单列表列表 */
|
||||
getList() {
|
||||
|
||||
this.emisWaybillList=[];
|
||||
|
||||
this.loading = true;
|
||||
|
||||
if(!this.queryParams.billCode){
|
||||
return;
|
||||
}
|
||||
|
||||
this.resetRefreshId="tracing-"+Math.random().toString(36).substring(3,10);
|
||||
|
||||
if(this.queryParams.billCode){
|
||||
let billCodeStr=formatSearchStr(this.queryParams.billCode);
|
||||
let billCodeArr=billCodeStr.split(",");
|
||||
let newBillCodeArr=[];
|
||||
billCodeArr.forEach(item=>{
|
||||
if(item.trim().length > 0){
|
||||
newBillCodeArr.push(item.trim());
|
||||
}
|
||||
});
|
||||
|
||||
this.emisWaybillList=newBillCodeArr;
|
||||
console.log("===>getList==>",this.emisWaybillList);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
:deep .el-form-item__label-wrap {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.el-divider{
|
||||
margin-top: 0px;
|
||||
background: 0 0;
|
||||
border-top: 1px solid #E6EBF5;
|
||||
}
|
||||
.el-divider__text {
|
||||
color: #0955ee;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.query-label {
|
||||
.el-radio{
|
||||
display: block;
|
||||
line-height: 23px;
|
||||
white-space: normal;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.queryForm .el-form-item {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.tip :deep.is-success > .el-step__line > i {
|
||||
background-color: #67c23a;
|
||||
}
|
||||
.tip :deep.is-error > .el-step__line > i {
|
||||
background-color: #f56c6c;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user