a

src/layout/navBars/breadcrumb/asyncTaskDrawer.vue

@@ -0,0 +1,150 @@
+<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>