deepChartBack/src/views/UserPermissions/Export.vue

<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)"
          >
            下载
          </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 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(0)

// 状态映射配置
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 = (exportdata) => {
  if (!exportdata.download_url) return;
  const link = document.createElement('a');
  link.href = exportdata.download_url;
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

// 关闭按钮
const handleClose = () => {
  router.push({
    path: "/userPermissions/market"
  });
};
</script>

<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>