UP scFileExport 增加异步导出 async

src/components/scFileExport/index.vue

@@ -30,7 +30,8 @@
 							</el-form-item>
 							<slot name="form" :formData="formData"></slot>
 						</el-form>
-						<el-button type="primary" size="large" icon="el-icon-download" style="width: 100%;" @click="download">下 载</el-button>
+						<el-button v-if="async" type="primary" size="large" icon="el-icon-plus" style="width: 100%;" @click="download" :loading="asyncLoading">发起导出任务</el-button>
+						<el-button v-else type="primary" size="large" icon="el-icon-download" style="width: 100%;" @click="download">下 载</el-button>
 					</el-tab-pane>
 					<el-tab-pane label="列设置" v-if="columnData.length>0" lazy>
 						<columnSet :column="columnData"></columnSet>
@@ -60,6 +61,7 @@
 			fileTypes: { type: Array, default: () => ['xlsx'] },
 			data: { type: Object, default: () => {} },
 			showData: { type: Boolean, default: false },
+			async: { type: Boolean, default: false },
 			column: { type: Array, default: () => [] },
 			blob: { type: Boolean, default: false },
 			progress: { type: Boolean, default: true }
@@ -73,7 +75,8 @@
 				},
 				columnData: [],
 				downLoading: false,
-				downLoadProgress: 0
+				downLoadProgress: 0,
+				asyncLoading: false
 			}
 		},
 		watch:{
@@ -105,7 +108,9 @@
 					column: this.columnData.filter(n => !n.hide).map(n => n.prop).join(",")
 				}
 				let assignData = {...this.data, ...this.formData, ...columnArr}
-				if(this.blob){
+				if(this.async){
+					this.asyncDownload(this.apiObj, this.formData.fileName, assignData)
+				}else if(this.blob){
 					this.downloadFile(this.apiObj, this.formData.fileName, assignData)
 				}else{
 					this.linkFile(this.apiObj.url, this.formData.fileName, assignData)
@@ -153,6 +158,30 @@
 					})
 				})
 			},
+			asyncDownload(apiObj, fileName, data={}){
+				this.asyncLoading = true
+				apiObj.get(data).then(res => {
+					this.asyncLoading = false
+					if(res.code == 200){
+						this.dialog = false
+						this.$msgbox({
+							title: "成功发起任务",
+							message: `<div><img style="height:200px" src="img/tasks-example.png"/></div><p>已成功发起导出任务，您可以操作其他事务</p><p>稍后可在 <b>任务中心</b> 查看执行结果</p>`,
+							type: "success",
+							confirmButtonText: "知道了",
+							dangerouslyUseHTMLString: true,
+							center: true
+						}).catch(() => {})
+					}else{
+						this.$alert(res.message || "未知错误", "发起任务失败", {
+							type: "error",
+							center: true
+						}).catch(() => {})
+					}
+				}).catch(() => {
+					this.asyncLoading = false
+				})
+			},
 			toQueryString(obj){
 				let arr = []
 				for (var k in obj) {

src/views/vab/importexport.vue

@@ -40,6 +40,11 @@
 			<el-col :lg="12">
 				<el-card shadow="never" header="导出">
 					<sc-file-export :apiObj="$API.common.exportFile"></sc-file-export>
+					<sc-file-export :apiObj="$API.common.exportFile" fileName="人员列表(异步)" async>
+						<template #default="{open}">
+							<el-button type="primary" icon="sc-icon-download" @click="open">导出(异步)</el-button>
+						</template>
+					</sc-file-export>
 					<sc-file-export :apiObj="$API.common.exportFile" blob fileName="人员列表" :data="{otherData:'demo'}" showData :column="column" :fileTypes="['xlsx','docx','pdf']">
 						<template #default="{open}">
 							<el-button type="primary" icon="sc-icon-download" @click="open">导出(blob文件流)</el-button>
@@ -60,6 +65,7 @@
 						<el-descriptions-item label="apiObj" :width="200">Object 文件导出接口对象，通过apiObj.url请求文件</el-descriptions-item>
 						<el-descriptions-item label="data">Object 上传时附带的额外参数(可为数据表格的过滤项)</el-descriptions-item>
 						<el-descriptions-item label="showData">Boolean 是否显示附带的额外参数</el-descriptions-item>
+						<el-descriptions-item label="async">Boolean 是否异步导出文件</el-descriptions-item>
 						<el-descriptions-item label="fileName">String 下载文件名称，默认为当前时间戳</el-descriptions-item>
 						<el-descriptions-item label="fileTypes">Array 可选择文件类型，默认为['xlsx']，组件将数组第一项当做已选项</el-descriptions-item>
 						<el-descriptions-item label="column">Array 列配置，请求文件时将添加column为key的参数，值为prop逗号","分割的字符串</el-descriptions-item>