提交

.env.development

@@ -26,4 +26,6 @@ VITE_HOST_INNET = 'http://localhost:81'
 VITE_HOST_OUTNET = 'http://localhost:81'
 
 #站内信地址
-VITE_WS_API = '/ws'
+VITE_WS_API = 'ws://localhost:8080/ws/'
+#导出地址
+VITE_WS_EXPORT_API = 'ws://localhost:8081/wsExport/'

.env.production

@@ -29,4 +29,6 @@ VITE_HOST_INNET = 'http://192.168.10.41=2:82/onlinePreview?url='
 VITE_HOST_OUTNET = 'http://120.46.159.163:8012/onlinePreview?url='
 
 #站内信地址
-VITE_WS_API = '/ws'
+VITE_WS_API = '/ws'
+#导出地址
+VITE_WS_EXPORT_API = '/ws-production'

src/api/business/beforeCheckoutVerify.js

@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import { method } from 'lodash-es'
 
 const baseUrl = import.meta.env.VITE_APP_PRODUCTION_API
 
@@ -54,4 +55,12 @@ export function exportAsync(data) {
     method: 'post',
     data: data
   })
-}
+}
+
+export function getExportCount(params) {
+  return request({
+    url: baseUrl + '/business/inspecion/getExportCount',
+    method: 'get',
+    params: params
+  })
+} 

src/views/business/outsourceInspectionVerify/index.vue

@@ -45,9 +45,9 @@
           :loading="confirmLoading">批量通过</el-button>
         <el-button type="danger" icon="Close" :disabled="ids && ids.length == 0" @click="handleFail">批量不通过</el-button>
         <el-button type="primary" @click="exportForYear">导出审核列表</el-button>
-        <el-button v-if="exportSuccess" type="warning" icon="Download">下载导出excel</el-button>
+        <!-- <el-button v-if="exportSuccess" type="warning" icon="Download" @click="downloadExcel">下载导出excel</el-button>
         <el-progress v-if="doingExport" class="export-progress" :percentage="exportProgress" />
-        <el-button v-if="doingExport" type="danger">停止导出</el-button>
+        <el-button v-if="doingExport && !exportSuccess" type="danger">停止导出</el-button> -->
       </el-form-item>
     </el-form>
 
@@ -117,6 +117,15 @@
     <!-- 分页 -->
     <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
       v-model:limit="queryParams.pageSize" @pagination="getList" />
+    <el-dialog v-model="doingExport" title="导出审核列表" width="300px" height="400px" @close="close" append-to-body draggable
+      :close-on-click-modal="false">
+      <div style="color: red;font-weight: 600;">导出中请勿关闭</div>
+      <div class="form-btns-container" style="display: inline-block; line-height: 36px;">
+        <el-button v-if="exportSuccess" type="warning" icon="Download" @click="downloadExcel">下载导出excel</el-button>
+        <el-progress v-if="doingExport" class="export-progress" :percentage="exportProgress" />
+        <el-button v-if="doingExport && !exportSuccess" type="danger" @click="close">停止导出</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -127,7 +136,8 @@ import {
   confirmInspection,
   checkFurnace,
   checkMultiplyFurnace,
-  exportAsync
+  exportAsync,
+  getExportCount
 } from "@/api/business/beforeCheckoutVerify";
 
 import { nextTick } from "vue";
@@ -154,10 +164,13 @@ const printCarriers = ref([]);
 const confirmLoading = ref(false)
 const exportSuccess = ref(false)
 const doingExport = ref(false)
-const wsUrl = 'ws://localhost:8081/wsExport/'
+const exportProgress = ref(0)
+const exportUrl = ref(null)
+// const wsUrl = 'ws://localhost:8081/wsExport/'
+const wsUrl = import.meta.env.VITE_WS_EXPORT_API
 let ws = null
 
-const webHost = import.meta.env.VITE_APP_PRODUCTION_API;
+const webHost = import.meta.env.VITE_APP_BASE_API;
 /** 查询对象 */
 const queryParams = ref({
   pageNum: 1,
@@ -341,20 +354,28 @@ function handleReject(row) {
 }
 /** 异步导出excel */
 async function exportForYear() {
-  if (ws == null) {
-    // 启动一个websocket
-    console.log(useUserStore().user.userId)
-    await createWebSocket(useUserStore().user.userId, getToken())
-    initWebsocket()
-  } else {
-    initWebsocket()
-  }
-  // 发送请求要求导出excel
-  exportAsync(queryParams.value).then(res => {
-    if (res.code == 200) {
-      doingExport.value = true
+  // 导出前提示
+  const res = await getExportCount(queryParams.value)
+  console.log(res)
+  const num = res.data
+  const confirm = await proxy.$modal.confirm(`共${num}条数据是否确认导出？`).then(_ => true).catch(_ => false)
+  if (confirm) {
+    if (ws == null) {
+      // 启动一个websocket
+      console.log(useUserStore().user.userId)
+      await createWebSocket(useUserStore().user.userId, getToken())
+      initWebsocket()
+    } else {
+      initWebsocket()
     }
-  })
+    // 发送请求要求导出excel
+    exportAsync(queryParams.value).then(res => {
+      console.log(res)
+      if (res.code == 200) {
+        doingExport.value = true
+      }
+    })
+  }
 }
 
 async function createWebSocket(id, token) {
@@ -408,6 +429,13 @@ function initWebsocket() {
   }
   ws.onmessage = (message) => {
     console.log(message)
+    const data = JSON.parse(message.data)
+    exportProgress.value = data.progress
+    if (data.url != null) {
+      exportSuccess.value = true
+      exportUrl.value = data.url
+      closeWs()
+    }
     heartCheck()
   }
   ws.onerror = (e) => {
@@ -429,8 +457,10 @@ function sentMessage(message) {
 function closeWs() {
   handClose = true
   clearTimer()
-  ws.close()
-  ws = null
+  if (ws != null) {
+    ws.close()
+    ws = null
+  }
 }
 
 function heartCheck() {
@@ -445,6 +475,24 @@ function heartCheck() {
   }, heartTimeOut)
 }
 
+function downloadExcel() {
+  // 下载文件
+  window.open(webHost + exportUrl.value)
+}
+
+function close() {
+  closeWs()
+  doingExport.value = false
+  exportSuccess.value = false
+  exportProgress.value = 0
+}
+
+onUnmounted(() => {
+  if (ws != null) {
+    closeWs()
+  }
+})
+
 getList();
 </script>
 <style>
@@ -452,4 +500,9 @@ getList();
   /* margin-bottom: 15px; */
   width: 100px;
 }
+
+.export-progress {
+  margin-left: 6px;
+  margin-right: 6px;
+}
 </style>