151 lines
4.2 KiB
Vue
151 lines
4.2 KiB
Vue
<template>
|
||
<el-drawer
|
||
v-model="visible"
|
||
title="上传和下载任务"
|
||
direction="rtl"
|
||
size="50%"
|
||
destroy-on-close
|
||
@open="onOpen"
|
||
>
|
||
<el-tabs v-model="activeTab">
|
||
<el-tab-pane label="上传" name="upload" />
|
||
<el-tab-pane label="下载" name="download" />
|
||
<el-tab-pane label="其他" name="other" />
|
||
</el-tabs>
|
||
|
||
<div class="task-table-wrap">
|
||
<el-table
|
||
v-loading="loading[activeTab]"
|
||
:data="list[activeTab]"
|
||
height="calc(100vh - 240px)"
|
||
row-key="id"
|
||
:empty-text="emptyText"
|
||
size="small"
|
||
stripe
|
||
border
|
||
:cell-style="tableStyle.cellStyle"
|
||
:header-cell-style="tableStyle.headerCellStyle"
|
||
>
|
||
<el-table-column label="所属模块" prop="moduleName" width="120" show-overflow-tooltip />
|
||
<el-table-column label="任务类型" prop="typeLabel" width="100" show-overflow-tooltip />
|
||
<el-table-column label="任务名称" prop="detailType" min-width="150" show-overflow-tooltip />
|
||
<el-table-column label="任务状态" align="center" show-overflow-tooltip>
|
||
<template #default="{ row }">
|
||
<el-tag>{{ row.status }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="时间" width="150" show-overflow-tooltip>
|
||
<template #default="{ row }">
|
||
{{ formatTime(row) }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="task-pagination">
|
||
<el-pagination
|
||
v-model:current-page="pagination[activeTab].current"
|
||
v-model:page-size="pagination[activeTab].size"
|
||
:page-sizes="[10, 20, 50]"
|
||
:total="pagination[activeTab].total"
|
||
layout="prev, pager, next, sizes"
|
||
small
|
||
@current-change="onPageChange"
|
||
@size-change="onSizeChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</el-drawer>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, watch, computed } from 'vue'
|
||
import { fetchList } from '/@/api/basic/basicasynctask'
|
||
|
||
type TaskTab = 'upload' | 'download' | 'other'
|
||
|
||
const visible = ref(false)
|
||
const activeTab = ref<TaskTab>('upload')
|
||
const loading = reactive<Record<TaskTab, boolean>>({ upload: false, download: false, other: false })
|
||
const list = reactive<Record<TaskTab, any[]>>({ upload: [], download: [], other: [] })
|
||
const pagination = reactive<Record<TaskTab, { current: number; size: number; total: number }>>({
|
||
upload: { current: 1, size: 10, total: 0 },
|
||
download: { current: 1, size: 10, total: 0 },
|
||
other: { current: 1, size: 10, total: 0 },
|
||
})
|
||
|
||
/** Tab 对应接口 type：1 上传 2 下载 3 其他 */
|
||
const TAB_TYPE_MAP: Record<TaskTab, number> = { upload: 1, download: 2, other: 3 }
|
||
const EMPTY_TEXT_MAP: Record<TaskTab, string> = { upload: '暂无上传任务', download: '暂无下载任务', other: '暂无其他任务' }
|
||
|
||
// 表格样式，参考主列表页通用样式
|
||
const tableStyle = {
|
||
cellStyle: { textAlign: 'center' },
|
||
headerCellStyle: {
|
||
textAlign: 'center',
|
||
background: 'var(--el-table-row-hover-bg-color)',
|
||
color: 'var(--el-text-color-primary)',
|
||
},
|
||
}
|
||
|
||
const emptyText = computed(() => EMPTY_TEXT_MAP[activeTab.value])
|
||
|
||
const loadList = async () => {
|
||
const type = activeTab.value
|
||
const p = pagination[type]
|
||
loading[type] = true
|
||
try {
|
||
const res = await fetchList({ type: TAB_TYPE_MAP[type], current: p.current, size: p.size })
|
||
const data = res?.data ?? res
|
||
const records = data?.records ?? []
|
||
const total = data?.total ?? 0
|
||
list[type] = Array.isArray(records) ? records : []
|
||
p.total = Number(total) || 0
|
||
} catch {
|
||
list[type] = []
|
||
} finally {
|
||
loading[type] = false
|
||
}
|
||
}
|
||
|
||
const onPageChange = (page: number) => {
|
||
pagination[activeTab.value].current = page
|
||
loadList()
|
||
}
|
||
|
||
const onSizeChange = (size: number) => {
|
||
pagination[activeTab.value].size = size
|
||
pagination[activeTab.value].current = 1
|
||
loadList()
|
||
}
|
||
|
||
const onOpen = () => {
|
||
loadList()
|
||
}
|
||
|
||
// 切换 Tab 时加载对应列表
|
||
watch(activeTab, () => {
|
||
if (visible.value) loadList()
|
||
})
|
||
|
||
const formatTime = (item: any) => {
|
||
const t = item?.createTime ?? item?.create_time ?? item?.updateTime ?? item?.update_time ?? ''
|
||
return t ? (t.slice(0, 16).replace('T', ' ')) : '-'
|
||
}
|
||
|
||
const open = () => {
|
||
visible.value = true
|
||
}
|
||
|
||
defineExpose({ open })
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.task-table-wrap {
|
||
padding: 0 4px;
|
||
}
|
||
.task-pagination {
|
||
padding: 12px 0;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
</style>
|