admin后台 第一阶段目录优化

apps/frontend/src/views/admin/tasks/AdminTasksView.vue

@@ -0,0 +1,323 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
+import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
+import { showConfirm, showError, showSuccess } from '@/lib/feedback'
+import {
+  closeAdminTask,
+  fetchAdminTasks,
+  markAdminTaskManualReview,
+  regenerateAdminTaskClaimLink,
+  retryAdminTask,
+} from '@/services/admin'
+import type { AdminPagination, AdminTaskActionResponse, AdminTaskListItem } from '@/types/admin'
+import { hasAdminRole } from '@/utils/admin-auth'
+import { adminTaskStatusOptions } from '@/utils/admin-options'
+import { formatAdminDateTime } from '@/utils/admin-time'
+
+const loading = ref(true)
+const actionLoadingId = ref<number | null>(null)
+const errorMessage = ref('')
+const status = ref('')
+const taskNo = ref('')
+const platformOrderId = ref('')
+const roleId = ref('')
+const skuCode = ref('')
+const dateFrom = ref('')
+const dateTo = ref('')
+const items = ref<AdminTaskListItem[]>([])
+const lastClaimUrl = ref('')
+const pagination = ref<AdminPagination>({
+  page: 1,
+  pageSize: 20,
+  total: 0,
+})
+const canManageTaskLifecycle = hasAdminRole('operator')
+const canCloseTasks = hasAdminRole('support')
+
+type AdminTaskActionKey = 'retry' | 'regenerate_claim_link' | 'manual_review' | 'close'
+
+async function loadTasks(page = pagination.value.page) {
+  loading.value = true
+  errorMessage.value = ''
+
+  try {
+    const response = await fetchAdminTasks({
+      page,
+      pageSize: pagination.value.pageSize,
+      status: status.value.trim(),
+      taskNo: taskNo.value.trim(),
+      platformOrderId: platformOrderId.value.trim(),
+      roleId: roleId.value.trim(),
+      skuCode: skuCode.value.trim(),
+      dateFrom: dateFrom.value.trim(),
+      dateTo: dateTo.value.trim(),
+    })
+    items.value = response.data.items
+    pagination.value = response.data.pagination
+  } catch (error) {
+    errorMessage.value = error instanceof Error ? error.message : '读取任务列表失败'
+  } finally {
+    loading.value = false
+  }
+}
+
+function formatBindingRoles(item: AdminTaskListItem) {
+  const roles = item.bindingSummary.roleKeys
+  if (!Array.isArray(roles) || roles.length === 0) return '无绑定角色'
+  return roles.join(' / ')
+}
+
+function formatBindingCountSummary(item: AdminTaskListItem) {
+  const summary = item.bindingSummary
+  return `共 ${summary.totalBindingCount} 条 · 预占 ${summary.reservedBindingCount} · 已消费 ${summary.consumedBindingCount} · 已释放 ${summary.releasedBindingCount}`
+}
+
+onMounted(() => { void loadTasks() })
+
+async function runAction(
+  taskId: number,
+  action: () => Promise<{ data: AdminTaskActionResponse }>,
+  successMessage: string,
+  confirmText: string,
+) {
+  try {
+    await showConfirm(confirmText, '确认操作', { type: 'warning', confirmButtonText: '继续执行', cancelButtonText: '取消' })
+  } catch { return }
+
+  actionLoadingId.value = taskId
+  try {
+    const response = await action()
+    if (response.data.claimUrl) lastClaimUrl.value = response.data.claimUrl
+    showSuccess(successMessage)
+    await loadTasks()
+  } catch (error) {
+    showError(error instanceof Error ? error.message : '操作失败')
+  } finally { actionLoadingId.value = null }
+}
+
+function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListItem) {
+  if (actionKey === 'retry') {
+    void runAction(item.taskId, () => retryAdminTask(item.taskId), '任务已重试', `确认重试任务 ${item.taskNo} 吗？`)
+    return
+  }
+  if (actionKey === 'regenerate_claim_link') {
+    void runAction(item.taskId, () => regenerateAdminTaskClaimLink(item.taskId), '领取链接已重新生成', `确认重新生成任务 ${item.taskNo} 的领取链接吗？旧链接会失效。`)
+    return
+  }
+  if (actionKey === 'manual_review') {
+    void runAction(item.taskId, () => markAdminTaskManualReview(item.taskId), '任务已转人工处理', `确认将任务 ${item.taskNo} 转为人工处理吗？`)
+    return
+  }
+  void runAction(item.taskId, () => closeAdminTask(item.taskId), '任务已关闭', `确认关闭任务 ${item.taskNo} 吗？关闭后不会自动继续推进。`)
+}
+
+function resetFilters() {
+  status.value = ''
+  taskNo.value = ''
+  platformOrderId.value = ''
+  roleId.value = ''
+  skuCode.value = ''
+  dateFrom.value = ''
+  dateTo.value = ''
+  void loadTasks(1)
+}
+</script>
+
+<template>
+  <div class="tasks-page list-page">
+    <AdminPageHeader title="交付任务" description="更紧凑地查看任务状态、角色绑定、库存凭据和异常信息。">
+      <template #extra>
+        <span class="total-badge">共 {{ pagination.total }} 条任务</span>
+      </template>
+    </AdminPageHeader>
+
+    <el-card shadow="never" class="section-card">
+      <template #header>
+        <div class="card-header">
+          <span class="card-title">查询任务</span>
+          <span class="card-desc">按状态、任务号、订单号、角色标识、SKU 和日期筛选。</span>
+        </div>
+      </template>
+      <div class="filter-grid">
+        <el-select v-model="status" placeholder="状态" clearable>
+          <el-option v-for="opt in adminTaskStatusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
+        </el-select>
+        <el-input v-model="taskNo" placeholder="任务号（模糊匹配）" clearable @keyup.enter="loadTasks(1)" />
+        <el-input v-model="platformOrderId" placeholder="平台订单号" clearable @keyup.enter="loadTasks(1)" />
+        <el-input v-model="roleId" placeholder="角色唯一标识" clearable @keyup.enter="loadTasks(1)" />
+        <el-input v-model="skuCode" placeholder="商品 SKU" clearable @keyup.enter="loadTasks(1)" />
+        <el-date-picker v-model="dateFrom" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" />
+        <el-date-picker v-model="dateTo" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" />
+        <div class="filter-buttons">
+          <el-button round @click="resetFilters">重置</el-button>
+          <el-button round type="primary" @click="loadTasks(1)">查询</el-button>
+        </div>
+      </div>
+    </el-card>
+
+    <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" style="margin-top: 16px" />
+    <el-alert v-if="lastClaimUrl" :title="`最近生成的领取链接：${lastClaimUrl}`" type="info" show-icon :closable="false" style="margin-top: 16px" />
+
+    <el-card shadow="never" class="section-card" v-loading="loading" element-loading-text="任务列表加载中">
+      <template v-if="items.length === 0 && !loading">
+        <el-empty description="当前筛选条件下暂无任务" :image-size="60" />
+      </template>
+
+      <template v-else>
+        <div class="tasks-toolbar table-toolbar">
+          <strong>任务列表</strong>
+          <span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
+        </div>
+
+        <el-table :data="items" stripe size="small" class="tasks-table data-table">
+          <el-table-column label="任务 / 商品" min-width="220">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <RouterLink :to="`/admin/tasks/${row.taskId}`" class="task-no id-link" :title="row.taskNo">
+                  {{ row.taskNo }}
+                </RouterLink>
+                <div class="cell-meta-row">
+                  <span class="compact-chip" :title="row.platformOrderId">订单 {{ row.platformOrderId }}</span>
+                  <span class="compact-chip compact-chip--muted">重试 {{ row.retryCount }} 次</span>
+                </div>
+                <span class="cell-title" :title="row.skuName || row.skuCode">{{ row.skuName || row.skuCode }}</span>
+                <span class="cell-subline">SKU {{ row.skuCode || '-' }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="进度" min-width="160">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <div class="progress-row">
+                  <span class="progress-label">任务</span>
+                  <AdminStatusTag :status="row.status" />
+                </div>
+                <div class="progress-row">
+                  <span class="progress-label">系统</span>
+                  <AdminStatusTag :status="row.systemBindingStatus" />
+                </div>
+                <div class="progress-row">
+                  <span class="progress-label">完整</span>
+                  <AdminStatusTag :status="row.userBindingStatus" />
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="角色 / 凭据" min-width="180">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <span class="cell-title" :title="row.roleName || row.roleId || '-'">{{ row.roleName || '-' }}</span>
+                <span class="cell-subline" :title="row.roleId || '-'">角色ID {{ row.roleId || '-' }}</span>
+                <span class="cell-subline">登录 {{ row.loginType || '-' }}</span>
+                <span class="cell-subline" :title="row.inventoryDisplayMasked || '-'">凭据 {{ row.inventoryDisplayMasked || '-' }}</span>
+                <span class="cell-subline" :title="formatBindingRoles(row)">绑定 {{ formatBindingRoles(row) }}</span>
+                <span class="cell-subline cell-subline--strong" :title="formatBindingCountSummary(row)">{{ formatBindingCountSummary(row) }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="时间" min-width="180">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <span class="cell-subline">创建 {{ formatAdminDateTime(row.createdAt) }}</span>
+                <span class="cell-subline">更新 {{ formatAdminDateTime(row.updatedAt) }}</span>
+                <span v-if="row.claimedAt" class="cell-subline">领取 {{ formatAdminDateTime(row.claimedAt) }}</span>
+                <span v-if="row.roleConfirmedAt" class="cell-subline">确认 {{ formatAdminDateTime(row.roleConfirmedAt) }}</span>
+                <span v-if="row.redeemedAt" class="cell-subline">兑换 {{ formatAdminDateTime(row.redeemedAt) }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="异常 / 操作" min-width="220">
+            <template #default="{ row }">
+              <div class="cell-stack">
+                <span class="cell-error" :title="row.lastError || '-'">{{ row.lastError || '当前无异常' }}</span>
+                <div class="action-stack">
+                  <el-button
+                    v-if="canManageTaskLifecycle"
+                    :disabled="row.executorKey === 'manual_dispatch' || !['retry_pending', 'manual_review', 'waiting_inventory'].includes(row.status)"
+                    :loading="actionLoadingId === row.taskId"
+                    size="small"
+                    type="danger"
+                    plain
+                    @click="runAction(row.taskId, () => retryAdminTask(row.taskId), '任务已重试', `确认重试任务 ${row.taskNo} 吗？`)"
+                  >
+                    重试
+                  </el-button>
+                  <el-button
+                    v-if="canManageTaskLifecycle && row.executorKey !== 'manual_dispatch'"
+                    size="small"
+                    @click="handleActionCommand('regenerate_claim_link', row)"
+                  >
+                    重发链接
+                  </el-button>
+                  <el-button
+                    v-if="canManageTaskLifecycle"
+                    size="small"
+                    @click="handleActionCommand('manual_review', row)"
+                  >
+                    转人工
+                  </el-button>
+                  <el-button
+                    v-if="canCloseTasks && !['redeemed', 'closed'].includes(row.status)"
+                    size="small"
+                    type="danger"
+                    @click="handleActionCommand('close', row)"
+                  >
+                    关闭任务
+                  </el-button>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination
+          v-if="pagination.total > 0"
+          v-model:current-page="pagination.page"
+          :page-size="pagination.pageSize"
+          :total="pagination.total"
+          layout="total, prev, pager, next"
+          style="margin-top: 16px; justify-content: center"
+          @current-change="loadTasks"
+        />
+      </template>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+@import '../../../styles/admin-list-pages.css';
+
+.filter-grid {
+  grid-template-columns: minmax(150px, 0.75fr) minmax(220px, 1fr) minmax(220px, 1fr) minmax(210px, 0.95fr);
+}
+.filter-grid :deep(.el-date-editor) { width: 100%; }
+
+.progress-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
+.progress-row :deep(.el-tag) { min-width: 0; max-width: calc(100% - 42px); }
+.progress-row :deep(.el-tag__content) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.progress-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 34px;
+  min-height: 22px;
+  padding: 0 7px;
+  border-radius: var(--radius-full);
+  background: #f7f9fc;
+  border: 1px solid var(--border-default);
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 700;
+  flex: 0 0 auto;
+}
+
+.cell-error { display: block; min-width: 0; line-height: 1.55; color: #475467; word-break: break-word; font-size: var(--text-xs); }
+
+.cell-subline--strong { color: var(--text-primary); font-weight: 600; }
+
+.action-stack { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
+.action-stack :deep(.el-button) { flex: 0 0 auto; margin-left: 0; }
+</style>