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 聚合导出。
|
* 文件职责：财务中心 API 聚合导出。
|
||||||
*/
|
*/
|
||||||
export * from './cost';
|
|
||||||
export * from './invoice';
|
export * from './invoice';
|
||||||
export * from './overview';
|
|
||||||
export * from './report';
|
|
||||||
export * from './settlement';
|
|
||||||
export * from './transaction';
|
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 {
|
export interface StoreFeesSettingsDto {
|
||||||
/** 基础配送费 */
|
/** 基础配送费 */
|
||||||
baseDeliveryFee: number;
|
baseDeliveryFee: number;
|
||||||
/** 平台服务费率（%） */
|
|
||||||
platformServiceRate: number;
|
|
||||||
/** 固定包装费 */
|
/** 固定包装费 */
|
||||||
fixedPackagingFee: number;
|
fixedPackagingFee: number;
|
||||||
/** 免配送费门槛，空值表示关闭 */
|
/** 免配送费门槛，空值表示关闭 */
|
||||||
@@ -72,8 +70,6 @@ export interface StoreFeesSettingsDto {
|
|||||||
export interface SaveStoreFeesSettingsParams {
|
export interface SaveStoreFeesSettingsParams {
|
||||||
/** 基础配送费 */
|
/** 基础配送费 */
|
||||||
baseDeliveryFee: number;
|
baseDeliveryFee: number;
|
||||||
/** 平台服务费率（%） */
|
|
||||||
platformServiceRate: number;
|
|
||||||
/** 固定包装费 */
|
/** 固定包装费 */
|
||||||
fixedPackagingFee: number;
|
fixedPackagingFee: number;
|
||||||
/** 免配送费门槛，空值表示关闭 */
|
/** 免配送费门槛，空值表示关闭 */
|
||||||
|
|||||||
@@ -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;
|
freeDeliveryThreshold: null | number;
|
||||||
isSaving: boolean;
|
isSaving: boolean;
|
||||||
minimumOrderAmount: number;
|
minimumOrderAmount: number;
|
||||||
platformServiceRate: number;
|
|
||||||
onSetBaseDeliveryFee: (value: number) => void;
|
onSetBaseDeliveryFee: (value: number) => void;
|
||||||
onSetFreeDeliveryThreshold: (value: null | number) => void;
|
onSetFreeDeliveryThreshold: (value: null | number) => void;
|
||||||
onSetMinimumOrderAmount: (value: number) => void;
|
onSetMinimumOrderAmount: (value: number) => void;
|
||||||
onSetPlatformServiceRate: (value: number) => void;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = defineProps<Props>();
|
const props = defineProps<Props>();
|
||||||
@@ -87,31 +85,6 @@ function toNumber(value: null | number | string, fallback = 0) {
|
|||||||
<div class="fees-hint">每笔订单默认收取的配送费</div>
|
<div class="fees-hint">每笔订单默认收取的配送费</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="fees-field">
|
|
||||||
<label>平台服务费率</label>
|
|
||||||
<div class="fees-input-row">
|
|
||||||
<InputNumber
|
|
||||||
:value="props.platformServiceRate"
|
|
||||||
:min="0"
|
|
||||||
:max="100"
|
|
||||||
:precision="2"
|
|
||||||
:step="0.1"
|
|
||||||
:controls="false"
|
|
||||||
:disabled="!props.canOperate"
|
|
||||||
class="fees-input"
|
|
||||||
placeholder="如：5.00"
|
|
||||||
@update:value="
|
|
||||||
(value) =>
|
|
||||||
props.onSetPlatformServiceRate(
|
|
||||||
toNumber(value, props.platformServiceRate),
|
|
||||||
)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<span class="fees-unit">%</span>
|
|
||||||
</div>
|
|
||||||
<div class="fees-hint">按实收金额计算平台服务费成本</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="fees-field">
|
<div class="fees-field">
|
||||||
<label>免配送费门槛</label>
|
<label>免配送费门槛</label>
|
||||||
<div class="fees-input-row">
|
<div class="fees-input-row">
|
||||||
|
|||||||
@@ -62,10 +62,6 @@ export function createDataActions(options: CreateDataActionsOptions) {
|
|||||||
0,
|
0,
|
||||||
);
|
);
|
||||||
options.form.baseDeliveryFee = normalizeMoney(next.baseDeliveryFee, 0);
|
options.form.baseDeliveryFee = normalizeMoney(next.baseDeliveryFee, 0);
|
||||||
options.form.platformServiceRate = normalizeMoney(
|
|
||||||
next.platformServiceRate,
|
|
||||||
0,
|
|
||||||
);
|
|
||||||
options.form.freeDeliveryThreshold =
|
options.form.freeDeliveryThreshold =
|
||||||
next.freeDeliveryThreshold === null
|
next.freeDeliveryThreshold === null
|
||||||
? null
|
? null
|
||||||
@@ -113,7 +109,6 @@ export function createDataActions(options: CreateDataActionsOptions) {
|
|||||||
return {
|
return {
|
||||||
minimumOrderAmount: normalizeMoney(source?.minimumOrderAmount ?? 0, 0),
|
minimumOrderAmount: normalizeMoney(source?.minimumOrderAmount ?? 0, 0),
|
||||||
baseDeliveryFee: normalizeMoney(source?.baseDeliveryFee ?? 0, 0),
|
baseDeliveryFee: normalizeMoney(source?.baseDeliveryFee ?? 0, 0),
|
||||||
platformServiceRate: normalizeMoney(source?.platformServiceRate ?? 0, 0),
|
|
||||||
freeDeliveryThreshold:
|
freeDeliveryThreshold:
|
||||||
source?.freeDeliveryThreshold === null ||
|
source?.freeDeliveryThreshold === null ||
|
||||||
source?.freeDeliveryThreshold === undefined
|
source?.freeDeliveryThreshold === undefined
|
||||||
@@ -135,7 +130,6 @@ export function createDataActions(options: CreateDataActionsOptions) {
|
|||||||
storeId,
|
storeId,
|
||||||
minimumOrderAmount: options.form.minimumOrderAmount,
|
minimumOrderAmount: options.form.minimumOrderAmount,
|
||||||
baseDeliveryFee: options.form.baseDeliveryFee,
|
baseDeliveryFee: options.form.baseDeliveryFee,
|
||||||
platformServiceRate: options.form.platformServiceRate,
|
|
||||||
freeDeliveryThreshold: options.form.freeDeliveryThreshold,
|
freeDeliveryThreshold: options.form.freeDeliveryThreshold,
|
||||||
packagingFeeMode: options.form.packagingFeeMode,
|
packagingFeeMode: options.form.packagingFeeMode,
|
||||||
orderPackagingFeeMode: options.form.orderPackagingFeeMode,
|
orderPackagingFeeMode: options.form.orderPackagingFeeMode,
|
||||||
|
|||||||
@@ -26,7 +26,6 @@ export function cloneFeesForm(source: StoreFeesFormState): StoreFeesFormState {
|
|||||||
return {
|
return {
|
||||||
minimumOrderAmount: source.minimumOrderAmount,
|
minimumOrderAmount: source.minimumOrderAmount,
|
||||||
baseDeliveryFee: source.baseDeliveryFee,
|
baseDeliveryFee: source.baseDeliveryFee,
|
||||||
platformServiceRate: source.platformServiceRate,
|
|
||||||
freeDeliveryThreshold: source.freeDeliveryThreshold,
|
freeDeliveryThreshold: source.freeDeliveryThreshold,
|
||||||
packagingFeeMode: source.packagingFeeMode,
|
packagingFeeMode: source.packagingFeeMode,
|
||||||
orderPackagingFeeMode: source.orderPackagingFeeMode,
|
orderPackagingFeeMode: source.orderPackagingFeeMode,
|
||||||
|
|||||||
@@ -36,7 +36,6 @@ import { createPackagingActions } from './fees-page/packaging-actions';
|
|||||||
const EMPTY_FEES_SETTINGS: StoreFeesFormState = {
|
const EMPTY_FEES_SETTINGS: StoreFeesFormState = {
|
||||||
minimumOrderAmount: 0,
|
minimumOrderAmount: 0,
|
||||||
baseDeliveryFee: 0,
|
baseDeliveryFee: 0,
|
||||||
platformServiceRate: 0,
|
|
||||||
freeDeliveryThreshold: null,
|
freeDeliveryThreshold: null,
|
||||||
packagingFeeMode: 'order',
|
packagingFeeMode: 'order',
|
||||||
orderPackagingFeeMode: 'fixed',
|
orderPackagingFeeMode: 'fixed',
|
||||||
@@ -208,10 +207,6 @@ export function useStoreFeesPage() {
|
|||||||
form.baseDeliveryFee = normalizeMoney(value, form.baseDeliveryFee);
|
form.baseDeliveryFee = normalizeMoney(value, form.baseDeliveryFee);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setPlatformServiceRate(value: number) {
|
|
||||||
form.platformServiceRate = normalizeMoney(value, form.platformServiceRate);
|
|
||||||
}
|
|
||||||
|
|
||||||
function setFreeDeliveryThreshold(value: null | number) {
|
function setFreeDeliveryThreshold(value: null | number) {
|
||||||
if (value === null || value === undefined) {
|
if (value === null || value === undefined) {
|
||||||
form.freeDeliveryThreshold = null;
|
form.freeDeliveryThreshold = null;
|
||||||
@@ -306,7 +301,6 @@ export function useStoreFeesPage() {
|
|||||||
const source = snapshot.value;
|
const source = snapshot.value;
|
||||||
form.minimumOrderAmount = source.minimumOrderAmount;
|
form.minimumOrderAmount = source.minimumOrderAmount;
|
||||||
form.baseDeliveryFee = source.baseDeliveryFee;
|
form.baseDeliveryFee = source.baseDeliveryFee;
|
||||||
form.platformServiceRate = source.platformServiceRate;
|
|
||||||
form.freeDeliveryThreshold = source.freeDeliveryThreshold;
|
form.freeDeliveryThreshold = source.freeDeliveryThreshold;
|
||||||
message.success('已重置起送与配送费');
|
message.success('已重置起送与配送费');
|
||||||
}
|
}
|
||||||
@@ -455,7 +449,6 @@ export function useStoreFeesPage() {
|
|||||||
setFixedPackagingFee,
|
setFixedPackagingFee,
|
||||||
setFreeDeliveryThreshold,
|
setFreeDeliveryThreshold,
|
||||||
setMinimumOrderAmount,
|
setMinimumOrderAmount,
|
||||||
setPlatformServiceRate,
|
|
||||||
setPackagingMode,
|
setPackagingMode,
|
||||||
setRushAmount,
|
setRushAmount,
|
||||||
setRushEnabled,
|
setRushEnabled,
|
||||||
|
|||||||
@@ -59,7 +59,6 @@ const {
|
|||||||
setFixedPackagingFee,
|
setFixedPackagingFee,
|
||||||
setFreeDeliveryThreshold,
|
setFreeDeliveryThreshold,
|
||||||
setMinimumOrderAmount,
|
setMinimumOrderAmount,
|
||||||
setPlatformServiceRate,
|
|
||||||
setPackagingMode,
|
setPackagingMode,
|
||||||
setRushAmount,
|
setRushAmount,
|
||||||
setRushEnabled,
|
setRushEnabled,
|
||||||
@@ -112,12 +111,10 @@ function onEditTier(tier: PackagingFeeTierDto) {
|
|||||||
:can-operate="canOperate"
|
:can-operate="canOperate"
|
||||||
:minimum-order-amount="form.minimumOrderAmount"
|
:minimum-order-amount="form.minimumOrderAmount"
|
||||||
:base-delivery-fee="form.baseDeliveryFee"
|
:base-delivery-fee="form.baseDeliveryFee"
|
||||||
:platform-service-rate="form.platformServiceRate"
|
|
||||||
:free-delivery-threshold="form.freeDeliveryThreshold"
|
:free-delivery-threshold="form.freeDeliveryThreshold"
|
||||||
:is-saving="isSavingDelivery"
|
:is-saving="isSavingDelivery"
|
||||||
:on-set-minimum-order-amount="setMinimumOrderAmount"
|
:on-set-minimum-order-amount="setMinimumOrderAmount"
|
||||||
:on-set-base-delivery-fee="setBaseDeliveryFee"
|
:on-set-base-delivery-fee="setBaseDeliveryFee"
|
||||||
:on-set-platform-service-rate="setPlatformServiceRate"
|
|
||||||
:on-set-free-delivery-threshold="setFreeDeliveryThreshold"
|
:on-set-free-delivery-threshold="setFreeDeliveryThreshold"
|
||||||
@save="saveDeliverySection"
|
@save="saveDeliverySection"
|
||||||
@reset="resetDeliverySection"
|
@reset="resetDeliverySection"
|
||||||
|
|||||||
@@ -21,7 +21,6 @@ export interface PackagingFeeTierFormState {
|
|||||||
|
|
||||||
export interface StoreFeesFormState {
|
export interface StoreFeesFormState {
|
||||||
baseDeliveryFee: number;
|
baseDeliveryFee: number;
|
||||||
platformServiceRate: number;
|
|
||||||
fixedPackagingFee: number;
|
fixedPackagingFee: number;
|
||||||
freeDeliveryThreshold: null | number;
|
freeDeliveryThreshold: null | number;
|
||||||
minimumOrderAmount: number;
|
minimumOrderAmount: number;
|
||||||
|
|||||||
5
pnpm-lock.yaml
generated
5
pnpm-lock.yaml
generated
@@ -48,9 +48,6 @@ catalogs:
|
|||||||
'@manypkg/get-packages':
|
'@manypkg/get-packages':
|
||||||
specifier: ^3.1.0
|
specifier: ^3.1.0
|
||||||
version: 3.1.0
|
version: 3.1.0
|
||||||
'@microsoft/signalr':
|
|
||||||
specifier: ^8.0.7
|
|
||||||
version: 8.0.17
|
|
||||||
'@nolebase/vitepress-plugin-git-changelog':
|
'@nolebase/vitepress-plugin-git-changelog':
|
||||||
specifier: ^2.18.2
|
specifier: ^2.18.2
|
||||||
version: 2.18.2
|
version: 2.18.2
|
||||||
@@ -618,7 +615,7 @@ importers:
|
|||||||
apps/web-antd:
|
apps/web-antd:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@microsoft/signalr':
|
'@microsoft/signalr':
|
||||||
specifier: 'catalog:'
|
specifier: ^8.0.7
|
||||||
version: 8.0.17
|
version: 8.0.17
|
||||||
'@vben/access':
|
'@vben/access':
|
||||||
specifier: workspace:*
|
specifier: workspace:*
|
||||||
|
|||||||
Reference in New Issue
Block a user