导出加loading

src/views/report/ExportExcel.vue

@@ -14,15 +14,16 @@
 		<table class="com-table">
 			<thead>
 				<tr>
-					<!-- <th width="45px"></th> -->
-					<th width="">
+					<th>
 						风电场
 					</th>
-					<th width="">
+					<th>
+						<input class='t2' type='checkbox' @click="rqCheck"/>
 						日期间隔
 					</th>
-					<th width="200px">
-						日期间隔
+					<th>
+						<input class='t2' type='checkbox' @click="sjCheck"/>
+						时间间隔
 					</th>
 					<th width="120px">
 						操作
@@ -32,20 +33,16 @@
 			<el-scrollbar>
 				<tbody>
 					<tr v-for="(row, index) of tableData" :key="index">
-						<!-- <td width="45px">
-							<input v-model='checkList' :value="index" @change="thisCheck(index)" type='checkbox' />
-						</td> -->
 						<td>
 							{{row.fdc}}
 						</td>
 						<td class="excelPickerTd">
-							<el-date-picker v-model="value1[index]" type="daterange" range-separator="至"
+							<el-date-picker v-model="value1[index]" type="daterange" @change='value1Change(index)' range-separator="至"
 								start-placeholder="开始日期" end-placeholder="结束日期" class="mr15">
 							</el-date-picker>
 						</td>
-						<td width="200px">
-							<el-input placeholder="请输入时间间隔" type='number' v-model="inputVal[index]" clearable>
-							</el-input>
+						<td>
+							<el-input placeholder="请输入时间间隔" type='number' v-model="inputVal[index]" @change='inputValChange(index)'></el-input>
 						</td>
 						<td width="120px">
 							<el-button type='text' style='cursor: pointer;' @click="thisExport(index)">导出
@@ -64,6 +61,7 @@
 		export_blob,
 		export_more_blob
 	} from "@tools/excel/Export2Excel.js";
+	import BASE from "@tools/basicTool.js";
 	export default {
 		components: {
 			JsZip
@@ -71,6 +69,9 @@
 		data() {
 			const that = this;
 			return {
+				single:false,
+				rqChecked:false,
+				sjChecked:false,
 				checkList: [],
 				tableIdArr: [], //放checkbox的id数组
 				tableData: [],
@@ -101,20 +102,37 @@
 			this.tableVal();
 		},
 		methods: {
-			typeClick(a){
-				this.templateId = a;
+			value1Change(index){
+				if(this.rqChecked){
+					var date = this.value1[index];
+					this.value1 = [];
+					this.tableData.forEach((ele, index) => {
+						this.value1.push(date);
+						this.time(index, date);
+					})
+				}
 			},
-			inputChange(index, val) {
-				console.log(index)
-				console.log(val)
+			inputValChange(index){
+				if(this.sjChecked){
+					var sj = this.inputVal[index];
+					this.inputVal = [];
+					this.tableData.forEach((ele, index) => {
+						this.inputVal.push(sj);
+					})
+				}
 			},
-			thisCheck(index) {
-				let that = this;
-				that.time(index, that.value1[index]);
-				that.stations[index] = that.tableData[index].value
+			rqCheck(){
+				this.rqChecked=event.target.checked
+			},
+			sjCheck(){
+				this.sjChecked=event.target.checked
+			},
+			typeClick(a){
+				this.templateId = a;
 			},
 			thisExport(index) {
 				let that = this;
+				that.single = true;
 				that.time(index, that.value1[index]);
 				that.stations[index] = that.tableData[index].value;
 				that.allExportF(0, index);
@@ -172,8 +190,6 @@
 					this.value1.push([start, end]);
 					this.time(index, [start, end]);
 				})
-				// this.endTs.push(Date.parse(new Date(year, month, day))); //当前日期0点
-				// this.startTs.push(this.endTs - 30 * 86400000); //当前日期减30天
 			},
 			handleCommand(command) {
 				this.templateId = command;
@@ -185,6 +201,7 @@
 				this.allExportF(0);
 			},
 			allExportF(_index, thisIndex) {
+				BASE.showLoading({text:'正在导出，请耐心等待...'});
 				const that = this;
 				if (that.stations[_index]) {
 					that.API.requestData({
@@ -241,7 +258,8 @@
 						filterVal.push(index);
 					});
 					that.paths.push(export_blob(tHeader, that.formatJson(filterVal, tempArray))); //传blob
-					that.pathName.push(key); //excel的名字
+					var str = key.split('_');
+					that.pathName.push(str[0].substring(0,2)+str[1]); //excel的名字
 					_index++;
 					
 					if (deepIndex!=undefined) {
@@ -310,6 +328,7 @@
 							that.allExportF(deepIndex);
 						} else {
 							that.paths.push(export_more_blob(tHeader, obj, excelName)); //只渲染一个excel
+							BASE.closeLoading();
 						}
 					}
 					if (deepIndex!=undefined) {
@@ -321,6 +340,7 @@
 							that.paths = [];
 							that.pathName = [];
 							that.zipOut(thisPath, thisPathName, '风电场_上网电量&功率&测风塔数据')
+							BASE.closeLoading();
 						}
 					}else{
 						that.exportMuban2(data, _index, excelName);
@@ -330,6 +350,7 @@
 							that.tempArrayS = [];
 							that.paths = [];
 							that.pathName = [];
+							BASE.closeLoading();
 						}
 					}
 				}
@@ -367,6 +388,12 @@
 						document.body.removeChild(eleLink)
 						if (deepIndex) {
 							that.allExportF(deepIndex); //递归，去执行ajax
+							if(that.stations.length == deepIndex){
+								BASE.closeLoading();
+							}
+						}else if(that.single){
+							BASE.closeLoading();
+							that.single = false;
 						}
 					})
 			},
@@ -388,13 +415,24 @@
 </script>
 
 <style lang="less">
-	// .ExportExcel .el-date-editor input{
-	// 	background-color: transparent !important;
-	// }
-	// .main-body .el-range-input{
-	// 	background-color: transparent;
-	// }
 	.excelPickerTd input {
 		flex: 1;
 	}
+	.el-date-editor--daterange.mr15{
+		    border: 1px solid rgba(96, 103, 105, 0.2);
+		    height: 33px;
+		    padding: 0 8px;
+		    width: 369px;
+			input{
+				background-color: transparent;
+				color: white;
+			}
+			.el-range-separator{
+				color: white;
+			}
+	}
+	.com-table td{
+		color: white !important;
+	}
+	.t2{top: 2px;position: relative !important;}
 </style>