src/api/platformExportTasks.test.ts

@@ -0,0 +1,41 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { http } from '@/api/http'
+import {
+  createPlatformExportTask,
+  downloadPlatformExportTask,
+  listPlatformExportTasks,
+  retryPlatformExportTask,
+} from './platformExportTasks'
+
+vi.mock('@/api/http', async () => {
+  const actual = await vi.importActual<typeof import('@/api/http')>('@/api/http')
+  return { ...actual, http: { get: vi.fn(), post: vi.fn() } }
+})
+
+describe('platformExportTasks', () => {
+  beforeEach(() => vi.clearAllMocks())
+
+  it('creates a backend export task with the filter snapshot', async () => {
+    const task = { id: '9', status: 'PENDING', exportType: 'CUSTOMER_LIST' }
+    vi.mocked(http.post).mockResolvedValue({ code: '200', message: 'success', data: task })
+    const payload = { exportType: 'CUSTOMER_LIST', format: 'XLSX' as const, taskName: '客户列表', parameters: { status: 'ACTIVE' } }
+
+    await expect(createPlatformExportTask(payload)).resolves.toEqual(task)
+    expect(http.post).toHaveBeenCalledWith('/platform/v1/files/export-tasks', payload)
+  })
+
+  it('lists, downloads, and retries export tasks through File service', async () => {
+    const page = { records: [], page: '1', size: '20', total: '0', pages: '0' }
+    const blob = new Blob(['xlsx'])
+    vi.mocked(http.get).mockResolvedValueOnce({ code: '200', message: 'success', data: page }).mockResolvedValueOnce(blob)
+    vi.mocked(http.post).mockResolvedValue({ code: '200', message: 'success', data: { id: '9', status: 'PENDING' } })
+
+    await expect(listPlatformExportTasks({ page: 1, size: 20, status: 'FAILED' })).resolves.toEqual({ records: [], page: 1, size: 20, total: 0, pages: 0 })
+    await expect(downloadPlatformExportTask('9')).resolves.toBe(blob)
+    await expect(retryPlatformExportTask('9')).resolves.toMatchObject({ id: '9', status: 'PENDING' })
+
+    expect(http.get).toHaveBeenNthCalledWith(1, '/platform/v1/files/export-tasks', { params: { page: 1, size: 20, status: 'FAILED' } })
+    expect(http.get).toHaveBeenNthCalledWith(2, '/platform/v1/files/export-tasks/9/download', { responseType: 'blob' })
+    expect(http.post).toHaveBeenCalledWith('/platform/v1/files/export-tasks/9/retry', {})
+  })
+})

src/api/platformExportTasks.ts

@@ -0,0 +1,82 @@
+import { http, unwrapApiResponse, type ApiEnvelope } from '@/api/http'
+
+export type ExportTaskStatus = 'PENDING' | 'RUNNING' | 'SUCCEEDED' | 'FAILED' | 'EXPIRED'
+export type ExportTaskType = 'CUSTOMER_LIST' | string
+
+export interface PlatformExportTask {
+  id: string
+  taskNo: string
+  exportType: ExportTaskType
+  format: 'XLSX' | string
+  taskName: string
+  status: ExportTaskStatus
+  totalRows: number | null
+  processedRows: number
+  fileName: string | null
+  contentType: string | null
+  sizeBytes: number | null
+  failureMessage: string | null
+  requestedBy: string
+  requestedUsername: string | null
+  requestedAt: string
+  startedAt: string | null
+  completedAt: string | null
+  expiresAt: string | null
+}
+
+export interface PlatformExportTaskPage {
+  records: PlatformExportTask[]
+  page: number
+  size: number
+  total: number
+  pages: number
+}
+
+export interface PlatformExportTaskQuery {
+  page: number
+  size: number
+  exportType?: string
+  status?: ExportTaskStatus
+  requestedFrom?: string
+  requestedTo?: string
+}
+
+export interface CreatePlatformExportTaskRequest {
+  exportType: ExportTaskType
+  format: 'XLSX'
+  taskName: string
+  parameters: Record<string, string | number | boolean | null | undefined>
+}
+
+const basePath = '/platform/v1/files/export-tasks'
+
+export async function createPlatformExportTask(payload: CreatePlatformExportTaskRequest) {
+  const response = await http.post<ApiEnvelope<PlatformExportTask>, ApiEnvelope<PlatformExportTask>>(basePath, payload)
+  return unwrapApiResponse(response)
+}
+
+export async function listPlatformExportTasks(query: PlatformExportTaskQuery) {
+  const response = await http.get<ApiEnvelope<PlatformExportTaskPage>, ApiEnvelope<PlatformExportTaskPage>>(basePath, {
+    params: query,
+  })
+  const page = unwrapApiResponse(response)
+  return {
+    ...page,
+    page: Number(page.page),
+    size: Number(page.size),
+    total: Number(page.total),
+    pages: Number(page.pages),
+  }
+}
+
+export function downloadPlatformExportTask(taskId: string) {
+  return http.get<Blob, Blob>(`${basePath}/${encodeURIComponent(taskId)}/download`, { responseType: 'blob' })
+}
+
+export async function retryPlatformExportTask(taskId: string) {
+  const response = await http.post<ApiEnvelope<PlatformExportTask>, ApiEnvelope<PlatformExportTask>>(
+    `${basePath}/${encodeURIComponent(taskId)}/retry`,
+    {},
+  )
+  return unwrapApiResponse(response)
+}

src/navigation/adminNavigation.test.ts

@@ -21,6 +21,7 @@ describe('adminNavigation', () => {
       '企业审核',
     ])
     expect(adminNavigation.find((item) => item.key === 'general')?.children?.map((item) => item.title)).toContain('快递公司')
