496 lines
15 KiB
Vue
496 lines
15 KiB
Vue
<script setup lang="ts">
|
||
import { onMounted, ref } from 'vue'
|
||
|
||
import { useAdminAction } from '@/composables/useAdminAction'
|
||
import { useAdminListPage } from '@/composables/useAdminListPage'
|
||
import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
|
||
import {
|
||
closeAdminTask,
|
||
fetchAdminTasks,
|
||
markAdminTaskManualReview,
|
||
rebindAdminTaskKuaishouCloudRole,
|
||
retryAdminTask,
|
||
} from '@/services/admin'
|
||
import type { AdminTaskListItem } from '@/types/admin'
|
||
import { hasAdminRole } from '@/utils/admin-auth'
|
||
import { adminTaskStatusOptions } from '@/utils/admin-options'
|
||
import { formatAdminDateTime } from '@/utils/admin-time'
|
||
|
||
const status = ref('')
|
||
const taskNo = ref('')
|
||
const platformOrderId = ref('')
|
||
const roleId = ref('')
|
||
const skuCode = ref('')
|
||
const dateFrom = ref('')
|
||
const dateTo = ref('')
|
||
const lastClaimUrl = ref('')
|
||
|
||
const canManageTaskLifecycle = hasAdminRole('operator')
|
||
const canCloseTasks = hasAdminRole('support')
|
||
|
||
type AdminTaskActionKey = 'retry' | 'rebind_role' | 'manual_review' | 'close'
|
||
|
||
const {
|
||
loading,
|
||
errorMessage,
|
||
items,
|
||
pagination,
|
||
loadPage: loadTasks,
|
||
} = useAdminListPage<AdminTaskListItem>({
|
||
defaultErrorMessage: '读取任务列表失败',
|
||
fetchPage: (page, pageSize) =>
|
||
fetchAdminTasks({
|
||
page,
|
||
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(),
|
||
}),
|
||
})
|
||
|
||
const { actionLoadingId, runAction } = useAdminAction()
|
||
|
||
function handleActionCommand(actionKey: AdminTaskActionKey, item: AdminTaskListItem) {
|
||
if (actionKey === 'retry') {
|
||
void runAction({
|
||
id: item.taskId,
|
||
action: async () => {
|
||
const response = await retryAdminTask(item.taskId)
|
||
if (response.data.claimUrl) lastClaimUrl.value = response.data.claimUrl
|
||
},
|
||
successMessage: '任务已重试',
|
||
confirmText: `确认重试任务 ${item.taskNo} 吗？`,
|
||
onAfterAction: async () => {
|
||
await loadTasks()
|
||
},
|
||
})
|
||
return
|
||
}
|
||
if (actionKey === 'rebind_role') {
|
||
void runAction({
|
||
id: item.taskId,
|
||
action: async () => {
|
||
const response = await rebindAdminTaskKuaishouCloudRole(item.taskId)
|
||
if (response.data.claimUrl) lastClaimUrl.value = response.data.claimUrl
|
||
},
|
||
successMessage: '角色换绑资源已准备完成',
|
||
confirmText: `确认为任务 ${item.taskNo} 换绑角色吗？当前虚拟号会退还，并生成新的绑定二维码。`,
|
||
onAfterAction: async () => {
|
||
await loadTasks()
|
||
},
|
||
})
|
||
return
|
||
}
|
||
if (actionKey === 'manual_review') {
|
||
void runAction({
|
||
id: item.taskId,
|
||
action: () => markAdminTaskManualReview(item.taskId),
|
||
successMessage: '任务已转人工处理',
|
||
confirmText: `确认将任务 ${item.taskNo} 转为人工处理吗？`,
|
||
onAfterAction: async () => {
|
||
await loadTasks()
|
||
},
|
||
})
|
||
return
|
||
}
|
||
void runAction({
|
||
id: item.taskId,
|
||
action: () => closeAdminTask(item.taskId),
|
||
successMessage: '任务已关闭',
|
||
confirmText: `确认关闭任务 ${item.taskNo} 吗？关闭后不会自动继续推进。`,
|
||
onAfterAction: async () => {
|
||
await loadTasks()
|
||
},
|
||
})
|
||
}
|
||
|
||
function resetFilters() {
|
||
status.value = ''
|
||
taskNo.value = ''
|
||
platformOrderId.value = ''
|
||
roleId.value = ''
|
||
skuCode.value = ''
|
||
dateFrom.value = ''
|
||
dateTo.value = ''
|
||
void loadTasks(1)
|
||
}
|
||
|
||
function resolveResourceStageLabel(status: string) {
|
||
const normalized = String(status || '').trim()
|
||
const labelMap: Record<string, string> = {
|
||
resource_ready: '资源已准备',
|
||
pending_prepare: '待准备资源',
|
||
pending_payment: '待支付',
|
||
pending_binding_prepare: '待准备资源',
|
||
retry_pending: '待重试',
|
||
manual_review: '人工处理',
|
||
resource_exception: '资源异常',
|
||
closed: '已关闭',
|
||
expired: '已过期',
|
||
completed: '已完成',
|
||
not_started: '未开始',
|
||
}
|
||
|
||
return labelMap[normalized] || normalized || '-'
|
||
}
|
||
|
||
function resolveCustomerStageLabel(status: string) {
|
||
const normalized = String(status || '').trim()
|
||
const labelMap: Record<string, string> = {
|
||
not_started: '待打开链接',
|
||
waiting_customer: '待客户绑定',
|
||
link_opened: '已打开链接',
|
||
customer_processing: '处理中',
|
||
customer_confirmed: '已提交',
|
||
customer_completed: '客户已完成',
|
||
customer_exception: '客户步骤异常',
|
||
closed: '已关闭',
|
||
expired: '已过期',
|
||
}
|
||
|
||
return labelMap[normalized] || normalized || '-'
|
||
}
|
||
|
||
function resolveTaskMainText(item: AdminTaskListItem) {
|
||
if (item.lastError) return '需要关注'
|
||
if (['failed', 'manual_review', 'retry_pending'].includes(item.status)) return '待处理'
|
||
if (['redeemed', 'completed', 'closed'].includes(item.status)) return '已完成'
|
||
if (item.customerStatus === 'waiting_customer') return '等待客户绑定'
|
||
if (item.resourceStatus === 'resource_ready') return '资源已准备'
|
||
if (item.status === 'pending_binding_prepare') return '待准备资源'
|
||
return item.status || '处理中'
|
||
}
|
||
|
||
function resolveTaskTone(item: AdminTaskListItem) {
|
||
if (item.lastError || ['failed', 'manual_review', 'retry_pending'].includes(item.status))
|
||
return 'danger'
|
||
if (['redeemed', 'completed', 'closed'].includes(item.status)) return 'success'
|
||
return 'warning'
|
||
}
|
||
|
||
function canRebindListTask(item: AdminTaskListItem) {
|
||
return (
|
||
canManageTaskLifecycle &&
|
||
item.executorKey === 'kuaishou_ct_assisted' &&
|
||
['waiting_binding', 'role_confirmed', 'manual_review', 'retry_pending'].includes(item.status)
|
||
)
|
||
}
|
||
|
||
onMounted(() => {
|
||
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">按状态、任务号、订单号、商品和日期筛选。</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="角色 ID" 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"
|
||
class="mt-4"
|
||
/>
|
||
<el-alert
|
||
v-if="lastClaimUrl"
|
||
:title="`最近可用领取链接：${lastClaimUrl}`"
|
||
type="info"
|
||
show-icon
|
||
:closable="false"
|
||
class="mt-4"
|
||
/>
|
||
|
||
<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="230">
|
||
<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>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="商品" min-width="210">
|
||
<template #default="{ row }">
|
||
<div class="cell-stack">
|
||
<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="250">
|
||
<template #default="{ row }">
|
||
<div class="task-status-summary">
|
||
<span class="task-main-chip" :data-tone="resolveTaskTone(row)">
|
||
{{ resolveTaskMainText(row) }}
|
||
</span>
|
||
<p class="task-status-note">
|
||
客户 {{ resolveCustomerStageLabel(row.customerStatus) }} · 资源
|
||
{{ resolveResourceStageLabel(row.resourceStatus) }}
|
||
</p>
|
||
<p v-if="row.roleName || row.roleId" class="task-status-note">
|
||
角色 {{ row.roleName || '-' }} / {{ row.roleId || '-' }}
|
||
</p>
|
||
</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'].includes(row.status)
|
||
"
|
||
:loading="actionLoadingId === row.taskId"
|
||
size="small"
|
||
type="danger"
|
||
plain
|
||
@click="handleActionCommand('retry', row)"
|
||
>
|
||
重试
|
||
</el-button>
|
||
<el-button
|
||
v-if="canRebindListTask(row)"
|
||
size="small"
|
||
@click="handleActionCommand('rebind_role', 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"
|
||
class="pagination-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%;
|
||
}
|
||
|
||
.task-status-summary {
|
||
display: grid;
|
||
gap: 6px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.task-main-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: fit-content;
|
||
min-height: 26px;
|
||
padding: 0 10px;
|
||
border-radius: var(--radius-full);
|
||
border: 1px solid transparent;
|
||
font-size: var(--text-xs);
|
||
font-weight: 800;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.task-main-chip[data-tone='success'] {
|
||
color: #0f766e;
|
||
background: var(--color-success-light);
|
||
border-color: #a6f4c5;
|
||
}
|
||
|
||
.task-main-chip[data-tone='warning'] {
|
||
color: #b54708;
|
||
background: var(--color-warning-light);
|
||
border-color: #fedf89;
|
||
}
|
||
|
||
.task-main-chip[data-tone='danger'] {
|
||
color: var(--color-danger-dark);
|
||
background: var(--color-danger-light);
|
||
border-color: #fecaca;
|
||
}
|
||
|
||
.task-status-note {
|
||
margin: 0;
|
||
color: var(--text-secondary);
|
||
font-size: var(--text-xs);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.task-status-note + .task-status-note {
|
||
color: var(--text-primary);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.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>
|