Page6.vue 6.7 KB
<template>
	<section>
<!--		工具条-->
		<el-row class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true"  ref="form" :model="filters">
				<el-row>
					<el-col :span="5">
						<el-form-item label="车牌号:">
							<el-input v-model="filters.trailerFrameNo" placeholder="" size="small"style="width: 120px"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="挂靠名称:">
							<el-input v-model="filters.agentname" placeholder="" size="small" style="width: 120px"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="目的场站:">
							<el-select v-model="filters.endstation" @change="aisleOption(filters.endstation)" clearable placeholder="请选择">
								<el-option
										v-for="item in options"
										:key="item.stationId"
										:label="item.name"
										:value="item.stationId">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="卡口:" style="margin-left: 10px">
							<el-select v-model="filters.aisle" :disabled="disabled" placeholder="先选择目的场站" size="small" style="width: 150px">
								<el-option
										v-for="item in aisleOptions"
										:key="item.channel"
										:label="item.name"
										:value="item.channel">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="2">
						<el-form-item>
							<el-button type="primary" @click="getList()" size="small">查询</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-row>
<!--		列表-->
		<el-row>
			<el-table
					:data="businesstypeList"
					border
					v-loading="businesstypeListLoading"
					style="width: 100%">
				<el-table-column fixed prop="date" label="操作">
					<el-button @click="handleClick(scope.row)" type="primary" size="small">查看</el-button>
				</el-table-column>
				<el-table-column prop="isvalid" :formatter="isvalidFormatter" label="是否失效">
				</el-table-column>
				<el-table-column prop="trailerFrameNo" label="车牌号" width="100">
				</el-table-column>
				<el-table-column prop="agentname" label="挂靠单位">
				</el-table-column>
				<el-table-column prop="endport" label="目的关区">
				</el-table-column>
				<el-table-column prop="aisle" label="卡口" width="100">
				</el-table-column>
				<el-table-column prop="aislewt" label="地磅称重">
				</el-table-column>
				<el-table-column prop="remark" label="总货重">
				</el-table-column>
				<el-table-column prop="remark1" label="进出差值">
				</el-table-column>
				<el-table-column prop="remark2" label="备案车重">
				</el-table-column>
				<el-table-column prop="businesstype" label="业务类型">
				</el-table-column>
				<el-table-column prop="cocode" label="货物类型">
				</el-table-column>
				<el-table-column prop="barcode" label="二维码编号" width="110">
				</el-table-column>
				<el-table-column prop="turnoverflag" :formatter="turnoverflagFormatter" label="进出场站">
				</el-table-column>
				<el-table-column prop="contrastflag" label="已进已出">
				</el-table-column>
				<el-table-column prop="updateDate" label="更新时间" width="155">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="150">
					<template slot-scope="scope">
						<el-button type="success" size="mini">修改</el-button>
						<el-button type="danger" size="mini">删除</el-button>
						<el-button type="warning" size="mini" style="margin-top: 2px;margin-left: 0px">审核</el-button>
						<el-button type="info" size="mini">异常</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<!--		分页-->
		<div class="block">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pageSize"
					:page-sizes="[10, 100, 200, 300]"
					:page-size="10"
					layout="total, sizes, prev, pager, next, jumper"
					:total="this.total">
			</el-pagination>
		</div>
	</section>
</template>
<script>
	import {list, aisleList} from '../../api/remote_interface/byont_import';
	import {getYardList as yartList} from "../../api/station_dispatch";
	export default {
		data() {
			return {
				businesstypeList: [],
				pageSize: 1,
				limitSize: 10,
				total: 1,
				options: [],
				aisleOptions: [],
				disabled: true,
				filters: {
					trailerFrameNo: '',
					agentname: '',
					endstation: '',
					aisle: '',
				},
				businesstypeListLoading: false
			}
		},
		methods: {

			isvalidFormatter: function(row, column){
				if (row.isvalid == '0'){
					return "未失效"
				}else {
					return "失效"
				}
			},
			turnoverflagFormatter: function(row, column){
				if (row.turnoverflag == 'I'){
					return "进场站"
				}else {
					return "出场站"
				}
			},
			// 获取列表
			getList() {
				let para = {
					pageSize: this.pageSize,
					limitSize: this.limitSize,
					trailerFrameNo: this.filters.trailerFrameNo,
					agentname: this.filters.agentname,
					endstation: this.filters.endstation,
					aisle: this.filters.aisle
				};
				this.businesstypeListLoading = true;
				console.log(para);
				list(para).then((res) => {
					this.total = res.data.data.total;
					this.businesstypeList = res.data.data.list;
					this.businesstypeListLoading = false;
				}).catch((error) => {
					this.businesstypeListLoading = false;
					if(null!= error.response && error.response!==undefined){
						let status= error.response.status;
						let msg = error.response.statusText;
						alert(status+msg);
					}else {
						alert(error);
					}

				});

			},

			// 获取场站
			getYardList(){
				yartList().then((res) =>{
					this.options = res.data.data;
				}).catch((error) => {
					if(null!= error.response && error.response!==undefined){
						let status= error.response.status;
						let msg = error.response.statusText;
						alert(status+msg);
					}else {
						alert(error);
					}

				});
			},
			// 获取卡口名称
			aisleOption(value){
				let para = {
					yardId: value
				}
				this.filters.aisle = '';
				aisleList(para).then((res) =>{
					this.aisleOptions = res.data.data;
					this.disabled = false;
				}).catch((error) => {
					if(null!= error.response && error.response!==undefined){
						let status= error.response.status;
						let msg = error.response.statusText;
						alert(status+msg);
					}else {
						alert(error);
					}

				});
			},
			onSubmit() {
				console.log('submit!');
			},
			handleSizeChange(val) {
				this.limitSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.pageSize = val;
				this.getList();

			}
		},
		mounted() {
			this.getYardList();
			this.getList();
		}
	}
</script>

<style scoped>


</style>