yml/hfb_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化后台高频查询性能

Browse Source
This commit is contained in:
yml2213
2026-08-29 00:16:16 +08:00
parent c87883cc65
commit c156c478d8
17 changed files with 684 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/admin/components/ProcessTimeline.vue
+325 -77
View File
@@ -24,61 +24,126 @@ export interface ProcessTimelineEvent {
const props = defineProps<{ events: ProcessTimelineEvent[]; emptyText?: string }>()
const actionLabels: Record<string, string> = {
owner_handoff_submitted: '号主提交交接', platform_handoff_submitted: '客服代交接',
admin_force_handoff: '客服确认交接', renter_received_confirmed: '租客确认收号',
checkout_submitted: '租客发起结账', checkout_countered: '修改结账方案',
checkout_confirmed: '号主确认结账', checkout_accepted: '租客接受结账方案',
platform_checkout_countered: '客服修改结账方案', platform_checkout_confirmed: '客服确认结账',
platform_checkout_dispute_opened: '客服发起结账争议', offline_settlement_confirmed: '确认线下结算',
deposit_held: '暂扣押金', deposit_released: '归还暂扣押金', pickup_created: '创建提号',
pickup_completed: '完成提号', pickup_profit_updated: '修改提号利润',
pickup_financial_adjusted: '创建财务调整', pickup_adjustment_settled: '确认财务调整',
pickup_offline_settlement_confirmed: '确认提号线下结算', pickup_cancelled: '取消提号',
owner_handoff_submitted: '号主提交交接',
platform_handoff_submitted: '客服代交接',
admin_force_handoff: '客服确认交接',
renter_received_confirmed: '租客确认收号',
checkout_submitted: '租客发起结账',
checkout_countered: '修改结账方案',
checkout_confirmed: '号主确认结账',
checkout_accepted: '租客接受结账方案',
platform_checkout_countered: '客服修改结账方案',
platform_checkout_confirmed: '客服确认结账',
platform_checkout_dispute_opened: '客服发起结账争议',
offline_settlement_confirmed: '确认线下结算',
deposit_held: '暂扣押金',
deposit_released: '归还暂扣押金',
pickup_created: '创建提号',
pickup_completed: '完成提号',
pickup_profit_updated: '修改提号利润',
pickup_financial_adjusted: '创建财务调整',
pickup_adjustment_settled: '确认财务调整',
pickup_offline_settlement_confirmed: '确认提号线下结算',
pickup_cancelled: '取消提号',
}
const stageLabels: Record<string, string> = {
handoff: '交接', checkout: '结账', settlement: '结算', dispute: '争议', pickup: '提号',
handoff: '交接',
checkout: '结账',
settlement: '结算',
dispute: '争议',
pickup: '提号',
}
const payloadLabels: Record<string, string> = {
checkout_id: '结账单', round: '协商轮次', turn: '等待确认方', proposed_by: '方案提出人',
rent_amount_cent: '实际结算租金', owner_rent_amount_cent: '号主租金', platform_fee_cent: '平台费用',
deposit_amount_cent: '押金', consumable_amount_cent: '消耗品金额', coin_consumed_m: '哈夫币消耗',
deposit_deduct_amount_cent: '押金赔付扣除', renter_refund_amount_cent: '退还租客',
owner_income_amount_cent: '号主最终收入', shortfall_cent: '押金不足差额', overshoot_amount_cent: '打超金额',
offline_settlement_amount_cent: '线下结算金额', deposit_hold_amount_cent: '暂扣金额',
profit_amount_cent: '利润金额', settle_amount_cent: '结算给号主', profit_delta_cent: '利润调整',
settle_delta_cent: '结算调整', settlement_mode: '结算方式', account_source: '账号来源', source_channel: '来源渠道',
checkout_id: '结账单',
round: '协商轮次',
turn: '等待确认方',
proposed_by: '方案提出人',
rent_amount_cent: '实际结算租金',
owner_rent_amount_cent: '号主租金',
platform_fee_cent: '平台费用',
deposit_amount_cent: '押金',
consumable_amount_cent: '消耗品金额',
coin_consumed_m: '哈夫币消耗',
deposit_deduct_amount_cent: '押金赔付扣除',
renter_refund_amount_cent: '退还租客',
owner_income_amount_cent: '号主最终收入',
shortfall_cent: '押金不足差额',
overshoot_amount_cent: '打超金额',
offline_settlement_amount_cent: '线下结算金额',
deposit_hold_amount_cent: '暂扣金额',
profit_amount_cent: '利润金额',
settle_amount_cent: '结算给号主',
profit_delta_cent: '利润调整',
settle_delta_cent: '结算调整',
settlement_mode: '结算方式',
account_source: '账号来源',
source_channel: '来源渠道',
}
const primaryPayloadKeys = new Set([
'round', 'turn', 'rent_amount_cent', 'renter_refund_amount_cent', 'owner_income_amount_cent',
'offline_settlement_amount_cent', 'profit_amount_cent', 'settle_amount_cent',
'round',
'turn',
'rent_amount_cent',
'renter_refund_amount_cent',
'owner_income_amount_cent',
'offline_settlement_amount_cent',
'profit_amount_cent',
'settle_amount_cent',
])
const stateLabels: Record<string, Record<string, string>> = {
order_status: {
pending_payment: '待支付', pending_handoff: '待交接', renting: '租用中', overdue: '已逾期',
pending_checkout_confirm: '待号主确认结账', pending_checkout_accept: '待租客确认结账',
completed: '已完成', cancelled: '已取消', closed: '已关闭', abnormal: '异常',
pending_payment: '待支付',
pending_handoff: '待交接',
renting: '租用中',
overdue: '已逾期',
pending_checkout_confirm: '待号主确认结账',
pending_checkout_accept: '待租客确认结账',
completed: '已完成',
cancelled: '已取消',
closed: '已关闭',
abnormal: '异常',
},
handoff_status: {
none: '未开始', pending_owner: '待号主交接', pending_renter_confirm: '待租客确认收号',
received: '租客已收号', pending_owner_checkout: '待号主确认结账',
pending_renter_checkout: '待租客确认结账', returned: '已归还',
none: '未开始',
pending_owner: '待号主交接',
pending_renter_confirm: '待租客确认收号',
received: '租客已收号',
pending_owner_checkout: '待号主确认结账',
pending_renter_checkout: '待租客确认结账',
returned: '已归还',
},
settlement_status: {
unsettled: '未结算',
pending: '结算待确认',
settled: '已结算',
arbitrated: '仲裁结算',
},
settlement_status: { unsettled: '未结算', pending: '结算待确认', settled: '已结算', arbitrated: '仲裁结算' },
offline_settlement_status: { none: '无需线下结算', pending: '待线下结算', settled: '已线下结算' },
pickup_status: { pending: '待处理', processing: '处理中', completed: '已完成', cancelled: '已取消' },
pickup_status: {
pending: '待处理',
processing: '处理中',
completed: '已完成',
cancelled: '已取消',
},
}
const stateFieldLabels: Record<string, string> = {
order_status: '订单', handoff_status: '交接', settlement_status: '结算',
offline_settlement_status: '线下结算', pickup_status: '提号',
order_status: '订单',
handoff_status: '交接',
settlement_status: '结算',
offline_settlement_status: '线下结算',
pickup_status: '提号',
}
function actionLabel(action: string) { return actionLabels[action] || action }
function stageLabel(stage: string) { return stageLabels[stage] || '流程' }
function actionLabel(action: string) {
return actionLabels[action] || action
}
function stageLabel(stage: string) {
return stageLabels[stage] || '流程'
}
function actorLabel(item: ProcessTimelineEvent) {
if (item.actor_name) return item.actor_name
if (item.actor_type === 'system') return '系统'
@@ -91,7 +156,9 @@ function actorRole(item: ProcessTimelineEvent) {
}
function payloadRows(payload?: Record<string, unknown>) {
if (!payload || typeof payload !== 'object') return []
return Object.entries(payload).filter(([, value]) => value !== null && value !== undefined && value !== '')
return Object.entries(payload).filter(
([, value]) => value !== null && value !== undefined && value !== ''
)
}
function primaryPayloadRows(item: ProcessTimelineEvent) {
return payloadRows(item.payload).filter(([key]) => primaryPayloadKeys.has(key))
@@ -99,12 +166,16 @@ function primaryPayloadRows(item: ProcessTimelineEvent) {
function detailPayloadRows(item: ProcessTimelineEvent) {
return payloadRows(item.payload).filter(([key]) => !primaryPayloadKeys.has(key))
}
function payloadLabel(key: string) { return payloadLabels[key] || key }
function payloadLabel(key: string) {
return payloadLabels[key] || key
}
function payloadValue(key: string, value: unknown) {
if (key.endsWith('_cent')) return formatCentWithSymbol(Number(value || 0))
if (key === 'turn') return value === 'owner' ? '号主' : value === 'renter' ? '租客' : String(value)
if (key === 'turn')
return value === 'owner' ? '号主' : value === 'renter' ? '租客' : String(value)
if (key === 'account_source') return value === 'external' ? '外部上传' : '站内上传'
if (key === 'settlement_mode') return value === 'platform_managed' ? '平台线下结算' : '号主钱包结算'
if (key === 'settlement_mode')
return value === 'platform_managed' ? '平台线下结算' : '号主钱包结算'
if (typeof value === 'object') return JSON.stringify(value)
return String(value)
}
@@ -117,7 +188,11 @@ function stateChanges(item: ProcessTimelineEvent) {
const after = item.state_after || {}
return Object.keys(stateFieldLabels)
.filter(key => before[key] !== undefined && before[key] !== after[key])
.map(key => ({ label: stateFieldLabels[key], before: stateValue(key, before[key]), after: stateValue(key, after[key]) }))
.map(key => ({
label: stateFieldLabels[key],
before: stateValue(key, before[key]),
after: stateValue(key, after[key]),
}))
}
function hasMore(item: ProcessTimelineEvent) {
return detailPayloadRows(item).length > 0 || stateChanges(item).length > 0
@@ -138,7 +213,10 @@ function hasMore(item: ProcessTimelineEvent) {
</header>
<div class="process-people">
<span><b>{{ actorRole(item) }}</b>{{ actorLabel(item) }}</span>
<span
><b>{{ actorRole(item) }}</b
>{{ actorLabel(item) }}</span
>
<span v-if="item.target_name" class="target-text">通知/关联：{{ item.target_name }}</span>
</div>
<p v-if="item.content" class="process-content">{{ item.content }}</p>
@@ -182,44 +260,214 @@ function hasMore(item: ProcessTimelineEvent) {
</template>
<style scoped>
.process-timeline { display: grid; gap: 12px; padding-left: 4px; }
.process-item { position: relative; padding: 14px 16px 14px 22px; border: 1px solid #e5eaf2; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / 2%); }
.process-item::before { content: ''; position: absolute; top: -13px; bottom: calc(100% - 1px); left: -1px; width: 1px; background: #dce5f0; }
.process-item:first-child::before { display: none; }
.process-dot { position: absolute; left: -5px; top: 21px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #ff6a00; box-shadow: 0 0 0 1px #f5a561; }
.process-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.heading-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.heading-main strong { color: #182232; font-size: 15px; }
.stage-badge { flex: none; padding: 2px 7px; border-radius: 4px; background: #fff3e8; color: #d85d00; font-size: 12px; font-weight: 600; }
.process-heading time { flex: none; color: #94a3b8; font-size: 12px; white-space: nowrap; }
.process-people { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; color: #64748b; font-size: 12px; }
.process-people b { margin-right: 6px; color: #475569; font-weight: 600; }
.target-text { color: #718096; }
.process-content, .process-reason { margin: 10px 0 0; color: #334155; line-height: 1.65; white-space: pre-wrap; }
.process-reason { padding: 8px 10px; border-radius: 6px; background: #fff9ed; color: #9a5b13; }
.process-reason b { margin-right: 8px; }
.process-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.process-summary div { display: flex; align-items: baseline; gap: 7px; padding: 7px 10px; border: 1px solid #e6edf5; border-radius: 6px; background: #f8fafc; }
.process-summary span { color: #64748b; font-size: 12px; }
.process-summary strong { color: #1e293b; font-size: 13px; }
.process-details { margin-top: 10px; }
.process-details summary { width: fit-content; color: #477fc1; font-size: 12px; cursor: pointer; user-select: none; }
.process-details[open] summary { margin-bottom: 9px; }
.process-payload { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 7px 12px; padding: 10px; border-radius: 7px; background: #f4f7fb; }
.process-payload div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.process-payload span { color: #64748b; }
.process-payload strong { color: #1e293b; text-align: right; word-break: break-word; }
.process-state { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 9px; color: #64748b; font-size: 12px; }
.process-state b { color: #475569; }
.process-state span { padding-left: 10px; border-left: 1px solid #dbe4ee; }
.process-state i { color: #94a3b8; font-style: normal; }
.process-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.process-attachments :deep(.el-image) { width: 76px; height: 76px; border: 1px solid #e2e8f0; border-radius: 6px; }
.process-timeline {
display: grid;
gap: 12px;
padding-left: 4px;
}
.process-item {
position: relative;
padding: 14px 16px 14px 22px;
border: 1px solid #e5eaf2;
border-radius: 10px;
background: #fff;
box-shadow: 0 1px 2px rgb(15 23 42 / 2%);
}
.process-item::before {
content: '';
position: absolute;
top: -13px;
bottom: calc(100% - 1px);
left: -1px;
width: 1px;
background: #dce5f0;
}
.process-item:first-child::before {
display: none;
}
.process-dot {
position: absolute;
left: -5px;
top: 21px;
width: 9px;
height: 9px;
border: 2px solid #fff;
border-radius: 50%;
background: #ff6a00;
box-shadow: 0 0 0 1px #f5a561;
}
.process-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.heading-main {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.heading-main strong {
color: #182232;
font-size: 15px;
}
.stage-badge {
flex: none;
padding: 2px 7px;
border-radius: 4px;
background: #fff3e8;
color: #d85d00;
font-size: 12px;
font-weight: 600;
}
.process-heading time {
flex: none;
color: #94a3b8;
font-size: 12px;
white-space: nowrap;
}
.process-people {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
margin-top: 8px;
color: #64748b;
font-size: 12px;
}
.process-people b {
margin-right: 6px;
color: #475569;
font-weight: 600;
}
.target-text {
color: #718096;
}
.process-content,
.process-reason {
margin: 10px 0 0;
color: #334155;
line-height: 1.65;
white-space: pre-wrap;
}
.process-reason {
padding: 8px 10px;
border-radius: 6px;
background: #fff9ed;
color: #9a5b13;
}
.process-reason b {
margin-right: 8px;
}
.process-summary {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 11px;
}
.process-summary div {
display: flex;
align-items: baseline;
gap: 7px;
padding: 7px 10px;
border: 1px solid #e6edf5;
border-radius: 6px;
background: #f8fafc;
}
.process-summary span {
color: #64748b;
font-size: 12px;
}
.process-summary strong {
color: #1e293b;
font-size: 13px;
}
.process-details {
margin-top: 10px;
}
.process-details summary {
width: fit-content;
color: #477fc1;
font-size: 12px;
cursor: pointer;
user-select: none;
}
.process-details[open] summary {
margin-bottom: 9px;
}
.process-payload {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 7px 12px;
padding: 10px;
border-radius: 7px;
background: #f4f7fb;
}
.process-payload div {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 12px;
}
.process-payload span {
color: #64748b;
}
.process-payload strong {
color: #1e293b;
text-align: right;
word-break: break-word;
}
.process-state {
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
margin-top: 9px;
color: #64748b;
font-size: 12px;
}
.process-state b {
color: #475569;
}
.process-state span {
padding-left: 10px;
border-left: 1px solid #dbe4ee;
}
.process-state i {
color: #94a3b8;
font-style: normal;
}
.process-attachments {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.process-attachments :deep(.el-image) {
width: 76px;
height: 76px;
border: 1px solid #e2e8f0;
border-radius: 6px;
}
@media (max-width: 700px) {
.process-item { padding: 13px 12px 13px 18px; }
.process-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
.process-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.process-summary div { min-width: 0; flex-direction: column; gap: 2px; }
.process-payload { grid-template-columns: 1fr; }
.process-item {
padding: 13px 12px 13px 18px;
}
.process-heading {
align-items: flex-start;
flex-direction: column;
gap: 5px;
}
.process-summary {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.process-summary div {
min-width: 0;
flex-direction: column;
gap: 2px;
}
.process-payload {
grid-template-columns: 1fr;
}
}
</style>
frontend/src/features/orders/api/orders.ts
+24 -24
View File
@@ -46,8 +46,8 @@ export interface Order {
growth_points_awarded?: number
growth_points_awarded_at?: string
account_snapshot?: Record<string, unknown>
account_source?: 'internal' | 'external' | string
source_channel?: string
account_source?: 'internal' | 'external' | string
source_channel?: string
listing_snapshot?: string
checkout_info?: string
counter_info?: string
@@ -152,24 +152,24 @@ export interface HandoffRecord {
}
export interface ProcessEvent {
id: number
business_type: string
business_id: number
stage: string
action: string
actor_type: 'user' | 'admin' | 'system' | string
actor_id: number
actor_name: string
target_type: string
target_id?: number
target_name: string
content: string
reason: string
payload: Record<string, unknown>
attachment_urls: string[]
state_before: Record<string, unknown>
state_after: Record<string, unknown>
created_at: string
id: number
business_type: string
business_id: number
stage: string
action: string
actor_type: 'user' | 'admin' | 'system' | string
actor_id: number
actor_name: string
target_type: string
target_id?: number
target_name: string
content: string
reason: string
payload: Record<string, unknown>
attachment_urls: string[]
state_before: Record<string, unknown>
state_after: Record<string, unknown>
created_at: string
}
export interface PaymentOrder {
@@ -312,10 +312,10 @@ export async function fetchHandoffRecords(id: string | number) {
}
export async function fetchAdminOrderProcessEvents(id: string | number) {
const { data } = await apiClient.get<ApiResponse<{ items: ProcessEvent[] }>>(
`/admin/orders/${id}/process-events`
)
return Array.isArray(data.data?.items) ? data.data.items : []
const { data } = await apiClient.get<ApiResponse<{ items: ProcessEvent[] }>>(
`/admin/orders/${id}/process-events`
)
return Array.isArray(data.data?.items) ? data.data.items : []
}
export async function confirmReceive(id: number) {