dachui/order_site
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

尽量使用ele-plus

Browse Source
This commit is contained in:
yml2213
2026-05-15 03:22:44 +08:00
parent 67b5b40ac5
commit 2f6380ad4d
9 changed files with 2602 additions and 2624 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/views/admin/AdminTasksView.vue
+150 -233
View File
@@ -133,7 +133,13 @@ function resetFilters() {
</template>
</AdminPageHeader>
<section class="filter-panel">
<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" />
@@ -149,12 +155,12 @@ function resetFilters() {
<el-button round type="primary" @click="loadTasks(1)">查询</el-button>
</div>
</div>
</section>
</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" />
<section class="tasks-section" v-loading="loading" element-loading-text="任务列表加载中">
<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>
@@ -165,115 +171,106 @@ function resetFilters() {
<span>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span>
</div>
<div class="task-list">
<article v-for="item in items" :key="item.taskId" class="task-card">
<div class="task-card-top">
<div class="task-identity">
<RouterLink :to="`/admin/tasks/${item.taskId}`" class="task-no" :title="item.taskNo">
{{ item.taskNo }}
<el-table :data="items" stripe size="small" class="tasks-table">
<el-table-column label="任务 / 商品" min-width="220">
<template #default="{ row }">
<div class="cell-stack">
<RouterLink :to="`/admin/tasks/${row.taskId}`" class="task-no" :title="row.taskNo">
{{ row.taskNo }}
</RouterLink>
<div class="task-meta-row">
<span class="compact-chip" :title="item.platformOrderId">订单 {{ item.platformOrderId }}</span>
<span class="compact-chip compact-chip--muted">重试 {{ item.retryCount }} 次</span>
<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>
<AdminStatusTag :status="item.status" />
</div>
<div class="task-grid">
<section class="task-section">
<span class="section-label">任务进度</span>
<div class="progress-cell">
<div class="progress-row">
<span class="progress-label">任务</span>
<AdminStatusTag :status="item.status" />
</div>
<div class="progress-row">
<span class="progress-label">系统</span>
<AdminStatusTag :status="item.systemBindingStatus" />
</div>
<div class="progress-row">
<span class="progress-label">完整</span>
<AdminStatusTag :status="item.userBindingStatus" />
</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>
</section>
<section class="task-section">
<span class="section-label">商品 / 凭据</span>
<div class="goods-cell">
<span class="goods-title" :title="item.skuName || item.skuCode">{{ item.skuName || item.skuCode }}</span>
<span class="goods-subline">SKU {{ item.skuCode || '-' }}</span>
<span class="goods-subline" :title="item.inventoryDisplayMasked || '-'">凭据 {{ item.inventoryDisplayMasked || '-' }}</span>
<span class="goods-subline" :title="formatBindingRoles(item)">绑定 {{ formatBindingRoles(item) }}</span>
<span class="goods-subline goods-subline-strong" :title="formatBindingCountSummary(item)">{{ formatBindingCountSummary(item) }}</span>
</div>
</section>
<section class="task-section">
<span class="section-label">角色绑定</span>
<div class="role-cell">
<span class="role-title" :title="item.roleName || item.roleId || '-'">{{ item.roleName || '-' }}</span>
<span class="role-subline" :title="item.roleId || '-'">角色ID {{ item.roleId || '-' }}</span>
<span class="role-subline">登录 {{ item.loginType || '-' }}</span>
</div>
</section>
<section class="task-section">
<span class="section-label">时间</span>
<div class="time-cell">
<span class="time-line">创建 {{ formatAdminDateTime(item.createdAt) }}</span>
<span class="time-line">更新 {{ formatAdminDateTime(item.updatedAt) }}</span>
<span v-if="item.claimedAt" class="time-line">领取 {{ formatAdminDateTime(item.claimedAt) }}</span>
<span v-if="item.roleConfirmedAt" class="time-line">确认 {{ formatAdminDateTime(item.roleConfirmedAt) }}</span>
<span v-if="item.redeemedAt" class="time-line">兑换 {{ formatAdminDateTime(item.redeemedAt) }}</span>
</div>
</section>
<section class="task-section task-section--actions">
<span class="section-label">异常 / 操作</span>
<div class="task-end">
<span class="cell-error" :title="item.lastError || '-'">{{ item.lastError || '当前无异常' }}</span>
<div class="action-cell">
<el-button
v-if="canManageTaskLifecycle"
:disabled="item.executorKey === 'manual_dispatch' || !['retry_pending', 'manual_review', 'waiting_inventory'].includes(item.status)"
:loading="actionLoadingId === item.taskId"
type="danger"
plain
size="small"
@click="runAction(item.taskId, () => retryAdminTask(item.taskId), '任务已重试', `确认重试任务 ${item.taskNo} 吗？`)"
>
重试
</el-button>
<el-button
v-if="canManageTaskLifecycle && item.executorKey !== 'manual_dispatch'"
size="small"
@click="handleActionCommand('regenerate_claim_link', item)"
>
重发链接
</el-button>
<el-button
v-if="canManageTaskLifecycle"
size="small"
@click="handleActionCommand('manual_review', item)"
>
转人工
</el-button>
<el-button
v-if="canCloseTasks && !['redeemed', 'closed'].includes(item.status)"
size="small"
type="danger"
@click="handleActionCommand('close', item)"
>
关闭任务
</el-button>
</div>
</div>
</section>
</div>
</article>
</div>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination
v-if="pagination.total > 0"
@@ -285,7 +282,7 @@ function resetFilters() {
@current-change="loadTasks"
/>
</template>
</section>
</el-card>
</div>
</template>
@@ -293,19 +290,23 @@ function resetFilters() {
.tasks-page { display: grid; gap: 0; }
.total-badge {
min-height: 34px;
padding: 0 14px;
border-radius: var(--radius-full);
background: var(--bg-surface);
border: 1px solid var(--border-default);
color: var(--text-secondary);
font-size: var(--text-xs);
font-weight: 700;
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0 12px;
border: 1px solid rgba(37, 89, 167, 0.14);
border-radius: var(--radius-full);
background: rgba(37, 89, 167, 0.08);
color: #2559a7;
font-size: var(--text-xs);
font-weight: 700;
}
.filter-panel { margin-top: var(--space-4); }
.section-card { margin-top: var(--space-4); }
.card-header { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-end; }
.card-title { color: var(--text-primary); font-size: var(--text-lg); font-weight: 600; }
.card-desc { color: var(--text-secondary); font-size: var(--text-sm); }
.filter-grid {
display: grid;
@@ -313,54 +314,39 @@ function resetFilters() {
gap: var(--space-3);
align-items: center;
}
.filter-grid :deep(.el-date-editor) { width: 100%; }
.filter-buttons {
display: flex;
gap: 10px;
justify-content: flex-end;
min-width: 156px;
}
.tasks-section { margin-top: var(--space-4); overflow: visible; }
.filter-buttons { display: flex; gap: 10px; justify-content: flex-end; min-width: 156px; }
.tasks-toolbar { margin-bottom: var(--space-3); }
.tasks-toolbar strong { display: block; color: var(--text-primary); font-size: var(--text-base); }
.tasks-toolbar span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--text-xs); }
.task-list { display: grid; gap: var(--space-3); }
.task-card {
display: grid;
gap: 14px;
padding: 14px;
border-radius: var(--radius-md);
background: rgba(247, 250, 255, 0.42);
.tasks-table {
width: 100%;
overflow: hidden;
border: 1px solid var(--border-default);
transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
border-radius: var(--radius-sm);
--el-table-bg-color: transparent;
--el-table-tr-bg-color: transparent;
--el-table-header-bg-color: rgba(239, 246, 255, 0.72);
--el-table-row-hover-bg-color: rgba(239, 246, 255, 0.72);
--el-table-border-color: rgba(86, 108, 138, 0.1);
}
.tasks-table :deep(.el-table__inner-wrapper::before) { display: none; }
.tasks-table :deep(th.el-table__cell) {
height: 42px;
background: var(--el-table-header-bg-color);
color: var(--text-secondary);
font-weight: 700;
}
.task-card:hover {
border-color: var(--border-hover);
background: rgba(247, 250, 255, 0.68);
box-shadow: 0 1px 4px rgba(30, 49, 78, 0.04);
}
.task-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
}
.task-identity { min-width: 0; display: grid; gap: var(--space-2); }
.cell-stack { display: grid; gap: 5px; }
.task-no {
display: inline-block;
max-width: 100%;
font-size: var(--text-xl);
line-height: 1.1;
font-size: var(--text-base);
font-weight: 800;
color: var(--text-primary);
overflow: hidden;
@@ -370,14 +356,14 @@ function resetFilters() {
}
.task-no:hover { color: var(--color-primary-dark); }
.task-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cell-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.compact-chip {
display: inline-flex;
align-items: center;
min-height: 28px;
min-height: 24px;
max-width: 100%;
padding: 0 10px;
padding: 0 9px;
border-radius: var(--radius-full);
background: #f4f7fb;
border: 1px solid var(--border-default);
@@ -385,51 +371,16 @@ function resetFilters() {
font-size: var(--text-xs);
font-weight: 600;
}
.compact-chip--muted { color: var(--text-muted); }
.task-grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.15fr);
gap: var(--space-3);
min-width: 0;
}
.cell-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 700; }
.cell-subline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475467; font-size: var(--text-xs); }
.cell-subline--strong { color: var(--text-primary); font-weight: 600; }
.task-section {
display: grid;
gap: 6px;
min-width: 0;
padding-top: 10px;
border-top: 1px solid rgba(86, 108, 138, 0.1);
}
.task-section--actions {
grid-column: 1 / -1;
grid-template-columns: 112px minmax(0, 1fr);
align-items: center;
gap: var(--space-3);
}
.section-label {
color: var(--text-muted);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.progress-cell { display: grid; gap: var(--space-2); min-width: 0; }
.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-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;
@@ -446,56 +397,22 @@ function resetFilters() {
flex: 0 0 auto;
}
.goods-cell, .role-cell, .time-cell { display: grid; gap: 5px; min-width: 0; }
.time-line { min-width: 0; color: #475467; font-size: var(--text-xs); line-height: 1.5; }
.goods-title, .role-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 700; }
.goods-subline, .role-subline { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475467; font-size: var(--text-xs); }
.goods-subline-strong { color: var(--text-primary); font-weight: 600; }
.cell-error { display: block; min-width: 0; line-height: 1.55; color: #475467; word-break: break-word; font-size: var(--text-xs); }
.task-end {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-3);
align-items: center;
min-width: 0;
}
.action-cell {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
justify-content: flex-end;
max-width: 360px;
}
.action-cell :deep(.el-button) {
flex: 0 0 auto;
margin-left: 0;
}
.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; }
@media (max-width: 1200px) {
.task-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.task-section--actions {
grid-template-columns: 1fr;
align-items: start;
}
.task-end { grid-template-columns: 1fr; }
.action-cell { justify-content: flex-start; max-width: none; }
.filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.filter-buttons { justify-content: flex-start; }
}
@media (max-width: 900px) {
.task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filter-buttons { justify-content: flex-start; }
}
@media (max-width: 640px) {
.task-grid,
.filter-grid { grid-template-columns: 1fr; }
.filter-buttons { width: 100%; }
.filter-buttons :deep(.el-button) { flex: 1 1 auto; }
.task-card-top { flex-direction: column; align-items: flex-start; }
.task-no { font-size: 18px; }
.task-no { font-size: var(--text-base); }
}
</style>