删除库存和旧回调管理
This commit is contained in:
yml
@@ -26,7 +26,6 @@ const cards = [
|
||||
{ key: 'claimingTasks', label: '领取中' },
|
||||
{ key: 'redeemedToday', label: '今日成功' },
|
||||
{ key: 'abnormalTasks', label: '异常任务' },
|
||||
{ key: 'skuWithInventory', label: '有库存 SKU' },
|
||||
] as const
|
||||
</script>
|
||||
|
||||
|
||||
+1
-1
@@ -36,7 +36,7 @@ defineProps<{
|
||||
|
||||
<div class="overview-notes">
|
||||
<el-tag effect="plain">91卡券订单来自已接收的待补全队列</el-tag>
|
||||
<el-tag effect="plain">内部 SKU 决定最终任务与库存绑定</el-tag>
|
||||
<el-tag effect="plain">内部 SKU 决定任务与云资源匹配</el-tag>
|
||||
<el-tag effect="plain">cloud SKU 决定自动购买、发货与退号资源</el-tag>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
@@ -1,146 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'
|
||||
|
||||
import AdminInventoryEntryCard from './components/AdminInventoryEntryCard.vue'
|
||||
import AdminInventoryFilterCard from './components/AdminInventoryFilterCard.vue'
|
||||
import AdminInventoryPoolGrid from './components/AdminInventoryPoolGrid.vue'
|
||||
import AdminInventoryTable from './components/AdminInventoryTable.vue'
|
||||
import { useAdminInventory } from './composables/useAdminInventory'
|
||||
|
||||
const {
|
||||
loading,
|
||||
importing,
|
||||
creating,
|
||||
actionLoadingId,
|
||||
errorMessage,
|
||||
items,
|
||||
pagination,
|
||||
pageSummary,
|
||||
pageOverview,
|
||||
inventoryGroups,
|
||||
// filter
|
||||
filterSkuCode,
|
||||
filterCredentialType,
|
||||
filterStatus,
|
||||
filterBatchNo,
|
||||
filterInventoryGroupCode,
|
||||
// entry
|
||||
entrySkuCode,
|
||||
entryCredentialType,
|
||||
entryBatchNo,
|
||||
entryInventoryGroupCode,
|
||||
singleDisplayValue,
|
||||
bulkText,
|
||||
skuSuggestionsLoading,
|
||||
entrySkuSuggestions,
|
||||
// actions
|
||||
loadInventoryItems,
|
||||
resetFilters,
|
||||
submitCreate,
|
||||
submitImport,
|
||||
runRowAction,
|
||||
useGroupAsFilter,
|
||||
useGroupAsEntry,
|
||||
applySkuSuggestion,
|
||||
// formatters
|
||||
getCredentialTypeLabel,
|
||||
getCredentialTypeHint,
|
||||
getSkuNamingHint,
|
||||
formatInventoryStatus,
|
||||
getGroupSuggestion,
|
||||
// utils
|
||||
formatAdminDateTime,
|
||||
} = useAdminInventory()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="inventory-page list-page">
|
||||
<AdminPageHeader title="库存管理" description="按内部履约 SKU 和凭据类型管理库存、预占和发放。">
|
||||
<template #extra>
|
||||
<span class="total-badge">共 {{ pagination.total }} 条库存</span>
|
||||
</template>
|
||||
</AdminPageHeader>
|
||||
|
||||
<AdminInventoryFilterCard
|
||||
v-model:filter-sku-code="filterSkuCode"
|
||||
v-model:filter-credential-type="filterCredentialType"
|
||||
v-model:filter-status="filterStatus"
|
||||
v-model:filter-batch-no="filterBatchNo"
|
||||
v-model:filter-inventory-group-code="filterInventoryGroupCode"
|
||||
:load-inventory-items="loadInventoryItems"
|
||||
:reset-filters="resetFilters"
|
||||
/>
|
||||
|
||||
<AdminInventoryEntryCard
|
||||
v-model:entry-sku-code="entrySkuCode"
|
||||
v-model:entry-credential-type="entryCredentialType"
|
||||
v-model:entry-batch-no="entryBatchNo"
|
||||
v-model:entry-inventory-group-code="entryInventoryGroupCode"
|
||||
v-model:single-display-value="singleDisplayValue"
|
||||
v-model:bulk-text="bulkText"
|
||||
:creating="creating"
|
||||
:importing="importing"
|
||||
:sku-suggestions-loading="skuSuggestionsLoading"
|
||||
:entry-sku-suggestions="entrySkuSuggestions"
|
||||
:submit-create="submitCreate"
|
||||
:submit-import="submitImport"
|
||||
:apply-sku-suggestion="applySkuSuggestion"
|
||||
:get-credential-type-label="getCredentialTypeLabel"
|
||||
:get-credential-type-hint="getCredentialTypeHint"
|
||||
:get-sku-naming-hint="getSkuNamingHint"
|
||||
/>
|
||||
|
||||
<el-alert
|
||||
v-if="errorMessage"
|
||||
:title="errorMessage"
|
||||
type="error"
|
||||
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="当前筛选下没有库存项，可以先在上方录入内部履约 SKU 对应的库存。"
|
||||
:image-size="60"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<AdminInventoryPoolGrid
|
||||
:inventory-groups="inventoryGroups"
|
||||
:page-overview="pageOverview"
|
||||
:page-summary="pageSummary"
|
||||
:use-group-as-filter="useGroupAsFilter"
|
||||
:use-group-as-entry="useGroupAsEntry"
|
||||
:get-credential-type-label="getCredentialTypeLabel"
|
||||
:get-group-suggestion="getGroupSuggestion"
|
||||
:format-admin-date-time="formatAdminDateTime"
|
||||
/>
|
||||
|
||||
<AdminInventoryTable
|
||||
:loading="loading"
|
||||
:items="items"
|
||||
:pagination="pagination"
|
||||
:page-summary="pageSummary"
|
||||
:action-loading-id="actionLoadingId"
|
||||
:load-inventory-items="loadInventoryItems"
|
||||
:run-row-action="runRowAction"
|
||||
:format-inventory-status="formatInventoryStatus"
|
||||
:get-credential-type-label="getCredentialTypeLabel"
|
||||
:format-admin-date-time="formatAdminDateTime"
|
||||
/>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@import '../../../styles/admin-list-pages.css';
|
||||
</style>
|
||||
@@ -1,296 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { adminInventoryCredentialTypeOptions } from '@/utils/admin-options'
|
||||
|
||||
type SkuSuggestion = {
|
||||
credentialType: string
|
||||
inventoryGroupCode: string
|
||||
skuCode: string
|
||||
availableCount: number
|
||||
totalCount: number
|
||||
}
|
||||
|
||||
const entrySkuCode = defineModel<string>('entrySkuCode', { required: true })
|
||||
const entryCredentialType = defineModel<string>('entryCredentialType', { required: true })
|
||||
const entryBatchNo = defineModel<string>('entryBatchNo', { required: true })
|
||||
const entryInventoryGroupCode = defineModel<string>('entryInventoryGroupCode', { required: true })
|
||||
const singleDisplayValue = defineModel<string>('singleDisplayValue', { required: true })
|
||||
const bulkText = defineModel<string>('bulkText', { required: true })
|
||||
|
||||
const props = defineProps<{
|
||||
creating: boolean
|
||||
importing: boolean
|
||||
skuSuggestionsLoading: boolean
|
||||
entrySkuSuggestions: SkuSuggestion[]
|
||||
submitCreate: () => Promise<void>
|
||||
submitImport: () => Promise<void>
|
||||
applySkuSuggestion: (skuCode: string) => void
|
||||
getCredentialTypeLabel: (value: string) => string
|
||||
getCredentialTypeHint: (value: string) => string
|
||||
getSkuNamingHint: () => string
|
||||
}>()
|
||||
|
||||
function querySkuSuggestions(query: string, callback: (items: SkuSuggestion[]) => void) {
|
||||
const keyword = query.trim().toLowerCase()
|
||||
const items = keyword
|
||||
? props.entrySkuSuggestions.filter((item) => item.skuCode.toLowerCase().includes(keyword))
|
||||
: props.entrySkuSuggestions
|
||||
|
||||
callback(items)
|
||||
}
|
||||
|
||||
function handleSkuSuggestionSelect(item: Record<string, unknown>) {
|
||||
const skuCode = typeof item.skuCode === 'string' ? item.skuCode : ''
|
||||
if (skuCode) {
|
||||
props.applySkuSuggestion(skuCode)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never" class="section-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-title">入库与导入</span>
|
||||
<span class="card-desc"
|
||||
>填写内部履约 SKU，不是平台侧 sku_code。建议同类商品长期复用同一个内部名称。</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="form-grid">
|
||||
<el-autocomplete
|
||||
v-model="entrySkuCode"
|
||||
class="sku-input-wrap"
|
||||
value-key="skuCode"
|
||||
:fetch-suggestions="querySkuSuggestions"
|
||||
placeholder="内部履约 SKU，可选已有同类型，也可自定义新的中文名"
|
||||
clearable
|
||||
@select="handleSkuSuggestionSelect"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<div class="autocomplete-option">
|
||||
<strong>{{ item.skuCode }}</strong>
|
||||
<span>
|
||||
{{ item.inventoryGroupCode || '未分组' }} · 可用 {{ item.availableCount }} / 共
|
||||
{{ item.totalCount }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
<el-select v-model="entryCredentialType" placeholder="凭据类型">
|
||||
<el-option
|
||||
v-for="opt in adminInventoryCredentialTypeOptions.filter((item) => item.value)"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-input v-model="entryBatchNo" placeholder="批次号，可选" clearable />
|
||||
<el-input v-model="entryInventoryGroupCode" placeholder="库存组，例如 A组 / B组" clearable />
|
||||
</div>
|
||||
|
||||
<div class="sku-helper-bar">
|
||||
<span class="helper-text">{{ getSkuNamingHint() }}</span>
|
||||
<span v-if="skuSuggestionsLoading" class="helper-text">正在加载同类型内部 SKU...</span>
|
||||
</div>
|
||||
|
||||
<div v-if="entrySkuSuggestions.length > 0" class="sku-chip-row">
|
||||
<el-button
|
||||
v-for="suggestion in entrySkuSuggestions"
|
||||
:key="`${suggestion.credentialType}-${suggestion.inventoryGroupCode}-${suggestion.skuCode}-chip`"
|
||||
class="sku-chip"
|
||||
plain
|
||||
@click="applySkuSuggestion(suggestion.skuCode)"
|
||||
>
|
||||
<span class="sku-chip-title">{{ suggestion.skuCode }}</span>
|
||||
<span class="sku-chip-meta"
|
||||
>{{ suggestion.inventoryGroupCode || '未分组' }} · 可用 {{ suggestion.availableCount }} /
|
||||
共 {{ suggestion.totalCount }}</span
|
||||
>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="helper-grid">
|
||||
<div class="helper-item">
|
||||
<span class="helper-title">当前默认匹配</span>
|
||||
<span class="helper-copy">{{ getCredentialTypeLabel(entryCredentialType) }}</span>
|
||||
</div>
|
||||
<div class="helper-item">
|
||||
<span class="helper-title">库存组</span>
|
||||
<span class="helper-copy">{{ entryInventoryGroupCode || '未分组，默认全局可用' }}</span>
|
||||
</div>
|
||||
<div class="helper-item helper-item-wide">
|
||||
<span class="helper-title">说明</span>
|
||||
<span class="helper-copy">{{ getCredentialTypeHint(entryCredentialType) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="single-row">
|
||||
<el-input
|
||||
v-model="singleDisplayValue"
|
||||
placeholder="单条新增的凭据内容"
|
||||
@keyup.enter="submitCreate"
|
||||
/>
|
||||
<el-button :loading="creating" round type="success" @click="submitCreate">单条新增</el-button>
|
||||
</div>
|
||||
|
||||
<el-input
|
||||
v-model="bulkText"
|
||||
type="textarea"
|
||||
:rows="8"
|
||||
placeholder="批量导入支持两种格式： 1. 每行一个凭据内容（使用上方默认内部 SKU / 凭据类型 / 批次 / 库存组） 2. 每行一条：内部SKU|凭据类型|批次号|库存组|凭据内容"
|
||||
class="bulk-input"
|
||||
/>
|
||||
<p class="helper-text helper-text--spaced">
|
||||
示例：sjz_hdl_test01|claim_code|sjz-20260412|A组|DJQFf7HgXXXXXXXXXX
|
||||
</p>
|
||||
|
||||
<div class="action-row">
|
||||
<el-button :loading="importing" round type="primary" @click="submitImport"
|
||||
>批量导入</el-button
|
||||
>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@import '../../../../styles/admin-list-pages.css';
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.3fr 0.95fr 0.85fr 1fr 1fr;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.sku-input-wrap {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.autocomplete-option {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.autocomplete-option span {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.single-row,
|
||||
.action-row {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.single-row :deep(.el-input) {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.helper-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.helper-item {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(248, 250, 252, 0.72);
|
||||
}
|
||||
|
||||
.helper-title {
|
||||
color: #2559a7;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
.helper-copy {
|
||||
min-width: 0;
|
||||
color: #334155;
|
||||
line-height: 1.6;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.sku-helper-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
.helper-text {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.helper-text--spaced {
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.bulk-input {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.sku-chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.sku-chip {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
.sku-chip-title {
|
||||
min-width: 0;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sku-chip-meta {
|
||||
min-width: 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.form-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.form-grid,
|
||||
.helper-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.form-grid,
|
||||
.helper-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.single-row,
|
||||
.action-row,
|
||||
.sku-helper-bar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,107 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
adminInventoryCredentialTypeOptions,
|
||||
adminInventoryStatusOptions,
|
||||
} from '@/utils/admin-options'
|
||||
|
||||
const filterSkuCode = defineModel<string>('filterSkuCode', { required: true })
|
||||
const filterCredentialType = defineModel<string>('filterCredentialType', { required: true })
|
||||
const filterStatus = defineModel<string>('filterStatus', { required: true })
|
||||
const filterBatchNo = defineModel<string>('filterBatchNo', { required: true })
|
||||
const filterInventoryGroupCode = defineModel<string>('filterInventoryGroupCode', { required: true })
|
||||
|
||||
defineProps<{
|
||||
loadInventoryItems: (page?: number) => Promise<void>
|
||||
resetFilters: () => void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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="form-grid">
|
||||
<el-input
|
||||
v-model="filterSkuCode"
|
||||
placeholder="内部履约 SKU，例如 sjz_hdl_test01"
|
||||
clearable
|
||||
@keyup.enter="loadInventoryItems(1)"
|
||||
/>
|
||||
<el-select v-model="filterCredentialType" placeholder="凭据类型" clearable>
|
||||
<el-option
|
||||
v-for="opt in adminInventoryCredentialTypeOptions"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select v-model="filterStatus" placeholder="状态" clearable>
|
||||
<el-option
|
||||
v-for="opt in adminInventoryStatusOptions"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-input
|
||||
v-model="filterBatchNo"
|
||||
placeholder="批次号"
|
||||
clearable
|
||||
@keyup.enter="loadInventoryItems(1)"
|
||||
/>
|
||||
<el-input
|
||||
v-model="filterInventoryGroupCode"
|
||||
placeholder="库存组，例如 A组"
|
||||
clearable
|
||||
@keyup.enter="loadInventoryItems(1)"
|
||||
/>
|
||||
</div>
|
||||
<div class="action-row">
|
||||
<el-button round type="primary" @click="loadInventoryItems(1)">查询列表</el-button>
|
||||
<el-button round @click="resetFilters">清空筛选</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@import '../../../../styles/admin-list-pages.css';
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.3fr 0.95fr 0.85fr 1fr 1fr;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.form-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.form-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.action-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,242 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { InventoryPoolGroup } from '../composables/types'
|
||||
|
||||
defineProps<{
|
||||
inventoryGroups: InventoryPoolGroup[]
|
||||
pageOverview: { skuCount: number; groupCount: number }
|
||||
pageSummary: {
|
||||
availableCount: number
|
||||
reservedCount: number
|
||||
deliveredCount: number
|
||||
invalidCount: number
|
||||
}
|
||||
useGroupAsFilter: (group: InventoryPoolGroup) => void
|
||||
useGroupAsEntry: (group: InventoryPoolGroup) => void
|
||||
getCredentialTypeLabel: (value: string) => string
|
||||
getGroupSuggestion: (group: InventoryPoolGroup) => string
|
||||
formatAdminDateTime: (value: string) => string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="summary-grid">
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">当前页内部 SKU</span>
|
||||
<strong class="stat-value">{{ pageOverview.skuCount }}</strong>
|
||||
<span class="stat-meta">当前页去重后的内部履约 SKU 数量</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">当前页库存池</span>
|
||||
<strong class="stat-value">{{ pageOverview.groupCount }}</strong>
|
||||
<span class="stat-meta">按 内部履约 SKU + 凭据类型 聚合后的池子数量</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">可立即分配</span>
|
||||
<strong class="stat-value">{{ pageSummary.availableCount }}</strong>
|
||||
<span class="stat-meta">当前页还能直接被任务预占的库存项</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">预占中</span>
|
||||
<strong class="stat-value">{{ pageSummary.reservedCount }}</strong>
|
||||
<span class="stat-meta">当前页已经被任务锁定的库存项</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pool-section">
|
||||
<div class="card-header pool-section-header">
|
||||
<span class="card-title">当前页库存池概览</span>
|
||||
<span class="card-desc"
|
||||
>先看哪组内部履约 SKU 还有量，再决定补库存、查任务，还是切去人工履约。</span
|
||||
>
|
||||
</div>
|
||||
<div class="pool-grid">
|
||||
<el-card v-for="group in inventoryGroups" :key="group.key" shadow="never" class="pool-card">
|
||||
<div class="pool-topline">
|
||||
<div class="pool-title-block">
|
||||
<h4 class="pool-title">{{ group.skuCode }}</h4>
|
||||
<span class="pool-subtitle"
|
||||
>{{ getCredentialTypeLabel(group.credentialType) }} · {{ group.credentialType }} ·
|
||||
{{ group.inventoryGroupCode || '未分组' }}</span
|
||||
>
|
||||
</div>
|
||||
<span class="pool-total">共 {{ group.totalCount }} 条</span>
|
||||
</div>
|
||||
|
||||
<div class="pool-stats">
|
||||
<span class="pool-stat">可用 {{ group.availableCount }}</span>
|
||||
<span class="pool-stat">预占 {{ group.reservedCount }}</span>
|
||||
<span class="pool-stat">发放 {{ group.deliveredCount }}</span>
|
||||
<span class="pool-stat">作废 {{ group.invalidCount }}</span>
|
||||
</div>
|
||||
|
||||
<div class="pool-meta">
|
||||
<span>批次 {{ group.batchSummary }}</span>
|
||||
<span>最近更新 {{ formatAdminDateTime(group.latestUpdatedAt) }}</span>
|
||||
</div>
|
||||
|
||||
<p class="pool-suggestion">{{ getGroupSuggestion(group) }}</p>
|
||||
|
||||
<div class="pool-actions">
|
||||
<el-button round @click="useGroupAsFilter(group)">只看这个池</el-button>
|
||||
<el-button round type="primary" @click="useGroupAsEntry(group)">作为入库目标</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
min-width: 0;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.16);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(248, 250, 252, 0.72);
|
||||
}
|
||||
.stat-label {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 30px;
|
||||
line-height: 1;
|
||||
color: var(--text-primary);
|
||||
display: block;
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.stat-meta {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
display: block;
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
.pool-section {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.pool-section-header {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.pool-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.pool-card {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
background: rgba(248, 250, 252, 0.68);
|
||||
}
|
||||
|
||||
.pool-topline {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
align-items: flex-start;
|
||||
}
|
||||
.pool-title-block {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
.pool-title {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
font-size: var(--text-base);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pool-subtitle {
|
||||
min-width: 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pool-total {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
min-height: 30px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(37, 89, 167, 0.08);
|
||||
border: 1px solid rgba(37, 89, 167, 0.12);
|
||||
color: #2559a7;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
.pool-stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.pool-stat {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 30px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgba(37, 89, 167, 0.08);
|
||||
color: #1d4f91;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
.pool-meta {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
word-break: break-word;
|
||||
}
|
||||
.pool-suggestion {
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.pool-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.summary-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.summary-grid,
|
||||
.pool-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.summary-grid,
|
||||
.pool-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,222 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
|
||||
import type { AdminInventoryItemListItem } from '@/types/admin'
|
||||
import { hasAdminRole } from '@/utils/admin-auth'
|
||||
|
||||
import { invalidateAdminInventoryItem, releaseAdminInventoryItem } from '@/services/admin'
|
||||
|
||||
defineProps<{
|
||||
loading: boolean
|
||||
items: AdminInventoryItemListItem[]
|
||||
pagination: { page: number; pageSize: number; total: number }
|
||||
pageSummary: { availableCount: number; reservedCount: number; deliveredCount: number; invalidCount: number }
|
||||
actionLoadingId: number | null
|
||||
loadInventoryItems: (page?: number) => Promise<void>
|
||||
runRowAction: (id: number, action: () => Promise<unknown>, msg: string, confirm: string) => Promise<void>
|
||||
formatInventoryStatus: (item: AdminInventoryItemListItem) => string
|
||||
getCredentialTypeLabel: (value: string) => string
|
||||
formatAdminDateTime: (value: string) => string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="table-toolbar">
|
||||
当前筛选共 {{ pagination.total }} 条，本页可用 {{ pageSummary.availableCount }} 条，预占
|
||||
{{ pageSummary.reservedCount }} 条，已发放 {{ pageSummary.deliveredCount }} 条，作废
|
||||
{{ pageSummary.invalidCount }} 条。
|
||||
</div>
|
||||
|
||||
<el-table :data="items" stripe size="small" class="inventory-table data-table">
|
||||
<el-table-column label="库存项" min-width="200">
|
||||
<template #default="{ row }">
|
||||
<div class="item-cell">
|
||||
<RouterLink
|
||||
v-if="row.reservedByTaskNo"
|
||||
:to="`/admin/tasks/${row.reservedByTaskNo}`"
|
||||
class="item-title"
|
||||
>#{{ row.inventoryItemId }}</RouterLink
|
||||
>
|
||||
<span v-else class="item-title">#{{ row.inventoryItemId }}</span>
|
||||
<code class="item-value">{{ row.displayValue }}</code>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="内部履约 SKU" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<div class="sku-cell">
|
||||
<span class="sku-title">{{ row.skuCode }}</span>
|
||||
<span class="sku-subline">{{ getCredentialTypeLabel(row.credentialType) }}</span>
|
||||
<span class="sku-subline sku-raw">{{ row.credentialType || '-' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="批次 / 库存组" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<div class="info-cell">
|
||||
<span class="info-subline">批次 {{ row.batchNo || '未分批' }}</span>
|
||||
<span class="info-subline">库存组 {{ row.inventoryGroupCode || '未分组' }}</span>
|
||||
<span class="status-copy">{{ formatInventoryStatus(row) }}</span>
|
||||
<span v-if="row.invalidReason" class="status-warning"
|
||||
>原因：{{ row.invalidReason }}</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态 / 绑定" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<div class="status-stack">
|
||||
<AdminStatusTag :status="row.status" />
|
||||
<AdminStatusTag :status="row.systemBindingStatus" />
|
||||
<AdminStatusTag :status="row.userBindingStatus" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="关联任务 / 订单" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<div class="info-cell">
|
||||
<span class="link-title">{{ row.reservedByTaskNo || '-' }}</span>
|
||||
<span class="link-subline">任务号</span>
|
||||
<span class="link-title">{{ row.platformOrderId || '-' }}</span>
|
||||
<span class="link-subline">平台订单号</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="时间" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<div class="info-cell">
|
||||
<span class="time-line">入库 {{ formatAdminDateTime(row.createdAt) }}</span>
|
||||
<span class="time-line">更新 {{ formatAdminDateTime(row.updatedAt) }}</span>
|
||||
<span v-if="row.deliveredAt" class="time-line"
|
||||
>发放 {{ formatAdminDateTime(row.deliveredAt) }}</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120" align="center">
|
||||
<template #default="{ row }">
|
||||
<div class="action-stack">
|
||||
<el-button
|
||||
v-if="hasAdminRole('admin') && row.status === 'reserved'"
|
||||
:loading="actionLoadingId === row.inventoryItemId"
|
||||
size="small"
|
||||
@click="
|
||||
runRowAction(
|
||||
row.inventoryItemId,
|
||||
() => releaseAdminInventoryItem(row.inventoryItemId),
|
||||
'库存项已释放',
|
||||
`确认释放库存项 #${row.inventoryItemId} 吗？释放后任务需要重新分配库存。`,
|
||||
)
|
||||
"
|
||||
>释放</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="hasAdminRole('admin') && row.status === 'available'"
|
||||
:loading="actionLoadingId === row.inventoryItemId"
|
||||
size="small"
|
||||
type="danger"
|
||||
plain
|
||||
@click="
|
||||
runRowAction(
|
||||
row.inventoryItemId,
|
||||
() =>
|
||||
invalidateAdminInventoryItem(row.inventoryItemId, {
|
||||
reason: '后台手动作废',
|
||||
}),
|
||||
'库存项已作废',
|
||||
`确认作废库存项 #${row.inventoryItemId} 吗？作废后不会再参与自动分配。`,
|
||||
)
|
||||
"
|
||||
>作废</el-button
|
||||
>
|
||||
</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="loadInventoryItems"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@import '../../../../styles/admin-list-pages.css';
|
||||
|
||||
.table-toolbar {
|
||||
margin-bottom: var(--space-2);
|
||||
padding-top: var(--space-2);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.6;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.item-cell,
|
||||
.sku-cell,
|
||||
.info-cell {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.item-title,
|
||||
.sku-title,
|
||||
.link-title {
|
||||
color: var(--text-primary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
width: fit-content;
|
||||
padding: 6px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(15, 23, 42, 0.06);
|
||||
color: #0f172a;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.info-subline,
|
||||
.sku-subline,
|
||||
.link-subline,
|
||||
.time-line,
|
||||
.status-copy {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.sku-raw {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.status-stack,
|
||||
.action-stack {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
}
|
||||
.action-stack {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
color: #b54708;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.status-stack,
|
||||
.action-stack {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,21 +0,0 @@
|
||||
export type InventoryImportRow = {
|
||||
skuCode: string
|
||||
credentialType: string
|
||||
batchNo: string
|
||||
inventoryGroupCode: string
|
||||
displayValue: string
|
||||
}
|
||||
|
||||
export type InventoryPoolGroup = {
|
||||
key: string
|
||||
skuCode: string
|
||||
credentialType: string
|
||||
inventoryGroupCode: string
|
||||
totalCount: number
|
||||
availableCount: number
|
||||
reservedCount: number
|
||||
deliveredCount: number
|
||||
invalidCount: number
|
||||
latestUpdatedAt: string
|
||||
batchSummary: string
|
||||
}
|
||||
@@ -1,429 +0,0 @@
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
|
||||
import { showConfirm, showError, showSuccess } from '@/lib/feedback'
|
||||
import {
|
||||
createAdminInventoryItem,
|
||||
fetchAdminInventoryItems,
|
||||
fetchAdminInventorySkuSuggestions,
|
||||
importAdminInventoryItems,
|
||||
} from '@/services/admin'
|
||||
import type {
|
||||
AdminInventoryItemListItem,
|
||||
AdminInventorySkuSuggestion,
|
||||
AdminPagination,
|
||||
} from '@/types/admin'
|
||||
import { formatAdminDateTime } from '@/utils/admin-time'
|
||||
import {
|
||||
adminInventoryCredentialTypeOptions,
|
||||
adminInventoryStatusOptions,
|
||||
} from '@/utils/admin-options'
|
||||
|
||||
import type { InventoryImportRow, InventoryPoolGroup } from './types'
|
||||
|
||||
export function useAdminInventory() {
|
||||
const loading = ref(true)
|
||||
const importing = ref(false)
|
||||
const creating = ref(false)
|
||||
const actionLoadingId = ref<number | null>(null)
|
||||
const errorMessage = ref('')
|
||||
|
||||
const filterSkuCode = ref('')
|
||||
const filterCredentialType = ref('')
|
||||
const filterStatus = ref('')
|
||||
const filterBatchNo = ref('')
|
||||
const filterInventoryGroupCode = ref('')
|
||||
|
||||
const entrySkuCode = ref('')
|
||||
const entryCredentialType = ref('claim_code')
|
||||
const entryBatchNo = ref('')
|
||||
const entryInventoryGroupCode = ref('')
|
||||
const singleDisplayValue = ref('')
|
||||
const bulkText = ref('')
|
||||
const skuSuggestionsLoading = ref(false)
|
||||
const inventorySkuSuggestions = ref<AdminInventorySkuSuggestion[]>([])
|
||||
|
||||
const items = ref<AdminInventoryItemListItem[]>([])
|
||||
const pagination = ref<AdminPagination>({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
})
|
||||
|
||||
const pageSummary = computed(() => {
|
||||
const availableCount = items.value.filter((item) => item.status === 'available').length
|
||||
const reservedCount = items.value.filter((item) => item.status === 'reserved').length
|
||||
const deliveredCount = items.value.filter((item) => item.status === 'consumed').length
|
||||
const invalidCount = items.value.filter((item) => item.status === 'invalid').length
|
||||
return { availableCount, reservedCount, deliveredCount, invalidCount }
|
||||
})
|
||||
|
||||
const inventoryGroups = computed<InventoryPoolGroup[]>(() => {
|
||||
const groupMap = new Map<
|
||||
string,
|
||||
{
|
||||
skuCode: string
|
||||
credentialType: string
|
||||
inventoryGroupCode: string
|
||||
totalCount: number
|
||||
availableCount: number
|
||||
reservedCount: number
|
||||
deliveredCount: number
|
||||
invalidCount: number
|
||||
latestUpdatedAt: string
|
||||
batches: Set<string>
|
||||
}
|
||||
>()
|
||||
|
||||
for (const item of items.value) {
|
||||
const key = `${item.skuCode}::${item.credentialType || 'claim_code'}::${item.inventoryGroupCode || ''}`
|
||||
const current = groupMap.get(key) || {
|
||||
skuCode: item.skuCode,
|
||||
credentialType: item.credentialType || 'claim_code',
|
||||
inventoryGroupCode: item.inventoryGroupCode || '',
|
||||
totalCount: 0,
|
||||
availableCount: 0,
|
||||
reservedCount: 0,
|
||||
deliveredCount: 0,
|
||||
invalidCount: 0,
|
||||
latestUpdatedAt: item.updatedAt,
|
||||
batches: new Set<string>(),
|
||||
}
|
||||
|
||||
current.totalCount += 1
|
||||
if (item.status === 'available') current.availableCount += 1
|
||||
else if (item.status === 'reserved') current.reservedCount += 1
|
||||
else if (item.status === 'consumed') current.deliveredCount += 1
|
||||
else if (item.status === 'invalid') current.invalidCount += 1
|
||||
|
||||
if (item.batchNo) current.batches.add(item.batchNo)
|
||||
if (String(item.updatedAt || '') > String(current.latestUpdatedAt || ''))
|
||||
current.latestUpdatedAt = item.updatedAt
|
||||
groupMap.set(key, current)
|
||||
}
|
||||
|
||||
return Array.from(groupMap.entries())
|
||||
.map(([key, value]) => ({
|
||||
key,
|
||||
skuCode: value.skuCode,
|
||||
credentialType: value.credentialType,
|
||||
inventoryGroupCode: value.inventoryGroupCode,
|
||||
totalCount: value.totalCount,
|
||||
availableCount: value.availableCount,
|
||||
reservedCount: value.reservedCount,
|
||||
deliveredCount: value.deliveredCount,
|
||||
invalidCount: value.invalidCount,
|
||||
latestUpdatedAt: value.latestUpdatedAt,
|
||||
batchSummary:
|
||||
value.batches.size > 0 ? Array.from(value.batches).slice(0, 3).join(' / ') : '未分批',
|
||||
}))
|
||||
.sort((left, right) => {
|
||||
if (right.availableCount !== left.availableCount)
|
||||
return right.availableCount - left.availableCount
|
||||
if (right.reservedCount !== left.reservedCount)
|
||||
return right.reservedCount - left.reservedCount
|
||||
return left.skuCode.localeCompare(right.skuCode)
|
||||
})
|
||||
})
|
||||
|
||||
const pageOverview = computed(() => ({
|
||||
skuCount: new Set(items.value.map((item) => item.skuCode)).size,
|
||||
groupCount: inventoryGroups.value.length,
|
||||
}))
|
||||
|
||||
const entrySkuSuggestions = computed(() => {
|
||||
const keyword = entrySkuCode.value.trim().toLowerCase()
|
||||
const suggestions = inventorySkuSuggestions.value.filter(
|
||||
(item) => item.credentialType === entryCredentialType.value,
|
||||
)
|
||||
if (!keyword) return suggestions.slice(0, 12)
|
||||
return suggestions.filter((item) => item.skuCode.toLowerCase().includes(keyword)).slice(0, 12)
|
||||
})
|
||||
|
||||
function getCredentialTypeLabel(value: string) {
|
||||
const normalized = String(value || '').trim()
|
||||
const option = adminInventoryCredentialTypeOptions.find((item) => item.value === normalized)
|
||||
return option?.label || normalized || '-'
|
||||
}
|
||||
|
||||
function getCredentialTypeHint(value: string) {
|
||||
const normalized = String(value || '').trim()
|
||||
if (normalized === 'claim_code')
|
||||
return '当前领取链路会优先预占这一类兑换码，快手云履约等场景可按内部 SKU 统一匹配。'
|
||||
if (normalized === 'card_password') return '适合卡号 / 卡密一体的库存项。'
|
||||
if (normalized === 'account_password') return '适合账号密码、账号令牌等组合凭据。'
|
||||
if (normalized === 'activation_link') return '适合直接发链接的激活类库存。'
|
||||
if (normalized === 'text_credential') return '适合任意纯文本凭据。'
|
||||
return '库存预占时会按凭据类型与内部履约 SKU 一起匹配。'
|
||||
}
|
||||
|
||||
function getSkuNamingHint() {
|
||||
if (entrySkuSuggestions.value.length > 0)
|
||||
return `当前凭据类型下已有 ${entrySkuSuggestions.value.length} 个可复用的内部 SKU，也可以直接输入新的中文或英文名称。`
|
||||
return '内部 SKU 支持中文、英文、数字和常见连接符。建议同一类商品长期使用同一个命名，方便共用库存池。'
|
||||
}
|
||||
|
||||
function formatInventoryStatus(item: AdminInventoryItemListItem) {
|
||||
if (item.status === 'consumed') return '已完成发放'
|
||||
if (item.status === 'reserved') return '已被任务预占'
|
||||
if (item.status === 'invalid') return '已手动作废'
|
||||
return '可参与后续自动分配'
|
||||
}
|
||||
|
||||
function getGroupSuggestion(group: InventoryPoolGroup) {
|
||||
if (group.availableCount > 0)
|
||||
return `当前还有 ${group.availableCount} 条可直接分配的库存，可以继续承接订单。`
|
||||
if (group.reservedCount > 0)
|
||||
return `当前没有可用库存，但有 ${group.reservedCount} 条正在被任务预占，建议优先检查任务进度。`
|
||||
if (group.deliveredCount > 0 && group.invalidCount === 0)
|
||||
return '当前页看到的库存都已经发放完成，若继续售卖需要补新的库存项。'
|
||||
if (group.invalidCount > 0 && group.totalCount === group.invalidCount)
|
||||
return '当前页这组库存都已作废，建议重新补充可用库存。'
|
||||
return '当前页没有可立即分配的库存，建议补库存或检查对应履约任务。'
|
||||
}
|
||||
|
||||
function useGroupAsFilter(group: InventoryPoolGroup) {
|
||||
filterSkuCode.value = group.skuCode
|
||||
filterCredentialType.value = group.credentialType
|
||||
filterInventoryGroupCode.value = group.inventoryGroupCode
|
||||
void loadInventoryItems(1)
|
||||
}
|
||||
|
||||
function useGroupAsEntry(group: InventoryPoolGroup) {
|
||||
entrySkuCode.value = group.skuCode
|
||||
entryCredentialType.value = group.credentialType
|
||||
entryInventoryGroupCode.value = group.inventoryGroupCode
|
||||
if (group.batchSummary !== '未分批' && !group.batchSummary.includes(' / '))
|
||||
entryBatchNo.value = group.batchSummary
|
||||
showSuccess(
|
||||
`已把 ${group.skuCode} / ${group.credentialType} / ${group.inventoryGroupCode || '未分组'} 填入入库表单`,
|
||||
)
|
||||
}
|
||||
|
||||
function applySkuSuggestion(skuCode: string) {
|
||||
entrySkuCode.value = String(skuCode || '').trim()
|
||||
}
|
||||
|
||||
function buildImportRows() {
|
||||
const lines = bulkText.value
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter(Boolean)
|
||||
const rows: InventoryImportRow[] = []
|
||||
const defaultSkuCode = entrySkuCode.value.trim()
|
||||
const defaultCredentialType = entryCredentialType.value.trim() || 'claim_code'
|
||||
const defaultBatchNo = entryBatchNo.value.trim()
|
||||
|
||||
for (let index = 0; index < lines.length; index += 1) {
|
||||
const line = lines[index]
|
||||
if (line.includes('|')) {
|
||||
const parts = line.split('|').map((part) => part.trim())
|
||||
if (parts.length !== 4 && parts.length !== 5)
|
||||
throw new Error(
|
||||
`第 ${index + 1} 行格式不正确，请使用 内部SKU|凭据类型|批次号|库存组|凭据内容`,
|
||||
)
|
||||
const [skuCode, credentialType, batchNo, inventoryGroupCode, displayValue] =
|
||||
parts.length === 5 ? parts : [parts[0], parts[1], parts[2], '', parts[3]]
|
||||
if (!skuCode || !displayValue) throw new Error(`第 ${index + 1} 行缺少内部 SKU 或凭据内容`)
|
||||
rows.push({
|
||||
skuCode,
|
||||
credentialType: credentialType || defaultCredentialType,
|
||||
batchNo,
|
||||
inventoryGroupCode: inventoryGroupCode || entryInventoryGroupCode.value.trim(),
|
||||
displayValue,
|
||||
})
|
||||
continue
|
||||
}
|
||||
if (!defaultSkuCode)
|
||||
throw new Error('存在未带内部 SKU 的行，请先填写默认内部履约 SKU，或改用四列导入格式')
|
||||
rows.push({
|
||||
skuCode: defaultSkuCode,
|
||||
credentialType: defaultCredentialType,
|
||||
batchNo: defaultBatchNo,
|
||||
inventoryGroupCode: entryInventoryGroupCode.value.trim(),
|
||||
displayValue: line,
|
||||
})
|
||||
}
|
||||
return rows
|
||||
}
|
||||
|
||||
async function loadInventoryItems(page = pagination.value.page) {
|
||||
loading.value = true
|
||||
errorMessage.value = ''
|
||||
try {
|
||||
const response = await fetchAdminInventoryItems({
|
||||
page,
|
||||
pageSize: pagination.value.pageSize,
|
||||
skuCode: filterSkuCode.value.trim(),
|
||||
credentialType: filterCredentialType.value.trim(),
|
||||
status: filterStatus.value.trim(),
|
||||
batchNo: filterBatchNo.value.trim(),
|
||||
inventoryGroupCode: filterInventoryGroupCode.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
|
||||
}
|
||||
}
|
||||
|
||||
async function loadInventorySkuSuggestions() {
|
||||
skuSuggestionsLoading.value = true
|
||||
try {
|
||||
const response = await fetchAdminInventorySkuSuggestions({
|
||||
credentialType: entryCredentialType.value.trim() || 'claim_code',
|
||||
inventoryGroupCode: entryInventoryGroupCode.value.trim(),
|
||||
limit: 50,
|
||||
})
|
||||
inventorySkuSuggestions.value = response.data.items
|
||||
} catch (error) {
|
||||
showError(error instanceof Error ? error.message : '读取内部 SKU 建议失败')
|
||||
} finally {
|
||||
skuSuggestionsLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
filterSkuCode.value = ''
|
||||
filterCredentialType.value = ''
|
||||
filterStatus.value = ''
|
||||
filterBatchNo.value = ''
|
||||
filterInventoryGroupCode.value = ''
|
||||
void loadInventoryItems(1)
|
||||
}
|
||||
|
||||
async function submitCreate() {
|
||||
if (!entrySkuCode.value.trim() || !singleDisplayValue.value.trim()) {
|
||||
showError('请先填写内部履约 SKU 和凭据内容')
|
||||
return
|
||||
}
|
||||
creating.value = true
|
||||
try {
|
||||
await createAdminInventoryItem({
|
||||
skuCode: entrySkuCode.value.trim(),
|
||||
credentialType: entryCredentialType.value.trim() || 'claim_code',
|
||||
batchNo: entryBatchNo.value.trim(),
|
||||
inventoryGroupCode: entryInventoryGroupCode.value.trim(),
|
||||
displayValue: singleDisplayValue.value.trim(),
|
||||
})
|
||||
showSuccess('库存项已新增')
|
||||
singleDisplayValue.value = ''
|
||||
await loadInventoryItems(1)
|
||||
} catch (error) {
|
||||
showError(error instanceof Error ? error.message : '新增库存项失败')
|
||||
} finally {
|
||||
creating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function submitImport() {
|
||||
const rawLines = bulkText.value
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter(Boolean)
|
||||
if (rawLines.length === 0) {
|
||||
showError('请至少输入一条待导入库存')
|
||||
return
|
||||
}
|
||||
importing.value = true
|
||||
try {
|
||||
const rows = buildImportRows()
|
||||
const response = await importAdminInventoryItems({ rows })
|
||||
showSuccess(`导入完成，新增 ${response.data.created} 条，重复 ${response.data.duplicated} 条`)
|
||||
bulkText.value = ''
|
||||
await loadInventoryItems(1)
|
||||
} catch (error) {
|
||||
showError(error instanceof Error ? error.message : '导入失败')
|
||||
} finally {
|
||||
importing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function runRowAction(
|
||||
inventoryItemId: number,
|
||||
action: () => Promise<unknown>,
|
||||
successMessage: string,
|
||||
confirmText: string,
|
||||
) {
|
||||
try {
|
||||
await showConfirm(confirmText, '确认操作', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '继续执行',
|
||||
cancelButtonText: '取消',
|
||||
})
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
actionLoadingId.value = inventoryItemId
|
||||
try {
|
||||
await action()
|
||||
showSuccess(successMessage)
|
||||
await loadInventoryItems()
|
||||
} catch (error) {
|
||||
showError(error instanceof Error ? error.message : '操作失败')
|
||||
} finally {
|
||||
actionLoadingId.value = null
|
||||
}
|
||||
}
|
||||
|
||||
watch(entryCredentialType, () => {
|
||||
void loadInventorySkuSuggestions()
|
||||
})
|
||||
watch(entryInventoryGroupCode, () => {
|
||||
void loadInventorySkuSuggestions()
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([loadInventoryItems(), loadInventorySkuSuggestions()])
|
||||
})
|
||||
|
||||
return {
|
||||
// state
|
||||
loading,
|
||||
importing,
|
||||
creating,
|
||||
actionLoadingId,
|
||||
errorMessage,
|
||||
items,
|
||||
pagination,
|
||||
pageSummary,
|
||||
pageOverview,
|
||||
inventoryGroups,
|
||||
// filter
|
||||
filterSkuCode,
|
||||
filterCredentialType,
|
||||
filterStatus,
|
||||
filterBatchNo,
|
||||
filterInventoryGroupCode,
|
||||
// entry
|
||||
entrySkuCode,
|
||||
entryCredentialType,
|
||||
entryBatchNo,
|
||||
entryInventoryGroupCode,
|
||||
singleDisplayValue,
|
||||
bulkText,
|
||||
skuSuggestionsLoading,
|
||||
inventorySkuSuggestions,
|
||||
entrySkuSuggestions,
|
||||
// actions
|
||||
loadInventoryItems,
|
||||
resetFilters,
|
||||
submitCreate,
|
||||
submitImport,
|
||||
runRowAction,
|
||||
useGroupAsFilter,
|
||||
useGroupAsEntry,
|
||||
applySkuSuggestion,
|
||||
// formatters
|
||||
getCredentialTypeLabel,
|
||||
getCredentialTypeHint,
|
||||
getSkuNamingHint,
|
||||
formatInventoryStatus,
|
||||
getGroupSuggestion,
|
||||
// utils
|
||||
formatAdminDateTime,
|
||||
adminInventoryCredentialTypeOptions,
|
||||
adminInventoryStatusOptions,
|
||||
}
|
||||
}
|
||||
@@ -2,9 +2,7 @@
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import {
|
||||
Box,
|
||||
Monitor,
|
||||
Connection,
|
||||
DataAnalysis,
|
||||
Document,
|
||||
Expand,
|
||||
@@ -35,7 +33,6 @@ const isSidebarCollapsed = ref(
|
||||
|
||||
const currentRole = computed(() => getAdminRole())
|
||||
const isAdmin = computed(() => currentRole.value === 'admin')
|
||||
const isOperator = computed(() => currentRole.value === 'operator')
|
||||
|
||||
const roleLabel = computed(() => {
|
||||
if (currentRole.value === 'admin') return '管理员'
|
||||
@@ -57,14 +54,6 @@ const navItems = computed(() => {
|
||||
{ to: '/admin/tasks', label: '任务', icon: List },
|
||||
)
|
||||
|
||||
if (isAdmin.value || isOperator.value) {
|
||||
items.push({ to: '/admin/inventory', label: '库存', icon: Box })
|
||||
}
|
||||
|
||||
if (isAdmin.value || isOperator.value) {
|
||||
items.push({ to: '/admin/webhook-events', label: 'Webhook', icon: Connection })
|
||||
}
|
||||
|
||||
if (isAdmin.value) {
|
||||
items.push(
|
||||
{ to: '/admin/platform-shops', label: '平台配置', icon: Setting },
|
||||
|
||||
@@ -5,12 +5,7 @@ import { useRoute } from 'vue-router'
|
||||
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
|
||||
import { fetchAdminOrderDetail } from '@/services/admin'
|
||||
import type { AdminOrderDetail } from '@/types/admin'
|
||||
import {
|
||||
formatBindingRoleSummary,
|
||||
formatBindingCountSummary,
|
||||
} from '@/utils/admin-display'
|
||||
import { formatAdminDateTime } from '@/utils/admin-time'
|
||||
import { formatAdminWebhookEventType } from '@/utils/admin-webhook'
|
||||
|
||||
const route = useRoute()
|
||||
const loading = ref(true)
|
||||
@@ -104,15 +99,6 @@ function formatSpecSummary(spec: Record<string, unknown>) {
|
||||
系统绑定</small
|
||||
>
|
||||
</el-card>
|
||||
<el-card shadow="never" class="info-tile">
|
||||
<span>库存绑定</span>
|
||||
<strong>{{ detail.order.bindingSummary.totalBindingCount }} 条绑定记录</strong>
|
||||
<small
|
||||
>预占 {{ detail.order.bindingSummary.reservedBindingCount }} · 已消费
|
||||
{{ detail.order.bindingSummary.consumedBindingCount }} · 已释放
|
||||
{{ detail.order.bindingSummary.releasedBindingCount }}</small
|
||||
>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<el-table :data="[detail.order]" size="small" :show-header="false">
|
||||
@@ -176,14 +162,6 @@ function formatSpecSummary(spec: Record<string, unknown>) {
|
||||
<AdminStatusTag :status="row.userBindingStatus" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存绑定">
|
||||
<template #default="{ row }">
|
||||
<div>{{ formatBindingCountSummary(row.bindingSummary) }}</div>
|
||||
<div class="binding-copy">
|
||||
角色 {{ formatBindingRoleSummary(row.bindingSummary.roleKeys) }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="登录方式">
|
||||
<template #default="{ row }">{{ row.loginType || '-' }}</template>
|
||||
</el-table-column>
|
||||
@@ -193,43 +171,6 @@ function formatSpecSummary(spec: Record<string, unknown>) {
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="section-card">
|
||||
<h3>Webhook 摘要</h3>
|
||||
<el-table :data="detail.webhookEvents" size="small">
|
||||
<el-table-column label="事件 ID">
|
||||
<template #default="{ row }">
|
||||
<RouterLink :to="`/admin/webhook-events/${row.eventId}`">{{
|
||||
row.eventId
|
||||
}}</RouterLink>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型">
|
||||
<template #default="{ row }">{{ formatAdminWebhookEventType(row.eventType) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="平台 / 店铺">
|
||||
<template #default="{ row }"
|
||||
>{{ row.platform }} / {{ row.shopName || row.shopId || '-' }}</template
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column label="验签">
|
||||
<template #default="{ row }">
|
||||
<AdminStatusTag :status="row.signatureValid ? 'success' : 'failed'" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="处理">
|
||||
<template #default="{ row }">
|
||||
<AdminStatusTag :status="row.processed ? 'success' : 'failed'" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="时间" width="180">
|
||||
<template #default="{ row }">{{ formatAdminDateTime(row.createdAt) }}</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="当前订单还没有关联的 webhook 记录" />
|
||||
</template>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="section-card">
|
||||
<h3>原始载荷</h3>
|
||||
<details class="payload-box">
|
||||
|
||||
@@ -5,7 +5,6 @@ import {
|
||||
closeAdminTask,
|
||||
markAdminTaskManualReview,
|
||||
regenerateAdminTaskClaimLink,
|
||||
releaseAdminTaskInventoryBinding,
|
||||
retryAdminTask,
|
||||
} from '@/services/admin'
|
||||
|
||||
@@ -14,7 +13,6 @@ import AdminTaskActionBar from './components/AdminTaskActionBar.vue'
|
||||
import AdminTaskEventsSection from './components/AdminTaskEventsSection.vue'
|
||||
import AdminTaskHeroSection from './components/AdminTaskHeroSection.vue'
|
||||
import AdminTaskInfoSection from './components/AdminTaskInfoSection.vue'
|
||||
import AdminTaskInventoryBindingsSection from './components/AdminTaskInventoryBindingsSection.vue'
|
||||
import AdminTaskManualDispatchSection from './components/AdminTaskManualDispatchSection.vue'
|
||||
import AdminTaskRedeemResolutionSection from './components/AdminTaskRedeemResolutionSection.vue'
|
||||
import AdminTaskScreenshotSection from './components/AdminTaskScreenshotSection.vue'
|
||||
@@ -135,20 +133,6 @@ onMounted(loadDetail)
|
||||
|
||||
<AdminTaskRedeemResolutionSection v-if="detail.redeemResolution" :detail="detail" />
|
||||
|
||||
<AdminTaskInventoryBindingsSection
|
||||
v-if="!isKuaishouCloudTask"
|
||||
:detail="detail"
|
||||
:can-view-sensitive-task-data="canViewSensitiveTaskData"
|
||||
:action-loading="actionLoading"
|
||||
@release-binding="
|
||||
runAction(
|
||||
() => releaseAdminTaskInventoryBinding(detail!.task.taskId, $event),
|
||||
'库存绑定已释放',
|
||||
`确认释放该库存绑定吗？`,
|
||||
)
|
||||
"
|
||||
/>
|
||||
|
||||
<AdminTaskManualDispatchSection
|
||||
v-if="detail.task.executorKey === 'manual_dispatch'"
|
||||
:detail="detail"
|
||||
|
||||
@@ -14,10 +14,6 @@ import {
|
||||
} from "@/services/admin";
|
||||
import type { AdminTaskListItem } from "@/types/admin";
|
||||
import { hasAdminRole } from "@/utils/admin-auth";
|
||||
import {
|
||||
formatBindingRoleSummary,
|
||||
formatBindingCountSummary,
|
||||
} from "@/utils/admin-display";
|
||||
import { adminTaskStatusOptions } from "@/utils/admin-options";
|
||||
import { formatAdminDateTime } from "@/utils/admin-time";
|
||||
|
||||
@@ -140,7 +136,7 @@ onMounted(() => {
|
||||
<div class="tasks-page list-page">
|
||||
<AdminPageHeader
|
||||
title="交付任务"
|
||||
description="更紧凑地查看任务状态、角色绑定、库存凭据和异常信息。"
|
||||
description="更紧凑地查看任务状态、角色绑定和异常信息。"
|
||||
>
|
||||
<template #extra>
|
||||
<span class="total-badge">共 {{ pagination.total }} 条任务</span>
|
||||
@@ -292,7 +288,7 @@ onMounted(() => {
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="角色 / 凭据" min-width="180">
|
||||
<el-table-column label="角色信息" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<div class="cell-stack">
|
||||
<span
|
||||
@@ -306,32 +302,6 @@ onMounted(() => {
|
||||
<span class="cell-subline"
|
||||
>登录 {{ row.loginType || "-" }}</span
|
||||
>
|
||||
<span
|
||||
class="cell-subline"
|
||||
:title="row.inventoryDisplayMasked || '-'"
|
||||
>凭据 {{ row.inventoryDisplayMasked || "-" }}</span
|
||||
>
|
||||
<span
|
||||
class="cell-subline"
|
||||
:title="
|
||||
formatBindingRoleSummary(
|
||||
row.bindingSummary.roleKeys,
|
||||
'无绑定角色'
|
||||
)
|
||||
"
|
||||
>绑定
|
||||
{{
|
||||
formatBindingRoleSummary(
|
||||
row.bindingSummary.roleKeys,
|
||||
"无绑定角色"
|
||||
)
|
||||
}}</span
|
||||
>
|
||||
<span
|
||||
class="cell-subline cell-subline--strong"
|
||||
:title="formatBindingCountSummary(row.bindingSummary)"
|
||||
>{{ formatBindingCountSummary(row.bindingSummary) }}</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -367,11 +337,7 @@ onMounted(() => {
|
||||
v-if="canManageTaskLifecycle"
|
||||
:disabled="
|
||||
row.executorKey === 'manual_dispatch' ||
|
||||
![
|
||||
'retry_pending',
|
||||
'manual_review',
|
||||
'waiting_inventory',
|
||||
].includes(row.status)
|
||||
!['retry_pending', 'manual_review'].includes(row.status)
|
||||
"
|
||||
:loading="actionLoadingId === row.taskId"
|
||||
size="small"
|
||||
|
||||
@@ -36,21 +36,12 @@ defineProps<Props>()
|
||||
{{ detail.task.resultMessage || '-' }}
|
||||
</el-descriptions-item>
|
||||
<template v-if="canViewSensitiveTaskData">
|
||||
<el-descriptions-item label="库存凭据">
|
||||
{{ detail.inventory?.displayValue || '-' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="凭据类型">
|
||||
{{ detail.inventory?.credentialType || '-' }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="库存状态">
|
||||
<AdminStatusTag :status="detail.inventory?.status || ''" />
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Claim Token">
|
||||
{{ detail.claimToken?.token || '-' }}
|
||||
</el-descriptions-item>
|
||||
</template>
|
||||
<el-descriptions-item v-else label="库存 / Token" :span="2">
|
||||
客服账号不可查看库存凭据与原始领取 Token
|
||||
<el-descriptions-item v-else label="Claim Token" :span="2">
|
||||
客服账号不可查看原始领取 Token
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="Token 状态">
|
||||
<AdminStatusTag :status="detail.claimToken?.status || ''" />
|
||||
|
||||
@@ -1,98 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
|
||||
import type { AdminTaskDetail } from '@/types/admin'
|
||||
import { hasAdminRole } from '@/utils/admin-auth'
|
||||
import { formatAdminDateTime } from '@/utils/admin-time'
|
||||
|
||||
interface Props {
|
||||
detail: AdminTaskDetail
|
||||
canViewSensitiveTaskData: boolean
|
||||
actionLoading: boolean
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
releaseBinding: [bindingId: number]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never" class="section-card">
|
||||
<h3>库存绑定</h3>
|
||||
<p class="section-copy">
|
||||
这里展示任务当前和历史绑定过的库存项，便于核对多库存任务的真实履约轨迹。
|
||||
</p>
|
||||
<el-table :data="detail.inventoryBindings" size="small">
|
||||
<el-table-column label="绑定" width="100">
|
||||
<template #default="{ row: binding }">
|
||||
<div>#{{ binding.bindingId }}</div>
|
||||
<div v-if="binding.isPrimary" class="binding-primary">主库存项</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="角色" min-width="120">
|
||||
<template #default="{ row: binding }">
|
||||
<div>{{ binding.roleKey || '-' }}</div>
|
||||
<div class="binding-meta">数量 {{ binding.quantity }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存项" min-width="180">
|
||||
<template #default="{ row: binding }">
|
||||
<div>ID {{ binding.inventoryItemId }}</div>
|
||||
<div>{{ binding.skuCode || '-' }}</div>
|
||||
<div class="binding-meta">
|
||||
{{ binding.credentialType || '-' }} ·
|
||||
{{ binding.batchNo || '无批次' }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" min-width="160">
|
||||
<template #default="{ row: binding }">
|
||||
<div class="status-stack">
|
||||
<AdminStatusTag :status="binding.bindingStatus" />
|
||||
<AdminStatusTag :status="binding.inventoryStatus" />
|
||||
</div>
|
||||
<div v-if="binding.invalidReason" class="binding-meta">
|
||||
{{
|
||||
binding.inventoryStatus === 'invalid'
|
||||
? '作废原因'
|
||||
: binding.inventoryStatus === 'consumed'
|
||||
? '消耗原因'
|
||||
: '处理原因'
|
||||
}}：{{ binding.invalidReason }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="凭据内容" min-width="180">
|
||||
<template #default="{ row: binding }">
|
||||
{{ canViewSensitiveTaskData ? binding.displayValue || '-' : '客服不可见' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="时间" min-width="180">
|
||||
<template #default="{ row: binding }">
|
||||
<div>绑定 {{ formatAdminDateTime(binding.createdAt) }}</div>
|
||||
<div class="binding-meta">消费 {{ formatAdminDateTime(binding.consumedAt) }}</div>
|
||||
<div class="binding-meta">释放 {{ formatAdminDateTime(binding.releasedAt) }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="{ row: binding }">
|
||||
<el-button
|
||||
v-if="hasAdminRole('admin') && binding.canRelease"
|
||||
:loading="actionLoading"
|
||||
link
|
||||
@click="emit('releaseBinding', binding.bindingId)"
|
||||
>
|
||||
释放绑定
|
||||
</el-button>
|
||||
<span v-else class="binding-meta">-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template #empty>
|
||||
<el-empty description="当前任务还没有库存绑定记录" :image-size="60" />
|
||||
</template>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped src="../AdminTaskDetail.css"></style>
|
||||
@@ -40,7 +40,7 @@ defineProps<Props>()
|
||||
<el-card
|
||||
shadow="never"
|
||||
v-for="attempt in detail.redeemResolution!.attempts"
|
||||
:key="`${attempt.attempt}-${attempt.inventoryItemId || 'na'}`"
|
||||
:key="attempt.attempt"
|
||||
class="redeem-attempt-card"
|
||||
>
|
||||
<div class="redeem-attempt-head">
|
||||
@@ -48,10 +48,6 @@ defineProps<Props>()
|
||||
<span class="redeem-outcome">{{ formatRedeemOutcomeLabel(attempt.outcome) }}</span>
|
||||
</div>
|
||||
<div class="redeem-attempt-grid">
|
||||
<div>
|
||||
<span>库存项</span>
|
||||
<strong>{{ attempt.inventoryItemId ? `#${attempt.inventoryItemId}` : '-' }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>凭据</span>
|
||||
<strong>{{ attempt.codeMasked || '-' }}</strong>
|
||||
|
||||
@@ -26,11 +26,9 @@ const {
|
||||
updateRole,
|
||||
toggleStatus,
|
||||
promptResetPassword,
|
||||
promptUpdateInventoryGroups,
|
||||
// formatters
|
||||
isCurrentUser,
|
||||
formatRoleLabel,
|
||||
formatInventoryGroups,
|
||||
// utils
|
||||
hasAdminRole,
|
||||
formatAdminDateTime,
|
||||
@@ -78,9 +76,7 @@ const {
|
||||
:update-role="updateRole"
|
||||
:toggle-status="toggleStatus"
|
||||
:prompt-reset-password="promptResetPassword"
|
||||
:prompt-update-inventory-groups="promptUpdateInventoryGroups"
|
||||
:format-role-label="formatRoleLabel"
|
||||
:format-inventory-groups="formatInventoryGroups"
|
||||
:format-admin-date-time="formatAdminDateTime"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -13,9 +13,7 @@ defineProps<{
|
||||
updateRole: (item: AdminUserListItem, nextRole: AdminRole) => Promise<void>
|
||||
toggleStatus: (item: AdminUserListItem) => Promise<void>
|
||||
promptResetPassword: (item: AdminUserListItem) => Promise<void>
|
||||
promptUpdateInventoryGroups: (item: AdminUserListItem) => Promise<void>
|
||||
formatRoleLabel: (role: AdminRole) => string
|
||||
formatInventoryGroups: (item: AdminUserListItem) => string[]
|
||||
formatAdminDateTime: (value: string) => string
|
||||
}>()
|
||||
</script>
|
||||
@@ -39,19 +37,6 @@ defineProps<{
|
||||
<el-table-column label="角色" width="82">
|
||||
<template #default="{ row }">{{ formatRoleLabel(row.role) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存组" width="112">
|
||||
<template #default="{ row }">
|
||||
<div class="inventory-tags">
|
||||
<el-tag
|
||||
v-for="(code, i) in formatInventoryGroups(row)"
|
||||
:key="i"
|
||||
size="small"
|
||||
:type="code === '未绑定' || code === '不限库存组' ? 'info' : undefined"
|
||||
>{{ code }}</el-tag
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="128">
|
||||
<template #default="{ row }"><AdminStatusTag :status="row.status" /></template>
|
||||
</el-table-column>
|
||||
@@ -101,13 +86,6 @@ defineProps<{
|
||||
@click="toggleStatus(row)"
|
||||
>{{ row.status === 'active' ? '停用' : '启用' }}</el-button
|
||||
>
|
||||
<el-button
|
||||
:loading="actionLoadingId === row.userId"
|
||||
size="small"
|
||||
:disabled="row.role !== 'support'"
|
||||
@click="promptUpdateInventoryGroups(row)"
|
||||
>配库存组</el-button
|
||||
>
|
||||
<el-button
|
||||
:loading="actionLoadingId === row.userId"
|
||||
size="small"
|
||||
@@ -163,15 +141,6 @@ defineProps<{
|
||||
.users-table :deep(.el-table__body tr:hover > td.el-table__cell) {
|
||||
background: var(--el-table-row-hover-bg-color);
|
||||
}
|
||||
.inventory-tags {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.inventory-tags :deep(.el-tag) {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.date-cell {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -11,7 +11,6 @@ import {
|
||||
createAdminUser,
|
||||
fetchAdminUsers,
|
||||
resetAdminUserPassword,
|
||||
updateAdminUserInventoryGroups,
|
||||
updateAdminUserRole,
|
||||
updateAdminUserStatus,
|
||||
} from '@/services/admin'
|
||||
@@ -44,12 +43,6 @@ export function useAdminUsers() {
|
||||
return '普通运营'
|
||||
}
|
||||
|
||||
function formatInventoryGroups(item: AdminUserListItem) {
|
||||
if (item.role !== 'support') return ['不限库存组']
|
||||
if (item.inventoryGroupCodes.length === 0) return ['未绑定']
|
||||
return item.inventoryGroupCodes
|
||||
}
|
||||
|
||||
async function loadUsers(page = pagination.value.page) {
|
||||
if (!hasAdminRole('admin')) {
|
||||
loading.value = false
|
||||
@@ -170,39 +163,6 @@ export function useAdminUsers() {
|
||||
}
|
||||
}
|
||||
|
||||
async function promptUpdateInventoryGroups(item: AdminUserListItem) {
|
||||
if (item.role !== 'support') {
|
||||
showError('仅客服账号需要绑定库存组')
|
||||
return
|
||||
}
|
||||
try {
|
||||
const result = await showPrompt(
|
||||
`请输入 ${item.username} 可用的库存组，多个组用英文逗号分隔`,
|
||||
'配置库存组',
|
||||
{
|
||||
inputType: 'text',
|
||||
inputValue: item.inventoryGroupCodes.join(','),
|
||||
inputPlaceholder: '例如 A组,B组,售后组',
|
||||
confirmButtonText: '保存',
|
||||
cancelButtonText: '取消',
|
||||
},
|
||||
)
|
||||
const inventoryGroupCodes = String(result.value || '')
|
||||
.split(',')
|
||||
.map((v) => v.trim())
|
||||
.filter(Boolean)
|
||||
actionLoadingId.value = item.userId
|
||||
await updateAdminUserInventoryGroups(item.userId, { inventoryGroupCodes })
|
||||
showSuccess('用户库存组已更新')
|
||||
await loadUsers()
|
||||
} catch (error) {
|
||||
if (isFeedbackDismissed(error)) return
|
||||
showError(error instanceof Error ? error.message : '更新库存组失败')
|
||||
} finally {
|
||||
actionLoadingId.value = null
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadUsers)
|
||||
|
||||
return {
|
||||
@@ -227,11 +187,9 @@ export function useAdminUsers() {
|
||||
updateRole,
|
||||
toggleStatus,
|
||||
promptResetPassword,
|
||||
promptUpdateInventoryGroups,
|
||||
// formatters
|
||||
isCurrentUser,
|
||||
formatRoleLabel,
|
||||
formatInventoryGroups,
|
||||
// utils
|
||||
hasAdminRole,
|
||||
formatAdminDateTime,
|
||||
|
||||
@@ -1,354 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
import { showConfirm, showError, showSuccess } from '@/lib/feedback'
|
||||
import { fetchAdminWebhookEventDetail, replayAdminWebhookEvent } from '@/services/admin'
|
||||
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
|
||||
import type { AdminWebhookEventDetail, AdminWebhookReplayResponse } from '@/types/admin'
|
||||
import { hasAdminRole } from '@/utils/admin-auth'
|
||||
import { formatAdminDateTime } from '@/utils/admin-time'
|
||||
import { stringifyDisplayJson } from '@/utils/date-time'
|
||||
import { formatAdminWebhookEventType } from '@/utils/admin-webhook'
|
||||
|
||||
const route = useRoute()
|
||||
const loading = ref(true)
|
||||
const replayLoading = ref(false)
|
||||
const errorMessage = ref('')
|
||||
const detail = ref<AdminWebhookEventDetail | null>(null)
|
||||
const lastReplayResult = ref<AdminWebhookReplayResponse['result'] | null>(null)
|
||||
|
||||
async function loadDetail() {
|
||||
loading.value = true
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
const response = await fetchAdminWebhookEventDetail(String(route.params.eventId || ''))
|
||||
detail.value = response.data
|
||||
} catch (error) {
|
||||
errorMessage.value = error instanceof Error ? error.message : '读取 webhook 详情失败'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function submitReplay() {
|
||||
if (!detail.value) {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await showConfirm(
|
||||
`确认重放 webhook #${detail.value.eventId} 吗？这会重新推进订单与任务处理。`,
|
||||
'确认重放',
|
||||
{
|
||||
type: 'warning',
|
||||
confirmButtonText: '继续重放',
|
||||
cancelButtonText: '取消',
|
||||
},
|
||||
)
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
|
||||
replayLoading.value = true
|
||||
|
||||
try {
|
||||
const response = await replayAdminWebhookEvent(detail.value.eventId)
|
||||
lastReplayResult.value = response.data.result
|
||||
showSuccess(`Webhook 已重放，生成/更新任务 ${response.data.result.taskCount} 条`)
|
||||
await loadDetail()
|
||||
} catch (error) {
|
||||
showError(error instanceof Error ? error.message : '重放 webhook 失败')
|
||||
} finally {
|
||||
replayLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function prettyJson(value: Record<string, unknown>) {
|
||||
return stringifyDisplayJson(value, 2)
|
||||
}
|
||||
|
||||
function formatRequestTimestamp(value: string) {
|
||||
const normalized = String(value || '').trim()
|
||||
|
||||
if (!/^\d{10,13}$/.test(normalized)) {
|
||||
return normalized || '-'
|
||||
}
|
||||
|
||||
const epochMs = normalized.length === 13 ? Number(normalized) : Number(normalized) * 1000
|
||||
return formatAdminDateTime(new Date(epochMs).toISOString())
|
||||
}
|
||||
|
||||
function formatAmount(detail: AdminWebhookEventDetail) {
|
||||
return detail.totalAmount ? `${detail.totalAmount} ${detail.currency}` : '-'
|
||||
}
|
||||
|
||||
onMounted(loadDetail)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="admin-panel">
|
||||
<AdminPageHeader title="Webhook 详情" description="查看原始请求并手动重放处理流程。">
|
||||
<el-button
|
||||
v-if="hasAdminRole('admin')"
|
||||
:loading="replayLoading"
|
||||
round
|
||||
type="primary"
|
||||
@click="submitReplay"
|
||||
>重放处理</el-button
|
||||
>
|
||||
</AdminPageHeader>
|
||||
|
||||
<el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon :closable="false" />
|
||||
<el-skeleton v-if="loading" :rows="8" animated />
|
||||
|
||||
<template v-else-if="detail">
|
||||
<el-card shadow="never" class="section-card">
|
||||
<div class="overview-top">
|
||||
<div>
|
||||
<h3>{{ formatAdminWebhookEventType(detail.eventType) }}</h3>
|
||||
<p class="muted-copy">
|
||||
#{{ detail.eventId }} · {{ detail.provider }} / {{ detail.platform }}
|
||||
<template v-if="detail.platformRaw && detail.platformRaw !== detail.platform">
|
||||
· 原始平台 {{ detail.platformRaw }}
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
<div class="tag-row">
|
||||
<AdminStatusTag :status="detail.signatureValid ? 'success' : 'failed'" />
|
||||
<AdminStatusTag :status="detail.processed ? 'success' : 'failed'" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-grid">
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">店铺</span>
|
||||
<strong>{{ detail.shopName || detail.shopId || '-' }}</strong>
|
||||
<span class="summary-note">ID: {{ detail.shopId || '-' }}</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">平台订单</span>
|
||||
<strong>{{ detail.platformOrderId || '-' }}</strong>
|
||||
<span class="summary-note">aopic: {{ detail.aopic || '-' }}</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">关联订单</span>
|
||||
<strong v-if="detail.relatedOrderId">
|
||||
<RouterLink class="inline-link" :to="`/admin/orders/${detail.relatedOrderId}`">{{
|
||||
detail.relatedOrderId
|
||||
}}</RouterLink>
|
||||
</strong>
|
||||
<strong v-else>-</strong>
|
||||
<span class="summary-note">任务数: {{ detail.taskCount }}</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">买家</span>
|
||||
<strong>{{ detail.buyerName || detail.buyerId || '-' }}</strong>
|
||||
<span class="summary-note">买家 ID: {{ detail.buyerId || '-' }}</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">金额</span>
|
||||
<strong>{{ formatAmount(detail) }}</strong>
|
||||
<span class="summary-note">商品数: {{ detail.itemCount }}</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">请求时间</span>
|
||||
<strong>{{ formatRequestTimestamp(detail.requestTimestamp) }}</strong>
|
||||
<span class="summary-note">入库时间: {{ formatAdminDateTime(detail.createdAt) }}</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">来源 Host</span>
|
||||
<strong>{{ detail.sourceHost || '-' }}</strong>
|
||||
<span class="summary-note">来源 IP: {{ detail.sourceIp || '-' }}</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">消息说明</span>
|
||||
<strong>{{ detail.messageText || '-' }}</strong>
|
||||
<span class="summary-note">签名: {{ detail.requestSign || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="event-key-block">
|
||||
<span class="summary-label">事件 Key</span>
|
||||
<code>{{ detail.eventKey }}</code>
|
||||
</div>
|
||||
|
||||
<div v-if="detail.processError" class="inline-error">{{ detail.processError }}</div>
|
||||
</el-card>
|
||||
|
||||
<el-card v-if="lastReplayResult" shadow="never" class="section-card">
|
||||
<h3>最近一次重放结果</h3>
|
||||
<p class="result-copy">
|
||||
{{ lastReplayResult.provider }} / {{ lastReplayResult.platform }}
|
||||
<template
|
||||
v-if="
|
||||
lastReplayResult.platformRaw &&
|
||||
lastReplayResult.platformRaw !== lastReplayResult.platform
|
||||
"
|
||||
>
|
||||
· 原始平台 {{ lastReplayResult.platformRaw }}
|
||||
</template>
|
||||
· 平台订单 {{ lastReplayResult.platformOrderId }} · 事件
|
||||
{{ formatAdminWebhookEventType(lastReplayResult.eventType) }} · 任务数
|
||||
{{ lastReplayResult.taskCount }}
|
||||
</p>
|
||||
<el-table :data="lastReplayResult.tasks" size="small">
|
||||
<el-table-column prop="taskId" label="任务 ID" />
|
||||
<el-table-column prop="taskNo" label="任务号" />
|
||||
<el-table-column label="状态">
|
||||
<template #default="{ row }">
|
||||
<AdminStatusTag :status="row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="section-card">
|
||||
<h3>解析后的 Payload</h3>
|
||||
<pre class="json-block">{{ prettyJson(detail.payload) }}</pre>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="section-card">
|
||||
<h3>Headers</h3>
|
||||
<pre class="json-block">{{ prettyJson(detail.headers) }}</pre>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="section-card">
|
||||
<h3>Query</h3>
|
||||
<pre class="json-block">{{ prettyJson(detail.query) }}</pre>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="section-card">
|
||||
<h3>Body</h3>
|
||||
<pre class="json-block">{{ prettyJson(detail.body) }}</pre>
|
||||
</el-card>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.admin-panel {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.overview-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.overview-top h3,
|
||||
.section-card h3 {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.muted-copy {
|
||||
margin: var(--space-2) 0 0;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.tag-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 14px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-page);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.summary-item strong {
|
||||
color: var(--text-primary);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.summary-note {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.event-key-block {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-4);
|
||||
padding: 14px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-page);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.event-key-block code {
|
||||
color: var(--text-primary);
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.6;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.inline-error {
|
||||
margin-top: var(--space-4);
|
||||
padding: var(--space-3) 14px;
|
||||
border-radius: 14px;
|
||||
color: var(--color-danger);
|
||||
background: var(--color-danger-light);
|
||||
border: 1px solid #fecdca;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.result-copy {
|
||||
margin: var(--space-3) 0;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.inline-link {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.json-block {
|
||||
margin: var(--space-3) 0 0;
|
||||
padding: 14px;
|
||||
border-radius: 14px;
|
||||
background: #0f172a;
|
||||
color: #e2e8f0;
|
||||
overflow-y: auto;
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.overview-top {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,415 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
import { useAdminListPage } from "@/composables/useAdminListPage";
|
||||
import { useAdminListQuerySync } from "@/composables/useAdminListQuerySync";
|
||||
import AdminPageHeader from "@/components/admin/AdminPageHeader.vue";
|
||||
import AdminStatusTag from "@/components/admin/AdminStatusTag.vue";
|
||||
import { showConfirm, showError, showSuccess } from "@/lib/feedback";
|
||||
import {
|
||||
fetchAdminWebhookEvents,
|
||||
replayAdminWebhookEvent,
|
||||
} from "@/services/admin";
|
||||
import type { AdminWebhookEventListItem } from "@/types/admin";
|
||||
import { hasAdminRole } from "@/utils/admin-auth";
|
||||
import { formatAdminDateTime } from "@/utils/admin-time";
|
||||
import { formatAdminWebhookEventType } from "@/utils/admin-webhook";
|
||||
import {
|
||||
adminWebhookProcessedOptions,
|
||||
adminWebhookVisibilityOptions,
|
||||
} from "@/utils/admin-options";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { readQueryString, readQueryPage, syncRouteQuery } =
|
||||
useAdminListQuerySync(route, router);
|
||||
|
||||
const actionLoadingId = ref<number | null>(null);
|
||||
const provider = ref(readQueryString("provider"));
|
||||
const platform = ref(readQueryString("platform"));
|
||||
const platformOrderId = ref(readQueryString("platformOrderId"));
|
||||
const processed = ref(readQueryString("processed"));
|
||||
const visibility = ref(readQueryString("visibility") || "important");
|
||||
const relatedOrderId = ref(readQueryString("relatedOrderId"));
|
||||
const dateRange = ref<string[]>(
|
||||
[readQueryString("dateFrom"), readQueryString("dateTo")].filter(Boolean)
|
||||
);
|
||||
const canReplay = hasAdminRole("admin");
|
||||
|
||||
const {
|
||||
loading,
|
||||
errorMessage,
|
||||
items,
|
||||
pagination,
|
||||
loadPage: loadEvents,
|
||||
} = useAdminListPage<AdminWebhookEventListItem>({
|
||||
defaultErrorMessage: "读取 webhook 列表失败",
|
||||
fetchPage: (page, pageSize) =>
|
||||
fetchAdminWebhookEvents({
|
||||
page,
|
||||
pageSize,
|
||||
provider: provider.value.trim(),
|
||||
platform: platform.value.trim(),
|
||||
platformOrderId: platformOrderId.value.trim(),
|
||||
processed: processed.value.trim(),
|
||||
visibility: visibility.value.trim(),
|
||||
relatedOrderId: relatedOrderId.value.trim(),
|
||||
dateFrom: dateRange.value[0] || "",
|
||||
dateTo: dateRange.value[1] || "",
|
||||
}),
|
||||
});
|
||||
|
||||
const summary = computed(() => ({
|
||||
processedCount: items.value.filter((item) => item.processed).length,
|
||||
failedCount: items.value.filter(
|
||||
(item) => !item.processed || Boolean(item.processError)
|
||||
).length,
|
||||
importantCount: items.value.filter(
|
||||
(item) => item.visibilityLevel === "important"
|
||||
).length,
|
||||
}));
|
||||
|
||||
async function submitReplay(item: AdminWebhookEventListItem) {
|
||||
try {
|
||||
await showConfirm(`确认重放 webhook #${item.eventId} 吗？`, "确认重放", {
|
||||
type: "warning",
|
||||
confirmButtonText: "继续重放",
|
||||
cancelButtonText: "取消",
|
||||
});
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
actionLoadingId.value = item.eventId;
|
||||
try {
|
||||
await replayAdminWebhookEvent(item.eventId);
|
||||
showSuccess("Webhook 已重放");
|
||||
await loadEvents();
|
||||
} catch (error) {
|
||||
showError(error instanceof Error ? error.message : "重放 webhook 失败");
|
||||
} finally {
|
||||
actionLoadingId.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
provider.value = "";
|
||||
platform.value = "";
|
||||
platformOrderId.value = "";
|
||||
processed.value = "";
|
||||
visibility.value = "important";
|
||||
relatedOrderId.value = "";
|
||||
dateRange.value = [];
|
||||
void applyFilters(1);
|
||||
}
|
||||
|
||||
async function applyFilters(page = 1) {
|
||||
await syncRouteQuery(page, {
|
||||
provider: provider.value,
|
||||
platform: platform.value,
|
||||
platformOrderId: platformOrderId.value,
|
||||
processed: processed.value,
|
||||
visibility: visibility.value,
|
||||
relatedOrderId: relatedOrderId.value,
|
||||
dateFrom: dateRange.value[0] || "",
|
||||
dateTo: dateRange.value[1] || "",
|
||||
});
|
||||
await loadEvents(page);
|
||||
}
|
||||
|
||||
function formatVisibilityLabel(value: string) {
|
||||
return value === "ignored" ? "已忽略" : "重要";
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void applyFilters(readQueryPage());
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="webhooks-page list-page">
|
||||
<AdminPageHeader
|
||||
title="Webhook 日志"
|
||||
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">筛选 Webhook</span>
|
||||
<span class="card-desc"
|
||||
>按服务商、平台、处理状态、可见级别等条件筛选。</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<div class="filter-grid">
|
||||
<el-input
|
||||
v-model="provider"
|
||||
class="filter-control"
|
||||
placeholder="服务商，如 91kaquan"
|
||||
clearable
|
||||
@keyup.enter="applyFilters(1)"
|
||||
/>
|
||||
<el-input
|
||||
v-model="platform"
|
||||
class="filter-control"
|
||||
placeholder="业务平台，如 kuaishou"
|
||||
clearable
|
||||
@keyup.enter="applyFilters(1)"
|
||||
/>
|
||||
<el-select
|
||||
v-model="processed"
|
||||
class="filter-control"
|
||||
placeholder="处理结果"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="opt in adminWebhookProcessedOptions"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="visibility"
|
||||
class="filter-control"
|
||||
placeholder="可见级别"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="opt in adminWebhookVisibilityOptions"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-input
|
||||
v-model="platformOrderId"
|
||||
class="filter-control"
|
||||
placeholder="平台订单号"
|
||||
clearable
|
||||
@keyup.enter="applyFilters(1)"
|
||||
/>
|
||||
<el-input
|
||||
v-model="relatedOrderId"
|
||||
class="filter-control"
|
||||
placeholder="后台订单 ID"
|
||||
clearable
|
||||
@keyup.enter="applyFilters(1)"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
class="filter-control"
|
||||
type="daterange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
range-separator="至"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
<div class="filter-buttons">
|
||||
<el-button round @click="resetFilters">重置</el-button>
|
||||
<el-button round type="primary" @click="applyFilters(1)"
|
||||
>查询</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 摘要 -->
|
||||
<div v-if="!loading && items.length > 0" class="summary-strip">
|
||||
<span class="summary-title">当前页</span>
|
||||
<span class="summary-metric" data-tone="success"
|
||||
>处理成功 <strong>{{ summary.processedCount }}</strong></span
|
||||
>
|
||||
<span class="summary-metric" data-tone="danger"
|
||||
>异常/失败 <strong>{{ summary.failedCount }}</strong></span
|
||||
>
|
||||
<span class="summary-metric" data-tone="primary"
|
||||
>重要事件 <strong>{{ summary.importantCount }}</strong></span
|
||||
>
|
||||
</div>
|
||||
|
||||
<el-alert
|
||||
v-if="errorMessage"
|
||||
:title="errorMessage"
|
||||
type="error"
|
||||
show-icon
|
||||
:closable="false"
|
||||
class="mt-4"
|
||||
/>
|
||||
|
||||
<!-- 列表 -->
|
||||
<el-card
|
||||
shadow="never"
|
||||
class="section-card"
|
||||
v-loading="loading"
|
||||
element-loading-text="Webhook 列表加载中"
|
||||
>
|
||||
<template v-if="items.length === 0 && !loading">
|
||||
<el-empty
|
||||
description="当前筛选条件下暂无 Webhook 事件"
|
||||
:image-size="60"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="orders-toolbar table-toolbar">
|
||||
<strong>Webhook 列表</strong>
|
||||
<span
|
||||
>第 {{ pagination.page }} 页，当前展示 {{ items.length }} 条</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
:data="items"
|
||||
stripe
|
||||
size="small"
|
||||
class="orders-table data-table"
|
||||
>
|
||||
<el-table-column label="事件ID" width="100">
|
||||
<template #default="{ row }">
|
||||
<RouterLink
|
||||
:to="`/admin/webhook-events/${row.eventId}`"
|
||||
class="order-no id-link"
|
||||
>
|
||||
#{{ row.eventId }}
|
||||
</RouterLink>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="事件类型" min-width="200">
|
||||
<template #default="{ row }">
|
||||
<div class="cell-stack">
|
||||
<span class="cell-title">{{
|
||||
formatAdminWebhookEventType(row.eventType)
|
||||
}}</span>
|
||||
<div class="cell-meta-row">
|
||||
<span class="compact-chip">{{ row.provider || "-" }}</span>
|
||||
<span class="compact-chip">{{ row.platform || "-" }}</span>
|
||||
<span class="compact-chip compact-chip--muted">{{
|
||||
row.shopName || row.shopId || "-"
|
||||
}}</span>
|
||||
</div>
|
||||
<span v-if="row.aopic" class="cell-subline"
|
||||
>aopic {{ row.aopic }}</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="平台订单号" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<div class="cell-stack">
|
||||
<span class="cell-title">{{ row.platformOrderId || "-" }}</span>
|
||||
<span v-if="row.totalAmount" class="cell-subline"
|
||||
>{{ row.totalAmount }} {{ row.currency }}</span
|
||||
>
|
||||
<span v-if="row.buyerName || row.buyerId" class="cell-subline"
|
||||
>买家 {{ row.buyerName || row.buyerId }}</span
|
||||
>
|
||||
<RouterLink
|
||||
v-if="row.relatedOrderId"
|
||||
class="inline-link"
|
||||
:to="`/admin/orders/${row.relatedOrderId}`"
|
||||
>
|
||||
关联订单 #{{ row.relatedOrderId }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" min-width="150">
|
||||
<template #default="{ row }">
|
||||
<div class="cell-stack">
|
||||
<div class="status-stack">
|
||||
<AdminStatusTag
|
||||
:status="row.processed ? 'success' : 'failed'"
|
||||
/>
|
||||
<AdminStatusTag
|
||||
:status="row.signatureValid ? 'success' : 'failed'"
|
||||
/>
|
||||
</div>
|
||||
<span class="cell-subline">{{
|
||||
formatVisibilityLabel(row.visibilityLevel)
|
||||
}}</span>
|
||||
<span v-if="row.processError" class="error-inline">{{
|
||||
row.processError
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<div class="cell-stack">
|
||||
<span class="cell-title">{{
|
||||
formatAdminDateTime(row.createdAt)
|
||||
}}</span>
|
||||
<span class="cell-subline">#{{ row.eventId }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="130" align="center">
|
||||
<template #default="{ row }">
|
||||
<div class="action-stack">
|
||||
<RouterLink
|
||||
:to="`/admin/webhook-events/${row.eventId}`"
|
||||
class="detail-link"
|
||||
>详情</RouterLink
|
||||
>
|
||||
<el-button
|
||||
v-if="canReplay"
|
||||
:loading="actionLoadingId === row.eventId"
|
||||
size="small"
|
||||
@click="submitReplay(row)"
|
||||
>重放</el-button
|
||||
>
|
||||
</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="applyFilters"
|
||||
/>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@import "../../../styles/admin-list-pages.css";
|
||||
|
||||
.filter-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.error-inline {
|
||||
display: block;
|
||||
color: var(--color-danger);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.inline-link {
|
||||
color: var(--color-primary-dark);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
.inline-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.action-stack {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user