<template>
	<div style="height:100%;">
		<div class="searchForm-header">
			<el-row>
				<el-form label-width="100px" inline="">
					<el-form-item label="钢板号" style="margin-left: -18px">
						<el-input v-model="plateNo"  size="small"  style="width:120px;margin-left: -8px">
						</el-input>
					</el-form-item>
					<el-form-item label=" ">
						<el-button @click="handleSearch" size="small"  type="primary">查询</el-button>
					</el-form-item>
				</el-form>
			</el-row>
		</div>
		<div class="tabledata-grid">
			<el-table :data="tableData" height="100%" stripe border style="width: 96%;" v-loading="loading" :header-cell-style="{'text-align':'center'}">

				<el-table-column prop="wareNameOld" label="仓库名称" width="100px" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="stackNameOld" label="垛位" width="80px" show-overflow-tooltip header-align="center" align="center">
				</el-table-column>
				<el-table-column prop="layerOld" label="层号" show-overflow-tooltip width="60px" header-align="center" align="center">
				</el-table-column>

				<el-table-column prop="wareNameNew" label="仓库名称" width="100px" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="stackNameNew" label="垛位号" width="80px" show-overflow-tooltip header-align="center" align="center">
				</el-table-column>
				<el-table-column prop="layerNew" label="层号" show-overflow-tooltip width="60px" header-align="center" align="center">
				</el-table-column>

				<el-table-column prop="materialName" label="物料类型" show-overflow-tooltip width="100px" header-align="center" align="center">
				</el-table-column>
				<el-table-column prop="standard" label="钢种" show-overflow-tooltip width="80px" align="center">
				</el-table-column>
				<el-table-column prop="model" label="产品规格" show-overflow-tooltip width="180px" align="center">
				</el-table-column>
			<el-table-column prop="plateNo" label="产品编号" width="200px" show-overflow-tooltip align="center">
				</el-table-column>
				
				<el-table-column prop="countOld" label="数量" width="80px" show-overflow-tooltip align="right">
				</el-table-column>
				<el-table-column prop="weightOld" label="重量" width="80px" show-overflow-tooltip align="right">
				</el-table-column>
				
				<el-table-column prop="countNew" label="数量" width="80px" show-overflow-tooltip align="right">
				</el-table-column>
				<el-table-column prop="weightNew" label="重量" width="80px" show-overflow-tooltip align="right">
				</el-table-column>
				
		
				<el-table-column prop="recordType" label="作业类型" width="100px" show-overflow-tooltip align="center">
				</el-table-column>
					<el-table-column prop="truckNo" label="车号" width="100px" show-overflow-tooltip align="center">
				</el-table-column>
				<el-table-column prop="customerNameOld" label="客户名称" show-overflow-tooltip width="300px">
			</el-table-column>
			<el-table-column prop="receiveAddressOld" label="收货地址" width="300" show-overflow-tooltip align="left">
			</el-table-column>
			<el-table-column prop="customerNameNew" label="客户名称" show-overflow-tooltip width="300px">
			</el-table-column>
			<el-table-column prop="receiveAddressNew" label="收货地址" width="300" show-overflow-tooltip align="left">
			</el-table-column>
				<el-table-column prop="remark" label="备注" width="100px" show-overflow-tooltip align="left">
				</el-table-column>
				<el-table-column prop="addUser.userDesc" label="作业人" width="100px" show-overflow-tooltip align="left">
				</el-table-column>
				<el-table-column prop="addTime" label="作业时间" width="200px" show-overflow-tooltip align="left">
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			 :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRows">
			</el-pagination>
		</div>


	</div>
</template>

<script>
	import axios from '@/axios'
	export default {
		data() {
			return {
				plateNo: '',
				tableData: [],
				currentPage: 1,
				totalRows: 0,
				pageSizes: [50, 100, 200],
				pageSize: 50,
				loading: false,
			}
		},
		methods: {
			getTableData() {
				this.loading = true
				var url = 'WareTrack/query.do'
				var param = {
					page: this.currentPage,
					rows: this.pageSize,
					plateNo: this.plateNo,
				}
				axios.get(url, param).then(response => {
					if (response.data.code == 0) {
						this.tableData = response.data.data.list
						this.totalRows = response.data.data.total
					} else {
						this.$message({
							type: 'error',
							message: '操作失败；' + response.data.msg,
						});
					}
					this.loading = false
				});
			},
				handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getTableData()
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val
				this.getTableData()
			},
			handleSearch() {
				this.currentPage = 1
				this.getTableData()
			}
		},
	}
</script>

<style>
.searchForm-header{
		height: auto;
		margin-left: 10px;
	}
	.tabledata-grid{
		font-size: 20px;
		margin-left: 10px;
		height: calc(100% - 80px);

	}
</style>
