417 lines
11 KiB
Vue
417 lines
11 KiB
Vue
<template>
|
||
<ArtTableFullScreen>
|
||
<div class="task-management-page" id="table-full-screen">
|
||
<!-- 搜索栏 -->
|
||
<ArtSearchBar
|
||
v-model:filter="searchForm"
|
||
:items="searchFormItems"
|
||
@reset="handleReset"
|
||
@search="handleSearch"
|
||
></ArtSearchBar>
|
||
|
||
<ElCard shadow="never" class="art-table-card">
|
||
<!-- 表格头部 -->
|
||
<ArtTableHeader
|
||
:columnList="columnOptions"
|
||
v-model:columns="columnChecks"
|
||
@refresh="handleRefresh"
|
||
/>
|
||
|
||
<!-- 表格 -->
|
||
<ArtTable
|
||
ref="tableRef"
|
||
row-key="id"
|
||
:loading="loading"
|
||
:data="taskList"
|
||
:currentPage="pagination.page"
|
||
:pageSize="pagination.pageSize"
|
||
:total="pagination.total"
|
||
:marginTop="10"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
>
|
||
<template #default>
|
||
<ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
|
||
</template>
|
||
</ArtTable>
|
||
</ElCard>
|
||
</div>
|
||
</ArtTableFullScreen>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { h } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { CardService, DeviceService } from '@/api/modules'
|
||
import { ElMessage, ElTag } from 'element-plus'
|
||
import type { SearchFormItem } from '@/types'
|
||
import { useCheckedColumns } from '@/composables/useCheckedColumns'
|
||
import { formatDateTime } from '@/utils/business/format'
|
||
import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
|
||
import type { IotCardImportTask, IotCardImportTaskStatus } from '@/types/api/card'
|
||
import type { DeviceImportTask } from '@/types/api/device'
|
||
|
||
defineOptions({ name: 'TaskManagement' })
|
||
|
||
const router = useRouter()
|
||
const loading = ref(false)
|
||
const tableRef = ref()
|
||
|
||
// 任务类型
|
||
type TaskType = 'card' | 'device'
|
||
type ImportTask = IotCardImportTask | DeviceImportTask
|
||
|
||
// 搜索表单初始值
|
||
const initialSearchState = {
|
||
task_type: undefined as TaskType | undefined,
|
||
status: undefined,
|
||
carrier_id: undefined,
|
||
batch_no: '',
|
||
start_time: '',
|
||
end_time: ''
|
||
}
|
||
|
||
// 搜索表单
|
||
const searchForm = reactive({ ...initialSearchState })
|
||
|
||
// 分页
|
||
const pagination = reactive({
|
||
page: 1,
|
||
pageSize: 20,
|
||
total: 0
|
||
})
|
||
|
||
// 搜索表单配置
|
||
const searchFormItems: SearchFormItem[] = [
|
||
{
|
||
label: '任务类型',
|
||
prop: 'task_type',
|
||
type: 'select',
|
||
config: {
|
||
clearable: true,
|
||
placeholder: '全部'
|
||
},
|
||
options: () => [
|
||
{ label: 'ICCID导入', value: 'card' },
|
||
{ label: '设备导入', value: 'device' }
|
||
]
|
||
},
|
||
{
|
||
label: '任务状态',
|
||
prop: 'status',
|
||
type: 'select',
|
||
config: {
|
||
clearable: true,
|
||
placeholder: '全部'
|
||
},
|
||
options: () => [
|
||
{ label: '待处理', value: 1 },
|
||
{ label: '处理中', value: 2 },
|
||
{ label: '已完成', value: 3 },
|
||
{ label: '失败', value: 4 }
|
||
]
|
||
},
|
||
{
|
||
label: '运营商',
|
||
prop: 'carrier_id',
|
||
type: 'select',
|
||
config: {
|
||
clearable: true,
|
||
placeholder: '全部'
|
||
},
|
||
options: () => [
|
||
{ label: '中国移动', value: 1 },
|
||
{ label: '中国联通', value: 2 },
|
||
{ label: '中国电信', value: 3 }
|
||
]
|
||
},
|
||
{
|
||
label: '批次号',
|
||
prop: 'batch_no',
|
||
type: 'input',
|
||
config: {
|
||
clearable: true,
|
||
placeholder: '请输入批次号'
|
||
}
|
||
},
|
||
{
|
||
label: '创建时间',
|
||
prop: 'dateRange',
|
||
type: 'daterange',
|
||
config: {
|
||
type: 'daterange',
|
||
startPlaceholder: '开始时间',
|
||
endPlaceholder: '结束时间',
|
||
valueFormat: 'YYYY-MM-DDTHH:mm:ssZ'
|
||
}
|
||
}
|
||
]
|
||
|
||
// 列配置
|
||
const columnOptions = [
|
||
{ label: '任务编号', prop: 'task_no' },
|
||
{ label: '任务类型', prop: 'task_type' },
|
||
{ label: '批次号', prop: 'batch_no' },
|
||
{ label: '运营商', prop: 'carrier_name' },
|
||
{ label: '文件名', prop: 'file_name' },
|
||
{ label: '任务状态', prop: 'status' },
|
||
{ label: '总数', prop: 'total_count' },
|
||
{ label: '成功数', prop: 'success_count' },
|
||
{ label: '失败数', prop: 'fail_count' },
|
||
{ label: '跳过数', prop: 'skip_count' },
|
||
{ label: '创建时间', prop: 'created_at' },
|
||
{ label: '完成时间', prop: 'completed_at' },
|
||
{ label: '操作', prop: 'operation' }
|
||
]
|
||
|
||
const taskList = ref<ImportTask[]>([])
|
||
|
||
// 获取状态标签类型
|
||
const getStatusType = (status: IotCardImportTaskStatus) => {
|
||
switch (status) {
|
||
case 1:
|
||
return 'info'
|
||
case 2:
|
||
return 'warning'
|
||
case 3:
|
||
return 'success'
|
||
case 4:
|
||
return 'danger'
|
||
default:
|
||
return 'info'
|
||
}
|
||
}
|
||
|
||
// 获取任务类型
|
||
const getTaskType = (row: ImportTask): TaskType => {
|
||
// 判断是否为设备导入任务（设备导入任务有 device_no 字段，卡导入任务有 carrier_name 字段）
|
||
if ('device_no' in row || (row.batch_no && row.batch_no.startsWith('DEV-'))) {
|
||
return 'device'
|
||
}
|
||
return 'card'
|
||
}
|
||
|
||
// 获取任务类型文本
|
||
const getTaskTypeText = (taskType: TaskType) => {
|
||
return taskType === 'device' ? '设备导入' : 'ICCID导入'
|
||
}
|
||
|
||
// 查看详情
|
||
const viewDetail = (row: ImportTask) => {
|
||
router.push({
|
||
path: '/asset-management/task-detail',
|
||
query: {
|
||
id: row.id,
|
||
task_type: getTaskType(row)
|
||
}
|
||
})
|
||
}
|
||
|
||
// 动态列配置
|
||
const { columnChecks, columns } = useCheckedColumns(() => [
|
||
{
|
||
prop: 'task_no',
|
||
label: '任务编号',
|
||
width: 150
|
||
},
|
||
{
|
||
prop: 'task_type',
|
||
label: '任务类型',
|
||
width: 100,
|
||
formatter: (row: ImportTask) => {
|
||
const taskType = getTaskType(row)
|
||
const tagType = taskType === 'device' ? 'warning' : 'primary'
|
||
return h(ElTag, { type: tagType, size: 'small' }, () => getTaskTypeText(taskType))
|
||
}
|
||
},
|
||
{
|
||
prop: 'batch_no',
|
||
label: '批次号',
|
||
width: 120
|
||
},
|
||
{
|
||
prop: 'carrier_name',
|
||
label: '运营商',
|
||
width: 100,
|
||
formatter: (row: ImportTask) => {
|
||
return (row as IotCardImportTask).carrier_name || '-'
|
||
}
|
||
},
|
||
{
|
||
prop: 'file_name',
|
||
label: '文件名',
|
||
minWidth: 200
|
||
},
|
||
{
|
||
prop: 'status',
|
||
label: '任务状态',
|
||
width: 100,
|
||
formatter: (row: ImportTask) => {
|
||
return h(ElTag, { type: getStatusType(row.status) }, () => row.status_text)
|
||
}
|
||
},
|
||
{
|
||
prop: 'total_count',
|
||
label: '总数',
|
||
width: 80
|
||
},
|
||
{
|
||
prop: 'success_count',
|
||
label: '成功数',
|
||
width: 80
|
||
},
|
||
{
|
||
prop: 'fail_count',
|
||
label: '失败数',
|
||
width: 80,
|
||
formatter: (row: ImportTask) => {
|
||
const type = row.fail_count > 0 ? 'danger' : 'success'
|
||
return h(ElTag, { type, size: 'small' }, () => row.fail_count)
|
||
}
|
||
},
|
||
{
|
||
prop: 'skip_count',
|
||
label: '跳过数',
|
||
width: 80
|
||
},
|
||
{
|
||
prop: 'created_at',
|
||
label: '创建时间',
|
||
width: 160,
|
||
formatter: (row: ImportTask) => formatDateTime(row.created_at)
|
||
},
|
||
{
|
||
prop: 'completed_at',
|
||
label: '完成时间',
|
||
width: 160,
|
||
formatter: (row: ImportTask) => (row.completed_at ? formatDateTime(row.completed_at) : '-')
|
||
},
|
||
{
|
||
prop: 'operation',
|
||
label: '操作',
|
||
width: 100,
|
||
fixed: 'right',
|
||
formatter: (row: ImportTask) => {
|
||
return h(ArtButtonTable, {
|
||
type: 'view',
|
||
onClick: () => viewDetail(row)
|
||
})
|
||
}
|
||
}
|
||
])
|
||
|
||
onMounted(() => {
|
||
getTableData()
|
||
})
|
||
|
||
// 获取任务列表
|
||
const getTableData = async () => {
|
||
loading.value = true
|
||
try {
|
||
const params: any = {
|
||
page: pagination.page,
|
||
page_size: pagination.pageSize,
|
||
status: searchForm.status,
|
||
batch_no: searchForm.batch_no || undefined
|
||
}
|
||
|
||
// 处理时间范围
|
||
if (searchForm.dateRange && Array.isArray(searchForm.dateRange)) {
|
||
params.start_time = searchForm.dateRange[0]
|
||
params.end_time = searchForm.dateRange[1]
|
||
}
|
||
|
||
// 清理空值
|
||
Object.keys(params).forEach((key) => {
|
||
if (params[key] === '' || params[key] === undefined) {
|
||
delete params[key]
|
||
}
|
||
})
|
||
|
||
// 根据任务类型获取不同的数据
|
||
if (searchForm.task_type === 'device') {
|
||
// 仅获取设备导入任务
|
||
const res = await DeviceService.getImportTasks(params)
|
||
if (res.code === 0) {
|
||
taskList.value = res.data.list || []
|
||
pagination.total = res.data.total || 0
|
||
}
|
||
} else if (searchForm.task_type === 'card') {
|
||
// 仅获取ICCID导入任务（需要carrier_id参数）
|
||
const cardParams = {
|
||
...params,
|
||
carrier_id: searchForm.carrier_id
|
||
}
|
||
const res = await CardService.getIotCardImportTasks(cardParams)
|
||
if (res.code === 0) {
|
||
taskList.value = res.data.list || []
|
||
pagination.total = res.data.total || 0
|
||
}
|
||
} else {
|
||
// 获取所有类型任务 - 分别调用两个API然后合并结果
|
||
const [cardRes, deviceRes] = await Promise.all([
|
||
CardService.getIotCardImportTasks({
|
||
...params,
|
||
carrier_id: searchForm.carrier_id
|
||
}),
|
||
DeviceService.getImportTasks(params)
|
||
])
|
||
|
||
const cardTasks = cardRes.code === 0 ? cardRes.data.list || [] : []
|
||
const deviceTasks = deviceRes.code === 0 ? deviceRes.data.list || [] : []
|
||
|
||
// 合并并按创建时间排序
|
||
const allTasks = [...cardTasks, ...deviceTasks].sort((a, b) => {
|
||
return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
|
||
})
|
||
|
||
// 前端分页
|
||
const start = (pagination.page - 1) * pagination.pageSize
|
||
const end = start + pagination.pageSize
|
||
taskList.value = allTasks.slice(start, end)
|
||
pagination.total = allTasks.length
|
||
}
|
||
} catch (error) {
|
||
console.error(error)
|
||
ElMessage.error('获取任务列表失败')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 重置搜索
|
||
const handleReset = () => {
|
||
Object.assign(searchForm, { ...initialSearchState })
|
||
pagination.page = 1
|
||
getTableData()
|
||
}
|
||
|
||
// 搜索
|
||
const handleSearch = () => {
|
||
pagination.page = 1
|
||
getTableData()
|
||
}
|
||
|
||
// 刷新表格
|
||
const handleRefresh = () => {
|
||
getTableData()
|
||
}
|
||
|
||
// 处理表格分页变化
|
||
const handleSizeChange = (newPageSize: number) => {
|
||
pagination.pageSize = newPageSize
|
||
getTableData()
|
||
}
|
||
|
||
const handleCurrentChange = (newCurrentPage: number) => {
|
||
pagination.page = newCurrentPage
|
||
getTableData()
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.task-management-page {
|
||
// Task management page styles
|
||
}
|
||
</style>
|