二维码下载稍等提醒效果

src/components/DesignForm/tableListPage/index.vue

@@ -33,6 +33,7 @@ import { Picture, InfoFilled, QuestionFilled } from "@element-plus/icons-vue";
 import request from "@/utils/request";
 import html2canvas from 'html2canvas';
 import JSZip from 'jszip';
+import { ElLoading,ElMessage  } from 'element-plus'
 import { softDeletion, retractRunWorkFlow } from "@/api/taskapi/management";
 
 import { formatNumber } from "@/api/DesignForm/utils";
@@ -214,8 +215,10 @@ const resetFields = (formEl: FormInstance | undefined) => {
     });
   }
 };
-const qrCodesPrintDialogFlag = ref(false)
 
+//20250117 李文轩 二维码表格
+const qrCodesPrintDialogFlag = ref(false)
+const tableRefs = reactive({});
 const tablesData = ref({})
 function getDetailQrCodes(val:any) {
   return request({
@@ -244,11 +247,15 @@ function modifyFieldsMap4(fieldsMap: any): Array<{ key: string, value: string }>
     return result;
 }
 
-const tableRefs = reactive({});
+
 
 async function downloadTables() {
+  const loadingInstance = ElLoading.service({
+    fullscreen: true,
+    text: '正在生成图片，请稍候...' // 添加的文字内容，可根据需要修改
+  });
+  //ElMessage('This is a message.')
   const zip = new JSZip();
-  
   for (const [tableKey, element] of Object.entries(tableRefs)) {
     try {
       const canvas = await html2canvas(element);
@@ -277,6 +284,7 @@ async function downloadTables() {
     const link = document.createElement('a');
     link.href = URL.createObjectURL(content);
     link.download = fileName;
+    loadingInstance.close()
     link.click();
   });
 }
@@ -1739,14 +1747,13 @@ const diGuiJilian = (val: any, options: any[]) => {
 }
 
 table {
-            border-collapse: collapse;
-            width: 100%;
-        }
-
-        td, th {
-            border: 1px solid black;
-            padding: 8px;
-        }
+    border-collapse: collapse;
+    width: 100%;
+}
 
+td, th {
+    border: 1px solid black;
+    padding: 8px;
+}
 
 </style>