+    expect(adminNavigation.find((item) => item.key === 'general')?.children?.map((item) => item.title)).toContain('下载中心')
     expect(adminNavigation.find((item) => item.key === 'system')?.children?.map((item) => item.title)).toEqual([
       '用户管理',
       '角色权限',

src/navigation/adminNavigation.ts

@@ -4,6 +4,7 @@ import {
   ContactRound,
   ClipboardList,
   Database,
+  Download,
   FileCheck2,
   KeyRound,
   Settings,
@@ -200,6 +201,7 @@ export const adminNavigation: AdminNavigationNode[] = [
       // { key: 'general-location', title: '库位/货架管理', icon: WarehouseIcon, path: '/prototype/general/location-management' },
       { key: 'express-companies', title: '快递公司', icon: Truck, path: '/master-data/express-companies', permission: 'platform:express:list' },
       { key: 'counterparties', title: '往来单位', icon: ContactRound, path: '/master-data/counterparties', permission: 'platform:counterparty:list' },
+      { key: 'download-center', title: '下载中心', icon: Download, path: '/downloads', permission: 'platform:download:list' },
       // { key: 'general-voyage', title: '船期价格表', icon: Database, path: '/prototype/general/voyage-price-list' },
     ],
   },

src/router/index.test.ts

@@ -30,6 +30,12 @@ describe('admin router access metadata', () => {
     expect(route?.meta.permission).toBe('platform:counterparty:list')
   })
 
+  it('protects the download center with its stable list permission', () => {
+    const route = router.getRoutes().find((item) => item.name === 'download-center')
+    expect(route?.path).toBe('/downloads')
+    expect(route?.meta.permission).toBe('platform:download:list')
+  })
+
   it('protects enterprise reviews with the backend review menu permission', () => {
     const route = router.getRoutes().find((item) => item.name === 'enterprise-reviews')
 

src/router/index.ts

@@ -62,6 +62,12 @@ const router = createRouter({
           component: () => import('@/views/PartnersView.vue'),
           meta: { title: '往来单位', description: '维护客户、供应商及客户/供应商双重类型单位档案', permission: 'platform:counterparty:list' },
         },
+        {
+          path: 'downloads',
+          name: 'download-center',
+          component: () => import('@/views/DownloadCenterView.vue'),
+          meta: { title: '下载中心', description: '查看异步导出任务并下载已生成文件', permission: 'platform:download:list' },
+        },
         {
           path: 'system/users',
           name: 'users',

src/views/CustomersView.test.ts

@@ -11,6 +11,7 @@ import {
   uploadPlatformTenantQualification,
   type PlatformTenantResource,
 } from '@/api/platformIam'
+import { createPlatformExportTask } from '@/api/platformExportTasks'
 import { useAccessPreviewStore } from '@/stores/accessPreview'
 import { useAuthStore } from '@/stores/auth'
 import CustomersView from './CustomersView.vue'
@@ -29,6 +30,8 @@ vi.mock('@/api/platformIam', () => ({
   uploadPlatformTenantQualification: vi.fn(),
 }))
 
+vi.mock('@/api/platformExportTasks', () => ({ createPlatformExportTask: vi.fn() }))
+
 class ResizeObserverStub implements ResizeObserver {
   observe() {}
   unobserve() {}
@@ -65,7 +68,7 @@ describe('CustomersView', () => {
     setActivePinia(pinia)
     const auth = useAuthStore()
     auth.token = 'token'
-    auth.permissions = ['platform:customer:list', 'platform:customer:view', 'platform:customer:edit']
+    auth.permissions = ['platform:customer:list', 'platform:customer:view', 'platform:customer:edit', 'platform:customer:export']
     useAccessPreviewStore().initializeAfterLogin()
     vi.mocked(listPlatformTenants).mockResolvedValue({
       records: [{ ...fullTenant, contactPhone: '138****8000', contactEmail: 'o***@example.com' }],
@@ -77,6 +80,7 @@ describe('CustomersView', () => {
     vi.mocked(uploadPlatformTenantQualification).mockResolvedValue({
       qualificationId: 'qualification-1', reviewId: null, tenantStatus: 'PROFILE_REQUIRED', documentUrl: '/files/license.png',
     })
+    vi.mocked(createPlatformExportTask).mockResolvedValue({ id: 'export-1', status: 'PENDING' } as never)
   })
 
   it('loads the complete customer detail before editing masked list fields', async () => {
@@ -161,4 +165,20 @@ describe('CustomersView', () => {
       false,
     )
   })
+
+  it('submits the current filters to the backend export service without loading every customer page', async () => {
+    mount(CustomersView, { attachTo: document.body, global: { plugins: [pinia, ElementPlus] } })
+    await flushPromises()
+
+    const exportButton = [...document.querySelectorAll<HTMLButtonElement>('button')]
+      .find((button) => button.textContent?.trim() === '导出Excel')
+    exportButton?.click()
+    await flushPromises()
+
+    expect(createPlatformExportTask).toHaveBeenCalledWith({
+      exportType: 'CUSTOMER_LIST', format: 'XLSX', taskName: '客户列表',
+      parameters: { keyword: undefined, status: undefined },
+    })
+    expect(listPlatformTenants).toHaveBeenCalledTimes(1)
+  })
 })

src/views/CustomersView.vue

@@ -3,6 +3,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { Building2, CheckCircle2, Download, Eye, FileCheck2, FileText, FileUp, Pencil, Plus, Power } from '@lucide/vue'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
 import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/api/http'
+import { createPlatformExportTask } from '@/api/platformExportTasks'
 import {
   changePlatformTenantStatus,
   createPlatformTenant,
@@ -54,6 +55,7 @@ const access = useAccessPreviewStore()
 const page = ref(1)
 const pageSize = ref(10)
 const loading = ref(false)
+const exportSubmitting = ref(false)
 const loadError = ref<ApiErrorDetails | null>(null)
 const result = ref({ records: [] as PlatformTenantResource[], total: 0, pages: 0 })
 const orderCounts = ref<Record<string, number>>({})
@@ -464,20 +466,21 @@ async function toggleStatus(row: PlatformTenantResource) {
   } finally { rowActionId.value = '' }
 }
 
-function xmlEscape(value: unknown) { return String(value ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;') }
 async function exportCustomers() {
-  loading.value = true
+  exportSubmitting.value = true
   try {
-    const first = await listPlatformTenants({ page: 1, size: 200, keyword: filters.value.keyword.trim() || undefined, status: filters.value.status || undefined })
-    const rows = [...first.records]
-    for (let current = 2; current <= first.pages; current += 1) rows.push(...(await listPlatformTenants({ page: current, size: 200, keyword: filters.value.keyword.trim() || undefined, status: filters.value.status || undefined })).records)
-    const body = rows.map((row) => `<tr>${[row.tenantCode, row.tenantName, row.unifiedSocialCreditCode, row.contactName, row.contactPhone, row.salesOwnerName, row.paymentTermDays, statusMeta(row.status).label, formatDate(row.createdAt)].map((cell) => `<td>${xmlEscape(cell)}</td>`).join('')}</tr>`).join('')
-    const html = `<html><head><meta charset="utf-8"></head><body><table><tr>${['客户ID','公司名称','统一社会信用代码','联系人','电话','销售人员','账期(天)','状态','入驻时间'].map((cell) => `<th>${cell}</th>`).join('')}</tr>${body}</table></body></html>`
-    const url = URL.createObjectURL(new Blob(['\ufeff', html], { type: 'application/vnd.ms-excel;charset=utf-8' }))
-    const anchor = document.createElement('a'); anchor.href = url; anchor.download = `客户列表-${new Date().toISOString().slice(0, 10)}.xls`; anchor.click(); URL.revokeObjectURL(url)
-    ElMessage.success(`已导出 ${rows.length} 条客户数据`)
-  } catch (error) { ElMessage.error(getApiErrorMessage(error, '客户数据导出失败')) }
-  finally { loading.value = false }
+    await createPlatformExportTask({
+      exportType: 'CUSTOMER_LIST',
+      format: 'XLSX',
+      taskName: '客户列表',
+      parameters: {
+        keyword: filters.value.keyword.trim() || undefined,
+        status: filters.value.status || undefined,
+      },
+    })
+    ElMessage.success('导出任务已创建，可前往下载中心查看')
+  } catch (error) { ElMessage.error(getApiErrorMessage(error, '客户导出任务创建失败')) }
+  finally { exportSubmitting.value = false }
 }
 
 watch([page, pageSize], () => { void loadCustomers() })
@@ -493,7 +496,7 @@ onMounted(loadCustomers)
     <QueryToolbar v-model="filters" class="surface-panel" ariaLabel="客户筛选" :fields="queryFields" @search="applyFilters" />
     <section v-if="loadError" class="surface-panel customers-error" role="alert"><div><strong>客户列表暂时无法加载</strong><p>{{ loadError.message }}</p><ApiErrorMeta :details="loadError" /></div><el-button type="primary" :loading="loading" @click="loadCustomers">重新加载</el-button></section>
     <section v-else class="surface-panel table-panel" :aria-busy="loading">
-      <div class="customers-table-header"><div class="customers-table-heading"><h2>客户列表</h2><span>共 {{ result.total }} 个客户</span></div><div class="customers-table-actions"><el-button :disabled="loading" @click="exportCustomers"><Download :size="16" />导出Excel</el-button><el-button v-if="access.can('platform:customer:create')" type="primary" :disabled="loading" @click="openCreate"><Plus :size="16" />新增客户</el-button></div></div>
+      <div class="customers-table-header"><div class="customers-table-heading"><h2>客户列表</h2><span>共 {{ result.total }} 个客户</span></div><div class="customers-table-actions"><el-button v-if="access.can('platform:customer:export')" :loading="exportSubmitting" :disabled="loading" @click="exportCustomers"><Download :size="16" />导出Excel</el-button><el-button v-if="access.can('platform:customer:create')" type="primary" :disabled="loading" @click="openCreate"><Plus :size="16" />新增客户</el-button></div></div>
       <DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="customerColumns" :loading="loading" :total="result.total" aria-label="客户列表" row-key="id" empty-text="暂无符合筛选条件的客户">
         <template #actions="{ row }"><div class="table-actions"><el-button v-if="access.can('platform:customer:view')" link type="primary" @click="showDetail(row as PlatformTenantResource)"><Eye :size="15" />详情</el-button><el-button v-if="access.can('platform:customer:view') && access.can('platform:customer:edit')" link type="primary" @click="openEdit(row as PlatformTenantResource)"><Pencil :size="15" />编辑</el-button><el-button v-if="access.can('platform:customer:status') && ['ACTIVE','DISABLED'].includes((row as PlatformTenantResource).status)" link :type="(row as PlatformTenantResource).status === 'ACTIVE' ? 'danger' : 'success'" :loading="rowActionId === String((row as PlatformTenantResource).id)" @click="toggleStatus(row as PlatformTenantResource)"><Power :size="15" />{{ (row as PlatformTenantResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button></div></template>
         <template #company="{ row }"><div class="customer-company-cell"><span><Building2 :size="18" /></span><strong>{{ (row as PlatformTenantResource).tenantName }}</strong></div></template>

src/views/DownloadCenterView.test.ts

@@ -0,0 +1,88 @@
+import ElementPlus from 'element-plus'
+import { createPinia, setActivePinia } from 'pinia'
+import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  downloadPlatformExportTask,
+  listPlatformExportTasks,
+  retryPlatformExportTask,
+  type PlatformExportTask,
+} from '@/api/platformExportTasks'
+import { useAccessPreviewStore } from '@/stores/accessPreview'
+import { useAuthStore } from '@/stores/auth'
+import DownloadCenterView from './DownloadCenterView.vue'
+
+vi.mock('@/api/platformExportTasks', () => ({
+  downloadPlatformExportTask: vi.fn(),
+  listPlatformExportTasks: vi.fn(),
+  retryPlatformExportTask: vi.fn(),
+}))
+
+class ResizeObserverStub implements ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+const task: PlatformExportTask = {
+  id: '9', taskNo: 'EXP9', exportType: 'CUSTOMER_LIST', format: 'XLSX', taskName: '客户列表',
+  status: 'SUCCEEDED', totalRows: 12, processedRows: 12, fileName: '客户列表.xlsx',
+  contentType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', sizeBytes: 2048,
+  failureMessage: null, requestedBy: '1', requestedUsername: 'admin', requestedAt: '2026-08-03T10:00:00',
+  startedAt: '2026-08-03T10:00:01', completedAt: '2026-08-03T10:00:02', expiresAt: '2026-08-10T10:00:02',
+}
+
+enableAutoUnmount(afterEach)
+
+describe('DownloadCenterView', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.stubGlobal('ResizeObserver', ResizeObserverStub)
+    Object.defineProperty(URL, 'createObjectURL', { configurable: true, value: vi.fn(() => 'blob:export') })
+    Object.defineProperty(URL, 'revokeObjectURL', { configurable: true, value: vi.fn() })
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
+    const pinia = createPinia()
+    setActivePinia(pinia)
+    const auth = useAuthStore()
+    auth.token = 'token'
+    auth.permissions = ['platform:download:list', 'platform:customer:export']
+    useAccessPreviewStore().initializeAfterLogin()
+    vi.mocked(listPlatformExportTasks).mockResolvedValue({ records: [task], page: 1, size: 20, total: 1, pages: 1 })
+    vi.mocked(downloadPlatformExportTask).mockResolvedValue(new Blob(['xlsx']))
+    vi.mocked(retryPlatformExportTask).mockResolvedValue({ ...task, status: 'PENDING' })
+  })
+
+  it('lists completed tasks and downloads the backend-generated artifact', async () => {
+    const pinia = setActivePinia(createPinia())
+    const auth = useAuthStore()
+    auth.token = 'token'
+    auth.permissions = ['platform:download:list', 'platform:customer:export']
+    useAccessPreviewStore().initializeAfterLogin()
+    mount(DownloadCenterView, { attachTo: document.body, global: { plugins: [pinia, ElementPlus] } })
+    await flushPromises()
+
+    expect(document.body.textContent).toContain('客户列表')
+    const button = [...document.querySelectorAll<HTMLButtonElement>('button')].find((item) => item.textContent?.trim() === '下载')
+    button?.click()
+    await flushPromises()
+
+    expect(downloadPlatformExportTask).toHaveBeenCalledWith('9')
+    expect(URL.createObjectURL).toHaveBeenCalled()
+  })
+
+  it('shows retry only for failed tasks with the source export permission', async () => {
+    vi.mocked(listPlatformExportTasks).mockResolvedValue({ records: [{ ...task, status: 'FAILED', failureMessage: 'IAM timeout' }], page: 1, size: 20, total: 1, pages: 1 })
+    const pinia = setActivePinia(createPinia())
+    const auth = useAuthStore()
+    auth.token = 'token'
+    auth.permissions = ['platform:download:list', 'platform:customer:export']
+    useAccessPreviewStore().initializeAfterLogin()
+    mount(DownloadCenterView, { attachTo: document.body, global: { plugins: [pinia, ElementPlus] } })
+    await flushPromises()
+
+    const button = [...document.querySelectorAll<HTMLButtonElement>('button')].find((item) => item.textContent?.trim() === '重试')
+    button?.click()
+    await flushPromises()
+    expect(retryPlatformExportTask).toHaveBeenCalledWith('9')
+  })
+})

src/views/DownloadCenterView.vue

@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { Download, RefreshCw, RotateCcw } from '@lucide/vue'
+import { ElMessage } from 'element-plus'
+import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/api/http'
+import {
+  downloadPlatformExportTask,
+  listPlatformExportTasks,
+  retryPlatformExportTask,
+  type ExportTaskStatus,
+  type PlatformExportTask,
+} from '@/api/platformExportTasks'
+import ApiErrorMeta from '@/components/ApiErrorMeta.vue'
+import DataTable, { type DataTableColumn } from '@/components/common/DataTable.vue'
+import QueryToolbar, { type QueryField, type QueryModel } from '@/components/common/QueryToolbar.vue'
+import { useAccessPreviewStore } from '@/stores/accessPreview'
+
+type DownloadFilters = QueryModel & {
+  exportType: string
+  status: ExportTaskStatus | ''
+  requestedRange: string[]
+}
+
+const access = useAccessPreviewStore()
+const page = ref(1)
+const pageSize = ref(20)
+const loading = ref(false)
+const downloadingId = ref('')
+const retryingId = ref('')
+const loadError = ref<ApiErrorDetails | null>(null)
+const result = ref({ records: [] as PlatformExportTask[], total: 0, pages: 0 })
+const filters = ref<DownloadFilters>({ exportType: '', status: '', requestedRange: [] })
+let refreshTimer: number | undefined
+
+const queryFields: QueryField[] = [
+  { key: 'exportType', type: 'select', placeholder: '全部任务类型', options: [
+    { label: '客户列表', value: 'CUSTOMER_LIST' },
+  ] },
+  { key: 'status', type: 'select', placeholder: '全部任务状态', options: [
+    { label: '等待处理', value: 'PENDING' }, { label: '处理中', value: 'RUNNING' },
+    { label: '已完成', value: 'SUCCEEDED' }, { label: '失败', value: 'FAILED' },
+    { label: '已过期', value: 'EXPIRED' },
+  ] },
+  { key: 'requestedRange', type: 'daterange', placeholder: '请选择申请日期' },
+]
+
+const columns: DataTableColumn[] = [
+  { key: 'actions', label: '操作', width: 150, fixed: 'left', slotName: 'actions' },
+  { prop: 'taskName', label: '任务名称', minWidth: 180, showOverflowTooltip: true },
+  { key: 'type', label: '任务类型', width: 120, slotName: 'type' },
+  { key: 'status', label: '状态', width: 110, slotName: 'status' },
+  { key: 'progress', label: '数据量', width: 120, slotName: 'progress' },
+  { prop: 'format', label: '格式', width: 80 },
+  { key: 'requester', label: '申请人', minWidth: 130, slotName: 'requester' },
+  { key: 'requestedAt', label: '申请时间', width: 170, slotName: 'requestedAt' },
+  { key: 'completedAt', label: '完成时间', width: 170, slotName: 'completedAt' },
+  { key: 'expiresAt', label: '过期时间', width: 170, slotName: 'expiresAt' },
+  { key: 'failure', label: '失败原因', minWidth: 240, slotName: 'failure' },
+]
+
+const hasActiveTasks = computed(() => result.value.records.some((task) => ['PENDING', 'RUNNING'].includes(task.status)))
+
+function clearRefreshTimer() {
+  if (refreshTimer !== undefined) window.clearTimeout(refreshTimer)
+  refreshTimer = undefined
+}
+
+function scheduleRefresh() {
+  clearRefreshTimer()
+  if (hasActiveTasks.value && !loadError.value) refreshTimer = window.setTimeout(() => { void loadTasks(true) }, 5000)
+}
+
+async function loadTasks(background = false) {
+  clearRefreshTimer()
+  if (!background) loading.value = true
+  loadError.value = null
+  try {
+    const range = filters.value.requestedRange
+    const response = await listPlatformExportTasks({
+      page: page.value,
+      size: pageSize.value,
+      exportType: filters.value.exportType || undefined,
+      status: filters.value.status || undefined,
+      requestedFrom: range?.[0] || undefined,
+      requestedTo: range?.[1] || undefined,
+    })
+    result.value = { records: response.records, total: response.total, pages: response.pages }
+  } catch (error) {
+    loadError.value = getApiErrorDetails(error, '下载任务加载失败')
+  } finally {
+    if (!background) loading.value = false
+    scheduleRefresh()
+  }
+}
+
+function applyFilters() {
+  if (page.value === 1) void loadTasks()
+  else page.value = 1
+}
+
+async function downloadTask(task: PlatformExportTask) {
+  downloadingId.value = task.id
+  try {
+    const blob = await downloadPlatformExportTask(task.id)
+    const url = URL.createObjectURL(blob)
+    const anchor = document.createElement('a')
+    anchor.href = url
+    anchor.download = safeFileName(task.fileName || `${task.taskName}.xlsx`)
+    document.body.append(anchor)
+    anchor.click()
+    anchor.remove()
+    URL.revokeObjectURL(url)
+  } catch (error) {
+    ElMessage.error(getApiErrorMessage(error, '文件下载失败，请刷新任务状态后重试'))
+  } finally {
+    downloadingId.value = ''
+  }
+}
+
+async function retryTask(task: PlatformExportTask) {
+  retryingId.value = task.id
+  try {
+    await retryPlatformExportTask(task.id)
+    ElMessage.success('导出任务已重新提交')
+    await loadTasks()
+  } catch (error) {
+    ElMessage.error(getApiErrorMessage(error, '任务重试失败'))
+  } finally {
+    retryingId.value = ''
+  }
+}
+
+function safeFileName(value: string) {
+  const safe = value.replace(/[\\/:*?"<>|\u0000-\u001f]/g, '_').trim()
+  return safe || '导出文件.xlsx'
+}
+
+function typeLabel(type: string) { return type === 'CUSTOMER_LIST' ? '客户列表' : type }
+
+function statusMeta(status: ExportTaskStatus) {
+  const values = {
+    PENDING: { label: '等待处理', type: 'info' as const },
+    RUNNING: { label: '处理中', type: 'warning' as const },
+    SUCCEEDED: { label: '已完成', type: 'success' as const },
+    FAILED: { label: '失败', type: 'danger' as const },
+    EXPIRED: { label: '已过期', type: 'info' as const },
+  }
+  return values[status]
+}
+
+function formatDate(value: string | null) {
+  if (!value) return '—'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleString('zh-CN', { hour12: false })
+}
+
+function formatSize(bytes: number | null) {
+  if (bytes === null) return ''
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+}
+
+function canRetry(task: PlatformExportTask) {
+  return task.status === 'FAILED' && task.exportType === 'CUSTOMER_LIST' && access.can('platform:customer:export')
+}
+
+watch([page, pageSize], () => { void loadTasks() })
+onMounted(loadTasks)
+onBeforeUnmount(clearRefreshTimer)
+</script>
+
+<template>
+  <div class="business-page download-center-page">
+    <QueryToolbar v-model="filters" class="surface-panel" ariaLabel="下载任务筛选" :fields="queryFields" @search="applyFilters" />
+
+    <section v-if="loadError" class="surface-panel download-error" role="alert">
+      <div><strong>下载任务暂时无法加载</strong><p>{{ loadError.message }}</p><ApiErrorMeta :details="loadError" /></div>
+      <el-button type="primary" :loading="loading" @click="loadTasks()">重新加载</el-button>
+    </section>
+
+    <section v-else class="surface-panel table-panel" :aria-busy="loading">
+      <div class="download-table-header">
+        <div><h2>下载任务</h2><span>共 {{ result.total }} 个任务</span></div>
+        <el-button :loading="loading" @click="loadTasks()"><RefreshCw :size="16" />刷新</el-button>
+      </div>
+      <DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="columns" :loading="loading" :total="result.total" row-key="id" empty-text="暂无符合筛选条件的下载任务" aria-label="下载任务列表">
+        <template #actions="{ row }"><div class="table-actions">
+          <el-button v-if="(row as PlatformExportTask).status === 'SUCCEEDED'" link type="primary" :loading="downloadingId === (row as PlatformExportTask).id" @click="downloadTask(row as PlatformExportTask)"><Download :size="15" />下载</el-button>
+          <el-button v-if="canRetry(row as PlatformExportTask)" link type="primary" :loading="retryingId === (row as PlatformExportTask).id" @click="retryTask(row as PlatformExportTask)"><RotateCcw :size="15" />重试</el-button>
+          <span v-if="!['SUCCEEDED', 'FAILED'].includes((row as PlatformExportTask).status)" class="action-placeholder">—</span>
+        </div></template>
+        <template #type="{ row }">{{ typeLabel((row as PlatformExportTask).exportType) }}</template>
+        <template #status="{ row }"><el-tag :type="statusMeta((row as PlatformExportTask).status).type" effect="light">{{ statusMeta((row as PlatformExportTask).status).label }}</el-tag></template>
+        <template #progress="{ row }"><span>{{ (row as PlatformExportTask).processedRows }}<template v-if="(row as PlatformExportTask).totalRows !== null"> / {{ (row as PlatformExportTask).totalRows }}</template></span><small v-if="(row as PlatformExportTask).sizeBytes !== null">{{ formatSize((row as PlatformExportTask).sizeBytes) }}</small></template>
+        <template #requester="{ row }">{{ (row as PlatformExportTask).requestedUsername || (row as PlatformExportTask).requestedBy }}</template>
+        <template #requestedAt="{ row }">{{ formatDate((row as PlatformExportTask).requestedAt) }}</template>
+        <template #completedAt="{ row }">{{ formatDate((row as PlatformExportTask).completedAt) }}</template>
+        <template #expiresAt="{ row }">{{ formatDate((row as PlatformExportTask).expiresAt) }}</template>
+        <template #failure="{ row }"><span class="failure-message">{{ (row as PlatformExportTask).failureMessage || '—' }}</span></template>
+      </DataTable>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.download-center-page { min-width: 0; }
+.download-error, .download-table-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+.download-error { padding: 18px; }
+.download-error strong { color: var(--cc-danger); font-size: 14px; }
+.download-error p { margin: 5px 0; color: var(--cc-text); font-size: 13px; }
+.download-table-header { min-height: 64px; padding: 12px 18px; border-bottom: 1px solid var(--cc-border); }
+.download-table-header h2 { margin: 0; color: var(--cc-text); font-size: 16px; }
+.download-table-header span { display: block; margin-top: 3px; color: var(--cc-muted); font-size: 12px; }
+.table-actions { display: flex; min-height: 32px; align-items: center; gap: 8px; }
+.table-actions :deep(.el-button + .el-button) { margin-left: 0; }
+.action-placeholder { color: var(--cc-muted); }
+.failure-message { display: block; overflow: hidden; color: var(--cc-danger); text-overflow: ellipsis; white-space: nowrap; }
+small { display: block; margin-top: 3px; color: var(--cc-muted); font-size: 11px; }
+@media (max-width: 720px) {
+  .download-error, .download-table-header { align-items: stretch; flex-direction: column; }
+  .download-table-header :deep(.el-button) { min-height: 40px; }
+}
+</style>

src/views/EnterpriseReviewsView.test.ts

@@ -90,6 +90,7 @@ describe('EnterpriseReviewsView', () => {
     vi.mocked(listEnterpriseReviews).mockReset()
     vi.mocked(listTenantQualifications).mockReset()
     vi.mocked(downloadTenantQualification).mockReset()
+    vi.mocked(downloadTenantQualification).mockResolvedValue(new Blob(['image'], { type: 'image/png' }))
     vi.mocked(approveEnterpriseReview).mockReset()
     vi.mocked(rejectEnterpriseReview).mockReset()
     vi.mocked(qualificationFileName).mockReset()
@@ -144,8 +145,9 @@ describe('EnterpriseReviewsView', () => {
     await flushPromises()
 
     expect(listTenantQualifications).toHaveBeenCalledWith(pendingReview.tenantId)
+    expect(downloadTenantQualification).toHaveBeenCalledWith(pendingReview.tenantId, pendingQualification.documentUrl)
     expect(wrapper.text()).toContain('信用代码：91440300XXXXXXXXXX')
-    expect(buttonByText('查看文件')).toBeDefined()
+    expect(document.querySelector<HTMLImageElement>('.qualification-thumbnail img')?.getAttribute('alt')).toBe('营业执照缩略图')
   })
 
   it('keeps qualification loading recoverable without using a direct file link', async () => {
@@ -171,12 +173,13 @@ describe('EnterpriseReviewsView', () => {
     await mountView()
     tableButtonByText('详情')?.click()
     await flushPromises()
-    buttonByText('查看文件')?.click()
+    document.querySelector<HTMLButtonElement>('.qualification-thumbnail')?.click()
     await flushPromises()
 
     const frame = document.querySelector<HTMLIFrameElement>('.qualification-preview iframe')
     expect(frame?.getAttribute('src')).toBe('blob:qualification-preview')
     expect(frame?.getAttribute('title')).toContain('PDF 预览')
+    expect(downloadTenantQualification).toHaveBeenCalledTimes(1)
   })
 
   it('keeps the page recoverable when the endpoint fails', async () => {

src/views/EnterpriseReviewsView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
-import { Eye, FileCheck2, ShieldCheck, ShieldX } from '@lucide/vue'
+import { Eye, FileCheck2, FileText, ImageOff, LoaderCircle, ShieldCheck, ShieldX } from '@lucide/vue'
 import {
   approveEnterpriseReview,
   downloadTenantQualification,
@@ -35,11 +35,15 @@ const selectedReview = ref<EnterpriseReview | null>(null)
 const qualifications = ref<PlatformTenantQualification[]>([])
 const qualificationsLoading = ref(false)
 const qualificationsError = ref<ApiErrorDetails | null>(null)
-const previewLoadingId = ref<string>()
 const previewOpen = ref(false)
 const previewUrl = ref('')
 const previewName = ref('')
 const previewKind = ref<'image' | 'pdf' | ''>('')
+type QualificationAsset = { url: string; name: string; kind: 'image' | 'pdf' }
+const qualificationAssets = ref<Record<string, QualificationAsset>>({})
+const qualificationAssetLoadingIds = ref<string[]>([])
+const qualificationAssetErrorIds = ref<string[]>([])
+const qualificationAssetRequests = new Map<string, Promise<QualificationAsset | undefined>>()
 const decisionOpen = ref(false)
 const submitting = ref(false)
 const decision = reactive({ type: 'approve' as 'approve' | 'reject', comment: '' })
@@ -130,12 +134,17 @@ function searchReviews() {
 async function loadSelectedQualifications() {
   const tenantId = selectedReview.value?.tenantId
   if (!tenantId) return
+  previewOpen.value = false
+  clearQualificationAssets()
   qualificationsLoading.value = true
   qualificationsError.value = null
   qualifications.value = []
   try {
     const result = await listTenantQualifications(tenantId)
-    if (selectedReview.value?.tenantId === tenantId) qualifications.value = result
+    if (selectedReview.value?.tenantId === tenantId) {
+      qualifications.value = result
+      preloadQualificationAssets(result, tenantId)
+    }
   } catch (error) {
     if (selectedReview.value?.tenantId === tenantId) {
       qualificationsError.value = getApiErrorDetails(error, '资质列表加载失败，请稍后重试')
@@ -151,29 +160,93 @@ function openDetail(review: EnterpriseReview) {
   void loadSelectedQualifications()
 }
 
-function clearPreviewUrl() {
-  if (previewUrl.value) URL.revokeObjectURL(previewUrl.value)
+function clearPreview() {
   previewUrl.value = ''
   previewName.value = ''
   previewKind.value = ''
 }
 
+function qualificationKey(qualification: PlatformTenantQualification) {
+  return String(qualification.id)
+}
+
+function clearQualificationAssets() {
+  Object.values(qualificationAssets.value).forEach((asset) => URL.revokeObjectURL(asset.url))
+  qualificationAssets.value = {}
+  qualificationAssetLoadingIds.value = []
+  qualificationAssetErrorIds.value = []
+  qualificationAssetRequests.clear()
+  clearPreview()
+}
+
+async function loadQualificationAsset(
+  qualification: PlatformTenantQualification,
+  tenantId: number | string,
+) {
+  const key = qualificationKey(qualification)
+  const cached = qualificationAssets.value[key]
+  if (cached) return cached
+
+  const pending = qualificationAssetRequests.get(key)
+  if (pending) return pending
+
+  qualificationAssetLoadingIds.value = [...qualificationAssetLoadingIds.value, key]
+  qualificationAssetErrorIds.value = qualificationAssetErrorIds.value.filter((id) => id !== key)
+
+  const request = (async () => {
+    const blob = await downloadTenantQualification(tenantId, qualification.documentUrl)
+    if (!blob.size) throw new Error('资质文件内容为空')
+    const name = qualificationFileName(qualification.documentUrl)
+    const asset: QualificationAsset = {
+      url: URL.createObjectURL(blob),
+      name,
+      kind: blob.type === 'application/pdf' || name.toLowerCase().endsWith('.pdf') ? 'pdf' : 'image',
+    }
+    const isCurrent = detailOpen.value
+      && selectedReview.value?.tenantId === tenantId
+      && qualifications.value.some((item) => qualificationKey(item) === key && item.documentUrl === qualification.documentUrl)
+    if (!isCurrent) {
+      URL.revokeObjectURL(asset.url)
+      return undefined
+    }
+    qualificationAssets.value = { ...qualificationAssets.value, [key]: asset }
+    return asset
+  })()
+
+  qualificationAssetRequests.set(key, request)
+  try {
+    return await request
+  } catch (error) {
+    if (detailOpen.value && selectedReview.value?.tenantId === tenantId) {
+      qualificationAssetErrorIds.value = [...new Set([...qualificationAssetErrorIds.value, key])]
+    }
+    throw error
+  } finally {
+    qualificationAssetLoadingIds.value = qualificationAssetLoadingIds.value.filter((id) => id !== key)
+    if (qualificationAssetRequests.get(key) === request) qualificationAssetRequests.delete(key)
+  }
+}
+
+function preloadQualificationAssets(items: PlatformTenantQualification[], tenantId: number | string) {
+  items.forEach((qualification) => {
+    if (qualification.documentUrl) {
+      void loadQualificationAsset(qualification, tenantId).catch(() => undefined)
+    }
+  })
+}
+
 async function previewQualification(qualification: PlatformTenantQualification) {
   const tenantId = selectedReview.value?.tenantId
   if (!tenantId || !qualification.documentUrl) return
-  previewLoadingId.value = String(qualification.id)
   try {
-    const blob = await downloadTenantQualification(tenantId, qualification.documentUrl)
-    if (!blob.size) throw new Error('资质文件内容为空')
-    clearPreviewUrl()
-    previewUrl.value = URL.createObjectURL(blob)
-    previewName.value = qualificationFileName(qualification.documentUrl)
-    previewKind.value = blob.type === 'application/pdf' || previewName.value.toLowerCase().endsWith('.pdf') ? 'pdf' : 'image'
+    const asset = await loadQualificationAsset(qualification, tenantId)
+    if (!asset) return
+    previewUrl.value = asset.url
+    previewName.value = asset.name
+    previewKind.value = asset.kind
     previewOpen.value = true
   } catch (error) {
     ElMessage.error(getApiErrorMessage(error, '资质文件加载失败，请稍后重试'))
-  } finally {
-    previewLoadingId.value = undefined
   }
 }
 
@@ -220,15 +293,18 @@ watch(
 )
 
 watch(previewOpen, (open) => {
-  if (!open) clearPreviewUrl()
+  if (!open) clearPreview()
 })
 
 watch(detailOpen, (open) => {
-  if (!open) previewOpen.value = false
+  if (!open) {
+    previewOpen.value = false
+    clearQualificationAssets()
+  }
 })
 
 onMounted(loadReviews)
-onBeforeUnmount(clearPreviewUrl)
+onBeforeUnmount(clearQualificationAssets)
 </script>
 
 <template>
@@ -295,18 +371,41 @@ onBeforeUnmount(clearPreviewUrl)
             <el-empty v-else-if="qualifications.length === 0" :image-size="64" description="该企业暂未提交资质" />
             <div v-else class="qualification-list">
               <article v-for="qualification in qualifications" :key="qualification.id" class="qualification-item">
+                <button
+                  type="button"
+                  class="qualification-thumbnail"
+                  :disabled="!qualification.documentUrl"
+                  :aria-label="qualification.documentUrl ? `查看${qualificationName(qualification.qualificationType)}大图` : `${qualificationName(qualification.qualificationType)}未上传文件`"
+                  @click="previewQualification(qualification)"
+                >
+                  <img
+                    v-if="qualificationAssets[qualificationKey(qualification)]?.kind === 'image'"
+                    :src="qualificationAssets[qualificationKey(qualification)]?.url"
+                    :alt="`${qualificationName(qualification.qualificationType)}缩略图`"
+                  />
+                  <span v-else-if="qualificationAssets[qualificationKey(qualification)]?.kind === 'pdf'" class="thumbnail-placeholder">
+                    <FileText :size="24" />
+                    <small>PDF</small>
+                  </span>
+                  <span v-else-if="qualificationAssetLoadingIds.includes(qualificationKey(qualification))" class="thumbnail-placeholder" role="status">
+                    <LoaderCircle :size="22" class="is-spinning" />
+                    <small>加载中</small>
+                  </span>
+                  <span v-else-if="qualificationAssetErrorIds.includes(qualificationKey(qualification))" class="thumbnail-placeholder is-error">
+                    <ImageOff :size="22" />
+                    <small>重新加载</small>
+                  </span>
+                  <span v-else class="thumbnail-placeholder">
+                    <FileText :size="22" />
+                    <small>未上传</small>
+                  </span>
+                  <span v-if="qualificationAssets[qualificationKey(qualification)]" class="thumbnail-action" aria-hidden="true"><Eye :size="15" /></span>
+                </button>
                 <div class="qualification-copy">
                   <div><strong>{{ qualificationName(qualification.qualificationType) }}</strong><span class="status-badge" :class="qualificationStatus(qualification.status).tone"><i />{{ qualificationStatus(qualification.status).label }}</span></div>
                   <p>信用代码：{{ displayText(qualification.certificateNo) }}</p>
                   <p v-if="qualification.reviewComment">审核意见：{{ qualification.reviewComment }}</p>
                 </div>
-                <el-button
-                  type="primary"
-                  plain
-                  :disabled="!qualification.documentUrl"
-                  :loading="previewLoadingId === String(qualification.id)"
-                  @click="previewQualification(qualification)"
-                ><Eye :size="15" />查看文件</el-button>
               </article>
             </div>
           </div>
@@ -360,9 +459,19 @@ onBeforeUnmount(clearPreviewUrl)
 .qualification-error strong { color: #7a271a; font-size: 13px; }
 .qualification-error p { margin: 4px 0 0; color: #b54708; font-size: 12px; overflow-wrap: anywhere; }
 .qualification-list { display: flex; flex-direction: column; gap: 10px; }
-.qualification-item { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; border: 1px solid var(--cc-border); border-radius: 6px; background: #fff; }
+.qualification-item { display: grid; min-width: 0; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--cc-border); border-radius: 6px; background: #fff; }
+.qualification-thumbnail { position: relative; display: grid; width: 112px; height: 84px; place-items: center; overflow: hidden; padding: 0; border: 1px solid #d5dce7; border-radius: 6px; background: #f8fafc; color: #475467; cursor: zoom-in; }
+.qualification-thumbnail:not(:disabled):hover { border-color: var(--cc-primary); }
+.qualification-thumbnail:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: 2px; }
+.qualification-thumbnail:disabled { cursor: not-allowed; opacity: .72; }
+.qualification-thumbnail > img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
+.thumbnail-placeholder { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; color: #667085; }
+.thumbnail-placeholder small { font-size: 10px; line-height: 1; }
+.thumbnail-placeholder.is-error { color: #b42318; }
+.thumbnail-action { position: absolute; top: 6px; right: 6px; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: rgba(23, 32, 51, .78); color: #fff; }
+.is-spinning { animation: thumbnail-spin 1s linear infinite; }
 .qualification-copy { min-width: 0; }
-.qualification-copy > div { display: flex; min-width: 0; align-items: center; gap: 8px; }
+.qualification-copy > div { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 8px; }
 .qualification-copy strong { overflow-wrap: anywhere; font-size: 13px; }
 .qualification-copy p { margin: 5px 0 0; color: var(--cc-muted); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
 .qualification-preview { display: grid; max-height: min(70vh, 760px); min-height: 240px; place-items: center; overflow: auto; border: 1px solid var(--cc-border); border-radius: 6px; background: #f8fafc; }
@@ -376,8 +485,16 @@ onBeforeUnmount(clearPreviewUrl)
 @media (max-width: 720px) {
   .review-error { grid-template-columns: auto minmax(0, 1fr); }
   .review-error .el-button { grid-column: 1 / -1; min-height: 44px; }
-  .qualification-error, .qualification-item { align-items: stretch; flex-direction: column; }
-  .qualification-error .el-button, .qualification-item .el-button { min-height: 44px; }
+  .qualification-error { align-items: stretch; flex-direction: column; }
+  .qualification-error .el-button { min-height: 44px; }
   .decision-summary { align-items: flex-start; flex-direction: column; }
 }
+@media (max-width: 420px) {
+  .qualification-item { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px; }
+  .qualification-thumbnail { width: 96px; height: 76px; }
+}
+@keyframes thumbnail-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) {
+  .is-spinning { animation: none; }
+}
 </style>