MingJinWave_vue/src/view/record/changerecord.vue

<template>
	<div style="height:100%;">
		<div class="searchForm-header">
			<el-row>
				<el-form :model="query" label-width="100px" inline="">
					<el-row>
						<el-form-item label="库房名称" style="margin-left: -15px">
							<el-select v-model="query.wareName"  size="small" clearable style="width:120px;margin-left: -8px" @change="changeWare">
								<el-option v-for="item in optionsWare" :key="item.id" :label="item.name" :value="item.name">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="垛位名称" style="margin-left: -35px">
							<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: -35px">
							<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: -35px">
							<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: -35px">
							<el-input v-model="query.customerName" size="small" style="width:170px;margin-left: -8px">
								<el-button slot="append" icon="el-icon-search" @click="showCustomer"></el-button>
							</el-input>
						</el-form-item>
					</el-row>
					<el-row>
						<el-form-item label="规格型号" style="margin-left: -15px;margin-top: -15px">
							<el-input v-model="query.model" size="small" style="width:120px;margin-left: -8px">
							</el-input>
						</el-form-item>
						<el-form-item label="钢板号" style="margin-left: -35px;margin-top: -15px">
							<el-input v-model="query.plateNo" size="small" style="width:120px;margin-left: -8px">
							</el-input>
						</el-form-item>
						<el-form-item label="转移时间" style="margin-left: -35px;margin-top: -15px">
								<el-date-picker v-model="query.RecordDate" size="small" style="width:330px;margin-left: -8px" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
							    </el-date-picker>
						</el-form-item>
						<el-form-item label=" " style="margin-top: -15px">
							<el-button @click="handleSearch" type="primary"  size="small" >查询</el-button>
							<el-button @click="handleExport" type="success"  size="small" icon="el-icon-download">导出记录</el-button>
						</el-form-item>
					</el-row>
				</el-form>
			</el-row>
			<total-block ref="totalBlock" style="margin-top: -25px;margin-left: -35px" 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: 97%;;font-size: 13px;margin-top: -50px;" :header-cell-style="{'text-align':'center'}">
				<el-table-column prop="id" label="编号" min-width="10%" v-if="false">
				</el-table-column>
				<el-table-column prop="wareName" label="仓库名称" width="100px" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="stackName" label="垛位" width="60px" show-overflow-tooltip header-align="center" align="center">
				</el-table-column>
				<el-table-column prop="layer" label="层号" show-overflow-tooltip width="60px" header-align="center" align="center">
				</el-table-column>
				<el-table-column prop="materialName" label="品名" show-overflow-tooltip width="60px" header-align="center" 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="standard" label="钢种" show-overflow-tooltip width="80px" align="center">
				</el-table-column>
				<el-table-column prop="count" label="数量" width="80px" show-overflow-tooltip align="right">
				</el-table-column>
				<el-table-column prop="weight" label="重量" width="80px" show-overflow-tooltip align="right">
				</el-table-column>
				<el-table-column prop="plateNo" label="钢板号" width="200px" show-overflow-tooltip align="center">
				</el-table-column>
				<el-table-column prop="recordType" label="类型" width="100px" show-overflow-tooltip align="center" :formatter="typeFormatter">
				</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="wgtDcnMtcCd" label="计量方式" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="edgeTy" label="切边类型" width="100" show-overflow-tooltip header-align="center">
				</el-table-column>
				<el-table-column prop="productionPlace" label="产地" width="250" show-overflow-tooltip header-align="center">
				</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>

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

		<!-- 导出Loading遮罩层 -->
		<div v-if="exportLoading" class="export-loading-mask">
			<div class="export-loading-content">
				<i class="el-icon-loading"></i>
				<p>正在导出，请稍候...</p>
			</div>
		</div>
	</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'
	export default {
		components: {
			PopupStack,
			PopupMaterial,
			PopupCustomer,
			TotalBlock
		},
		data() {
			return {
				query: {
					wareName: '',
					stackName: '',
					model: '',
					materialName: '',
					standard: '',
					customerName: '',
					plateNo: '',
					RecordDate:[],
				},

				tableData: [],
				optionsWare: [],
				dialogVisible: false,
				labelPosition: 'right',

				//分页参数
				currentPage: 1,
				totalRows: 0,
				pageSizes: [50, 100, 200,500],
				pageSize: 50,
				childParam:{
					wareName: '',
					stackName: '',
					model: '',
					materialName: '',
					standard: '',
					customerName: '',
					plateNo: '',
					RecordDate:[],
				},
childUrl:'WareChangeRecord/queryTotal.do',
			loading: false,
			exportLoading: false,

		};
		},
		//页面加载完成渲染
		mounted() {
			this.getWare()
			this.getTableData()
		},
		methods: {
			typeFormatter: function(row, column) {
				switch (row.recordType) {

					case "0":
						return "入库取消";
						break;
					default:
						return "入库";
						break;
				}
			},
			showMaterial() {
				this.$refs.PopupMaterial.show()
			},
			receviceFromMaterial(material) {
				//console.log("receviceFromStack")
				this.query.materialName = material.name
				this.query.standard = material.standard
			},

			showCustomer() {
				this.$refs.PopupCustomer.show()
			},
			receviceFromCustomer(customer) {
				//console.log("receviceFromStack")
				this.query.customerName = customer.name

			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSizeAll = val
				this.getTableData()
			},
			// 修改当前页事件
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPageAll = val
				this.getTableData()
			},
			handleSearch() {
				this.currentPage = 1
				this.getTableData()
			},
			getWare() {
				var url = 'MaintWare/queryByUserId.do'
				var param = {}
				axios.get(url, param).then(response => {
					console.log(response)
					this.optionsWare = response.data.data
					if (response.data.data.length == 1) {
						this.wareName = response.data.data[0].name
						//	this.getStack()
					}
				});
			},
			getTableData() {
				var url = 'WareChangeRecord/query.do'
				if(this.query.RecordDate == null){
					this.query.RecordDate = [false,false];
				}
				this.loading = true
				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,
					pFromDate:(!this.query.RecordDate[0]) ? "1970-01-01 00:00:00" : this.query.RecordDate[0].Format("yyyy-MM-dd HH:mm:ss"),		//date类型
					pToDate  :(!this.query.RecordDate[1]) ? new Date().Format("yyyy-MM-dd HH:mm:ss") :this.query.RecordDate[1].Format("yyyy-MM-dd HH:mm:ss"),
				}
				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;
				});
			},
			changeWare(){

			},
			// 导出Excel
			async handleExport() {
				// 显示加载动画
				this.exportLoading = true;
				try {
					var baseUrl = this.$store.state.app.serverName;
					var url = baseUrl + 'WareChangeRecord/exportExcel.do';
					let userId = localStorage.getItem("userId");
					let belongId = localStorage.getItem("belongId");
					let token = localStorage.getItem("token");

					var param = {
						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,
						pFromDate: (!this.query.RecordDate[0]) ? "1970-01-01 00:00:00" : this.query.RecordDate[0].Format("yyyy-MM-dd HH:mm:ss"),
						pToDate: (!this.query.RecordDate[1]) ? new Date().Format("yyyy-MM-dd HH:mm:ss") : this.query.RecordDate[1].Format("yyyy-MM-dd HH:mm:ss"),
						userId: userId,
						belongId: belongId
					};

					// POST请求，携带token鉴权头，5分钟超时（大数据量导出需要更长时间）
					const controller = new AbortController();
					const timeoutId = setTimeout(() => controller.abort(), 300000); // 5分钟超时

					// 使用 fetch + blob 方式，POST方法下载完成后关闭 loading
					const response = await fetch(url, {
						method: 'POST',
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded',
							'token': token,
							'userId': userId,
							'belongId': belongId
						},
						body: new URLSearchParams(param),
						signal: controller.signal
					});
					clearTimeout(timeoutId);

					if (!response.ok) {
						throw new Error('网络请求失败，状态码：' + response.status);
					}
					const blob = await response.blob();

					// 判断后端是否返回错误提示（非Excel二进制）
					if (blob.type.includes('text')) {
						const text = await blob.text();
						throw new Error(text || '导出数据查询失败，请缩小筛选时间范围');
					}

					// 创建下载链接
					const blobUrl = window.URL.createObjectURL(blob);
					const link = document.createElement('a');
					link.href = blobUrl;
					link.download = '转移记录_' + new Date().toISOString().slice(0, 10) + '.xlsx';
					document.body.appendChild(link);
					link.click();
					// 浏览器开始下载后立即关闭 loading
					this.exportLoading = false;
					// 清理
					setTimeout(() => {
						document.body.removeChild(link);
						window.URL.revokeObjectURL(blobUrl);
					}, 100);
					this.$message.success('导出成功');
				} catch (error) {
					console.error('导出失败:', error);
					// 超时单独提示
					if (error.name === 'AbortError') {
						this.$message.error('导出超时(5分钟)：数据量过大，请缩短查询时间区间或分批导出');
					} else {
						this.$message.error('导出失败：' + error.message);
					}
					this.exportLoading = false;
				}
			}
		},
	}
</script>

<style>
/* 导出Loading遮罩样式 */
.export-loading-mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}

.export-loading-content {
	background-color: #fff;
	padding: 30px 50px;
	border-radius: 8px;
	text-align: center;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

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