导出数据提示

src/views/VoteDetail/VoteDetail.vue

@@ -7,7 +7,7 @@
         <el-button type="danger" @click="fetchVoteData">
             搜索
         </el-button>
-        <el-button type="danger" @click="exportDataFrontend">
+        <el-button type="danger" @click="exportDataFrontend" :loading="buttonLoading">
             导出数据
         </el-button>
 
@@ -41,14 +41,15 @@
 import { useVoteDetailStore } from '@/stores/voteDetail'
 import { ref, onMounted, reactive } from 'vue'
 import { useRoute } from 'vue-router';
-
+import { ElMessage } from 'element-plus'
+const buttonLoading = ref(false)
 const route = useRoute();
 // const voteId = ref(route.params.voteId);
 const voteInfo = reactive({
     // voteId: Number(route.query.voteId),
     voteId: route.query.voteId,
     voteTitle: route.query.voteTitle,
-    articleTitle:route.query.articleTitle,
+    articleTitle: route.query.articleTitle,
 })
 const tableData = ref([])
 const totalCount = ref(0)
@@ -105,41 +106,51 @@ const handleCurrentChange = async (newPage) => {
 }
 
 const exportDataFrontend = async () => {
-    let exportData = ref([])
-    let params = reactive({
-        voteId: voteInfo.voteId,
-        username: condition.username,
-        account: condition.account,
-        area: condition.area,
-        optionContent: condition.optionContent
-    })
-    const res = await useVoteDetailStore().getExportVoteDetail(params)
-    exportData.value = res.data.data.voteList
-    let csvContent = "名字,精网号,地区,投票标题,文章/视频标题,选项,投票时间\n"
-    exportData.value.forEach(item => {
-        const row = [
-            `"${item.username}"`,
-            `"${item.account}"`,
-            `"${item.area}"`,
-            `"${voteInfo.voteTitle}"`,
-            `"${voteInfo.articleTitle}"`,
-            `"${item.optionContents}"`,
-            `"${item.createTime}"`
-        ].join(',')
-        csvContent += row + '\n'
-    })
+    buttonLoading.value = true
+    // ElMessage.info('开始导出，请稍候…')
+    try {
+        let exportData = ref([])
+        let params = reactive({
+            voteId: voteInfo.voteId,
+            username: condition.username,
+            account: condition.account,
+            area: condition.area,
+            optionContent: condition.optionContent
+        })
+        const res = await useVoteDetailStore().getExportVoteDetail(params)
+        exportData.value = res.data.data.voteList
+        let csvContent = "名字,精网号,地区,投票标题,文章/视频标题,选项,投票时间\n"
+        exportData.value.forEach(item => {
+            const row = [
+                `"${item.username}"`,
+                `"${item.account}"`,
+                `"${item.area}"`,
+                `"${voteInfo.voteTitle}"`,
+                `"${voteInfo.articleTitle}"`,
+                `"${item.optionContents}"`,
+                `"${item.createTime}"`
+            ].join(',')
+            csvContent += row + '\n'
+        })
+
+        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
+        const link = document.createElement('a')
+        const url = URL.createObjectURL(blob)
 
-    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
-    const link = document.createElement('a')
-    const url = URL.createObjectURL(blob)
+        link.setAttribute('href', url)
+        link.setAttribute('download', `投票详情_${new Date().toLocaleDateString()}.csv`)
+        link.style.visibility = 'hidden'
 
-    link.setAttribute('href', url)
-    link.setAttribute('download', `投票详情_${new Date().toLocaleDateString()}.csv`)
-    link.style.visibility = 'hidden'
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+        ElMessage.success('已生成文件并下载')
+    } catch (error) {
+        ElMessage.error('导出失败，请重试')
+    } finally {
+        buttonLoading.value = false
+    }
 
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
 }
 </script>
 <style scoped>

src/views/test/test.vue

@@ -18,7 +18,7 @@
         <el-progress
           class="left-progress"
           :percentage="opt.count"
-          :format="() => opt.content + ' √'"
+          :format="() => opt.content "
           :stroke-width="30"
           :text-inside="true"
           :color="colors[opt.id]"
@@ -42,7 +42,7 @@ const totalStatus = () => {
 const options = ref([
   { id: 1, content: '选择1', count: 20 ,status:0},
   { id: 2, content: '选择2', count: 30 ,status:0},
-  { id: 3, content: '选择3', count: 40 ,status:0},
+  { id: 3, content: '选择3', count: 50 ,status:0},
 ])
 
 const colors = ref({})