admin-web/src/modules/downloads/pages/DownloadCenterView.vue

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { Download, Eye, RefreshCw, RotateCcw } from '@lucide/vue'
import { ElMessage } from 'element-plus'
import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/shared/api/http'
import {
  downloadPlatformExportTask,
  getPlatformExportTask,
  listPlatformExportTasks,
  retryPlatformExportTask,
  type ExportTaskStatus,
  type PlatformExportTask,
} from '@/modules/downloads/api/platformExportTasks'
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import AppDrawer from '@/shared/components/AppDrawer.vue'
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
import { useAccessPreviewStore } from '@/core/access/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 syncWarning = ref<ApiErrorDetails | null>(null)
const detailOpen = ref(false)
const detailLoading = ref(false)
const detailError = ref<ApiErrorDetails | null>(null)
const detailTask = ref<PlatformExportTask | null>(null)
const result = ref({ records: [] as PlatformExportTask[], total: 0, pages: 0 })
const filters = ref<DownloadFilters>({ exportType: '', status: '', requestedRange: [] })
let refreshTimer: number | undefined
let disposed = false
let loadRequestId = 0
let detailRequestId = 0

const queryFields: QueryField[] = [
  { key: 'exportType', type: 'select', label: '任务类型', placeholder: '全部任务类型', options: [
    { label: '客户列表', value: 'CUSTOMER_LIST' },
  ] },
  { key: 'status', type: 'select', label: '任务状态', placeholder: '全部任务状态', options: [
    { label: '等待处理', value: 'PENDING' }, { label: '处理中', value: 'RUNNING' },
    { label: '已完成', value: 'SUCCEEDED' }, { label: '失败', value: 'FAILED' },
    { label: '已过期', value: 'EXPIRED' },
  ] },
  { key: 'requestedRange', type: 'daterange', label: '申请日期', placeholder: '请选择申请日期' },
]

const columns: DataTableColumn[] = [
  { key: 'actions', label: '操作', width: 210, fixed: 'left', slotName: 'actions' },
  { key: 'taskName', 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' },
  { key: 'format', 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 (!disposed && hasActiveTasks.value) refreshTimer = window.setTimeout(() => { void loadTasks(true) }, 5000)
}

async function loadTasks(background = false) {
  const requestId = ++loadRequestId
  clearRefreshTimer()
  if (!background) loading.value = true
  if (!background) 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,
    })
    if (disposed || requestId !== loadRequestId) return
    result.value = { records: response.records, total: response.total, pages: response.pages }
    loadError.value = null
    syncWarning.value = null
    if (detailOpen.value && detailTask.value) {
      const freshDetail = response.records.find((task) => task.id === detailTask.value?.id)
      if (freshDetail) detailTask.value = freshDetail
    }
  } catch (error) {
    if (disposed || requestId !== loadRequestId) return
    const details = getApiErrorDetails(error, '下载任务加载失败')
    if (background && result.value.records.length > 0) syncWarning.value = details
    else loadError.value = details
  } finally {
    if (!disposed && requestId === loadRequestId) {
      if (!background) loading.value = false
      scheduleRefresh()
    }
  }
}

function applyFilters() {
  if (page.value === 1) void loadTasks()
  else page.value = 1
}

async function openDetail(task: PlatformExportTask) {
  if (!task?.id) return
  const requestId = ++detailRequestId
  detailTask.value = task
  detailError.value = null
  detailOpen.value = true
  detailLoading.value = true
  try {
    const response = await getPlatformExportTask(task.id)
    if (disposed || requestId !== detailRequestId) return
    detailTask.value = response
  } catch (error) {
    if (disposed || requestId !== detailRequestId) return
    detailError.value = getApiErrorDetails(error, '下载任务详情加载失败')
  } finally {
    if (!disposed && requestId === detailRequestId) detailLoading.value = false
  }
}

function closeDetail() {
  detailRequestId += 1
  detailTask.value = null
  detailError.value = null
  detailLoading.value = false
}

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')
    try {
      anchor.href = url
      anchor.download = safeFileName(task.fileName || `${task.taskName}.xlsx`)
      document.body.append(anchor)
      anchor.click()
    } finally {
      anchor.remove()
      window.setTimeout(() => URL.revokeObjectURL(url), 0)
    }
  } catch (error) {
    const details = getApiErrorDetails(error, '文件下载失败，请刷新任务状态后重试')
    const trace = [details.code, details.requestId && `requestId: ${details.requestId}`, details.traceId && `traceId: ${details.traceId}`]
      .filter(Boolean)
      .join('，')
    ElMessage.error(trace ? `${details.message}（${trace}）` : details.message)
  } 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] ?? { label: status || '未知状态', type: 'info' as const }
}

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(() => {
  disposed = true
  loadRequestId += 1
  detailRequestId += 1
  clearRefreshTimer()
})
</script>

