Compare commits
1 Commits
main
...
5fd5d0d2f2
| Author | SHA1 | Date | |
|---|---|---|---|
| 5fd5d0d2f2 |
@@ -1,143 +0,0 @@
|
||||
/**
|
||||
* 文件职责：财务中心成本管理 API 契约与请求封装。
|
||||
*/
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
/** 成本统计维度。 */
|
||||
export type FinanceCostDimension = 'store' | 'tenant';
|
||||
|
||||
/** 成本分类编码。 */
|
||||
export type FinanceCostCategoryCode = 'fixed' | 'food' | 'labor' | 'packaging';
|
||||
|
||||
/** 成本作用域查询参数。 */
|
||||
export interface FinanceCostScopeQuery {
|
||||
dimension?: FinanceCostDimension;
|
||||
month?: string;
|
||||
storeId?: string;
|
||||
}
|
||||
|
||||
/** 成本明细项。 */
|
||||
export interface FinanceCostEntryDetailDto {
|
||||
amount: number;
|
||||
itemId?: string;
|
||||
itemName: string;
|
||||
quantity?: number;
|
||||
sortOrder: number;
|
||||
unitPrice?: number;
|
||||
}
|
||||
|
||||
/** 成本分类数据。 */
|
||||
export interface FinanceCostEntryCategoryDto {
|
||||
category: FinanceCostCategoryCode;
|
||||
categoryText: string;
|
||||
items: FinanceCostEntryDetailDto[];
|
||||
percentage: number;
|
||||
totalAmount: number;
|
||||
}
|
||||
|
||||
/** 成本录入数据。 */
|
||||
export interface FinanceCostEntryDto {
|
||||
categories: FinanceCostEntryCategoryDto[];
|
||||
costRate: number;
|
||||
dimension: FinanceCostDimension;
|
||||
month: string;
|
||||
monthRevenue: number;
|
||||
storeId?: string;
|
||||
totalCost: number;
|
||||
}
|
||||
|
||||
/** 保存成本明细项请求。 */
|
||||
export interface SaveFinanceCostDetailPayload {
|
||||
amount: number;
|
||||
itemId?: string;
|
||||
itemName: string;
|
||||
quantity?: number;
|
||||
sortOrder: number;
|
||||
unitPrice?: number;
|
||||
}
|
||||
|
||||
/** 保存成本分类请求。 */
|
||||
export interface SaveFinanceCostCategoryPayload {
|
||||
category: FinanceCostCategoryCode;
|
||||
items: SaveFinanceCostDetailPayload[];
|
||||
totalAmount: number;
|
||||
}
|
||||
|
||||
/** 保存成本录入请求。 */
|
||||
export interface SaveFinanceCostEntryPayload extends FinanceCostScopeQuery {
|
||||
categories: SaveFinanceCostCategoryPayload[];
|
||||
}
|
||||
|
||||
/** 成本分析统计卡。 */
|
||||
export interface FinanceCostAnalysisStatsDto {
|
||||
averageCostPerPaidOrder: number;
|
||||
foodCostRate: number;
|
||||
monthOnMonthChangeRate: number;
|
||||
paidOrderCount: number;
|
||||
revenue: number;
|
||||
totalCost: number;
|
||||
}
|
||||
|
||||
/** 成本趋势点。 */
|
||||
export interface FinanceCostTrendPointDto {
|
||||
costRate: number;
|
||||
month: string;
|
||||
revenue: number;
|
||||
totalCost: number;
|
||||
}
|
||||
|
||||
/** 成本构成项。 */
|
||||
export interface FinanceCostCompositionDto {
|
||||
amount: number;
|
||||
category: FinanceCostCategoryCode;
|
||||
categoryText: string;
|
||||
percentage: number;
|
||||
}
|
||||
|
||||
/** 成本明细表行。 */
|
||||
export interface FinanceCostMonthlyDetailRowDto {
|
||||
costRate: number;
|
||||
fixedAmount: number;
|
||||
foodAmount: number;
|
||||
laborAmount: number;
|
||||
month: string;
|
||||
packagingAmount: number;
|
||||
totalCost: number;
|
||||
}
|
||||
|
||||
/** 成本分析数据。 */
|
||||
export interface FinanceCostAnalysisDto {
|
||||
composition: FinanceCostCompositionDto[];
|
||||
detailRows: FinanceCostMonthlyDetailRowDto[];
|
||||
dimension: FinanceCostDimension;
|
||||
month: string;
|
||||
stats: FinanceCostAnalysisStatsDto;
|
||||
storeId?: string;
|
||||
trend: FinanceCostTrendPointDto[];
|
||||
}
|
||||
|
||||
/** 查询成本录入数据。 */
|
||||
export async function getFinanceCostEntryApi(params: FinanceCostScopeQuery) {
|
||||
return requestClient.get<FinanceCostEntryDto>('/finance/cost/entry', {
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/** 保存成本录入数据。 */
|
||||
export async function saveFinanceCostEntryApi(
|
||||
payload: SaveFinanceCostEntryPayload,
|
||||
) {
|
||||
return requestClient.post<FinanceCostEntryDto>(
|
||||
'/finance/cost/entry/save',
|
||||
payload,
|
||||
);
|
||||
}
|
||||
|
||||
/** 查询成本分析数据。 */
|
||||
export async function getFinanceCostAnalysisApi(
|
||||
params: FinanceCostScopeQuery & { trendMonthCount?: number },
|
||||
) {
|
||||
return requestClient.get<FinanceCostAnalysisDto>('/finance/cost/analysis', {
|
||||
params,
|
||||
});
|
||||
}
|
||||
@@ -1,9 +1,5 @@
|
||||
/**
|
||||
* 文件职责：财务中心 API 聚合导出。
|
||||
*/
|
||||
export * from './cost';
|
||||
export * from './invoice';
|
||||
export * from './overview';
|
||||
export * from './report';
|
||||
export * from './settlement';
|
||||
export * from './transaction';
|
||||
|
||||
@@ -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 },
|
||||
);
|
||||
}
|
||||
@@ -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,
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -1,137 +0,0 @@
|
||||
/**
|
||||
* 文件职责：财务中心到账查询 API 契约与请求封装。
|
||||
*/
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
/** 到账渠道筛选值。 */
|
||||
export type FinanceSettlementChannelFilter = 'alipay' | 'all' | 'wechat';
|
||||
|
||||
/** 到账查询筛选参数。 */
|
||||
export interface FinanceSettlementFilterQuery {
|
||||
channel?: FinanceSettlementChannelFilter;
|
||||
endDate?: string;
|
||||
startDate?: string;
|
||||
storeId: string;
|
||||
}
|
||||
|
||||
/** 到账查询列表参数。 */
|
||||
export interface FinanceSettlementListQuery extends FinanceSettlementFilterQuery {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
}
|
||||
|
||||
/** 到账统计结果。 */
|
||||
export interface FinanceSettlementStatsDto {
|
||||
currentMonthArrivedAmount: number;
|
||||
currentMonthTransactionCount: number;
|
||||
todayArrivedAmount: number;
|
||||
yesterdayArrivedAmount: number;
|
||||
}
|
||||
|
||||
/** 到账账户信息。 */
|
||||
export interface FinanceSettlementAccountDto {
|
||||
alipayPidMasked: string;
|
||||
bankAccountName: string;
|
||||
bankAccountNoMasked: string;
|
||||
bankName: string;
|
||||
settlementPeriodText: string;
|
||||
wechatMerchantNoMasked: string;
|
||||
}
|
||||
|
||||
/** 到账列表行。 */
|
||||
export interface FinanceSettlementListItemDto {
|
||||
arrivedAmount: number;
|
||||
arrivedDate: string;
|
||||
channel: 'alipay' | 'wechat';
|
||||
channelText: string;
|
||||
transactionCount: number;
|
||||
}
|
||||
|
||||
/** 到账列表结果。 */
|
||||
export interface FinanceSettlementListResultDto {
|
||||
items: FinanceSettlementListItemDto[];
|
||||
page: number;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
/** 到账明细查询参数。 */
|
||||
export interface FinanceSettlementDetailQuery {
|
||||
arrivedDate: string;
|
||||
channel: 'alipay' | 'wechat';
|
||||
storeId: string;
|
||||
}
|
||||
|
||||
/** 到账明细行。 */
|
||||
export interface FinanceSettlementDetailItemDto {
|
||||
amount: number;
|
||||
orderNo: string;
|
||||
paidAt: string;
|
||||
}
|
||||
|
||||
/** 到账明细结果。 */
|
||||
export interface FinanceSettlementDetailResultDto {
|
||||
items: FinanceSettlementDetailItemDto[];
|
||||
}
|
||||
|
||||
/** 到账导出结果。 */
|
||||
export interface FinanceSettlementExportDto {
|
||||
fileContentBase64: string;
|
||||
fileName: string;
|
||||
totalCount: number;
|
||||
}
|
||||
|
||||
/** 查询到账统计。 */
|
||||
export async function getFinanceSettlementStatsApi(params: {
|
||||
storeId: string;
|
||||
}) {
|
||||
return requestClient.get<FinanceSettlementStatsDto>(
|
||||
'/finance/settlement/stats',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/** 查询到账账户信息。 */
|
||||
export async function getFinanceSettlementAccountApi() {
|
||||
return requestClient.get<FinanceSettlementAccountDto>(
|
||||
'/finance/settlement/account',
|
||||
);
|
||||
}
|
||||
|
||||
/** 查询到账列表。 */
|
||||
export async function getFinanceSettlementListApi(
|
||||
params: FinanceSettlementListQuery,
|
||||
) {
|
||||
return requestClient.get<FinanceSettlementListResultDto>(
|
||||
'/finance/settlement/list',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/** 查询到账明细。 */
|
||||
export async function getFinanceSettlementDetailApi(
|
||||
params: FinanceSettlementDetailQuery,
|
||||
) {
|
||||
return requestClient.get<FinanceSettlementDetailResultDto>(
|
||||
'/finance/settlement/detail',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/** 导出到账汇总 CSV。 */
|
||||
export async function exportFinanceSettlementCsvApi(
|
||||
params: FinanceSettlementFilterQuery,
|
||||
) {
|
||||
return requestClient.get<FinanceSettlementExportDto>(
|
||||
'/finance/settlement/export',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -46,8 +46,6 @@ export interface StoreOtherFeesDto {
|
||||
export interface StoreFeesSettingsDto {
|
||||
/** 基础配送费 */
|
||||
baseDeliveryFee: number;
|
||||
/** 平台服务费率（%） */
|
||||
platformServiceRate: number;
|
||||
/** 固定包装费 */
|
||||
fixedPackagingFee: number;
|
||||
/** 免配送费门槛，空值表示关闭 */
|
||||
@@ -72,8 +70,6 @@ export interface StoreFeesSettingsDto {
|
||||
export interface SaveStoreFeesSettingsParams {
|
||||
/** 基础配送费 */
|
||||
baseDeliveryFee: number;
|
||||
/** 平台服务费率（%） */
|
||||
platformServiceRate: number;
|
||||
/** 固定包装费 */
|
||||
fixedPackagingFee: number;
|
||||
/** 免配送费门槛，空值表示关闭 */
|
||||
|
||||
@@ -1,119 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { EchartsUIType } from '@vben/plugins/echarts';
|
||||
|
||||
/**
|
||||
* 文件职责：成本分析构成环图与图例。
|
||||
*/
|
||||
import type { FinanceCostCompositionDto } from '#/api/finance/cost';
|
||||
|
||||
import { computed, nextTick, onMounted, ref, watch } from 'vue';
|
||||
|
||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
||||
|
||||
import { COST_CATEGORY_COLOR_MAP } from '../composables/cost-page/constants';
|
||||
import {
|
||||
formatCurrency,
|
||||
formatPercent,
|
||||
} from '../composables/cost-page/helpers';
|
||||
|
||||
interface Props {
|
||||
composition: FinanceCostCompositionDto[];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const chartRef = ref<EchartsUIType>();
|
||||
const { renderEcharts } = useEcharts(chartRef);
|
||||
|
||||
const totalCost = computed(() =>
|
||||
(props.composition ?? []).reduce(
|
||||
(sum, item) => sum + Number(item.amount || 0),
|
||||
0,
|
||||
),
|
||||
);
|
||||
|
||||
function renderChart() {
|
||||
const source = props.composition ?? [];
|
||||
renderEcharts({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter(params: unknown) {
|
||||
const data = params as {
|
||||
name?: string;
|
||||
percent?: number;
|
||||
value?: number;
|
||||
};
|
||||
return `${data.name ?? ''}<br/>${formatCurrency(data.value ?? 0)} (${formatPercent(data.percent ?? 0)})`;
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['52%', '76%'],
|
||||
center: ['50%', '50%'],
|
||||
data: source.map((item) => ({
|
||||
name: item.categoryText,
|
||||
value: item.amount,
|
||||
itemStyle: {
|
||||
color: COST_CATEGORY_COLOR_MAP[item.category] ?? '#2563eb',
|
||||
},
|
||||
})),
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.composition,
|
||||
async () => {
|
||||
await nextTick();
|
||||
renderChart();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
renderChart();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fc-composition-card">
|
||||
<div class="fc-section-title">成本构成</div>
|
||||
|
||||
<div class="fc-composition-body">
|
||||
<div class="fc-composition-chart-wrap">
|
||||
<EchartsUI ref="chartRef" class="fc-composition-chart" />
|
||||
<div class="fc-composition-center">
|
||||
<div class="fc-composition-center-value">
|
||||
{{ formatCurrency(totalCost) }}
|
||||
</div>
|
||||
<div class="fc-composition-center-label">总成本</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fc-composition-legend">
|
||||
<div
|
||||
v-for="item in props.composition"
|
||||
:key="item.category"
|
||||
class="fc-composition-legend-item"
|
||||
>
|
||||
<span
|
||||
class="fc-composition-dot"
|
||||
:style="{ backgroundColor: COST_CATEGORY_COLOR_MAP[item.category] }"
|
||||
></span>
|
||||
<span class="fc-composition-name">{{ item.categoryText }}</span>
|
||||
<span class="fc-composition-amount">{{
|
||||
formatCurrency(item.amount)
|
||||
}}</span>
|
||||
<span class="fc-composition-percent">{{
|
||||
formatPercent(item.percentage)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,87 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：成本分析明细表。
|
||||
*/
|
||||
import type { TableProps } from 'ant-design-vue';
|
||||
|
||||
import type { FinanceCostMonthlyDetailRowDto } from '#/api/finance/cost';
|
||||
|
||||
import { h } from 'vue';
|
||||
|
||||
import { Table } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
formatCurrency,
|
||||
formatPercent,
|
||||
} from '../composables/cost-page/helpers';
|
||||
|
||||
interface Props {
|
||||
loading: boolean;
|
||||
rows: FinanceCostMonthlyDetailRowDto[];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const columns: TableProps['columns'] = [
|
||||
{
|
||||
title: '月份',
|
||||
dataIndex: 'month',
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: '食材',
|
||||
dataIndex: 'foodAmount',
|
||||
align: 'right',
|
||||
customRender: ({ text }) => formatCurrency(Number(text ?? 0)),
|
||||
},
|
||||
{
|
||||
title: '人工',
|
||||
dataIndex: 'laborAmount',
|
||||
align: 'right',
|
||||
customRender: ({ text }) => formatCurrency(Number(text ?? 0)),
|
||||
},
|
||||
{
|
||||
title: '固定',
|
||||
dataIndex: 'fixedAmount',
|
||||
align: 'right',
|
||||
customRender: ({ text }) => formatCurrency(Number(text ?? 0)),
|
||||
},
|
||||
{
|
||||
title: '包装',
|
||||
dataIndex: 'packagingAmount',
|
||||
align: 'right',
|
||||
customRender: ({ text }) => formatCurrency(Number(text ?? 0)),
|
||||
},
|
||||
{
|
||||
title: '总计',
|
||||
dataIndex: 'totalCost',
|
||||
align: 'right',
|
||||
customRender: ({ text }) =>
|
||||
h(
|
||||
'span',
|
||||
{ class: 'fc-total-amount' },
|
||||
formatCurrency(Number(text ?? 0)),
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '成本率',
|
||||
dataIndex: 'costRate',
|
||||
align: 'right',
|
||||
customRender: ({ text }) => formatPercent(Number(text ?? 0)),
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fc-table-card">
|
||||
<div class="fc-section-title">成本明细</div>
|
||||
<Table
|
||||
row-key="month"
|
||||
size="middle"
|
||||
:columns="columns"
|
||||
:data-source="props.rows"
|
||||
:loading="props.loading"
|
||||
:pagination="false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,57 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：成本分析统计卡。
|
||||
*/
|
||||
import type { FinanceCostAnalysisStatsDto } from '#/api/finance/cost';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
||||
import {
|
||||
formatCurrency,
|
||||
formatPercent,
|
||||
} from '../composables/cost-page/helpers';
|
||||
|
||||
interface Props {
|
||||
stats: FinanceCostAnalysisStatsDto;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const monthOnMonthClass = computed(() => {
|
||||
if ((props.stats?.monthOnMonthChangeRate ?? 0) > 0) return 'is-up';
|
||||
if ((props.stats?.monthOnMonthChangeRate ?? 0) < 0) return 'is-down';
|
||||
return 'is-flat';
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fc-stats">
|
||||
<div class="fc-stat-card">
|
||||
<div class="fc-stat-label">本月总成本</div>
|
||||
<div class="fc-stat-value">
|
||||
{{ formatCurrency(props.stats.totalCost) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fc-stat-card">
|
||||
<div class="fc-stat-label">食材成本率</div>
|
||||
<div class="fc-stat-value">
|
||||
{{ formatPercent(props.stats.foodCostRate) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fc-stat-card">
|
||||
<div class="fc-stat-label">单均成本</div>
|
||||
<div class="fc-stat-value">
|
||||
{{ formatCurrency(props.stats.averageCostPerPaidOrder) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fc-stat-card">
|
||||
<div class="fc-stat-label">环比变化</div>
|
||||
<div class="fc-stat-value" :class="monthOnMonthClass">
|
||||
{{ formatPercent(props.stats.monthOnMonthChangeRate) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,114 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { EchartsUIType } from '@vben/plugins/echarts';
|
||||
|
||||
/**
|
||||
* 文件职责：成本分析近 6 月趋势图。
|
||||
*/
|
||||
import type { FinanceCostTrendPointDto } from '#/api/finance/cost';
|
||||
|
||||
import { nextTick, onMounted, ref, watch } from 'vue';
|
||||
|
||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
||||
|
||||
import { formatCurrency } from '../composables/cost-page/helpers';
|
||||
|
||||
interface Props {
|
||||
trend: FinanceCostTrendPointDto[];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const chartRef = ref<EchartsUIType>();
|
||||
const { renderEcharts } = useEcharts(chartRef);
|
||||
|
||||
function renderChart() {
|
||||
const source = props.trend ?? [];
|
||||
renderEcharts({
|
||||
color: ['#2563eb', '#16a34a'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter(params: unknown) {
|
||||
if (!Array.isArray(params)) return '';
|
||||
const records = params as Array<{
|
||||
axisValue?: string;
|
||||
seriesName?: string;
|
||||
value?: number;
|
||||
}>;
|
||||
const month = String(records[0]?.axisValue ?? '');
|
||||
const cost = Number(
|
||||
records.find((item) => item.seriesName === '总成本')?.value ?? 0,
|
||||
);
|
||||
const revenue = Number(
|
||||
records.find((item) => item.seriesName === '营业额')?.value ?? 0,
|
||||
);
|
||||
return `${month}<br/>总成本：${formatCurrency(cost)}<br/>营业额：${formatCurrency(revenue)}`;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '1%',
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
data: ['总成本', '营业额'],
|
||||
top: 0,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisTick: { show: false },
|
||||
data: source.map((item) => item.month.slice(5)),
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#f1f5f9',
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: (value: number) => `${Math.round(value / 1000)}k`,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '总成本',
|
||||
type: 'bar',
|
||||
barWidth: 22,
|
||||
data: source.map((item) => item.totalCost),
|
||||
itemStyle: {
|
||||
borderRadius: [6, 6, 0, 0],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '营业额',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: source.map((item) => item.revenue),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.trend,
|
||||
async () => {
|
||||
await nextTick();
|
||||
renderChart();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
renderChart();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fc-chart-card">
|
||||
<div class="fc-section-title">近6个月成本趋势</div>
|
||||
<EchartsUI ref="chartRef" class="fc-trend-chart" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,36 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：成本明细删除确认弹窗。
|
||||
*/
|
||||
import { Modal } from 'ant-design-vue';
|
||||
|
||||
interface Props {
|
||||
itemName?: string;
|
||||
open: boolean;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'cancel'): void;
|
||||
(event: 'confirm'): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal
|
||||
:open="open"
|
||||
title="删除明细"
|
||||
ok-text="确认删除"
|
||||
ok-type="danger"
|
||||
cancel-text="取消"
|
||||
@cancel="emit('cancel')"
|
||||
@ok="emit('confirm')"
|
||||
>
|
||||
<p class="fc-delete-tip">
|
||||
确认删除明细项
|
||||
<strong>{{ itemName || '未命名项' }}</strong>
|
||||
吗？删除后需重新保存才会生效。
|
||||
</p>
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -1,157 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { FinanceCostCategoryViewModel } from '../types';
|
||||
|
||||
/**
|
||||
* 文件职责：成本录入分类卡片（总额 + 明细列表）。
|
||||
*/
|
||||
import type { FinanceCostCategoryCode } from '#/api/finance/cost';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Button, Card, Empty, InputNumber, Tag } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
formatCurrency,
|
||||
formatPercent,
|
||||
} from '../composables/cost-page/helpers';
|
||||
|
||||
interface Props {
|
||||
canManage: boolean;
|
||||
category: FinanceCostCategoryViewModel;
|
||||
color?: string;
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'addItem', category: FinanceCostCategoryCode): void;
|
||||
(
|
||||
event: 'deleteItem',
|
||||
category: FinanceCostCategoryCode,
|
||||
itemId: string,
|
||||
): void;
|
||||
(event: 'editItem', category: FinanceCostCategoryCode, itemId: string): void;
|
||||
(event: 'toggle', category: FinanceCostCategoryCode): void;
|
||||
(
|
||||
event: 'updateTotal',
|
||||
category: FinanceCostCategoryCode,
|
||||
value: number,
|
||||
): void;
|
||||
}>();
|
||||
|
||||
function handleTotalChange(value: unknown) {
|
||||
emit('updateTotal', props.category.category, Number(value ?? 0));
|
||||
}
|
||||
|
||||
function handleEdit(itemId: string | undefined) {
|
||||
if (!itemId) return;
|
||||
emit('editItem', props.category.category, itemId);
|
||||
}
|
||||
|
||||
function handleDelete(itemId: string | undefined) {
|
||||
if (!itemId) return;
|
||||
emit('deleteItem', props.category.category, itemId);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="fc-entry-card" :bordered="false">
|
||||
<div class="fc-entry-head">
|
||||
<div class="fc-entry-icon" :style="{ color: props.color || '#1677ff' }">
|
||||
<IconifyIcon :icon="props.icon || 'lucide:circle-dollar-sign'" />
|
||||
</div>
|
||||
|
||||
<div class="fc-entry-meta">
|
||||
<div class="fc-entry-name">
|
||||
{{ props.category.categoryText }}
|
||||
<span class="fc-entry-ratio">{{
|
||||
formatPercent(props.category.percentage)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fc-entry-amount">
|
||||
<span class="fc-entry-currency">¥</span>
|
||||
<InputNumber
|
||||
class="fc-entry-input"
|
||||
:min="0"
|
||||
:step="100"
|
||||
:precision="2"
|
||||
:value="props.category.totalAmount"
|
||||
:controls="false"
|
||||
:disabled="!props.canManage"
|
||||
@update:value="(value) => handleTotalChange(value)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="link"
|
||||
class="fc-entry-toggle"
|
||||
@click="emit('toggle', props.category.category)"
|
||||
>
|
||||
{{ props.category.expanded ? '收起明细' : '展开明细' }}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div v-if="props.category.expanded" class="fc-entry-detail">
|
||||
<template v-if="props.category.items.length > 0">
|
||||
<div
|
||||
v-for="item in props.category.items"
|
||||
:key="item.itemId"
|
||||
class="fc-entry-detail-row"
|
||||
>
|
||||
<div class="fc-entry-item-name">{{ item.itemName }}</div>
|
||||
|
||||
<div class="fc-entry-item-value">
|
||||
<template v-if="props.category.category === 'labor'">
|
||||
<Tag color="blue">{{ item.quantity ?? 0 }} 人</Tag>
|
||||
<span class="fc-entry-mul">x</span>
|
||||
<Tag color="cyan">{{ formatCurrency(item.unitPrice ?? 0) }}</Tag>
|
||||
<span class="fc-entry-equal">=</span>
|
||||
</template>
|
||||
<span class="fc-entry-item-amount">{{
|
||||
formatCurrency(item.amount)
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<div class="fc-entry-item-actions">
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
:disabled="!props.canManage"
|
||||
@click="handleEdit(item.itemId)"
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
danger
|
||||
:disabled="!props.canManage"
|
||||
@click="handleDelete(item.itemId)"
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else class="fc-entry-empty">
|
||||
<Empty description="暂无明细" :image-style="{ height: '48px' }" />
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="link"
|
||||
class="fc-entry-add"
|
||||
:disabled="!props.canManage"
|
||||
@click="emit('addItem', props.category.category)"
|
||||
>
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:plus" />
|
||||
</template>
|
||||
添加明细
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
@@ -1,37 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：成本录入底部汇总栏。
|
||||
*/
|
||||
import { Button } from 'ant-design-vue';
|
||||
|
||||
import { formatCurrency } from '../composables/cost-page/helpers';
|
||||
|
||||
interface Props {
|
||||
canManage: boolean;
|
||||
loading: boolean;
|
||||
totalCost: number;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'save'): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fc-summary">
|
||||
<div class="fc-summary-label">本月总成本</div>
|
||||
<div class="fc-summary-right">
|
||||
<div class="fc-summary-value">{{ formatCurrency(props.totalCost) }}</div>
|
||||
<Button
|
||||
type="primary"
|
||||
:loading="props.loading"
|
||||
:disabled="!props.canManage"
|
||||
@click="emit('save')"
|
||||
>
|
||||
保存
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,191 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：成本明细编辑抽屉（新增/编辑）。
|
||||
*/
|
||||
import type {
|
||||
FinanceCostCategoryCode,
|
||||
FinanceCostEntryDetailDto,
|
||||
} from '#/api/finance/cost';
|
||||
|
||||
import { computed, reactive, watch } from 'vue';
|
||||
|
||||
import { Button, Drawer, Form, Input, InputNumber } from 'ant-design-vue';
|
||||
|
||||
import { roundAmount } from '../composables/cost-page/helpers';
|
||||
|
||||
interface Props {
|
||||
category: FinanceCostCategoryCode;
|
||||
categoryText: string;
|
||||
mode: 'create' | 'edit';
|
||||
open: boolean;
|
||||
sourceItem?: FinanceCostEntryDetailDto;
|
||||
submitting: boolean;
|
||||
}
|
||||
|
||||
interface EditorFormState {
|
||||
amount: number;
|
||||
itemId?: string;
|
||||
itemName: string;
|
||||
quantity?: number;
|
||||
sortOrder: number;
|
||||
unitPrice?: number;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void;
|
||||
(event: 'submit', payload: FinanceCostEntryDetailDto): void;
|
||||
}>();
|
||||
|
||||
const formState = reactive<EditorFormState>({
|
||||
itemId: undefined,
|
||||
itemName: '',
|
||||
amount: 0,
|
||||
quantity: 0,
|
||||
unitPrice: 0,
|
||||
sortOrder: 1,
|
||||
});
|
||||
|
||||
const isLaborCategory = computed(() => props.category === 'labor');
|
||||
const drawerTitle = computed(() =>
|
||||
props.mode === 'create'
|
||||
? `新增${props.categoryText}明细`
|
||||
: `编辑${props.categoryText}明细`,
|
||||
);
|
||||
|
||||
const laborComputedAmount = computed(() => {
|
||||
if (!isLaborCategory.value) return formState.amount;
|
||||
return roundAmount((formState.quantity ?? 0) * (formState.unitPrice ?? 0));
|
||||
});
|
||||
|
||||
watch(
|
||||
() => [props.open, props.sourceItem, props.mode] as const,
|
||||
() => {
|
||||
if (!props.open) return;
|
||||
|
||||
formState.itemId = props.sourceItem?.itemId;
|
||||
formState.itemName = props.sourceItem?.itemName ?? '';
|
||||
formState.amount = props.sourceItem?.amount ?? 0;
|
||||
formState.quantity = props.sourceItem?.quantity ?? 0;
|
||||
formState.unitPrice = props.sourceItem?.unitPrice ?? 0;
|
||||
formState.sortOrder = props.sourceItem?.sortOrder ?? 1;
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
function handleSubmit() {
|
||||
if (!formState.itemName.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
formState.amount = isLaborCategory.value
|
||||
? laborComputedAmount.value
|
||||
: roundAmount(formState.amount);
|
||||
|
||||
emit('submit', {
|
||||
itemId: formState.itemId,
|
||||
itemName: formState.itemName.trim(),
|
||||
amount: Math.max(0, formState.amount),
|
||||
quantity: isLaborCategory.value
|
||||
? roundAmount(formState.quantity ?? 0)
|
||||
: undefined,
|
||||
unitPrice: isLaborCategory.value
|
||||
? roundAmount(formState.unitPrice ?? 0)
|
||||
: undefined,
|
||||
sortOrder: Math.max(1, Number(formState.sortOrder || 1)),
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Drawer
|
||||
:open="props.open"
|
||||
:title="drawerTitle"
|
||||
width="460"
|
||||
@close="emit('close')"
|
||||
>
|
||||
<Form layout="vertical">
|
||||
<Form.Item label="明细名称" required>
|
||||
<Input
|
||||
:value="formState.itemName"
|
||||
:maxlength="64"
|
||||
placeholder="请输入明细名称"
|
||||
@update:value="(value) => (formState.itemName = String(value ?? ''))"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<template v-if="isLaborCategory">
|
||||
<Form.Item label="人数" required>
|
||||
<InputNumber
|
||||
class="fc-full-input"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:controls="false"
|
||||
:value="formState.quantity"
|
||||
@update:value="(value) => (formState.quantity = Number(value ?? 0))"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="月薪" required>
|
||||
<InputNumber
|
||||
class="fc-full-input"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:controls="false"
|
||||
:value="formState.unitPrice"
|
||||
@update:value="
|
||||
(value) => (formState.unitPrice = Number(value ?? 0))
|
||||
"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="小计">
|
||||
<InputNumber
|
||||
class="fc-full-input"
|
||||
:value="laborComputedAmount"
|
||||
:precision="2"
|
||||
:controls="false"
|
||||
disabled
|
||||
/>
|
||||
</Form.Item>
|
||||
</template>
|
||||
|
||||
<Form.Item v-else label="金额" required>
|
||||
<InputNumber
|
||||
class="fc-full-input"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:controls="false"
|
||||
:value="formState.amount"
|
||||
@update:value="(value) => (formState.amount = Number(value ?? 0))"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="排序">
|
||||
<InputNumber
|
||||
class="fc-full-input"
|
||||
:min="1"
|
||||
:precision="0"
|
||||
:controls="false"
|
||||
:value="formState.sortOrder"
|
||||
@update:value="(value) => (formState.sortOrder = Number(value ?? 1))"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<template #footer>
|
||||
<div class="fc-drawer-footer">
|
||||
<Button @click="emit('close')">取消</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
:loading="props.submitting"
|
||||
:disabled="!formState.itemName.trim()"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
确认
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -1,107 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { FinanceCostTabKey, OptionItem } from '../types';
|
||||
|
||||
/**
|
||||
* 文件职责：成本管理顶部工具条（Tab、维度、门店、月份）。
|
||||
*/
|
||||
import type { FinanceCostDimension } from '#/api/finance/cost';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Button, Input, Segmented, Select } from 'ant-design-vue';
|
||||
|
||||
interface Props {
|
||||
activeTab: FinanceCostTabKey;
|
||||
dimension: FinanceCostDimension;
|
||||
dimensionOptions: Array<{ label: string; value: FinanceCostDimension }>;
|
||||
isStoreLoading: boolean;
|
||||
month: string;
|
||||
monthTitle: string;
|
||||
showStoreSelect: boolean;
|
||||
storeId: string;
|
||||
storeOptions: OptionItem[];
|
||||
tabOptions: Array<{ label: string; value: FinanceCostTabKey }>;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'nextMonth'): void;
|
||||
(event: 'prevMonth'): void;
|
||||
(event: 'update:activeTab', value: FinanceCostTabKey): void;
|
||||
(event: 'update:dimension', value: FinanceCostDimension): void;
|
||||
(event: 'update:month', value: string): 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="fc-toolbar">
|
||||
<Segmented
|
||||
class="fc-tab-segmented"
|
||||
:value="props.activeTab"
|
||||
:options="props.tabOptions"
|
||||
@update:value="
|
||||
(value) =>
|
||||
emit('update:activeTab', (value as FinanceCostTabKey) || 'entry')
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="fc-toolbar-right">
|
||||
<Segmented
|
||||
class="fc-dimension-segmented"
|
||||
:value="props.dimension"
|
||||
:options="props.dimensionOptions"
|
||||
@update:value="
|
||||
(value) =>
|
||||
emit(
|
||||
'update:dimension',
|
||||
(value as FinanceCostDimension) || 'tenant',
|
||||
)
|
||||
"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-if="props.showStoreSelect"
|
||||
class="fc-store-select"
|
||||
:value="props.storeId"
|
||||
:options="props.storeOptions"
|
||||
:loading="props.isStoreLoading"
|
||||
:disabled="props.storeOptions.length === 0"
|
||||
placeholder="请选择门店"
|
||||
@update:value="(value) => handleStoreChange(value)"
|
||||
/>
|
||||
|
||||
<div class="fc-month-picker">
|
||||
<Button class="fc-month-arrow" @click="emit('prevMonth')">
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:chevron-left" />
|
||||
</template>
|
||||
</Button>
|
||||
|
||||
<div class="fc-month-title">{{ props.monthTitle }}</div>
|
||||
|
||||
<Button class="fc-month-arrow" @click="emit('nextMonth')">
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:chevron-right" />
|
||||
</template>
|
||||
</Button>
|
||||
|
||||
<Input
|
||||
class="fc-month-input"
|
||||
type="month"
|
||||
:value="props.month"
|
||||
@update:value="(value) => emit('update:month', String(value ?? ''))"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,96 +0,0 @@
|
||||
import type {
|
||||
FinanceCostAnalysisState,
|
||||
FinanceCostCategoryViewModel,
|
||||
FinanceCostEntryState,
|
||||
FinanceCostFilterState,
|
||||
FinanceCostTabKey,
|
||||
} from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：成本管理页面常量与默认状态定义。
|
||||
*/
|
||||
import type { FinanceCostDimension } from '#/api/finance/cost';
|
||||
|
||||
/** 成本管理查看权限。 */
|
||||
export const FINANCE_COST_VIEW_PERMISSION = 'tenant:finance:cost:view';
|
||||
|
||||
/** 成本管理维护权限。 */
|
||||
export const FINANCE_COST_MANAGE_PERMISSION = 'tenant:finance:cost:manage';
|
||||
|
||||
/** 页面 Tab 选项。 */
|
||||
export const COST_TAB_OPTIONS: Array<{
|
||||
label: string;
|
||||
value: FinanceCostTabKey;
|
||||
}> = [
|
||||
{ label: '成本录入', value: 'entry' },
|
||||
{ label: '成本分析', value: 'analysis' },
|
||||
];
|
||||
|
||||
/** 维度切换选项。 */
|
||||
export const COST_DIMENSION_OPTIONS: Array<{
|
||||
label: string;
|
||||
value: FinanceCostDimension;
|
||||
}> = [
|
||||
{ label: '租户汇总', value: 'tenant' },
|
||||
{ label: '门店视角', value: 'store' },
|
||||
];
|
||||
|
||||
/** 分类颜色映射。 */
|
||||
export const COST_CATEGORY_COLOR_MAP: Record<string, string> = {
|
||||
food: '#2563eb',
|
||||
labor: '#16a34a',
|
||||
fixed: '#ca8a04',
|
||||
packaging: '#db2777',
|
||||
};
|
||||
|
||||
/** 分类图标映射。 */
|
||||
export const COST_CATEGORY_ICON_MAP: Record<string, string> = {
|
||||
food: 'lucide:utensils-crossed',
|
||||
labor: 'lucide:users',
|
||||
fixed: 'lucide:building-2',
|
||||
packaging: 'lucide:package',
|
||||
};
|
||||
|
||||
/** 默认录入状态。 */
|
||||
export const DEFAULT_ENTRY_STATE: FinanceCostEntryState = {
|
||||
monthRevenue: 0,
|
||||
totalCost: 0,
|
||||
costRate: 0,
|
||||
categories: [],
|
||||
};
|
||||
|
||||
/** 默认分析状态。 */
|
||||
export const DEFAULT_ANALYSIS_STATE: FinanceCostAnalysisState = {
|
||||
stats: {
|
||||
totalCost: 0,
|
||||
foodCostRate: 0,
|
||||
averageCostPerPaidOrder: 0,
|
||||
monthOnMonthChangeRate: 0,
|
||||
revenue: 0,
|
||||
paidOrderCount: 0,
|
||||
},
|
||||
trend: [],
|
||||
composition: [],
|
||||
detailRows: [],
|
||||
};
|
||||
|
||||
/** 默认筛选状态。 */
|
||||
export const DEFAULT_FILTER_STATE: FinanceCostFilterState = {
|
||||
dimension: 'tenant',
|
||||
month: '',
|
||||
storeId: '',
|
||||
};
|
||||
|
||||
/** 趋势月数。 */
|
||||
export const TREND_MONTH_COUNT = 6;
|
||||
|
||||
/** 复制分类列表并重置展开状态。 */
|
||||
export function cloneCategoriesWithExpandState(
|
||||
categories: FinanceCostCategoryViewModel[],
|
||||
) {
|
||||
return categories.map((item) => ({
|
||||
...item,
|
||||
items: [...item.items],
|
||||
expanded: Boolean(item.expanded),
|
||||
}));
|
||||
}
|
||||
@@ -1,169 +0,0 @@
|
||||
/**
|
||||
* 文件职责：成本管理页面数据加载与保存动作。
|
||||
*/
|
||||
import type {
|
||||
FinanceCostAnalysisState,
|
||||
FinanceCostCategoryViewModel,
|
||||
FinanceCostEntryState,
|
||||
FinanceCostFilterState,
|
||||
} from '../../types';
|
||||
|
||||
import type { StoreListItemDto } from '#/api/store';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
getFinanceCostAnalysisApi,
|
||||
getFinanceCostEntryApi,
|
||||
saveFinanceCostEntryApi,
|
||||
} from '#/api/finance/cost';
|
||||
import { getStoreListApi } from '#/api/store';
|
||||
|
||||
import { DEFAULT_ANALYSIS_STATE, DEFAULT_ENTRY_STATE } from './constants';
|
||||
import {
|
||||
buildSaveCategoryPayload,
|
||||
buildScopeQueryPayload,
|
||||
mapCategoriesToViewModel,
|
||||
} from './helpers';
|
||||
|
||||
interface DataActionOptions {
|
||||
analysis: FinanceCostAnalysisState;
|
||||
entry: FinanceCostEntryState;
|
||||
filters: FinanceCostFilterState;
|
||||
isAnalysisLoading: { value: boolean };
|
||||
isEntryLoading: { value: boolean };
|
||||
isSaving: { value: boolean };
|
||||
isStoreLoading: { value: boolean };
|
||||
stores: { value: StoreListItemDto[] };
|
||||
}
|
||||
|
||||
/** 创建数据动作集合。 */
|
||||
export function createDataActions(options: DataActionOptions) {
|
||||
async function loadStores() {
|
||||
options.isStoreLoading.value = true;
|
||||
try {
|
||||
const result = await getStoreListApi({ page: 1, pageSize: 200 });
|
||||
options.stores.value = result.items ?? [];
|
||||
} finally {
|
||||
options.isStoreLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function clearEntry() {
|
||||
options.entry.monthRevenue = DEFAULT_ENTRY_STATE.monthRevenue;
|
||||
options.entry.totalCost = DEFAULT_ENTRY_STATE.totalCost;
|
||||
options.entry.costRate = DEFAULT_ENTRY_STATE.costRate;
|
||||
options.entry.categories = [];
|
||||
}
|
||||
|
||||
function clearAnalysis() {
|
||||
options.analysis.stats = { ...DEFAULT_ANALYSIS_STATE.stats };
|
||||
options.analysis.trend = [];
|
||||
options.analysis.composition = [];
|
||||
options.analysis.detailRows = [];
|
||||
}
|
||||
|
||||
function clearAllData() {
|
||||
clearEntry();
|
||||
clearAnalysis();
|
||||
}
|
||||
|
||||
async function loadEntryData() {
|
||||
if (options.filters.dimension === 'store' && !options.filters.storeId) {
|
||||
clearEntry();
|
||||
return;
|
||||
}
|
||||
|
||||
options.isEntryLoading.value = true;
|
||||
try {
|
||||
const expandedMap = new Map(
|
||||
(options.entry.categories ?? []).map((item) => [
|
||||
item.category,
|
||||
Boolean(item.expanded),
|
||||
]),
|
||||
);
|
||||
|
||||
const result = await getFinanceCostEntryApi(
|
||||
buildScopeQueryPayload(options.filters),
|
||||
);
|
||||
|
||||
options.entry.monthRevenue = result.monthRevenue;
|
||||
options.entry.totalCost = result.totalCost;
|
||||
options.entry.costRate = result.costRate;
|
||||
options.entry.categories = mapCategoriesToViewModel(
|
||||
result.categories ?? [],
|
||||
expandedMap,
|
||||
);
|
||||
} finally {
|
||||
options.isEntryLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAnalysisData() {
|
||||
if (options.filters.dimension === 'store' && !options.filters.storeId) {
|
||||
clearAnalysis();
|
||||
return;
|
||||
}
|
||||
|
||||
options.isAnalysisLoading.value = true;
|
||||
try {
|
||||
const result = await getFinanceCostAnalysisApi({
|
||||
...buildScopeQueryPayload(options.filters),
|
||||
trendMonthCount: 6,
|
||||
});
|
||||
|
||||
options.analysis.stats = { ...result.stats };
|
||||
options.analysis.trend = [...(result.trend ?? [])];
|
||||
options.analysis.composition = [...(result.composition ?? [])];
|
||||
options.analysis.detailRows = [...(result.detailRows ?? [])];
|
||||
} finally {
|
||||
options.isAnalysisLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function saveEntryData() {
|
||||
if (options.filters.dimension === 'store' && !options.filters.storeId) {
|
||||
message.warning('请先选择门店');
|
||||
return;
|
||||
}
|
||||
|
||||
options.isSaving.value = true;
|
||||
try {
|
||||
const result = await saveFinanceCostEntryApi({
|
||||
...buildScopeQueryPayload(options.filters),
|
||||
categories: buildSaveCategoryPayload(
|
||||
options.entry.categories as FinanceCostCategoryViewModel[],
|
||||
),
|
||||
});
|
||||
|
||||
const expandedMap = new Map(
|
||||
(options.entry.categories ?? []).map((item) => [
|
||||
item.category,
|
||||
Boolean(item.expanded),
|
||||
]),
|
||||
);
|
||||
|
||||
options.entry.monthRevenue = result.monthRevenue;
|
||||
options.entry.totalCost = result.totalCost;
|
||||
options.entry.costRate = result.costRate;
|
||||
options.entry.categories = mapCategoriesToViewModel(
|
||||
result.categories ?? [],
|
||||
expandedMap,
|
||||
);
|
||||
|
||||
message.success('成本数据保存成功');
|
||||
} finally {
|
||||
options.isSaving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
clearAllData,
|
||||
clearAnalysis,
|
||||
clearEntry,
|
||||
loadAnalysisData,
|
||||
loadEntryData,
|
||||
loadStores,
|
||||
saveEntryData,
|
||||
};
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
import type { CostDeleteModalState, CostDetailDrawerState } from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：成本明细抽屉与删除弹窗动作。
|
||||
*/
|
||||
import type {
|
||||
FinanceCostCategoryCode,
|
||||
FinanceCostEntryDetailDto,
|
||||
} from '#/api/finance/cost';
|
||||
|
||||
interface DrawerActionOptions {
|
||||
deleteModalState: CostDeleteModalState;
|
||||
drawerState: CostDetailDrawerState;
|
||||
removeDetailItem: (
|
||||
category: FinanceCostCategoryCode,
|
||||
itemId: string | undefined,
|
||||
) => void;
|
||||
upsertDetailItem: (
|
||||
category: FinanceCostCategoryCode,
|
||||
detail: FinanceCostEntryDetailDto,
|
||||
mode: 'create' | 'edit',
|
||||
) => void;
|
||||
}
|
||||
|
||||
/** 创建抽屉与弹窗动作。 */
|
||||
export function createDrawerActions(options: DrawerActionOptions) {
|
||||
function openCreateDrawer(category: FinanceCostCategoryCode) {
|
||||
options.drawerState.open = true;
|
||||
options.drawerState.mode = 'create';
|
||||
options.drawerState.category = category;
|
||||
options.drawerState.sourceItem = undefined;
|
||||
}
|
||||
|
||||
function openEditDrawer(
|
||||
category: FinanceCostCategoryCode,
|
||||
item: FinanceCostEntryDetailDto,
|
||||
) {
|
||||
options.drawerState.open = true;
|
||||
options.drawerState.mode = 'edit';
|
||||
options.drawerState.category = category;
|
||||
options.drawerState.sourceItem = { ...item };
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
options.drawerState.open = false;
|
||||
options.drawerState.sourceItem = undefined;
|
||||
}
|
||||
|
||||
function submitDrawer(detail: FinanceCostEntryDetailDto) {
|
||||
options.upsertDetailItem(
|
||||
options.drawerState.category,
|
||||
detail,
|
||||
options.drawerState.mode,
|
||||
);
|
||||
closeDrawer();
|
||||
}
|
||||
|
||||
function openDeleteModal(
|
||||
category: FinanceCostCategoryCode,
|
||||
item: FinanceCostEntryDetailDto,
|
||||
) {
|
||||
options.deleteModalState.open = true;
|
||||
options.deleteModalState.category = category;
|
||||
options.deleteModalState.item = item;
|
||||
}
|
||||
|
||||
function closeDeleteModal() {
|
||||
options.deleteModalState.open = false;
|
||||
options.deleteModalState.item = undefined;
|
||||
}
|
||||
|
||||
function confirmDelete() {
|
||||
options.removeDetailItem(
|
||||
options.deleteModalState.category,
|
||||
options.deleteModalState.item?.itemId,
|
||||
);
|
||||
closeDeleteModal();
|
||||
}
|
||||
|
||||
return {
|
||||
closeDeleteModal,
|
||||
closeDrawer,
|
||||
confirmDelete,
|
||||
openCreateDrawer,
|
||||
openDeleteModal,
|
||||
openEditDrawer,
|
||||
submitDrawer,
|
||||
};
|
||||
}
|
||||
@@ -1,122 +0,0 @@
|
||||
import type { FinanceCostEntryState } from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：成本录入分类与明细本地编辑动作。
|
||||
*/
|
||||
import type {
|
||||
FinanceCostCategoryCode,
|
||||
FinanceCostEntryDetailDto,
|
||||
} from '#/api/finance/cost';
|
||||
|
||||
import { roundAmount, sumAllCategoryTotal, sumCategoryItems } from './helpers';
|
||||
|
||||
interface EntryActionOptions {
|
||||
entry: FinanceCostEntryState;
|
||||
}
|
||||
|
||||
/** 创建录入区编辑动作。 */
|
||||
export function createEntryActions(options: EntryActionOptions) {
|
||||
function toggleCategoryExpanded(category: FinanceCostCategoryCode) {
|
||||
const target = options.entry.categories.find(
|
||||
(item) => item.category === category,
|
||||
);
|
||||
if (!target) return;
|
||||
target.expanded = !target.expanded;
|
||||
}
|
||||
|
||||
function setCategoryTotal(category: FinanceCostCategoryCode, value: number) {
|
||||
const target = options.entry.categories.find(
|
||||
(item) => item.category === category,
|
||||
);
|
||||
if (!target) return;
|
||||
target.totalAmount = Math.max(0, roundAmount(value));
|
||||
syncEntrySummary();
|
||||
}
|
||||
|
||||
function upsertDetailItem(
|
||||
category: FinanceCostCategoryCode,
|
||||
detail: FinanceCostEntryDetailDto,
|
||||
mode: 'create' | 'edit',
|
||||
) {
|
||||
const target = options.entry.categories.find(
|
||||
(item) => item.category === category,
|
||||
);
|
||||
if (!target) return;
|
||||
|
||||
const nextItem: FinanceCostEntryDetailDto = {
|
||||
...detail,
|
||||
itemId: detail.itemId || createTempItemId(),
|
||||
amount: resolveDetailAmount(category, detail),
|
||||
quantity:
|
||||
detail.quantity === undefined
|
||||
? undefined
|
||||
: roundAmount(detail.quantity),
|
||||
unitPrice:
|
||||
detail.unitPrice === undefined
|
||||
? undefined
|
||||
: roundAmount(detail.unitPrice),
|
||||
sortOrder: detail.sortOrder > 0 ? detail.sortOrder : 1,
|
||||
};
|
||||
|
||||
const index = target.items.findIndex(
|
||||
(item) => item.itemId === detail.itemId,
|
||||
);
|
||||
if (mode === 'edit' && index !== -1) {
|
||||
target.items.splice(index, 1, nextItem);
|
||||
} else {
|
||||
target.items.push(nextItem);
|
||||
}
|
||||
|
||||
target.items.sort((left, right) => left.sortOrder - right.sortOrder);
|
||||
target.totalAmount = sumCategoryItems(target);
|
||||
syncEntrySummary();
|
||||
}
|
||||
|
||||
function removeDetailItem(
|
||||
category: FinanceCostCategoryCode,
|
||||
itemId: string | undefined,
|
||||
) {
|
||||
const target = options.entry.categories.find(
|
||||
(item) => item.category === category,
|
||||
);
|
||||
if (!target || !itemId) return;
|
||||
|
||||
target.items = target.items.filter((item) => item.itemId !== itemId);
|
||||
target.totalAmount = sumCategoryItems(target);
|
||||
syncEntrySummary();
|
||||
}
|
||||
|
||||
function syncEntrySummary() {
|
||||
const totalCost = sumAllCategoryTotal(options.entry.categories);
|
||||
options.entry.totalCost = totalCost;
|
||||
options.entry.costRate =
|
||||
options.entry.monthRevenue > 0
|
||||
? roundAmount((totalCost / options.entry.monthRevenue) * 100)
|
||||
: 0;
|
||||
}
|
||||
|
||||
return {
|
||||
removeDetailItem,
|
||||
setCategoryTotal,
|
||||
syncEntrySummary,
|
||||
toggleCategoryExpanded,
|
||||
upsertDetailItem,
|
||||
};
|
||||
}
|
||||
|
||||
function resolveDetailAmount(
|
||||
category: FinanceCostCategoryCode,
|
||||
detail: FinanceCostEntryDetailDto,
|
||||
) {
|
||||
if (category !== 'labor') {
|
||||
return Math.max(0, roundAmount(detail.amount));
|
||||
}
|
||||
|
||||
const quantity = roundAmount(detail.quantity ?? 0);
|
||||
const unitPrice = roundAmount(detail.unitPrice ?? 0);
|
||||
return Math.max(0, roundAmount(quantity * unitPrice));
|
||||
}
|
||||
|
||||
function createTempItemId() {
|
||||
return `tmp-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
import type { FinanceCostFilterState, FinanceCostTabKey } from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：成本管理页面筛选项与月份切换动作。
|
||||
*/
|
||||
import type { FinanceCostDimension } from '#/api/finance/cost';
|
||||
|
||||
import { getCurrentMonthString, shiftMonth } from './helpers';
|
||||
|
||||
interface FilterActionOptions {
|
||||
activeTab: { value: FinanceCostTabKey };
|
||||
filters: FinanceCostFilterState;
|
||||
}
|
||||
|
||||
/** 创建筛选动作。 */
|
||||
export function createFilterActions(options: FilterActionOptions) {
|
||||
function setActiveTab(value: FinanceCostTabKey) {
|
||||
options.activeTab.value = value;
|
||||
}
|
||||
|
||||
function setDimension(value: FinanceCostDimension) {
|
||||
options.filters.dimension = value;
|
||||
}
|
||||
|
||||
function setStoreId(value: string) {
|
||||
options.filters.storeId = value;
|
||||
}
|
||||
|
||||
function setMonth(value: string) {
|
||||
options.filters.month = value || getCurrentMonthString();
|
||||
}
|
||||
|
||||
function shiftCurrentMonth(offset: number) {
|
||||
options.filters.month = shiftMonth(options.filters.month, offset);
|
||||
}
|
||||
|
||||
function setPreviousMonth() {
|
||||
shiftCurrentMonth(-1);
|
||||
}
|
||||
|
||||
function setNextMonth() {
|
||||
shiftCurrentMonth(1);
|
||||
}
|
||||
|
||||
return {
|
||||
setActiveTab,
|
||||
setDimension,
|
||||
setMonth,
|
||||
setNextMonth,
|
||||
setPreviousMonth,
|
||||
setStoreId,
|
||||
};
|
||||
}
|
||||
@@ -1,154 +0,0 @@
|
||||
import type { FinanceCostFilterState } from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：成本管理页面纯函数与格式化工具。
|
||||
*/
|
||||
import type {
|
||||
FinanceCostCategoryCode,
|
||||
FinanceCostEntryCategoryDto,
|
||||
SaveFinanceCostCategoryPayload,
|
||||
} from '#/api/finance/cost';
|
||||
|
||||
/** 解析为有限数字。 */
|
||||
export function toFiniteNumber(value: unknown, fallback = 0) {
|
||||
const normalized = Number(value);
|
||||
return Number.isFinite(normalized) ? normalized : fallback;
|
||||
}
|
||||
|
||||
/** 金额保留两位小数。 */
|
||||
export function roundAmount(value: unknown) {
|
||||
const normalized = toFiniteNumber(value, 0);
|
||||
return Math.round(normalized * 100) / 100;
|
||||
}
|
||||
|
||||
/** 货币格式化。 */
|
||||
export function formatCurrency(value: unknown) {
|
||||
return new Intl.NumberFormat('zh-CN', {
|
||||
style: 'currency',
|
||||
currency: 'CNY',
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
}).format(roundAmount(value));
|
||||
}
|
||||
|
||||
/** 百分比格式化。 */
|
||||
export function formatPercent(value: unknown) {
|
||||
return `${roundAmount(value).toFixed(2)}%`;
|
||||
}
|
||||
|
||||
/** 获取当前月份（yyyy-MM）。 */
|
||||
export function getCurrentMonthString() {
|
||||
const now = new Date();
|
||||
const month = `${now.getMonth() + 1}`.padStart(2, '0');
|
||||
return `${now.getFullYear()}-${month}`;
|
||||
}
|
||||
|
||||
/** 月份字符串转标题文本。 */
|
||||
export function formatMonthTitle(month: string) {
|
||||
const normalized = month.trim();
|
||||
const [year, monthValue] = normalized.split('-');
|
||||
if (!year || !monthValue) {
|
||||
return normalized || '--';
|
||||
}
|
||||
return `${year}年${Number(monthValue)}月`;
|
||||
}
|
||||
|
||||
/** 月份位移。 */
|
||||
export function shiftMonth(month: string, offset: number) {
|
||||
const parsed = parseMonth(month);
|
||||
if (!parsed) {
|
||||
return getCurrentMonthString();
|
||||
}
|
||||
parsed.setMonth(parsed.getMonth() + offset);
|
||||
return formatMonth(parsed);
|
||||
}
|
||||
|
||||
/** 构建查询作用域参数。 */
|
||||
export function buildScopeQueryPayload(filters: FinanceCostFilterState) {
|
||||
return {
|
||||
dimension: filters.dimension,
|
||||
month: filters.month || undefined,
|
||||
storeId:
|
||||
filters.dimension === 'store' ? filters.storeId || undefined : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
/** 将 API 分类数据映射为页面视图模型。 */
|
||||
export function mapCategoriesToViewModel(
|
||||
categories: FinanceCostEntryCategoryDto[],
|
||||
expandedMap: Map<FinanceCostCategoryCode, boolean>,
|
||||
) {
|
||||
return (categories ?? []).map((item) => ({
|
||||
...item,
|
||||
items: [...(item.items ?? [])],
|
||||
expanded: expandedMap.get(item.category) ?? false,
|
||||
}));
|
||||
}
|
||||
|
||||
/** 计算分类总金额。 */
|
||||
export function sumCategoryItems(
|
||||
category: Pick<FinanceCostEntryCategoryDto, 'category' | 'items'>,
|
||||
) {
|
||||
let total = 0;
|
||||
for (const item of category.items ?? []) {
|
||||
if (category.category === 'labor') {
|
||||
const quantity = toFiniteNumber(item.quantity, 0);
|
||||
const unitPrice = toFiniteNumber(item.unitPrice, 0);
|
||||
total += roundAmount(quantity * unitPrice);
|
||||
continue;
|
||||
}
|
||||
total += roundAmount(item.amount);
|
||||
}
|
||||
return roundAmount(total);
|
||||
}
|
||||
|
||||
/** 计算全部分类总成本。 */
|
||||
export function sumAllCategoryTotal(categories: FinanceCostEntryCategoryDto[]) {
|
||||
let total = 0;
|
||||
for (const category of categories ?? []) {
|
||||
total += roundAmount(category.totalAmount);
|
||||
}
|
||||
return roundAmount(total);
|
||||
}
|
||||
|
||||
/** 构建保存请求分类数组。 */
|
||||
export function buildSaveCategoryPayload(
|
||||
categories: FinanceCostEntryCategoryDto[],
|
||||
): SaveFinanceCostCategoryPayload[] {
|
||||
return (categories ?? []).map((category) => ({
|
||||
category: category.category,
|
||||
totalAmount: roundAmount(category.totalAmount),
|
||||
items: (category.items ?? []).map((item, index) => ({
|
||||
itemId: item.itemId,
|
||||
itemName: item.itemName.trim(),
|
||||
amount: roundAmount(item.amount),
|
||||
quantity:
|
||||
item.quantity === undefined ? undefined : roundAmount(item.quantity),
|
||||
unitPrice:
|
||||
item.unitPrice === undefined ? undefined : roundAmount(item.unitPrice),
|
||||
sortOrder: item.sortOrder > 0 ? item.sortOrder : index + 1,
|
||||
})),
|
||||
}));
|
||||
}
|
||||
|
||||
function parseMonth(value: string) {
|
||||
const normalized = value.trim();
|
||||
const [year, month] = normalized.split('-');
|
||||
const yearValue = Number(year);
|
||||
const monthValue = Number(month);
|
||||
if (
|
||||
!Number.isInteger(yearValue) ||
|
||||
!Number.isInteger(monthValue) ||
|
||||
monthValue < 1 ||
|
||||
monthValue > 12
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
return new Date(yearValue, monthValue - 1, 1);
|
||||
}
|
||||
|
||||
function formatMonth(date: Date) {
|
||||
const year = date.getFullYear();
|
||||
const month = `${date.getMonth() + 1}`.padStart(2, '0');
|
||||
return `${year}-${month}`;
|
||||
}
|
||||
@@ -1,313 +0,0 @@
|
||||
import type {
|
||||
CostDeleteModalState,
|
||||
CostDetailDrawerState,
|
||||
FinanceCostAnalysisState,
|
||||
FinanceCostEntryState,
|
||||
FinanceCostFilterState,
|
||||
FinanceCostTabKey,
|
||||
OptionItem,
|
||||
} from '../types';
|
||||
|
||||
/**
|
||||
* 文件职责：成本管理页面状态与动作编排。
|
||||
*/
|
||||
import type { FinanceCostCategoryCode } from '#/api/finance/cost';
|
||||
import type { StoreListItemDto } from '#/api/store';
|
||||
|
||||
import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue';
|
||||
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
COST_DIMENSION_OPTIONS,
|
||||
COST_TAB_OPTIONS,
|
||||
DEFAULT_ANALYSIS_STATE,
|
||||
DEFAULT_ENTRY_STATE,
|
||||
DEFAULT_FILTER_STATE,
|
||||
FINANCE_COST_MANAGE_PERMISSION,
|
||||
FINANCE_COST_VIEW_PERMISSION,
|
||||
} from './cost-page/constants';
|
||||
import { createDataActions } from './cost-page/data-actions';
|
||||
import { createDrawerActions } from './cost-page/drawer-actions';
|
||||
import { createEntryActions } from './cost-page/entry-actions';
|
||||
import { createFilterActions } from './cost-page/filter-actions';
|
||||
import { formatMonthTitle, getCurrentMonthString } from './cost-page/helpers';
|
||||
|
||||
/** 创建成本管理页面组合状态。 */
|
||||
export function useFinanceCostPage() {
|
||||
const accessStore = useAccessStore();
|
||||
|
||||
const stores = ref<StoreListItemDto[]>([]);
|
||||
const activeTab = ref<FinanceCostTabKey>('entry');
|
||||
const filters = reactive<FinanceCostFilterState>({
|
||||
...DEFAULT_FILTER_STATE,
|
||||
month: getCurrentMonthString(),
|
||||
});
|
||||
|
||||
const entry = reactive<FinanceCostEntryState>({
|
||||
...DEFAULT_ENTRY_STATE,
|
||||
});
|
||||
const analysis = reactive<FinanceCostAnalysisState>({
|
||||
...DEFAULT_ANALYSIS_STATE,
|
||||
});
|
||||
|
||||
const isStoreLoading = ref(false);
|
||||
const isEntryLoading = ref(false);
|
||||
const isAnalysisLoading = ref(false);
|
||||
const isSaving = ref(false);
|
||||
|
||||
const drawerState = reactive<CostDetailDrawerState>({
|
||||
open: false,
|
||||
mode: 'create',
|
||||
category: 'food',
|
||||
});
|
||||
const deleteModalState = reactive<CostDeleteModalState>({
|
||||
open: false,
|
||||
category: 'food',
|
||||
});
|
||||
|
||||
const accessCodeSet = computed(
|
||||
() => new Set((accessStore.accessCodes ?? []).map(String)),
|
||||
);
|
||||
const canManage = computed(() =>
|
||||
accessCodeSet.value.has(FINANCE_COST_MANAGE_PERMISSION),
|
||||
);
|
||||
const canView = computed(
|
||||
() =>
|
||||
accessCodeSet.value.has(FINANCE_COST_VIEW_PERMISSION) ||
|
||||
accessCodeSet.value.has(FINANCE_COST_MANAGE_PERMISSION),
|
||||
);
|
||||
|
||||
const storeOptions = computed<OptionItem[]>(() =>
|
||||
stores.value.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
})),
|
||||
);
|
||||
|
||||
const selectedStoreName = computed(
|
||||
() =>
|
||||
storeOptions.value.find((item) => item.value === filters.storeId)
|
||||
?.label ?? '--',
|
||||
);
|
||||
|
||||
const monthTitle = computed(() => formatMonthTitle(filters.month));
|
||||
const showStoreSelect = computed(() => filters.dimension === 'store');
|
||||
const hasStore = computed(() => stores.value.length > 0);
|
||||
const canQueryCurrentScope = computed(
|
||||
() => filters.dimension === 'tenant' || Boolean(filters.storeId),
|
||||
);
|
||||
const drawerCategoryText = computed(() => {
|
||||
const matched = entry.categories.find(
|
||||
(item) => item.category === drawerState.category,
|
||||
);
|
||||
return matched?.categoryText || '明细';
|
||||
});
|
||||
const tabOptions = computed(() => COST_TAB_OPTIONS);
|
||||
const dimensionOptions = computed(() => COST_DIMENSION_OPTIONS);
|
||||
|
||||
const dataActions = createDataActions({
|
||||
stores,
|
||||
filters,
|
||||
entry,
|
||||
analysis,
|
||||
isStoreLoading,
|
||||
isEntryLoading,
|
||||
isAnalysisLoading,
|
||||
isSaving,
|
||||
});
|
||||
const entryActions = createEntryActions({ entry });
|
||||
const filterActions = createFilterActions({ activeTab, filters });
|
||||
const drawerActions = createDrawerActions({
|
||||
drawerState,
|
||||
deleteModalState,
|
||||
upsertDetailItem: entryActions.upsertDetailItem,
|
||||
removeDetailItem: entryActions.removeDetailItem,
|
||||
});
|
||||
|
||||
async function loadByCurrentTab() {
|
||||
if (!canView.value) return;
|
||||
if (!canQueryCurrentScope.value) {
|
||||
if (activeTab.value === 'entry') {
|
||||
dataActions.clearEntry();
|
||||
} else {
|
||||
dataActions.clearAnalysis();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (activeTab.value === 'entry') {
|
||||
await dataActions.loadEntryData();
|
||||
return;
|
||||
}
|
||||
|
||||
await dataActions.loadAnalysisData();
|
||||
}
|
||||
|
||||
async function loadAllPanels() {
|
||||
if (!canView.value || !canQueryCurrentScope.value) return;
|
||||
await Promise.all([
|
||||
dataActions.loadEntryData(),
|
||||
dataActions.loadAnalysisData(),
|
||||
]);
|
||||
}
|
||||
|
||||
function ensureStoreSelection() {
|
||||
if (filters.dimension !== 'store') return;
|
||||
if (filters.storeId) return;
|
||||
if (stores.value.length === 0) return;
|
||||
filters.storeId = stores.value[0]?.id ?? '';
|
||||
}
|
||||
|
||||
function clearByPermission() {
|
||||
stores.value = [];
|
||||
filters.storeId = '';
|
||||
dataActions.clearAllData();
|
||||
drawerActions.closeDrawer();
|
||||
drawerActions.closeDeleteModal();
|
||||
}
|
||||
|
||||
async function initPageData() {
|
||||
if (!canView.value) {
|
||||
clearByPermission();
|
||||
return;
|
||||
}
|
||||
|
||||
await dataActions.loadStores();
|
||||
ensureStoreSelection();
|
||||
await loadByCurrentTab();
|
||||
}
|
||||
|
||||
async function saveEntry() {
|
||||
if (!canManage.value) {
|
||||
message.warning('当前账号没有维护权限');
|
||||
return;
|
||||
}
|
||||
|
||||
await dataActions.saveEntryData();
|
||||
await dataActions.loadAnalysisData();
|
||||
}
|
||||
|
||||
function openAddDetail(category: FinanceCostCategoryCode) {
|
||||
if (!canManage.value) {
|
||||
message.warning('当前账号没有维护权限');
|
||||
return;
|
||||
}
|
||||
drawerActions.openCreateDrawer(category);
|
||||
}
|
||||
|
||||
function openEditDetail(category: FinanceCostCategoryCode, itemId: string) {
|
||||
if (!canManage.value) {
|
||||
message.warning('当前账号没有维护权限');
|
||||
return;
|
||||
}
|
||||
|
||||
const targetCategory = entry.categories.find(
|
||||
(current) => current.category === category,
|
||||
);
|
||||
const targetItem = targetCategory?.items.find(
|
||||
(current) => current.itemId === itemId,
|
||||
);
|
||||
if (!targetItem) return;
|
||||
drawerActions.openEditDrawer(category, targetItem);
|
||||
}
|
||||
|
||||
function openDeleteDetail(category: FinanceCostCategoryCode, itemId: string) {
|
||||
if (!canManage.value) {
|
||||
message.warning('当前账号没有维护权限');
|
||||
return;
|
||||
}
|
||||
|
||||
const targetCategory = entry.categories.find(
|
||||
(current) => current.category === category,
|
||||
);
|
||||
const targetItem = targetCategory?.items.find(
|
||||
(current) => current.itemId === itemId,
|
||||
);
|
||||
if (!targetItem) return;
|
||||
drawerActions.openDeleteModal(category, targetItem);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => activeTab.value,
|
||||
async () => {
|
||||
await loadByCurrentTab();
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => [filters.dimension, filters.storeId, filters.month],
|
||||
async () => {
|
||||
if (filters.dimension === 'store') {
|
||||
ensureStoreSelection();
|
||||
}
|
||||
await loadByCurrentTab();
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => canView.value,
|
||||
async (value, oldValue) => {
|
||||
if (value === oldValue) return;
|
||||
if (!value) {
|
||||
clearByPermission();
|
||||
return;
|
||||
}
|
||||
await initPageData();
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
await initPageData();
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
if (!canView.value) return;
|
||||
if (stores.value.length === 0) {
|
||||
void initPageData();
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
activeTab,
|
||||
analysis,
|
||||
canManage,
|
||||
canQueryCurrentScope,
|
||||
canView,
|
||||
deleteModalState,
|
||||
dimensionOptions,
|
||||
drawerCategoryText,
|
||||
drawerState,
|
||||
entry,
|
||||
filters,
|
||||
hasStore,
|
||||
isAnalysisLoading,
|
||||
isEntryLoading,
|
||||
isSaving,
|
||||
isStoreLoading,
|
||||
loadAllPanels,
|
||||
monthTitle,
|
||||
openAddDetail,
|
||||
openDeleteDetail,
|
||||
openEditDetail,
|
||||
saveEntry,
|
||||
selectedStoreName,
|
||||
setActiveTab: filterActions.setActiveTab,
|
||||
setCategoryTotal: entryActions.setCategoryTotal,
|
||||
setDimension: filterActions.setDimension,
|
||||
setMonth: filterActions.setMonth,
|
||||
setNextMonth: filterActions.setNextMonth,
|
||||
setPreviousMonth: filterActions.setPreviousMonth,
|
||||
setStoreId: filterActions.setStoreId,
|
||||
showStoreSelect,
|
||||
storeOptions,
|
||||
submitDetailFromDrawer: drawerActions.submitDrawer,
|
||||
tabOptions,
|
||||
toggleCategoryExpanded: entryActions.toggleCategoryExpanded,
|
||||
closeDetailDrawer: drawerActions.closeDrawer,
|
||||
closeDeleteModal: drawerActions.closeDeleteModal,
|
||||
confirmDeleteDetail: drawerActions.confirmDelete,
|
||||
};
|
||||
}
|
||||
@@ -1,184 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：财务中心成本管理页面入口编排。
|
||||
*/
|
||||
import type {
|
||||
FinanceCostCategoryCode,
|
||||
FinanceCostEntryDetailDto,
|
||||
} from '#/api/finance/cost';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { Empty } from 'ant-design-vue';
|
||||
|
||||
import CostAnalysisComposition from './components/CostAnalysisComposition.vue';
|
||||
import CostAnalysisDetailTable from './components/CostAnalysisDetailTable.vue';
|
||||
import CostAnalysisStatsBar from './components/CostAnalysisStatsBar.vue';
|
||||
import CostAnalysisTrendChart from './components/CostAnalysisTrendChart.vue';
|
||||
import CostDetailDeleteModal from './components/CostDetailDeleteModal.vue';
|
||||
import CostEntryCategoryCard from './components/CostEntryCategoryCard.vue';
|
||||
import CostEntrySummaryBar from './components/CostEntrySummaryBar.vue';
|
||||
import CostItemEditorDrawer from './components/CostItemEditorDrawer.vue';
|
||||
import CostPageToolbar from './components/CostPageToolbar.vue';
|
||||
import {
|
||||
COST_CATEGORY_COLOR_MAP,
|
||||
COST_CATEGORY_ICON_MAP,
|
||||
} from './composables/cost-page/constants';
|
||||
import { formatCurrency } from './composables/cost-page/helpers';
|
||||
import { useFinanceCostPage } from './composables/useFinanceCostPage';
|
||||
|
||||
const {
|
||||
activeTab,
|
||||
analysis,
|
||||
canManage,
|
||||
canQueryCurrentScope,
|
||||
canView,
|
||||
closeDeleteModal,
|
||||
closeDetailDrawer,
|
||||
confirmDeleteDetail,
|
||||
deleteModalState,
|
||||
dimensionOptions,
|
||||
drawerCategoryText,
|
||||
drawerState,
|
||||
entry,
|
||||
filters,
|
||||
hasStore,
|
||||
isAnalysisLoading,
|
||||
isEntryLoading,
|
||||
isSaving,
|
||||
isStoreLoading,
|
||||
monthTitle,
|
||||
openAddDetail,
|
||||
openDeleteDetail,
|
||||
openEditDetail,
|
||||
saveEntry,
|
||||
setActiveTab,
|
||||
setCategoryTotal,
|
||||
setDimension,
|
||||
setMonth,
|
||||
setNextMonth,
|
||||
setPreviousMonth,
|
||||
setStoreId,
|
||||
showStoreSelect,
|
||||
storeOptions,
|
||||
submitDetailFromDrawer,
|
||||
tabOptions,
|
||||
toggleCategoryExpanded,
|
||||
} = useFinanceCostPage();
|
||||
|
||||
function handleAddDetail(category: FinanceCostCategoryCode) {
|
||||
openAddDetail(category);
|
||||
}
|
||||
|
||||
function handleEditDetail(category: FinanceCostCategoryCode, itemId: string) {
|
||||
openEditDetail(category, itemId);
|
||||
}
|
||||
|
||||
function handleDeleteDetail(category: FinanceCostCategoryCode, itemId: string) {
|
||||
openDeleteDetail(category, itemId);
|
||||
}
|
||||
|
||||
function handleSubmitDrawer(detail: FinanceCostEntryDetailDto) {
|
||||
submitDetailFromDrawer(detail);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page title="成本管理" content-class="page-finance-cost">
|
||||
<div class="fc-page">
|
||||
<CostPageToolbar
|
||||
:active-tab="activeTab"
|
||||
:tab-options="tabOptions"
|
||||
:dimension="filters.dimension"
|
||||
:dimension-options="dimensionOptions"
|
||||
:show-store-select="showStoreSelect"
|
||||
:store-id="filters.storeId"
|
||||
:store-options="storeOptions"
|
||||
:is-store-loading="isStoreLoading"
|
||||
:month="filters.month"
|
||||
:month-title="monthTitle"
|
||||
@update:active-tab="setActiveTab"
|
||||
@update:dimension="setDimension"
|
||||
@update:store-id="setStoreId"
|
||||
@update:month="setMonth"
|
||||
@prev-month="setPreviousMonth"
|
||||
@next-month="setNextMonth"
|
||||
/>
|
||||
|
||||
<Empty v-if="!canView" description="暂无成本管理页面访问权限" />
|
||||
|
||||
<div v-else-if="showStoreSelect && !hasStore" class="fc-empty">
|
||||
<Empty description="暂无门店，请先创建门店" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="!canQueryCurrentScope" class="fc-empty">
|
||||
<Empty description="请选择门店后查看数据" />
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<section v-show="activeTab === 'entry'" class="fc-entry-panel">
|
||||
<div class="fc-entry-revenue">
|
||||
本月营业额：<strong>{{
|
||||
formatCurrency(entry.monthRevenue)
|
||||
}}</strong>
|
||||
</div>
|
||||
|
||||
<div class="fc-entry-list" :class="{ 'is-loading': isEntryLoading }">
|
||||
<CostEntryCategoryCard
|
||||
v-for="category in entry.categories"
|
||||
:key="category.category"
|
||||
:category="category"
|
||||
:can-manage="canManage"
|
||||
:icon="COST_CATEGORY_ICON_MAP[category.category]"
|
||||
:color="COST_CATEGORY_COLOR_MAP[category.category]"
|
||||
@toggle="toggleCategoryExpanded"
|
||||
@update-total="setCategoryTotal"
|
||||
@add-item="handleAddDetail"
|
||||
@edit-item="handleEditDetail"
|
||||
@delete-item="handleDeleteDetail"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<CostEntrySummaryBar
|
||||
:can-manage="canManage"
|
||||
:loading="isSaving"
|
||||
:total-cost="entry.totalCost"
|
||||
@save="saveEntry"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section v-show="activeTab === 'analysis'" class="fc-analysis-panel">
|
||||
<CostAnalysisStatsBar :stats="analysis.stats" />
|
||||
<CostAnalysisTrendChart :trend="analysis.trend" />
|
||||
<CostAnalysisComposition :composition="analysis.composition" />
|
||||
<CostAnalysisDetailTable
|
||||
:rows="analysis.detailRows"
|
||||
:loading="isAnalysisLoading"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<CostItemEditorDrawer
|
||||
:open="drawerState.open"
|
||||
:mode="drawerState.mode"
|
||||
:category="drawerState.category"
|
||||
:category-text="drawerCategoryText"
|
||||
:source-item="drawerState.sourceItem"
|
||||
:submitting="false"
|
||||
@close="closeDetailDrawer"
|
||||
@submit="handleSubmitDrawer"
|
||||
/>
|
||||
|
||||
<CostDetailDeleteModal
|
||||
:open="deleteModalState.open"
|
||||
:item-name="deleteModalState.item?.itemName"
|
||||
@cancel="closeDeleteModal"
|
||||
@confirm="confirmDeleteDetail"
|
||||
/>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
@import './styles/index.less';
|
||||
</style>
|
||||
@@ -1,146 +0,0 @@
|
||||
/**
|
||||
* 文件职责：成本分析区域样式。
|
||||
*/
|
||||
.fc-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fc-stat-card {
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 5%);
|
||||
}
|
||||
|
||||
.fc-stat-label {
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fc-stat-value {
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
|
||||
&.is-up {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
&.is-down {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
&.is-flat {
|
||||
color: rgb(0 0 0 / 65%);
|
||||
}
|
||||
}
|
||||
|
||||
.fc-section-title {
|
||||
padding-left: 10px;
|
||||
margin-bottom: 14px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
border-left: 3px solid #1677ff;
|
||||
}
|
||||
|
||||
.fc-chart-card,
|
||||
.fc-composition-card,
|
||||
.fc-table-card {
|
||||
padding: 18px;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 5%);
|
||||
}
|
||||
|
||||
.fc-trend-chart {
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
.fc-composition-body {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fc-composition-chart-wrap {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.fc-composition-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fc-composition-center {
|
||||
position: absolute;
|
||||
inset: 71px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.fc-composition-center-value {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fc-composition-center-label {
|
||||
font-size: 11px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fc-composition-legend {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.fc-composition-legend-item {
|
||||
display: grid;
|
||||
grid-template-columns: 10px 1fr auto auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.fc-composition-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.fc-composition-name {
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fc-composition-amount {
|
||||
min-width: 88px;
|
||||
color: rgb(0 0 0 / 65%);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.fc-composition-percent {
|
||||
min-width: 54px;
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.fc-total-amount {
|
||||
font-weight: 700;
|
||||
color: #1677ff;
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
/**
|
||||
* 文件职责：成本管理页面基础容器样式。
|
||||
*/
|
||||
.page-finance-cost {
|
||||
.ant-card {
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.fc-empty {
|
||||
padding: 36px 0;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
/**
|
||||
* 文件职责：成本明细抽屉与删除弹窗样式。
|
||||
*/
|
||||
.fc-full-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fc-drawer-footer {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.fc-delete-tip {
|
||||
margin: 4px 0 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.8;
|
||||
color: rgb(0 0 0 / 65%);
|
||||
|
||||
strong {
|
||||
margin: 0 4px;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
}
|
||||
@@ -1,153 +0,0 @@
|
||||
/**
|
||||
* 文件职责：成本录入区域样式。
|
||||
*/
|
||||
.fc-entry-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fc-entry-card {
|
||||
.ant-card-body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-entry-head {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding: 16px 18px;
|
||||
}
|
||||
|
||||
.fc-entry-icon {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
background: rgb(22 119 255 / 8%);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.fc-entry-meta {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.fc-entry-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fc-entry-ratio {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fc-entry-amount {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.fc-entry-currency {
|
||||
font-size: 13px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fc-entry-input {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.fc-entry-toggle {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fc-entry-detail {
|
||||
padding: 0 18px 16px;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.fc-entry-detail-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #f6f7f9;
|
||||
}
|
||||
|
||||
.fc-entry-item-name {
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
font-size: 13px;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fc-entry-item-value {
|
||||
display: inline-flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-width: 240px;
|
||||
}
|
||||
|
||||
.fc-entry-item-amount {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fc-entry-mul,
|
||||
.fc-entry-equal {
|
||||
font-size: 12px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fc-entry-item-actions {
|
||||
display: inline-flex;
|
||||
justify-content: flex-end;
|
||||
min-width: 104px;
|
||||
}
|
||||
|
||||
.fc-entry-add {
|
||||
padding: 0;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.fc-entry-empty {
|
||||
padding: 10px 0 2px;
|
||||
}
|
||||
|
||||
.fc-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
background: #f8f9fb;
|
||||
border: 1px solid #eef0f4;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.fc-summary-label {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fc-summary-right {
|
||||
display: inline-flex;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fc-summary-value {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
color: #1677ff;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
/**
|
||||
* 文件职责：成本管理页面样式聚合入口。
|
||||
*/
|
||||
@import './base.less';
|
||||
@import './layout.less';
|
||||
@import './entry.less';
|
||||
@import './analysis.less';
|
||||
@import './drawer.less';
|
||||
@import './responsive.less';
|
||||
@@ -1,86 +0,0 @@
|
||||
/**
|
||||
* 文件职责：成本管理页面布局与顶部工具条样式。
|
||||
*/
|
||||
.fc-toolbar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 16px;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.fc-toolbar-right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.fc-tab-segmented {
|
||||
.ant-segmented-item {
|
||||
min-width: 108px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-dimension-segmented {
|
||||
.ant-segmented-item {
|
||||
min-width: 92px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-store-select {
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.fc-month-picker {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fc-month-arrow {
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
color: rgb(0 0 0 / 65%);
|
||||
}
|
||||
|
||||
.fc-month-title {
|
||||
min-width: 100px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fc-month-input {
|
||||
width: 128px;
|
||||
}
|
||||
|
||||
.fc-entry-revenue {
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
color: rgb(0 0 0 / 65%);
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
|
||||
strong {
|
||||
margin-left: 6px;
|
||||
font-size: 15px;
|
||||
color: #1677ff;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-entry-panel,
|
||||
.fc-analysis-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
@@ -1,84 +0,0 @@
|
||||
/**
|
||||
* 文件职责：成本管理页面响应式适配样式。
|
||||
*/
|
||||
@media (max-width: 1280px) {
|
||||
.fc-stats {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.fc-composition-body {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.fc-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.fc-toolbar-right {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.fc-store-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fc-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.fc-composition-body {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fc-composition-chart-wrap {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.fc-entry-head {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.fc-entry-meta {
|
||||
width: calc(100% - 56px);
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.fc-entry-amount {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.fc-entry-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.fc-entry-toggle {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.fc-entry-detail-row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.fc-entry-item-value {
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.fc-entry-item-actions {
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fc-summary {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
/**
|
||||
* 文件职责：成本管理页面本地类型定义。
|
||||
*/
|
||||
import type {
|
||||
FinanceCostAnalysisDto,
|
||||
FinanceCostCategoryCode,
|
||||
FinanceCostCompositionDto,
|
||||
FinanceCostDimension,
|
||||
FinanceCostEntryCategoryDto,
|
||||
FinanceCostEntryDetailDto,
|
||||
FinanceCostTrendPointDto,
|
||||
} from '#/api/finance/cost';
|
||||
|
||||
/** 页面 Tab 键。 */
|
||||
export type FinanceCostTabKey = 'analysis' | 'entry';
|
||||
|
||||
/** 选项项。 */
|
||||
export interface OptionItem {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
/** 成本分类视图模型。 */
|
||||
export interface FinanceCostCategoryViewModel extends FinanceCostEntryCategoryDto {
|
||||
expanded: boolean;
|
||||
}
|
||||
|
||||
/** 录入区域状态。 */
|
||||
export interface FinanceCostEntryState {
|
||||
categories: FinanceCostCategoryViewModel[];
|
||||
costRate: number;
|
||||
monthRevenue: number;
|
||||
totalCost: number;
|
||||
}
|
||||
|
||||
/** 分析区域状态。 */
|
||||
export interface FinanceCostAnalysisState {
|
||||
composition: FinanceCostCompositionDto[];
|
||||
detailRows: FinanceCostAnalysisDto['detailRows'];
|
||||
stats: FinanceCostAnalysisDto['stats'];
|
||||
trend: FinanceCostTrendPointDto[];
|
||||
}
|
||||
|
||||
/** 明细抽屉模式。 */
|
||||
export type CostDetailDrawerMode = 'create' | 'edit';
|
||||
|
||||
/** 明细抽屉状态。 */
|
||||
export interface CostDetailDrawerState {
|
||||
category: FinanceCostCategoryCode;
|
||||
mode: CostDetailDrawerMode;
|
||||
open: boolean;
|
||||
sourceItem?: FinanceCostEntryDetailDto;
|
||||
}
|
||||
|
||||
/** 删除弹窗状态。 */
|
||||
export interface CostDeleteModalState {
|
||||
category: FinanceCostCategoryCode;
|
||||
item?: FinanceCostEntryDetailDto;
|
||||
open: boolean;
|
||||
}
|
||||
|
||||
/** 页面筛选状态。 */
|
||||
export interface FinanceCostFilterState {
|
||||
dimension: FinanceCostDimension;
|
||||
month: string;
|
||||
storeId: string;
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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' },
|
||||
];
|
||||
@@ -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,
|
||||
};
|
||||
}
|
||||
@@ -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';
|
||||
}
|
||||
@@ -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,
|
||||
};
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
/**
|
||||
* 文件职责：财务概览页面样式聚合入口。
|
||||
*/
|
||||
@import './base.less';
|
||||
@import './layout.less';
|
||||
@import './kpi.less';
|
||||
@import './charts.less';
|
||||
@import './table.less';
|
||||
@import './responsive.less';
|
||||
@@ -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%);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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,
|
||||
};
|
||||
@@ -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,
|
||||
};
|
||||
}
|
||||
@@ -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,
|
||||
};
|
||||
}
|
||||
@@ -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,
|
||||
};
|
||||
}
|
||||
@@ -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,
|
||||
};
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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,
|
||||
};
|
||||
}
|
||||
@@ -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>
|
||||
@@ -1,14 +0,0 @@
|
||||
/**
|
||||
* 文件职责：经营报表页面基础容器样式。
|
||||
*/
|
||||
.page-finance-report {
|
||||
.ant-card {
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.frp-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
/**
|
||||
* 文件职责：经营报表页面样式聚合入口。
|
||||
*/
|
||||
@import './base.less';
|
||||
@import './layout.less';
|
||||
@import './table.less';
|
||||
@import './drawer.less';
|
||||
@import './modal.less';
|
||||
@import './responsive.less';
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：到账查询结算账户信息条展示。
|
||||
*/
|
||||
import type { FinanceSettlementAccountDto } from '#/api/finance';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
interface Props {
|
||||
account: FinanceSettlementAccountDto | null;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const accountText = computed(() => {
|
||||
const bankName = props.account?.bankName?.trim();
|
||||
const accountNoMasked = props.account?.bankAccountNoMasked?.trim();
|
||||
|
||||
if (!bankName && !accountNoMasked) {
|
||||
return '--';
|
||||
}
|
||||
|
||||
return `${bankName || ''} ${accountNoMasked || ''}`.trim();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fst-account-bar" :class="{ 'is-loading': props.loading }">
|
||||
<IconifyIcon icon="lucide:landmark" class="fst-account-icon" />
|
||||
|
||||
<span>
|
||||
结算账户：<strong>{{ accountText }}</strong>
|
||||
</span>
|
||||
|
||||
<span class="fst-account-sep"></span>
|
||||
|
||||
<span>
|
||||
微信商户号：<strong>{{
|
||||
props.account?.wechatMerchantNoMasked || '--'
|
||||
}}</strong>
|
||||
</span>
|
||||
|
||||
<span class="fst-account-sep"></span>
|
||||
|
||||
<span>
|
||||
支付宝PID：<strong>{{ props.account?.alipayPidMasked || '--' }}</strong>
|
||||
</span>
|
||||
|
||||
<span class="fst-account-sep"></span>
|
||||
|
||||
<span>
|
||||
结算周期：<strong>{{
|
||||
props.account?.settlementPeriodText || '--'
|
||||
}}</strong>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,51 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：到账查询展开明细子表。
|
||||
*/
|
||||
import type { FinanceSettlementDetailItemDto } from '#/api/finance';
|
||||
|
||||
import {
|
||||
formatCurrency,
|
||||
formatPaidTime,
|
||||
} from '../composables/settlement-page/helpers';
|
||||
|
||||
interface Props {
|
||||
items: FinanceSettlementDetailItemDto[];
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fst-detail-wrap">
|
||||
<div class="fst-detail-title">交易明细（部分）</div>
|
||||
|
||||
<table class="fst-mini-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>订单号</th>
|
||||
<th>金额</th>
|
||||
<th>时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="props.loading">
|
||||
<td colspan="3">加载中...</td>
|
||||
</tr>
|
||||
<tr v-else-if="props.items.length === 0">
|
||||
<td colspan="3">暂无明细数据</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-for="item in props.items"
|
||||
v-else
|
||||
:key="`${item.orderNo}_${item.paidAt}`"
|
||||
>
|
||||
<td class="fst-mono">{{ item.orderNo }}</td>
|
||||
<td>{{ formatCurrency(item.amount) }}</td>
|
||||
<td>{{ formatPaidTime(item.paidAt) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,105 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：到账查询筛选栏（门店、日期、渠道、导出）。
|
||||
*/
|
||||
import type { FinanceSettlementFilterState, OptionItem } from '../types';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Button, Input, Select } from 'ant-design-vue';
|
||||
|
||||
import { SETTLEMENT_CHANNEL_OPTIONS } from '../composables/settlement-page/constants';
|
||||
|
||||
interface Props {
|
||||
canExport: boolean;
|
||||
filters: FinanceSettlementFilterState;
|
||||
isExporting: boolean;
|
||||
isStoreLoading: boolean;
|
||||
selectedStoreId: string;
|
||||
storeOptions: OptionItem[];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'export'): void;
|
||||
(event: 'search'): void;
|
||||
(event: 'update:channel', value: string): void;
|
||||
(event: 'update:endDate', value: string): void;
|
||||
(event: 'update:selectedStoreId', value: string): void;
|
||||
(event: 'update:startDate', value: string): void;
|
||||
}>();
|
||||
|
||||
function handleStoreChange(value: unknown) {
|
||||
if (typeof value === 'number' || typeof value === 'string') {
|
||||
emit('update:selectedStoreId', String(value));
|
||||
return;
|
||||
}
|
||||
|
||||
emit('update:selectedStoreId', '');
|
||||
}
|
||||
|
||||
function handleStartDateChange(value: string | undefined) {
|
||||
emit('update:startDate', String(value ?? ''));
|
||||
emit('search');
|
||||
}
|
||||
|
||||
function handleEndDateChange(value: string | undefined) {
|
||||
emit('update:endDate', String(value ?? ''));
|
||||
emit('search');
|
||||
}
|
||||
|
||||
function handleChannelChange(value: unknown) {
|
||||
emit('update:channel', String(value ?? 'all'));
|
||||
emit('search');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fst-toolbar">
|
||||
<Select
|
||||
class="fst-store-select"
|
||||
:value="props.selectedStoreId"
|
||||
placeholder="选择门店"
|
||||
:loading="props.isStoreLoading"
|
||||
:options="props.storeOptions"
|
||||
:disabled="props.isStoreLoading || props.storeOptions.length === 0"
|
||||
@update:value="(value) => handleStoreChange(value)"
|
||||
/>
|
||||
|
||||
<Input
|
||||
class="fst-date-input"
|
||||
type="date"
|
||||
:value="props.filters.startDate"
|
||||
@update:value="(value) => handleStartDateChange(value)"
|
||||
/>
|
||||
<span class="fst-date-sep">~</span>
|
||||
<Input
|
||||
class="fst-date-input"
|
||||
type="date"
|
||||
:value="props.filters.endDate"
|
||||
@update:value="(value) => handleEndDateChange(value)"
|
||||
/>
|
||||
|
||||
<Select
|
||||
class="fst-channel-select"
|
||||
:value="props.filters.channel"
|
||||
:options="SETTLEMENT_CHANNEL_OPTIONS"
|
||||
@update:value="(value) => handleChannelChange(value)"
|
||||
/>
|
||||
|
||||
<div class="fst-toolbar-right">
|
||||
<Button
|
||||
class="fst-export-btn"
|
||||
:disabled="!props.canExport || !props.selectedStoreId"
|
||||
:loading="props.isExporting"
|
||||
@click="emit('export')"
|
||||
>
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:download" />
|
||||
</template>
|
||||
导出
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,63 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：到账查询统计卡片展示。
|
||||
*/
|
||||
import type { FinanceSettlementStatsDto } from '#/api/finance';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import {
|
||||
formatCount,
|
||||
formatCurrency,
|
||||
} from '../composables/settlement-page/helpers';
|
||||
|
||||
interface Props {
|
||||
stats: FinanceSettlementStatsDto;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fst-stats">
|
||||
<div class="fst-stat-card">
|
||||
<div class="fst-stat-label">
|
||||
<IconifyIcon icon="lucide:circle-check" class="fst-stat-icon" />
|
||||
今日到账
|
||||
</div>
|
||||
<div class="fst-stat-value is-green">
|
||||
{{ formatCurrency(props.stats.todayArrivedAmount) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fst-stat-card">
|
||||
<div class="fst-stat-label">
|
||||
<IconifyIcon icon="lucide:calendar-minus" class="fst-stat-icon" />
|
||||
昨日到账
|
||||
</div>
|
||||
<div class="fst-stat-value">
|
||||
{{ formatCurrency(props.stats.yesterdayArrivedAmount) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fst-stat-card">
|
||||
<div class="fst-stat-label">
|
||||
<IconifyIcon icon="lucide:calendar-check" class="fst-stat-icon" />
|
||||
本月累计到账
|
||||
</div>
|
||||
<div class="fst-stat-value">
|
||||
{{ formatCurrency(props.stats.currentMonthArrivedAmount) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fst-stat-card">
|
||||
<div class="fst-stat-label">
|
||||
<IconifyIcon icon="lucide:receipt" class="fst-stat-icon" />
|
||||
本月交易笔数
|
||||
</div>
|
||||
<div class="fst-stat-value">
|
||||
{{ formatCount(props.stats.currentMonthTransactionCount) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,131 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：到账查询列表表格与展开明细。
|
||||
*/
|
||||
import type { TablePaginationConfig, TableProps } from 'ant-design-vue';
|
||||
|
||||
import type { FinanceSettlementDetailStateMap } from '../types';
|
||||
|
||||
import type { FinanceSettlementListItemDto } from '#/api/finance';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { Table } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
formatCurrency,
|
||||
getSettlementRowKey,
|
||||
resolveChannelDotClass,
|
||||
} from '../composables/settlement-page/helpers';
|
||||
import SettlementDetailTable from './SettlementDetailTable.vue';
|
||||
|
||||
interface PaginationState {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
detailStates: FinanceSettlementDetailStateMap;
|
||||
expandedRowKeys: string[];
|
||||
loading: boolean;
|
||||
pagination: PaginationState;
|
||||
rows: FinanceSettlementListItemDto[];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'expand', expanded: boolean, row: FinanceSettlementListItemDto): void;
|
||||
(event: 'pageChange', page: number, pageSize: number): void;
|
||||
}>();
|
||||
|
||||
const columns: TableProps['columns'] = [
|
||||
{
|
||||
title: '到账日期',
|
||||
dataIndex: 'arrivedDate',
|
||||
width: 170,
|
||||
},
|
||||
{
|
||||
title: '支付渠道',
|
||||
dataIndex: 'channelText',
|
||||
width: 190,
|
||||
},
|
||||
{
|
||||
title: '交易笔数',
|
||||
dataIndex: 'transactionCount',
|
||||
width: 130,
|
||||
},
|
||||
{
|
||||
title: '到账金额',
|
||||
dataIndex: 'arrivedAmount',
|
||||
align: 'right',
|
||||
width: 180,
|
||||
},
|
||||
];
|
||||
|
||||
const expandable = computed(() => ({
|
||||
expandedRowKeys: props.expandedRowKeys,
|
||||
onExpand: (expanded: boolean, row: FinanceSettlementListItemDto) => {
|
||||
emit('expand', expanded, row);
|
||||
},
|
||||
}));
|
||||
|
||||
function handleTableChange(next: TablePaginationConfig) {
|
||||
emit('pageChange', Number(next.current || 1), Number(next.pageSize || 20));
|
||||
}
|
||||
|
||||
function resolveDetailState(row: FinanceSettlementListItemDto) {
|
||||
return (
|
||||
props.detailStates[getSettlementRowKey(row)] ?? {
|
||||
loading: false,
|
||||
items: [],
|
||||
}
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fst-table-card">
|
||||
<Table
|
||||
:row-key="getSettlementRowKey"
|
||||
: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} 条`,
|
||||
}"
|
||||
:expandable="expandable"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'channelText'">
|
||||
<span class="fst-channel-icon">
|
||||
<span
|
||||
class="fst-channel-dot"
|
||||
:class="resolveChannelDotClass(String(record.channel))"
|
||||
></span>
|
||||
{{ record.channelText }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'arrivedAmount'">
|
||||
<span class="fst-amount">{{
|
||||
formatCurrency(Number(record.arrivedAmount || 0))
|
||||
}}</span>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template #expandedRowRender="{ record }">
|
||||
<SettlementDetailTable
|
||||
:loading="resolveDetailState(record).loading"
|
||||
:items="resolveDetailState(record).items"
|
||||
/>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,55 +0,0 @@
|
||||
import type { FinanceSettlementFilterState, OptionItem } from '../../types';
|
||||
|
||||
import type {
|
||||
FinanceSettlementAccountDto,
|
||||
FinanceSettlementChannelFilter,
|
||||
FinanceSettlementStatsDto,
|
||||
} from '#/api/finance';
|
||||
|
||||
/**
|
||||
* 文件职责：到账查询页面常量与默认状态定义。
|
||||
*/
|
||||
import { getTodayDateString } from './helpers';
|
||||
|
||||
/** 到账查询查看权限。 */
|
||||
export const FINANCE_SETTLEMENT_VIEW_PERMISSION =
|
||||
'tenant:finance:settlement:view';
|
||||
|
||||
/** 到账查询导出权限。 */
|
||||
export const FINANCE_SETTLEMENT_EXPORT_PERMISSION =
|
||||
'tenant:finance:settlement:export';
|
||||
|
||||
/** 到账渠道筛选项。 */
|
||||
export const SETTLEMENT_CHANNEL_OPTIONS: OptionItem[] = [
|
||||
{ label: '全部渠道', value: 'all' },
|
||||
{ label: '微信支付', value: 'wechat' },
|
||||
{ label: '支付宝', value: 'alipay' },
|
||||
];
|
||||
|
||||
/** 默认筛选状态。 */
|
||||
export function createDefaultFilters(): FinanceSettlementFilterState {
|
||||
const today = getTodayDateString();
|
||||
return {
|
||||
channel: 'all' as FinanceSettlementChannelFilter,
|
||||
startDate: today,
|
||||
endDate: today,
|
||||
};
|
||||
}
|
||||
|
||||
/** 默认统计数据。 */
|
||||
export const DEFAULT_STATS: FinanceSettlementStatsDto = {
|
||||
todayArrivedAmount: 0,
|
||||
yesterdayArrivedAmount: 0,
|
||||
currentMonthArrivedAmount: 0,
|
||||
currentMonthTransactionCount: 0,
|
||||
};
|
||||
|
||||
/** 默认账户信息。 */
|
||||
export const DEFAULT_ACCOUNT: FinanceSettlementAccountDto = {
|
||||
bankName: '',
|
||||
bankAccountName: '',
|
||||
bankAccountNoMasked: '',
|
||||
wechatMerchantNoMasked: '',
|
||||
alipayPidMasked: '',
|
||||
settlementPeriodText: '',
|
||||
};
|
||||
@@ -1,133 +0,0 @@
|
||||
import type {
|
||||
FinanceSettlementFilterState,
|
||||
FinanceSettlementPaginationState,
|
||||
} from '../../types';
|
||||
|
||||
import type {
|
||||
FinanceSettlementAccountDto,
|
||||
FinanceSettlementListItemDto,
|
||||
FinanceSettlementStatsDto,
|
||||
} from '#/api/finance';
|
||||
import type { StoreListItemDto } from '#/api/store';
|
||||
|
||||
/**
|
||||
* 文件职责：到账查询页面数据加载动作。
|
||||
*/
|
||||
import {
|
||||
getFinanceSettlementAccountApi,
|
||||
getFinanceSettlementListApi,
|
||||
getFinanceSettlementStatsApi,
|
||||
} from '#/api/finance';
|
||||
import { getStoreListApi } from '#/api/store';
|
||||
|
||||
import { buildListQueryPayload } from './helpers';
|
||||
|
||||
interface DataActionOptions {
|
||||
account: { value: FinanceSettlementAccountDto | null };
|
||||
filters: FinanceSettlementFilterState;
|
||||
isAccountLoading: { value: boolean };
|
||||
isListLoading: { value: boolean };
|
||||
isStatsLoading: { value: boolean };
|
||||
isStoreLoading: { value: boolean };
|
||||
pagination: FinanceSettlementPaginationState;
|
||||
rows: { value: FinanceSettlementListItemDto[] };
|
||||
selectedStoreId: { value: string };
|
||||
stats: FinanceSettlementStatsDto;
|
||||
stores: { value: StoreListItemDto[] };
|
||||
}
|
||||
|
||||
/** 创建数据相关动作。 */
|
||||
export function createDataActions(options: DataActionOptions) {
|
||||
function resetStats() {
|
||||
options.stats.todayArrivedAmount = 0;
|
||||
options.stats.yesterdayArrivedAmount = 0;
|
||||
options.stats.currentMonthArrivedAmount = 0;
|
||||
options.stats.currentMonthTransactionCount = 0;
|
||||
}
|
||||
|
||||
function clearPageData() {
|
||||
options.rows.value = [];
|
||||
options.pagination.total = 0;
|
||||
resetStats();
|
||||
}
|
||||
|
||||
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 loadAccount() {
|
||||
options.isAccountLoading.value = true;
|
||||
try {
|
||||
options.account.value = await getFinanceSettlementAccountApi();
|
||||
} finally {
|
||||
options.isAccountLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadPageData() {
|
||||
if (!options.selectedStoreId.value) {
|
||||
clearPageData();
|
||||
return;
|
||||
}
|
||||
|
||||
const storeId = options.selectedStoreId.value;
|
||||
const listPayload = buildListQueryPayload(
|
||||
storeId,
|
||||
options.filters,
|
||||
options.pagination.page,
|
||||
options.pagination.pageSize,
|
||||
);
|
||||
|
||||
options.isListLoading.value = true;
|
||||
options.isStatsLoading.value = true;
|
||||
try {
|
||||
const [listResult, statsResult] = await Promise.all([
|
||||
getFinanceSettlementListApi(listPayload),
|
||||
getFinanceSettlementStatsApi({ storeId }),
|
||||
]);
|
||||
|
||||
options.rows.value = listResult.items;
|
||||
options.pagination.total = listResult.total;
|
||||
options.pagination.page = listResult.page;
|
||||
options.pagination.pageSize = listResult.pageSize;
|
||||
|
||||
options.stats.todayArrivedAmount = statsResult.todayArrivedAmount;
|
||||
options.stats.yesterdayArrivedAmount = statsResult.yesterdayArrivedAmount;
|
||||
options.stats.currentMonthArrivedAmount =
|
||||
statsResult.currentMonthArrivedAmount;
|
||||
options.stats.currentMonthTransactionCount =
|
||||
statsResult.currentMonthTransactionCount;
|
||||
} finally {
|
||||
options.isListLoading.value = false;
|
||||
options.isStatsLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
clearPageData,
|
||||
loadAccount,
|
||||
loadPageData,
|
||||
loadStores,
|
||||
resetStats,
|
||||
};
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
import type {
|
||||
FinanceSettlementDetailStateMap,
|
||||
FinanceSettlementExpandAction,
|
||||
} from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：到账查询展开明细动作。
|
||||
*/
|
||||
import { getFinanceSettlementDetailApi } from '#/api/finance';
|
||||
|
||||
import { getSettlementRowKey } from './helpers';
|
||||
|
||||
interface DetailActionOptions {
|
||||
detailStates: FinanceSettlementDetailStateMap;
|
||||
expandedRowKeys: { value: string[] };
|
||||
selectedStoreId: { value: string };
|
||||
}
|
||||
|
||||
/** 创建展开明细动作。 */
|
||||
export function createDetailActions(options: DetailActionOptions) {
|
||||
function clearDetailStates() {
|
||||
options.expandedRowKeys.value = [];
|
||||
for (const key of Object.keys(options.detailStates)) {
|
||||
Reflect.deleteProperty(options.detailStates, key);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleExpand(action: FinanceSettlementExpandAction) {
|
||||
const key = getSettlementRowKey(action.row);
|
||||
|
||||
if (!action.expanded) {
|
||||
options.expandedRowKeys.value = options.expandedRowKeys.value.filter(
|
||||
(item) => item !== key,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!options.selectedStoreId.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!options.expandedRowKeys.value.includes(key)) {
|
||||
options.expandedRowKeys.value = [...options.expandedRowKeys.value, key];
|
||||
}
|
||||
|
||||
const currentState = options.detailStates[key] ?? {
|
||||
loading: false,
|
||||
items: [],
|
||||
};
|
||||
|
||||
if (currentState.loading || currentState.items.length > 0) {
|
||||
options.detailStates[key] = currentState;
|
||||
return;
|
||||
}
|
||||
|
||||
currentState.loading = true;
|
||||
options.detailStates[key] = currentState;
|
||||
|
||||
try {
|
||||
const result = await getFinanceSettlementDetailApi({
|
||||
storeId: options.selectedStoreId.value,
|
||||
arrivedDate: action.row.arrivedDate,
|
||||
channel: action.row.channel,
|
||||
});
|
||||
|
||||
currentState.items = result.items;
|
||||
} finally {
|
||||
currentState.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
clearDetailStates,
|
||||
handleExpand,
|
||||
};
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import type { FinanceSettlementFilterState } from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：到账查询导出动作。
|
||||
*/
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import { exportFinanceSettlementCsvApi } from '#/api/finance';
|
||||
|
||||
import {
|
||||
buildFilterQueryPayload,
|
||||
downloadBase64File,
|
||||
isDateRangeInvalid,
|
||||
} from './helpers';
|
||||
|
||||
interface ExportActionOptions {
|
||||
canExport: { value: boolean };
|
||||
filters: FinanceSettlementFilterState;
|
||||
isExporting: { value: boolean };
|
||||
selectedStoreId: { value: string };
|
||||
}
|
||||
|
||||
/** 创建导出动作。 */
|
||||
export function createExportActions(options: ExportActionOptions) {
|
||||
async function handleExport() {
|
||||
if (!options.canExport.value || !options.selectedStoreId.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isDateRangeInvalid(options.filters)) {
|
||||
message.warning('开始日期不能晚于结束日期');
|
||||
return;
|
||||
}
|
||||
|
||||
options.isExporting.value = true;
|
||||
try {
|
||||
const payload = buildFilterQueryPayload(
|
||||
options.selectedStoreId.value,
|
||||
options.filters,
|
||||
);
|
||||
const result = await exportFinanceSettlementCsvApi(payload);
|
||||
downloadBase64File(result.fileName, result.fileContentBase64);
|
||||
message.success(`导出成功，共 ${result.totalCount} 条记录`);
|
||||
} finally {
|
||||
options.isExporting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
handleExport,
|
||||
};
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
import type {
|
||||
FinanceSettlementFilterState,
|
||||
FinanceSettlementPaginationState,
|
||||
} from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：到账查询页面筛选与分页行为。
|
||||
*/
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import { isDateRangeInvalid } from './helpers';
|
||||
|
||||
interface FilterActionOptions {
|
||||
filters: FinanceSettlementFilterState;
|
||||
loadPageData: () => Promise<void>;
|
||||
pagination: FinanceSettlementPaginationState;
|
||||
}
|
||||
|
||||
/** 创建筛选行为。 */
|
||||
export function createFilterActions(options: FilterActionOptions) {
|
||||
function setChannel(value: string) {
|
||||
options.filters.channel = (value ||
|
||||
'all') as FinanceSettlementFilterState['channel'];
|
||||
}
|
||||
|
||||
function setStartDate(value: string) {
|
||||
options.filters.startDate = value;
|
||||
}
|
||||
|
||||
function setEndDate(value: string) {
|
||||
options.filters.endDate = value;
|
||||
}
|
||||
|
||||
async function handleSearch() {
|
||||
if (isDateRangeInvalid(options.filters)) {
|
||||
message.warning('开始日期不能晚于结束日期');
|
||||
return;
|
||||
}
|
||||
|
||||
options.pagination.page = 1;
|
||||
await options.loadPageData();
|
||||
}
|
||||
|
||||
async function handlePageChange(page: number, pageSize: number) {
|
||||
options.pagination.page = page;
|
||||
options.pagination.pageSize = pageSize;
|
||||
await options.loadPageData();
|
||||
}
|
||||
|
||||
return {
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
setChannel,
|
||||
setEndDate,
|
||||
setStartDate,
|
||||
};
|
||||
}
|
||||
@@ -1,134 +0,0 @@
|
||||
import type {
|
||||
FinanceSettlementFilterState,
|
||||
FinanceSettlementListQueryPayload,
|
||||
FinanceSettlementQueryPayload,
|
||||
} from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：到账查询页面纯函数与数据转换工具。
|
||||
*/
|
||||
import type {
|
||||
FinanceSettlementChannelFilter,
|
||||
FinanceSettlementListItemDto,
|
||||
} from '#/api/finance';
|
||||
|
||||
function formatDate(date: Date) {
|
||||
const year = date.getFullYear();
|
||||
const month = `${date.getMonth() + 1}`.padStart(2, '0');
|
||||
const day = `${date.getDate()}`.padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
function normalizeChannel(value: FinanceSettlementChannelFilter) {
|
||||
return value === 'all' ? undefined : value;
|
||||
}
|
||||
|
||||
function decodeBase64ToBlob(base64: 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: 'text/csv;charset=utf-8;' });
|
||||
}
|
||||
|
||||
/** 获取今天日期字符串（yyyy-MM-dd）。 */
|
||||
export function getTodayDateString() {
|
||||
return formatDate(new Date());
|
||||
}
|
||||
|
||||
/** 构建到账筛选请求。 */
|
||||
export function buildFilterQueryPayload(
|
||||
storeId: string,
|
||||
filters: FinanceSettlementFilterState,
|
||||
): FinanceSettlementQueryPayload {
|
||||
return {
|
||||
storeId,
|
||||
startDate: filters.startDate || undefined,
|
||||
endDate: filters.endDate || undefined,
|
||||
channel: normalizeChannel(filters.channel),
|
||||
};
|
||||
}
|
||||
|
||||
/** 构建到账列表请求。 */
|
||||
export function buildListQueryPayload(
|
||||
storeId: string,
|
||||
filters: FinanceSettlementFilterState,
|
||||
page: number,
|
||||
pageSize: number,
|
||||
): FinanceSettlementListQueryPayload {
|
||||
return {
|
||||
...buildFilterQueryPayload(storeId, filters),
|
||||
page,
|
||||
pageSize,
|
||||
};
|
||||
}
|
||||
|
||||
/** 判断日期范围是否合法。 */
|
||||
export function isDateRangeInvalid(filters: FinanceSettlementFilterState) {
|
||||
if (!filters.startDate || !filters.endDate) {
|
||||
return false;
|
||||
}
|
||||
return filters.startDate > filters.endDate;
|
||||
}
|
||||
|
||||
/** 货币格式化（人民币）。 */
|
||||
export function formatCurrency(value: number) {
|
||||
return new Intl.NumberFormat('zh-CN', {
|
||||
style: 'currency',
|
||||
currency: 'CNY',
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
}).format(Number.isFinite(value) ? value : 0);
|
||||
}
|
||||
|
||||
/** 数值格式化（千分位整数）。 */
|
||||
export function formatCount(value: number) {
|
||||
return new Intl.NumberFormat('zh-CN', {
|
||||
maximumFractionDigits: 0,
|
||||
}).format(Number.isFinite(value) ? value : 0);
|
||||
}
|
||||
|
||||
/** 表格行唯一键。 */
|
||||
export function getSettlementRowKey(row: FinanceSettlementListItemDto) {
|
||||
return `${row.arrivedDate}_${row.channel}`;
|
||||
}
|
||||
|
||||
/** 到账渠道圆点类名。 */
|
||||
export function resolveChannelDotClass(channel: string) {
|
||||
return channel === 'wechat' ? 'is-wechat' : 'is-alipay';
|
||||
}
|
||||
|
||||
/** 明细支付时间格式化（HH:mm）。 */
|
||||
export function formatPaidTime(value: string) {
|
||||
const normalized = String(value || '').trim();
|
||||
if (!normalized) {
|
||||
return '--';
|
||||
}
|
||||
|
||||
const separatorIndex = normalized.indexOf(' ');
|
||||
if (separatorIndex !== -1 && normalized.length >= separatorIndex + 6) {
|
||||
return normalized.slice(separatorIndex + 1, separatorIndex + 6);
|
||||
}
|
||||
|
||||
const timePrefix = normalized.match(/^\d{2}:\d{2}/);
|
||||
if (timePrefix?.[0]) {
|
||||
return timePrefix[0];
|
||||
}
|
||||
|
||||
return normalized;
|
||||
}
|
||||
|
||||
/** 下载 Base64 编码文件。 */
|
||||
export function downloadBase64File(
|
||||
fileName: string,
|
||||
fileContentBase64: string,
|
||||
) {
|
||||
const blob = decodeBase64ToBlob(fileContentBase64);
|
||||
const url = URL.createObjectURL(blob);
|
||||
const anchor = document.createElement('a');
|
||||
anchor.href = url;
|
||||
anchor.download = fileName;
|
||||
anchor.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
@@ -1,201 +0,0 @@
|
||||
import type { FinanceSettlementDetailStateMap } from '../types';
|
||||
|
||||
/**
|
||||
* 文件职责：到账查询页面状态与动作编排。
|
||||
*/
|
||||
import type {
|
||||
FinanceSettlementAccountDto,
|
||||
FinanceSettlementListItemDto,
|
||||
FinanceSettlementStatsDto,
|
||||
} from '#/api/finance';
|
||||
import type { StoreListItemDto } from '#/api/store';
|
||||
|
||||
import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue';
|
||||
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
|
||||
import {
|
||||
createDefaultFilters,
|
||||
DEFAULT_STATS,
|
||||
FINANCE_SETTLEMENT_EXPORT_PERMISSION,
|
||||
FINANCE_SETTLEMENT_VIEW_PERMISSION,
|
||||
} from './settlement-page/constants';
|
||||
import { createDataActions } from './settlement-page/data-actions';
|
||||
import { createDetailActions } from './settlement-page/detail-actions';
|
||||
import { createExportActions } from './settlement-page/export-actions';
|
||||
import { createFilterActions } from './settlement-page/filter-actions';
|
||||
|
||||
/** 创建到账查询页面组合状态。 */
|
||||
export function useFinanceSettlementPage() {
|
||||
const accessStore = useAccessStore();
|
||||
|
||||
const stores = ref<StoreListItemDto[]>([]);
|
||||
const selectedStoreId = ref('');
|
||||
const isStoreLoading = ref(false);
|
||||
|
||||
const filters = reactive(createDefaultFilters());
|
||||
const rows = ref<FinanceSettlementListItemDto[]>([]);
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
const stats = reactive<FinanceSettlementStatsDto>({ ...DEFAULT_STATS });
|
||||
const account = ref<FinanceSettlementAccountDto | null>(null);
|
||||
|
||||
const isListLoading = ref(false);
|
||||
const isStatsLoading = ref(false);
|
||||
const isAccountLoading = ref(false);
|
||||
const isExporting = ref(false);
|
||||
|
||||
const expandedRowKeys = ref<string[]>([]);
|
||||
const detailStates = reactive<FinanceSettlementDetailStateMap>({});
|
||||
|
||||
const storeOptions = computed(() =>
|
||||
stores.value.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
})),
|
||||
);
|
||||
|
||||
const accessCodeSet = computed(
|
||||
() => new Set((accessStore.accessCodes ?? []).map(String)),
|
||||
);
|
||||
|
||||
const canView = computed(() =>
|
||||
accessCodeSet.value.has(FINANCE_SETTLEMENT_VIEW_PERMISSION),
|
||||
);
|
||||
|
||||
const canExport = computed(() =>
|
||||
accessCodeSet.value.has(FINANCE_SETTLEMENT_EXPORT_PERMISSION),
|
||||
);
|
||||
|
||||
const { clearPageData, loadAccount, loadPageData, loadStores, resetStats } =
|
||||
createDataActions({
|
||||
stores,
|
||||
selectedStoreId,
|
||||
filters,
|
||||
rows,
|
||||
pagination,
|
||||
stats,
|
||||
account,
|
||||
isStoreLoading,
|
||||
isListLoading,
|
||||
isStatsLoading,
|
||||
isAccountLoading,
|
||||
});
|
||||
|
||||
const {
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
setChannel,
|
||||
setEndDate,
|
||||
setStartDate,
|
||||
} = createFilterActions({
|
||||
filters,
|
||||
pagination,
|
||||
loadPageData,
|
||||
});
|
||||
|
||||
const { clearDetailStates, handleExpand } = createDetailActions({
|
||||
selectedStoreId,
|
||||
expandedRowKeys,
|
||||
detailStates,
|
||||
});
|
||||
|
||||
const { handleExport } = createExportActions({
|
||||
canExport,
|
||||
selectedStoreId,
|
||||
filters,
|
||||
isExporting,
|
||||
});
|
||||
|
||||
function setSelectedStoreId(value: string) {
|
||||
selectedStoreId.value = value;
|
||||
}
|
||||
|
||||
function clearByPermission() {
|
||||
stores.value = [];
|
||||
selectedStoreId.value = '';
|
||||
account.value = null;
|
||||
clearPageData();
|
||||
clearDetailStates();
|
||||
resetStats();
|
||||
}
|
||||
|
||||
watch(selectedStoreId, async (storeId) => {
|
||||
clearDetailStates();
|
||||
|
||||
if (!storeId) {
|
||||
clearPageData();
|
||||
return;
|
||||
}
|
||||
|
||||
pagination.page = 1;
|
||||
await loadPageData();
|
||||
});
|
||||
|
||||
watch(canView, async (value, oldValue) => {
|
||||
if (value === oldValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!value) {
|
||||
clearByPermission();
|
||||
return;
|
||||
}
|
||||
|
||||
await Promise.all([loadStores(), loadAccount()]);
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
if (!canView.value) {
|
||||
clearByPermission();
|
||||
return;
|
||||
}
|
||||
|
||||
await Promise.all([loadStores(), loadAccount()]);
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
if (!canView.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (stores.value.length === 0 || !selectedStoreId.value) {
|
||||
void loadStores();
|
||||
}
|
||||
|
||||
if (!account.value && !isAccountLoading.value) {
|
||||
void loadAccount();
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
account,
|
||||
canExport,
|
||||
canView,
|
||||
detailStates,
|
||||
expandedRowKeys,
|
||||
filters,
|
||||
handleExpand,
|
||||
handleExport,
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
isAccountLoading,
|
||||
isExporting,
|
||||
isListLoading,
|
||||
isStatsLoading,
|
||||
isStoreLoading,
|
||||
pagination,
|
||||
rows,
|
||||
selectedStoreId,
|
||||
setChannel,
|
||||
setEndDate,
|
||||
setSelectedStoreId,
|
||||
setStartDate,
|
||||
stats,
|
||||
storeOptions,
|
||||
};
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：财务中心到账查询页面入口编排。
|
||||
*/
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { Empty } from 'ant-design-vue';
|
||||
|
||||
import SettlementAccountBar from './components/SettlementAccountBar.vue';
|
||||
import SettlementFilterBar from './components/SettlementFilterBar.vue';
|
||||
import SettlementStatsCards from './components/SettlementStatsCards.vue';
|
||||
import SettlementTableCard from './components/SettlementTableCard.vue';
|
||||
import { useFinanceSettlementPage } from './composables/useFinanceSettlementPage';
|
||||
|
||||
const {
|
||||
account,
|
||||
canExport,
|
||||
canView,
|
||||
detailStates,
|
||||
expandedRowKeys,
|
||||
filters,
|
||||
handleExpand,
|
||||
handleExport,
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
isAccountLoading,
|
||||
isExporting,
|
||||
isListLoading,
|
||||
isStoreLoading,
|
||||
pagination,
|
||||
rows,
|
||||
selectedStoreId,
|
||||
setChannel,
|
||||
setEndDate,
|
||||
setSelectedStoreId,
|
||||
setStartDate,
|
||||
stats,
|
||||
storeOptions,
|
||||
} = useFinanceSettlementPage();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page title="到账查询" content-class="page-finance-settlement">
|
||||
<div class="fst-page">
|
||||
<template v-if="canView">
|
||||
<SettlementStatsCards :stats="stats" />
|
||||
|
||||
<SettlementAccountBar :account="account" :loading="isAccountLoading" />
|
||||
|
||||
<SettlementFilterBar
|
||||
:selected-store-id="selectedStoreId"
|
||||
:store-options="storeOptions"
|
||||
:is-store-loading="isStoreLoading"
|
||||
:filters="filters"
|
||||
:can-export="canExport"
|
||||
:is-exporting="isExporting"
|
||||
@update:selected-store-id="setSelectedStoreId"
|
||||
@update:start-date="setStartDate"
|
||||
@update:end-date="setEndDate"
|
||||
@update:channel="setChannel"
|
||||
@search="handleSearch"
|
||||
@export="handleExport"
|
||||
/>
|
||||
|
||||
<SettlementTableCard
|
||||
:rows="rows"
|
||||
:loading="isListLoading"
|
||||
:pagination="pagination"
|
||||
:expanded-row-keys="expandedRowKeys"
|
||||
:detail-states="detailStates"
|
||||
@expand="(expanded, row) => handleExpand({ expanded, row })"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<Empty v-else description="暂无到账查询页面访问权限" />
|
||||
</div>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
@import './styles/index.less';
|
||||
</style>
|
||||
@@ -1,18 +0,0 @@
|
||||
/**
|
||||
* 文件职责：到账查询页面基础容器样式。
|
||||
*/
|
||||
.page-finance-settlement {
|
||||
.ant-card {
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.fst-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fst-mono {
|
||||
font-family: ui-monospace, sfmono-regular, menlo, consolas, monospace;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
/**
|
||||
* 文件职责：到账查询页面样式聚合入口。
|
||||
*/
|
||||
@import './base.less';
|
||||
@import './layout.less';
|
||||
@import './table.less';
|
||||
@import './responsive.less';
|
||||
@@ -1,134 +0,0 @@
|
||||
/**
|
||||
* 文件职责：到账查询页面布局与筛选区域样式。
|
||||
*/
|
||||
.fst-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fst-stat-card {
|
||||
padding: 18px 20px;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 6px 14px rgb(15 23 42 / 10%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
.fst-stat-label {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
font-size: 13px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fst-stat-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.fst-stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
|
||||
&.is-green {
|
||||
color: #52c41a;
|
||||
}
|
||||
}
|
||||
|
||||
.fst-account-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
padding: 14px 20px;
|
||||
font-size: 13px;
|
||||
color: rgb(0 0 0 / 65%);
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
|
||||
|
||||
&.is-loading {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
}
|
||||
|
||||
.fst-account-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.fst-account-sep {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.fst-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 14px 18px;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
|
||||
|
||||
.fst-store-select {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.fst-date-input {
|
||||
width: 145px;
|
||||
}
|
||||
|
||||
.fst-channel-select {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.fst-date-sep {
|
||||
font-size: 13px;
|
||||
line-height: 32px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fst-toolbar-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.fst-export-btn {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.ant-select-selector,
|
||||
.ant-input,
|
||||
.ant-input-affix-wrapper {
|
||||
height: 32px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper .ant-input {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
/**
|
||||
* 文件职责：到账查询页面响应式样式。
|
||||
*/
|
||||
@media (max-width: 1600px) {
|
||||
.fst-stats {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.fst-account-sep {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.fst-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.fst-toolbar {
|
||||
padding: 14px 12px;
|
||||
|
||||
.fst-store-select,
|
||||
.fst-date-input,
|
||||
.fst-channel-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fst-date-sep {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fst-toolbar-right {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.fst-export-btn {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.fst-detail-wrap {
|
||||
padding: 12px 12px 12px 24px;
|
||||
}
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
/**
|
||||
* 文件职责：到账查询表格与展开明细样式。
|
||||
*/
|
||||
.fst-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;
|
||||
}
|
||||
|
||||
.ant-table-expanded-row > td {
|
||||
padding: 0 !important;
|
||||
background: #f8f9fb !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination {
|
||||
margin: 14px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.fst-channel-icon {
|
||||
display: inline-flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fst-channel-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
|
||||
&.is-wechat {
|
||||
background: #07c160;
|
||||
}
|
||||
|
||||
&.is-alipay {
|
||||
background: #1677ff;
|
||||
}
|
||||
}
|
||||
|
||||
.fst-amount {
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fst-detail-wrap {
|
||||
padding: 14px 20px 14px 40px;
|
||||
}
|
||||
|
||||
.fst-detail-title {
|
||||
padding-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
border-left: 3px solid #1677ff;
|
||||
}
|
||||
|
||||
.fst-mini-table {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
border-collapse: collapse;
|
||||
|
||||
th {
|
||||
padding: 8px 10px;
|
||||
font-weight: 500;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
text-align: left;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 8px 10px;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tbody tr td[colspan] {
|
||||
color: rgb(0 0 0 / 45%);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
/**
|
||||
* 文件职责：到账查询页面本地状态类型定义。
|
||||
*/
|
||||
import type {
|
||||
FinanceSettlementChannelFilter,
|
||||
FinanceSettlementDetailItemDto,
|
||||
FinanceSettlementListItemDto,
|
||||
} from '#/api/finance';
|
||||
|
||||
/** 到账查询筛选状态。 */
|
||||
export interface FinanceSettlementFilterState {
|
||||
channel: FinanceSettlementChannelFilter;
|
||||
endDate: string;
|
||||
startDate: string;
|
||||
}
|
||||
|
||||
/** 到账查询分页状态。 */
|
||||
export interface FinanceSettlementPaginationState {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
/** 通用选项项。 */
|
||||
export interface OptionItem {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
/** 到账筛选请求负载。 */
|
||||
export interface FinanceSettlementQueryPayload {
|
||||
channel?: Exclude<FinanceSettlementChannelFilter, 'all'>;
|
||||
endDate?: string;
|
||||
startDate?: string;
|
||||
storeId: string;
|
||||
}
|
||||
|
||||
/** 到账列表请求负载。 */
|
||||
export interface FinanceSettlementListQueryPayload extends FinanceSettlementQueryPayload {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
}
|
||||
|
||||
/** 展开行明细状态。 */
|
||||
export interface FinanceSettlementDetailState {
|
||||
items: FinanceSettlementDetailItemDto[];
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
/** 展开行明细缓存映射。 */
|
||||
export type FinanceSettlementDetailStateMap = Record<
|
||||
string,
|
||||
FinanceSettlementDetailState
|
||||
>;
|
||||
|
||||
/** 表格展开动作参数。 */
|
||||
export interface FinanceSettlementExpandAction {
|
||||
expanded: boolean;
|
||||
row: FinanceSettlementListItemDto;
|
||||
}
|
||||
@@ -12,11 +12,9 @@ interface Props {
|
||||
freeDeliveryThreshold: null | number;
|
||||
isSaving: boolean;
|
||||
minimumOrderAmount: number;
|
||||
platformServiceRate: number;
|
||||
onSetBaseDeliveryFee: (value: number) => void;
|
||||
onSetFreeDeliveryThreshold: (value: null | number) => void;
|
||||
onSetMinimumOrderAmount: (value: number) => void;
|
||||
onSetPlatformServiceRate: (value: number) => void;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
@@ -87,31 +85,6 @@ function toNumber(value: null | number | string, fallback = 0) {
|
||||
<div class="fees-hint">每笔订单默认收取的配送费</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">
|
||||
<label>免配送费门槛</label>
|
||||
<div class="fees-input-row">
|
||||
|
||||
@@ -62,10 +62,6 @@ export function createDataActions(options: CreateDataActionsOptions) {
|
||||
0,
|
||||
);
|
||||
options.form.baseDeliveryFee = normalizeMoney(next.baseDeliveryFee, 0);
|
||||
options.form.platformServiceRate = normalizeMoney(
|
||||
next.platformServiceRate,
|
||||
0,
|
||||
);
|
||||
options.form.freeDeliveryThreshold =
|
||||
next.freeDeliveryThreshold === null
|
||||
? null
|
||||
@@ -113,7 +109,6 @@ export function createDataActions(options: CreateDataActionsOptions) {
|
||||
return {
|
||||
minimumOrderAmount: normalizeMoney(source?.minimumOrderAmount ?? 0, 0),
|
||||
baseDeliveryFee: normalizeMoney(source?.baseDeliveryFee ?? 0, 0),
|
||||
platformServiceRate: normalizeMoney(source?.platformServiceRate ?? 0, 0),
|
||||
freeDeliveryThreshold:
|
||||
source?.freeDeliveryThreshold === null ||
|
||||
source?.freeDeliveryThreshold === undefined
|
||||
@@ -135,7 +130,6 @@ export function createDataActions(options: CreateDataActionsOptions) {
|
||||
storeId,
|
||||
minimumOrderAmount: options.form.minimumOrderAmount,
|
||||
baseDeliveryFee: options.form.baseDeliveryFee,
|
||||
platformServiceRate: options.form.platformServiceRate,
|
||||
freeDeliveryThreshold: options.form.freeDeliveryThreshold,
|
||||
packagingFeeMode: options.form.packagingFeeMode,
|
||||
orderPackagingFeeMode: options.form.orderPackagingFeeMode,
|
||||
|
||||
@@ -26,7 +26,6 @@ export function cloneFeesForm(source: StoreFeesFormState): StoreFeesFormState {
|
||||
return {
|
||||
minimumOrderAmount: source.minimumOrderAmount,
|
||||
baseDeliveryFee: source.baseDeliveryFee,
|
||||
platformServiceRate: source.platformServiceRate,
|
||||
freeDeliveryThreshold: source.freeDeliveryThreshold,
|
||||
packagingFeeMode: source.packagingFeeMode,
|
||||
orderPackagingFeeMode: source.orderPackagingFeeMode,
|
||||
|
||||
@@ -36,7 +36,6 @@ import { createPackagingActions } from './fees-page/packaging-actions';
|
||||
const EMPTY_FEES_SETTINGS: StoreFeesFormState = {
|
||||
minimumOrderAmount: 0,
|
||||
baseDeliveryFee: 0,
|
||||
platformServiceRate: 0,
|
||||
freeDeliveryThreshold: null,
|
||||
packagingFeeMode: 'order',
|
||||
orderPackagingFeeMode: 'fixed',
|
||||
@@ -208,10 +207,6 @@ export function useStoreFeesPage() {
|
||||
form.baseDeliveryFee = normalizeMoney(value, form.baseDeliveryFee);
|
||||
}
|
||||
|
||||
function setPlatformServiceRate(value: number) {
|
||||
form.platformServiceRate = normalizeMoney(value, form.platformServiceRate);
|
||||
}
|
||||
|
||||
function setFreeDeliveryThreshold(value: null | number) {
|
||||
if (value === null || value === undefined) {
|
||||
form.freeDeliveryThreshold = null;
|
||||
@@ -306,7 +301,6 @@ export function useStoreFeesPage() {
|
||||
const source = snapshot.value;
|
||||
form.minimumOrderAmount = source.minimumOrderAmount;
|
||||
form.baseDeliveryFee = source.baseDeliveryFee;
|
||||
form.platformServiceRate = source.platformServiceRate;
|
||||
form.freeDeliveryThreshold = source.freeDeliveryThreshold;
|
||||
message.success('已重置起送与配送费');
|
||||
}
|
||||
@@ -455,7 +449,6 @@ export function useStoreFeesPage() {
|
||||
setFixedPackagingFee,
|
||||
setFreeDeliveryThreshold,
|
||||
setMinimumOrderAmount,
|
||||
setPlatformServiceRate,
|
||||
setPackagingMode,
|
||||
setRushAmount,
|
||||
setRushEnabled,
|
||||
|
||||
@@ -59,7 +59,6 @@ const {
|
||||
setFixedPackagingFee,
|
||||
setFreeDeliveryThreshold,
|
||||
setMinimumOrderAmount,
|
||||
setPlatformServiceRate,
|
||||
setPackagingMode,
|
||||
setRushAmount,
|
||||
setRushEnabled,
|
||||
@@ -112,12 +111,10 @@ function onEditTier(tier: PackagingFeeTierDto) {
|
||||
:can-operate="canOperate"
|
||||
:minimum-order-amount="form.minimumOrderAmount"
|
||||
:base-delivery-fee="form.baseDeliveryFee"
|
||||
:platform-service-rate="form.platformServiceRate"
|
||||
:free-delivery-threshold="form.freeDeliveryThreshold"
|
||||
:is-saving="isSavingDelivery"
|
||||
:on-set-minimum-order-amount="setMinimumOrderAmount"
|
||||
:on-set-base-delivery-fee="setBaseDeliveryFee"
|
||||
:on-set-platform-service-rate="setPlatformServiceRate"
|
||||
:on-set-free-delivery-threshold="setFreeDeliveryThreshold"
|
||||
@save="saveDeliverySection"
|
||||
@reset="resetDeliverySection"
|
||||
|
||||
@@ -21,7 +21,6 @@ export interface PackagingFeeTierFormState {
|
||||
|
||||
export interface StoreFeesFormState {
|
||||
baseDeliveryFee: number;
|
||||
platformServiceRate: number;
|
||||
fixedPackagingFee: number;
|
||||
freeDeliveryThreshold: null | number;
|
||||
minimumOrderAmount: number;
|
||||
|
||||
5
pnpm-lock.yaml
generated
5
pnpm-lock.yaml
generated
@@ -48,9 +48,6 @@ catalogs:
|
||||
'@manypkg/get-packages':
|
||||
specifier: ^3.1.0
|
||||
version: 3.1.0
|
||||
'@microsoft/signalr':
|
||||
specifier: ^8.0.7
|
||||
version: 8.0.17
|
||||
'@nolebase/vitepress-plugin-git-changelog':
|
||||
specifier: ^2.18.2
|
||||
version: 2.18.2
|
||||
@@ -618,7 +615,7 @@ importers:
|
||||
apps/web-antd:
|
||||
dependencies:
|
||||
'@microsoft/signalr':
|
||||
specifier: 'catalog:'
|
||||
specifier: ^8.0.7
|
||||
version: 8.0.17
|
||||
'@vben/access':
|
||||
specifier: workspace:*
|
||||
|
||||
Reference in New Issue
Block a user