generated from Leo_Ding/web-template
Compare commits
No commits in common. "b3377a317abd09b0db840288b321e44666621a3d" and "664cde29f7d87204ad2be6bc1ef8a0cc08739172" have entirely different histories.
b3377a317a
...
664cde29f7
@ -1,296 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,310 +0,0 @@
|
|||||||
<!-- 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="showImportRecordModal = true">
|
<a-button v-action="'add'" type="primary" @click="$refs.editDialogRef.handleCreate()">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<UnorderedListOutlined />
|
<UnorderedListOutlined />
|
||||||
</template>
|
</template>
|
||||||
导入记录
|
导入记录
|
||||||
</a-button>
|
</a-button>
|
||||||
|
|
||||||
<a-button v-action="'add'" type="primary" @click="handleExport">
|
<a-button v-action="'add'" type="primary" @click="$refs.editDialogRef.handleCreate()">
|
||||||
导出
|
导出
|
||||||
</a-button>
|
</a-button>
|
||||||
|
|
||||||
<a-button v-action="'add'" type="primary" @click="handleShowExportRecords">
|
<a-button v-action="'add'" type="primary" @click="$refs.editDialogRef.handleCreate()">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<UnorderedListOutlined />
|
<UnorderedListOutlined />
|
||||||
</template>
|
</template>
|
||||||
@ -145,29 +145,8 @@
|
|||||||
<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>
|
||||||
@ -181,10 +160,7 @@ 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'
|
||||||
|
|
||||||
@ -196,10 +172,6 @@ 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 },
|
||||||
@ -303,31 +275,7 @@ 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 处理下载模板
|
* 处理下载模板
|
||||||
@ -375,211 +323,6 @@ 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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user