<template>
  <div class="business-page download-center-page">
    <QueryToolbar v-model="filters" class="surface-panel" ariaLabel="下载任务筛选" :fields="queryFields" preference-key="downloads-query" @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>
      <div v-if="syncWarning" class="download-sync-warning" role="status">
        <span>自动刷新暂时失败，正在保留当前任务并继续重试：{{ syncWarning.message }}</span>
        <ApiErrorMeta :details="syncWarning" />
      </div>
      <DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="columns" preference-key="downloads-table" :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)?.id" link type="primary" @click="openDetail(row as PlatformExportTask)"><Eye :size="15" />详情</el-button>
          <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>
        </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-cell" :class="{ 'failure-message': Boolean((row as PlatformExportTask).failureMessage) }">{{ (row as PlatformExportTask).failureMessage || '—' }}</span></template>
      </DataTable>
    </section>

    <AppDrawer
      v-model="detailOpen"
      :title="detailTask ? `任务详情 · ${detailTask.taskNo}` : '任务详情'"
      size="min(620px, 94vw)"
      :loading="detailLoading"
      :show-footer="false"
      destroy-on-close
      @closed="closeDetail"
    >
      <section v-if="detailError" class="detail-load-error" role="alert">
        <strong>任务详情暂时无法加载</strong>
        <p>{{ detailError.message }}</p>
        <ApiErrorMeta :details="detailError" />
        <el-button type="primary" @click="detailTask && openDetail(detailTask)">重新加载</el-button>
      </section>
      <div v-else-if="detailTask" class="task-detail">
        <div class="task-detail-summary">
          <div>
            <h3>{{ detailTask.taskName }}</h3>
            <p>{{ typeLabel(detailTask.exportType) }} · {{ detailTask.format }}</p>
          </div>
          <el-tag :type="statusMeta(detailTask.status).type" effect="light">{{ statusMeta(detailTask.status).label }}</el-tag>
        </div>
        <dl class="task-detail-grid">
          <div><dt>任务编号</dt><dd>{{ detailTask.taskNo }}</dd></div>
          <div><dt>申请人</dt><dd>{{ detailTask.requestedUsername || detailTask.requestedBy }}</dd></div>
          <div><dt>申请时间</dt><dd>{{ formatDate(detailTask.requestedAt) }}</dd></div>
          <div><dt>开始时间</dt><dd>{{ formatDate(detailTask.startedAt) }}</dd></div>
          <div><dt>完成时间</dt><dd>{{ formatDate(detailTask.completedAt) }}</dd></div>
          <div><dt>过期时间</dt><dd>{{ formatDate(detailTask.expiresAt) }}</dd></div>
          <div><dt>处理数据</dt><dd>{{ detailTask.processedRows }}<template v-if="detailTask.totalRows !== null"> / {{ detailTask.totalRows }}</template> 行</dd></div>
          <div><dt>文件大小</dt><dd>{{ formatSize(detailTask.sizeBytes) || '—' }}</dd></div>
          <div class="is-wide"><dt>文件名称</dt><dd>{{ detailTask.fileName || '—' }}</dd></div>
        </dl>
        <section v-if="detailTask.failureMessage" class="task-failure" role="status">
          <strong>失败原因</strong>
          <p>{{ detailTask.failureMessage }}</p>
        </section>
      </div>
    </AppDrawer>
  </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; }
.download-sync-warning { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid #fedf89; background: #fffaeb; color: #93370d; 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; }
.failure-cell { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.failure-message { color: var(--cc-danger); }
.detail-load-error { display: flex; min-height: 220px; align-items: flex-start; justify-content: center; flex-direction: column; }
.detail-load-error strong { color: var(--cc-danger); font-size: 15px; }
.detail-load-error p { margin: 6px 0; color: var(--cc-text); font-size: 13px; }
.detail-load-error :deep(.el-button) { margin-top: 16px; }
.task-detail { min-width: 0; }
.task-detail-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--cc-border); }
.task-detail-summary h3 { margin: 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: 17px; }
.task-detail-summary p { margin: 6px 0 0; color: var(--cc-muted); font-size: 12px; }
.task-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.task-detail-grid > div { min-width: 0; padding: 16px 14px; border-bottom: 1px solid var(--cc-border); }
.task-detail-grid > div:nth-child(odd):not(.is-wide) { border-right: 1px solid var(--cc-border); }
.task-detail-grid .is-wide { grid-column: 1 / -1; }
.task-detail-grid dt { margin-bottom: 6px; color: var(--cc-muted); font-size: 12px; }
.task-detail-grid dd { margin: 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: 13px; line-height: 1.5; }
.task-failure { margin-top: 18px; padding: 14px; border: 1px solid color-mix(in srgb, var(--cc-danger) 24%, var(--cc-border)); border-radius: 8px; background: color-mix(in srgb, var(--cc-danger) 5%, #fff); }
.task-failure strong { color: var(--cc-danger); font-size: 13px; }
.task-failure p { margin: 6px 0 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: 13px; line-height: 1.6; }
small { display: block; margin-top: 3px; color: var(--cc-muted); font-size: 11px; }
@media (max-width: 720px) {
  .download-error, .download-table-header, .download-sync-warning { align-items: stretch; flex-direction: column; }
  .download-table-header :deep(.el-button), .table-actions :deep(.el-button) { min-height: 44px; }
  .table-actions :deep(.el-button) { padding-right: 8px; padding-left: 8px; }
}
@media (max-width: 480px) {
  .task-detail-summary { flex-direction: column; }
  .task-detail-grid { grid-template-columns: 1fr; }
  .task-detail-grid > div:nth-child(odd):not(.is-wide) { border-right: 0; }
  .task-detail-grid .is-wide { grid-column: 1; }
}
</style>