优化财务明细
This commit is contained in:
yml
@@ -93,6 +93,12 @@ function settlementStatusLabel(status: string) {
|
|||||||
return map[status] || status || '-'
|
return map[status] || status || '-'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function shortDateTime(value?: string) {
|
||||||
|
if (!value) return '-'
|
||||||
|
const text = formatDateTime(value)
|
||||||
|
return text.replace(/^\d{4}-/, '')
|
||||||
|
}
|
||||||
|
|
||||||
function defaultStartDate() {
|
function defaultStartDate() {
|
||||||
const date = new Date()
|
const date = new Date()
|
||||||
date.setDate(date.getDate() - 29)
|
date.setDate(date.getDate() - 29)
|
||||||
@@ -109,7 +115,7 @@ function formatInputDate(date: Date) {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="page">
|
<section class="page finance-details-page">
|
||||||
<div class="page-header-row">
|
<div class="page-header-row">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<p class="eyebrow">Finance Details</p>
|
<p class="eyebrow">Finance Details</p>
|
||||||
@@ -124,7 +130,7 @@ function formatInputDate(date: Date) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-form class="filter-panel" label-position="top">
|
<el-form class="filter-panel finance-filter-panel" label-position="top">
|
||||||
<el-form-item label="日期类型">
|
<el-form-item label="日期类型">
|
||||||
<el-select v-model="filters.date_type" class="full-control">
|
<el-select v-model="filters.date_type" class="full-control">
|
||||||
<el-option label="结算日期" value="settled" />
|
<el-option label="结算日期" value="settled" />
|
||||||
@@ -175,63 +181,65 @@ function formatInputDate(date: Date) {
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
<el-table v-loading="loading" class="table-panel" :data="details">
|
<div v-loading="loading" class="table-panel finance-details-table">
|
||||||
<el-table-column label="订单" min-width="180">
|
<div class="finance-grid-header">
|
||||||
<template #default="{ row }">
|
<div>订单</div>
|
||||||
<RouterLink :to="`/admin/orders/${row.order_id}`">{{ row.order_no }}</RouterLink>
|
<div>状态</div>
|
||||||
</template>
|
<div>租客/号主</div>
|
||||||
</el-table-column>
|
<div class="amount-cell">收款</div>
|
||||||
<el-table-column label="状态" width="150">
|
<div class="amount-cell">已退</div>
|
||||||
<template #default="{ row }">
|
<div class="amount-cell">退中</div>
|
||||||
<div>{{ orderStatusLabel(row.order_status) }}</div>
|
<div class="amount-cell">净入</div>
|
||||||
<small>{{ settlementStatusLabel(row.settlement_status) }}</small>
|
<div class="amount-cell">平台</div>
|
||||||
</template>
|
<div class="amount-cell">应得</div>
|
||||||
</el-table-column>
|
<div class="amount-cell">入账</div>
|
||||||
<el-table-column label="租客/号主" min-width="170">
|
<div class="amount-cell">差异</div>
|
||||||
<template #default="{ row }">
|
</div>
|
||||||
<div>{{ row.renter_phone || row.renter_nickname || row.renter_id }}</div>
|
|
||||||
<small>{{ row.owner_phone || row.owner_nickname || row.owner_id }}</small>
|
<div v-if="details.length > 0" class="finance-grid-body">
|
||||||
</template>
|
<div v-for="row in details" :key="row.order_id" class="finance-grid-row">
|
||||||
</el-table-column>
|
<div class="order-cell">
|
||||||
<el-table-column label="收款" width="110">
|
<RouterLink class="order-no" :to="`/admin/orders/${row.order_id}`">
|
||||||
<template #default="{ row }">{{ moneyCent(row.paid_amount_cent) }}</template>
|
{{ row.order_no }}
|
||||||
</el-table-column>
|
</RouterLink>
|
||||||
<el-table-column label="已退款" width="110">
|
<span class="cell-muted">结算 {{ shortDateTime(row.settled_at) }}</span>
|
||||||
<template #default="{ row }">{{ moneyCent(row.refunded_amount_cent) }}</template>
|
</div>
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="退款中" width="110">
|
<div class="status-stack">
|
||||||
<template #default="{ row }">{{ moneyCent(row.refunding_amount_cent) }}</template>
|
<span>{{ orderStatusLabel(row.order_status) }}</span>
|
||||||
</el-table-column>
|
<small>{{ settlementStatusLabel(row.settlement_status) }}</small>
|
||||||
<el-table-column label="净流入" width="110">
|
<el-tag size="small" :type="financeStatusType(row.finance_status)">
|
||||||
<template #default="{ row }">{{ moneyCent(row.channel_net_amount_cent) }}</template>
|
{{ financeStatusLabel(row.finance_status) }}
|
||||||
</el-table-column>
|
</el-tag>
|
||||||
<el-table-column label="平台收入" width="110">
|
</div>
|
||||||
<template #default="{ row }">{{ money(row.checkout_platform_fee) }}</template>
|
|
||||||
</el-table-column>
|
<div class="party-cell">
|
||||||
<el-table-column label="号主应得" width="110">
|
<span>租 {{ row.renter_phone || row.renter_nickname || row.renter_id }}</span>
|
||||||
<template #default="{ row }">{{ money(row.checkout_owner_income) }}</template>
|
<span>主 {{ row.owner_phone || row.owner_nickname || row.owner_id }}</span>
|
||||||
</el-table-column>
|
</div>
|
||||||
<el-table-column label="号主入账" width="110">
|
|
||||||
<template #default="{ row }">{{ money(row.owner_wallet_income_amount) }}</template>
|
<span class="amount-text amount-cell">{{ moneyCent(row.paid_amount_cent) }}</span>
|
||||||
</el-table-column>
|
<span class="amount-text amount-cell muted-amount">
|
||||||
<el-table-column label="差异" width="110">
|
{{ moneyCent(row.refunded_amount_cent) }}
|
||||||
<template #default="{ row }">
|
</span>
|
||||||
<span :class="{ 'amount-danger': Math.abs(row.settlement_diff_amount) >= 0.05 }">
|
<span class="amount-text amount-cell muted-amount">
|
||||||
|
{{ moneyCent(row.refunding_amount_cent) }}
|
||||||
|
</span>
|
||||||
|
<span class="amount-text amount-cell">{{ moneyCent(row.channel_net_amount_cent) }}</span>
|
||||||
|
<span class="amount-text amount-cell">{{ money(row.checkout_platform_fee) }}</span>
|
||||||
|
<span class="amount-text amount-cell">{{ money(row.checkout_owner_income) }}</span>
|
||||||
|
<span class="amount-text amount-cell">{{ money(row.owner_wallet_income_amount) }}</span>
|
||||||
|
<span
|
||||||
|
class="amount-text amount-cell"
|
||||||
|
:class="{ 'amount-danger': Math.abs(row.settlement_diff_amount) >= 0.05 }"
|
||||||
|
>
|
||||||
{{ money(row.settlement_diff_amount) }}
|
{{ money(row.settlement_diff_amount) }}
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</div>
|
||||||
</el-table-column>
|
</div>
|
||||||
<el-table-column label="财务状态" width="120">
|
|
||||||
<template #default="{ row }">
|
<el-empty v-else :image-size="80" description="暂无财务明细" />
|
||||||
<el-tag :type="financeStatusType(row.finance_status)">
|
</div>
|
||||||
{{ financeStatusLabel(row.finance_status) }}
|
|
||||||
</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="结算时间" min-width="170">
|
|
||||||
<template #default="{ row }">{{ row.settled_at ? formatDateTime(row.settled_at) : '-' }}</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
<AdminTablePagination
|
<AdminTablePagination
|
||||||
v-if="total > 0"
|
v-if="total > 0"
|
||||||
@@ -245,8 +253,135 @@ function formatInputDate(date: Date) {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.finance-details-page {
|
||||||
|
--finance-muted: #7f8aa3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.finance-details-page :deep(.page-header-row) {
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.finance-details-page :deep(.page-header h1) {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.finance-filter-panel {
|
||||||
|
grid-template-columns: 7% 10% 10% 29% 23% 10% 11%;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding: 14px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.finance-filter-panel :deep(.el-form-item__label) {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.finance-filter-panel :deep(.el-input__wrapper),
|
||||||
|
.finance-filter-panel :deep(.el-select__wrapper) {
|
||||||
|
min-height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.finance-details-table {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.finance-grid-header,
|
||||||
|
.finance-grid-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 15% 9% 16% repeat(8, 7.5%);
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.finance-grid-header {
|
||||||
|
border-bottom: 1px solid #edf1f7;
|
||||||
|
color: #7f8aa3;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 650;
|
||||||
|
letter-spacing: 0;
|
||||||
|
line-height: 1.35;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.finance-grid-header > div,
|
||||||
|
.finance-grid-row > div,
|
||||||
|
.finance-grid-row > span {
|
||||||
|
min-width: 0;
|
||||||
|
padding: 8px 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.finance-grid-row {
|
||||||
|
border-bottom: 1px solid #edf1f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.finance-grid-row:last-child {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-cell,
|
||||||
|
.status-stack,
|
||||||
|
.party-cell {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 3px;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-no {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
color: #364152;
|
||||||
|
font-weight: 650;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell-muted,
|
||||||
|
.status-stack small,
|
||||||
|
.party-cell span {
|
||||||
|
color: var(--finance-muted);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-stack > span {
|
||||||
|
color: #364152;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.party-cell span {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-text {
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
color: #344054;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 650;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-cell {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.muted-amount {
|
||||||
|
color: #667085;
|
||||||
|
}
|
||||||
|
|
||||||
.amount-danger {
|
.amount-danger {
|
||||||
color: #dc2626;
|
color: #dc2626;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1440px) {
|
||||||
|
.finance-filter-panel {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user