generated from Leo_Ding/web-template
导入导出记录组件
This commit is contained in:
qiuyuan
parent
1d4b75e6f7
commit
f3a17474c7
296
src/components/ExportRecord/index.vue
Normal file
296
src/components/ExportRecord/index.vue
Normal file
@ -0,0 +1,296 @@
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:open="visible"
|
||||
:title="title || '导出记录'"
|
||||
width="1200px"
|
||||
:footer="null"
|
||||
:maskClosable="false"
|
||||
@cancel="handleCancel"
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<div class="import-records-modal">
|
||||
<!-- 表格 -->
|
||||
<a-table
|
||||
:dataSource="tableData"
|
||||
:columns="columns"
|
||||
:pagination="pagination"
|
||||
:loading="loading"
|
||||
:scroll="{ x: 1200 }"
|
||||
rowKey="taskId"
|
||||
>
|
||||
<!-- 状态列渲染 -->
|
||||
<template #status="{ record }">
|
||||
<a-tag :color="getStatusColor(record.status)">
|
||||
{{ getStatusText(record.status) }}
|
||||
</a-tag>
|
||||
</template>
|
||||
|
||||
<!-- 进度列渲染 -->
|
||||
<template #progress="{ record }">
|
||||
<a-progress
|
||||
:percent="record.progress"
|
||||
size="small"
|
||||
:status="getProgressStatus(record.status)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 操作列渲染 -->
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="viewDetails(record)" :disabled="record.status !== 'completed'">
|
||||
查看详情
|
||||
</a-button>
|
||||
<a-button type="primary" size="small" @click="downloadResult(record)" :disabled="record.status !== 'completed'">
|
||||
下载文件
|
||||
</a-button>
|
||||
<a-button type="link" size="small" @click="retryExport(record)" :disabled="record.status !== 'failed'">
|
||||
重新导出
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
// 弹框标题
|
||||
title: {
|
||||
type: String,
|
||||
default: '导出记录'
|
||||
},
|
||||
// 是否显示弹框
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 数据获取函数
|
||||
fetchData: {
|
||||
type: Function,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
// 定义emit
|
||||
const emit = defineEmits(['update:modelValue', 'close', 'view-details', 'download-result', 'retry-export']);
|
||||
|
||||
// 弹框显示状态
|
||||
const visible = ref(false);
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([]);
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 分页配置
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
onChange: (page, pageSize) => {
|
||||
pagination.current = page;
|
||||
pagination.pageSize = pageSize;
|
||||
fetchTableData();
|
||||
},
|
||||
onShowSizeChange: (current, size) => {
|
||||
pagination.current = 1;
|
||||
pagination.pageSize = size;
|
||||
fetchTableData();
|
||||
}
|
||||
});
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{
|
||||
title: '任务ID',
|
||||
dataIndex: 'taskId',
|
||||
key: 'taskId',
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '任务类型',
|
||||
dataIndex: 'alias',
|
||||
key: 'alias',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
slots: { customRender: 'status' },
|
||||
},
|
||||
{
|
||||
title: '进度',
|
||||
dataIndex: 'progress',
|
||||
key: 'progress',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
slots: { customRender: 'progress' },
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '操作人',
|
||||
dataIndex: 'createByName',
|
||||
key: 'createByName',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 280,
|
||||
slots: { customRender: 'action' },
|
||||
},
|
||||
];
|
||||
|
||||
// 监听父组件传入的modelValue
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
visible.value = val;
|
||||
if (val) {
|
||||
// 弹框打开时获取数据
|
||||
fetchTableData();
|
||||
}
|
||||
},
|
||||
{ immediate: true } // 立即执行，确保初始值正确
|
||||
);
|
||||
|
||||
// 获取表格数据
|
||||
const fetchTableData = async () => {
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
// 调用父组件传入的数据获取函数
|
||||
const result = await props.fetchData({
|
||||
page: pagination.current,
|
||||
pageSize: pagination.pageSize
|
||||
});
|
||||
|
||||
// 假设返回的数据格式为 { list: [...], total: 100 }
|
||||
tableData.value = Array.isArray(result.list) ? result.list : result;
|
||||
pagination.total = result.total || tableData.value.length;
|
||||
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error);
|
||||
message.error(error.message || '获取导出记录失败');
|
||||
tableData.value = [];
|
||||
pagination.total = 0;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status) => {
|
||||
switch (status) {
|
||||
case 'completed': return '已完成';
|
||||
case 'failed': return '失败';
|
||||
case 'processing': return '处理中';
|
||||
case 'pending': return '待处理';
|
||||
default: return status;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取状态颜色
|
||||
const getStatusColor = (status) => {
|
||||
switch (status) {
|
||||
case 'completed': return 'green';
|
||||
case 'failed': return 'red';
|
||||
case 'processing': return 'blue';
|
||||
case 'pending': return '#ffcc00';
|
||||
default: return 'default';
|
||||
}
|
||||
};
|
||||
|
||||
// 获取进度条状态
|
||||
const getProgressStatus = (status) => {
|
||||
if (status === 'completed') return 'success';
|
||||
if (status === 'failed') return 'exception';
|
||||
if (status === 'processing') return 'active';
|
||||
return 'normal';
|
||||
};
|
||||
|
||||
// 关闭弹框
|
||||
const handleCancel = () => {
|
||||
visible.value = false;
|
||||
emit('update:modelValue', false);
|
||||
emit('close');
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
const viewDetails = (record) => {
|
||||
emit('view-details', record);
|
||||
};
|
||||
|
||||
// 下载文件
|
||||
const downloadResult = (record) => {
|
||||
emit('download-result', record);
|
||||
};
|
||||
|
||||
// 重新导出
|
||||
const retryExport = (record) => {
|
||||
emit('retry-export', record);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.import-records-modal {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
/* 针对表格的样式优化 */
|
||||
:deep(.ant-table) {
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
:deep(.ant-table-thead > tr > th) {
|
||||
text-align: center;
|
||||
background-color: #f9f9f9;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.ant-table-tbody > tr > td) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 操作按钮样式 */
|
||||
:deep(.ant-btn-link) {
|
||||
height: auto;
|
||||
padding: 2px 4px;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
:deep(.ant-btn-link:hover) {
|
||||
color: #40a9ff;
|
||||
}
|
||||
|
||||
:deep(.ant-btn-primary) {
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
310
src/components/ImportRecord/index.vue
Normal file
310
src/components/ImportRecord/index.vue
Normal file
@ -0,0 +1,310 @@
|
||||
<!-- ImportRecordsModal.vue -->
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:open="visible"
|
||||
:title="title || '导入记录'"
|
||||
width="1200px"
|
||||
:footer="null"
|
||||
:maskClosable="false"
|
||||
@cancel="handleCancel"
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<div class="import-records-modal">
|
||||
<!-- 表格 -->
|
||||
<a-table
|
||||
:dataSource="tableData"
|
||||
:columns="columns"
|
||||
:pagination="pagination"
|
||||
:loading="loading"
|
||||
:scroll="{ x: 1200 }"
|
||||
rowKey="taskId"
|
||||
>
|
||||
<!-- 状态列渲染 -->
|
||||
<template #status="{ record }">
|
||||
<a-tag :color="getStatusColor(record.status)">
|
||||
{{ getStatusText(record.status) }}
|
||||
</a-tag>
|
||||
</template>
|
||||
|
||||
<!-- 进度列渲染 -->
|
||||
<template #progress="{ record }">
|
||||
<a-progress
|
||||
:percent="record.progress"
|
||||
size="small"
|
||||
:status="getProgressStatus(record.status)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 操作列渲染 -->
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="viewDetails(record)">
|
||||
查看异常数据
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
// 弹框标题
|
||||
title: {
|
||||
type: String,
|
||||
default: '导入记录'
|
||||
},
|
||||
// 是否显示弹框
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 数据获取函数
|
||||
fetchData: {
|
||||
type: Function,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
// 定义emit
|
||||
const emit = defineEmits(['update:modelValue', 'close', 'view-details', 'download-result', 'retry-import']);
|
||||
|
||||
// 弹框显示状态
|
||||
const visible = ref(false);
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([]);
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 分页配置
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
onChange: (page, pageSize) => {
|
||||
pagination.current = page;
|
||||
pagination.pageSize = pageSize;
|
||||
fetchTableData();
|
||||
},
|
||||
onShowSizeChange: (current, size) => {
|
||||
pagination.current = 1;
|
||||
pagination.pageSize = size;
|
||||
fetchTableData();
|
||||
}
|
||||
});
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{
|
||||
title: '批次号',
|
||||
dataIndex: 'taskId',
|
||||
key: 'taskId',
|
||||
align: 'center',
|
||||
fixed: 'left',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
slots: { customRender: 'status' },
|
||||
},
|
||||
{
|
||||
title: '导入任务类型',
|
||||
dataIndex: 'alias',
|
||||
key: 'alias',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '总数量',
|
||||
dataIndex: 'totalCount',
|
||||
key: 'totalCount',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '成功数量',
|
||||
dataIndex: 'successCount',
|
||||
key: 'successCount',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '异常数量',
|
||||
dataIndex: 'failCount',
|
||||
key: 'failCount',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '上传时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '操作人',
|
||||
dataIndex: 'createByName',
|
||||
key: 'createByName',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '进度',
|
||||
dataIndex: 'progress',
|
||||
key: 'progress',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
slots: { customRender: 'progress' },
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width: 200,
|
||||
slots: { customRender: 'action' },
|
||||
},
|
||||
];
|
||||
|
||||
// 监听父组件传入的modelValue
|
||||
watch(() => props.modelValue, (val) => {
|
||||
visible.value = val;
|
||||
if (val) {
|
||||
// 弹框打开时获取数据
|
||||
fetchTableData();
|
||||
}
|
||||
});
|
||||
|
||||
// 获取表格数据
|
||||
const fetchTableData = async () => {
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
// 调用父组件传入的数据获取函数
|
||||
const result = await props.fetchData({
|
||||
page: pagination.current,
|
||||
pageSize: pagination.pageSize
|
||||
});
|
||||
|
||||
// 假设返回的数据格式为 { list: [...], total: 100 }
|
||||
tableData.value = Array.isArray(result.list) ? result.list : result;
|
||||
pagination.total = result.total || tableData.value.length;
|
||||
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error);
|
||||
message.error(error.message || '获取导入记录失败');
|
||||
tableData.value = [];
|
||||
pagination.total = 0;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status) => {
|
||||
switch (status) {
|
||||
case 'completed': return '已完成';
|
||||
case 'failed': return '失败';
|
||||
case 'processing': return '处理中';
|
||||
case 'pending': return '待处理';
|
||||
default: return status;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取状态颜色
|
||||
const getStatusColor = (status) => {
|
||||
switch (status) {
|
||||
case 'completed': return 'green';
|
||||
case 'failed': return 'red';
|
||||
case 'processing': return 'blue';
|
||||
case 'pending': return '#ffcc00';
|
||||
default: return 'default';
|
||||
}
|
||||
};
|
||||
|
||||
// 获取进度条状态
|
||||
const getProgressStatus = (status) => {
|
||||
if (status === 'completed') return 'success';
|
||||
if (status === 'failed') return 'exception';
|
||||
if (status === 'processing') return 'active';
|
||||
return 'normal';
|
||||
};
|
||||
|
||||
// 关闭弹框
|
||||
const handleCancel = () => {
|
||||
visible.value = false;
|
||||
emit('update:modelValue', false);
|
||||
emit('close');
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
const viewDetails = (record) => {
|
||||
emit('view-details', record);
|
||||
};
|
||||
|
||||
// 下载结果
|
||||
const downloadResult = (record) => {
|
||||
emit('download-result', record);
|
||||
};
|
||||
|
||||
// 重新导入
|
||||
const retryImport = (record) => {
|
||||
emit('retry-import', record);
|
||||
};
|
||||
|
||||
// 组件卸载时清理数据
|
||||
onMounted(() => {
|
||||
// 初始化时不需要获取数据，等待父组件打开弹框
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.import-records-modal {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
/* 针对表格的样式优化 */
|
||||
:deep(.ant-table) {
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
:deep(.ant-table-thead > tr > th) {
|
||||
text-align: center;
|
||||
background-color: #f9f9f9;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.ant-table-tbody > tr > td) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 操作按钮样式 */
|
||||
:deep(.ant-btn-link) {
|
||||
height: auto;
|
||||
padding: 2px 4px;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
:deep(.ant-btn-link:hover) {
|
||||
color: #40a9ff;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@ -66,18 +66,18 @@
|
||||
导入
|
||||
</a-button>
|
||||
|
||||
<a-button v-action="'add'" type="primary" @click="$refs.editDialogRef.handleCreate()">
|
||||
<a-button v-action="'add'" type="primary" @click="showImportRecordModal = true">
|
||||
<template #icon>
|
||||
<UnorderedListOutlined />
|
||||
</template>
|
||||
导入记录
|
||||
</a-button>
|
||||
|
||||
<a-button v-action="'add'" type="primary" @click="$refs.editDialogRef.handleCreate()">
|
||||
<a-button v-action="'add'" type="primary" @click="handleExport">
|
||||
导出
|
||||
</a-button>
|
||||
|
||||
<a-button v-action="'add'" type="primary" @click="$refs.editDialogRef.handleCreate()">
|
||||
<a-button v-action="'add'" type="primary" @click="handleShowExportRecords">
|
||||
<template #icon>
|
||||
<UnorderedListOutlined />
|
||||
</template>
|
||||
@ -145,7 +145,28 @@
|
||||
<import-modal
|
||||
v-model:visible="showImportModal"
|
||||
@download="handleDownloadTemplate"
|
||||
@upload="handleFileUpload"
|
||||
@upload="handleFileUpload"/>
|
||||
|
||||
<!-- 导入记录弹框组件 -->
|
||||
<ImportRecordsModal
|
||||
v-model:visible="showImportRecordModal"
|
||||
title="导入记录"
|
||||
:fetchData="fetchImportRecords"
|
||||
@close="handleImportRecordClose"
|
||||
@view-details="handleViewImportDetails"
|
||||
@download-result="handleDownloadImportResult"
|
||||
@retry-import="handleRetryImport"
|
||||
/>
|
||||
|
||||
<!-- 导出记录弹框组件 -->
|
||||
<ExportRecordsModal
|
||||
v-model="showExportRecordModal"
|
||||
title="导出记录"
|
||||
:fetchData="fetchExportRecords"
|
||||
@close="handleExportRecordClose"
|
||||
@view-details="handleViewExportDetails"
|
||||
@download-result="handleDownloadExportResult"
|
||||
@retry-export="handleRetryExport"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@ -160,7 +181,10 @@ import { usePagination, useForm } from '@/hooks'
|
||||
import { formatUtcDateTime } from '@/utils/util'
|
||||
import EditDialog from './components/EditDialog.vue'
|
||||
// 引入导入组件
|
||||
import ImportModal from '@/components/Import/index.vue' // 假设你的导入组件路径是这个
|
||||
import ImportModal from '@/components/Import/index.vue'
|
||||
// 引入导入记录组件
|
||||
import ImportRecordsModal from '@/components/ImportRecord/index.vue'
|
||||
import ExportRecordsModal from '@/components/ExportRecord/index.vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import storage from '@/utils/storage'
|
||||
|
||||
@ -172,6 +196,10 @@ const { t } = useI18n() // 解构出t方法
|
||||
// 控制导入弹框显示/隐藏的变量
|
||||
const showImportModal = ref(false)
|
||||
|
||||
// 控制导入记录弹框显示/隐藏的变量
|
||||
const showImportRecordModal = ref(false)
|
||||
const showExportRecordModal = ref(false)
|
||||
|
||||
const columns = ref([
|
||||
{ title: '工单号', dataIndex: 'name', key: 'name', fixed: true, width: 280 },
|
||||
{ title: '服务对象', dataIndex: 'code', key: 'code', width: 240 },
|
||||
@ -275,7 +303,31 @@ async function onOk() {
|
||||
await getMenuList()
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出数据
|
||||
*/
|
||||
function handleExport() {
|
||||
Modal.confirm({
|
||||
title: '确认导出',
|
||||
content: '是否导出当前查询条件下的所有服务站点数据？',
|
||||
onOk: () => {
|
||||
// 调用导出API
|
||||
apis.exportServiceSite(searchFormData.value).then(() => {
|
||||
message.success('导出任务已提交，请在导出记录中查看进度');
|
||||
showExportRecordModal.value = true;
|
||||
}).catch(() => {
|
||||
message.error('导出任务提交失败');
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示导出记录
|
||||
*/
|
||||
function handleShowExportRecords() {
|
||||
showExportRecordModal.value = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理下载模板
|
||||
@ -323,6 +375,211 @@ function handleChange() {
|
||||
// 可以添加选择框变化后的逻辑
|
||||
}
|
||||
|
||||
// 获取导入记录数据
|
||||
const fetchImportRecords = async (params) => {
|
||||
// 模拟API调用 - 实际项目中需要替换为真实的API调用
|
||||
await new Promise(resolve => setTimeout(resolve, 800));
|
||||
|
||||
// 模拟数据
|
||||
const mockData = [
|
||||
{
|
||||
taskId: 'BATCH_20231201_001',
|
||||
status: 'completed',
|
||||
alias: '服务站点数据导入',
|
||||
totalCount: 1500,
|
||||
successCount: 1480,
|
||||
failCount: 20,
|
||||
createTime: '2023-12-01 14:30:25',
|
||||
createByName: '张三',
|
||||
progress: 100
|
||||
},
|
||||
{
|
||||
taskId: 'BATCH_20231201_002',
|
||||
status: 'failed',
|
||||
alias: '服务站点信息导入',
|
||||
totalCount: 800,
|
||||
successCount: 750,
|
||||
failCount: 50,
|
||||
createTime: '2023-12-01 15:45:10',
|
||||
createByName: '李四',
|
||||
progress: 93.75
|
||||
},
|
||||
{
|
||||
taskId: 'BATCH_20231201_003',
|
||||
status: 'processing',
|
||||
alias: '服务站点数据导入',
|
||||
totalCount: 3200,
|
||||
successCount: 1200,
|
||||
failCount: 0,
|
||||
createTime: '2023-12-01 16:20:30',
|
||||
createByName: '王五',
|
||||
progress: 37.5
|
||||
},
|
||||
{
|
||||
taskId: 'BATCH_20231201_004',
|
||||
status: 'pending',
|
||||
alias: '服务站点批量导入',
|
||||
totalCount: 500,
|
||||
successCount: 0,
|
||||
failCount: 0,
|
||||
createTime: '2023-12-01 17:10:15',
|
||||
createByName: '赵六',
|
||||
progress: 0
|
||||
},
|
||||
{
|
||||
taskId: 'BATCH_20231201_005',
|
||||
status: 'completed',
|
||||
alias: '服务站点信息导入',
|
||||
totalCount: 2100,
|
||||
successCount: 2095,
|
||||
failCount: 5,
|
||||
createTime: '2023-12-01 18:05:40',
|
||||
createByName: '钱七',
|
||||
progress: 100
|
||||
}
|
||||
];
|
||||
|
||||
// 根据分页参数返回数据
|
||||
const start = (params.page - 1) * params.pageSize;
|
||||
const end = start + params.pageSize;
|
||||
const list = mockData.slice(start, end);
|
||||
|
||||
return {
|
||||
list,
|
||||
total: mockData.length
|
||||
};
|
||||
};
|
||||
|
||||
// 获取导出记录数据
|
||||
const fetchExportRecords = async (params) => {
|
||||
// 模拟API调用 - 实际项目中需要替换为真实的API调用
|
||||
await new Promise(resolve => setTimeout(resolve, 800));
|
||||
|
||||
// 模拟数据
|
||||
const mockData = [
|
||||
{
|
||||
taskId: 'EXPORT_20231201_001',
|
||||
status: 'completed',
|
||||
alias: '服务站点数据导出',
|
||||
totalCount: 1500,
|
||||
successCount: 1500,
|
||||
failCount: 0,
|
||||
createTime: '2023-12-01 14:30:25',
|
||||
createByName: '张三',
|
||||
progress: 100
|
||||
},
|
||||
{
|
||||
taskId: 'EXPORT_20231201_002',
|
||||
status: 'completed',
|
||||
alias: '服务站点信息导出',
|
||||
totalCount: 800,
|
||||
successCount: 800,
|
||||
failCount: 0,
|
||||
createTime: '2023-12-01 15:45:10',
|
||||
createByName: '李四',
|
||||
progress: 100
|
||||
},
|
||||
{
|
||||
taskId: 'EXPORT_20231201_003',
|
||||
status: 'processing',
|
||||
alias: '服务站点数据导出',
|
||||
totalCount: 3200,
|
||||
successCount: 2500,
|
||||
failCount: 0,
|
||||
createTime: '2023-12-01 16:20:30',
|
||||
createByName: '王五',
|
||||
progress: 78.125
|
||||
},
|
||||
{
|
||||
taskId: 'EXPORT_20231201_004',
|
||||
status: 'pending',
|
||||
alias: '服务站点批量导出',
|
||||
totalCount: 500,
|
||||
successCount: 0,
|
||||
failCount: 0,
|
||||
createTime: '2023-12-01 17:10:15',
|
||||
createByName: '赵六',
|
||||
progress: 0
|
||||
},
|
||||
{
|
||||
taskId: 'EXPORT_20231201_005',
|
||||
status: 'completed',
|
||||
alias: '服务站点信息导出',
|
||||
totalCount: 2100,
|
||||
successCount: 2100,
|
||||
failCount: 0,
|
||||
createTime: '2023-12-01 18:05:40',
|
||||
createByName: '钱七',
|
||||
progress: 100
|
||||
}
|
||||
];
|
||||
|
||||
// 根据分页参数返回数据
|
||||
const start = (params.page - 1) * params.pageSize;
|
||||
const end = start + params.pageSize;
|
||||
const list = mockData.slice(start, end);
|
||||
|
||||
return {
|
||||
list,
|
||||
total: mockData.length
|
||||
};
|
||||
};
|
||||
|
||||
// 关闭导入记录弹框
|
||||
const handleImportRecordClose = () => {
|
||||
console.log('导入记录弹框已关闭');
|
||||
};
|
||||
|
||||
// 查看导入详情
|
||||
const handleViewImportDetails = (record) => {
|
||||
message.info(`查看批次 ${record.taskId} 的详情`);
|
||||
console.log('查看详情:', record);
|
||||
};
|
||||
|
||||
// 下载导入结果
|
||||
const handleDownloadImportResult = (record) => {
|
||||
message.success(`正在下载批次 ${record.taskId} 的结果文件`);
|
||||
console.log('下载结果:', record);
|
||||
};
|
||||
|
||||
// 重新导入
|
||||
const handleRetryImport = (record) => {
|
||||
message.info(`正在重新导入批次 ${record.taskId}`);
|
||||
console.log('重新导入:', record);
|
||||
};
|
||||
|
||||
// 关闭导出记录弹框
|
||||
const handleExportRecordClose = () => {
|
||||
console.log('导出记录弹框已关闭');
|
||||
};
|
||||
|
||||
// 查看导出详情
|
||||
const handleViewExportDetails = (record) => {
|
||||
message.info(`查看导出批次 ${record.taskId} 的详情`);
|
||||
console.log('查看导出详情:', record);
|
||||
};
|
||||
|
||||
// 下载导出结果
|
||||
const handleDownloadExportResult = (record) => {
|
||||
message.success(`正在下载导出批次 ${record.taskId} 的结果文件`);
|
||||
// 调用实际的下载API
|
||||
apis.downloadExportResult(record.taskId).then(() => {
|
||||
message.success('文件下载成功');
|
||||
}).catch(() => {
|
||||
message.error('文件下载失败');
|
||||
});
|
||||
};
|
||||
|
||||
// 重新导出
|
||||
const handleRetryExport = (record) => {
|
||||
message.info(`正在重新导出批次 ${record.taskId}`);
|
||||
// 调用重新导出的API
|
||||
apis.retryExport(record.taskId).then(() => {
|
||||
message.success('重新导出任务已提交');
|
||||
}).catch(() => {
|
||||
message.error('重新导出失败');
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user