1322 lines
39 KiB
Vue
1322 lines
39 KiB
Vue
<script setup lang="ts">
|
||
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
|
||
|
||
import { showSuccess } from '@/lib/feedback'
|
||
import {
|
||
fetchAdminFulfillmentBindingConfigs,
|
||
lookupAdminFulfillmentBindingOrder,
|
||
saveAdminFulfillmentBindingConfigs,
|
||
} from '@/services/admin'
|
||
import type {
|
||
AdminFulfillmentBindingConfigItem,
|
||
AdminFulfillmentLookupItem,
|
||
AdminFulfillmentLookupResult,
|
||
AdminObservedProductItem,
|
||
} from '@/types/admin'
|
||
import { hasAdminRole } from '@/utils/admin-auth'
|
||
import { formatAdminDateTime } from '@/utils/admin-time'
|
||
|
||
type EditableBinding = {
|
||
id: string
|
||
provider: string
|
||
platform: string
|
||
shopId: string
|
||
shopName: string
|
||
skuCode: string
|
||
skuName: string
|
||
profileKey: string
|
||
enabled: boolean
|
||
priority: number
|
||
externalSkuCode: string
|
||
externalItemId: string
|
||
externalSkuName: string
|
||
resolvedSkuName: string
|
||
}
|
||
|
||
type SaveBindingPayload = {
|
||
provider: string
|
||
platform: string
|
||
shopId: string
|
||
shopName: string
|
||
skuCode: string
|
||
skuName: string
|
||
profileKey: string
|
||
enabled: boolean
|
||
priority: number
|
||
match: {
|
||
externalSkuCode: string
|
||
externalItemId: string
|
||
externalSkuName: string
|
||
config: {
|
||
resolvedSkuName: string
|
||
}
|
||
}
|
||
}
|
||
|
||
type ValidationField = 'skuCode' | 'match' | 'profileKey' | 'shopId'
|
||
|
||
type ValidationState = {
|
||
bindingId: string
|
||
field: ValidationField
|
||
message: string
|
||
} | null
|
||
|
||
const PROFILE_OPTIONS = [
|
||
{ label: '腾讯领取兑换', value: 'tencent_claim_redeem' },
|
||
{ label: '腾讯领取兑换（半自动+人工）', value: 'tencent_claim_assisted' },
|
||
{ label: '快手 Cloud 履约', value: 'kuaishou_ct_assisted' },
|
||
{ label: '人工发货', value: 'manual_review' },
|
||
]
|
||
|
||
const loading = ref(true)
|
||
const saving = ref(false)
|
||
const errorMessage = ref('')
|
||
const filePath = ref('')
|
||
const bindings = ref<EditableBinding[]>([])
|
||
const observedProducts = ref<AdminObservedProductItem[]>([])
|
||
const lookupLoading = ref(false)
|
||
const lookupErrorMessage = ref('')
|
||
const lookupResult = ref<AdminFulfillmentLookupResult | null>(null)
|
||
const importedLookupLineIds = ref<string[]>([])
|
||
const VALID_PROFILE_KEYS = new Set(PROFILE_OPTIONS.map((item) => item.value))
|
||
const validationState = ref<ValidationState>(null)
|
||
const collapsedBindingIds = ref<string[]>([])
|
||
const lookupForm = reactive({
|
||
shopId: '',
|
||
platformOrderId: '',
|
||
})
|
||
|
||
const ruleMetrics = computed(() => {
|
||
const completedCount = bindings.value.filter(isEditableBindingComplete).length
|
||
const manualCount = bindings.value.filter((item) => item.profileKey.trim() === 'manual_review').length
|
||
const assistedCount = bindings.value.filter((item) => item.profileKey.trim() === 'tencent_claim_assisted').length
|
||
const kuaishouCloudCount = bindings.value.filter((item) => item.profileKey.trim() === 'kuaishou_ct_assisted').length
|
||
|
||
return {
|
||
totalCount: bindings.value.length,
|
||
completedCount,
|
||
draftCount: Math.max(bindings.value.length - completedCount, 0),
|
||
manualCount,
|
||
assistedCount,
|
||
kuaishouCloudCount,
|
||
}
|
||
})
|
||
|
||
const pendingObservedCount = computed(() => observedProducts.value.filter((item) => !item.configured).length)
|
||
|
||
type ImportableProductCandidate = Pick<
|
||
AdminObservedProductItem,
|
||
'provider' | 'platform' | 'shopId' | 'shopName' | 'externalSkuCode' | 'externalItemId' | 'externalSkuName'
|
||
> & {
|
||
}
|
||
|
||
function createEmptyBinding(): EditableBinding {
|
||
return {
|
||
id: crypto.randomUUID(),
|
||
provider: 'agiso',
|
||
platform: '',
|
||
shopId: '',
|
||
shopName: '',
|
||
skuCode: '',
|
||
skuName: '',
|
||
profileKey: 'manual_review',
|
||
enabled: true,
|
||
priority: 100,
|
||
externalSkuCode: '',
|
||
externalItemId: '',
|
||
externalSkuName: '',
|
||
resolvedSkuName: '',
|
||
}
|
||
}
|
||
|
||
function mapEditableBinding(item: AdminFulfillmentBindingConfigItem): EditableBinding {
|
||
return {
|
||
id: crypto.randomUUID(),
|
||
provider: item.provider || 'agiso',
|
||
platform: item.platform,
|
||
shopId: item.shopId,
|
||
shopName: item.shopName || '',
|
||
skuCode: item.skuCode,
|
||
skuName: item.skuName,
|
||
profileKey: item.profileKey || 'manual_review',
|
||
enabled: item.enabled !== false,
|
||
priority: item.priority || 100,
|
||
externalSkuCode: item.match.externalSkuCode,
|
||
externalItemId: item.match.externalItemId,
|
||
externalSkuName: item.match.externalSkuName,
|
||
resolvedSkuName: String(item.match.config?.resolvedSkuName || ''),
|
||
}
|
||
}
|
||
|
||
function hasMatchCondition(item: Pick<EditableBinding, 'externalSkuCode' | 'externalItemId' | 'externalSkuName'>) {
|
||
return Boolean(item.externalSkuCode.trim() || item.externalItemId.trim() || item.externalSkuName.trim())
|
||
}
|
||
|
||
function isEditableBindingComplete(item: EditableBinding) {
|
||
return Boolean(item.skuCode.trim() && hasMatchCondition(item) && VALID_PROFILE_KEYS.has(item.profileKey.trim() || 'manual_review'))
|
||
}
|
||
|
||
function buildCollapsedIds(items: EditableBinding[]) {
|
||
return items.filter(isEditableBindingComplete).map((item) => item.id)
|
||
}
|
||
|
||
function isBindingCollapsed(bindingId: string) {
|
||
return collapsedBindingIds.value.includes(bindingId)
|
||
}
|
||
|
||
function setBindingCollapsed(bindingId: string, collapsed: boolean) {
|
||
const next = new Set(collapsedBindingIds.value)
|
||
|
||
if (collapsed) {
|
||
next.add(bindingId)
|
||
} else {
|
||
next.delete(bindingId)
|
||
}
|
||
|
||
collapsedBindingIds.value = Array.from(next)
|
||
}
|
||
|
||
function toggleBindingCollapsed(bindingId: string) {
|
||
setBindingCollapsed(bindingId, !isBindingCollapsed(bindingId))
|
||
}
|
||
|
||
function getBindingTitle(binding: EditableBinding, index: number) {
|
||
const internalName = binding.skuName.trim()
|
||
const externalName = binding.externalSkuName.trim()
|
||
const skuCode = binding.skuCode.trim()
|
||
|
||
return internalName || externalName || skuCode || `规则 ${index + 1}`
|
||
}
|
||
|
||
function getBindingStatusLabel(binding: EditableBinding) {
|
||
return isEditableBindingComplete(binding) ? '已完成' : '待完善'
|
||
}
|
||
|
||
function getBindingSummary(binding: EditableBinding) {
|
||
const parts = [
|
||
binding.provider.trim() || 'agiso',
|
||
binding.platform.trim() || '未选平台',
|
||
binding.shopName.trim() || binding.shopId.trim() || '跨店铺',
|
||
binding.profileKey.trim() || 'manual_review',
|
||
]
|
||
|
||
return parts.join(' / ')
|
||
}
|
||
|
||
async function loadConfigs() {
|
||
if (!hasAdminRole('admin')) {
|
||
loading.value = false
|
||
return
|
||
}
|
||
|
||
loading.value = true
|
||
errorMessage.value = ''
|
||
|
||
try {
|
||
const response = await fetchAdminFulfillmentBindingConfigs()
|
||
filePath.value = response.data.filePath
|
||
const nextBindings = response.data.bindings.map(mapEditableBinding)
|
||
bindings.value = nextBindings
|
||
collapsedBindingIds.value = buildCollapsedIds(nextBindings)
|
||
observedProducts.value = response.data.observedProducts
|
||
} catch (error) {
|
||
errorMessage.value = error instanceof Error ? error.message : '读取履约配置失败'
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
function addBinding() {
|
||
validationState.value = null
|
||
const next = createEmptyBinding()
|
||
setBindingCollapsed(next.id, false)
|
||
bindings.value.unshift(next)
|
||
}
|
||
|
||
function removeBinding(id: string) {
|
||
if (validationState.value?.bindingId === id) {
|
||
validationState.value = null
|
||
}
|
||
setBindingCollapsed(id, false)
|
||
bindings.value = bindings.value.filter((item) => item.id !== id)
|
||
}
|
||
|
||
function createBindingFromProductCandidate(item: ImportableProductCandidate): EditableBinding {
|
||
const binding = {
|
||
id: crypto.randomUUID(),
|
||
provider: item.provider || 'agiso',
|
||
platform: item.platform,
|
||
shopId: item.shopId,
|
||
shopName: item.shopName,
|
||
skuCode: '',
|
||
skuName: item.externalSkuName,
|
||
profileKey: 'manual_review',
|
||
enabled: true,
|
||
priority: 100,
|
||
externalSkuCode: item.externalSkuCode,
|
||
externalItemId: item.externalItemId,
|
||
externalSkuName: item.externalSkuName,
|
||
resolvedSkuName: item.externalSkuName,
|
||
}
|
||
|
||
return binding
|
||
}
|
||
|
||
function importObservedProduct(item: ImportableProductCandidate) {
|
||
validationState.value = null
|
||
const nextBinding = createBindingFromProductCandidate(item)
|
||
setBindingCollapsed(nextBinding.id, false)
|
||
bindings.value.unshift(nextBinding)
|
||
}
|
||
|
||
function importLookupProduct(item: AdminFulfillmentLookupItem) {
|
||
importObservedProduct(item)
|
||
if (!importedLookupLineIds.value.includes(item.lineId)) {
|
||
importedLookupLineIds.value = [...importedLookupLineIds.value, item.lineId]
|
||
}
|
||
}
|
||
|
||
function isLookupProductImported(lineId: string) {
|
||
return importedLookupLineIds.value.includes(lineId)
|
||
}
|
||
|
||
function normalizeBindingForSave(item: EditableBinding): SaveBindingPayload {
|
||
return {
|
||
provider: item.provider.trim() || 'agiso',
|
||
platform: item.platform.trim(),
|
||
shopId: item.shopId.trim(),
|
||
shopName: item.shopName.trim(),
|
||
skuCode: item.skuCode.trim(),
|
||
skuName: item.skuName.trim(),
|
||
profileKey: item.profileKey.trim() || 'manual_review',
|
||
enabled: item.enabled,
|
||
priority: Number(item.priority || 100),
|
||
match: {
|
||
externalSkuCode: item.externalSkuCode.trim(),
|
||
externalItemId: item.externalItemId.trim(),
|
||
externalSkuName: item.externalSkuName.trim(),
|
||
config: {
|
||
resolvedSkuName: item.resolvedSkuName.trim(),
|
||
},
|
||
},
|
||
}
|
||
}
|
||
|
||
function hasBindingContent(item: SaveBindingPayload) {
|
||
return Boolean(
|
||
item.platform
|
||
|| item.shopId
|
||
|| item.shopName
|
||
|| item.skuCode
|
||
|| item.skuName
|
||
|| item.match.externalSkuCode
|
||
|| item.match.externalItemId
|
||
|| item.match.externalSkuName
|
||
|| item.match.config.resolvedSkuName
|
||
|| item.provider !== 'agiso'
|
||
|| item.profileKey !== 'manual_review'
|
||
|| item.priority !== 100
|
||
|| item.enabled !== true,
|
||
)
|
||
}
|
||
|
||
function resolveBindingValidationState(item: SaveBindingPayload, index: number, bindingId: string): ValidationState {
|
||
const label = `第 ${index + 1} 条规则`
|
||
|
||
if (!item.skuCode) {
|
||
return {
|
||
bindingId,
|
||
field: 'skuCode',
|
||
message: `${label} 还没填写“内部履约 SKU”`,
|
||
}
|
||
}
|
||
|
||
if (!item.match.externalSkuCode && !item.match.externalItemId && !item.match.externalSkuName) {
|
||
return {
|
||
bindingId,
|
||
field: 'match',
|
||
message: `${label} 至少填写一种外部匹配条件`,
|
||
}
|
||
}
|
||
|
||
if (!VALID_PROFILE_KEYS.has(item.profileKey)) {
|
||
return {
|
||
bindingId,
|
||
field: 'profileKey',
|
||
message: `${label} 的履约方式无效`,
|
||
}
|
||
}
|
||
|
||
return null
|
||
}
|
||
|
||
async function focusValidationTarget(state: ValidationState) {
|
||
if (!state?.bindingId) {
|
||
return
|
||
}
|
||
|
||
setBindingCollapsed(state.bindingId, false)
|
||
await nextTick()
|
||
|
||
const card = document.querySelector<HTMLElement>(`[data-binding-id="${state.bindingId}"]`)
|
||
if (!card) {
|
||
return
|
||
}
|
||
|
||
card.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||
|
||
const selectors: Record<ValidationField, string> = {
|
||
shopId: '[data-field="shopId"]',
|
||
skuCode: '[data-field="skuCode"]',
|
||
match: '[data-field="externalSkuCode"]',
|
||
profileKey: '[data-field="profileKey"]',
|
||
}
|
||
|
||
const target = card.querySelector<HTMLInputElement | HTMLSelectElement>(selectors[state.field])
|
||
target?.focus()
|
||
}
|
||
|
||
function clearValidationState() {
|
||
validationState.value = null
|
||
}
|
||
|
||
function isBindingInvalid(bindingId: string) {
|
||
return validationState.value?.bindingId === bindingId
|
||
}
|
||
|
||
function isFieldInvalid(bindingId: string, field: ValidationField | 'externalSkuCode' | 'externalItemId' | 'externalSkuName') {
|
||
if (validationState.value?.bindingId !== bindingId) {
|
||
return false
|
||
}
|
||
|
||
if (validationState.value.field === 'match') {
|
||
return ['externalSkuCode', 'externalItemId', 'externalSkuName'].includes(field)
|
||
}
|
||
|
||
return validationState.value.field === field
|
||
}
|
||
|
||
async function saveConfigs() {
|
||
const normalizedBindings = bindings.value.map(normalizeBindingForSave)
|
||
const nonEmptyBindings = normalizedBindings.filter(hasBindingContent)
|
||
const invalidState = normalizedBindings.reduce<ValidationState>((state, item, index) => {
|
||
if (state || !hasBindingContent(item)) {
|
||
return state
|
||
}
|
||
|
||
return resolveBindingValidationState(item, index, bindings.value[index]?.id || '')
|
||
}, null)
|
||
|
||
if (invalidState) {
|
||
validationState.value = invalidState
|
||
await focusValidationTarget(invalidState)
|
||
return
|
||
}
|
||
|
||
if (bindings.value.length > 0 && nonEmptyBindings.length === 0) {
|
||
validationState.value = {
|
||
bindingId: '',
|
||
field: 'skuCode',
|
||
message: '当前没有可保存的规则，请至少填写内部履约 SKU 和外部匹配条件',
|
||
}
|
||
return
|
||
}
|
||
|
||
const payload = nonEmptyBindings
|
||
|
||
saving.value = true
|
||
validationState.value = null
|
||
|
||
try {
|
||
const response = await saveAdminFulfillmentBindingConfigs({ bindings: payload })
|
||
filePath.value = response.data.filePath
|
||
bindings.value = response.data.bindings.map(mapEditableBinding)
|
||
showSuccess('履约配置已保存')
|
||
await loadConfigs()
|
||
} catch (error) {
|
||
validationState.value = {
|
||
bindingId: '',
|
||
field: 'skuCode',
|
||
message: error instanceof Error ? error.message : '保存履约配置失败',
|
||
}
|
||
} finally {
|
||
saving.value = false
|
||
}
|
||
}
|
||
|
||
async function lookupOrderProducts() {
|
||
const shopId = lookupForm.shopId.trim()
|
||
const platformOrderId = lookupForm.platformOrderId.trim()
|
||
|
||
if (!shopId || !platformOrderId) {
|
||
lookupErrorMessage.value = '请先填写店铺 ID 和平台订单号'
|
||
return
|
||
}
|
||
|
||
lookupLoading.value = true
|
||
lookupErrorMessage.value = ''
|
||
|
||
try {
|
||
const response = await lookupAdminFulfillmentBindingOrder({
|
||
provider: 'agiso',
|
||
platform: 'xianyu',
|
||
shopId,
|
||
platformOrderId,
|
||
})
|
||
lookupResult.value = response.data
|
||
importedLookupLineIds.value = []
|
||
} catch (error) {
|
||
lookupResult.value = null
|
||
lookupErrorMessage.value = error instanceof Error ? error.message : '订单商品查询失败'
|
||
} finally {
|
||
lookupLoading.value = false
|
||
}
|
||
}
|
||
|
||
onMounted(loadConfigs)
|
||
</script>
|
||
|
||
<template>
|
||
<section class="admin-panel">
|
||
<header class="panel-header">
|
||
<div class="panel-header-copy">
|
||
<h1>履约配置</h1>
|
||
<p>把外部商品统一映射到内部履约 SKU，并指定最终走腾讯领取、快手 Cloud 或人工处理。</p>
|
||
</div>
|
||
<div class="header-tags">
|
||
<span class="header-tag">外部条件命中 1 个即可</span>
|
||
<span class="header-tag">同类商品尽量复用同一内部 SKU</span>
|
||
<span class="header-tag">保存后立即生效</span>
|
||
</div>
|
||
<div class="header-actions">
|
||
<el-button round @click="loadConfigs">刷新</el-button>
|
||
</div>
|
||
</header>
|
||
|
||
<div v-if="!hasAdminRole('admin')" class="empty-block">仅管理员可以维护履约配置。</div>
|
||
|
||
<template v-else>
|
||
<section class="overview-card">
|
||
<div class="overview-file">
|
||
<span class="overview-label">配置文件</span>
|
||
<code>{{ filePath || '-' }}</code>
|
||
</div>
|
||
|
||
<div class="overview-stats">
|
||
<article class="overview-stat">
|
||
<span>规则总数</span>
|
||
<strong>{{ ruleMetrics.totalCount }}</strong>
|
||
</article>
|
||
<article class="overview-stat">
|
||
<span>完整规则</span>
|
||
<strong>{{ ruleMetrics.completedCount }}</strong>
|
||
</article>
|
||
<article class="overview-stat">
|
||
<span>待完善</span>
|
||
<strong>{{ ruleMetrics.draftCount }}</strong>
|
||
</article>
|
||
<article class="overview-stat">
|
||
<span>待补商品</span>
|
||
<strong>{{ pendingObservedCount }}</strong>
|
||
</article>
|
||
<article class="overview-stat">
|
||
<span>已识别商品</span>
|
||
<strong>{{ observedProducts.length }}</strong>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="overview-notes">
|
||
<span class="overview-note">外部 SKU / 商品 ID / 商品名命中任一即可</span>
|
||
<span class="overview-note">内部 SKU 决定库存绑定与履约链路</span>
|
||
<span class="overview-note">同类商品跨平台尽量共用同一内部 SKU</span>
|
||
</div>
|
||
</section>
|
||
|
||
<p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>
|
||
<div v-if="loading" class="empty-block">履约配置加载中</div>
|
||
|
||
<template v-else>
|
||
<section class="table-card table-card--dense">
|
||
<div class="section-title-row section-title-row--tight">
|
||
<div>
|
||
<h3>已配置规则</h3>
|
||
<p>正式规则集中维护在这里，新补查到的商品也会导入到这个区域继续补全。</p>
|
||
</div>
|
||
<div class="section-header-tools">
|
||
<div class="section-mini-stats">
|
||
<span class="mini-stat-chip">完整 {{ ruleMetrics.completedCount }}</span>
|
||
<span class="mini-stat-chip">待完善 {{ ruleMetrics.draftCount }}</span>
|
||
<span class="mini-stat-chip">人工 {{ ruleMetrics.manualCount }}</span>
|
||
<span class="mini-stat-chip">半自动 {{ ruleMetrics.assistedCount }}</span>
|
||
<span class="mini-stat-chip">快手 Cloud {{ ruleMetrics.kuaishouCloudCount }}</span>
|
||
</div>
|
||
<div class="section-action-group">
|
||
<el-button round @click="addBinding">新增规则</el-button>
|
||
<el-button :loading="saving" round type="primary" @click="saveConfigs">保存配置</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p v-if="validationState?.message" class="validation-banner">{{ validationState.message }}</p>
|
||
|
||
<div v-if="bindings.length === 0" class="empty-inline">当前还没有履约规则，先新增一条。</div>
|
||
|
||
<div
|
||
v-for="(binding, index) in bindings"
|
||
:key="binding.id"
|
||
:data-binding-id="binding.id"
|
||
:class="['binding-card', { 'binding-card--invalid': isBindingInvalid(binding.id) }]"
|
||
>
|
||
<div class="binding-header">
|
||
<div class="binding-summary">
|
||
<div class="binding-title-row">
|
||
<strong>{{ getBindingTitle(binding, index) }}</strong>
|
||
<span :class="['binding-status-chip', { 'binding-status-chip--done': isEditableBindingComplete(binding) }]">
|
||
{{ getBindingStatusLabel(binding) }}
|
||
</span>
|
||
</div>
|
||
<span class="binding-subtle">{{ getBindingSummary(binding) }}</span>
|
||
</div>
|
||
<button class="collapse-button" type="button" @click="toggleBindingCollapsed(binding.id)">
|
||
{{ isBindingCollapsed(binding.id) ? '展开' : '折叠' }}
|
||
</button>
|
||
</div>
|
||
|
||
<div v-if="isBindingCollapsed(binding.id)" class="binding-collapsed-preview">
|
||
<span>外部商品：{{ binding.externalSkuName || binding.externalSkuCode || binding.externalItemId || '-' }}</span>
|
||
<span>内部履约 SKU：{{ binding.skuCode || '-' }}</span>
|
||
<span>履约方式：{{ PROFILE_OPTIONS.find((item) => item.value === binding.profileKey)?.label || binding.profileKey }}</span>
|
||
</div>
|
||
|
||
<div v-else class="binding-grid">
|
||
<label class="field-block">
|
||
<span>渠道</span>
|
||
<input
|
||
v-model="binding.provider"
|
||
class="text-input"
|
||
placeholder="agiso"
|
||
@input="clearValidationState"
|
||
/>
|
||
</label>
|
||
|
||
<label class="field-block">
|
||
<span>平台</span>
|
||
<input
|
||
v-model="binding.platform"
|
||
class="text-input"
|
||
placeholder="xianyu / taobao / pdd"
|
||
@input="clearValidationState"
|
||
/>
|
||
</label>
|
||
|
||
<label class="field-block">
|
||
<span>店铺 ID</span>
|
||
<input
|
||
v-model="binding.shopId"
|
||
:class="['text-input', { 'text-input--invalid': isFieldInvalid(binding.id, 'shopId') }]"
|
||
data-field="shopId"
|
||
placeholder="留空表示跨店铺通用"
|
||
@input="clearValidationState"
|
||
/>
|
||
</label>
|
||
|
||
<label class="field-block">
|
||
<span>店铺名称</span>
|
||
<input
|
||
v-model="binding.shopName"
|
||
class="text-input"
|
||
placeholder="用于保存和识别店铺"
|
||
@input="clearValidationState"
|
||
/>
|
||
</label>
|
||
|
||
<label class="field-block">
|
||
<span>优先级</span>
|
||
<input v-model.number="binding.priority" class="text-input" type="number" min="1" @input="clearValidationState" />
|
||
</label>
|
||
|
||
<label class="field-block">
|
||
<span>外部 SKU 编码</span>
|
||
<input
|
||
v-model="binding.externalSkuCode"
|
||
:class="['text-input', { 'text-input--invalid': isFieldInvalid(binding.id, 'externalSkuCode') }]"
|
||
data-field="externalSkuCode"
|
||
placeholder="例如 6046726460016"
|
||
@input="clearValidationState"
|
||
/>
|
||
</label>
|
||
|
||
<label class="field-block">
|
||
<span>外部商品 ID</span>
|
||
<input
|
||
v-model="binding.externalItemId"
|
||
:class="['text-input', { 'text-input--invalid': isFieldInvalid(binding.id, 'externalItemId') }]"
|
||
data-field="externalItemId"
|
||
placeholder="例如 1033324289962"
|
||
@input="clearValidationState"
|
||
/>
|
||
</label>
|
||
|
||
<label class="field-block field-wide">
|
||
<span>外部商品名</span>
|
||
<input
|
||
v-model="binding.externalSkuName"
|
||
:class="['text-input', { 'text-input--invalid': isFieldInvalid(binding.id, 'externalSkuName') }]"
|
||
data-field="externalSkuName"
|
||
placeholder="例如 奥利奥动作"
|
||
@input="clearValidationState"
|
||
/>
|
||
</label>
|
||
|
||
<label class="field-block">
|
||
<span>内部履约 SKU</span>
|
||
<input
|
||
v-model="binding.skuCode"
|
||
:class="['text-input', { 'text-input--invalid': isFieldInvalid(binding.id, 'skuCode') }]"
|
||
data-field="skuCode"
|
||
placeholder="例如 sjz_hdl_test01"
|
||
@input="clearValidationState"
|
||
/>
|
||
<small class="field-help">填你们系统内部统一 SKU。相同履约商品，尽量跨平台共用同一个内部 SKU。</small>
|
||
</label>
|
||
|
||
<label class="field-block">
|
||
<span>内部商品名</span>
|
||
<input v-model="binding.skuName" class="text-input" placeholder="用于后台展示" @input="clearValidationState" />
|
||
</label>
|
||
|
||
<label class="field-block">
|
||
<span>履约方式</span>
|
||
<select
|
||
v-model="binding.profileKey"
|
||
:class="['text-input', { 'text-input--invalid': isFieldInvalid(binding.id, 'profileKey') }]"
|
||
data-field="profileKey"
|
||
@change="clearValidationState"
|
||
>
|
||
<option v-for="item in PROFILE_OPTIONS" :key="item.value" :value="item.value">
|
||
{{ item.label }}
|
||
</option>
|
||
</select>
|
||
</label>
|
||
|
||
<label class="field-block">
|
||
<span>匹配后展示名</span>
|
||
<input
|
||
v-model="binding.resolvedSkuName"
|
||
class="text-input"
|
||
placeholder="例如 三角洲行动-自动领取"
|
||
@input="clearValidationState"
|
||
/>
|
||
</label>
|
||
</div>
|
||
|
||
<p v-if="isBindingInvalid(binding.id)" class="binding-inline-error">{{ validationState?.message }}</p>
|
||
|
||
<div class="binding-actions">
|
||
<label class="checkbox-line">
|
||
<input v-model="binding.enabled" type="checkbox" />
|
||
<span>启用规则</span>
|
||
</label>
|
||
<el-button link type="danger" @click="removeBinding(binding.id)">删除</el-button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="table-card table-card--dense">
|
||
<div class="section-title-row section-title-row--tight">
|
||
<div>
|
||
<h3>手动补查订单商品</h3>
|
||
<p>新商品还没配规则时，可以按店铺 ID 和平台订单号临时补查，查完直接导入规则草稿。</p>
|
||
</div>
|
||
<span class="section-note-chip">仅支持 Agiso 咸鱼订单</span>
|
||
</div>
|
||
|
||
<div class="lookup-toolbar">
|
||
<label class="field-block">
|
||
<span>渠道</span>
|
||
<input class="text-input" value="agiso" disabled />
|
||
</label>
|
||
|
||
<label class="field-block">
|
||
<span>平台</span>
|
||
<input class="text-input" value="xianyu" disabled />
|
||
</label>
|
||
|
||
<label class="field-block">
|
||
<span>店铺 ID</span>
|
||
<input
|
||
v-model="lookupForm.shopId"
|
||
class="text-input"
|
||
placeholder="例如 252609"
|
||
@keydown.enter.prevent="lookupOrderProducts"
|
||
/>
|
||
</label>
|
||
|
||
<label class="field-block">
|
||
<span>平台订单号</span>
|
||
<input
|
||
v-model="lookupForm.platformOrderId"
|
||
class="text-input"
|
||
placeholder="输入需要补查的订单号"
|
||
@keydown.enter.prevent="lookupOrderProducts"
|
||
/>
|
||
</label>
|
||
|
||
<div class="field-block field-block--action">
|
||
<span>操作</span>
|
||
<el-button :loading="lookupLoading" round type="primary" @click="lookupOrderProducts">查询订单商品</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="toolbar-hint">查询结果只用于补配置，不会写入订单库，也不会影响现有订单数据。</p>
|
||
|
||
<p v-if="lookupErrorMessage" class="error-copy lookup-error">{{ lookupErrorMessage }}</p>
|
||
<div v-else-if="lookupLoading" class="empty-inline">正在查询订单详情…</div>
|
||
|
||
<template v-else-if="lookupResult">
|
||
<div class="lookup-summary">
|
||
<div class="lookup-summary-item">
|
||
<span class="summary-label">订单</span>
|
||
<strong>{{ lookupResult.order.platformOrderId }}</strong>
|
||
<span class="cell-subtle">{{ lookupResult.order.shopName || lookupResult.order.shopId || '-' }}</span>
|
||
</div>
|
||
<div class="lookup-summary-item">
|
||
<span class="summary-label">买家</span>
|
||
<strong>{{ lookupResult.order.buyerName || '-' }}</strong>
|
||
<span class="cell-subtle">支付时间：{{ formatAdminDateTime(lookupResult.order.paidAt) }}</span>
|
||
</div>
|
||
<div class="lookup-summary-item">
|
||
<span class="summary-label">金额</span>
|
||
<strong>{{ lookupResult.order.totalAmount || '0.00' }}</strong>
|
||
<span class="cell-subtle">补查结果：{{ lookupResult.order.enriched ? '已补全' : lookupResult.order.enrichReason || '已返回' }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>外部商品</th>
|
||
<th>数量</th>
|
||
<th>识别结果</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="item in lookupResult.items" :key="item.lineId">
|
||
<td>
|
||
<div class="cell-stack">
|
||
<strong>{{ item.externalSkuName || item.itemTitle || item.externalSkuCode || item.externalItemId || '-' }}</strong>
|
||
<span class="cell-subtle">SKU: {{ item.externalSkuCode || '-' }}</span>
|
||
<span class="cell-subtle">ItemId: {{ item.externalItemId || '-' }}</span>
|
||
</div>
|
||
</td>
|
||
<td>{{ item.quantity }}</td>
|
||
<td>
|
||
<div class="cell-stack">
|
||
<strong>{{ item.configured ? '已配置' : '未配置' }}</strong>
|
||
<span v-if="item.matchedBinding" class="cell-subtle">
|
||
{{ item.matchedBinding.skuName || item.matchedBinding.skuCode || '-' }} / {{ item.matchedBinding.profileKey || '-' }}
|
||
</span>
|
||
<span v-else class="cell-subtle">可直接导入成新规则草稿</span>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<el-button
|
||
v-if="!item.configured && !isLookupProductImported(item.lineId)"
|
||
link
|
||
type="primary"
|
||
@click="importLookupProduct(item)"
|
||
>
|
||
导入到规则
|
||
</el-button>
|
||
<span v-else-if="item.configured" class="cell-subtle">已存在</span>
|
||
<span v-else class="cell-subtle">已导入草稿</span>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</template>
|
||
</section>
|
||
|
||
<section class="table-card table-card--dense">
|
||
<div class="section-title-row section-title-row--tight">
|
||
<div>
|
||
<h3>近期识别到的外部商品</h3>
|
||
<p>从已入库订单里提取的外部商品信息，优先处理未配置商品，导入后再补齐内部 SKU。</p>
|
||
</div>
|
||
<div class="section-mini-stats">
|
||
<span class="mini-stat-chip">待补 {{ pendingObservedCount }}</span>
|
||
<span class="mini-stat-chip">总计 {{ observedProducts.length }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>来源</th>
|
||
<th>外部商品</th>
|
||
<th>订单商品数</th>
|
||
<th>最近出现时间</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="item in observedProducts" :key="`${item.provider}:${item.platform}:${item.shopId}:${item.externalSkuCode}:${item.externalItemId}:${item.externalSkuName}`">
|
||
<td>
|
||
<div class="cell-stack">
|
||
<strong>{{ item.platform || '-' }}</strong>
|
||
<span class="cell-subtle">{{ item.provider }} · {{ item.shopName || item.shopId || '全店铺' }}</span>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<div class="cell-stack">
|
||
<strong>{{ item.externalSkuName || item.externalSkuCode || item.externalItemId || '-' }}</strong>
|
||
<span class="cell-subtle">SKU: {{ item.externalSkuCode || '-' }}</span>
|
||
<span class="cell-subtle">ItemId: {{ item.externalItemId || '-' }}</span>
|
||
</div>
|
||
</td>
|
||
<td>{{ item.orderItemCount }}</td>
|
||
<td>{{ formatAdminDateTime(item.latestSeenAt) }}</td>
|
||
<td>{{ item.configured ? '已配置' : '未配置' }}</td>
|
||
<td>
|
||
<el-button
|
||
v-if="!item.configured"
|
||
link
|
||
type="primary"
|
||
@click="importObservedProduct(item)"
|
||
>
|
||
导入到规则
|
||
</el-button>
|
||
<span v-else class="cell-subtle">已存在</span>
|
||
</td>
|
||
</tr>
|
||
<tr v-if="observedProducts.length === 0">
|
||
<td colspan="6" class="empty-inline">最近还没有识别到可用的外部商品。</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</section>
|
||
</template>
|
||
</template>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.admin-panel {
|
||
display: grid;
|
||
gap: 12px;
|
||
}
|
||
|
||
.panel-header,
|
||
.section-title-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.panel-header h1,
|
||
.section-title-row h3 {
|
||
margin: 0;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.panel-header p,
|
||
.section-title-row p {
|
||
margin: 6px 0 0;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.panel-header {
|
||
align-items: flex-start;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.panel-header-copy {
|
||
min-width: 280px;
|
||
flex: 1;
|
||
}
|
||
|
||
.header-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.header-tag,
|
||
.section-note-chip,
|
||
.mini-stat-chip,
|
||
.summary-label,
|
||
.overview-label {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-height: 28px;
|
||
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: var(--color-primary-dark);
|
||
font-size: var(--text-xs);
|
||
font-weight: 700;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.overview-card,
|
||
.table-card,
|
||
.empty-block,
|
||
.error-copy {
|
||
padding: 16px;
|
||
border-radius: var(--radius-xl);
|
||
background: rgba(255, 255, 255, 0.94);
|
||
border: 1px solid rgba(86, 108, 138, 0.1);
|
||
}
|
||
|
||
.table-card--dense {
|
||
padding: 14px 16px 16px;
|
||
}
|
||
|
||
.overview-card {
|
||
display: grid;
|
||
gap: 12px;
|
||
}
|
||
|
||
.overview-file {
|
||
display: grid;
|
||
gap: 6px;
|
||
}
|
||
|
||
.overview-file code {
|
||
display: inline-flex;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
padding: 8px 12px;
|
||
border-radius: 14px;
|
||
background: rgba(15, 23, 42, 0.05);
|
||
color: var(--text-primary);
|
||
word-break: break-all;
|
||
}
|
||
|
||
.overview-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||
gap: 10px;
|
||
}
|
||
|
||
.overview-stat {
|
||
display: grid;
|
||
gap: 4px;
|
||
padding: 12px 14px;
|
||
border-radius: var(--radius-lg);
|
||
background: #f8fafc;
|
||
border: 1px solid rgba(148, 163, 184, 0.14);
|
||
}
|
||
|
||
.overview-stat span {
|
||
color: var(--text-secondary);
|
||
font-size: var(--text-xs);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.overview-stat strong {
|
||
color: var(--text-primary);
|
||
font-size: 22px;
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.overview-notes {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.overview-note {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-height: 32px;
|
||
padding: 0 12px;
|
||
border-radius: var(--radius-full);
|
||
background: rgba(15, 23, 42, 0.04);
|
||
color: var(--text-secondary);
|
||
font-size: var(--text-xs);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.section-title-row--tight {
|
||
align-items: center;
|
||
}
|
||
|
||
.section-header-tools {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
|
||
.section-mini-stats,
|
||
.section-action-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.lookup-toolbar,
|
||
.lookup-summary {
|
||
display: grid;
|
||
gap: 12px;
|
||
}
|
||
|
||
.lookup-toolbar {
|
||
grid-template-columns: 96px 110px minmax(140px, 1fr) minmax(180px, 1.2fr) 136px;
|
||
align-items: end;
|
||
}
|
||
|
||
.field-block--action :deep(.el-button) {
|
||
width: 100%;
|
||
}
|
||
|
||
.toolbar-hint {
|
||
margin: 10px 0 0;
|
||
color: var(--text-secondary);
|
||
font-size: var(--text-xs);
|
||
}
|
||
|
||
.lookup-summary {
|
||
margin-top: 14px;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
|
||
.lookup-summary-item {
|
||
display: grid;
|
||
gap: 6px;
|
||
padding: 12px 14px;
|
||
border-radius: var(--radius-lg);
|
||
background: #f8fafc;
|
||
border: 1px solid rgba(148, 163, 184, 0.14);
|
||
}
|
||
|
||
.lookup-summary-item strong {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.binding-card {
|
||
margin-top: 12px;
|
||
padding: 14px;
|
||
border-radius: var(--radius-lg);
|
||
background: #f8fafc;
|
||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||
}
|
||
|
||
.binding-card--invalid {
|
||
border-color: rgba(220, 38, 38, 0.3);
|
||
box-shadow: 0 0 0 4px rgba(254, 226, 226, 0.85);
|
||
}
|
||
|
||
.binding-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
align-items: flex-start;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.binding-summary {
|
||
display: grid;
|
||
gap: 4px;
|
||
}
|
||
|
||
.binding-title-row {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.binding-subtle {
|
||
color: var(--text-secondary);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.binding-status-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
border-radius: var(--radius-full);
|
||
padding: 2px 10px;
|
||
background: #fff1f2;
|
||
color: #be123c;
|
||
font-size: var(--text-xs);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.binding-status-chip--done {
|
||
background: #ecfdf3;
|
||
color: #027a48;
|
||
}
|
||
|
||
.collapse-button {
|
||
border: 1px solid rgba(86, 108, 138, 0.18);
|
||
background: rgba(255, 255, 255, 0.96);
|
||
color: var(--text-primary);
|
||
border-radius: var(--radius-full);
|
||
padding: 7px 12px;
|
||
font: inherit;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.binding-collapsed-preview {
|
||
display: grid;
|
||
gap: 6px;
|
||
color: var(--text-secondary);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.binding-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 10px 12px;
|
||
}
|
||
|
||
.validation-banner {
|
||
margin: 12px 0 0;
|
||
padding: 10px 12px;
|
||
border-radius: 14px;
|
||
background: #fff4f2;
|
||
border: 1px solid rgba(244, 63, 94, 0.18);
|
||
color: var(--color-danger);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.field-block {
|
||
display: grid;
|
||
gap: 6px;
|
||
}
|
||
|
||
.field-block span {
|
||
color: var(--text-secondary);
|
||
font-size: var(--text-xs);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.field-help {
|
||
color: var(--text-secondary);
|
||
font-size: var(--text-xs);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.field-wide {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.text-input {
|
||
width: 100%;
|
||
min-height: 40px;
|
||
padding: 0 12px;
|
||
border-radius: 14px;
|
||
border: 1px solid rgba(86, 108, 138, 0.18);
|
||
background: rgba(255, 255, 255, 0.96);
|
||
}
|
||
|
||
.text-input--invalid {
|
||
border-color: rgba(220, 38, 38, 0.45);
|
||
background: #fff8f8;
|
||
}
|
||
|
||
.text-input--invalid:focus {
|
||
outline: none;
|
||
border-color: rgba(220, 38, 38, 0.6);
|
||
box-shadow: 0 0 0 3px rgba(254, 226, 226, 0.95);
|
||
}
|
||
|
||
.text-input--readonly {
|
||
color: var(--text-secondary);
|
||
background: rgba(148, 163, 184, 0.08);
|
||
}
|
||
|
||
.binding-inline-error {
|
||
margin: 10px 0 0;
|
||
color: var(--color-danger);
|
||
font-size: var(--text-sm);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.binding-actions {
|
||
margin-top: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
align-items: center;
|
||
}
|
||
|
||
.checkbox-line {
|
||
display: inline-flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.data-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.data-table th,
|
||
.data-table td {
|
||
padding: 12px 10px;
|
||
text-align: left;
|
||
border-bottom: 1px solid rgba(86, 108, 138, 0.08);
|
||
color: var(--text-primary);
|
||
vertical-align: top;
|
||
}
|
||
|
||
.data-table th {
|
||
color: var(--text-secondary);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
.cell-stack {
|
||
display: grid;
|
||
gap: 4px;
|
||
}
|
||
|
||
.cell-subtle {
|
||
color: var(--text-secondary);
|
||
font-size: var(--text-xs);
|
||
}
|
||
|
||
.empty-block,
|
||
.empty-inline {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.error-copy {
|
||
color: var(--color-danger);
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.panel-header,
|
||
.section-title-row,
|
||
.section-header-tools,
|
||
.binding-actions,
|
||
.binding-header {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.overview-stats,
|
||
.lookup-toolbar,
|
||
.lookup-summary,
|
||
.binding-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|