school-developer/src/layout/navBars/breadcrumb/asyncTaskDrawer.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 >
          <template #default="{ row }">
            <el-button v-if="row.type==2" type="text" icon="Download" class="task-name-text" :loading="downloadingId === row.id" @click="handleDownloadFile(row)">{{row.detailType}}</el-button>
            <span v-else class="task-name-text">{{row.detailType}}</span>
          </template>
        </el-table-column>
				<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, downloadTaskFile } from '/@/api/basic/basicasynctask'
import { useMessage } from '/@/hooks/message'

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 message = useMessage()

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
}

const downloadingId = ref<string | number | null>(null)
const handleDownloadFile = async (row: any) => {
	if (!row?.id) return
	downloadingId.value = row.id
	try {
		const response: any = await downloadTaskFile({ id: row.id })
		const blob = (response && response.data instanceof Blob)
			? response.data
			: (response instanceof Blob ? response : new Blob([response]))
		const dateStr = new Date().toISOString().slice(0, 10)
		const baseName = row.detailType ? String(row.detailType).replace(/\s+/g, '_') : '下载文件'
		const fileName = `${baseName}_${dateStr}.xls`
		const elink = document.createElement('a')
		elink.download = fileName
		elink.style.display = 'none'
		elink.href = URL.createObjectURL(blob)
		document.body.appendChild(elink)
		elink.click()
		URL.revokeObjectURL(elink.href)
		document.body.removeChild(elink)
		message.success('下载成功')
	} catch {
		message.error('下载失败')
	} finally {
		downloadingId.value = null
	}
}

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>