导出列表与下载

src/views/UserPermissions/Export.vue

@@ -1,13 +1,118 @@
 <template>
-  
+  <div class="export-list-page">
+    <!-- 页面标题 -->
+    <h3 class="page-title">导出文件列表</h3>
+    
+    <!-- 表格 -->
+    <el-table
+      :data="exportList"
+      stripe
+      :header-cell-style="{ 'background-color':'#f8f9fa'}"
+      style="width: 100%; margin-bottom: 16px;"
+    >
+      <el-table-column prop="file_name" label="文件名" align="center" header-align="center"/>
+      <el-table-column prop="type" label="导出类型" align="center" header-align="center"/>
+      <el-table-column label="状态" align="center" header-align="center" width="100">
+        <template #default="scope">
+          <el-tag :type="statusTypeMap[scope.row.status].type" size="small">
+            {{ statusTypeMap[scope.row.status].label }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="created_at" label="创建时间" align="center" header-align="center"/>
+      <el-table-column label="操作" align="center" header-align="center" width="120">
+        <template #default="scope">
+          <el-button
+            type="primary"
+            size="mini"
+            :disabled="scope.row.status !== 2"
+            @click="handleDownload(scope.row.download_url)"
+          >
+            下载
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 统计信息 + 关闭按钮 -->
+    <div class="page-footer">
+      <span class="total-count">共 {{ totalCount }} 条导出记录</span>
+      <el-button type="text" @click="handleClose">关闭</el-button>
+    </div>
+  </div>
 </template>
 
-<script>
-export default {
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router';
+import { exportListApi } from '../../api/userPermissions'
 
-}
+// 路由实例
+const router = useRouter();
+
+// 导出列表数据
+const exportList = ref([]);
+const totalCount = ref(7)
+
+// 状态映射配置
+const statusTypeMap = {
+  0: { type: 'danger', label: '执行失败' },
+  1: { type: 'primary', label: '执行中' },
+  2: { type: 'success', label: '执行成功' }
+};
+
+// 组件挂载
+onMounted(() => {
+  exportListAll();
+});
+
+// 获取导出列表 
+const exportListAll = async () => {
+  try {
+    const data = await exportListApi();
+    exportList.value = data.list;
+    totalCount.value = data.total;
+  } catch (error) {
+    exportList.value = [];
+  }
+};
+
+// 下载按钮
+const handleDownload = (downloadUrl) => {
+  if (!downloadUrl) return;
+  window.open(downloadUrl, '_blank');
+};
+
+// 关闭按钮
+const handleClose = () => {
+  router.go(-1);
+};
 </script>
 
-<style>
+<style scoped>
+.export-list-page {
+  padding: 20px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+}
+
+.page-title {
+  margin: 0 0 20px 0;
+  font-size: 16px;
+  color: #141414;
+  font-weight: 600;
+}
 
+.page-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #666;
+  font-size: 14px;
+}
+
+.total-count {
+  color: #888;
+}
 </style>