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>
|
||||||
|
|
||||||
<a-button v-action="'add'" type="primary" @click="$refs.editDialogRef.handleCreate()">
|
<a-button v-action="'add'" type="primary" @click="showImportRecordModal = true">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<UnorderedListOutlined />
|
<UnorderedListOutlined />
|
||||||
</template>
|
</template>
|
||||||
导入记录
|
导入记录
|
||||||
</a-button>
|
</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>
|
||||||
|
|
||||||
<a-button v-action="'add'" type="primary" @click="$refs.editDialogRef.handleCreate()">
|
<a-button v-action="'add'" type="primary" @click="handleShowExportRecords">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<UnorderedListOutlined />
|
<UnorderedListOutlined />
|
||||||
</template>
|
</template>
|
||||||
@ -145,8 +145,29 @@
|
|||||||
<import-modal
|
<import-modal
|
||||||
v-model:visible="showImportModal"
|
v-model:visible="showImportModal"
|
||||||
@download="handleDownloadTemplate"
|
@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>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@ -160,7 +181,10 @@ import { usePagination, useForm } from '@/hooks'
|
|||||||
import { formatUtcDateTime } from '@/utils/util'
|
import { formatUtcDateTime } from '@/utils/util'
|
||||||
import EditDialog from './components/EditDialog.vue'
|
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 { useI18n } from 'vue-i18n'
|
||||||
import storage from '@/utils/storage'
|
import storage from '@/utils/storage'
|
||||||
|
|
||||||
@ -172,6 +196,10 @@ const { t } = useI18n() // 解构出t方法
|
|||||||
// 控制导入弹框显示/隐藏的变量
|
// 控制导入弹框显示/隐藏的变量
|
||||||
const showImportModal = ref(false)
|
const showImportModal = ref(false)
|
||||||
|
|
||||||
|
// 控制导入记录弹框显示/隐藏的变量
|
||||||
|
const showImportRecordModal = ref(false)
|
||||||
|
const showExportRecordModal = ref(false)
|
||||||
|
|
||||||
const columns = ref([
|
const columns = ref([
|
||||||
{ title: '工单号', dataIndex: 'name', key: 'name', fixed: true, width: 280 },
|
{ title: '工单号', dataIndex: 'name', key: 'name', fixed: true, width: 280 },
|
||||||
{ title: '服务对象', dataIndex: 'code', key: 'code', width: 240 },
|
{ title: '服务对象', dataIndex: 'code', key: 'code', width: 240 },
|
||||||
@ -275,7 +303,31 @@ async function onOk() {
|
|||||||
await getMenuList()
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@ -337,4 +594,4 @@ function handleChange() {
|
|||||||
background-color: #e8e8e8; // 灰色横线
|
background-color: #e8e8e8; // 灰色横线
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user