msumshk/TakeoutSaaS.TenantUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: msumshk:main
Branches Tags
msumshk:main
..
compare: msumshk:d92fc6a878e4788f636c3cd5cb717f860ab9b5fd
Branches Tags
msumshk:main

2 Commits
main ... d92fc6a878

Author SHA1 Message Date
MSuMshk
d92fc6a878 feat(@vben/web-antd): add finance cost management pages 2026-03-04 15:58:42 +08:00
MSuMshk
d98926aa3c feat(finance): 实现发票管理页面与子页面 2026-03-04 15:58:08 +08:00
50 changed files with 1 additions and 4152 deletions
Expand all files Collapse all files

3
apps/web-antd/src/api/finance/index.ts
View File

@@ -1,9 +1,6 @@
/** /**
* 文件职责：财务中心 API 聚合导出。 * 文件职责：财务中心 API 聚合导出。
*/ */
export * from './cost';
export * from './invoice'; export * from './invoice';
export * from './overview';
export * from './report';
export * from './settlement'; export * from './settlement';
export * from './transaction'; export * from './transaction';

122
apps/web-antd/src/api/finance/overview.ts
View File

@@ -1,122 +0,0 @@
/**
* 文件职责：财务概览 API 契约与请求封装。
*/
import { requestClient } from '#/api/request';
/** 财务概览维度。 */
export type FinanceOverviewDimension = 'store' | 'tenant';
/** 趋势周期值。 */
export type FinanceOverviewTrendRange = '7' | '30';
/** 财务概览查询参数。 */
export interface FinanceOverviewDashboardQuery {
dimension: FinanceOverviewDimension;
storeId?: string;
}
/** KPI 卡片数据。 */
export interface FinanceOverviewKpiCardDto {
amount: number;
changeRate: number;
compareAmount: number;
compareLabel: string;
trend: 'down' | 'flat' | 'up';
}
/** 收入趋势点。 */
export interface FinanceOverviewIncomeTrendPointDto {
amount: number;
date: string;
dateLabel: string;
}
/** 收入趋势数据。 */
export interface FinanceOverviewIncomeTrendDto {
last30Days: FinanceOverviewIncomeTrendPointDto[];
last7Days: FinanceOverviewIncomeTrendPointDto[];
}
/** 利润趋势点。 */
export interface FinanceOverviewProfitTrendPointDto {
costAmount: number;
date: string;
dateLabel: string;
netProfitAmount: number;
revenueAmount: number;
}
/** 利润趋势数据。 */
export interface FinanceOverviewProfitTrendDto {
last30Days: FinanceOverviewProfitTrendPointDto[];
last7Days: FinanceOverviewProfitTrendPointDto[];
}
/** 收入构成项。 */
export interface FinanceOverviewIncomeCompositionItemDto {
amount: number;
channel: 'delivery' | 'dine_in' | 'pickup';
channelText: string;
percentage: number;
}
/** 收入构成数据。 */
export interface FinanceOverviewIncomeCompositionDto {
items: FinanceOverviewIncomeCompositionItemDto[];
totalAmount: number;
}
/** 成本构成项。 */
export interface FinanceOverviewCostCompositionItemDto {
amount: number;
category: 'fixed' | 'food' | 'labor' | 'packaging' | 'platform';
categoryText: string;
percentage: number;
}
/** 成本构成数据。 */
export interface FinanceOverviewCostCompositionDto {
items: FinanceOverviewCostCompositionItemDto[];
totalAmount: number;
}
/** TOP 商品项。 */
export interface FinanceOverviewTopProductItemDto {
percentage: number;
productName: string;
rank: number;
revenueAmount: number;
salesQuantity: number;
}
/** TOP 商品排行。 */
export interface FinanceOverviewTopProductDto {
items: FinanceOverviewTopProductItemDto[];
periodDays: number;
}
/** 财务概览驾驶舱数据。 */
export interface FinanceOverviewDashboardDto {
actualReceived: FinanceOverviewKpiCardDto;
costComposition: FinanceOverviewCostCompositionDto;
dimension: FinanceOverviewDimension;
incomeComposition: FinanceOverviewIncomeCompositionDto;
incomeTrend: FinanceOverviewIncomeTrendDto;
netIncome: FinanceOverviewKpiCardDto;
profitTrend: FinanceOverviewProfitTrendDto;
refundAmount: FinanceOverviewKpiCardDto;
storeId?: string;
todayRevenue: FinanceOverviewKpiCardDto;
topProducts: FinanceOverviewTopProductDto;
withdrawableBalance: FinanceOverviewKpiCardDto;
}
/** 查询财务概览驾驶舱。 */
export async function getFinanceOverviewDashboardApi(
params: FinanceOverviewDashboardQuery,
) {
return requestClient.get<FinanceOverviewDashboardDto>(
'/finance/overview/dashboard',
{ params },
);
}

156
apps/web-antd/src/api/finance/report.ts
View File

@@ -1,156 +0,0 @@
/**
* 文件职责：财务中心经营报表 API 契约与请求封装。
*/
import { requestClient } from '#/api/request';
/** 报表周期筛选值。 */
export type FinanceBusinessReportPeriodType = 'daily' | 'monthly' | 'weekly';
/** 经营报表状态值。 */
export type FinanceBusinessReportStatus =
| 'failed'
| 'queued'
| 'running'
| 'succeeded';
/** 经营报表列表查询参数。 */
export interface FinanceBusinessReportListQuery {
page: number;
pageSize: number;
periodType?: FinanceBusinessReportPeriodType;
storeId: string;
}
/** 经营报表详情查询参数。 */
export interface FinanceBusinessReportDetailQuery {
reportId: string;
storeId: string;
}
/** 经营报表批量导出查询参数。 */
export interface FinanceBusinessReportBatchExportQuery {
page: number;
pageSize: number;
periodType?: FinanceBusinessReportPeriodType;
storeId: string;
}
/** 经营报表列表行。 */
export interface FinanceBusinessReportListItemDto {
averageOrderValue: number;
canDownload: boolean;
costTotalAmount: number;
dateText: string;
netProfitAmount: number;
orderCount: number;
profitRatePercent: number;
refundRatePercent: number;
reportId: string;
revenueAmount: number;
status: FinanceBusinessReportStatus;
statusText: string;
}
/** 经营报表列表结果。 */
export interface FinanceBusinessReportListResultDto {
items: FinanceBusinessReportListItemDto[];
page: number;
pageSize: number;
total: number;
}
/** 经营报表 KPI 项。 */
export interface FinanceBusinessReportKpiDto {
key: string;
label: string;
momChangeRate: number;
valueText: string;
yoyChangeRate: number;
}
/** 经营报表明细项。 */
export interface FinanceBusinessReportBreakdownItemDto {
amount: number;
key: string;
label: string;
ratioPercent: number;
}
/** 经营报表详情。 */
export interface FinanceBusinessReportDetailDto {
costBreakdowns: FinanceBusinessReportBreakdownItemDto[];
incomeBreakdowns: FinanceBusinessReportBreakdownItemDto[];
kpis: FinanceBusinessReportKpiDto[];
periodType: FinanceBusinessReportPeriodType;
reportId: string;
status: FinanceBusinessReportStatus;
statusText: string;
title: string;
}
/** 经营报表导出结果。 */
export interface FinanceBusinessReportExportDto {
fileContentBase64: string;
fileName: string;
totalCount: number;
}
/** 查询经营报表列表。 */
export async function getFinanceBusinessReportListApi(
params: FinanceBusinessReportListQuery,
) {
return requestClient.get<FinanceBusinessReportListResultDto>(
'/finance/report/list',
{
params,
},
);
}
/** 查询经营报表详情。 */
export async function getFinanceBusinessReportDetailApi(
params: FinanceBusinessReportDetailQuery,
) {
return requestClient.get<FinanceBusinessReportDetailDto>(
'/finance/report/detail',
{
params,
},
);
}
/** 导出经营报表 PDF。 */
export async function exportFinanceBusinessReportPdfApi(
params: FinanceBusinessReportDetailQuery,
) {
return requestClient.get<FinanceBusinessReportExportDto>(
'/finance/report/export/pdf',
{
params,
},
);
}
/** 导出经营报表 Excel。 */
export async function exportFinanceBusinessReportExcelApi(
params: FinanceBusinessReportDetailQuery,
) {
return requestClient.get<FinanceBusinessReportExportDto>(
'/finance/report/export/excel',
{
params,
},
);
}
/** 批量导出经营报表（ZIP）。 */
export async function exportFinanceBusinessReportBatchApi(
params: FinanceBusinessReportBatchExportQuery,
) {
return requestClient.get<FinanceBusinessReportExportDto>(
'/finance/report/export/batch',
{
params,
},
);
}

4
apps/web-antd/src/api/store-fees/index.ts
View File

