feat: 导出列表 - 下载交互逻辑&刷新按钮

project/src/components/dataBoard/exportOffline.vue

@@ -1,26 +1,35 @@
 <template>
   <div v-loading="loading" class="exportOffline-wrap">
-    <el-table :height="height" :data="tableList" tooltip-effect="dark" style="width: 100%;">
+    <div class="screenBox flex">
+      <div class="flex">
+      </div>
+      <div class="right">
+        <el-button type="primary" size="mini" @click="onClickRefresh">刷新</el-button>
+      </div>
+    </div>
+    <el-table :height="height" :data="tableList" tooltip-effect="dark" style="width:100%;margin-top:10px;">
       <el-table-column label="名称" prop="index_name" min-width="300" align="left" />
       <el-table-column width="20" />
       <el-table-column label="导出链接" min-width="300" align="left">
         <template slot-scope="{ row }">
           <div v-if="row.status == 1" class="c-FFB055">待处理</div>
           <div v-else-if="row.status == 2" class="c-448AFF">导出链接生成中，请稍候</div>
-          <div v-else-if="row.status == 3 && row.file_url" class="c-00B38A pointer" @click="handleDownload(row.file_url)">{{ row.file_url }}</div>
+          <div v-else-if="row.status == 3 && row.file_url" class="c-00B38A">
+            <span class="pointer" @click="onClickDownloadBtn(row.file_url)">{{ row.file_url }}</span>
+          </div>
           <div v-else-if="row.status == -1" class="c-F03F5C">导出失败</div>
           <div v-else> - </div>
         </template>
       </el-table-column>
       <el-table-column label="创建时间" prop="created_at" width="160" align="center" />
-      <el-table-column label="操作人" prop="operator_name" width="200" align="center" />
+      <el-table-column label="创建人" prop="operator_name" width="200" align="center" />
       <el-table-column label="操作" width="100" align="center">
         <template slot-scope="{ row }">
           <el-button
             size="mini"
             :type="(row.status != 3 || !row.file_url) ? 'info' : 'primary'"
             :disabled="row.status != 3 || !row.file_url"
-            @click="handleDownload(row.file_url)"
+            @click="onClickDownloadBtn(row.file_url)"
           >下载</el-button>
         </template>
       </el-table-column>
@@ -43,14 +52,14 @@ export default {
         pages: 0,
         total: 0,
       },
-      // filter: {
-      //   keyword: '',
-      // },
+      filter: {
+        keyword: '',
+      },
       tableList: [],
     }
   },
   created () {
-    this.height = document.documentElement.clientHeight - 150
+    this.height = document.documentElement.clientHeight - 200
     this.handleGetList()
   },
   methods: {
@@ -88,6 +97,19 @@ export default {
       this.pagination.page = currentPage
       this.handleGetList()
     },
+    // 监听点击下载按钮
+    async onClickDownloadBtn(url) {
+      try {
+        await this.$confirm(`确定下载当前报表吗？`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+        this.handleDownload(url)
+      } catch (error) {
+        console.log('error => ', error)
+      }
+    },
     // 执行下载
     handleDownload(url) {
       const a = document.createElement("a");
@@ -96,7 +118,15 @@ export default {
       document.body.appendChild(a);
       a.click();
       document.body.removeChild(a);
-    }
+    },
+    onChangeOperatorId() {
+
+    },
+    // 监听点击“刷新”按钮
+    onClickRefresh() {
+      this.pagination.page = 1
+      this.handleGetList()
+    },
   }
 }
 </script>