MingJinWave_vue/src/view/customer/storequery.vue

<template>
	<div style="height:100%;">
		<!-- <el-form :model="query" label-width="60px" inline="">
			<el-row >
				<el-form-item label="仓库" style="margin-left: -1px"> 
					<el-select v-model="query.wareName" size="small" style="width:120px;margin-left: -8px">
						<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="垛位" style="margin-left: -25px">
					<el-input v-model="query.stackName" size="small" style="width:120px;margin-left: -8px"></el-input>
				</el-form-item>
				<el-form-item label="物料" style="margin-left: -25px">
					<el-input v-model="query.materialName" size="small" style="width:120px;margin-left: -8px">
						<el-button slot="append" icon="el-icon-search" @click="showMaterial"></el-button>
					</el-input>
				</el-form-item>
				<el-form-item label="钢种" style="margin-left: -25px">
					<el-input v-model="query.standard" size="small" style="width:120px;margin-left: -8px">
						<el-button slot="append" icon="el-icon-search" @click="showMaterial"></el-button>
					</el-input>
				</el-form-item>
				<el-form-item label="规格" style="margin-left: -15px;">
					<el-input v-model="query.model" size="small" style="width:150px;margin-left: -8px"></el-input>
				</el-form-item>
				<el-form-item label="钢板号" style="margin-left: -15px;">
					<el-input v-model="query.plateNo" size="small" style="width:150px;margin-left: -8px"></el-input>
				</el-form-item>
				<el-form-item label="客户" style="margin-left: -15px;margin-top: 4px;">
					<el-input  v-model="query.customerName" clearable size = "small" :readonly="true"><el-button @click="clearCustomer" slot="append" icon="el-icon-delete"></el-button><el-button  size="small" @click="popCust" slot="append" icon="el-icon-search"></el-button></el-input>
				</el-form-item>
				<el-form-item label="订单号" style="margin-left:13px;margin-top: -18px">
					<el-input v-model="query.ordNo" size="small" style="width:150px;margin-left: -8px"></el-input>
				</el-form-item>
				<el-form-item label="" style="margin-top: -20px">
					<el-button @click="handleSearch" size="small" type="primary">查询</el-button>
				</el-form-item>
			</el-row>
		</el-form> -->
		<div class="searchForm-header">	
			<el-form  :model="query" label-width="60px" inline="">
				<el-row >
					<el-form-item label="仓库" style="margin-left: -1px"> 
						<el-select v-model="query.wareName" size="small" clearable style="width:120px;margin-left: -8px">
							<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.name"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="垛位" style="margin-left: -25px">
						<el-input v-model="query.stackName" size="small" style="width:120px;margin-left: -8px"></el-input>
					</el-form-item>
					<el-form-item label="物料" style="margin-left: -25px">
						<el-input v-model="query.materialName" size="small" style="width:120px;margin-left: -8px">
							<el-button slot="append" icon="el-icon-search" @click="showMaterial"></el-button>
						</el-input>
					</el-form-item>
					<el-form-item label="钢种" style="margin-left: -25px">
						<el-input v-model="query.standard" size="small" style="width:120px;margin-left: -8px">
							<el-button slot="append" icon="el-icon-search" @click="showMaterial"></el-button>
						</el-input>
					</el-form-item>
					<el-form-item label="规格" style="margin-left: -15px;">
						<el-input v-model="query.model" size="small" style="width:150px;margin-left: -8px"></el-input>
					</el-form-item>
					<el-form-item label="钢板号" style="margin-left: -15px;">
						<el-input v-model="query.plateNo" size="small" style="width:150px;margin-left: -8px"></el-input>
					</el-form-item>
					<el-form-item label="客户" style="margin-left: -15px;margin-top: 4px;">
						<el-input  v-model="query.customerName" clearable size = "small" :readonly="true"><el-button @click="clearCustomer" slot="append" icon="el-icon-delete"></el-button><el-button  size="small" @click="popCust" slot="append" icon="el-icon-search"></el-button></el-input>
					</el-form-item>
					<el-form-item label="订单号" style="margin-left:13px;margin-top: 0px">
						<el-input v-model="query.ordNo" size="small" style="width:150px;margin-left: -8px"></el-input>
					</el-form-item>
					<el-form-item label="" style="margin-top: 0px">
						<el-button @click="handleSearch" size="small" type="primary">查询</el-button>
					</el-form-item>
					<el-form-item label="" style="margin-top: 0px">
						<el-upload class="upload-demo" action="" 
							 ref="upload" :limit="1" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
							 :auto-upload="false"  >
							 <el-button plain slot="trigger"  type="success" v-show="false" style= "margin-left: 5px" size="small">询单导入</el-button>
							<el-button   type="success" @click="handleExport" style="margin-left: 2px" size="small">库存导出</el-button>
						</el-upload>
					</el-form-item>
					<el-button type="primary" style= "margin-left: 5px;margin-top: 5px" size="small"  @click="resetButton" :disabled="backAble">重置</el-button>
				</el-row>
				
			</el-form>
			<total-block ref="totalBlock" style="margin-left: -35px;font-size: 13px;margin-left: 5px;margin-top: -23px;" v-bind:childParam="childParam" v-bind:childUrl = 'childUrl'></total-block>
		</div>
		<div class="tabledata-grid">
			<el-table v-loading="loading"  :data="tableData" height="100%" stripe border style="width: 95%;margin-left: 20px;margin-top: -19px" :header-cell-style="{'text-align':'center'}">
				<el-table-column prop="id"  size="small" label="编号" min-width="10%" v-if="false">
				</el-table-column>
				<el-table-column prop="ware.name" size="small"  label="仓库名称" width="150px">
				</el-table-column>
				<el-table-column prop="stack.name" size="small"  label="垛位" width="100px">
				</el-table-column>
				<el-table-column prop="layer"  size="small" label="层号" show-overflow-tooltip width="100px" header-align="center" align="center">
	         	</el-table-column>
	         	<el-table-column prop="ordNo" size="small"  label="订单号" width="200px">
				</el-table-column>
				<el-table-column prop="material.name" size="small"  label="品名" width="100px">
				</el-table-column>
				<el-table-column prop="model"  size="small" label="规格型号" width="180px">
				</el-table-column>
				<el-table-column prop="material.standard" size="small"  label="钢种" width="130px">
				</el-table-column>
				<!-- <el-table-column prop="material. size="small" standard" label="钢种" show-overflow-tooltip width="180px" align="center">
	         	</el-table-column> -->
				<el-table-column prop="count"  size="small" label="数量" width="80px" show-overflow-tooltip align="right">
		         </el-table-column>
		         <el-table-column prop="weight"  size="small" label="重量" width="80px" show-overflow-tooltip align="right">
		         </el-table-column>
				<el-table-column prop="plateNo"  size="small" label="钢板号" width="180px">
				</el-table-column>
				<!-- <el-table-column prop="recordType" size="small"  label="类型" width="180px" show-overflow-tooltip align="center" >
	         	</el-table-column> -->
				<el-table-column prop="customer.name" size="small"  label="客户名称" width="400px" >
				</el-table-column>
				<el-table-column prop="receiveAddress"  size="small" label="收货地址" width="250" show-overflow-tooltip align="left">
		        </el-table-column>
		        <el-table-column prop="fkComponyId" label="付款单位" width="300" show-overflow-tooltip header-align="center">
					</el-table-column>
				<el-table-column prop="carNo"  size="small" label="车号" width="110" show-overflow-tooltip header-align="center">
				</el-table-column>
		        <el-table-column prop="wgtDcnMtcCd"  size="small" label="计量方式" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="edgeTy"  size="small" label="切边类型" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="productionPlace"  size="small" label="产地" width="250" show-overflow-tooltip header-align="center">
				</el-table-column>
		        <el-table-column prop="remark"  size="small" label="备注" width="180px" show-overflow-tooltip align="left">
		        </el-table-column>
		        <el-table-column prop="addUser.userDesc" size="small"  label="操作人" width="180px" show-overflow-tooltip align="left">
		        </el-table-column>
		        <el-table-column prop="addTime"  size="small" label="操作时间" width="180px" show-overflow-tooltip align="left">
		        </el-table-column>
			</el-table>


			<el-pagination @size-change="handleSizeChange" style="margin-left:15px" @current-change="handleCurrentChange" :current-page="currentPage"
			 :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRows">
			</el-pagination>
		</div>

		<popup-material ref="PopupMaterial" @receviceFromChild="receviceFromMaterial"></popup-material>
		<!--  <popup-customer ref="PopupCustomer" @receviceFromChild="receviceFromCustomer"></popup-customer> -->
		<popup-customer ref="popupCustomer" @receviceFromChild="receviceFromCustomer"></popup-customer>

	</div>

