Browse Source

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

zhengxy 1 year ago
parent
commit
7178577914
1 changed files with 39 additions and 9 deletions
  1. 39 9
      project/src/components/dataBoard/exportOffline.vue

+ 39 - 9
project/src/components/dataBoard/exportOffline.vue

1
 <template>
1
 <template>
2
   <div v-loading="loading" class="exportOffline-wrap">
2
   <div v-loading="loading" class="exportOffline-wrap">
3
-    <el-table :height="height" :data="tableList" tooltip-effect="dark" style="width: 100%;">
3
+    <div class="screenBox flex">
4
+      <div class="flex">
5
+      </div>
6
+      <div class="right">
7
+        <el-button type="primary" size="mini" @click="onClickRefresh">刷新</el-button>
8
+      </div>
9
+    </div>
10
+    <el-table :height="height" :data="tableList" tooltip-effect="dark" style="width:100%;margin-top:10px;">
4
       <el-table-column label="名称" prop="index_name" min-width="300" align="left" />
11
       <el-table-column label="名称" prop="index_name" min-width="300" align="left" />
5
       <el-table-column width="20" />
12
       <el-table-column width="20" />
6
       <el-table-column label="导出链接" min-width="300" align="left">
13
       <el-table-column label="导出链接" min-width="300" align="left">
7
         <template slot-scope="{ row }">
14
         <template slot-scope="{ row }">
8
           <div v-if="row.status == 1" class="c-FFB055">待处理</div>
15
           <div v-if="row.status == 1" class="c-FFB055">待处理</div>
9
           <div v-else-if="row.status == 2" class="c-448AFF">导出链接生成中,请稍候</div>
16
           <div v-else-if="row.status == 2" class="c-448AFF">导出链接生成中,请稍候</div>
10
-          <div v-else-if="row.status == 3 && row.file_url" class="c-00B38A pointer" @click="handleDownload(row.file_url)">{{ row.file_url }}</div>
17
+          <div v-else-if="row.status == 3 && row.file_url" class="c-00B38A">
18
+            <span class="pointer" @click="onClickDownloadBtn(row.file_url)">{{ row.file_url }}</span>
19
+          </div>
11
           <div v-else-if="row.status == -1" class="c-F03F5C">导出失败</div>
20
           <div v-else-if="row.status == -1" class="c-F03F5C">导出失败</div>
12
           <div v-else> - </div>
21
           <div v-else> - </div>
13
         </template>
22
         </template>
14
       </el-table-column>
23
       </el-table-column>
15
       <el-table-column label="创建时间" prop="created_at" width="160" align="center" />
24
       <el-table-column label="创建时间" prop="created_at" width="160" align="center" />
16
-      <el-table-column label="操作人" prop="operator_name" width="200" align="center" />
25
+      <el-table-column label="创建人" prop="operator_name" width="200" align="center" />
17
       <el-table-column label="操作" width="100" align="center">
26
       <el-table-column label="操作" width="100" align="center">
18
         <template slot-scope="{ row }">
27
         <template slot-scope="{ row }">
19
           <el-button
28
           <el-button
20
             size="mini"
29
             size="mini"
21
             :type="(row.status != 3 || !row.file_url) ? 'info' : 'primary'"
30
             :type="(row.status != 3 || !row.file_url) ? 'info' : 'primary'"
22
             :disabled="row.status != 3 || !row.file_url"
31
             :disabled="row.status != 3 || !row.file_url"
23
-            @click="handleDownload(row.file_url)"
32
+            @click="onClickDownloadBtn(row.file_url)"
24
           >下载</el-button>
33
           >下载</el-button>
25
         </template>
34
         </template>
26
       </el-table-column>
35
       </el-table-column>
43
         pages: 0,
52
         pages: 0,
44
         total: 0,
53
         total: 0,
45
       },
54
       },
46
-      // filter: {
47
-      //   keyword: '',
48
-      // },
55
+      filter: {
56
+        keyword: '',
57
+      },
49
       tableList: [],
58
       tableList: [],
50
     }
59
     }
51
   },
60
   },
52
   created () {
61
   created () {
53
-    this.height = document.documentElement.clientHeight - 150
62
+    this.height = document.documentElement.clientHeight - 200
54
     this.handleGetList()
63
     this.handleGetList()
55
   },
64
   },
56
   methods: {
65
   methods: {
88
       this.pagination.page = currentPage
97
       this.pagination.page = currentPage
89
       this.handleGetList()
98
       this.handleGetList()
90
     },
99
     },
100
+    // 监听点击下载按钮
101
+    async onClickDownloadBtn(url) {
102
+      try {
103
+        await this.$confirm(`确定下载当前报表吗?`, '提示', {
104
+          confirmButtonText: '确定',
105
+          cancelButtonText: '取消',
106
+          type: 'warning'
107
+        })
108
+        this.handleDownload(url)
109
+      } catch (error) {
110
+        console.log('error => ', error)
111
+      }
112
+    },
91
     // 执行下载
113
     // 执行下载
92
     handleDownload(url) {
114
     handleDownload(url) {
93
       const a = document.createElement("a");
115
       const a = document.createElement("a");
96
       document.body.appendChild(a);
118
       document.body.appendChild(a);
97
       a.click();
119
       a.click();
98
       document.body.removeChild(a);
120
       document.body.removeChild(a);
99
-    }
121
+    },
122
+    onChangeOperatorId() {
123
+
124
+    },
125
+    // 监听点击“刷新”按钮
126
+    onClickRefresh() {
127
+      this.pagination.page = 1
128
+      this.handleGetList()
129
+    },
100
   }
130
   }
101
 }
131
 }
102
 </script>
132
 </script>