|
@@ -1,22 +1,36 @@
|
|
|
<template>
|
|
|
<div class="my-container">
|
|
|
- <div class="bill-main">
|
|
|
+ <div class="bill-main" v-show="isShow==='home'" key="index">
|
|
|
<module-view :propConfig="config" ref="moduleView" @pagination="getDataList" @search="getDataList"
|
|
|
- @resert="onRefresh" @onRefresh="onRefresh">
|
|
|
+ @resert="onRefresh" @onRefresh="onRefresh" @detail="openEdit">
|
|
|
</module-view>
|
|
|
</div>
|
|
|
+ <!-- 新增/编辑弹窗 -->
|
|
|
+ <div class="detail" v-show="isShow==='detail'" key="index2">
|
|
|
+ <by-tool :propConfig="toolConfig" @clickHandle="insideTools" />
|
|
|
+ <div class="box-shadow">
|
|
|
+ <by-form :propConfig="detailConfig" ref="addFormId"></by-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
|
|
- import api from "@/api/currency";
|
|
|
+ import { getPageData, getSingleData } from '@/api/delivery';
|
|
|
@Component
|
|
|
export default class Logistics extends Vue {
|
|
|
timeNum = 0;
|
|
|
+ calculateCount = 0;
|
|
|
+ isShow : any = 'home'
|
|
|
timer : any = null
|
|
|
+ toolConfig = {
|
|
|
+ tools: {
|
|
|
+ return: true,
|
|
|
+ },
|
|
|
+ }
|
|
|
config : any = {
|
|
|
- attr:{
|
|
|
- calculateH:true
|
|
|
+ attr: {
|
|
|
+ calculateH: true
|
|
|
},
|
|
|
search: {
|
|
|
attr: {
|
|
@@ -52,6 +66,8 @@
|
|
|
title: '发货单单号',
|
|
|
field: 'tmsOrderNo',
|
|
|
width: 200,
|
|
|
+ isDetail: true,
|
|
|
+ fixed: 'left'
|
|
|
}, {
|
|
|
title: '发货类型',
|
|
|
field: 'shippingType',
|
|
@@ -305,11 +321,377 @@
|
|
|
]
|
|
|
},
|
|
|
}
|
|
|
+ detailConfig = {
|
|
|
+ attr: {
|
|
|
+ size: 'medium',
|
|
|
+ readonly: true
|
|
|
+ },
|
|
|
+ columns: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '发货单单号',
|
|
|
+ prop: 'tmsOrderNo',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '发货类型',
|
|
|
+ prop: 'shippingType',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '订单类型',
|
|
|
+ prop: 'orderType',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ labelWidth: '128px',
|
|
|
+ label: 'TMS平台业务单号',
|
|
|
+ prop: 'tmsClientOrderNo',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '发货单状态',
|
|
|
+ prop: 'tmsOrderStatus',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '开单时间',
|
|
|
+ prop: 'tmsBillingDate',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '业务员',
|
|
|
+ prop: 'tmsBusinessMan',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '业务员手机号',
|
|
|
+ prop: 'tmsBusinessPhone',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '运输方式',
|
|
|
+ prop: 'tmsTransportMethod',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '发货单位',
|
|
|
+ prop: 'tmsShipmentCompanyName',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '发货省',
|
|
|
+ prop: 'tmsShipmentProvince',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '发货省编码',
|
|
|
+ prop: 'tmsShipmentProvinceNo',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '发货市',
|
|
|
+ prop: 'tmsShipmentCity',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '发货市编码',
|
|
|
+ prop: 'tmsShipmentCityNo',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '发货区(县)',
|
|
|
+ prop: 'tmsShipmentRegion',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ labelWidth: '128px',
|
|
|
+ label: '发货区(县)编码',
|
|
|
+ prop: 'tmsShipmentRegionNo',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '发货街道',
|
|
|
+ prop: 'tmsShipmentStreet',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '发货街道编码',
|
|
|
+ prop: 'tmsShipmentStreetNo',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '发货地址',
|
|
|
+ prop: 'tmsShipmentAddress',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '发货人',
|
|
|
+ prop: 'tmsShipmentConsignor',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ labelWidth: '110px',
|
|
|
+ label: '发货人联系方式',
|
|
|
+ prop: 'tmsShipmentContacts',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '发货点经度',
|
|
|
+ prop: 'tmsShipmentLng',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '发货点纬度',
|
|
|
+ prop: 'tmsShipmentLat',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '收货单位',
|
|
|
+ prop: 'tmsUnloadingCompanyName',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '收货省',
|
|
|
+ prop: 'tmsUnloadingProvince',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '收货省编码',
|
|
|
+ prop: 'tmsUnloadingProvinceNo',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '收货市',
|
|
|
+ prop: 'tmsUnloadingCity',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '收货市编码',
|
|
|
+ prop: 'tmsUnloadingCityNo',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '收货区(县)',
|
|
|
+ prop: 'tmsUnloadingRegion',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ labelWidth: '128px',
|
|
|
+ label: '收货区(县)编码',
|
|
|
+ prop: 'tmsUnloadingRegionNo',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '收货街道',
|
|
|
+ prop: 'tmsUnloadingStreet',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '收货街道编码',
|
|
|
+ prop: 'tmsUnloadingStreetNo',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '收货地址',
|
|
|
+ prop: 'tmsUnloadingAddress',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '收货人',
|
|
|
+ prop: 'tmsUnloadingConsignor',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ labelWidth: '110px',
|
|
|
+ label: '收货人联系方式',
|
|
|
+ prop: 'tmsUnloadingContacts',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '收货点经度',
|
|
|
+ prop: 'tmsUnloadingLng',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '收货点纬度',
|
|
|
+ prop: 'tmsUnloadingLat',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '要求提货时间',
|
|
|
+ prop: 'tmsDeliveryDate',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '要求送达时间',
|
|
|
+ prop: 'tmsArrivalDate',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '货物总数量',
|
|
|
+ prop: 'tmsTotalQuantity',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '货物总重量',
|
|
|
+ prop: 'tmsTotalWeight',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '货物总体积',
|
|
|
+ prop: 'tmsTotalVolume',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '承运商名称',
|
|
|
+ prop: 'tmsCarrierName',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '车型要求',
|
|
|
+ prop: 'tmsNeedCarType',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '货物信息',
|
|
|
+ prop: 'tmsGoodsInfos',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '司机姓名',
|
|
|
+ prop: 'tmsDriverName',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '司机号码',
|
|
|
+ prop: 'tmsDriverPhone',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ span: 6,
|
|
|
+ label: '派车时间',
|
|
|
+ prop: 'tmsDispatchTime',
|
|
|
+ component: 'by-input',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ span: 30,
|
|
|
+ label: '备注',
|
|
|
+ prop: 'tmsRemark',
|
|
|
+ component: 'by-input',
|
|
|
+ compConfig: {
|
|
|
+ attr: {
|
|
|
+ type: 'textarea'
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ ]
|
|
|
+
|
|
|
+ }
|
|
|
mounted() {
|
|
|
this.timer = setInterval(() => {
|
|
|
- this.getDataList()
|
|
|
+ this.getDataList();
|
|
|
+ this.initTable();
|
|
|
}, 300)
|
|
|
}
|
|
|
+ // 计算高度
|
|
|
+ initTable() {
|
|
|
+ if (!this.$refs.moduleView) {
|
|
|
+ this.calculateCount++;
|
|
|
+ if (this.calculateCount > 5) return;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.initTable()
|
|
|
+ }, 500)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let tableId : any = (this as any).$refs.moduleView.tableID;
|
|
|
+ this.config.table.attr.height = window.innerHeight - 320;
|
|
|
+ (this as any).$refs.moduleView.$refs[tableId].recalculate();
|
|
|
+ }
|
|
|
+ // 打开编辑
|
|
|
+ openEdit(e : any) {
|
|
|
+ let loading = this.$loading({ target: '.main-container' });
|
|
|
+ getSingleData({ id: e.id }).then((res : any) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ let data = res.data;
|
|
|
+ this.isShow = 'detail';
|
|
|
+ loading.close();
|
|
|
+ this.$nextTick(() => (this as any).$refs.addFormId.setValue(data));
|
|
|
+ } else loading.close();
|
|
|
+ }).catch(() => loading.close());
|
|
|
+ }
|
|
|
// 获取列表数据
|
|
|
getDataList() {
|
|
|
if (!this.$refs.moduleView) {
|
|
@@ -321,11 +703,12 @@
|
|
|
}
|
|
|
clearInterval(this.timer)
|
|
|
let query = (this.$refs.moduleView as any).getQuery();
|
|
|
- // this.getPageList(query);
|
|
|
+ // console.log(query);
|
|
|
+ this.getPageList(query);
|
|
|
}
|
|
|
getPageList(query : any) {
|
|
|
let loading = this.$loading({ target: '.main-container' });
|
|
|
- api.pageList(query, 'maindataMaterialBrand').then((res : any) => {
|
|
|
+ getPageData(query).then((res : any) => {
|
|
|
loading.close();
|
|
|
if (res.code === 200) {
|
|
|
(this.$refs.moduleView as any).setTableValue(res.data.records);
|
|
@@ -338,6 +721,10 @@
|
|
|
} else this.$message.error(res.msg);
|
|
|
}).catch(() => loading.close());
|
|
|
}
|
|
|
+ // 内页工具栏方法
|
|
|
+ insideTools(e : any) {
|
|
|
+ if (e === 'onReturn') this.isShow = 'home';
|
|
|
+ }
|
|
|
// 刷新/重置
|
|
|
onRefresh() {
|
|
|
(this as any).$refs.moduleView.clearSearch();
|
|
@@ -352,22 +739,26 @@
|
|
|
display: flex;
|
|
|
padding: 16px;
|
|
|
height: 100%;
|
|
|
+
|
|
|
.bill-left {
|
|
|
position: relative;
|
|
|
border-right: solid #EEE 1px;
|
|
|
flex-shrink: 0;
|
|
|
+
|
|
|
.bill-tab {
|
|
|
width: 150px;
|
|
|
height: 100%;
|
|
|
transition: all .5s;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
+
|
|
|
.tab-title {
|
|
|
font-size: 16px;
|
|
|
padding-bottom: 16px;
|
|
|
width: 200px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.bill-main {
|
|
|
width: 100%;
|
|
|
box-sizing: border-box;
|
|
@@ -375,5 +766,23 @@
|
|
|
height: 100%;
|
|
|
overflow-y: hidden;
|
|
|
}
|
|
|
+
|
|
|
+ .detail {
|
|
|
+ width: 100%;
|
|
|
+ padding: 16px;
|
|
|
+
|
|
|
+ .box-shadow {
|
|
|
+ box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #e6ebf5;
|
|
|
+ background-color: #fff;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #303133;
|
|
|
+ -webkit-transition: .3s;
|
|
|
+ transition: .3s;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|