oms/src/views/audit/shortBargeLogistics/index.vue

<template>
	<div class="my-container">
		<div class="bill-main" v-show="isShow==='home'" key="index">
			<module-view :propConfig="config" ref="moduleView" @pagination="getDataList" @search="getDataList"
				@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>
				<by-table :propConfig="tableConfig" ref="table"></by-table>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
	import { getShortBargePageData, getShortBargeSingleData } from '@/api/delivery';
	import Logistics from "@/components/Assembly/logistics.vue";
	import Logistics2 from "@/components/Assembly/logistics2.vue";
	import storeHouse from "@/components/Assembly/storeHouse.vue";
	
	@Component
	export default class myShortBarge extends Vue {
		timeNum = 0;
		calculateCount = 0;
		isShow : any = 'home'
		timer : any = null
		toolConfig = {
			tools: {
				return: true,
			},
		}
		config : any = {
			attr: {
				calculateH: true
			},
			search: {
				attr: {
					size: 'mini',
				},
				columns: [
					[{
						span: 6,
						label: '短驳单单号',
						prop: 'shortBargeCode',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入短驳单单号',
								clearable: true
							},
						},
					}]
				]
			},
			tool: {
				tools: {
					search: true,
					refresh: true
				}
			},
			table: {
				attr: {
					size: 'mini',
					align: 'left',
				},
				columns: [{
					title: '短驳单单号',
					field: 'shortBargeCode',
					width: 200,
					isDetail: true,
					fixed: 'left'
				}, 
				// {
				// 	width: 200,
				// 	title: 'WMS仓库编号',
				// 	field: 'wmsWarehouseCode',
				// },
				{
					width: 200,
					title: 'ERP单据类型',
					field: 'wmsSendType',
					component: Logistics,
				},
				{
					width: 200,
					title: 'TMS平台业务单号',
					field: 'tmsClientOrderNo',
				},
				{
					width: 200,
					title: '发货单状态',
					field: 'tmsOrderStatus',
					component: Logistics,
				},
				{
					width: 200,
					title: '开单时间',
					field: 'tmsBillingDate',
				},
				{
					width: 200,
					title: '业务员',
					field: 'tmsBusinessMan',
				},
				{
					width: 200,
					title: '业务员手机号',
					field: 'tmsBusinessPhone',
				},
				{
					width: 200,
					title: '运输方式',
					field: 'tmsTransportMethod',
				},
				{
					width: 200,
					title: '发货单位',
					field: 'tmsShipmentCompanyName',
				},
				{
					width: 200,
					title: '发货省',
					field: 'tmsShipmentProvince',
				},
				// {
				// 	width: 200,
				// 	title: '发货省编码',
				// 	field: 'tmsShipmentProvinceNo',
				// },
				{
					width: 200,
					title: '发货市',
					field: 'tmsShipmentCity',
				},
				// {
				// 	width: 200,
				// 	title: '发货市编码',
				// 	field: 'tmsShipmentCityNo',
				// },
				{
					width: 200,
					title: '发货区（县）',
					field: 'tmsShipmentRegion',
				},
				// {
				// 	width: 200,
				// 	title: '发货区（县）编码',
				// 	field: 'tmsShipmentRegionNo',
				// },
				{
					width: 200,
					title: '发货街道',
					field: 'tmsShipmentStreet',
				},
				// {
				// 	width: 200,
				// 	title: '发货街道编码',
				// 	field: 'tmsShipmentStreetNo',
				// },
				{
					width: 200,
					title: '发货地址',
					field: 'tmsShipmentAddress',
				},
				{
					width: 200,
					title: '发货人',
					field: 'tmsShipmentConsignor',
				},
				{
					width: 200,
					title: '发货人联系方式',
					field: 'tmsShipmentContacts',
				},
				{
					width: 200,
					title: '发货点经度',
					field: 'tmsShipmentLng',
				},
				{
					width: 200,
					title: '发货点纬度',
					field: 'tmsShipmentLat',
				},
				{
					width: 200,
					title: '收货单位',
					field: 'tmsUnloadingCompanyName',
				},
				{
					width: 200,
					title: '收货省',
					field: 'tmsUnloadingProvince',
				},
				// {
				// 	width: 200,
				// 	title: '收货省编码',
				// 	field: 'tmsUnloadingProvinceNo',
				// },
				{
					width: 200,
					title: '收货市',
					field: 'tmsUnloadingCity',
				},
				// {
				// 	width: 200,
				// 	title: '收货市编码',
				// 	field: 'tmsUnloadingCityNo',
				// },
				{
					width: 200,
					title: '收货区（县）',
					field: 'tmsUnloadingRegion',
				},
				// {
				// 	width: 200,
				// 	title: '收货区（县）编码',
				// 	field: 'tmsUnloadingRegionNo',
				// },
				{
					width: 200,
					title: '收货街道',
					field: 'tmsUnloadingStreet',
				},
				// {
				// 	width: 200,
				// 	title: '收货街道编码',
				// 	field: 'tmsUnloadingStreetNo',
				// },
				{
					width: 200,
					title: '收货地址',
					field: 'tmsUnloadingAddress',
				},
				{
					width: 200,
					title: '收货人',
					field: 'tmsUnloadingConsignor',
				},
				{
					width: 200,
					title: '收货人联系方式',
					field: 'tmsUnloadingContacts',
				},
				{
					width: 200,
					title: '收货点经度',
					field: 'tmsUnloadingLng',
				},
				{
					width: 200,
					title: '收货点纬度',
					field: 'tmsUnloadingLat',
				},
				{
					width: 200,
					title: '要求提货时间',
					field: 'tmsDeliveryDate',
				},
				{
					width: 200,
					title: '要求送达时间',
					field: 'tmsArrivalDate',
				},
				{
					width: 200,
					title: '货物总数量',
					field: 'tmsTotalQuantity',
				},
				{
					width: 200,
					title: '货物总重量(kg)',
					field: 'tmsTotalWeight',
				},
				{
					width: 200,
					title: '货物总体积(cm³)',
					field: 'tmsTotalVolume',
				},
				{
					width: 200,
					title: '承运商名称',
					field: 'tmsCarrierName',
				},
				{
					width: 200,
					title: '车型要求',
					field: 'tmsNeedCarType',
				},
				{
					width: 200,
					title: '货物信息',
					field: 'tmsGoodsInfos',
				},
				{
					width: 200,
					title: '备注',
					field: 'tmsRemark',
				},
				{
					width: 200,
					title: '司机姓名',
					field: 'tmsDriverName',
				},
				{
					width: 200,
					title: '司机号码',
					field: 'tmsDriverPhone',
				},
				{
					width: 200,
					title: '派车时间',
					field: 'tmsDispatchTime',
				},
				]
			},
		}
		detailConfig = {
			attr: {
				size: 'medium',
				readonly: true
			},
			columns: [
				[
					{
						span: 6,
						label: '短驳单单号',
						prop: 'shortBargeCode',
						component: 'by-input',
					},
					// {
					// 	span: 6,
					// 	labelWidth: '110px',
					// 	label: 'WMS仓库编号',
					// 	prop: 'wmsWarehouseCode',
					// 	component: 'by-input',
					// },
					{
						span: 6,
						label: 'ERP单据类型',
						prop: 'wmsSendType',
						component: Logistics2,
					},
					{
						span: 6,
						labelWidth: '128px',
						label: 'TMS平台业务单号',
						prop: 'tmsClientOrderNo',
						component: 'by-input',
					},
				],
				[
					{
						span: 6,
						label: '发货单状态',
						prop: 'tmsOrderStatus',
						component: Logistics2,
					},
					{
						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: 'tmsShipmentRegion',
						component: 'by-input',
					},
					{
						span: 6,
						label: '发货街道',
						prop: 'tmsShipmentStreet',
						component: 'by-input',
					},
					{
						span: 6,
						label: '发货人',
						prop: 'tmsShipmentConsignor',
						component: 'by-input',
					},

				],
				[
					{
						span: 6,
						label: '发货市编码',
						prop: 'tmsShipmentCityNo',
						component: 'by-input',
					},
					{
						span: 6,
						labelWidth: '128px',
						label: '发货区（县）编码',
						prop: 'tmsShipmentRegionNo',
						component: 'by-input',
					},
					{
						span: 6,
						label: '发货街道编码',
						prop: 'tmsShipmentStreetNo',
						component: 'by-input',
					},
					{
						span: 6,
						labelWidth: '110px',
						label: '发货人联系方式',
						prop: 'tmsShipmentContacts',
						component: 'by-input',
					},
				],
				[
					{
						span: 6,
						label: '发货地址',
						prop: 'tmsShipmentAddress',
						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: 'tmsUnloadingCity',
						component: 'by-input',
					},
					{
						span: 6,
						label: '收货区（县）',
						prop: 'tmsUnloadingRegion',
						component: 'by-input',
					},
					{
						span: 6,
						label: '收货街道',
						prop: 'tmsUnloadingStreet',
						component: 'by-input',
					},
				],
				[
					{
						span: 6,
						label: '收货省编码',
						prop: 'tmsUnloadingProvinceNo',
						component: 'by-input',
					},
					{
						span: 6,
						label: '收货市编码',
						prop: 'tmsUnloadingCityNo',
						component: 'by-input',
					},
					{
						span: 6,
						labelWidth: '128px',
						label: '收货区（县）编码',
						prop: 'tmsUnloadingRegionNo',
						component: 'by-input',
					},
					{
						span: 6,
						label: '收货街道编码',
						prop: 'tmsUnloadingStreetNo',
						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: 'tmsUnloadingAddress',
						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: '货物总重量(kg)',
						prop: 'tmsTotalWeight',
						component: 'by-input',
						labelWidth: '110px',
					},
					{
						span: 6,
						label: '货物总体积(cm³)',
						prop: 'tmsTotalVolume',
						component: 'by-input',
						labelWidth: '116px',
					},
					{
						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'
							},
						}
					}
				]
			]
		}
		tableConfig = {
			attr: {
				size: 'mini',
				align: 'left',
				readonly: true
			},
			columns:
				[{
					width: 250,
					title: '商品SKUID',
					field: 'skuId',
				},
				{
					width: 250,
					title: '商品名称',
					field: 'skuName',
				},
				{
					width: 250,
					title: '短驳出库仓库',
					field: 'wareHouseCode',
					component: storeHouse,
				},	
				{
					width: 250,
					title: '短驳入库仓库',
					field: 'entryStoreHouseId',
					component: storeHouse,
				},	
				{
					width: 180,
					title: '库存类型',
					field: 'stortType',
					component: Logistics,
				},	
				{
					width: 180,
					title: '单价',
					field: 'tmsGoodsPrice',
				},
				{
					width: 180,
					title: '数量',
					field: 'tmsQuantity',
				},
				{
					width: 180,
					title: '数量单位',
					field: 'tmsQuantityUnit',
				},
				{
					width: 180,
					title: '商品过期日期',
					field: 'expireDate',
				},
				{
					width: 180,
					title: '货物型号',
					field: 'tmsGoodsModel',
				},
				{
					width: 180,
					title: '小计',
					field: 'tmsGoodsTotalPrice',
				},
				{
					width: 180,
					title: '重量（kg）',
					field: 'tmsWeight',
				},
				{
					width: 180,
					title: '体积（cm³）',
					field: 'tmsVolume',
				},
				]
		}
		mounted() {
			this.timer = setInterval(() => {
				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' });
			getShortBargeSingleData({ id: e.id }).then((res : any) => {
				if (res.code === 200) {
					this.isShow = 'detail';
					loading.close();
					this.$nextTick(() => {
						(this as any).$refs.addFormId.setValue(res.data);
						(this as any).$refs.table.setValue(res.data.items);
					});
				} else loading.close();
			}).catch(() => loading.close());
		}
		// 获取列表数据
		getDataList() {
			if (!this.$refs.moduleView) {
				if (this.timeNum > 5) {
					clearInterval(this.timer)
				}
				this.timeNum++;
				return
			}
			clearInterval(this.timer)
			let query = (this.$refs.moduleView as any).getQuery();
			// console.log(query);
			this.getPageList(query);
		}
		getPageList(query : any) {
			let loading = this.$loading({ target: '.main-container' });
			getShortBargePageData(query).then((res : any) => {
				loading.close();
				if (res.code === 200) {
					(this.$refs.moduleView as any).setTableValue(res.data.records);
					let page = {
						pageNo: res.data.current, //当前页
						pageSize: res.data.size, //每页条数
						total: res.data.total //总条数
					};
					(this.$refs.moduleView as any).setPage(page);
				} 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();
			this.getDataList();
		}
	}
</script>
<style lang="scss" scoped>
	.my-container {
		width: 100%;
		box-sizing: border-box;
		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;
			position: relative;
			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>