@@ -46,8 +46,6 @@ export interface StoreOtherFeesDto {
export interface StoreFeesSettingsDto { export interface StoreFeesSettingsDto {
/** 基础配送费 */ /** 基础配送费 */
baseDeliveryFee: number; baseDeliveryFee: number;
/** 平台服务费率（%） */
platformServiceRate: number;
/** 固定包装费 */ /** 固定包装费 */
fixedPackagingFee: number; fixedPackagingFee: number;
/** 免配送费门槛，空值表示关闭 */ /** 免配送费门槛，空值表示关闭 */
@@ -72,8 +70,6 @@ export interface StoreFeesSettingsDto {
export interface SaveStoreFeesSettingsParams { export interface SaveStoreFeesSettingsParams {
/** 基础配送费 */ /** 基础配送费 */
baseDeliveryFee: number; baseDeliveryFee: number;
/** 平台服务费率（%） */
platformServiceRate: number;
/** 固定包装费 */ /** 固定包装费 */
fixedPackagingFee: number; fixedPackagingFee: number;
/** 免配送费门槛，空值表示关闭 */ /** 免配送费门槛，空值表示关闭 */

115
apps/web-antd/src/views/finance/overview/components/OverviewCompositionCard.vue
View File

@@ -1,115 +0,0 @@
<script setup lang="ts">
import type { EchartsUIType } from '@vben/plugins/echarts';
/**
* 文件职责：财务概览构成环图卡片。
*/
import type { FinanceOverviewCompositionViewItem } from '../types';
import { nextTick, onMounted, ref, watch } from 'vue';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
import {
formatCurrency,
formatPercent,
} from '../composables/overview-page/helpers';
interface Props {
items: FinanceOverviewCompositionViewItem[];
title: string;
totalAmount: number;
totalLabel: string;
}
const props = defineProps<Props>();
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
function renderChart() {
renderEcharts({
tooltip: {
trigger: 'item',
formatter(params: unknown) {
const record = params as {
name?: string;
percent?: number;
value?: number;
};
return `${record.name ?? ''}<br/>${formatCurrency(Number(record.value ?? 0))} (${formatPercent(Number(record.percent ?? 0))})`;
},
},
series: [
{
type: 'pie',
radius: ['55%', '76%'],
center: ['50%', '50%'],
avoidLabelOverlap: true,
label: {
show: false,
},
data: props.items.map((item) => ({
name: item.name,
value: item.amount,
itemStyle: {
color: item.color,
},
})),
},
],
});
}
watch(
() => props.items,
async () => {
await nextTick();
renderChart();
},
{ deep: true },
);
onMounted(() => {
renderChart();
});
</script>
<template>
<div class="fo-section-card">
<div class="fo-section-title">{{ props.title }}</div>
<div class="fo-composition-wrap">
<div class="fo-composition-chart-wrap">
<EchartsUI ref="chartRef" class="fo-composition-chart" />
<div class="fo-composition-center">
<div class="fo-composition-center-value">
{{ formatCurrency(props.totalAmount) }}
</div>
<div class="fo-composition-center-label">{{ props.totalLabel }}</div>
</div>
</div>
<div class="fo-composition-legend">
<div
v-for="item in props.items"
:key="item.key"
class="fo-composition-legend-item"
>
<span
class="fo-composition-dot"
:style="{ backgroundColor: item.color }"
></span>
<span class="fo-composition-name">{{ item.name }}</span>
<span class="fo-composition-percent">{{
formatPercent(item.percentage)
}}</span>
<span class="fo-composition-amount">{{
formatCurrency(item.amount)
}}</span>
</div>
</div>
</div>
</div>
</template>

143
apps/web-antd/src/views/finance/overview/components/OverviewIncomeTrendCard.vue
View File

@@ -1,143 +0,0 @@
<script setup lang="ts">
import type { EchartsUIType } from '@vben/plugins/echarts';
/**
* 文件职责：财务概览收入趋势图卡片。
*/
import type {
FinanceOverviewIncomeTrendPointDto,
FinanceOverviewTrendRange,
} from '#/api/finance/overview';
import { nextTick, onMounted, ref, watch } from 'vue';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
import {
formatAxisAmount,
formatCurrency,
} from '../composables/overview-page/helpers';
interface Props {
points: FinanceOverviewIncomeTrendPointDto[];
range: FinanceOverviewTrendRange;
}
const props = defineProps<Props>();
const emit = defineEmits<{
(event: 'update:range', value: FinanceOverviewTrendRange): void;
}>();
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
function renderChart() {
renderEcharts({
tooltip: {
trigger: 'axis',
formatter(params: unknown) {
if (!Array.isArray(params) || params.length === 0) return '';
const records = params as Array<{
axisValue?: string;
value?: number;
}>;
const record = records[0] ?? {};
return `${record.axisValue ?? ''}<br/>实收：${formatCurrency(Number(record.value ?? 0))}`;
},
},
grid: {
left: '1%',
right: '2%',
bottom: '2%',
top: '8%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: { show: false },
axisLine: {
lineStyle: {
color: '#e5e7eb',
},
},
data: props.points.map((item) => item.dateLabel),
},
yAxis: {
type: 'value',
axisLabel: {
formatter: (value: number) => formatAxisAmount(value),
},
splitLine: {
lineStyle: {
color: '#f1f5f9',
type: 'dashed',
},
},
},
series: [
{
name: '实收',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 6,
itemStyle: {
color: '#1677ff',
},
areaStyle: {
color: 'rgba(22,119,255,0.15)',
},
lineStyle: {
color: '#1677ff',
width: 2.5,
},
data: props.points.map((item) => item.amount),
},
],
});
}
watch(
() => props.points,
async () => {
await nextTick();
renderChart();
},
{ deep: true },
);
onMounted(() => {
renderChart();
});
</script>
<template>
<div class="fo-section-card">
<div class="fo-section-head">
<div class="fo-section-title">收入趋势</div>
<div class="fo-pills">
<button
class="fo-pill"
:class="{ 'is-active': props.range === '7' }"
type="button"
@click="emit('update:range', '7')"
>
近7天
</button>
<button
class="fo-pill"
:class="{ 'is-active': props.range === '30' }"
type="button"
@click="emit('update:range', '30')"
>
近30天
</button>
</div>
</div>
<EchartsUI ref="chartRef" class="fo-trend-chart" />
</div>
</template>

59
apps/web-antd/src/views/finance/overview/components/OverviewKpiRow.vue
View File

@@ -1,59 +0,0 @@
<script setup lang="ts">
/**
* 文件职责：财务概览 KPI 指标卡。
*/
import type { FinanceOverviewKpiKey } from '../composables/overview-page/constants';
import type { FinanceOverviewDashboardDto } from '#/api/finance/overview';
import { computed } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { OVERVIEW_KPI_CONFIG } from '../composables/overview-page/constants';
import {
formatChangeRate,
formatCurrency,
resolveKpiTrendClass,
resolveKpiTrendIcon,
} from '../composables/overview-page/helpers';
interface Props {
dashboard: FinanceOverviewDashboardDto;
}
const props = defineProps<Props>();
const kpiCards = computed(() =>
OVERVIEW_KPI_CONFIG.map((item) => ({
...item,
value: props.dashboard[item.key as FinanceOverviewKpiKey],
})),
);
</script>
<template>
<div class="fo-kpi-row">
<div
v-for="card in kpiCards"
:key="card.key"
class="fo-kpi-card"
:class="`is-${card.tone}`"
>
<div class="fo-kpi-top">
<span class="fo-kpi-label">{{ card.label }}</span>
<span class="fo-kpi-icon">
<IconifyIcon :icon="card.icon" />
</span>
</div>
<div class="fo-kpi-value">{{ formatCurrency(card.value.amount) }}</div>
<div class="fo-kpi-change" :class="resolveKpiTrendClass(card.value)">
<IconifyIcon :icon="resolveKpiTrendIcon(card.value)" />
<span>{{ formatChangeRate(card.value.changeRate) }}</span>
<span>{{ card.value.compareLabel }}</span>
</div>
</div>
</div>
</template>

186
apps/web-antd/src/views/finance/overview/components/OverviewProfitTrendCard.vue
View File

@@ -1,186 +0,0 @@
<script setup lang="ts">
import type { EchartsUIType } from '@vben/plugins/echarts';
/**
* 文件职责：财务概览利润走势图卡片。
*/
import type {
FinanceOverviewProfitTrendPointDto,
FinanceOverviewTrendRange,
} from '#/api/finance/overview';
import { nextTick, onMounted, ref, watch } from 'vue';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
import {
formatAxisAmount,
formatCurrency,
} from '../composables/overview-page/helpers';
interface Props {
points: FinanceOverviewProfitTrendPointDto[];
range: FinanceOverviewTrendRange;
}
const props = defineProps<Props>();
const emit = defineEmits<{
(event: 'update:range', value: FinanceOverviewTrendRange): void;
}>();
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
function renderChart() {
renderEcharts({
tooltip: {
trigger: 'axis',
formatter(params: unknown) {
if (!Array.isArray(params) || params.length === 0) return '';
const records = params as Array<{
axisValue?: string;
seriesName?: string;
value?: number;
}>;
const date = records[0]?.axisValue ?? '';
const revenue = Number(
records.find((item) => item.seriesName === '营收')?.value ?? 0,
);
const cost = Number(
records.find((item) => item.seriesName === '成本')?.value ?? 0,
);
const netProfit = Number(
records.find((item) => item.seriesName === '净利润')?.value ?? 0,
);
return `${date}<br/>营收：${formatCurrency(revenue)}<br/>成本：${formatCurrency(cost)}<br/>净利润：${formatCurrency(netProfit)}`;
},
},
grid: {
left: '1%',
right: '2%',
bottom: '2%',
top: '8%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: { show: false },
axisLine: {
lineStyle: {
color: '#e5e7eb',
},
},
data: props.points.map((item) => item.dateLabel),
},
yAxis: {
type: 'value',
axisLabel: {
formatter: (value: number) => formatAxisAmount(value),
},
splitLine: {
lineStyle: {
color: '#f1f5f9',
type: 'dashed',
},
},
},
series: [
{
name: '营收',
type: 'line',
smooth: true,
symbol: 'none',
lineStyle: {
color: '#1677ff',
width: 2.5,
},
data: props.points.map((item) => item.revenueAmount),
},
{
name: '成本',
type: 'line',
smooth: true,
symbol: 'none',
lineStyle: {
color: '#ef4444',
width: 2,
type: 'dashed',
},
data: props.points.map((item) => item.costAmount),
},
{
name: '净利润',
type: 'line',
smooth: true,
symbol: 'none',
lineStyle: {
color: '#22c55e',
width: 2.5,
},
data: props.points.map((item) => item.netProfitAmount),
},
],
});
}
watch(
() => props.points,
async () => {
await nextTick();
renderChart();
},
{ deep: true },
);
onMounted(() => {
renderChart();
});
</script>
<template>
<div class="fo-section-card">
<div class="fo-section-head">
<div class="fo-section-title">利润走势</div>
<div class="fo-pills">
<button
class="fo-pill"
:class="{ 'is-active': props.range === '7' }"
type="button"
@click="emit('update:range', '7')"
>
近7天
</button>
<button
class="fo-pill"
:class="{ 'is-active': props.range === '30' }"
type="button"
@click="emit('update:range', '30')"
>
近30天
</button>
</div>
</div>
<EchartsUI ref="chartRef" class="fo-profit-chart" />
<div class="fo-profit-legend">
<div class="fo-profit-legend-item">
<span class="fo-profit-legend-line is-revenue"></span>
营收
</div>
<div class="fo-profit-legend-item">
<span class="fo-profit-legend-line is-cost"></span>
成本
</div>
<div class="fo-profit-legend-item">
<span class="fo-profit-legend-line is-net"></span>
净利润
</div>
</div>
</div>
</template>

66
apps/web-antd/src/views/finance/overview/components/OverviewToolbar.vue
View File

@@ -1,66 +0,0 @@
<script setup lang="ts">
/**
* 文件职责：财务概览顶部维度工具条。
*/
import type { OptionItem } from '../types';
import type { FinanceOverviewDimension } from '#/api/finance/overview';
import { Segmented, Select } from 'ant-design-vue';
interface Props {
dimension: FinanceOverviewDimension;
dimensionOptions: Array<{ label: string; value: FinanceOverviewDimension }>;
isStoreLoading: boolean;
showStoreSelect: boolean;
storeId: string;
storeOptions: OptionItem[];
}
const props = defineProps<Props>();
const emit = defineEmits<{
(event: 'update:dimension', value: FinanceOverviewDimension): void;
(event: 'update:storeId', value: string): void;
}>();
function handleStoreChange(value: unknown) {
if (typeof value === 'number' || typeof value === 'string') {
emit('update:storeId', String(value));
return;
}
emit('update:storeId', '');
}
</script>
<template>
<div class="fo-toolbar">
<div class="fo-toolbar-title">财务概览驾驶舱</div>
<div class="fo-toolbar-right">
<Segmented
class="fo-dimension-segmented"
:value="props.dimension"
:options="props.dimensionOptions"
@update:value="
(value) =>
emit(
'update:dimension',
(value as FinanceOverviewDimension) || 'tenant',
)
"
/>
<Select
v-if="props.showStoreSelect"
class="fo-store-select"
:value="props.storeId"
:options="props.storeOptions"
:loading="props.isStoreLoading"
:disabled="props.storeOptions.length === 0"
placeholder="请选择门店"
@update:value="(value) => handleStoreChange(value)"
/>
</div>
</div>
</template>

109
apps/web-antd/src/views/finance/overview/components/OverviewTopProductsCard.vue
View File

@@ -1,109 +0,0 @@
<script setup lang="ts">
/**
* 文件职责：财务概览 TOP10 商品排行表。
*/
import type { FinanceOverviewTopProductItemDto } from '#/api/finance/overview';
import { computed } from 'vue';
import { Table } from 'ant-design-vue';
import {
calcTopProductBarWidth,
formatCurrency,
formatPercent,
} from '../composables/overview-page/helpers';
interface Props {
items: FinanceOverviewTopProductItemDto[];
maxPercentage: number;
periodDays: number;
}
const props = defineProps<Props>();
const columns = [
{
title: '排名',
key: 'rank',
width: 86,
},
{
title: '商品名称',
dataIndex: 'productName',
key: 'productName',
},
{
title: '销量',
dataIndex: 'salesQuantity',
key: 'salesQuantity',
width: 100,
},
{
title: '营收',
key: 'revenueAmount',
width: 120,
},
{
title: '占比',
key: 'percentage',
width: 190,
},
];
const dataSource = computed(() => props.items);
function resolveRankClass(rank: number) {
if (rank === 1) return 'is-top1';
if (rank === 2) return 'is-top2';
if (rank === 3) return 'is-top3';
return 'is-normal';
}
</script>
<template>
<div class="fo-section-card fo-top-card">
<div class="fo-section-title">
TOP10 商品营收排行（近{{ props.periodDays }}天）
</div>
<Table
class="fo-top-table"
:columns="columns"
:data-source="dataSource"
:pagination="false"
:row-key="(record) => `${record.rank}-${record.productName}`"
size="middle"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'rank'">
<span class="fo-rank-num" :class="resolveRankClass(record.rank)">
{{ record.rank }}
</span>
</template>
<template v-else-if="column.key === 'revenueAmount'">
<span class="fo-revenue-text">{{
formatCurrency(record.revenueAmount)
}}</span>
</template>
<template v-else-if="column.key === 'percentage'">
<div class="fo-percent-wrap">
<div class="fo-percent-track">
<div
class="fo-percent-fill"
:style="{
width: `${calcTopProductBarWidth(record.percentage, props.maxPercentage)}%`,
}"
></div>
</div>
<span class="fo-percent-text">{{
formatPercent(record.percentage)
}}</span>
</div>
</template>
</template>
</Table>
</div>
</template>

153
apps/web-antd/src/views/finance/overview/composables/overview-page/constants.ts
View File

@@ -1,153 +0,0 @@
import type { FinanceOverviewTrendState } from '../../types';
import type {
FinanceOverviewDashboardDto,
FinanceOverviewDimension,
FinanceOverviewKpiCardDto,
FinanceOverviewTrendRange,
} from '#/api/finance/overview';
/**
* 文件职责：财务概览页面常量定义。
*/
/** 财务概览查看权限。 */
export const FINANCE_OVERVIEW_VIEW_PERMISSION = 'tenant:finance:overview:view';
/** 维度切换选项。 */
export const OVERVIEW_DIMENSION_OPTIONS: Array<{
label: string;
value: FinanceOverviewDimension;
}> = [
{ label: '租户汇总', value: 'tenant' },
{ label: '门店视角', value: 'store' },
];
/** KPI 键。 */
export type FinanceOverviewKpiKey =
| 'actualReceived'
| 'netIncome'
| 'refundAmount'
| 'todayRevenue'
| 'withdrawableBalance';
/** KPI 卡片配置信息。 */
export const OVERVIEW_KPI_CONFIG: Array<{
icon: string;
key: FinanceOverviewKpiKey;
label: string;
tone: 'blue' | 'green' | 'orange' | 'purple' | 'red';
}> = [
{
key: 'todayRevenue',
label: '今日营业额',
icon: 'lucide:coins',
tone: 'blue',
},
{
key: 'actualReceived',
label: '实收',
icon: 'lucide:badge-check',
tone: 'green',
},
{
key: 'refundAmount',
label: '退款',
icon: 'lucide:undo-2',
tone: 'red',
},
{
key: 'netIncome',
label: '净收入',
icon: 'lucide:wallet',
tone: 'purple',
},
{
key: 'withdrawableBalance',
label: '可提现余额',
icon: 'lucide:landmark',
tone: 'orange',
},
];
/** 收入构成颜色映射。 */
export const INCOME_COMPOSITION_COLOR_MAP: Record<string, string> = {
delivery: '#1677ff',
pickup: '#22c55e',
dine_in: '#f59e0b',
};
/** 成本构成颜色映射。 */
export const COST_COMPOSITION_COLOR_MAP: Record<string, string> = {
food: '#ef4444',
labor: '#f59e0b',
fixed: '#8b5cf6',
packaging: '#06b6d4',
platform: '#94a3b8',
};
/** 默认筛选状态。 */
export const DEFAULT_OVERVIEW_FILTER = {
dimension: 'tenant',
storeId: '',
} as const;
/** 默认趋势状态。 */
export const DEFAULT_OVERVIEW_TREND_STATE: FinanceOverviewTrendState = {
incomeRange: '7',
profitRange: '7',
};
/** 默认 KPI 卡片。 */
export const EMPTY_KPI_CARD: FinanceOverviewKpiCardDto = {
amount: 0,
compareAmount: 0,
changeRate: 0,
compareLabel: '较昨日',
trend: 'flat',
};
/** 默认财务概览数据。 */
export function createDefaultFinanceOverviewDashboard(): FinanceOverviewDashboardDto {
return {
dimension: 'tenant',
storeId: undefined,
todayRevenue: { ...EMPTY_KPI_CARD },
actualReceived: { ...EMPTY_KPI_CARD },
refundAmount: { ...EMPTY_KPI_CARD },
netIncome: { ...EMPTY_KPI_CARD },
withdrawableBalance: {
...EMPTY_KPI_CARD,
compareLabel: '较上周',
},
incomeTrend: {
last7Days: [],
last30Days: [],
},
profitTrend: {
last7Days: [],
last30Days: [],
},
incomeComposition: {
totalAmount: 0,
items: [],
},
costComposition: {
totalAmount: 0,
items: [],
},
topProducts: {
periodDays: 30,
items: [],
},
};
}
/** 趋势范围枚举。 */
export const TREND_RANGE_OPTIONS: Array<{
label: string;
value: FinanceOverviewTrendRange;
}> = [
{ label: '近7天', value: '7' },
{ label: '近30天', value: '30' },
];

109
apps/web-antd/src/views/finance/overview/composables/overview-page/data-actions.ts
View File

@@ -1,109 +0,0 @@
/**
* 文件职责：财务概览页面数据动作。
*/
import type { Ref } from 'vue';
import type {
FinanceOverviewDashboardState,
FinanceOverviewFilterState,
} from '../../types';
import type { StoreListItemDto } from '#/api/store';
import { message } from 'ant-design-vue';
import { getFinanceOverviewDashboardApi } from '#/api/finance/overview';
import { getStoreListApi } from '#/api/store';
import { createDefaultFinanceOverviewDashboard } from './constants';
import { buildDashboardQuery } from './helpers';
interface CreateDataActionsOptions {
dashboard: FinanceOverviewDashboardState;
filters: FinanceOverviewFilterState;
isDashboardLoading: Ref<boolean>;
isStoreLoading: Ref<boolean>;
stores: Ref<StoreListItemDto[]>;
}
/** 创建页面数据动作。 */
export function createDataActions(options: CreateDataActionsOptions) {
function syncDashboard(source: FinanceOverviewDashboardState) {
options.dashboard.dimension = source.dimension;
options.dashboard.storeId = source.storeId;
options.dashboard.todayRevenue = { ...source.todayRevenue };
options.dashboard.actualReceived = { ...source.actualReceived };
options.dashboard.refundAmount = { ...source.refundAmount };
options.dashboard.netIncome = { ...source.netIncome };
options.dashboard.withdrawableBalance = { ...source.withdrawableBalance };
options.dashboard.incomeTrend = {
last7Days: [...source.incomeTrend.last7Days],
last30Days: [...source.incomeTrend.last30Days],
};
options.dashboard.profitTrend = {
last7Days: [...source.profitTrend.last7Days],
last30Days: [...source.profitTrend.last30Days],
};
options.dashboard.incomeComposition = {
totalAmount: source.incomeComposition.totalAmount,
items: [...source.incomeComposition.items],
};
options.dashboard.costComposition = {
totalAmount: source.costComposition.totalAmount,
items: [...source.costComposition.items],
};
options.dashboard.topProducts = {
periodDays: source.topProducts.periodDays,
items: [...source.topProducts.items],
};
}
function clearDashboard() {
syncDashboard(createDefaultFinanceOverviewDashboard());
}
async function loadStores() {
options.isStoreLoading.value = true;
try {
const result = await getStoreListApi({
page: 1,
pageSize: 200,
});
options.stores.value = result.items ?? [];
} catch (error) {
console.error(error);
options.stores.value = [];
message.error('加载门店列表失败，请稍后重试');
} finally {
options.isStoreLoading.value = false;
}
}
async function loadDashboard() {
if (options.filters.dimension === 'store' && !options.filters.storeId) {
clearDashboard();
return;
}
options.isDashboardLoading.value = true;
try {
const result = await getFinanceOverviewDashboardApi(
buildDashboardQuery(options.filters),
);
syncDashboard(result);
} catch (error) {
console.error(error);
clearDashboard();
message.error('加载财务概览失败，请稍后重试');
} finally {
options.isDashboardLoading.value = false;
}
}
return {
clearDashboard,
loadDashboard,
loadStores,
syncDashboard,
};
}

138
apps/web-antd/src/views/finance/overview/composables/overview-page/helpers.ts
View File

@@ -1,138 +0,0 @@
/**
* 文件职责：财务概览页面工具方法。
*/
import type {
FinanceOverviewCompositionViewItem,
FinanceOverviewFilterState,
} from '../../types';
import type {
FinanceOverviewDashboardQuery,
FinanceOverviewKpiCardDto,
} from '#/api/finance/overview';
import {
COST_COMPOSITION_COLOR_MAP,
INCOME_COMPOSITION_COLOR_MAP,
} from './constants';
const currencyFormatter = new Intl.NumberFormat('zh-CN', {
minimumFractionDigits: 0,
maximumFractionDigits: 2,
});
const percentFormatter = new Intl.NumberFormat('zh-CN', {
minimumFractionDigits: 0,
maximumFractionDigits: 2,
});
/** 货币格式化。 */
export function formatCurrency(value: number) {
return `¥${currencyFormatter.format(value)}`;
}
/** 百分比格式化。 */
export function formatPercent(value: number) {
return `${percentFormatter.format(value)}%`;
}
/** 变化率格式化（带正负号）。 */
export function formatChangeRate(value: number) {
const sign = value > 0 ? '+' : '';
return `${sign}${percentFormatter.format(value)}%`;
}
/** 图表纵轴金额格式化。 */
export function formatAxisAmount(value: number) {
if (Math.abs(value) >= 10_000) {
return `${percentFormatter.format(value / 10_000)}万`;
}
return currencyFormatter.format(value);
}
/** 生成查询参数。 */
export function buildDashboardQuery(
filters: FinanceOverviewFilterState,
): FinanceOverviewDashboardQuery {
if (filters.dimension === 'store') {
return {
dimension: filters.dimension,
storeId: filters.storeId,
};
}
return {
dimension: filters.dimension,
};
}
/** 计算 TOP 占比条宽度。 */
export function calcTopProductBarWidth(
percentage: number,
maxPercentage: number,
) {
if (maxPercentage <= 0) return 0;
return Math.round((percentage / maxPercentage) * 100);
}
/** 收入构成转换为视图结构。 */
export function toIncomeCompositionViewItems(
items: Array<{
amount: number;
channel: string;
channelText: string;
percentage: number;
}>,
): FinanceOverviewCompositionViewItem[] {
return items.map((item) => ({
key: item.channel,
name: item.channelText,
amount: item.amount,
percentage: item.percentage,
color: INCOME_COMPOSITION_COLOR_MAP[item.channel] ?? '#1677ff',
}));
}
/** 成本构成转换为视图结构。 */
export function toCostCompositionViewItems(
items: Array<{
amount: number;
category: string;
categoryText: string;
percentage: number;
}>,
): FinanceOverviewCompositionViewItem[] {
return items.map((item) => ({
key: item.category,
name: item.categoryText,
amount: item.amount,
percentage: item.percentage,
color: COST_COMPOSITION_COLOR_MAP[item.category] ?? '#94a3b8',
}));
}
/** 获取 KPI 趋势样式标识。 */
export function resolveKpiTrendClass(card: FinanceOverviewKpiCardDto) {
if (card.trend === 'up') {
return 'is-up';
}
if (card.trend === 'down') {
return 'is-down';
}
return 'is-flat';
}
/** 获取 KPI 趋势图标。 */
export function resolveKpiTrendIcon(card: FinanceOverviewKpiCardDto) {
if (card.trend === 'up') {
return 'lucide:trending-up';
}
if (card.trend === 'down') {
return 'lucide:trending-down';
}
return 'lucide:minus';
}

249
apps/web-antd/src/views/finance/overview/composables/useFinanceOverviewPage.ts
View File

@@ -1,249 +0,0 @@
/**
* 文件职责：财务概览页面状态编排。
*/
import type {
FinanceOverviewCompositionViewItem,
FinanceOverviewDashboardState,
FinanceOverviewFilterState,
FinanceOverviewTrendState,
OptionItem,
} from '../types';
import type {
FinanceOverviewDimension,
FinanceOverviewTrendRange,
} from '#/api/finance/overview';
import type { StoreListItemDto } from '#/api/store';
import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue';
import { useAccessStore } from '@vben/stores';
import {
createDefaultFinanceOverviewDashboard,
DEFAULT_OVERVIEW_FILTER,
DEFAULT_OVERVIEW_TREND_STATE,
FINANCE_OVERVIEW_VIEW_PERMISSION,
OVERVIEW_DIMENSION_OPTIONS,
} from './overview-page/constants';
import { createDataActions } from './overview-page/data-actions';
import {
toCostCompositionViewItems,
toIncomeCompositionViewItems,
} from './overview-page/helpers';
/** 创建财务概览页面组合状态。 */
export function useFinanceOverviewPage() {
const accessStore = useAccessStore();
const stores = ref<StoreListItemDto[]>([]);
const filters = reactive<FinanceOverviewFilterState>({
...DEFAULT_OVERVIEW_FILTER,
});
const trendState = reactive<FinanceOverviewTrendState>({
...DEFAULT_OVERVIEW_TREND_STATE,
});
const dashboard = reactive<FinanceOverviewDashboardState>(
createDefaultFinanceOverviewDashboard(),
);
const isStoreLoading = ref(false);
const isDashboardLoading = ref(false);
const accessCodeSet = computed(
() => new Set((accessStore.accessCodes ?? []).map(String)),
);
const canView = computed(() =>
accessCodeSet.value.has(FINANCE_OVERVIEW_VIEW_PERMISSION),
);
const storeOptions = computed<OptionItem[]>(() =>
stores.value.map((item) => ({
label: item.name,
value: item.id,
})),
);
const showStoreSelect = computed(() => filters.dimension === 'store');
const hasStore = computed(() => stores.value.length > 0);
const canQueryCurrentScope = computed(
() => filters.dimension === 'tenant' || Boolean(filters.storeId),
);
const incomeTrendPoints = computed(() =>
trendState.incomeRange === '7'
? dashboard.incomeTrend.last7Days
: dashboard.incomeTrend.last30Days,
);
const profitTrendPoints = computed(() =>
trendState.profitRange === '7'
? dashboard.profitTrend.last7Days
: dashboard.profitTrend.last30Days,
);
const incomeCompositionItems = computed<FinanceOverviewCompositionViewItem[]>(
() => toIncomeCompositionViewItems(dashboard.incomeComposition.items),
);
const costCompositionItems = computed<FinanceOverviewCompositionViewItem[]>(
() => toCostCompositionViewItems(dashboard.costComposition.items),
);
const topProductMaxPercentage = computed(() => {
if (dashboard.topProducts.items.length === 0) {
return 0;
}
return Math.max(
...dashboard.topProducts.items.map((item) => item.percentage),
);
});
const dataActions = createDataActions({
stores,
filters,
dashboard,
isStoreLoading,
isDashboardLoading,
});
function ensureStoreSelection() {
if (filters.dimension !== 'store') {
return false;
}
if (filters.storeId) {
return false;
}
const firstStore = stores.value[0];
if (!firstStore) {
return false;
}
filters.storeId = firstStore.id;
return true;
}
async function loadByCurrentScope() {
if (!canView.value) {
return;
}
if (filters.dimension === 'store' && !filters.storeId) {
dataActions.clearDashboard();
return;
}
await dataActions.loadDashboard();
}
async function initPageData() {
if (!canView.value) {
stores.value = [];
filters.storeId = '';
dataActions.clearDashboard();
return;
}
await dataActions.loadStores();
if (ensureStoreSelection()) {
return;
}
await loadByCurrentScope();
}
function setDimension(value: FinanceOverviewDimension) {
filters.dimension = value;
}
function setStoreId(value: string) {
filters.storeId = value;
}
function setIncomeRange(value: FinanceOverviewTrendRange) {
trendState.incomeRange = value;
}
function setProfitRange(value: FinanceOverviewTrendRange) {
trendState.profitRange = value;
}
watch(
() => [filters.dimension, filters.storeId],
async () => {
if (!canView.value) {
return;
}
if (filters.dimension === 'store' && ensureStoreSelection()) {
return;
}
await loadByCurrentScope();
},
);
watch(
() => canView.value,
async (value, oldValue) => {
if (value === oldValue) {
return;
}
if (!value) {
stores.value = [];
filters.storeId = '';
dataActions.clearDashboard();
return;
}
await initPageData();
},
);
onMounted(async () => {
await initPageData();
});
onActivated(() => {
if (!canView.value) {
return;
}
if (stores.value.length === 0) {
void initPageData();
return;
}
if (!showStoreSelect.value || filters.storeId) {
void loadByCurrentScope();
}
});
return {
canQueryCurrentScope,
canView,
costCompositionItems,
dashboard,
hasStore,
incomeCompositionItems,
incomeTrendPoints,
isDashboardLoading,
isStoreLoading,
OVERVIEW_DIMENSION_OPTIONS,
profitTrendPoints,
showStoreSelect,
storeOptions,
topProductMaxPercentage,
trendState,
filters,
setDimension,
setStoreId,
setIncomeRange,
setProfitRange,
};
}

108
apps/web-antd/src/views/finance/overview/index.vue
View File

@@ -1,108 +0,0 @@
<script setup lang="ts">
/**
* 文件职责：财务概览页面入口编排。
*/
import { Page } from '@vben/common-ui';
import { Empty, Spin } from 'ant-design-vue';
import OverviewCompositionCard from './components/OverviewCompositionCard.vue';
import OverviewIncomeTrendCard from './components/OverviewIncomeTrendCard.vue';
import OverviewKpiRow from './components/OverviewKpiRow.vue';
import OverviewProfitTrendCard from './components/OverviewProfitTrendCard.vue';
import OverviewToolbar from './components/OverviewToolbar.vue';
import OverviewTopProductsCard from './components/OverviewTopProductsCard.vue';
import { useFinanceOverviewPage } from './composables/useFinanceOverviewPage';
const {
canQueryCurrentScope,
canView,
costCompositionItems,
dashboard,
filters,
hasStore,
incomeCompositionItems,
incomeTrendPoints,
isDashboardLoading,
isStoreLoading,
OVERVIEW_DIMENSION_OPTIONS,
profitTrendPoints,
setDimension,
setIncomeRange,
setProfitRange,
setStoreId,
showStoreSelect,
storeOptions,
topProductMaxPercentage,
trendState,
} = useFinanceOverviewPage();
</script>
<template>
<Page title="财务概览" content-class="page-finance-overview">
<div class="fo-page">
<OverviewToolbar
:dimension="filters.dimension"
:dimension-options="OVERVIEW_DIMENSION_OPTIONS"
:show-store-select="showStoreSelect"
:store-id="filters.storeId"
:store-options="storeOptions"
:is-store-loading="isStoreLoading"
@update:dimension="setDimension"
@update:store-id="setStoreId"
/>
<Empty v-if="!canView" description="暂无财务概览页面访问权限" />
<div v-else-if="showStoreSelect && !hasStore" class="fo-empty">
<Empty description="暂无门店，请先创建门店" />
</div>
<div v-else-if="!canQueryCurrentScope" class="fo-empty">
<Empty description="请选择门店后查看数据" />
</div>
<Spin v-else :spinning="isDashboardLoading">
<OverviewKpiRow :dashboard="dashboard" />
<OverviewIncomeTrendCard
:points="incomeTrendPoints"
:range="trendState.incomeRange"
@update:range="setIncomeRange"
/>
<div class="fo-two-col">
<OverviewCompositionCard
title="收入构成"
total-label="总实收"
:total-amount="dashboard.incomeComposition.totalAmount"
:items="incomeCompositionItems"
/>
<OverviewCompositionCard
title="成本占比"
total-label="总成本"
:total-amount="dashboard.costComposition.totalAmount"
:items="costCompositionItems"
/>
</div>
<OverviewProfitTrendCard
:points="profitTrendPoints"
:range="trendState.profitRange"
@update:range="setProfitRange"
/>
<OverviewTopProductsCard
:items="dashboard.topProducts.items"
:period-days="dashboard.topProducts.periodDays"
:max-percentage="topProductMaxPercentage"
/>
</Spin>
</div>
</Page>
</template>
<style lang="less">
@import './styles/index.less';
</style>

54
apps/web-antd/src/views/finance/overview/styles/base.less
View File

@@ -1,54 +0,0 @@
/**
* 文件职责：财务概览页面基础样式。
*/
.page-finance-overview {
.ant-card {
border: 1px solid #f0f0f0;
border-radius: 10px;
}
}
.fo-page {
display: flex;
flex-direction: column;
gap: 14px;
}
.fo-empty {
padding: 36px 0;
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 10px;
}
.fo-page > * {
animation: fo-fade-in 0.38s ease both;
}
.fo-page > *:nth-child(2) {
animation-delay: 0.04s;
}
.fo-page > *:nth-child(3) {
animation-delay: 0.08s;
}
.fo-page > *:nth-child(4) {
animation-delay: 0.12s;
}
.fo-page > *:nth-child(5) {
animation-delay: 0.16s;
}
@keyframes fo-fade-in {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

125
apps/web-antd/src/views/finance/overview/styles/charts.less
View File

@@ -1,125 +0,0 @@
/**
* 文件职责：财务概览图表区域样式。
*/
.fo-trend-chart,
.fo-profit-chart {
height: 260px;
}
.fo-composition-wrap {
display: flex;
gap: 20px;
align-items: center;
}
.fo-composition-chart-wrap {
position: relative;
flex-shrink: 0;
width: 220px;
height: 220px;
}
.fo-composition-chart {
width: 100%;
height: 100%;
}
.fo-composition-center {
position: absolute;
inset: 71px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
pointer-events: none;
}
.fo-composition-center-value {
font-size: 14px;
font-weight: 700;
color: rgb(0 0 0 / 88%);
}
.fo-composition-center-label {
font-size: 11px;
color: rgb(0 0 0 / 45%);
}
.fo-composition-legend {
display: flex;
flex: 1;
flex-direction: column;
gap: 10px;
}
.fo-composition-legend-item {
display: grid;
grid-template-columns: 10px 1fr auto auto;
gap: 8px;
align-items: center;
font-size: 13px;
}
.fo-composition-dot {
width: 10px;
height: 10px;
border-radius: 2px;
}
.fo-composition-name {
color: rgb(0 0 0 / 88%);
}
.fo-composition-percent {
min-width: 54px;
color: rgb(0 0 0 / 55%);
text-align: right;
}
.fo-composition-amount {
min-width: 88px;
font-weight: 600;
color: rgb(0 0 0 / 88%);
text-align: right;
}
.fo-profit-legend {
display: flex;
gap: 20px;
align-items: center;
margin-top: 10px;
}
.fo-profit-legend-item {
display: flex;
gap: 6px;
align-items: center;
font-size: 12px;
color: rgb(0 0 0 / 65%);
}
.fo-profit-legend-line {
display: inline-flex;
width: 20px;
height: 3px;
border-radius: 3px;
}
.fo-profit-legend-line.is-revenue {
background: #1677ff;
}
.fo-profit-legend-line.is-cost {
background: repeating-linear-gradient(
90deg,
#ef4444 0,
#ef4444 6px,
rgb(239 68 68 / 10%) 6px,
rgb(239 68 68 / 10%) 9px
);
}
.fo-profit-legend-line.is-net {
background: #22c55e;
}

9
apps/web-antd/src/views/finance/overview/styles/index.less
View File

@@ -1,9 +0,0 @@
/**
* 文件职责：财务概览页面样式聚合入口。
*/
@import './base.less';
@import './layout.less';
@import './kpi.less';
@import './charts.less';
@import './table.less';
@import './responsive.less';

97
apps/web-antd/src/views/finance/overview/styles/kpi.less
View File

@@ -1,97 +0,0 @@
/**
* 文件职责：财务概览 KPI 卡片样式。
*/
.fo-kpi-row {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
}
.fo-kpi-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 18px;
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 10px;
box-shadow: 0 2px 8px rgb(15 23 42 / 5%);
transition: all 0.2s ease;
}
.fo-kpi-card:hover {
box-shadow: 0 8px 16px rgb(15 23 42 / 10%);
transform: translateY(-1px);
}
.fo-kpi-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.fo-kpi-label {
font-size: 13px;
color: rgb(0 0 0 / 60%);
}
.fo-kpi-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
font-size: 18px;
border-radius: 8px;
}
.fo-kpi-card.is-blue .fo-kpi-icon {
color: #1677ff;
background: #e6f4ff;
}
.fo-kpi-card.is-green .fo-kpi-icon {
color: #16a34a;
background: #f0fdf4;
}
.fo-kpi-card.is-red .fo-kpi-icon {
color: #ef4444;
background: #fef2f2;
}
.fo-kpi-card.is-purple .fo-kpi-icon {
color: #7c3aed;
background: #f5f3ff;
}
.fo-kpi-card.is-orange .fo-kpi-icon {
color: #f59e0b;
background: #fffbeb;
}
.fo-kpi-value {
font-size: 25px;
font-weight: 800;
color: rgb(0 0 0 / 88%);
letter-spacing: -0.2px;
}
.fo-kpi-change {
display: flex;
gap: 4px;
align-items: center;
font-size: 12px;
}
.fo-kpi-change.is-up {
color: #16a34a;
}
.fo-kpi-change.is-down {
color: #ef4444;
}
.fo-kpi-change.is-flat {
color: rgb(0 0 0 / 45%);
}

94
apps/web-antd/src/views/finance/overview/styles/layout.less
View File

@@ -1,94 +0,0 @@
/**
* 文件职责：财务概览页面布局与工具条样式。
*/
.fo-toolbar {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 10px;
}
.fo-toolbar-title {
font-size: 16px;
font-weight: 700;
color: rgb(0 0 0 / 88%);
}
.fo-toolbar-right {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: flex-end;
}
.fo-dimension-segmented {
.ant-segmented-item {
min-width: 92px;
text-align: center;
}
}
.fo-store-select {
width: 230px;
}
.fo-section-card {
padding: 18px;
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 10px;
box-shadow: 0 2px 8px rgb(15 23 42 / 5%);
}
.fo-section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.fo-section-title {
padding-left: 10px;
margin-bottom: 12px;
font-size: 15px;
font-weight: 600;
color: rgb(0 0 0 / 88%);
border-left: 3px solid #1677ff;
}
.fo-section-head .fo-section-title {
margin-bottom: 0;
}
.fo-pills {
display: flex;
gap: 6px;
}
.fo-pill {
padding: 4px 14px;
font-size: 12px;
color: rgb(0 0 0 / 65%);
cursor: pointer;
background: #f3f4f6;
border: none;
border-radius: 99px;
transition: all 0.2s ease;
}
.fo-pill.is-active {
color: #fff;
background: #1677ff;
}
.fo-two-col {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}

66
apps/web-antd/src/views/finance/overview/styles/responsive.less
View File

@@ -1,66 +0,0 @@
/**
* 文件职责：财务概览页面响应式样式。
*/
.page-finance-overview {
@media (max-width: 1200px) {
.fo-kpi-row {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 992px) {
.fo-two-col {
grid-template-columns: 1fr;
}
.fo-kpi-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.fo-toolbar {
align-items: stretch;
}
.fo-toolbar-right {
justify-content: flex-start;
}
.fo-store-select {
width: 100%;
}
.fo-kpi-row {
grid-template-columns: 1fr;
}
.fo-composition-wrap {
flex-direction: column;
align-items: flex-start;
}
.fo-composition-chart-wrap {
width: 180px;
height: 180px;
}
.fo-composition-center {
inset: 56px;
}
.fo-profit-legend {
flex-wrap: wrap;
gap: 12px;
}
.fo-top-table {
.ant-table-thead > tr > th:nth-child(3),
.ant-table-thead > tr > th:nth-child(4),
.ant-table-tbody > tr > td:nth-child(3),
.ant-table-tbody > tr > td:nth-child(4) {
display: none;
}
}
}
}

90
apps/web-antd/src/views/finance/overview/styles/table.less
View File

@@ -1,90 +0,0 @@
/**
* 文件职责：财务概览 TOP 排行样式。
*/
.fo-top-card {
padding-bottom: 10px;
}
.fo-top-table {
.ant-table {
overflow: hidden;
border: 1px solid #f0f0f0;
border-radius: 10px;
}
.ant-table-thead > tr > th {
font-size: 12px;
font-weight: 600;
color: rgb(0 0 0 / 55%);
background: #fafafa;
}
.ant-table-tbody > tr > td {
font-size: 13px;
}
.ant-table-tbody > tr:hover > td {
background: #f8fbff;
}
}
.fo-rank-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
font-size: 11px;
font-weight: 700;
color: #fff;
border-radius: 4px;
}
.fo-rank-num.is-top1 {
background: linear-gradient(135deg, #ef4444, #f97316);
}
.fo-rank-num.is-top2 {
background: linear-gradient(135deg, #f59e0b, #fbbf24);
}
.fo-rank-num.is-top3 {
background: linear-gradient(135deg, #1677ff, #69b1ff);
}
.fo-rank-num.is-normal {
color: #4b5563;
background: #e5e7eb;
}
.fo-revenue-text {
font-weight: 600;
color: rgb(0 0 0 / 88%);
}
.fo-percent-wrap {
display: flex;
gap: 8px;
align-items: center;
}
.fo-percent-track {
width: 118px;
height: 6px;
overflow: hidden;
background: #e5e7eb;
border-radius: 3px;
}
.fo-percent-fill {
height: 100%;
background: linear-gradient(90deg, #1677ff, #69b1ff);
border-radius: 3px;
}
.fo-percent-text {
min-width: 44px;
font-size: 12px;
color: rgb(0 0 0 / 45%);
text-align: right;
}

38
apps/web-antd/src/views/finance/overview/types.ts
View File

@@ -1,38 +0,0 @@
/**
* 文件职责：财务概览页面本地类型定义。
*/
import type {
FinanceOverviewDashboardDto,
FinanceOverviewDimension,
FinanceOverviewTrendRange,
} from '#/api/finance/overview';
/** 选项项。 */
export interface OptionItem {
label: string;
value: string;
}
/** 页面筛选状态。 */
export interface FinanceOverviewFilterState {
dimension: FinanceOverviewDimension;
storeId: string;
}
/** 图表构成视图项。 */
export interface FinanceOverviewCompositionViewItem {
amount: number;
color: string;
key: string;
name: string;
percentage: number;
}
/** 概览页面数据状态。 */
export type FinanceOverviewDashboardState = FinanceOverviewDashboardDto;
/** 趋势切换状态。 */
export interface FinanceOverviewTrendState {
incomeRange: FinanceOverviewTrendRange;
profitRange: FinanceOverviewTrendRange;
}

96
apps/web-antd/src/views/finance/report/components/ReportBatchExportModal.vue
View File

@@ -1,96 +0,0 @@
<script setup lang="ts">
/**
* 文件职责：经营报表批量导出确认弹窗。
*/
import type { FinanceBusinessReportPeriodType } from '#/api/finance';
import { computed } from 'vue';
import { Modal } from 'ant-design-vue';
import { resolvePeriodTypeLabel } from '../composables/report-page/helpers';
interface PaginationState {
page: number;
pageSize: number;
total: number;
}
interface Props {
currentPageCount: number;
open: boolean;
pagination: PaginationState;
periodType: FinanceBusinessReportPeriodType;
selectedStoreName: string;
submitting: boolean;
}
const props = defineProps<Props>();
const emit = defineEmits<{
(event: 'close'): void;
(event: 'confirm'): void;
}>();
const periodText = computed(() => resolvePeriodTypeLabel(props.periodType));
const pageSizeText = computed(() => `${props.pagination.pageSize} 条/页`);
const pageRangeText = computed(() => {
const pageSize = Math.max(1, Number(props.pagination.pageSize || 20));
const page = Math.max(1, Number(props.pagination.page || 1));
const currentCount = Math.max(0, Number(props.currentPageCount || 0));
if (currentCount === 0) {
return '当前页暂无数据';
}
const start = (page - 1) * pageSize + 1;
const end = start + currentCount - 1;
return `${start}-${end}`;
});
</script>
<template>
<Modal
:open="props.open"
title="批量导出经营报表"
ok-text="确认导出"
cancel-text="取消"
:confirm-loading="props.submitting"
@ok="emit('confirm')"
@cancel="emit('close')"
>
<div class="frp-batch-modal">
<p class="frp-batch-desc">
将按当前门店、当前周期和当前分页范围导出 ZIP 文件（包含 PDF 与 Excel）。
</p>
<div class="frp-batch-list">
<div class="frp-batch-line">
<span class="frp-batch-label">门店</span>
<span class="frp-batch-value">{{ props.selectedStoreName }}</span>
</div>
<div class="frp-batch-line">
<span class="frp-batch-label">报表周期</span>
<span class="frp-batch-value">{{ periodText }}</span>
</div>
<div class="frp-batch-line">
<span class="frp-batch-label">当前页</span>
<span class="frp-batch-value">第 {{ props.pagination.page }} 页</span>
</div>
<div class="frp-batch-line">
<span class="frp-batch-label">分页大小</span>
<span class="frp-batch-value">{{ pageSizeText }}</span>
</div>
<div class="frp-batch-line">
<span class="frp-batch-label">导出范围</span>
<span class="frp-batch-value">{{ pageRangeText }}</span>
</div>
<div class="frp-batch-line is-total">
<span class="frp-batch-label">总报表数</span>
<span class="frp-batch-value">{{ props.pagination.total }} 条</span>
</div>
</div>
</div>
</Modal>
</template>

208
apps/web-antd/src/views/finance/report/components/ReportPreviewDrawer.vue
View File

@@ -1,208 +0,0 @@
<script setup lang="ts">
/**
* 文件职责：经营报表预览抽屉。
*/
import type { FinanceBusinessReportDetailDto } from '#/api/finance';
import { computed } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { Button, Drawer, Empty, Spin } from 'ant-design-vue';
import {
formatCurrency,
formatPercent,
formatSignedRate,
} from '../composables/report-page/helpers';
interface Props {
canExport: boolean;
detail: FinanceBusinessReportDetailDto | null;
isDownloadingExcel: boolean;
isDownloadingPdf: boolean;
loading: boolean;
open: boolean;
}
const props = defineProps<Props>();
const emit = defineEmits<{
(event: 'close'): void;
(event: 'downloadExcel'): void;
(event: 'downloadPdf'): void;
}>();
const drawerTitle = computed(() => props.detail?.title || '经营报表预览');
const canDownload = computed(
() => props.canExport && Boolean(props.detail?.reportId),
);
const incomeIconMap: Record<string, { icon: string; tone: string }> = {
delivery: { icon: 'lucide:bike', tone: 'primary' },
dine_in: { icon: 'lucide:utensils', tone: 'warning' },
pickup: { icon: 'lucide:shopping-bag', tone: 'success' },
};
const costIconMap: Record<string, { icon: string; tone: string }> = {
fixed_expense: { icon: 'lucide:building-2', tone: 'muted' },
food_material: { icon: 'lucide:carrot', tone: 'warning' },
labor: { icon: 'lucide:users', tone: 'primary' },
packaging_consumable: { icon: 'lucide:package', tone: 'success' },
};
function resolveBreakdownMeta(type: 'cost' | 'income', key: string) {
const map = type === 'income' ? incomeIconMap : costIconMap;
return map[key] || { icon: 'lucide:circle', tone: 'muted' };
}
function isPositiveMetric(key: string) {
return key !== 'refund_rate';
}
function resolveKpiChangeTone(key: string, value: number) {
if (!Number.isFinite(value) || value === 0) {
return 'neutral';
}
const increaseGood = isPositiveMetric(key);
const isGood = (value > 0 && increaseGood) || (value < 0 && !increaseGood);
return isGood ? 'positive' : 'negative';
}
function formatKpiChangeText(prefix: '同比' | '环比', value: number) {
return `${prefix} ${formatSignedRate(value)}`;
}
</script>
<template>
<Drawer
:open="props.open"
class="frp-preview-drawer"
width="560"
:title="drawerTitle"
@close="emit('close')"
>
<Spin :spinning="props.loading">
<template v-if="props.detail">
<div class="frp-section">
<div class="frp-section-hd">关键指标</div>
<div class="frp-kpi-grid">
<div
v-for="item in props.detail.kpis"
:key="`kpi-${item.key}`"
class="frp-kpi-item"
>
<div class="frp-kpi-label">{{ item.label }}</div>
<div
class="frp-kpi-val"
:class="{ 'is-profit': item.key === 'net_profit' }"
>
{{ item.valueText }}
</div>
<div class="frp-kpi-change">
<span
:class="`frp-kpi-change-${resolveKpiChangeTone(item.key, item.yoyChangeRate)}`"
>
{{ formatKpiChangeText('同比', item.yoyChangeRate) }}
</span>
<span
:class="`frp-kpi-change-${resolveKpiChangeTone(item.key, item.momChangeRate)}`"
>
{{ formatKpiChangeText('环比', item.momChangeRate) }}
</span>
</div>
</div>
</div>
</div>
<div class="frp-divider"></div>
<div class="frp-section">
<div class="frp-section-hd">收入明细（按渠道）</div>
<div
v-for="item in props.detail.incomeBreakdowns"
:key="`income-${item.key}`"
class="frp-detail-row"
>
<span class="frp-detail-name">
<IconifyIcon
:icon="resolveBreakdownMeta('income', item.key).icon"
class="frp-breakdown-icon"
:class="`is-${resolveBreakdownMeta('income', item.key).tone}`"
/>
{{ item.label }}
</span>
<div class="frp-detail-right">
<span class="frp-detail-pct">{{
formatPercent(item.ratioPercent)
}}</span>
<span class="frp-detail-amount">{{
formatCurrency(item.amount)
}}</span>
</div>
</div>
</div>
<div class="frp-divider"></div>
<div class="frp-section">
<div class="frp-section-hd">成本明细（按类别）</div>
<div
v-for="item in props.detail.costBreakdowns"
:key="`cost-${item.key}`"
class="frp-detail-row"
>
<span class="frp-detail-name">
<IconifyIcon
:icon="resolveBreakdownMeta('cost', item.key).icon"
class="frp-breakdown-icon"
:class="`is-${resolveBreakdownMeta('cost', item.key).tone}`"
/>
{{ item.label }}
</span>
<div class="frp-detail-right">
<span class="frp-detail-pct">{{
formatPercent(item.ratioPercent)
}}</span>
<span class="frp-detail-amount">{{
formatCurrency(item.amount)
}}</span>
</div>
</div>
</div>
</template>
<Empty v-else description="暂无报表详情" />
</Spin>
<template #footer>
<div class="frp-drawer-footer">
<Button @click="emit('close')">关闭</Button>
<Button
type="primary"
class="frp-drawer-btn"
:disabled="!canDownload"
:loading="props.isDownloadingPdf"
@click="emit('downloadPdf')"
>
<template #icon>
<IconifyIcon icon="lucide:file-text" />
</template>
下载PDF
</Button>
<Button
class="frp-drawer-btn"
:disabled="!canDownload"
:loading="props.isDownloadingExcel"
@click="emit('downloadExcel')"
>
<template #icon>
<IconifyIcon icon="lucide:table" />
</template>
下载Excel
</Button>
</div>
</template>
</Drawer>
</template>

205
apps/web-antd/src/views/finance/report/components/ReportTableCard.vue
View File

@@ -1,205 +0,0 @@
<script setup lang="ts">
import type { TablePaginationConfig, TableProps } from 'ant-design-vue';
/**
* 文件职责：经营报表列表表格与分页。
*/
import type { FinanceBusinessReportListItemDto } from '#/api/finance';
import { h } from 'vue';
import { Button, Table, Tag } from 'ant-design-vue';
import {
formatAverageOrderValue,
formatCurrency,
formatOrderCount,
formatPercent,
resolveReportStatusTagColor,
} from '../composables/report-page/helpers';
interface PaginationState {
page: number;
pageSize: number;
total: number;
}
interface Props {
canExport: boolean;
loading: boolean;
pagination: PaginationState;
rows: FinanceBusinessReportListItemDto[];
}
const props = defineProps<Props>();
const emit = defineEmits<{
(event: 'downloadExcel', reportId: string): void;
(event: 'downloadPdf', reportId: string): void;
(event: 'pageChange', page: number, pageSize: number): void;
(event: 'preview', reportId: string): void;
}>();
const columns: TableProps['columns'] = [
{
title: '日期',
dataIndex: 'dateText',
width: 160,
customRender: ({ text }) => h('span', { class: 'frp-date' }, String(text)),
},
{
title: '营业额',
dataIndex: 'revenueAmount',
width: 130,
align: 'right',
customRender: ({ record }) =>
h('span', { class: 'frp-amount' }, formatCurrency(record.revenueAmount)),
},
{
title: '订单数',
dataIndex: 'orderCount',
width: 100,
align: 'right',
customRender: ({ record }) =>
h('span', { class: 'frp-value' }, formatOrderCount(record.orderCount)),
},
{
title: '客单价',
dataIndex: 'averageOrderValue',
width: 120,
align: 'right',
customRender: ({ record }) =>
h(
'span',
{ class: 'frp-value' },
formatAverageOrderValue(record.averageOrderValue),
),
},
{
title: '退款率',
dataIndex: 'refundRatePercent',
width: 100,
align: 'right',
customRender: ({ record }) =>
h(
'span',
{ class: 'frp-value' },
formatPercent(record.refundRatePercent),
),
},
{
title: '成本总额',
dataIndex: 'costTotalAmount',
width: 130,
align: 'right',
customRender: ({ record }) =>
h('span', { class: 'frp-value' }, formatCurrency(record.costTotalAmount)),
},
{
title: '净利润',
dataIndex: 'netProfitAmount',
width: 130,
align: 'right',
customRender: ({ record }) => {
const amount = Number(record.netProfitAmount || 0);
return h(
'span',
{
class: ['frp-amount', amount >= 0 ? 'is-profit' : 'is-loss'],
},
formatCurrency(amount),
);
},
},
{
title: '利润率',
dataIndex: 'profitRatePercent',
width: 100,
align: 'right',
customRender: ({ record }) =>
h(
'span',
{ class: 'frp-value' },
formatPercent(record.profitRatePercent),
),
},
{
title: '状态',
dataIndex: 'statusText',
width: 96,
customRender: ({ record }) =>
h(
Tag,
{
color: resolveReportStatusTagColor(record.status),
},
() => String(record.statusText || '--'),
),
},
{
title: '操作',
dataIndex: 'action',
width: 210,
customRender: ({ record }) => {
const reportId = String(record.reportId || '');
const canDownload = props.canExport && Boolean(record.canDownload);
return h('div', { class: 'frp-action-group' }, [
h(
Button,
{
type: 'link',
class: 'frp-action-link',
onClick: () => emit('preview', reportId),
},
() => '预览',
),
h(
Button,
{
type: 'link',
class: 'frp-action-link',
disabled: !canDownload,
onClick: () => emit('downloadPdf', reportId),
},
() => '下载PDF',
),
h(
Button,
{
type: 'link',
class: 'frp-action-link',
disabled: !canDownload,
onClick: () => emit('downloadExcel', reportId),
},
() => '下载Excel',
),
]);
},
},
];
function handleTableChange(next: TablePaginationConfig) {
emit('pageChange', Number(next.current || 1), Number(next.pageSize || 20));
}
</script>
<template>
<div class="frp-table-card">
<Table
row-key="reportId"
:columns="columns"
:data-source="props.rows"
:loading="props.loading"
:pagination="{
current: props.pagination.page,
pageSize: props.pagination.pageSize,
total: props.pagination.total,
showSizeChanger: true,
pageSizeOptions: ['20', '50', '100'],
showTotal: (total: number) => `共 ${total} 条`,
}"
@change="handleTableChange"
/>
</div>
</template>

80
apps/web-antd/src/views/finance/report/components/ReportToolbar.vue
View File

@@ -1,80 +0,0 @@
<script setup lang="ts">
import type { OptionItem } from '../types';
/**
* 文件职责：经营报表工具栏（周期切换、门店选择、批量导出）。
*/
import type { FinanceBusinessReportPeriodType } from '#/api/finance';
import { IconifyIcon } from '@vben/icons';
import { Button, Segmented, Select } from 'ant-design-vue';
import { REPORT_PERIOD_OPTIONS } from '../composables/report-page/constants';
interface Props {
canExport: boolean;
isBatchExporting: boolean;
isStoreLoading: boolean;
periodType: FinanceBusinessReportPeriodType;
selectedStoreId: string;
storeOptions: OptionItem[];
}
const props = defineProps<Props>();
const emit = defineEmits<{
(event: 'batchExport'): void;
(event: 'update:periodType', value: FinanceBusinessReportPeriodType): void;
(event: 'update:selectedStoreId', value: string): void;
}>();
function handleStoreChange(value: unknown) {
if (typeof value === 'number' || typeof value === 'string') {
emit('update:selectedStoreId', String(value));
return;
}
emit('update:selectedStoreId', '');
}
function handlePeriodChange(value: unknown) {
const period = String(value || 'daily') as FinanceBusinessReportPeriodType;
emit('update:periodType', period);
}
</script>
<template>
<div class="frp-toolbar">
<Segmented
class="frp-period-segment"
:value="props.periodType"
:options="REPORT_PERIOD_OPTIONS"
@update:value="(value) => handlePeriodChange(value)"
/>
<Select
class="frp-store-select"
:value="props.selectedStoreId"
placeholder="选择门店"
:loading="props.isStoreLoading"
:options="props.storeOptions"
:disabled="props.isStoreLoading || props.storeOptions.length === 0"
@update:value="(value) => handleStoreChange(value)"
/>
<div class="frp-toolbar-right">
<Button
class="frp-batch-export-btn"
:disabled="!props.canExport || !props.selectedStoreId"
:loading="props.isBatchExporting"
@click="emit('batchExport')"
>
<template #icon>
<IconifyIcon icon="lucide:download" />
</template>
批量导出
</Button>
</div>
</div>
</template>

32
apps/web-antd/src/views/finance/report/composables/report-page/constants.ts
View File

@@ -1,32 +0,0 @@
import type {
FinanceBusinessReportPaginationState,
FinanceBusinessReportPeriodOption,
} from '../../types';
/**
* 文件职责：经营报表页面常量与默认状态定义。
*/
/** 经营报表查看权限。 */
export const FINANCE_REPORT_VIEW_PERMISSION = 'tenant:statistics:report:view';
/** 经营报表导出权限。 */
export const FINANCE_REPORT_EXPORT_PERMISSION =
'tenant:statistics:report:export';
/** 报表周期选项。 */
export const REPORT_PERIOD_OPTIONS: FinanceBusinessReportPeriodOption[] = [
{ label: '日报', value: 'daily' },
{ label: '周报', value: 'weekly' },
{ label: '月报', value: 'monthly' },
];
/** 默认报表周期。 */
export const DEFAULT_PERIOD_TYPE = 'daily' as const;
/** 默认分页状态。 */
export const DEFAULT_PAGINATION: FinanceBusinessReportPaginationState = {
page: 1,
pageSize: 20,
total: 0,
};

84
apps/web-antd/src/views/finance/report/composables/report-page/data-actions.ts
View File

@@ -1,84 +0,0 @@
import type { FinanceBusinessReportPaginationState } from '../../types';
/**
* 文件职责：经营报表页面数据加载动作。
*/
import type { FinanceBusinessReportListItemDto } from '#/api/finance';
import type { StoreListItemDto } from '#/api/store';
import { getFinanceBusinessReportListApi } from '#/api/finance';
import { getStoreListApi } from '#/api/store';
import { buildReportListQueryPayload } from './helpers';
interface DataActionOptions {
isListLoading: { value: boolean };
isStoreLoading: { value: boolean };
pagination: FinanceBusinessReportPaginationState;
periodType: { value: 'daily' | 'monthly' | 'weekly' };
rows: { value: FinanceBusinessReportListItemDto[] };
selectedStoreId: { value: string };
stores: { value: StoreListItemDto[] };
}
/** 创建数据相关动作。 */
export function createDataActions(options: DataActionOptions) {
function clearPageData() {
options.rows.value = [];
options.pagination.total = 0;
}
async function loadStores() {
options.isStoreLoading.value = true;
try {
const result = await getStoreListApi({ page: 1, pageSize: 200 });
options.stores.value = result.items;
if (result.items.length === 0) {
options.selectedStoreId.value = '';
clearPageData();
return;
}
const matched = result.items.some(
(item) => item.id === options.selectedStoreId.value,
);
if (!matched) {
options.selectedStoreId.value = result.items[0]?.id ?? '';
}
} finally {
options.isStoreLoading.value = false;
}
}
async function loadReportList() {
if (!options.selectedStoreId.value) {
clearPageData();
return;
}
options.isListLoading.value = true;
try {
const payload = buildReportListQueryPayload(
options.selectedStoreId.value,
options.periodType.value,
options.pagination.page,
options.pagination.pageSize,
);
const result = await getFinanceBusinessReportListApi(payload);
options.rows.value = result.items;
options.pagination.total = result.total;
options.pagination.page = result.page;
options.pagination.pageSize = result.pageSize;
} finally {
options.isListLoading.value = false;
}
}
return {
clearPageData,
loadReportList,
loadStores,
};
}

136
apps/web-antd/src/views/finance/report/composables/report-page/detail-actions.ts
View File

@@ -1,136 +0,0 @@
/**
* 文件职责：经营报表预览抽屉与单条导出动作。
*/
import type { FinanceBusinessReportDetailDto } from '#/api/finance';
import { message } from 'ant-design-vue';
import {
exportFinanceBusinessReportExcelApi,
exportFinanceBusinessReportPdfApi,
getFinanceBusinessReportDetailApi,
} from '#/api/finance';
import { buildReportDetailQueryPayload, downloadBase64File } from './helpers';
interface DetailActionOptions {
canExport: { value: boolean };
currentPreviewReportId: { value: string };
isDownloadingExcel: { value: boolean };
isDownloadingPdf: { value: boolean };
isPreviewDrawerOpen: { value: boolean };
isPreviewLoading: { value: boolean };
previewDetail: { value: FinanceBusinessReportDetailDto | null };
selectedStoreId: { value: string };
}
/** 创建预览与单条导出动作。 */
export function createDetailActions(options: DetailActionOptions) {
function setPreviewDrawerOpen(value: boolean) {
options.isPreviewDrawerOpen.value = value;
if (!value) {
options.previewDetail.value = null;
options.currentPreviewReportId.value = '';
}
}
async function openPreview(reportId: string) {
if (!options.selectedStoreId.value || !reportId) {
return;
}
options.currentPreviewReportId.value = reportId;
options.isPreviewDrawerOpen.value = true;
options.previewDetail.value = null;
options.isPreviewLoading.value = true;
try {
const payload = buildReportDetailQueryPayload(
options.selectedStoreId.value,
reportId,
);
options.previewDetail.value =
await getFinanceBusinessReportDetailApi(payload);
options.currentPreviewReportId.value =
options.previewDetail.value.reportId || reportId;
} finally {
options.isPreviewLoading.value = false;
}
}
function resolveTargetReportId(reportId?: string) {
const explicit = String(reportId ?? '').trim();
if (explicit) {
return explicit;
}
const current = String(options.currentPreviewReportId.value || '').trim();
if (current) {
return current;
}
return String(options.previewDetail.value?.reportId ?? '').trim();
}
async function downloadPdf(reportId?: string) {
if (!options.canExport.value || !options.selectedStoreId.value) {
return;
}
const targetReportId = resolveTargetReportId(reportId);
if (!targetReportId) {
return;
}
options.isDownloadingPdf.value = true;
try {
const payload = buildReportDetailQueryPayload(
options.selectedStoreId.value,
targetReportId,
);
const result = await exportFinanceBusinessReportPdfApi(payload);
downloadBase64File(
result.fileName,
result.fileContentBase64,
'application/pdf',
);
message.success('PDF 下载成功');
} finally {
options.isDownloadingPdf.value = false;
}
}
async function downloadExcel(reportId?: string) {
if (!options.canExport.value || !options.selectedStoreId.value) {
return;
}
const targetReportId = resolveTargetReportId(reportId);
if (!targetReportId) {
return;
}
options.isDownloadingExcel.value = true;
try {
const payload = buildReportDetailQueryPayload(
options.selectedStoreId.value,
targetReportId,
);
const result = await exportFinanceBusinessReportExcelApi(payload);
downloadBase64File(
result.fileName,
result.fileContentBase64,
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
);
message.success('Excel 下载成功');
} finally {
options.isDownloadingExcel.value = false;
}
}
return {
downloadExcel,
downloadPdf,
openPreview,
setPreviewDrawerOpen,
};
}

71
apps/web-antd/src/views/finance/report/composables/report-page/export-actions.ts
View File

@@ -1,71 +0,0 @@
import type { FinanceBusinessReportPaginationState } from '../../types';
/**
* 文件职责：经营报表批量导出弹窗与导出动作。
*/
import type { FinanceBusinessReportPeriodType } from '#/api/finance';
import { message } from 'ant-design-vue';
import { exportFinanceBusinessReportBatchApi } from '#/api/finance';
import {
buildReportBatchExportQueryPayload,
downloadBase64File,
} from './helpers';
interface ExportActionOptions {
canExport: { value: boolean };
isBatchExportModalOpen: { value: boolean };
isBatchExporting: { value: boolean };
pagination: FinanceBusinessReportPaginationState;
periodType: { value: FinanceBusinessReportPeriodType };
selectedStoreId: { value: string };
}
/** 创建批量导出动作。 */
export function createExportActions(options: ExportActionOptions) {
function setBatchExportModalOpen(value: boolean) {
options.isBatchExportModalOpen.value = value;
}
function openBatchExportModal() {
if (!options.canExport.value || !options.selectedStoreId.value) {
return;
}
options.isBatchExportModalOpen.value = true;
}
async function handleConfirmBatchExport() {
if (!options.canExport.value || !options.selectedStoreId.value) {
return;
}
options.isBatchExporting.value = true;
try {
const payload = buildReportBatchExportQueryPayload(
options.selectedStoreId.value,
options.periodType.value,
options.pagination.page,
options.pagination.pageSize,
);
const result = await exportFinanceBusinessReportBatchApi(payload);
downloadBase64File(
result.fileName,
result.fileContentBase64,
'application/zip',
);
message.success(`批量导出成功，共 ${result.totalCount} 份报表`);
setBatchExportModalOpen(false);
} finally {
options.isBatchExporting.value = false;
}
}
return {
handleConfirmBatchExport,
openBatchExportModal,
setBatchExportModalOpen,
};
}

30
apps/web-antd/src/views/finance/report/composables/report-page/filter-actions.ts
View File

@@ -1,30 +0,0 @@
import type { FinanceBusinessReportPaginationState } from '../../types';
/**
* 文件职责：经营报表页面筛选与分页行为。
*/
import type { FinanceBusinessReportPeriodType } from '#/api/finance';
interface FilterActionOptions {
loadReportList: () => Promise<void>;
pagination: FinanceBusinessReportPaginationState;
periodType: { value: FinanceBusinessReportPeriodType };
}
/** 创建筛选与分页行为。 */
export function createFilterActions(options: FilterActionOptions) {
function setPeriodType(value: FinanceBusinessReportPeriodType) {
options.periodType.value = value || 'daily';
}
async function handlePageChange(page: number, pageSize: number) {
options.pagination.page = page;
options.pagination.pageSize = pageSize;
await options.loadReportList();
}
return {
handlePageChange,
setPeriodType,
};
}

130
apps/web-antd/src/views/finance/report/composables/report-page/helpers.ts
View File

@@ -1,130 +0,0 @@
import type {
FinanceBusinessReportBatchExportQuery,
FinanceBusinessReportDetailQuery,
FinanceBusinessReportPeriodType,
FinanceBusinessReportStatus,
} from '#/api/finance';
/**
* 文件职责：经营报表页面纯函数与数据转换工具。
*/
/** 构建经营报表列表查询请求。 */
export function buildReportListQueryPayload(
storeId: string,
periodType: FinanceBusinessReportPeriodType,
page: number,
pageSize: number,
) {
return {
storeId,
periodType,
page,
pageSize,
};
}
/** 构建经营报表详情查询请求。 */
export function buildReportDetailQueryPayload(
storeId: string,
reportId: string,
): FinanceBusinessReportDetailQuery {
return {
storeId,
reportId,
};
}
/** 构建经营报表批量导出查询请求。 */
export function buildReportBatchExportQueryPayload(
storeId: string,
periodType: FinanceBusinessReportPeriodType,
page: number,
pageSize: number,
): FinanceBusinessReportBatchExportQuery {
return {
storeId,
periodType,
page,
pageSize,
};
}
/** 报表周期文案。 */
export function resolvePeriodTypeLabel(value: FinanceBusinessReportPeriodType) {
if (value === 'weekly') return '周报';
if (value === 'monthly') return '月报';
return '日报';
}
/** 报表状态标签色。 */
export function resolveReportStatusTagColor(
status: FinanceBusinessReportStatus,
) {
if (status === 'succeeded') return 'green';
if (status === 'failed') return 'red';
if (status === 'running' || status === 'queued') return 'blue';
return 'default';
}
/** 货币格式化（人民币）。 */
export function formatCurrency(value: number, fractionDigits = 0) {
const digits = Math.max(0, Math.min(2, fractionDigits));
return new Intl.NumberFormat('zh-CN', {
style: 'currency',
currency: 'CNY',
minimumFractionDigits: digits,
maximumFractionDigits: digits,
}).format(Number.isFinite(value) ? value : 0);
}
/** 订单数格式化。 */
export function formatOrderCount(value: number) {
return `${Math.max(0, Math.round(value || 0))}单`;
}
/** 客单价格式化。 */
export function formatAverageOrderValue(value: number) {
return formatCurrency(value, 1);
}
/** 百分比格式化。 */
export function formatPercent(value: number, digits = 1) {
const safeDigits = Math.max(0, Math.min(2, digits));
const normalized = Number.isFinite(value) ? value : 0;
return `${normalized.toFixed(safeDigits)}%`;
}
/** 数值符号格式化。 */
export function formatSignedRate(value: number, digits = 1) {
const normalized = Number.isFinite(value) ? value : 0;
if (normalized === 0) {
return `${normalized.toFixed(digits)}%`;
}
return `${normalized > 0 ? '↑' : '↓'}${Math.abs(normalized).toFixed(digits)}%`;
}
function decodeBase64ToBlob(base64: string, mimeType: string) {
const binary = atob(base64);
const bytes = new Uint8Array(binary.length);
for (let index = 0; index < binary.length; index += 1) {
bytes[index] = binary.codePointAt(index) ?? 0;
}
return new Blob([bytes], { type: mimeType });
}
/** 下载 Base64 编码文件。 */
export function downloadBase64File(
fileName: string,
fileContentBase64: string,
mimeType = 'application/octet-stream',
) {
const blob = decodeBase64ToBlob(fileContentBase64, mimeType);
const url = URL.createObjectURL(blob);
const anchor = document.createElement('a');
anchor.href = url;
anchor.download = fileName;
anchor.click();
URL.revokeObjectURL(url);
}

219
apps/web-antd/src/views/finance/report/composables/useFinanceReportPage.ts
View File

@@ -1,219 +0,0 @@
/**
* 文件职责：经营报表页面状态与动作编排。
*/
import type {
FinanceBusinessReportDetailDto,
FinanceBusinessReportListItemDto,
FinanceBusinessReportPeriodType,
} from '#/api/finance';
import type { StoreListItemDto } from '#/api/store';
import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue';
import { useAccessStore } from '@vben/stores';
import {
DEFAULT_PAGINATION,
DEFAULT_PERIOD_TYPE,
FINANCE_REPORT_EXPORT_PERMISSION,
FINANCE_REPORT_VIEW_PERMISSION,
} from './report-page/constants';
import { createDataActions } from './report-page/data-actions';
import { createDetailActions } from './report-page/detail-actions';
import { createExportActions } from './report-page/export-actions';
import { createFilterActions } from './report-page/filter-actions';
/** 创建经营报表页面组合状态。 */
export function useFinanceReportPage() {
const accessStore = useAccessStore();
const stores = ref<StoreListItemDto[]>([]);
const selectedStoreId = ref('');
const isStoreLoading = ref(false);
const periodType = ref<FinanceBusinessReportPeriodType>(DEFAULT_PERIOD_TYPE);
const rows = ref<FinanceBusinessReportListItemDto[]>([]);
const pagination = reactive({ ...DEFAULT_PAGINATION });
const isListLoading = ref(false);
const previewDetail = ref<FinanceBusinessReportDetailDto | null>(null);
const currentPreviewReportId = ref('');
const isPreviewDrawerOpen = ref(false);
const isPreviewLoading = ref(false);
const isDownloadingPdf = ref(false);
const isDownloadingExcel = ref(false);
const isBatchExportModalOpen = ref(false);
const isBatchExporting = ref(false);
const storeOptions = computed(() =>
stores.value.map((item) => ({
label: item.name,
value: item.id,
})),
);
const selectedStoreName = computed(
() =>
storeOptions.value.find((item) => item.value === selectedStoreId.value)
?.label ?? '--',
);
const accessCodeSet = computed(
() => new Set((accessStore.accessCodes ?? []).map(String)),
);
const canView = computed(() =>
accessCodeSet.value.has(FINANCE_REPORT_VIEW_PERMISSION),
);
const canExport = computed(() =>
accessCodeSet.value.has(FINANCE_REPORT_EXPORT_PERMISSION),
);
const { clearPageData, loadReportList, loadStores } = createDataActions({
stores,
selectedStoreId,
periodType,
rows,
pagination,
isStoreLoading,
isListLoading,
});
const { handlePageChange, setPeriodType } = createFilterActions({
periodType,
pagination,
loadReportList,
});
const { downloadExcel, downloadPdf, openPreview, setPreviewDrawerOpen } =
createDetailActions({
canExport,
selectedStoreId,
previewDetail,
currentPreviewReportId,
isPreviewDrawerOpen,
isPreviewLoading,
isDownloadingPdf,
isDownloadingExcel,
});
const {
handleConfirmBatchExport,
openBatchExportModal,
setBatchExportModalOpen,
} = createExportActions({
canExport,
selectedStoreId,
periodType,
pagination,
isBatchExportModalOpen,
isBatchExporting,
});
function setSelectedStoreId(value: string) {
selectedStoreId.value = value;
}
function clearByPermission() {
stores.value = [];
selectedStoreId.value = '';
clearPageData();
setPreviewDrawerOpen(false);
setBatchExportModalOpen(false);
}
watch(selectedStoreId, async (storeId) => {
setPreviewDrawerOpen(false);
setBatchExportModalOpen(false);
if (!storeId) {
clearPageData();
return;
}
pagination.page = 1;
await loadReportList();
});
watch(periodType, async (value, oldValue) => {
if (value === oldValue) {
return;
}
setPreviewDrawerOpen(false);
setBatchExportModalOpen(false);
if (!selectedStoreId.value) {
clearPageData();
return;
}
pagination.page = 1;
await loadReportList();
});
watch(canView, async (value, oldValue) => {
if (value === oldValue) {
return;
}
if (!value) {
clearByPermission();
return;
}
await loadStores();
});
onMounted(async () => {
if (!canView.value) {
clearByPermission();
return;
}
await loadStores();
});
onActivated(() => {
if (!canView.value) {
return;
}
if (stores.value.length === 0 || !selectedStoreId.value) {
void loadStores();
}
});
return {
canExport,
canView,
currentPreviewReportId,
downloadPreviewExcel: downloadExcel,
downloadPreviewPdf: downloadPdf,
handleConfirmBatchExport,
handlePageChange,
isBatchExportModalOpen,
isBatchExporting,
isDownloadingExcel,
isDownloadingPdf,
isListLoading,
isPreviewDrawerOpen,
isPreviewLoading,
isStoreLoading,
openBatchExportModal,
openPreview,
pagination,
periodType,
previewDetail,
rows,
selectedStoreId,
selectedStoreName,
setBatchExportModalOpen,
setPeriodType,
setPreviewDrawerOpen,
setSelectedStoreId,
storeOptions,
};
}

104
apps/web-antd/src/views/finance/report/index.vue
View File

@@ -1,104 +0,0 @@
<script setup lang="ts">
/**
* 文件职责：财务中心经营报表页面入口编排。
*/
import { Page } from '@vben/common-ui';
import { Empty } from 'ant-design-vue';
import ReportBatchExportModal from './components/ReportBatchExportModal.vue';
import ReportPreviewDrawer from './components/ReportPreviewDrawer.vue';
import ReportTableCard from './components/ReportTableCard.vue';
import ReportToolbar from './components/ReportToolbar.vue';
import { useFinanceReportPage } from './composables/useFinanceReportPage';
const {
canExport,
canView,
downloadPreviewExcel,
downloadPreviewPdf,
handleConfirmBatchExport,
handlePageChange,
isBatchExportModalOpen,
isBatchExporting,
isDownloadingExcel,
isDownloadingPdf,
isListLoading,
isPreviewDrawerOpen,
isPreviewLoading,
isStoreLoading,
openBatchExportModal,
openPreview,
pagination,
periodType,
previewDetail,
rows,
selectedStoreId,
selectedStoreName,
setBatchExportModalOpen,
setPeriodType,
setPreviewDrawerOpen,
setSelectedStoreId,
storeOptions,
} = useFinanceReportPage();
</script>
<template>
<Page title="经营报表" content-class="page-finance-report">
<div class="frp-page">
<template v-if="canView">
<ReportToolbar
:period-type="periodType"
:selected-store-id="selectedStoreId"
:store-options="storeOptions"
:is-store-loading="isStoreLoading"
:can-export="canExport"
:is-batch-exporting="isBatchExporting"
@update:period-type="setPeriodType"
@update:selected-store-id="setSelectedStoreId"
@batch-export="openBatchExportModal"
/>
<ReportTableCard
:rows="rows"
:loading="isListLoading"
:pagination="pagination"
:can-export="canExport"
@page-change="handlePageChange"
@preview="openPreview"
@download-pdf="downloadPreviewPdf"
@download-excel="downloadPreviewExcel"
/>
</template>
<Empty v-else description="暂无经营报表页面访问权限" />
</div>
<ReportPreviewDrawer
:open="isPreviewDrawerOpen"
:loading="isPreviewLoading"
:detail="previewDetail"
:can-export="canExport"
:is-downloading-pdf="isDownloadingPdf"
:is-downloading-excel="isDownloadingExcel"
@close="setPreviewDrawerOpen(false)"
@download-pdf="downloadPreviewPdf"
@download-excel="downloadPreviewExcel"
/>
<ReportBatchExportModal
:open="isBatchExportModalOpen"
:submitting="isBatchExporting"
:selected-store-name="selectedStoreName"
:period-type="periodType"
:pagination="pagination"
:current-page-count="rows.length"
@close="setBatchExportModalOpen(false)"
@confirm="handleConfirmBatchExport"
/>
</Page>
</template>
<style lang="less">
@import './styles/index.less';
</style>

14
apps/web-antd/src/views/finance/report/styles/base.less
View File

@@ -1,14 +0,0 @@
/**
* 文件职责：经营报表页面基础容器样式。
*/
.page-finance-report {
.ant-card {
border-radius: 10px;
}
}
.frp-page {
display: flex;
flex-direction: column;
gap: 12px;
}

162
apps/web-antd/src/views/finance/report/styles/drawer.less
View File

@@ -1,162 +0,0 @@
/**
* 文件职责：经营报表预览抽屉样式。
*/
.page-finance-report {
.ant-drawer {
.ant-drawer-header {
padding: 14px 18px;
border-bottom: 1px solid #f0f0f0;
}
.ant-drawer-body {
padding: 16px 20px;
}
.ant-drawer-footer {
padding: 12px 20px;
border-top: 1px solid #f0f0f0;
}
}
}
.frp-section {
margin-bottom: 22px;
}
.frp-section-hd {
padding-left: 10px;
margin-bottom: 14px;
font-size: 15px;
font-weight: 600;
color: rgb(0 0 0 / 88%);
border-left: 3px solid #1677ff;
}
.frp-kpi-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.frp-kpi-item {
padding: 14px 16px;
background: #f8f9fb;
border: 1px solid #f0f0f0;
border-radius: 8px;
}
.frp-kpi-label {
margin-bottom: 6px;
font-size: 12px;
color: rgb(0 0 0 / 45%);
}
.frp-kpi-val {
font-size: 20px;
font-weight: 700;
line-height: 1.3;
color: rgb(0 0 0 / 88%);
&.is-profit {
color: #52c41a;
}
}
.frp-kpi-change {
display: flex;
gap: 8px;
align-items: center;
margin-top: 4px;
font-size: 12px;
}
.frp-kpi-change-positive {
color: #52c41a;
}
.frp-kpi-change-negative {
color: #ff4d4f;
}
.frp-kpi-change-neutral {
color: rgb(0 0 0 / 45%);
}
.frp-divider {
height: 1px;
margin: 20px 0;
background: linear-gradient(90deg, #f0f0f0, transparent);
}
.frp-detail-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
font-size: 13px;
border-bottom: 1px solid #f5f5f5;
&:last-child {
border-bottom: none;
}
}
.frp-detail-name {
display: inline-flex;
gap: 6px;
align-items: center;
color: rgb(0 0 0 / 88%);
}
.frp-breakdown-icon {
width: 14px;
height: 14px;
&.is-primary {
color: #1677ff;
}
&.is-success {
color: #52c41a;
}
&.is-warning {
color: #faad14;
}
&.is-muted {
color: rgb(0 0 0 / 45%);
}
}
.frp-detail-right {
display: flex;
gap: 16px;
align-items: center;
}
.frp-detail-amount {
min-width: 80px;
font-weight: 600;
color: rgb(0 0 0 / 88%);
text-align: right;
}
.frp-detail-pct {
min-width: 50px;
font-size: 12px;
color: rgb(0 0 0 / 45%);
text-align: right;
}
.frp-drawer-footer {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.frp-drawer-btn {
display: inline-flex;
gap: 4px;
align-items: center;
}

9
apps/web-antd/src/views/finance/report/styles/index.less
View File

@@ -1,9 +0,0 @@
/**
* 文件职责：经营报表页面样式聚合入口。
*/
@import './base.less';
@import './layout.less';
@import './table.less';
@import './drawer.less';
@import './modal.less';
@import './responsive.less';

39
apps/web-antd/src/views/finance/report/styles/layout.less
View File

@@ -1,39 +0,0 @@
/**
* 文件职责：经营报表页面布局与工具栏样式。
*/
.frp-toolbar {
display: flex;
gap: 12px;
align-items: center;
padding: 16px 20px;
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 10px;
box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
.frp-period-segment {
--ant-segmented-item-selected-bg: #fff;
--ant-segmented-item-selected-color: #1677ff;
}
.frp-store-select {
width: 200px;
min-width: 200px;
}
.frp-toolbar-right {
margin-left: auto;
}
.frp-batch-export-btn {
display: inline-flex;
gap: 4px;
align-items: center;
height: 32px;
}
.ant-select-selector {
height: 32px;
font-size: 13px;
}
}

51
apps/web-antd/src/views/finance/report/styles/modal.less
View File

@@ -1,51 +0,0 @@
/**
* 文件职责：经营报表批量导出弹窗样式。
*/
.frp-batch-modal {
display: flex;
flex-direction: column;
gap: 12px;
}
.frp-batch-desc {
margin: 0;
font-size: 13px;
color: rgb(0 0 0 / 65%);
}
.frp-batch-list {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 14px;
background: #fafafa;
border: 1px solid #f0f0f0;
border-radius: 8px;
}
.frp-batch-line {
display: flex;
gap: 16px;
justify-content: space-between;
font-size: 13px;
.frp-batch-label {
color: rgb(0 0 0 / 45%);
}
.frp-batch-value {
color: rgb(0 0 0 / 88%);
text-align: right;
}
&.is-total {
padding-top: 8px;
margin-top: 4px;
font-weight: 600;
border-top: 1px solid #f0f0f0;
.frp-batch-value {
color: #1677ff;
}
}
}

58
apps/web-antd/src/views/finance/report/styles/responsive.less
View File

@@ -1,58 +0,0 @@
/**
* 文件职责：经营报表页面响应式样式。
*/
@media (max-width: 1200px) {
.frp-kpi-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.frp-toolbar {
flex-wrap: wrap;
padding: 14px 12px;
.frp-period-segment,
.frp-store-select {
width: 100%;
min-width: 100%;
}
.frp-toolbar-right {
width: 100%;
margin-left: 0;
}
.frp-batch-export-btn {
justify-content: center;
width: 100%;
}
}
.frp-table-card {
.ant-table-wrapper {
overflow-x: auto;
}
}
.frp-kpi-grid {
grid-template-columns: 1fr;
}
.page-finance-report {
.ant-drawer {
.ant-drawer-content-wrapper {
width: 100% !important;
max-width: 100%;
}
.ant-drawer-body {
padding: 14px 12px;
}
.ant-drawer-footer {
padding: 12px;
}
}
}
}

59
apps/web-antd/src/views/finance/report/styles/table.less
View File

@@ -1,59 +0,0 @@
/**
* 文件职责：经营报表表格区域样式。
*/
.frp-table-card {
overflow: hidden;
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 10px;
.ant-table-wrapper {
.ant-table-thead > tr > th {
font-size: 13px;
white-space: nowrap;
}
.ant-table-tbody > tr > td {
font-size: 13px;
vertical-align: middle;
white-space: nowrap;
}
}
.ant-pagination {
margin: 14px 16px;
}
}
.frp-date {
white-space: nowrap;
}
.frp-value {
color: rgb(0 0 0 / 88%);
white-space: nowrap;
}
.frp-amount {
font-weight: 600;
white-space: nowrap;
&.is-profit {
color: #52c41a;
}
&.is-loss {
color: #ff4d4f;
}
}
.frp-action-group {
display: flex;
gap: 2px;
align-items: center;
}
.frp-action-link {
padding-inline: 0;
white-space: nowrap;
}

23
apps/web-antd/src/views/finance/report/types.ts
View File

@@ -1,23 +0,0 @@
/**
* 文件职责：经营报表页面本地状态类型定义。
*/
import type { FinanceBusinessReportPeriodType } from '#/api/finance';
/** 通用选项项。 */
export interface OptionItem {
label: string;
value: string;
}
/** 报表周期选项。 */
export interface FinanceBusinessReportPeriodOption {
label: string;
value: FinanceBusinessReportPeriodType;
}
/** 经营报表分页状态。 */
export interface FinanceBusinessReportPaginationState {
page: number;
pageSize: number;
total: number;
}

27
apps/web-antd/src/views/store/fees/components/FeesDeliveryCard.vue
View File

@@ -12,11 +12,9 @@ interface Props {
freeDeliveryThreshold: null | number; freeDeliveryThreshold: null | number;
isSaving: boolean; isSaving: boolean;
minimumOrderAmount: number; minimumOrderAmount: number;
platformServiceRate: number;
onSetBaseDeliveryFee: (value: number) => void; onSetBaseDeliveryFee: (value: number) => void;
onSetFreeDeliveryThreshold: (value: null | number) => void; onSetFreeDeliveryThreshold: (value: null | number) => void;
onSetMinimumOrderAmount: (value: number) => void; onSetMinimumOrderAmount: (value: number) => void;
onSetPlatformServiceRate: (value: number) => void;
} }
const props = defineProps<Props>(); const props = defineProps<Props>();
@@ -87,31 +85,6 @@ function toNumber(value: null | number | string, fallback = 0) {
<div class="fees-hint">每笔订单默认收取的配送费</div> <div class="fees-hint">每笔订单默认收取的配送费</div>
</div> </div>
<div class="fees-field">
<label>平台服务费率</label>
<div class="fees-input-row">
<InputNumber
:value="props.platformServiceRate"
:min="0"
:max="100"
:precision="2"
:step="0.1"
:controls="false"
:disabled="!props.canOperate"
class="fees-input"
placeholder="如：5.00"
@update:value="
(value) =>
props.onSetPlatformServiceRate(
toNumber(value, props.platformServiceRate),
)
"
/>
<span class="fees-unit">%</span>
</div>
<div class="fees-hint">按实收金额计算平台服务费成本</div>
</div>
<div class="fees-field"> <div class="fees-field">
<label>免配送费门槛</label> <label>免配送费门槛</label>
<div class="fees-input-row"> <div class="fees-input-row">

6
apps/web-antd/src/views/store/fees/composables/fees-page/data-actions.ts
View File

@@ -62,10 +62,6 @@ export function createDataActions(options: CreateDataActionsOptions) {
0, 0,
); );
options.form.baseDeliveryFee = normalizeMoney(next.baseDeliveryFee, 0); options.form.baseDeliveryFee = normalizeMoney(next.baseDeliveryFee, 0);
options.form.platformServiceRate = normalizeMoney(
next.platformServiceRate,
0,
);
options.form.freeDeliveryThreshold = options.form.freeDeliveryThreshold =
next.freeDeliveryThreshold === null next.freeDeliveryThreshold === null
? null ? null
@@ -113,7 +109,6 @@ export function createDataActions(options: CreateDataActionsOptions) {
return { return {
minimumOrderAmount: normalizeMoney(source?.minimumOrderAmount ?? 0, 0), minimumOrderAmount: normalizeMoney(source?.minimumOrderAmount ?? 0, 0),
baseDeliveryFee: normalizeMoney(source?.baseDeliveryFee ?? 0, 0), baseDeliveryFee: normalizeMoney(source?.baseDeliveryFee ?? 0, 0),
platformServiceRate: normalizeMoney(source?.platformServiceRate ?? 0, 0),
freeDeliveryThreshold: freeDeliveryThreshold:
source?.freeDeliveryThreshold === null || source?.freeDeliveryThreshold === null ||
source?.freeDeliveryThreshold === undefined source?.freeDeliveryThreshold === undefined
@@ -135,7 +130,6 @@ export function createDataActions(options: CreateDataActionsOptions) {
storeId, storeId,
minimumOrderAmount: options.form.minimumOrderAmount, minimumOrderAmount: options.form.minimumOrderAmount,
baseDeliveryFee: options.form.baseDeliveryFee, baseDeliveryFee: options.form.baseDeliveryFee,
platformServiceRate: options.form.platformServiceRate,
freeDeliveryThreshold: options.form.freeDeliveryThreshold, freeDeliveryThreshold: options.form.freeDeliveryThreshold,
packagingFeeMode: options.form.packagingFeeMode, packagingFeeMode: options.form.packagingFeeMode,
orderPackagingFeeMode: options.form.orderPackagingFeeMode, orderPackagingFeeMode: options.form.orderPackagingFeeMode,

1
apps/web-antd/src/views/store/fees/composables/fees-page/helpers.ts
View File

@@ -26,7 +26,6 @@ export function cloneFeesForm(source: StoreFeesFormState): StoreFeesFormState {
return { return {
minimumOrderAmount: source.minimumOrderAmount, minimumOrderAmount: source.minimumOrderAmount,
baseDeliveryFee: source.baseDeliveryFee, baseDeliveryFee: source.baseDeliveryFee,
platformServiceRate: source.platformServiceRate,
freeDeliveryThreshold: source.freeDeliveryThreshold, freeDeliveryThreshold: source.freeDeliveryThreshold,
packagingFeeMode: source.packagingFeeMode, packagingFeeMode: source.packagingFeeMode,
orderPackagingFeeMode: source.orderPackagingFeeMode, orderPackagingFeeMode: source.orderPackagingFeeMode,

7
apps/web-antd/src/views/store/fees/composables/useStoreFeesPage.ts
View File

@@ -36,7 +36,6 @@ import { createPackagingActions } from './fees-page/packaging-actions';
const EMPTY_FEES_SETTINGS: StoreFeesFormState = { const EMPTY_FEES_SETTINGS: StoreFeesFormState = {
minimumOrderAmount: 0, minimumOrderAmount: 0,
baseDeliveryFee: 0, baseDeliveryFee: 0,
platformServiceRate: 0,
freeDeliveryThreshold: null, freeDeliveryThreshold: null,
packagingFeeMode: 'order', packagingFeeMode: 'order',
orderPackagingFeeMode: 'fixed', orderPackagingFeeMode: 'fixed',
@@ -208,10 +207,6 @@ export function useStoreFeesPage() {
form.baseDeliveryFee = normalizeMoney(value, form.baseDeliveryFee); form.baseDeliveryFee = normalizeMoney(value, form.baseDeliveryFee);
} }
function setPlatformServiceRate(value: number) {
form.platformServiceRate = normalizeMoney(value, form.platformServiceRate);
}
function setFreeDeliveryThreshold(value: null | number) { function setFreeDeliveryThreshold(value: null | number) {
if (value === null || value === undefined) { if (value === null || value === undefined) {
form.freeDeliveryThreshold = null; form.freeDeliveryThreshold = null;
@@ -306,7 +301,6 @@ export function useStoreFeesPage() {
const source = snapshot.value; const source = snapshot.value;
form.minimumOrderAmount = source.minimumOrderAmount; form.minimumOrderAmount = source.minimumOrderAmount;
form.baseDeliveryFee = source.baseDeliveryFee; form.baseDeliveryFee = source.baseDeliveryFee;
form.platformServiceRate = source.platformServiceRate;
form.freeDeliveryThreshold = source.freeDeliveryThreshold; form.freeDeliveryThreshold = source.freeDeliveryThreshold;
message.success('已重置起送与配送费'); message.success('已重置起送与配送费');
} }
@@ -455,7 +449,6 @@ export function useStoreFeesPage() {
setFixedPackagingFee, setFixedPackagingFee,
setFreeDeliveryThreshold, setFreeDeliveryThreshold,
setMinimumOrderAmount, setMinimumOrderAmount,
setPlatformServiceRate,
setPackagingMode, setPackagingMode,
setRushAmount, setRushAmount,
setRushEnabled, setRushEnabled,

3
apps/web-antd/src/views/store/fees/index.vue
View File

@@ -59,7 +59,6 @@ const {
setFixedPackagingFee, setFixedPackagingFee,
setFreeDeliveryThreshold, setFreeDeliveryThreshold,
setMinimumOrderAmount, setMinimumOrderAmount,
setPlatformServiceRate,
setPackagingMode, setPackagingMode,
setRushAmount, setRushAmount,
setRushEnabled, setRushEnabled,
@@ -112,12 +111,10 @@ function onEditTier(tier: PackagingFeeTierDto) {
:can-operate="canOperate" :can-operate="canOperate"
:minimum-order-amount="form.minimumOrderAmount" :minimum-order-amount="form.minimumOrderAmount"
:base-delivery-fee="form.baseDeliveryFee" :base-delivery-fee="form.baseDeliveryFee"
:platform-service-rate="form.platformServiceRate"
:free-delivery-threshold="form.freeDeliveryThreshold" :free-delivery-threshold="form.freeDeliveryThreshold"
:is-saving="isSavingDelivery" :is-saving="isSavingDelivery"
:on-set-minimum-order-amount="setMinimumOrderAmount" :on-set-minimum-order-amount="setMinimumOrderAmount"
:on-set-base-delivery-fee="setBaseDeliveryFee" :on-set-base-delivery-fee="setBaseDeliveryFee"
:on-set-platform-service-rate="setPlatformServiceRate"
:on-set-free-delivery-threshold="setFreeDeliveryThreshold" :on-set-free-delivery-threshold="setFreeDeliveryThreshold"
@save="saveDeliverySection" @save="saveDeliverySection"
@reset="resetDeliverySection" @reset="resetDeliverySection"

1
apps/web-antd/src/views/store/fees/types.ts
View File

@@ -21,7 +21,6 @@ export interface PackagingFeeTierFormState {
export interface StoreFeesFormState { export interface StoreFeesFormState {
baseDeliveryFee: number; baseDeliveryFee: number;
platformServiceRate: number;
fixedPackagingFee: number; fixedPackagingFee: number;
freeDeliveryThreshold: null | number; freeDeliveryThreshold: null | number;
minimumOrderAmount: number; minimumOrderAmount: number;

5
pnpm-lock.yaml generated
View File

@@ -48,9 +48,6 @@ catalogs:
'@manypkg/get-packages': '@manypkg/get-packages':
specifier: ^3.1.0 specifier: ^3.1.0
version: 3.1.0 version: 3.1.0
'@microsoft/signalr':
specifier: ^8.0.7
version: 8.0.17
'@nolebase/vitepress-plugin-git-changelog': '@nolebase/vitepress-plugin-git-changelog':
specifier: ^2.18.2 specifier: ^2.18.2
version: 2.18.2 version: 2.18.2
@@ -618,7 +615,7 @@ importers:
apps/web-antd: apps/web-antd:
dependencies: dependencies:
'@microsoft/signalr': '@microsoft/signalr':
specifier: 'catalog:' specifier: ^8.0.7
version: 8.0.17 version: 8.0.17
'@vben/access': '@vben/access':
specifier: workspace:* specifier: workspace:*