</template>



<script>
	import axios from '@/axios'
	import PopupStack from '@/components/PopupStack.vue'
	import PopupMaterial from '@/components/PopupMaterial.vue'
	import PopupCustomer from '@/components/PopupCustomer.vue'
	import TotalBlock    from '@/components/TotalBlock.vue'
	import Export2Excel from '../../excel/Export2Excel.js'
	export default {
		components: {
			PopupStack,
			PopupMaterial,
			PopupCustomer,
			TotalBlock
		},
		data() {
			return {
				//分页参数
				currentPage: 1,
				totalRows: 0,
				pageSizes: [50,100,200,500],
				pageSize: 50,


				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				//
				options: [],
				query: {
					wareName: '',
					stackName: '',
					model: '',
					materialName: '',
					standard: '',
					customerName: '',
					plateNo: '',
					date:'',
					customerId: '',
					ordNo:''
					// customer: {
					// 	name: ''
					// },
					// material: {
					// 	name: '',
					// 	standard: ''
					// },
					// model: '',
					// plateNo: '',
					// stack: {
					// 	name: ''
					// },
					// ware: {
					// 	name: ''
					// }
				},

				tableData: [],
				childParam:{
					wareName: '',
					stackName: '',
					model: '',
					materialName: '',
					standard: '',
					customerName: '',
					plateNo: '',
					date:'',
					customerId: ''
				},
				childUrl:'CustomerStoreQuery/queryTotal.do',
				loading: false,
			}
		},

		mounted() {
			this.getTableData()
			this.getWare();
		},

		methods: {
			handleExceed(){},
			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()
			},
			getTableData() {
			// console.log(this.query.date)
				var url = 'CustomerStoreQuery/queryStore.do'
				var param = {
					page: this.currentPage,
					rows: this.pageSize,
					wareName: this.query.wareName,
					stackName: this.query.stackName,
					model: this.query.model,
					materialName: this.query.materialName,
					standard: this.query.standard,
					customerName: this.query.customerName,
					plateNo: this.query.plateNo,
					beginDate:this.query.date[0],
					endDate:this.query.date[1],
					customerId:this.query.customerId,
					ordNo:this.query.ordNo
				}
				this.loading = true;
				this.childParam = param;
				axios.get(url, param).then(response => {
					if (response.data.code == 0) {
						this.tableData = response.data.data.list
						this.totalRows = response.data.data.total
						this.$refs.totalBlock.getTotalData();
					} else {
						this.$message({
							type: 'error',
							message: '操作失败；' + response.data.msg,
						});
					}
					this.loading = false;

				});

			},

			showMaterial() {
				this.$refs.PopupMaterial.show()
			},
			receviceFromMaterial(material) {
				this.query.materialName = material.name
				this.query.standard = material.standard
			},
			popCust(){
				// this.dialogVisible2 = true;
				this.$refs.popupCustomer.show();
			},
			receviceFromCustomer(customer) {
				this.query.customerName = customer.name;
				this.query.customerId = customer.id;
			},
			clearCustomer(){
				this.query.customerName = '';
				this.query.customerId = '';
			},
			resetButton(){      //查询条件重置
				this.query.wareName = '',
				this.query.stackName = '',
				this.query.model = '',
				this.query.materialName = '',
				this.query.standard = '',
				this.query.customerName = '',
				this.query.plateNo = '',
				this.query.wareId = '',
				this.query.ordNo = '',
				this.query.fkcustmerName = '',
				this.query.carNo = '',
				this.query.tallyPeople = '',
				this.query.fkComponyName = ''
			},
			handleExport() {
				var url = 'CustomerStoreQuery/queryStore.do'
				var imptData = [];
				var param = {
					page: -1,
					rows: -1,
					wareName: this.query.wareName,
					stackName: this.query.stackName,
					model: this.query.model,
					materialName: this.query.materialName,
					standard: this.query.standard,
					customerName: this.query.customerName,
					plateNo: this.query.plateNo,
					beginDate:this.query.date[0],
					endDate:this.query.date[1],
					customerId:this.query.customerId,
					ordNo:this.query.ordNo
				}
				
				axios.get(url, param).then(response => {

					if (response.data.code == 0) {
						var imptData = response.data.data;
						if (imptData.length == 0) {
							this.$alert('无法导出，选择时间段无记录', '提示', {
								confirmButtonText: '确定',
								callback: action => {}
							});
						} else {

							this.exportExcel(imptData)
						}
					} else {
						this.$message({
							type: 'error',
							message: '操作失败；' + response.data.msg,
						});
					}

				});
				
			},
			exportExcel(imptData) {
				// alert(JSON.stringify(imptData))
				const header = ["仓库名称"
								,"垛位"
								,"层号"
								,"订单号"
								,"品名"
								,"规格型号"
								,"钢种"
								,"数量"
								,"重量"
								,"钢板号"
								,"客户名称"
								,"收货地址"
								,"车号"
								,"计量方式"
								,"切边类型"
								,"产地"
								,"备注"
								,"操作人"
								,"操作时间"
				] // 导出的表头名
				const filterVal = [
						"wareName"
						,"stackName"
						,"layer"
						,"ordNo"
						,"materialName"
						,"model"
						,"materialStandard"
						,"count"
						,"weight"
						,"plateNo"
						,"customerName"
						,"receiveAddress"
						,"carNo"
						,"wgtDcnMtcCd"
						,"edgeTy"
						,"productionPlace"
						,"remark"
						,"addUserUserDesc"
						,"addTime"
				]

				var handleImptData = [];
				var item = {};
				console.log(JSON.stringify(imptData[0]))
				for(var i = 0 ;i <imptData.length;i++){
					item = {}
					item["wareName"] = imptData[i].ware.name;
					item["stackName"] = imptData[i].stack.name;
					item["layer"] = imptData[i].layer;
					item["ordNo"] = imptData[i].ordNo;
					item["materialName"] = imptData[i].material.name;
					item["model"] = imptData[i].model;
					item["materialStandard"] = imptData[i].material.standard;
					item["count"] = imptData[i].count;
					item["weight"] = imptData[i].weight;
					item["plateNo"] = imptData[i].plateNo;
					item["customerName"] = imptData[i].customer.name;
					item["receiveAddress"] = imptData[i].receiveAddress;
					item["carNo"] = imptData[i].carNo;
					item["wgtDcnMtcCd"] = imptData[i].wgtDcnMtcCd;
					item["edgeTy"] = imptData[i].edgeTy;
					item["productionPlace"] = imptData[i].productionPlace;
					item["remark"] = imptData[i].remark;
					item["addUserUserDesc"] = imptData[i].addUser.userDesc;
					item["addTime"] = imptData[i].addTime;
					handleImptData.push(item);
				}
				const list = handleImptData
				const data = this.formatJson(filterVal, list)

				const filename = '库存导出' + (new Date()).toLocaleDateString();
				Export2Excel.export_json_to_excel({
					header,
					data,
					filename
				})
			},
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => {
					return v[j]
				}))
			},
			getWare() {
				var url = 'MaintWare/queryByUserId.do'
				var param = {}
				axios.get(url, param).then(response => {
					console.log(response)
					this.options = response.data.data
					// if (response.data.data.length == 1) {
					// 	this.wareName = response.data.data[0].name
					// 	//	this.getStack()
					// }
				});
			},

		}


	}
</script>

<style>
	.searchForm-header{
		/*background-color: red;*/
		height: auto;
		/*;*/
		margin-left: 10px;
	}
	.tabledata-grid{
		/*margin-left: 100px;*/
		font-size: 20px;
		height: calc(100% - 200px);
		/*background-color: #000;*/
	}
</style>