You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
3.1 KiB
125 lines
3.1 KiB
<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>
|