|
|
@@ -1,16 +1,16 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<el-row :gutter="10" class="mb8">
|
|
|
- <el-col :span="1.5">
|
|
|
+ <!-- <el-col :span="1.5"> -->
|
|
|
|
|
|
- <div>
|
|
|
+ <!-- <div>
|
|
|
<button @click="startExport1" :disabled="exporting">开始导出</button>
|
|
|
<button @click="checkExportStatus1">检查导出状态</button>
|
|
|
<el-progress v-if="exporting" :percentage="progress" :status="progressStatus"></el-progress>
|
|
|
<button @click="handleDownloadEnd" :disabled="!exportCompleted">Download Zip</button>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
|
|
|
- <el-button
|
|
|
+ <!-- <el-button
|
|
|
type="primary"
|
|
|
plain
|
|
|
icon="el-icon-download"
|
|
|
@@ -18,8 +18,33 @@
|
|
|
@click="handleDownloadEnd"
|
|
|
v-hasPermi="['system:engineering:download']"
|
|
|
>工程下载
|
|
|
- </el-button>
|
|
|
- </el-col>
|
|
|
+ </el-button> -->
|
|
|
+ <!-- </el-col> -->
|
|
|
+ <div class="btn-list">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ :disabled="fileStatus == 2"
|
|
|
+ :loading="fileStatus == 2"
|
|
|
+ size="default"
|
|
|
+ @click="switchHandler"
|
|
|
+ >{{
|
|
|
+ fileStatus == 1
|
|
|
+ ? "准备导出文件"
|
|
|
+ : fileStatus == 2
|
|
|
+ ? "文件准备中"
|
|
|
+ : "下载文件"
|
|
|
+ }}</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="info"
|
|
|
+ v-show="fileStatus == 3"
|
|
|
+ size="default"
|
|
|
+ @click="resetFileStatus"
|
|
|
+ >重置下载文件</el-button
|
|
|
+ >
|
|
|
+
|
|
|
+ <!-- <button @click="startExport1">开始导出</button> -->
|
|
|
+ </div>
|
|
|
<right-toolbar
|
|
|
:showSearch.sync="showSearch"
|
|
|
@queryTable="getList"
|
|
|
@@ -31,16 +56,15 @@
|
|
|
:data="engineeringList"
|
|
|
@selection-change="handleSelectionChange"
|
|
|
>
|
|
|
- <el-table-column type="selection" width="55" align="center"/>
|
|
|
- <el-table-column label="工程名称" align="center" prop="engineeringName"/>
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="工程名称" align="center" prop="engineeringName" />
|
|
|
<el-table-column label="下载时间" align="center" prop="downloadTime">
|
|
|
<template slot-scope="scope">
|
|
|
<span>{{
|
|
|
- parseTime(scope.row.downloadTime, "{y}-{m}-{d} {h}:{i}:{s}")
|
|
|
- }}</span>
|
|
|
+ parseTime(scope.row.downloadTime, "{y}-{m}-{d} {h}:{i}:{s}")
|
|
|
+ }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
-
|
|
|
</el-table>
|
|
|
|
|
|
<pagination
|
|
|
@@ -54,7 +78,6 @@
|
|
|
<!-- 添加或修改工程部署对话框 -->
|
|
|
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
|
-
|
|
|
<el-form-item label="工程名称" prop="engineeringName">
|
|
|
<el-input
|
|
|
v-model="form.engineeringName"
|
|
|
@@ -78,10 +101,10 @@
|
|
|
</el-date-picker>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="更新时间" prop="updateTime">
|
|
|
- <el-input v-model="form.updateTime" placeholder="请输入修改时间"/>
|
|
|
+ <el-input v-model="form.updateTime" placeholder="请输入修改时间" />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="是否删除" prop="delFlag">
|
|
|
- <el-input v-model="form.delFlag" placeholder="请输入是否删除"/>
|
|
|
+ <el-input v-model="form.delFlag" placeholder="请输入是否删除" />
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
@@ -93,11 +116,11 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {getToken} from '@/utils/auth'
|
|
|
-import {Message, Loading} from "element-ui";
|
|
|
+import { getToken } from "@/utils/auth";
|
|
|
+import { Message, Loading } from "element-ui";
|
|
|
import service from "@/utils/request";
|
|
|
-import {tansParams, blobValidate} from "@/utils/zkqy";
|
|
|
-import {mapState} from 'vuex'
|
|
|
+import { tansParams, blobValidate } from "@/utils/zkqy";
|
|
|
+import { mapState } from "vuex";
|
|
|
import {
|
|
|
checkExportStatus,
|
|
|
downloadZip,
|
|
|
@@ -118,7 +141,7 @@ export default {
|
|
|
exporting: false,
|
|
|
exportCompleted: false,
|
|
|
progress: 0,
|
|
|
- progressStatus: 'success',
|
|
|
+ progressStatus: "success",
|
|
|
// 遮罩层
|
|
|
loading: true,
|
|
|
// 选中数组
|
|
|
@@ -154,79 +177,125 @@ export default {
|
|
|
form: {},
|
|
|
// 表单校验
|
|
|
rules: {},
|
|
|
+
|
|
|
+ // 下载相关
|
|
|
+ gapTime: 5000, //轮询间隔
|
|
|
+ fileStatus: 1, //1:未准备 2:准备中 3:准备完成
|
|
|
+ timer: null, //轮询定时器
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
this.getList();
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ console.log("mounted");
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ console.log("activated");
|
|
|
+ // this.initDownloadStatus();
|
|
|
+ this.fileStatus = 1;
|
|
|
+ },
|
|
|
computed: {
|
|
|
- ...mapState({dataBaseName: state => dataBaseName => state.user.dataSource.databaseName})
|
|
|
+ ...mapState({
|
|
|
+ dataBaseName: (state) => state.user.dataSource.databaseName,
|
|
|
+ }),
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // fileStatus: function (val) {
|
|
|
+ // if (val == 2) {
|
|
|
+ // this.startPolling();
|
|
|
+ // } else {
|
|
|
+ // this.stopPolling();
|
|
|
+ // }
|
|
|
+ // },
|
|
|
},
|
|
|
methods: {
|
|
|
+ switchHandler() {
|
|
|
+ console.log(this.fileStatus);
|
|
|
+ switch (this.fileStatus) {
|
|
|
+ case 1: //准备下载文件
|
|
|
+ this.startExport1();
|
|
|
+ break;
|
|
|
+ case 3: //下载文件
|
|
|
+ this.handleDownloadEnd();
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
startExport1() {
|
|
|
- this.exporting = true;
|
|
|
- this.progress = 0;
|
|
|
+ // 执行导出接口
|
|
|
+ this.updateDownloadStatus(2);
|
|
|
+ // this.fileStatus = 2;
|
|
|
+ let databaseNames = [];
|
|
|
+ startExport(databaseNames).then((response) => {
|
|
|
+ console.log(response);
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.updateDownloadStatus(3);
|
|
|
|
|
|
- // 模拟导出过程
|
|
|
- const interval = setInterval(() => {
|
|
|
- if (this.progress < 100) {
|
|
|
- this.progress += 10;
|
|
|
+ // this.fileStatus = 3;
|
|
|
} else {
|
|
|
- clearInterval(interval);
|
|
|
- this.exporting = false;
|
|
|
- this.exportCompleted = true;
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
- let databaseNames = []
|
|
|
- // databaseNames.push("ry-vue-call")
|
|
|
- // // databaseNames.push(this.dataBaseName)
|
|
|
- // console.log(databaseNames);
|
|
|
- // console.log(this.$store.state);
|
|
|
+ // this.fileStatus = 1;
|
|
|
+ this.updateDownloadStatus(1);
|
|
|
|
|
|
- // return;
|
|
|
- // 执行导出接口
|
|
|
- startExport(databaseNames).then(response => {
|
|
|
- console.log(response);
|
|
|
+ this.$message.warning("网络异常,请重新准备导出");
|
|
|
+ }
|
|
|
// 根据后端返回的数据更新状态或进行其他操作
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
checkExportStatus1() {
|
|
|
// 调用后端接口检查导出状态
|
|
|
- checkExportStatus().then(response => {
|
|
|
+ checkExportStatus().then((response) => {
|
|
|
console.log(response);
|
|
|
+
|
|
|
// 根据后端返回的数据更新状态或进行其他操作
|
|
|
// this.exportCompleted = response.data.includes('completed');
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
- handleDownloadEnd() {
|
|
|
+ async handleDownloadEnd() {
|
|
|
// 调用后端接口下载文件
|
|
|
- this.loading = true;
|
|
|
+
|
|
|
let applicationType = "application/zip";
|
|
|
var fileTheName = `engineering_${new Date().getTime()}.zip`;
|
|
|
- downloadZip().then((res) => {
|
|
|
- if (res) {
|
|
|
- const content = res;
|
|
|
- const blob = new Blob([content], {type: applicationType});
|
|
|
- const fileName = fileTheName;
|
|
|
- if ("download" in document.createElement("a")) {
|
|
|
- // 非IE下载
|
|
|
- const elink = document.createElement("a");
|
|
|
- elink.download = fileName;
|
|
|
- elink.style.display = "none";
|
|
|
- elink.href = URL.createObjectURL(blob);
|
|
|
- document.body.appendChild(elink);
|
|
|
- elink.click();
|
|
|
- URL.revokeObjectURL(elink.href); // 释放URL 对象
|
|
|
- document.body.removeChild(elink);
|
|
|
- this.loading = false;
|
|
|
+ try {
|
|
|
+ let response = await checkExportStatus();
|
|
|
+ // if (response.code == 200) {
|
|
|
+ this.loading = true;
|
|
|
+ downloadZip().then((res) => {
|
|
|
+ if (res) {
|
|
|
+ const content = res;
|
|
|
+ const blob = new Blob([content], { type: applicationType });
|
|
|
+ const fileName = fileTheName;
|
|
|
+ if ("download" in document.createElement("a")) {
|
|
|
+ // 非IE下载
|
|
|
+ const elink = document.createElement("a");
|
|
|
+ elink.download = fileName;
|
|
|
+ elink.style.display = "none";
|
|
|
+ elink.href = URL.createObjectURL(blob);
|
|
|
+ document.body.appendChild(elink);
|
|
|
+ elink.click();
|
|
|
+ URL.revokeObjectURL(elink.href); // 释放URL 对象
|
|
|
+ document.body.removeChild(elink);
|
|
|
+ this.loading = false;
|
|
|
+ } else {
|
|
|
+ // IE10+下载
|
|
|
+ navigator.msSaveBlob(blob, fileName);
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ this.getList();
|
|
|
+ // this.fileStatus = 1;
|
|
|
+ // this.updateDownloadStatus(1);
|
|
|
} else {
|
|
|
- // IE10+下载
|
|
|
- navigator.msSaveBlob(blob, fileName);
|
|
|
- this.loading = false;
|
|
|
+ this.$message.warning("文件异常,请重新准备下载");
|
|
|
+ this.updateDownloadStatus(1);
|
|
|
}
|
|
|
- this.getList();
|
|
|
- }
|
|
|
- });
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ // }
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error);
|
|
|
+ this.$message.warning("文件异常,请重新准备下载");
|
|
|
+ this.updateDownloadStatus(1);
|
|
|
+ }
|
|
|
},
|
|
|
/** 查询工程部署列表 */
|
|
|
getList() {
|
|
|
@@ -326,8 +395,7 @@ export default {
|
|
|
this.getList();
|
|
|
this.$modal.msgSuccess("删除成功");
|
|
|
})
|
|
|
- .catch(() => {
|
|
|
- });
|
|
|
+ .catch(() => {});
|
|
|
},
|
|
|
/** 导出按钮操作 */
|
|
|
handleExport() {
|
|
|
@@ -358,7 +426,7 @@ export default {
|
|
|
downloadEngineering().then(async (data) => {
|
|
|
const isBlob = blobValidate(data);
|
|
|
if (isBlob) {
|
|
|
- const blob = new Blob([data], {type: "application/zip"});
|
|
|
+ const blob = new Blob([data], { type: "application/zip" });
|
|
|
// saveAs(blob, filename);
|
|
|
if ("download" in document.createElement("a")) {
|
|
|
// 非IE下载
|
|
|
@@ -564,10 +632,37 @@ export default {
|
|
|
// // });
|
|
|
//
|
|
|
// },
|
|
|
-
|
|
|
},
|
|
|
- }
|
|
|
- ,
|
|
|
-}
|
|
|
-;
|
|
|
+ // 初始化下载文件状态
|
|
|
+ initDownloadStatus() {
|
|
|
+ let tempStatus = sessionStorage.getItem("fileStatus");
|
|
|
+ this.fileStatus = tempStatus ? tempStatus : 1;
|
|
|
+ },
|
|
|
+ // 更新下载文件状态
|
|
|
+ updateDownloadStatus(status) {
|
|
|
+ this.fileStatus = status;
|
|
|
+ sessionStorage.setItem("fileStatus", status);
|
|
|
+ },
|
|
|
+ // 开始轮询
|
|
|
+ startPolling() {
|
|
|
+ if (this.timer) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ }
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.checkExportStatus1();
|
|
|
+ }, this.gapTime);
|
|
|
+ },
|
|
|
+ // 结束轮询
|
|
|
+ stopPolling() {
|
|
|
+ if (this.timer) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 重置下载文件
|
|
|
+ resetFileStatus() {
|
|
|
+ this.fileStatus = 1;
|
|
|
+ this.$message.success("重置成功");
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
lph