Compare commits
2 Commits
main
...
307a7e0012
| Author | SHA1 | Date | |
|---|---|---|---|
| 307a7e0012 | |||
| 871458e520 |
@@ -1,143 +0,0 @@
|
||||
/**
|
||||
* 文件职责：财务中心成本管理 API 契约与请求封装。
|
||||
*/
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
/** 成本统计维度。 */
|
||||
export type FinanceCostDimension = 'store' | 'tenant';
|
||||
|
||||
/** 成本分类编码。 */
|
||||
export type FinanceCostCategoryCode = 'fixed' | 'food' | 'labor' | 'packaging';
|
||||
|
||||
/** 成本作用域查询参数。 */
|
||||
export interface FinanceCostScopeQuery {
|
||||
dimension?: FinanceCostDimension;
|
||||
month?: string;
|
||||
storeId?: string;
|
||||
}
|
||||
|
||||
/** 成本明细项。 */
|
||||
export interface FinanceCostEntryDetailDto {
|
||||
amount: number;
|
||||
itemId?: string;
|
||||
itemName: string;
|
||||
quantity?: number;
|
||||
sortOrder: number;
|
||||
unitPrice?: number;
|
||||
}
|
||||
|
||||
/** 成本分类数据。 */
|
||||
export interface FinanceCostEntryCategoryDto {
|
||||
category: FinanceCostCategoryCode;
|
||||
categoryText: string;
|
||||
items: FinanceCostEntryDetailDto[];
|
||||
percentage: number;
|
||||
totalAmount: number;
|
||||
}
|
||||
|
||||
/** 成本录入数据。 */
|
||||
export interface FinanceCostEntryDto {
|
||||
categories: FinanceCostEntryCategoryDto[];
|
||||
costRate: number;
|
||||
dimension: FinanceCostDimension;
|
||||
month: string;
|
||||
monthRevenue: number;
|
||||
storeId?: string;
|
||||
totalCost: number;
|
||||
}
|
||||
|
||||
/** 保存成本明细项请求。 */
|
||||
export interface SaveFinanceCostDetailPayload {
|
||||
amount: number;
|
||||
itemId?: string;
|
||||
itemName: string;
|
||||
quantity?: number;
|
||||
sortOrder: number;
|
||||
unitPrice?: number;
|
||||
}
|
||||
|
||||
/** 保存成本分类请求。 */
|
||||
export interface SaveFinanceCostCategoryPayload {
|
||||
category: FinanceCostCategoryCode;
|
||||
items: SaveFinanceCostDetailPayload[];
|
||||
totalAmount: number;
|
||||
}
|
||||
|
||||
/** 保存成本录入请求。 */
|
||||
export interface SaveFinanceCostEntryPayload extends FinanceCostScopeQuery {
|
||||
categories: SaveFinanceCostCategoryPayload[];
|
||||
}
|
||||
|
||||
/** 成本分析统计卡。 */
|
||||
export interface FinanceCostAnalysisStatsDto {
|
||||
averageCostPerPaidOrder: number;
|
||||
foodCostRate: number;
|
||||
monthOnMonthChangeRate: number;
|
||||
paidOrderCount: number;
|
||||
revenue: number;
|
||||
totalCost: number;
|
||||
}
|
||||
|
||||
/** 成本趋势点。 */
|
||||
export interface FinanceCostTrendPointDto {
|
||||
costRate: number;
|
||||
month: string;
|
||||
revenue: number;
|
||||
totalCost: number;
|
||||
}
|
||||
|
||||
/** 成本构成项。 */
|
||||
export interface FinanceCostCompositionDto {
|
||||
amount: number;
|
||||
category: FinanceCostCategoryCode;
|
||||
categoryText: string;
|
||||
percentage: number;
|
||||
}
|
||||
|
||||
/** 成本明细表行。 */
|
||||
export interface FinanceCostMonthlyDetailRowDto {
|
||||
costRate: number;
|
||||
fixedAmount: number;
|
||||
foodAmount: number;
|
||||
laborAmount: number;
|
||||
month: string;
|
||||
packagingAmount: number;
|
||||
totalCost: number;
|
||||
}
|
||||
|
||||
/** 成本分析数据。 */
|
||||
export interface FinanceCostAnalysisDto {
|
||||
composition: FinanceCostCompositionDto[];
|
||||
detailRows: FinanceCostMonthlyDetailRowDto[];
|
||||
dimension: FinanceCostDimension;
|
||||
month: string;
|
||||
stats: FinanceCostAnalysisStatsDto;
|
||||
storeId?: string;
|
||||
trend: FinanceCostTrendPointDto[];
|
||||
}
|
||||
|
||||
/** 查询成本录入数据。 */
|
||||
export async function getFinanceCostEntryApi(params: FinanceCostScopeQuery) {
|
||||
return requestClient.get<FinanceCostEntryDto>('/finance/cost/entry', {
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
/** 保存成本录入数据。 */
|
||||
export async function saveFinanceCostEntryApi(
|
||||
payload: SaveFinanceCostEntryPayload,
|
||||
) {
|
||||
return requestClient.post<FinanceCostEntryDto>(
|
||||
'/finance/cost/entry/save',
|
||||
payload,
|
||||
);
|
||||
}
|
||||
|
||||
/** 查询成本分析数据。 */
|
||||
export async function getFinanceCostAnalysisApi(
|
||||
params: FinanceCostScopeQuery & { trendMonthCount?: number },
|
||||
) {
|
||||
return requestClient.get<FinanceCostAnalysisDto>('/finance/cost/analysis', {
|
||||
params,
|
||||
});
|
||||
}
|
||||
@@ -1,9 +1,5 @@
|
||||
/**
|
||||
* 文件职责：财务中心 API 聚合导出。
|
||||
*/
|
||||
export * from './cost';
|
||||
export * from './invoice';
|
||||
export * from './overview';
|
||||
export * from './report';
|
||||
export * from './settlement';
|
||||
export * from './transaction';
|
||||
|
||||
@@ -1,206 +0,0 @@
|
||||
/**
|
||||
* 文件职责：财务中心发票管理 API 契约与请求封装。
|
||||
*/
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
/** 发票状态筛选值。 */
|
||||
export type FinanceInvoiceStatusFilter = 'all' | 'issued' | 'pending' | 'voided';
|
||||
|
||||
/** 发票类型筛选值。 */
|
||||
export type FinanceInvoiceTypeFilter = 'all' | 'normal' | 'special';
|
||||
|
||||
/** 发票设置详情。 */
|
||||
export interface FinanceInvoiceSettingDto {
|
||||
autoIssueMaxAmount: number;
|
||||
bankAccount?: string;
|
||||
bankName?: string;
|
||||
companyName: string;
|
||||
enableAutoIssue: boolean;
|
||||
enableElectronicNormalInvoice: boolean;
|
||||
enableElectronicSpecialInvoice: boolean;
|
||||
registeredAddress?: string;
|
||||
registeredPhone?: string;
|
||||
taxpayerNumber: string;
|
||||
}
|
||||
|
||||
/** 保存发票设置请求。 */
|
||||
export interface SaveFinanceInvoiceSettingPayload
|
||||
extends FinanceInvoiceSettingDto {}
|
||||
|
||||
/** 发票记录列表查询参数。 */
|
||||
export interface FinanceInvoiceRecordListQuery {
|
||||
endDate?: string;
|
||||
invoiceType?: Exclude<FinanceInvoiceTypeFilter, 'all'>;
|
||||
keyword?: string;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
startDate?: string;
|
||||
status?: Exclude<FinanceInvoiceStatusFilter, 'all'>;
|
||||
}
|
||||
|
||||
/** 发票统计结果。 */
|
||||
export interface FinanceInvoiceStatsDto {
|
||||
currentMonthIssuedAmount: number;
|
||||
currentMonthIssuedCount: number;
|
||||
pendingCount: number;
|
||||
voidedCount: number;
|
||||
}
|
||||
|
||||
/** 发票记录列表项。 */
|
||||
export interface FinanceInvoiceRecordListItemDto {
|
||||
amount: number;
|
||||
applicantName: string;
|
||||
appliedAt: string;
|
||||
companyName: string;
|
||||
invoiceNo: string;
|
||||
invoiceType: string;
|
||||
invoiceTypeText: string;
|
||||
orderNo: string;
|
||||
recordId: string;
|
||||
status: string;
|
||||
statusText: string;
|
||||
}
|
||||
|
||||
/** 发票记录分页结果。 */
|
||||
export interface FinanceInvoiceRecordListResultDto {
|
||||
items: FinanceInvoiceRecordListItemDto[];
|
||||
page: number;
|
||||
pageSize: number;
|
||||
stats: FinanceInvoiceStatsDto;
|
||||
totalCount: number;
|
||||
}
|
||||
|
||||
/** 发票记录详情。 */
|
||||
export interface FinanceInvoiceRecordDetailDto {
|
||||
amount: number;
|
||||
applicantName: string;
|
||||
appliedAt: string;
|
||||
applyRemark?: string;
|
||||
companyName: string;
|
||||
contactEmail?: string;
|
||||
contactPhone?: string;
|
||||
invoiceNo: string;
|
||||
invoiceType: string;
|
||||
invoiceTypeText: string;
|
||||
issueRemark?: string;
|
||||
issuedAt?: string;
|
||||
issuedByUserId?: string;
|
||||
orderNo: string;
|
||||
recordId: string;
|
||||
status: string;
|
||||
statusText: string;
|
||||
taxpayerNumber?: string;
|
||||
voidReason?: string;
|
||||
voidedAt?: string;
|
||||
voidedByUserId?: string;
|
||||
}
|
||||
|
||||
/** 发票开票请求。 */
|
||||
export interface FinanceInvoiceIssuePayload {
|
||||
contactEmail?: string;
|
||||
issueRemark?: string;
|
||||
recordId: string;
|
||||
}
|
||||
|
||||
/** 发票开票结果。 */
|
||||
export interface FinanceInvoiceIssueResultDto {
|
||||
amount: number;
|
||||
companyName: string;
|
||||
contactEmail?: string;
|
||||
invoiceNo: string;
|
||||
issuedAt: string;
|
||||
recordId: string;
|
||||
status: string;
|
||||
statusText: string;
|
||||
}
|
||||
|
||||
/** 发票作废请求。 */
|
||||
export interface FinanceInvoiceVoidPayload {
|
||||
recordId: string;
|
||||
voidReason: string;
|
||||
}
|
||||
|
||||
/** 发票申请请求。 */
|
||||
export interface FinanceInvoiceApplyPayload {
|
||||
amount: number;
|
||||
applicantName: string;
|
||||
appliedAt?: string;
|
||||
applyRemark?: string;
|
||||
companyName: string;
|
||||
contactEmail?: string;
|
||||
contactPhone?: string;
|
||||
invoiceType: Exclude<FinanceInvoiceTypeFilter, 'all'>;
|
||||
orderNo: string;
|
||||
taxpayerNumber?: string;
|
||||
}
|
||||
|
||||
/** 查询发票设置。 */
|
||||
export async function getFinanceInvoiceSettingDetailApi() {
|
||||
return requestClient.get<FinanceInvoiceSettingDto>(
|
||||
'/finance/invoice/settings/detail',
|
||||
);
|
||||
}
|
||||
|
||||
/** 保存发票设置。 */
|
||||
export async function saveFinanceInvoiceSettingApi(
|
||||
payload: SaveFinanceInvoiceSettingPayload,
|
||||
) {
|
||||
return requestClient.post<FinanceInvoiceSettingDto>(
|
||||
'/finance/invoice/settings/save',
|
||||
payload,
|
||||
);
|
||||
}
|
||||
|
||||
/** 查询发票记录列表。 */
|
||||
export async function getFinanceInvoiceRecordListApi(
|
||||
params: FinanceInvoiceRecordListQuery,
|
||||
) {
|
||||
return requestClient.get<FinanceInvoiceRecordListResultDto>(
|
||||
'/finance/invoice/record/list',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/** 查询发票记录详情。 */
|
||||
export async function getFinanceInvoiceRecordDetailApi(params: {
|
||||
recordId: string;
|
||||
}) {
|
||||
return requestClient.get<FinanceInvoiceRecordDetailDto>(
|
||||
'/finance/invoice/record/detail',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/** 执行发票开票。 */
|
||||
export async function issueFinanceInvoiceRecordApi(
|
||||
payload: FinanceInvoiceIssuePayload,
|
||||
) {
|
||||
return requestClient.post<FinanceInvoiceIssueResultDto>(
|
||||
'/finance/invoice/record/issue',
|
||||
payload,
|
||||
);
|
||||
}
|
||||
|
||||
/** 执行发票作废。 */
|
||||
export async function voidFinanceInvoiceRecordApi(
|
||||
payload: FinanceInvoiceVoidPayload,
|
||||
) {
|
||||
return requestClient.post<FinanceInvoiceRecordDetailDto>(
|
||||
'/finance/invoice/record/void',
|
||||
payload,
|
||||
);
|
||||
}
|
||||
|
||||
/** 发起发票申请。 */
|
||||
export async function applyFinanceInvoiceRecordApi(
|
||||
payload: FinanceInvoiceApplyPayload,
|
||||
) {
|
||||
return requestClient.post<FinanceInvoiceRecordDetailDto>(
|
||||
'/finance/invoice/record/apply',
|
||||
payload,
|
||||
);
|
||||
}
|
||||
@@ -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,137 +0,0 @@
|
||||
/**
|
||||
* 文件职责：财务中心到账查询 API 契约与请求封装。
|
||||
*/
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
/** 到账渠道筛选值。 */
|
||||
export type FinanceSettlementChannelFilter = 'alipay' | 'all' | 'wechat';
|
||||
|
||||
/** 到账查询筛选参数。 */
|
||||
export interface FinanceSettlementFilterQuery {
|
||||
channel?: FinanceSettlementChannelFilter;
|
||||
endDate?: string;
|
||||
startDate?: string;
|
||||
storeId: string;
|
||||
}
|
||||
|
||||
/** 到账查询列表参数。 */
|
||||
export interface FinanceSettlementListQuery extends FinanceSettlementFilterQuery {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
}
|
||||
|
||||
/** 到账统计结果。 */
|
||||
export interface FinanceSettlementStatsDto {
|
||||
currentMonthArrivedAmount: number;
|
||||
currentMonthTransactionCount: number;
|
||||
todayArrivedAmount: number;
|
||||
yesterdayArrivedAmount: number;
|
||||
}
|
||||
|
||||
/** 到账账户信息。 */
|
||||
export interface FinanceSettlementAccountDto {
|
||||
alipayPidMasked: string;
|
||||
bankAccountName: string;
|
||||
bankAccountNoMasked: string;
|
||||
bankName: string;
|
||||
settlementPeriodText: string;
|
||||
wechatMerchantNoMasked: string;
|
||||
}
|
||||
|
||||
/** 到账列表行。 */
|
||||
export interface FinanceSettlementListItemDto {
|
||||
arrivedAmount: number;
|
||||
arrivedDate: string;
|
||||
channel: 'alipay' | 'wechat';
|
||||
channelText: string;
|
||||
transactionCount: number;
|
||||
}
|
||||
|
||||
/** 到账列表结果。 */
|
||||
export interface FinanceSettlementListResultDto {
|
||||
items: FinanceSettlementListItemDto[];
|
||||
page: number;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
/** 到账明细查询参数。 */
|
||||
export interface FinanceSettlementDetailQuery {
|
||||
arrivedDate: string;
|
||||
channel: 'alipay' | 'wechat';
|
||||
storeId: string;
|
||||
}
|
||||
|
||||
/** 到账明细行。 */
|
||||
export interface FinanceSettlementDetailItemDto {
|
||||
amount: number;
|
||||
orderNo: string;
|
||||
paidAt: string;
|
||||
}
|
||||
|
||||
/** 到账明细结果。 */
|
||||
export interface FinanceSettlementDetailResultDto {
|
||||
items: FinanceSettlementDetailItemDto[];
|
||||
}
|
||||
|
||||
/** 到账导出结果。 */
|
||||
export interface FinanceSettlementExportDto {
|
||||
fileContentBase64: string;
|
||||
fileName: string;
|
||||
totalCount: number;
|
||||
}
|
||||
|
||||
/** 查询到账统计。 */
|
||||
export async function getFinanceSettlementStatsApi(params: {
|
||||
storeId: string;
|
||||
}) {
|
||||
return requestClient.get<FinanceSettlementStatsDto>(
|
||||
'/finance/settlement/stats',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/** 查询到账账户信息。 */
|
||||
export async function getFinanceSettlementAccountApi() {
|
||||
return requestClient.get<FinanceSettlementAccountDto>(
|
||||
'/finance/settlement/account',
|
||||
);
|
||||
}
|
||||
|
||||
/** 查询到账列表。 */
|
||||
export async function getFinanceSettlementListApi(
|
||||
params: FinanceSettlementListQuery,
|
||||
) {
|
||||
return requestClient.get<FinanceSettlementListResultDto>(
|
||||
'/finance/settlement/list',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/** 查询到账明细。 */
|
||||
export async function getFinanceSettlementDetailApi(
|
||||
params: FinanceSettlementDetailQuery,
|
||||
) {
|
||||
return requestClient.get<FinanceSettlementDetailResultDto>(
|
||||
'/finance/settlement/detail',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/** 导出到账汇总 CSV。 */
|
||||
export async function exportFinanceSettlementCsvApi(
|
||||
params: FinanceSettlementFilterQuery,
|
||||
) {
|
||||
return requestClient.get<FinanceSettlementExportDto>(
|
||||
'/finance/settlement/export',
|
||||
{
|
||||
params,
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -46,8 +46,6 @@ export interface StoreOtherFeesDto {
|
||||
export interface StoreFeesSettingsDto {
|
||||
/** 基础配送费 */
|
||||
baseDeliveryFee: number;
|
||||
/** 平台服务费率（%） */
|
||||
platformServiceRate: number;
|
||||
/** 固定包装费 */
|
||||
fixedPackagingFee: number;
|
||||
/** 免配送费门槛，空值表示关闭 */
|
||||
@@ -72,8 +70,6 @@ export interface StoreFeesSettingsDto {
|
||||
export interface SaveStoreFeesSettingsParams {
|
||||
/** 基础配送费 */
|
||||
baseDeliveryFee: number;
|
||||
/** 平台服务费率（%） */
|
||||
platformServiceRate: number;
|
||||
/** 固定包装费 */
|
||||
fixedPackagingFee: number;
|
||||
/** 免配送费门槛，空值表示关闭 */
|
||||
|
||||
@@ -1,119 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { EchartsUIType } from '@vben/plugins/echarts';
|
||||
|
||||
/**
|
||||
* 文件职责：成本分析构成环图与图例。
|
||||
*/
|
||||
import type { FinanceCostCompositionDto } from '#/api/finance/cost';
|
||||
|
||||
import { computed, nextTick, onMounted, ref, watch } from 'vue';
|
||||
|
||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
||||
|
||||
import { COST_CATEGORY_COLOR_MAP } from '../composables/cost-page/constants';
|
||||
import {
|
||||
formatCurrency,
|
||||
formatPercent,
|
||||
} from '../composables/cost-page/helpers';
|
||||
|
||||
interface Props {
|
||||
composition: FinanceCostCompositionDto[];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const chartRef = ref<EchartsUIType>();
|
||||
const { renderEcharts } = useEcharts(chartRef);
|
||||
|
||||
const totalCost = computed(() =>
|
||||
(props.composition ?? []).reduce(
|
||||
(sum, item) => sum + Number(item.amount || 0),
|
||||
0,
|
||||
),
|
||||
);
|
||||
|
||||
function renderChart() {
|
||||
const source = props.composition ?? [];
|
||||
renderEcharts({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter(params: unknown) {
|
||||
const data = params as {
|
||||
name?: string;
|
||||
percent?: number;
|
||||
value?: number;
|
||||
};
|
||||
return `${data.name ?? ''}<br/>${formatCurrency(data.value ?? 0)} (${formatPercent(data.percent ?? 0)})`;
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['52%', '76%'],
|
||||
center: ['50%', '50%'],
|
||||
data: source.map((item) => ({
|
||||
name: item.categoryText,
|
||||
value: item.amount,
|
||||
itemStyle: {
|
||||
color: COST_CATEGORY_COLOR_MAP[item.category] ?? '#2563eb',
|
||||
},
|
||||
})),
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.composition,
|
||||
async () => {
|
||||
await nextTick();
|
||||
renderChart();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
renderChart();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fc-composition-card">
|
||||
<div class="fc-section-title">成本构成</div>
|
||||
|
||||
<div class="fc-composition-body">
|
||||
<div class="fc-composition-chart-wrap">
|
||||
<EchartsUI ref="chartRef" class="fc-composition-chart" />
|
||||
<div class="fc-composition-center">
|
||||
<div class="fc-composition-center-value">
|
||||
{{ formatCurrency(totalCost) }}
|
||||
</div>
|
||||
<div class="fc-composition-center-label">总成本</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fc-composition-legend">
|
||||
<div
|
||||
v-for="item in props.composition"
|
||||
:key="item.category"
|
||||
class="fc-composition-legend-item"
|
||||
>
|
||||
<span
|
||||
class="fc-composition-dot"
|
||||
:style="{ backgroundColor: COST_CATEGORY_COLOR_MAP[item.category] }"
|
||||
></span>
|
||||
<span class="fc-composition-name">{{ item.categoryText }}</span>
|
||||
<span class="fc-composition-amount">{{
|
||||
formatCurrency(item.amount)
|
||||
}}</span>
|
||||
<span class="fc-composition-percent">{{
|
||||
formatPercent(item.percentage)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,87 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：成本分析明细表。
|
||||
*/
|
||||
import type { TableProps } from 'ant-design-vue';
|
||||
|
||||
import type { FinanceCostMonthlyDetailRowDto } from '#/api/finance/cost';
|
||||
|
||||
import { h } from 'vue';
|
||||
|
||||
import { Table } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
formatCurrency,
|
||||
formatPercent,
|
||||
} from '../composables/cost-page/helpers';
|
||||
|
||||
interface Props {
|
||||
loading: boolean;
|
||||
rows: FinanceCostMonthlyDetailRowDto[];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const columns: TableProps['columns'] = [
|
||||
{
|
||||
title: '月份',
|
||||
dataIndex: 'month',
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: '食材',
|
||||
dataIndex: 'foodAmount',
|
||||
align: 'right',
|
||||
customRender: ({ text }) => formatCurrency(Number(text ?? 0)),
|
||||
},
|
||||
{
|
||||
title: '人工',
|
||||
dataIndex: 'laborAmount',
|
||||
align: 'right',
|
||||
customRender: ({ text }) => formatCurrency(Number(text ?? 0)),
|
||||
},
|
||||
{
|
||||
title: '固定',
|
||||
dataIndex: 'fixedAmount',
|
||||
align: 'right',
|
||||
customRender: ({ text }) => formatCurrency(Number(text ?? 0)),
|
||||
},
|
||||
{
|
||||
title: '包装',
|
||||
dataIndex: 'packagingAmount',
|
||||
align: 'right',
|
||||
customRender: ({ text }) => formatCurrency(Number(text ?? 0)),
|
||||
},
|
||||
{
|
||||
title: '总计',
|
||||
dataIndex: 'totalCost',
|
||||
align: 'right',
|
||||
customRender: ({ text }) =>
|
||||
h(
|
||||
'span',
|
||||
{ class: 'fc-total-amount' },
|
||||
formatCurrency(Number(text ?? 0)),
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '成本率',
|
||||
dataIndex: 'costRate',
|
||||
align: 'right',
|
||||
customRender: ({ text }) => formatPercent(Number(text ?? 0)),
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fc-table-card">
|
||||
<div class="fc-section-title">成本明细</div>
|
||||
<Table
|
||||
row-key="month"
|
||||
size="middle"
|
||||
:columns="columns"
|
||||
:data-source="props.rows"
|
||||
:loading="props.loading"
|
||||
:pagination="false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,57 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：成本分析统计卡。
|
||||
*/
|
||||
import type { FinanceCostAnalysisStatsDto } from '#/api/finance/cost';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
||||
import {
|
||||
formatCurrency,
|
||||
formatPercent,
|
||||
} from '../composables/cost-page/helpers';
|
||||
|
||||
interface Props {
|
||||
stats: FinanceCostAnalysisStatsDto;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const monthOnMonthClass = computed(() => {
|
||||
if ((props.stats?.monthOnMonthChangeRate ?? 0) > 0) return 'is-up';
|
||||
if ((props.stats?.monthOnMonthChangeRate ?? 0) < 0) return 'is-down';
|
||||
return 'is-flat';
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fc-stats">
|
||||
<div class="fc-stat-card">
|
||||
<div class="fc-stat-label">本月总成本</div>
|
||||
<div class="fc-stat-value">
|
||||
{{ formatCurrency(props.stats.totalCost) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fc-stat-card">
|
||||
<div class="fc-stat-label">食材成本率</div>
|
||||
<div class="fc-stat-value">
|
||||
{{ formatPercent(props.stats.foodCostRate) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fc-stat-card">
|
||||
<div class="fc-stat-label">单均成本</div>
|
||||
<div class="fc-stat-value">
|
||||
{{ formatCurrency(props.stats.averageCostPerPaidOrder) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fc-stat-card">
|
||||
<div class="fc-stat-label">环比变化</div>
|
||||
<div class="fc-stat-value" :class="monthOnMonthClass">
|
||||
{{ formatPercent(props.stats.monthOnMonthChangeRate) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,114 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { EchartsUIType } from '@vben/plugins/echarts';
|
||||
|
||||
/**
|
||||
* 文件职责：成本分析近 6 月趋势图。
|
||||
*/
|
||||
import type { FinanceCostTrendPointDto } from '#/api/finance/cost';
|
||||
|
||||
import { nextTick, onMounted, ref, watch } from 'vue';
|
||||
|
||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
||||
|
||||
import { formatCurrency } from '../composables/cost-page/helpers';
|
||||
|
||||
interface Props {
|
||||
trend: FinanceCostTrendPointDto[];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const chartRef = ref<EchartsUIType>();
|
||||
const { renderEcharts } = useEcharts(chartRef);
|
||||
|
||||
function renderChart() {
|
||||
const source = props.trend ?? [];
|
||||
renderEcharts({
|
||||
color: ['#2563eb', '#16a34a'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter(params: unknown) {
|
||||
if (!Array.isArray(params)) return '';
|
||||
const records = params as Array<{
|
||||
axisValue?: string;
|
||||
seriesName?: string;
|
||||
value?: number;
|
||||
}>;
|
||||
const month = String(records[0]?.axisValue ?? '');
|
||||
const cost = Number(
|
||||
records.find((item) => item.seriesName === '总成本')?.value ?? 0,
|
||||
);
|
||||
const revenue = Number(
|
||||
records.find((item) => item.seriesName === '营业额')?.value ?? 0,
|
||||
);
|
||||
return `${month}<br/>总成本：${formatCurrency(cost)}<br/>营业额：${formatCurrency(revenue)}`;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '1%',
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
data: ['总成本', '营业额'],
|
||||
top: 0,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisTick: { show: false },
|
||||
data: source.map((item) => item.month.slice(5)),
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#f1f5f9',
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: (value: number) => `${Math.round(value / 1000)}k`,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '总成本',
|
||||
type: 'bar',
|
||||
barWidth: 22,
|
||||
data: source.map((item) => item.totalCost),
|
||||
itemStyle: {
|
||||
borderRadius: [6, 6, 0, 0],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '营业额',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: source.map((item) => item.revenue),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.trend,
|
||||
async () => {
|
||||
await nextTick();
|
||||
renderChart();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
renderChart();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fc-chart-card">
|
||||
<div class="fc-section-title">近6个月成本趋势</div>
|
||||
<EchartsUI ref="chartRef" class="fc-trend-chart" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,36 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：成本明细删除确认弹窗。
|
||||
*/
|
||||
import { Modal } from 'ant-design-vue';
|
||||
|
||||
interface Props {
|
||||
itemName?: string;
|
||||
open: boolean;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'cancel'): void;
|
||||
(event: 'confirm'): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal
|
||||
:open="open"
|
||||
title="删除明细"
|
||||
ok-text="确认删除"
|
||||
ok-type="danger"
|
||||
cancel-text="取消"
|
||||
@cancel="emit('cancel')"
|
||||
@ok="emit('confirm')"
|
||||
>
|
||||
<p class="fc-delete-tip">
|
||||
确认删除明细项
|
||||
<strong>{{ itemName || '未命名项' }}</strong>
|
||||
吗？删除后需重新保存才会生效。
|
||||
</p>
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -1,157 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { FinanceCostCategoryViewModel } from '../types';
|
||||
|
||||
/**
|
||||
* 文件职责：成本录入分类卡片（总额 + 明细列表）。
|
||||
*/
|
||||
import type { FinanceCostCategoryCode } from '#/api/finance/cost';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Button, Card, Empty, InputNumber, Tag } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
formatCurrency,
|
||||
formatPercent,
|
||||
} from '../composables/cost-page/helpers';
|
||||
|
||||
interface Props {
|
||||
canManage: boolean;
|
||||
category: FinanceCostCategoryViewModel;
|
||||
color?: string;
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'addItem', category: FinanceCostCategoryCode): void;
|
||||
(
|
||||
event: 'deleteItem',
|
||||
category: FinanceCostCategoryCode,
|
||||
itemId: string,
|
||||
): void;
|
||||
(event: 'editItem', category: FinanceCostCategoryCode, itemId: string): void;
|
||||
(event: 'toggle', category: FinanceCostCategoryCode): void;
|
||||
(
|
||||
event: 'updateTotal',
|
||||
category: FinanceCostCategoryCode,
|
||||
value: number,
|
||||
): void;
|
||||
}>();
|
||||
|
||||
function handleTotalChange(value: unknown) {
|
||||
emit('updateTotal', props.category.category, Number(value ?? 0));
|
||||
}
|
||||
|
||||
function handleEdit(itemId: string | undefined) {
|
||||
if (!itemId) return;
|
||||
emit('editItem', props.category.category, itemId);
|
||||
}
|
||||
|
||||
function handleDelete(itemId: string | undefined) {
|
||||
if (!itemId) return;
|
||||
emit('deleteItem', props.category.category, itemId);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card class="fc-entry-card" :bordered="false">
|
||||
<div class="fc-entry-head">
|
||||
<div class="fc-entry-icon" :style="{ color: props.color || '#1677ff' }">
|
||||
<IconifyIcon :icon="props.icon || 'lucide:circle-dollar-sign'" />
|
||||
</div>
|
||||
|
||||
<div class="fc-entry-meta">
|
||||
<div class="fc-entry-name">
|
||||
{{ props.category.categoryText }}
|
||||
<span class="fc-entry-ratio">{{
|
||||
formatPercent(props.category.percentage)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fc-entry-amount">
|
||||
<span class="fc-entry-currency">¥</span>
|
||||
<InputNumber
|
||||
class="fc-entry-input"
|
||||
:min="0"
|
||||
:step="100"
|
||||
:precision="2"
|
||||
:value="props.category.totalAmount"
|
||||
:controls="false"
|
||||
:disabled="!props.canManage"
|
||||
@update:value="(value) => handleTotalChange(value)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="link"
|
||||
class="fc-entry-toggle"
|
||||
@click="emit('toggle', props.category.category)"
|
||||
>
|
||||
{{ props.category.expanded ? '收起明细' : '展开明细' }}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div v-if="props.category.expanded" class="fc-entry-detail">
|
||||
<template v-if="props.category.items.length > 0">
|
||||
<div
|
||||
v-for="item in props.category.items"
|
||||
:key="item.itemId"
|
||||
class="fc-entry-detail-row"
|
||||
>
|
||||
<div class="fc-entry-item-name">{{ item.itemName }}</div>
|
||||
|
||||
<div class="fc-entry-item-value">
|
||||
<template v-if="props.category.category === 'labor'">
|
||||
<Tag color="blue">{{ item.quantity ?? 0 }} 人</Tag>
|
||||
<span class="fc-entry-mul">x</span>
|
||||
<Tag color="cyan">{{ formatCurrency(item.unitPrice ?? 0) }}</Tag>
|
||||
<span class="fc-entry-equal">=</span>
|
||||
</template>
|
||||
<span class="fc-entry-item-amount">{{
|
||||
formatCurrency(item.amount)
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<div class="fc-entry-item-actions">
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
:disabled="!props.canManage"
|
||||
@click="handleEdit(item.itemId)"
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
danger
|
||||
:disabled="!props.canManage"
|
||||
@click="handleDelete(item.itemId)"
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else class="fc-entry-empty">
|
||||
<Empty description="暂无明细" :image-style="{ height: '48px' }" />
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="link"
|
||||
class="fc-entry-add"
|
||||
:disabled="!props.canManage"
|
||||
@click="emit('addItem', props.category.category)"
|
||||
>
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:plus" />
|
||||
</template>
|
||||
添加明细
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
@@ -1,37 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：成本录入底部汇总栏。
|
||||
*/
|
||||
import { Button } from 'ant-design-vue';
|
||||
|
||||
import { formatCurrency } from '../composables/cost-page/helpers';
|
||||
|
||||
interface Props {
|
||||
canManage: boolean;
|
||||
loading: boolean;
|
||||
totalCost: number;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'save'): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fc-summary">
|
||||
<div class="fc-summary-label">本月总成本</div>
|
||||
<div class="fc-summary-right">
|
||||
<div class="fc-summary-value">{{ formatCurrency(props.totalCost) }}</div>
|
||||
<Button
|
||||
type="primary"
|
||||
:loading="props.loading"
|
||||
:disabled="!props.canManage"
|
||||
@click="emit('save')"
|
||||
>
|
||||
保存
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,191 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：成本明细编辑抽屉（新增/编辑）。
|
||||
*/
|
||||
import type {
|
||||
FinanceCostCategoryCode,
|
||||
FinanceCostEntryDetailDto,
|
||||
} from '#/api/finance/cost';
|
||||
|
||||
import { computed, reactive, watch } from 'vue';
|
||||
|
||||
import { Button, Drawer, Form, Input, InputNumber } from 'ant-design-vue';
|
||||
|
||||
import { roundAmount } from '../composables/cost-page/helpers';
|
||||
|
||||
interface Props {
|
||||
category: FinanceCostCategoryCode;
|
||||
categoryText: string;
|
||||
mode: 'create' | 'edit';
|
||||
open: boolean;
|
||||
sourceItem?: FinanceCostEntryDetailDto;
|
||||
submitting: boolean;
|
||||
}
|
||||
|
||||
interface EditorFormState {
|
||||
amount: number;
|
||||
itemId?: string;
|
||||
itemName: string;
|
||||
quantity?: number;
|
||||
sortOrder: number;
|
||||
unitPrice?: number;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void;
|
||||
(event: 'submit', payload: FinanceCostEntryDetailDto): void;
|
||||
}>();
|
||||
|
||||
const formState = reactive<EditorFormState>({
|
||||
itemId: undefined,
|
||||
itemName: '',
|
||||
amount: 0,
|
||||
quantity: 0,
|
||||
unitPrice: 0,
|
||||
sortOrder: 1,
|
||||
});
|
||||
|
||||
const isLaborCategory = computed(() => props.category === 'labor');
|
||||
const drawerTitle = computed(() =>
|
||||
props.mode === 'create'
|
||||
? `新增${props.categoryText}明细`
|
||||
: `编辑${props.categoryText}明细`,
|
||||
);
|
||||
|
||||
const laborComputedAmount = computed(() => {
|
||||
if (!isLaborCategory.value) return formState.amount;
|
||||
return roundAmount((formState.quantity ?? 0) * (formState.unitPrice ?? 0));
|
||||
});
|
||||
|
||||
watch(
|
||||
() => [props.open, props.sourceItem, props.mode] as const,
|
||||
() => {
|
||||
if (!props.open) return;
|
||||
|
||||
formState.itemId = props.sourceItem?.itemId;
|
||||
formState.itemName = props.sourceItem?.itemName ?? '';
|
||||
formState.amount = props.sourceItem?.amount ?? 0;
|
||||
formState.quantity = props.sourceItem?.quantity ?? 0;
|
||||
formState.unitPrice = props.sourceItem?.unitPrice ?? 0;
|
||||
formState.sortOrder = props.sourceItem?.sortOrder ?? 1;
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
function handleSubmit() {
|
||||
if (!formState.itemName.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
formState.amount = isLaborCategory.value
|
||||
? laborComputedAmount.value
|
||||
: roundAmount(formState.amount);
|
||||
|
||||
emit('submit', {
|
||||
itemId: formState.itemId,
|
||||
itemName: formState.itemName.trim(),
|
||||
amount: Math.max(0, formState.amount),
|
||||
quantity: isLaborCategory.value
|
||||
? roundAmount(formState.quantity ?? 0)
|
||||
: undefined,
|
||||
unitPrice: isLaborCategory.value
|
||||
? roundAmount(formState.unitPrice ?? 0)
|
||||
: undefined,
|
||||
sortOrder: Math.max(1, Number(formState.sortOrder || 1)),
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Drawer
|
||||
:open="props.open"
|
||||
:title="drawerTitle"
|
||||
width="460"
|
||||
@close="emit('close')"
|
||||
>
|
||||
<Form layout="vertical">
|
||||
<Form.Item label="明细名称" required>
|
||||
<Input
|
||||
:value="formState.itemName"
|
||||
:maxlength="64"
|
||||
placeholder="请输入明细名称"
|
||||
@update:value="(value) => (formState.itemName = String(value ?? ''))"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<template v-if="isLaborCategory">
|
||||
<Form.Item label="人数" required>
|
||||
<InputNumber
|
||||
class="fc-full-input"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:controls="false"
|
||||
:value="formState.quantity"
|
||||
@update:value="(value) => (formState.quantity = Number(value ?? 0))"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="月薪" required>
|
||||
<InputNumber
|
||||
class="fc-full-input"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:controls="false"
|
||||
:value="formState.unitPrice"
|
||||
@update:value="
|
||||
(value) => (formState.unitPrice = Number(value ?? 0))
|
||||
"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="小计">
|
||||
<InputNumber
|
||||
class="fc-full-input"
|
||||
:value="laborComputedAmount"
|
||||
:precision="2"
|
||||
:controls="false"
|
||||
disabled
|
||||
/>
|
||||
</Form.Item>
|
||||
</template>
|
||||
|
||||
<Form.Item v-else label="金额" required>
|
||||
<InputNumber
|
||||
class="fc-full-input"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:controls="false"
|
||||
:value="formState.amount"
|
||||
@update:value="(value) => (formState.amount = Number(value ?? 0))"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="排序">
|
||||
<InputNumber
|
||||
class="fc-full-input"
|
||||
:min="1"
|
||||
:precision="0"
|
||||
:controls="false"
|
||||
:value="formState.sortOrder"
|
||||
@update:value="(value) => (formState.sortOrder = Number(value ?? 1))"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
<template #footer>
|
||||
<div class="fc-drawer-footer">
|
||||
<Button @click="emit('close')">取消</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
:loading="props.submitting"
|
||||
:disabled="!formState.itemName.trim()"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
确认
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -1,107 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { FinanceCostTabKey, OptionItem } from '../types';
|
||||
|
||||
/**
|
||||
* 文件职责：成本管理顶部工具条（Tab、维度、门店、月份）。
|
||||
*/
|
||||
import type { FinanceCostDimension } from '#/api/finance/cost';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Button, Input, Segmented, Select } from 'ant-design-vue';
|
||||
|
||||
interface Props {
|
||||
activeTab: FinanceCostTabKey;
|
||||
dimension: FinanceCostDimension;
|
||||
dimensionOptions: Array<{ label: string; value: FinanceCostDimension }>;
|
||||
isStoreLoading: boolean;
|
||||
month: string;
|
||||
monthTitle: string;
|
||||
showStoreSelect: boolean;
|
||||
storeId: string;
|
||||
storeOptions: OptionItem[];
|
||||
tabOptions: Array<{ label: string; value: FinanceCostTabKey }>;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'nextMonth'): void;
|
||||
(event: 'prevMonth'): void;
|
||||
(event: 'update:activeTab', value: FinanceCostTabKey): void;
|
||||
(event: 'update:dimension', value: FinanceCostDimension): void;
|
||||
(event: 'update:month', value: string): void;
|
||||
(event: 'update:storeId', value: string): void;
|
||||
}>();
|
||||
|
||||
function handleStoreChange(value: unknown) {
|
||||
if (typeof value === 'number' || typeof value === 'string') {
|
||||
emit('update:storeId', String(value));
|
||||
return;
|
||||
}
|
||||
emit('update:storeId', '');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fc-toolbar">
|
||||
<Segmented
|
||||
class="fc-tab-segmented"
|
||||
:value="props.activeTab"
|
||||
:options="props.tabOptions"
|
||||
@update:value="
|
||||
(value) =>
|
||||
emit('update:activeTab', (value as FinanceCostTabKey) || 'entry')
|
||||
"
|
||||
/>
|
||||
|
||||
<div class="fc-toolbar-right">
|
||||
<Segmented
|
||||
class="fc-dimension-segmented"
|
||||
:value="props.dimension"
|
||||
:options="props.dimensionOptions"
|
||||
@update:value="
|
||||
(value) =>
|
||||
emit(
|
||||
'update:dimension',
|
||||
(value as FinanceCostDimension) || 'tenant',
|
||||
)
|
||||
"
|
||||
/>
|
||||
|
||||
<Select
|
||||
v-if="props.showStoreSelect"
|
||||
class="fc-store-select"
|
||||
:value="props.storeId"
|
||||
:options="props.storeOptions"
|
||||
:loading="props.isStoreLoading"
|
||||
:disabled="props.storeOptions.length === 0"
|
||||
placeholder="请选择门店"
|
||||
@update:value="(value) => handleStoreChange(value)"
|
||||
/>
|
||||
|
||||
<div class="fc-month-picker">
|
||||
<Button class="fc-month-arrow" @click="emit('prevMonth')">
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:chevron-left" />
|
||||
</template>
|
||||
</Button>
|
||||
|
||||
<div class="fc-month-title">{{ props.monthTitle }}</div>
|
||||
|
||||
<Button class="fc-month-arrow" @click="emit('nextMonth')">
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:chevron-right" />
|
||||
</template>
|
||||
</Button>
|
||||
|
||||
<Input
|
||||
class="fc-month-input"
|
||||
type="month"
|
||||
:value="props.month"
|
||||
@update:value="(value) => emit('update:month', String(value ?? ''))"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,96 +0,0 @@
|
||||
import type {
|
||||
FinanceCostAnalysisState,
|
||||
FinanceCostCategoryViewModel,
|
||||
FinanceCostEntryState,
|
||||
FinanceCostFilterState,
|
||||
FinanceCostTabKey,
|
||||
} from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：成本管理页面常量与默认状态定义。
|
||||
*/
|
||||
import type { FinanceCostDimension } from '#/api/finance/cost';
|
||||
|
||||
/** 成本管理查看权限。 */
|
||||
export const FINANCE_COST_VIEW_PERMISSION = 'tenant:finance:cost:view';
|
||||
|
||||
/** 成本管理维护权限。 */
|
||||
export const FINANCE_COST_MANAGE_PERMISSION = 'tenant:finance:cost:manage';
|
||||
|
||||
/** 页面 Tab 选项。 */
|
||||
export const COST_TAB_OPTIONS: Array<{
|
||||
label: string;
|
||||
value: FinanceCostTabKey;
|
||||
}> = [
|
||||
{ label: '成本录入', value: 'entry' },
|
||||
{ label: '成本分析', value: 'analysis' },
|
||||
];
|
||||
|
||||
/** 维度切换选项。 */
|
||||
export const COST_DIMENSION_OPTIONS: Array<{
|
||||
label: string;
|
||||
value: FinanceCostDimension;
|
||||
}> = [
|
||||
{ label: '租户汇总', value: 'tenant' },
|
||||
{ label: '门店视角', value: 'store' },
|
||||
];
|
||||
|
||||
/** 分类颜色映射。 */
|
||||
export const COST_CATEGORY_COLOR_MAP: Record<string, string> = {
|
||||
food: '#2563eb',
|
||||
labor: '#16a34a',
|
||||
fixed: '#ca8a04',
|
||||
packaging: '#db2777',
|
||||
};
|
||||
|
||||
/** 分类图标映射。 */
|
||||
export const COST_CATEGORY_ICON_MAP: Record<string, string> = {
|
||||
food: 'lucide:utensils-crossed',
|
||||
labor: 'lucide:users',
|
||||
fixed: 'lucide:building-2',
|
||||
packaging: 'lucide:package',
|
||||
};
|
||||
|
||||
/** 默认录入状态。 */
|
||||
export const DEFAULT_ENTRY_STATE: FinanceCostEntryState = {
|
||||
monthRevenue: 0,
|
||||
totalCost: 0,
|
||||
costRate: 0,
|
||||
categories: [],
|
||||
};
|
||||
|
||||
/** 默认分析状态。 */
|
||||
export const DEFAULT_ANALYSIS_STATE: FinanceCostAnalysisState = {
|
||||
stats: {
|
||||
totalCost: 0,
|
||||
foodCostRate: 0,
|
||||
averageCostPerPaidOrder: 0,
|
||||
monthOnMonthChangeRate: 0,
|
||||
revenue: 0,
|
||||
paidOrderCount: 0,
|
||||
},
|
||||
trend: [],
|
||||
composition: [],
|
||||
detailRows: [],
|
||||
};
|
||||
|
||||
/** 默认筛选状态。 */
|
||||
export const DEFAULT_FILTER_STATE: FinanceCostFilterState = {
|
||||
dimension: 'tenant',
|
||||
month: '',
|
||||
storeId: '',
|
||||
};
|
||||
|
||||
/** 趋势月数。 */
|
||||
export const TREND_MONTH_COUNT = 6;
|
||||
|
||||
/** 复制分类列表并重置展开状态。 */
|
||||
export function cloneCategoriesWithExpandState(
|
||||
categories: FinanceCostCategoryViewModel[],
|
||||
) {
|
||||
return categories.map((item) => ({
|
||||
...item,
|
||||
items: [...item.items],
|
||||
expanded: Boolean(item.expanded),
|
||||
}));
|
||||
}
|
||||
@@ -1,169 +0,0 @@
|
||||
/**
|
||||
* 文件职责：成本管理页面数据加载与保存动作。
|
||||
*/
|
||||
import type {
|
||||
FinanceCostAnalysisState,
|
||||
FinanceCostCategoryViewModel,
|
||||
FinanceCostEntryState,
|
||||
FinanceCostFilterState,
|
||||
} from '../../types';
|
||||
|
||||
import type { StoreListItemDto } from '#/api/store';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
getFinanceCostAnalysisApi,
|
||||
getFinanceCostEntryApi,
|
||||
saveFinanceCostEntryApi,
|
||||
} from '#/api/finance/cost';
|
||||
import { getStoreListApi } from '#/api/store';
|
||||
|
||||
import { DEFAULT_ANALYSIS_STATE, DEFAULT_ENTRY_STATE } from './constants';
|
||||
import {
|
||||
buildSaveCategoryPayload,
|
||||
buildScopeQueryPayload,
|
||||
mapCategoriesToViewModel,
|
||||
} from './helpers';
|
||||
|
||||
interface DataActionOptions {
|
||||
analysis: FinanceCostAnalysisState;
|
||||
entry: FinanceCostEntryState;
|
||||
filters: FinanceCostFilterState;
|
||||
isAnalysisLoading: { value: boolean };
|
||||
isEntryLoading: { value: boolean };
|
||||
isSaving: { value: boolean };
|
||||
isStoreLoading: { value: boolean };
|
||||
stores: { value: StoreListItemDto[] };
|
||||
}
|
||||
|
||||
/** 创建数据动作集合。 */
|
||||
export function createDataActions(options: DataActionOptions) {
|
||||
async function loadStores() {
|
||||
options.isStoreLoading.value = true;
|
||||
try {
|
||||
const result = await getStoreListApi({ page: 1, pageSize: 200 });
|
||||
options.stores.value = result.items ?? [];
|
||||
} finally {
|
||||
options.isStoreLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function clearEntry() {
|
||||
options.entry.monthRevenue = DEFAULT_ENTRY_STATE.monthRevenue;
|
||||
options.entry.totalCost = DEFAULT_ENTRY_STATE.totalCost;
|
||||
options.entry.costRate = DEFAULT_ENTRY_STATE.costRate;
|
||||
options.entry.categories = [];
|
||||
}
|
||||
|
||||
function clearAnalysis() {
|
||||
options.analysis.stats = { ...DEFAULT_ANALYSIS_STATE.stats };
|
||||
options.analysis.trend = [];
|
||||
options.analysis.composition = [];
|
||||
options.analysis.detailRows = [];
|
||||
}
|
||||
|
||||
function clearAllData() {
|
||||
clearEntry();
|
||||
clearAnalysis();
|
||||
}
|
||||
|
||||
async function loadEntryData() {
|
||||
if (options.filters.dimension === 'store' && !options.filters.storeId) {
|
||||
clearEntry();
|
||||
return;
|
||||
}
|
||||
|
||||
options.isEntryLoading.value = true;
|
||||
try {
|
||||
const expandedMap = new Map(
|
||||
(options.entry.categories ?? []).map((item) => [
|
||||
item.category,
|
||||
Boolean(item.expanded),
|
||||
]),
|
||||
);
|
||||
|
||||
const result = await getFinanceCostEntryApi(
|
||||
buildScopeQueryPayload(options.filters),
|
||||
);
|
||||
|
||||
options.entry.monthRevenue = result.monthRevenue;
|
||||
options.entry.totalCost = result.totalCost;
|
||||
options.entry.costRate = result.costRate;
|
||||
options.entry.categories = mapCategoriesToViewModel(
|
||||
result.categories ?? [],
|
||||
expandedMap,
|
||||
);
|
||||
} finally {
|
||||
options.isEntryLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAnalysisData() {
|
||||
if (options.filters.dimension === 'store' && !options.filters.storeId) {
|
||||
clearAnalysis();
|
||||
return;
|
||||
}
|
||||
|
||||
options.isAnalysisLoading.value = true;
|
||||
try {
|
||||
const result = await getFinanceCostAnalysisApi({
|
||||
...buildScopeQueryPayload(options.filters),
|
||||
trendMonthCount: 6,
|
||||
});
|
||||
|
||||
options.analysis.stats = { ...result.stats };
|
||||
options.analysis.trend = [...(result.trend ?? [])];
|
||||
options.analysis.composition = [...(result.composition ?? [])];
|
||||
options.analysis.detailRows = [...(result.detailRows ?? [])];
|
||||
} finally {
|
||||
options.isAnalysisLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function saveEntryData() {
|
||||
if (options.filters.dimension === 'store' && !options.filters.storeId) {
|
||||
message.warning('请先选择门店');
|
||||
return;
|
||||
}
|
||||
|
||||
options.isSaving.value = true;
|
||||
try {
|
||||
const result = await saveFinanceCostEntryApi({
|
||||
...buildScopeQueryPayload(options.filters),
|
||||
categories: buildSaveCategoryPayload(
|
||||
options.entry.categories as FinanceCostCategoryViewModel[],
|
||||
),
|
||||
});
|
||||
|
||||
const expandedMap = new Map(
|
||||
(options.entry.categories ?? []).map((item) => [
|
||||
item.category,
|
||||
Boolean(item.expanded),
|
||||
]),
|
||||
);
|
||||
|
||||
options.entry.monthRevenue = result.monthRevenue;
|
||||
options.entry.totalCost = result.totalCost;
|
||||
options.entry.costRate = result.costRate;
|
||||
options.entry.categories = mapCategoriesToViewModel(
|
||||
result.categories ?? [],
|
||||
expandedMap,
|
||||
);
|
||||
|
||||
message.success('成本数据保存成功');
|
||||
} finally {
|
||||
options.isSaving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
clearAllData,
|
||||
clearAnalysis,
|
||||
clearEntry,
|
||||
loadAnalysisData,
|
||||
loadEntryData,
|
||||
loadStores,
|
||||
saveEntryData,
|
||||
};
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
import type { CostDeleteModalState, CostDetailDrawerState } from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：成本明细抽屉与删除弹窗动作。
|
||||
*/
|
||||
import type {
|
||||
FinanceCostCategoryCode,
|
||||
FinanceCostEntryDetailDto,
|
||||
} from '#/api/finance/cost';
|
||||
|
||||
interface DrawerActionOptions {
|
||||
deleteModalState: CostDeleteModalState;
|
||||
drawerState: CostDetailDrawerState;
|
||||
removeDetailItem: (
|
||||
category: FinanceCostCategoryCode,
|
||||
itemId: string | undefined,
|
||||
) => void;
|
||||
upsertDetailItem: (
|
||||
category: FinanceCostCategoryCode,
|
||||
detail: FinanceCostEntryDetailDto,
|
||||
mode: 'create' | 'edit',
|
||||
) => void;
|
||||
}
|
||||
|
||||
/** 创建抽屉与弹窗动作。 */
|
||||
export function createDrawerActions(options: DrawerActionOptions) {
|
||||
function openCreateDrawer(category: FinanceCostCategoryCode) {
|
||||
options.drawerState.open = true;
|
||||
options.drawerState.mode = 'create';
|
||||
options.drawerState.category = category;
|
||||
options.drawerState.sourceItem = undefined;
|
||||
}
|
||||
|
||||
function openEditDrawer(
|
||||
category: FinanceCostCategoryCode,
|
||||
item: FinanceCostEntryDetailDto,
|
||||
) {
|
||||
options.drawerState.open = true;
|
||||
options.drawerState.mode = 'edit';
|
||||
options.drawerState.category = category;
|
||||
options.drawerState.sourceItem = { ...item };
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
options.drawerState.open = false;
|
||||
options.drawerState.sourceItem = undefined;
|
||||
}
|
||||
|
||||
function submitDrawer(detail: FinanceCostEntryDetailDto) {
|
||||
options.upsertDetailItem(
|
||||
options.drawerState.category,
|
||||
detail,
|
||||
options.drawerState.mode,
|
||||
);
|
||||
closeDrawer();
|
||||
}
|
||||
|
||||
function openDeleteModal(
|
||||
category: FinanceCostCategoryCode,
|
||||
item: FinanceCostEntryDetailDto,
|
||||
) {
|
||||
options.deleteModalState.open = true;
|
||||
options.deleteModalState.category = category;
|
||||
options.deleteModalState.item = item;
|
||||
}
|
||||
|
||||
function closeDeleteModal() {
|
||||
options.deleteModalState.open = false;
|
||||
options.deleteModalState.item = undefined;
|
||||
}
|
||||
|
||||
function confirmDelete() {
|
||||
options.removeDetailItem(
|
||||
options.deleteModalState.category,
|
||||
options.deleteModalState.item?.itemId,
|
||||
);
|
||||
closeDeleteModal();
|
||||
}
|
||||
|
||||
return {
|
||||
closeDeleteModal,
|
||||
closeDrawer,
|
||||
confirmDelete,
|
||||
openCreateDrawer,
|
||||
openDeleteModal,
|
||||
openEditDrawer,
|
||||
submitDrawer,
|
||||
};
|
||||
}
|
||||
@@ -1,122 +0,0 @@
|
||||
import type { FinanceCostEntryState } from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：成本录入分类与明细本地编辑动作。
|
||||
*/
|
||||
import type {
|
||||
FinanceCostCategoryCode,
|
||||
FinanceCostEntryDetailDto,
|
||||
} from '#/api/finance/cost';
|
||||
|
||||
import { roundAmount, sumAllCategoryTotal, sumCategoryItems } from './helpers';
|
||||
|
||||
interface EntryActionOptions {
|
||||
entry: FinanceCostEntryState;
|
||||
}
|
||||
|
||||
/** 创建录入区编辑动作。 */
|
||||
export function createEntryActions(options: EntryActionOptions) {
|
||||
function toggleCategoryExpanded(category: FinanceCostCategoryCode) {
|
||||
const target = options.entry.categories.find(
|
||||
(item) => item.category === category,
|
||||
);
|
||||
if (!target) return;
|
||||
target.expanded = !target.expanded;
|
||||
}
|
||||
|
||||
function setCategoryTotal(category: FinanceCostCategoryCode, value: number) {
|
||||
const target = options.entry.categories.find(
|
||||
(item) => item.category === category,
|
||||
);
|
||||
if (!target) return;
|
||||
target.totalAmount = Math.max(0, roundAmount(value));
|
||||
syncEntrySummary();
|
||||
}
|
||||
|
||||
function upsertDetailItem(
|
||||
category: FinanceCostCategoryCode,
|
||||
detail: FinanceCostEntryDetailDto,
|
||||
mode: 'create' | 'edit',
|
||||
) {
|
||||
const target = options.entry.categories.find(
|
||||
(item) => item.category === category,
|
||||
);
|
||||
if (!target) return;
|
||||
|
||||
const nextItem: FinanceCostEntryDetailDto = {
|
||||
...detail,
|
||||
itemId: detail.itemId || createTempItemId(),
|
||||
amount: resolveDetailAmount(category, detail),
|
||||
quantity:
|
||||
detail.quantity === undefined
|
||||
? undefined
|
||||
: roundAmount(detail.quantity),
|
||||
unitPrice:
|
||||
detail.unitPrice === undefined
|
||||
? undefined
|
||||
: roundAmount(detail.unitPrice),
|
||||
sortOrder: detail.sortOrder > 0 ? detail.sortOrder : 1,
|
||||
};
|
||||
|
||||
const index = target.items.findIndex(
|
||||
(item) => item.itemId === detail.itemId,
|
||||
);
|
||||
if (mode === 'edit' && index !== -1) {
|
||||
target.items.splice(index, 1, nextItem);
|
||||
} else {
|
||||
target.items.push(nextItem);
|
||||
}
|
||||
|
||||
target.items.sort((left, right) => left.sortOrder - right.sortOrder);
|
||||
target.totalAmount = sumCategoryItems(target);
|
||||
syncEntrySummary();
|
||||
}
|
||||
|
||||
function removeDetailItem(
|
||||
category: FinanceCostCategoryCode,
|
||||
itemId: string | undefined,
|
||||
) {
|
||||
const target = options.entry.categories.find(
|
||||
(item) => item.category === category,
|
||||
);
|
||||
if (!target || !itemId) return;
|
||||
|
||||
target.items = target.items.filter((item) => item.itemId !== itemId);
|
||||
target.totalAmount = sumCategoryItems(target);
|
||||
syncEntrySummary();
|
||||
}
|
||||
|
||||
function syncEntrySummary() {
|
||||
const totalCost = sumAllCategoryTotal(options.entry.categories);
|
||||
options.entry.totalCost = totalCost;
|
||||
options.entry.costRate =
|
||||
options.entry.monthRevenue > 0
|
||||
? roundAmount((totalCost / options.entry.monthRevenue) * 100)
|
||||
: 0;
|
||||
}
|
||||
|
||||
return {
|
||||
removeDetailItem,
|
||||
setCategoryTotal,
|
||||
syncEntrySummary,
|
||||
toggleCategoryExpanded,
|
||||
upsertDetailItem,
|
||||
};
|
||||
}
|
||||
|
||||
function resolveDetailAmount(
|
||||
category: FinanceCostCategoryCode,
|
||||
detail: FinanceCostEntryDetailDto,
|
||||
) {
|
||||
if (category !== 'labor') {
|
||||
return Math.max(0, roundAmount(detail.amount));
|
||||
}
|
||||
|
||||
const quantity = roundAmount(detail.quantity ?? 0);
|
||||
const unitPrice = roundAmount(detail.unitPrice ?? 0);
|
||||
return Math.max(0, roundAmount(quantity * unitPrice));
|
||||
}
|
||||
|
||||
function createTempItemId() {
|
||||
return `tmp-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
import type { FinanceCostFilterState, FinanceCostTabKey } from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：成本管理页面筛选项与月份切换动作。
|
||||
*/
|
||||
import type { FinanceCostDimension } from '#/api/finance/cost';
|
||||
|
||||
import { getCurrentMonthString, shiftMonth } from './helpers';
|
||||
|
||||
interface FilterActionOptions {
|
||||
activeTab: { value: FinanceCostTabKey };
|
||||
filters: FinanceCostFilterState;
|
||||
}
|
||||
|
||||
/** 创建筛选动作。 */
|
||||
export function createFilterActions(options: FilterActionOptions) {
|
||||
function setActiveTab(value: FinanceCostTabKey) {
|
||||
options.activeTab.value = value;
|
||||
}
|
||||
|
||||
function setDimension(value: FinanceCostDimension) {
|
||||
options.filters.dimension = value;
|
||||
}
|
||||
|
||||
function setStoreId(value: string) {
|
||||
options.filters.storeId = value;
|
||||
}
|
||||
|
||||
function setMonth(value: string) {
|
||||
options.filters.month = value || getCurrentMonthString();
|
||||
}
|
||||
|
||||
function shiftCurrentMonth(offset: number) {
|
||||
options.filters.month = shiftMonth(options.filters.month, offset);
|
||||
}
|
||||
|
||||
function setPreviousMonth() {
|
||||
shiftCurrentMonth(-1);
|
||||
}
|
||||
|
||||
function setNextMonth() {
|
||||
shiftCurrentMonth(1);
|
||||
}
|
||||
|
||||
return {
|
||||
setActiveTab,
|
||||
setDimension,
|
||||
setMonth,
|
||||
setNextMonth,
|
||||
setPreviousMonth,
|
||||
setStoreId,
|
||||
};
|
||||
}
|
||||
@@ -1,154 +0,0 @@
|
||||
import type { FinanceCostFilterState } from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：成本管理页面纯函数与格式化工具。
|
||||
*/
|
||||
import type {
|
||||
FinanceCostCategoryCode,
|
||||
FinanceCostEntryCategoryDto,
|
||||
SaveFinanceCostCategoryPayload,
|
||||
} from '#/api/finance/cost';
|
||||
|
||||
/** 解析为有限数字。 */
|
||||
export function toFiniteNumber(value: unknown, fallback = 0) {
|
||||
const normalized = Number(value);
|
||||
return Number.isFinite(normalized) ? normalized : fallback;
|
||||
}
|
||||
|
||||
/** 金额保留两位小数。 */
|
||||
export function roundAmount(value: unknown) {
|
||||
const normalized = toFiniteNumber(value, 0);
|
||||
return Math.round(normalized * 100) / 100;
|
||||
}
|
||||
|
||||
/** 货币格式化。 */
|
||||
export function formatCurrency(value: unknown) {
|
||||
return new Intl.NumberFormat('zh-CN', {
|
||||
style: 'currency',
|
||||
currency: 'CNY',
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
}).format(roundAmount(value));
|
||||
}
|
||||
|
||||
/** 百分比格式化。 */
|
||||
export function formatPercent(value: unknown) {
|
||||
return `${roundAmount(value).toFixed(2)}%`;
|
||||
}
|
||||
|
||||
/** 获取当前月份（yyyy-MM）。 */
|
||||
export function getCurrentMonthString() {
|
||||
const now = new Date();
|
||||
const month = `${now.getMonth() + 1}`.padStart(2, '0');
|
||||
return `${now.getFullYear()}-${month}`;
|
||||
}
|
||||
|
||||
/** 月份字符串转标题文本。 */
|
||||
export function formatMonthTitle(month: string) {
|
||||
const normalized = month.trim();
|
||||
const [year, monthValue] = normalized.split('-');
|
||||
if (!year || !monthValue) {
|
||||
return normalized || '--';
|
||||
}
|
||||
return `${year}年${Number(monthValue)}月`;
|
||||
}
|
||||
|
||||
/** 月份位移。 */
|
||||
export function shiftMonth(month: string, offset: number) {
|
||||
const parsed = parseMonth(month);
|
||||
if (!parsed) {
|
||||
return getCurrentMonthString();
|
||||
}
|
||||
parsed.setMonth(parsed.getMonth() + offset);
|
||||
return formatMonth(parsed);
|
||||
}
|
||||
|
||||
/** 构建查询作用域参数。 */
|
||||
export function buildScopeQueryPayload(filters: FinanceCostFilterState) {
|
||||
return {
|
||||
dimension: filters.dimension,
|
||||
month: filters.month || undefined,
|
||||
storeId:
|
||||
filters.dimension === 'store' ? filters.storeId || undefined : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
/** 将 API 分类数据映射为页面视图模型。 */
|
||||
export function mapCategoriesToViewModel(
|
||||
categories: FinanceCostEntryCategoryDto[],
|
||||
expandedMap: Map<FinanceCostCategoryCode, boolean>,
|
||||
) {
|
||||
return (categories ?? []).map((item) => ({
|
||||
...item,
|
||||
items: [...(item.items ?? [])],
|
||||
expanded: expandedMap.get(item.category) ?? false,
|
||||
}));
|
||||
}
|
||||
|
||||
/** 计算分类总金额。 */
|
||||
export function sumCategoryItems(
|
||||
category: Pick<FinanceCostEntryCategoryDto, 'category' | 'items'>,
|
||||
) {
|
||||
let total = 0;
|
||||
for (const item of category.items ?? []) {
|
||||
if (category.category === 'labor') {
|
||||
const quantity = toFiniteNumber(item.quantity, 0);
|
||||
const unitPrice = toFiniteNumber(item.unitPrice, 0);
|
||||
total += roundAmount(quantity * unitPrice);
|
||||
continue;
|
||||
}
|
||||
total += roundAmount(item.amount);
|
||||
}
|
||||
return roundAmount(total);
|
||||
}
|
||||
|
||||
/** 计算全部分类总成本。 */
|
||||
export function sumAllCategoryTotal(categories: FinanceCostEntryCategoryDto[]) {
|
||||
let total = 0;
|
||||
for (const category of categories ?? []) {
|
||||
total += roundAmount(category.totalAmount);
|
||||
}
|
||||
return roundAmount(total);
|
||||
}
|
||||
|
||||
/** 构建保存请求分类数组。 */
|
||||
export function buildSaveCategoryPayload(
|
||||
categories: FinanceCostEntryCategoryDto[],
|
||||
): SaveFinanceCostCategoryPayload[] {
|
||||
return (categories ?? []).map((category) => ({
|
||||
category: category.category,
|
||||
totalAmount: roundAmount(category.totalAmount),
|
||||
items: (category.items ?? []).map((item, index) => ({
|
||||
itemId: item.itemId,
|
||||
itemName: item.itemName.trim(),
|
||||
amount: roundAmount(item.amount),
|
||||
quantity:
|
||||
item.quantity === undefined ? undefined : roundAmount(item.quantity),
|
||||
unitPrice:
|
||||
item.unitPrice === undefined ? undefined : roundAmount(item.unitPrice),
|
||||
sortOrder: item.sortOrder > 0 ? item.sortOrder : index + 1,
|
||||
})),
|
||||
}));
|
||||
}
|
||||
|
||||
function parseMonth(value: string) {
|
||||
const normalized = value.trim();
|
||||
const [year, month] = normalized.split('-');
|
||||
const yearValue = Number(year);
|
||||
const monthValue = Number(month);
|
||||
if (
|
||||
!Number.isInteger(yearValue) ||
|
||||
!Number.isInteger(monthValue) ||
|
||||
monthValue < 1 ||
|
||||
monthValue > 12
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
return new Date(yearValue, monthValue - 1, 1);
|
||||
}
|
||||
|
||||
function formatMonth(date: Date) {
|
||||
const year = date.getFullYear();
|
||||
const month = `${date.getMonth() + 1}`.padStart(2, '0');
|
||||
return `${year}-${month}`;
|
||||
}
|
||||
@@ -1,313 +0,0 @@
|
||||
import type {
|
||||
CostDeleteModalState,
|
||||
CostDetailDrawerState,
|
||||
FinanceCostAnalysisState,
|
||||
FinanceCostEntryState,
|
||||
FinanceCostFilterState,
|
||||
FinanceCostTabKey,
|
||||
OptionItem,
|
||||
} from '../types';
|
||||
|
||||
/**
|
||||
* 文件职责：成本管理页面状态与动作编排。
|
||||
*/
|
||||
import type { FinanceCostCategoryCode } from '#/api/finance/cost';
|
||||
import type { StoreListItemDto } from '#/api/store';
|
||||
|
||||
import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue';
|
||||
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
COST_DIMENSION_OPTIONS,
|
||||
COST_TAB_OPTIONS,
|
||||
DEFAULT_ANALYSIS_STATE,
|
||||
DEFAULT_ENTRY_STATE,
|
||||
DEFAULT_FILTER_STATE,
|
||||
FINANCE_COST_MANAGE_PERMISSION,
|
||||
FINANCE_COST_VIEW_PERMISSION,
|
||||
} from './cost-page/constants';
|
||||
import { createDataActions } from './cost-page/data-actions';
|
||||
import { createDrawerActions } from './cost-page/drawer-actions';
|
||||
import { createEntryActions } from './cost-page/entry-actions';
|
||||
import { createFilterActions } from './cost-page/filter-actions';
|
||||
import { formatMonthTitle, getCurrentMonthString } from './cost-page/helpers';
|
||||
|
||||
/** 创建成本管理页面组合状态。 */
|
||||
export function useFinanceCostPage() {
|
||||
const accessStore = useAccessStore();
|
||||
|
||||
const stores = ref<StoreListItemDto[]>([]);
|
||||
const activeTab = ref<FinanceCostTabKey>('entry');
|
||||
const filters = reactive<FinanceCostFilterState>({
|
||||
...DEFAULT_FILTER_STATE,
|
||||
month: getCurrentMonthString(),
|
||||
});
|
||||
|
||||
const entry = reactive<FinanceCostEntryState>({
|
||||
...DEFAULT_ENTRY_STATE,
|
||||
});
|
||||
const analysis = reactive<FinanceCostAnalysisState>({
|
||||
...DEFAULT_ANALYSIS_STATE,
|
||||
});
|
||||
|
||||
const isStoreLoading = ref(false);
|
||||
const isEntryLoading = ref(false);
|
||||
const isAnalysisLoading = ref(false);
|
||||
const isSaving = ref(false);
|
||||
|
||||
const drawerState = reactive<CostDetailDrawerState>({
|
||||
open: false,
|
||||
mode: 'create',
|
||||
category: 'food',
|
||||
});
|
||||
const deleteModalState = reactive<CostDeleteModalState>({
|
||||
open: false,
|
||||
category: 'food',
|
||||
});
|
||||
|
||||
const accessCodeSet = computed(
|
||||
() => new Set((accessStore.accessCodes ?? []).map(String)),
|
||||
);
|
||||
const canManage = computed(() =>
|
||||
accessCodeSet.value.has(FINANCE_COST_MANAGE_PERMISSION),
|
||||
);
|
||||
const canView = computed(
|
||||
() =>
|
||||
accessCodeSet.value.has(FINANCE_COST_VIEW_PERMISSION) ||
|
||||
accessCodeSet.value.has(FINANCE_COST_MANAGE_PERMISSION),
|
||||
);
|
||||
|
||||
const storeOptions = computed<OptionItem[]>(() =>
|
||||
stores.value.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
})),
|
||||
);
|
||||
|
||||
const selectedStoreName = computed(
|
||||
() =>
|
||||
storeOptions.value.find((item) => item.value === filters.storeId)
|
||||
?.label ?? '--',
|
||||
);
|
||||
|
||||
const monthTitle = computed(() => formatMonthTitle(filters.month));
|
||||
const showStoreSelect = computed(() => filters.dimension === 'store');
|
||||
const hasStore = computed(() => stores.value.length > 0);
|
||||
const canQueryCurrentScope = computed(
|
||||
() => filters.dimension === 'tenant' || Boolean(filters.storeId),
|
||||
);
|
||||
const drawerCategoryText = computed(() => {
|
||||
const matched = entry.categories.find(
|
||||
(item) => item.category === drawerState.category,
|
||||
);
|
||||
return matched?.categoryText || '明细';
|
||||
});
|
||||
const tabOptions = computed(() => COST_TAB_OPTIONS);
|
||||
const dimensionOptions = computed(() => COST_DIMENSION_OPTIONS);
|
||||
|
||||
const dataActions = createDataActions({
|
||||
stores,
|
||||
filters,
|
||||
entry,
|
||||
analysis,
|
||||
isStoreLoading,
|
||||
isEntryLoading,
|
||||
isAnalysisLoading,
|
||||
isSaving,
|
||||
});
|
||||
const entryActions = createEntryActions({ entry });
|
||||
const filterActions = createFilterActions({ activeTab, filters });
|
||||
const drawerActions = createDrawerActions({
|
||||
drawerState,
|
||||
deleteModalState,
|
||||
upsertDetailItem: entryActions.upsertDetailItem,
|
||||
removeDetailItem: entryActions.removeDetailItem,
|
||||
});
|
||||
|
||||
async function loadByCurrentTab() {
|
||||
if (!canView.value) return;
|
||||
if (!canQueryCurrentScope.value) {
|
||||
if (activeTab.value === 'entry') {
|
||||
dataActions.clearEntry();
|
||||
} else {
|
||||
dataActions.clearAnalysis();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (activeTab.value === 'entry') {
|
||||
await dataActions.loadEntryData();
|
||||
return;
|
||||
}
|
||||
|
||||
await dataActions.loadAnalysisData();
|
||||
}
|
||||
|
||||
async function loadAllPanels() {
|
||||
if (!canView.value || !canQueryCurrentScope.value) return;
|
||||
await Promise.all([
|
||||
dataActions.loadEntryData(),
|
||||
dataActions.loadAnalysisData(),
|
||||
]);
|
||||
}
|
||||
|
||||
function ensureStoreSelection() {
|
||||
if (filters.dimension !== 'store') return;
|
||||
if (filters.storeId) return;
|
||||
if (stores.value.length === 0) return;
|
||||
filters.storeId = stores.value[0]?.id ?? '';
|
||||
}
|
||||
|
||||
function clearByPermission() {
|
||||
stores.value = [];
|
||||
filters.storeId = '';
|
||||
dataActions.clearAllData();
|
||||
drawerActions.closeDrawer();
|
||||
drawerActions.closeDeleteModal();
|
||||
}
|
||||
|
||||
async function initPageData() {
|
||||
if (!canView.value) {
|
||||
clearByPermission();
|
||||
return;
|
||||
}
|
||||
|
||||
await dataActions.loadStores();
|
||||
ensureStoreSelection();
|
||||
await loadByCurrentTab();
|
||||
}
|
||||
|
||||
async function saveEntry() {
|
||||
if (!canManage.value) {
|
||||
message.warning('当前账号没有维护权限');
|
||||
return;
|
||||
}
|
||||
|
||||
await dataActions.saveEntryData();
|
||||
await dataActions.loadAnalysisData();
|
||||
}
|
||||
|
||||
function openAddDetail(category: FinanceCostCategoryCode) {
|
||||
if (!canManage.value) {
|
||||
message.warning('当前账号没有维护权限');
|
||||
return;
|
||||
}
|
||||
drawerActions.openCreateDrawer(category);
|
||||
}
|
||||
|
||||
function openEditDetail(category: FinanceCostCategoryCode, itemId: string) {
|
||||
if (!canManage.value) {
|
||||
message.warning('当前账号没有维护权限');
|
||||
return;
|
||||
}
|
||||
|
||||
const targetCategory = entry.categories.find(
|
||||
(current) => current.category === category,
|
||||
);
|
||||
const targetItem = targetCategory?.items.find(
|
||||
(current) => current.itemId === itemId,
|
||||
);
|
||||
if (!targetItem) return;
|
||||
drawerActions.openEditDrawer(category, targetItem);
|
||||
}
|
||||
|
||||
function openDeleteDetail(category: FinanceCostCategoryCode, itemId: string) {
|
||||
if (!canManage.value) {
|
||||
message.warning('当前账号没有维护权限');
|
||||
return;
|
||||
}
|
||||
|
||||
const targetCategory = entry.categories.find(
|
||||
(current) => current.category === category,
|
||||
);
|
||||
const targetItem = targetCategory?.items.find(
|
||||
(current) => current.itemId === itemId,
|
||||
);
|
||||
if (!targetItem) return;
|
||||
drawerActions.openDeleteModal(category, targetItem);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => activeTab.value,
|
||||
async () => {
|
||||
await loadByCurrentTab();
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => [filters.dimension, filters.storeId, filters.month],
|
||||
async () => {
|
||||
if (filters.dimension === 'store') {
|
||||
ensureStoreSelection();
|
||||
}
|
||||
await loadByCurrentTab();
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => canView.value,
|
||||
async (value, oldValue) => {
|
||||
if (value === oldValue) return;
|
||||
if (!value) {
|
||||
clearByPermission();
|
||||
return;
|
||||
}
|
||||
await initPageData();
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
await initPageData();
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
if (!canView.value) return;
|
||||
if (stores.value.length === 0) {
|
||||
void initPageData();
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
activeTab,
|
||||
analysis,
|
||||
canManage,
|
||||
canQueryCurrentScope,
|
||||
canView,
|
||||
deleteModalState,
|
||||
dimensionOptions,
|
||||
drawerCategoryText,
|
||||
drawerState,
|
||||
entry,
|
||||
filters,
|
||||
hasStore,
|
||||
isAnalysisLoading,
|
||||
isEntryLoading,
|
||||
isSaving,
|
||||
isStoreLoading,
|
||||
loadAllPanels,
|
||||
monthTitle,
|
||||
openAddDetail,
|
||||
openDeleteDetail,
|
||||
openEditDetail,
|
||||
saveEntry,
|
||||
selectedStoreName,
|
||||
setActiveTab: filterActions.setActiveTab,
|
||||
setCategoryTotal: entryActions.setCategoryTotal,
|
||||
setDimension: filterActions.setDimension,
|
||||
setMonth: filterActions.setMonth,
|
||||
setNextMonth: filterActions.setNextMonth,
|
||||
setPreviousMonth: filterActions.setPreviousMonth,
|
||||
setStoreId: filterActions.setStoreId,
|
||||
showStoreSelect,
|
||||
storeOptions,
|
||||
submitDetailFromDrawer: drawerActions.submitDrawer,
|
||||
tabOptions,
|
||||
toggleCategoryExpanded: entryActions.toggleCategoryExpanded,
|
||||
closeDetailDrawer: drawerActions.closeDrawer,
|
||||
closeDeleteModal: drawerActions.closeDeleteModal,
|
||||
confirmDeleteDetail: drawerActions.confirmDelete,
|
||||
};
|
||||
}
|
||||
@@ -1,184 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：财务中心成本管理页面入口编排。
|
||||
*/
|
||||
import type {
|
||||
FinanceCostCategoryCode,
|
||||
FinanceCostEntryDetailDto,
|
||||
} from '#/api/finance/cost';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { Empty } from 'ant-design-vue';
|
||||
|
||||
import CostAnalysisComposition from './components/CostAnalysisComposition.vue';
|
||||
import CostAnalysisDetailTable from './components/CostAnalysisDetailTable.vue';
|
||||
import CostAnalysisStatsBar from './components/CostAnalysisStatsBar.vue';
|
||||
import CostAnalysisTrendChart from './components/CostAnalysisTrendChart.vue';
|
||||
import CostDetailDeleteModal from './components/CostDetailDeleteModal.vue';
|
||||
import CostEntryCategoryCard from './components/CostEntryCategoryCard.vue';
|
||||
import CostEntrySummaryBar from './components/CostEntrySummaryBar.vue';
|
||||
import CostItemEditorDrawer from './components/CostItemEditorDrawer.vue';
|
||||
import CostPageToolbar from './components/CostPageToolbar.vue';
|
||||
import {
|
||||
COST_CATEGORY_COLOR_MAP,
|
||||
COST_CATEGORY_ICON_MAP,
|
||||
} from './composables/cost-page/constants';
|
||||
import { formatCurrency } from './composables/cost-page/helpers';
|
||||
import { useFinanceCostPage } from './composables/useFinanceCostPage';
|
||||
|
||||
const {
|
||||
activeTab,
|
||||
analysis,
|
||||
canManage,
|
||||
canQueryCurrentScope,
|
||||
canView,
|
||||
closeDeleteModal,
|
||||
closeDetailDrawer,
|
||||
confirmDeleteDetail,
|
||||
deleteModalState,
|
||||
dimensionOptions,
|
||||
drawerCategoryText,
|
||||
drawerState,
|
||||
entry,
|
||||
filters,
|
||||
hasStore,
|
||||
isAnalysisLoading,
|
||||
isEntryLoading,
|
||||
isSaving,
|
||||
isStoreLoading,
|
||||
monthTitle,
|
||||
openAddDetail,
|
||||
openDeleteDetail,
|
||||
openEditDetail,
|
||||
saveEntry,
|
||||
setActiveTab,
|
||||
setCategoryTotal,
|
||||
setDimension,
|
||||
setMonth,
|
||||
setNextMonth,
|
||||
setPreviousMonth,
|
||||
setStoreId,
|
||||
showStoreSelect,
|
||||
storeOptions,
|
||||
submitDetailFromDrawer,
|
||||
tabOptions,
|
||||
toggleCategoryExpanded,
|
||||
} = useFinanceCostPage();
|
||||
|
||||
function handleAddDetail(category: FinanceCostCategoryCode) {
|
||||
openAddDetail(category);
|
||||
}
|
||||
|
||||
function handleEditDetail(category: FinanceCostCategoryCode, itemId: string) {
|
||||
openEditDetail(category, itemId);
|
||||
}
|
||||
|
||||
function handleDeleteDetail(category: FinanceCostCategoryCode, itemId: string) {
|
||||
openDeleteDetail(category, itemId);
|
||||
}
|
||||
|
||||
function handleSubmitDrawer(detail: FinanceCostEntryDetailDto) {
|
||||
submitDetailFromDrawer(detail);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page title="成本管理" content-class="page-finance-cost">
|
||||
<div class="fc-page">
|
||||
<CostPageToolbar
|
||||
:active-tab="activeTab"
|
||||
:tab-options="tabOptions"
|
||||
:dimension="filters.dimension"
|
||||
:dimension-options="dimensionOptions"
|
||||
:show-store-select="showStoreSelect"
|
||||
:store-id="filters.storeId"
|
||||
:store-options="storeOptions"
|
||||
:is-store-loading="isStoreLoading"
|
||||
:month="filters.month"
|
||||
:month-title="monthTitle"
|
||||
@update:active-tab="setActiveTab"
|
||||
@update:dimension="setDimension"
|
||||
@update:store-id="setStoreId"
|
||||
@update:month="setMonth"
|
||||
@prev-month="setPreviousMonth"
|
||||
@next-month="setNextMonth"
|
||||
/>
|
||||
|
||||
<Empty v-if="!canView" description="暂无成本管理页面访问权限" />
|
||||
|
||||
<div v-else-if="showStoreSelect && !hasStore" class="fc-empty">
|
||||
<Empty description="暂无门店，请先创建门店" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="!canQueryCurrentScope" class="fc-empty">
|
||||
<Empty description="请选择门店后查看数据" />
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<section v-show="activeTab === 'entry'" class="fc-entry-panel">
|
||||
<div class="fc-entry-revenue">
|
||||
本月营业额：<strong>{{
|
||||
formatCurrency(entry.monthRevenue)
|
||||
}}</strong>
|
||||
</div>
|
||||
|
||||
<div class="fc-entry-list" :class="{ 'is-loading': isEntryLoading }">
|
||||
<CostEntryCategoryCard
|
||||
v-for="category in entry.categories"
|
||||
:key="category.category"
|
||||
:category="category"
|
||||
:can-manage="canManage"
|
||||
:icon="COST_CATEGORY_ICON_MAP[category.category]"
|
||||
:color="COST_CATEGORY_COLOR_MAP[category.category]"
|
||||
@toggle="toggleCategoryExpanded"
|
||||
@update-total="setCategoryTotal"
|
||||
@add-item="handleAddDetail"
|
||||
@edit-item="handleEditDetail"
|
||||
@delete-item="handleDeleteDetail"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<CostEntrySummaryBar
|
||||
:can-manage="canManage"
|
||||
:loading="isSaving"
|
||||
:total-cost="entry.totalCost"
|
||||
@save="saveEntry"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section v-show="activeTab === 'analysis'" class="fc-analysis-panel">
|
||||
<CostAnalysisStatsBar :stats="analysis.stats" />
|
||||
<CostAnalysisTrendChart :trend="analysis.trend" />
|
||||
<CostAnalysisComposition :composition="analysis.composition" />
|
||||
<CostAnalysisDetailTable
|
||||
:rows="analysis.detailRows"
|
||||
:loading="isAnalysisLoading"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<CostItemEditorDrawer
|
||||
:open="drawerState.open"
|
||||
:mode="drawerState.mode"
|
||||
:category="drawerState.category"
|
||||
:category-text="drawerCategoryText"
|
||||
:source-item="drawerState.sourceItem"
|
||||
:submitting="false"
|
||||
@close="closeDetailDrawer"
|
||||
@submit="handleSubmitDrawer"
|
||||
/>
|
||||
|
||||
<CostDetailDeleteModal
|
||||
:open="deleteModalState.open"
|
||||
:item-name="deleteModalState.item?.itemName"
|
||||
@cancel="closeDeleteModal"
|
||||
@confirm="confirmDeleteDetail"
|
||||
/>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
@import './styles/index.less';
|
||||
</style>
|
||||
@@ -1,146 +0,0 @@
|
||||
/**
|
||||
* 文件职责：成本分析区域样式。
|
||||
*/
|
||||
.fc-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fc-stat-card {
|
||||
padding: 16px;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 5%);
|
||||
}
|
||||
|
||||
.fc-stat-label {
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fc-stat-value {
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
|
||||
&.is-up {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
&.is-down {
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
&.is-flat {
|
||||
color: rgb(0 0 0 / 65%);
|
||||
}
|
||||
}
|
||||
|
||||
.fc-section-title {
|
||||
padding-left: 10px;
|
||||
margin-bottom: 14px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
border-left: 3px solid #1677ff;
|
||||
}
|
||||
|
||||
.fc-chart-card,
|
||||
.fc-composition-card,
|
||||
.fc-table-card {
|
||||
padding: 18px;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 5%);
|
||||
}
|
||||
|
||||
.fc-trend-chart {
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
.fc-composition-body {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fc-composition-chart-wrap {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.fc-composition-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fc-composition-center {
|
||||
position: absolute;
|
||||
inset: 71px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.fc-composition-center-value {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fc-composition-center-label {
|
||||
font-size: 11px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fc-composition-legend {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.fc-composition-legend-item {
|
||||
display: grid;
|
||||
grid-template-columns: 10px 1fr auto auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.fc-composition-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.fc-composition-name {
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fc-composition-amount {
|
||||
min-width: 88px;
|
||||
color: rgb(0 0 0 / 65%);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.fc-composition-percent {
|
||||
min-width: 54px;
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.fc-total-amount {
|
||||
font-weight: 700;
|
||||
color: #1677ff;
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
/**
|
||||
* 文件职责：成本管理页面基础容器样式。
|
||||
*/
|
||||
.page-finance-cost {
|
||||
.ant-card {
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.fc-empty {
|
||||
padding: 36px 0;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
/**
|
||||
* 文件职责：成本明细抽屉与删除弹窗样式。
|
||||
*/
|
||||
.fc-full-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fc-drawer-footer {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.fc-delete-tip {
|
||||
margin: 4px 0 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.8;
|
||||
color: rgb(0 0 0 / 65%);
|
||||
|
||||
strong {
|
||||
margin: 0 4px;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
}
|
||||
@@ -1,153 +0,0 @@
|
||||
/**
|
||||
* 文件职责：成本录入区域样式。
|
||||
*/
|
||||
.fc-entry-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fc-entry-card {
|
||||
.ant-card-body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-entry-head {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding: 16px 18px;
|
||||
}
|
||||
|
||||
.fc-entry-icon {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
background: rgb(22 119 255 / 8%);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.fc-entry-meta {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.fc-entry-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fc-entry-ratio {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fc-entry-amount {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.fc-entry-currency {
|
||||
font-size: 13px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fc-entry-input {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.fc-entry-toggle {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fc-entry-detail {
|
||||
padding: 0 18px 16px;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.fc-entry-detail-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #f6f7f9;
|
||||
}
|
||||
|
||||
.fc-entry-item-name {
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
font-size: 13px;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fc-entry-item-value {
|
||||
display: inline-flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-width: 240px;
|
||||
}
|
||||
|
||||
.fc-entry-item-amount {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fc-entry-mul,
|
||||
.fc-entry-equal {
|
||||
font-size: 12px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fc-entry-item-actions {
|
||||
display: inline-flex;
|
||||
justify-content: flex-end;
|
||||
min-width: 104px;
|
||||
}
|
||||
|
||||
.fc-entry-add {
|
||||
padding: 0;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.fc-entry-empty {
|
||||
padding: 10px 0 2px;
|
||||
}
|
||||
|
||||
.fc-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
background: #f8f9fb;
|
||||
border: 1px solid #eef0f4;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.fc-summary-label {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fc-summary-right {
|
||||
display: inline-flex;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fc-summary-value {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
color: #1677ff;
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
/**
|
||||
* 文件职责：成本管理页面样式聚合入口。
|
||||
*/
|
||||
@import './base.less';
|
||||
@import './layout.less';
|
||||
@import './entry.less';
|
||||
@import './analysis.less';
|
||||
@import './drawer.less';
|
||||
@import './responsive.less';
|
||||
@@ -1,86 +0,0 @@
|
||||
/**
|
||||
* 文件职责：成本管理页面布局与顶部工具条样式。
|
||||
*/
|
||||
.fc-toolbar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 16px;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.fc-toolbar-right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.fc-tab-segmented {
|
||||
.ant-segmented-item {
|
||||
min-width: 108px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-dimension-segmented {
|
||||
.ant-segmented-item {
|
||||
min-width: 92px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-store-select {
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
.fc-month-picker {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fc-month-arrow {
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
color: rgb(0 0 0 / 65%);
|
||||
}
|
||||
|
||||
.fc-month-title {
|
||||
min-width: 100px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fc-month-input {
|
||||
width: 128px;
|
||||
}
|
||||
|
||||
.fc-entry-revenue {
|
||||
padding: 10px 12px;
|
||||
font-size: 13px;
|
||||
color: rgb(0 0 0 / 65%);
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
|
||||
strong {
|
||||
margin-left: 6px;
|
||||
font-size: 15px;
|
||||
color: #1677ff;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-entry-panel,
|
||||
.fc-analysis-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
@@ -1,84 +0,0 @@
|
||||
/**
|
||||
* 文件职责：成本管理页面响应式适配样式。
|
||||
*/
|
||||
@media (max-width: 1280px) {
|
||||
.fc-stats {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.fc-composition-body {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.fc-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.fc-toolbar-right {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.fc-store-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fc-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.fc-composition-body {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.fc-composition-chart-wrap {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.fc-entry-head {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.fc-entry-meta {
|
||||
width: calc(100% - 56px);
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.fc-entry-amount {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.fc-entry-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.fc-entry-toggle {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.fc-entry-detail-row {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.fc-entry-item-value {
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.fc-entry-item-actions {
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fc-summary {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
/**
|
||||
* 文件职责：成本管理页面本地类型定义。
|
||||
*/
|
||||
import type {
|
||||
FinanceCostAnalysisDto,
|
||||
FinanceCostCategoryCode,
|
||||
FinanceCostCompositionDto,
|
||||
FinanceCostDimension,
|
||||
FinanceCostEntryCategoryDto,
|
||||
FinanceCostEntryDetailDto,
|
||||
FinanceCostTrendPointDto,
|
||||
} from '#/api/finance/cost';
|
||||
|
||||
/** 页面 Tab 键。 */
|
||||
export type FinanceCostTabKey = 'analysis' | 'entry';
|
||||
|
||||
/** 选项项。 */
|
||||
export interface OptionItem {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
/** 成本分类视图模型。 */
|
||||
export interface FinanceCostCategoryViewModel extends FinanceCostEntryCategoryDto {
|
||||
expanded: boolean;
|
||||
}
|
||||
|
||||
/** 录入区域状态。 */
|
||||
export interface FinanceCostEntryState {
|
||||
categories: FinanceCostCategoryViewModel[];
|
||||
costRate: number;
|
||||
monthRevenue: number;
|
||||
totalCost: number;
|
||||
}
|
||||
|
||||
/** 分析区域状态。 */
|
||||
export interface FinanceCostAnalysisState {
|
||||
composition: FinanceCostCompositionDto[];
|
||||
detailRows: FinanceCostAnalysisDto['detailRows'];
|
||||
stats: FinanceCostAnalysisDto['stats'];
|
||||
trend: FinanceCostTrendPointDto[];
|
||||
}
|
||||
|
||||
/** 明细抽屉模式。 */
|
||||
export type CostDetailDrawerMode = 'create' | 'edit';
|
||||
|
||||
/** 明细抽屉状态。 */
|
||||
export interface CostDetailDrawerState {
|
||||
category: FinanceCostCategoryCode;
|
||||
mode: CostDetailDrawerMode;
|
||||
open: boolean;
|
||||
sourceItem?: FinanceCostEntryDetailDto;
|
||||
}
|
||||
|
||||
/** 删除弹窗状态。 */
|
||||
export interface CostDeleteModalState {
|
||||
category: FinanceCostCategoryCode;
|
||||
item?: FinanceCostEntryDetailDto;
|
||||
open: boolean;
|
||||
}
|
||||
|
||||
/** 页面筛选状态。 */
|
||||
export interface FinanceCostFilterState {
|
||||
dimension: FinanceCostDimension;
|
||||
month: string;
|
||||
storeId: string;
|
||||
}
|
||||
@@ -1,136 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：发票记录详情抽屉。
|
||||
*/
|
||||
import type { FinanceInvoiceRecordDetailDto } from '#/api/finance';
|
||||
|
||||
import { Button, Drawer, Empty, Spin, Tag } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
formatCurrency,
|
||||
resolveInvoiceStatusTagColor,
|
||||
resolveInvoiceTypeTagColor,
|
||||
} from '../composables/invoice-page/helpers';
|
||||
|
||||
interface Props {
|
||||
detail: FinanceInvoiceRecordDetailDto | null;
|
||||
loading: boolean;
|
||||
open: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Drawer
|
||||
:open="props.open"
|
||||
width="620"
|
||||
:title="`发票详情 ${props.detail?.invoiceNo ?? ''}`"
|
||||
@close="emit('close')"
|
||||
>
|
||||
<Spin :spinning="props.loading">
|
||||
<template v-if="props.detail">
|
||||
<div class="fi-section">
|
||||
<div class="fi-section-title">基本信息</div>
|
||||
<div class="fi-info-grid">
|
||||
<div>
|
||||
<span class="label">发票号码：</span>
|
||||
<span class="fi-mono">{{ props.detail.invoiceNo }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">状态：</span>
|
||||
<Tag :color="resolveInvoiceStatusTagColor(props.detail.status)">
|
||||
{{ props.detail.statusText }}
|
||||
</Tag>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">申请人：</span>
|
||||
<span>{{ props.detail.applicantName || '--' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">发票类型：</span>
|
||||
<Tag :color="resolveInvoiceTypeTagColor(props.detail.invoiceType)">
|
||||
{{ props.detail.invoiceTypeText || '--' }}
|
||||
</Tag>
|
||||
</div>
|
||||
<div class="full">
|
||||
<span class="label">公司抬头：</span>
|
||||
<span>{{ props.detail.companyName || '--' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">纳税人识别号：</span>
|
||||
<span class="fi-mono">{{ props.detail.taxpayerNumber || '--' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">开票金额：</span>
|
||||
<span class="fi-amount-strong">{{ formatCurrency(props.detail.amount) }}</span>
|
||||
</div>
|
||||
<div class="full">
|
||||
<span class="label">关联订单：</span>
|
||||
<span class="fi-mono">{{ props.detail.orderNo || '--' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fi-section">
|
||||
<div class="fi-section-title">联系信息</div>
|
||||
<div class="fi-info-grid">
|
||||
<div>
|
||||
<span class="label">接收邮箱：</span>
|
||||
<span>{{ props.detail.contactEmail || '--' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">联系电话：</span>
|
||||
<span>{{ props.detail.contactPhone || '--' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fi-section">
|
||||
<div class="fi-section-title">状态记录</div>
|
||||
<div class="fi-timeline">
|
||||
<div class="fi-timeline-item">
|
||||
<span class="text">提交申请</span>
|
||||
<span class="time">{{ props.detail.appliedAt }}</span>
|
||||
</div>
|
||||
<div v-if="props.detail.issuedAt" class="fi-timeline-item">
|
||||
<span class="text">开票完成</span>
|
||||
<span class="time">{{ props.detail.issuedAt }}</span>
|
||||
</div>
|
||||
<div v-if="props.detail.voidedAt" class="fi-timeline-item">
|
||||
<span class="text">发票作废</span>
|
||||
<span class="time">{{ props.detail.voidedAt }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fi-section">
|
||||
<div class="fi-section-title">备注信息</div>
|
||||
<div class="fi-remark-box">
|
||||
<div class="fi-remark-line">
|
||||
<span class="label">申请备注：</span>
|
||||
<span>{{ props.detail.applyRemark || '无' }}</span>
|
||||
</div>
|
||||
<div class="fi-remark-line">
|
||||
<span class="label">开票备注：</span>
|
||||
<span>{{ props.detail.issueRemark || '无' }}</span>
|
||||
</div>
|
||||
<div class="fi-remark-line">
|
||||
<span class="label">作废原因：</span>
|
||||
<span>{{ props.detail.voidReason || '无' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<Empty v-else description="暂无发票详情" />
|
||||
</Spin>
|
||||
|
||||
<template #footer>
|
||||
<Button @click="emit('close')">关闭</Button>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -1,101 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：发票记录筛选工具栏。
|
||||
*/
|
||||
import type { FinanceInvoiceFilterState } from '../types';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Input, Select } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
INVOICE_STATUS_OPTIONS,
|
||||
INVOICE_TYPE_OPTIONS,
|
||||
} from '../composables/invoice-page/constants';
|
||||
|
||||
interface Props {
|
||||
filters: FinanceInvoiceFilterState;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'search'): void;
|
||||
(event: 'update:endDate', value: string): void;
|
||||
(event: 'update:invoiceType', value: string): void;
|
||||
(event: 'update:keyword', value: string): void;
|
||||
(event: 'update:startDate', value: string): void;
|
||||
(event: 'update:status', value: string): void;
|
||||
}>();
|
||||
|
||||
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 handleStatusChange(value: unknown) {
|
||||
emit('update:status', String(value ?? 'all'));
|
||||
emit('search');
|
||||
}
|
||||
|
||||
function handleInvoiceTypeChange(value: unknown) {
|
||||
emit('update:invoiceType', String(value ?? 'all'));
|
||||
emit('search');
|
||||
}
|
||||
|
||||
function handleKeywordChange(value: string | undefined) {
|
||||
emit('update:keyword', String(value ?? ''));
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fi-toolbar">
|
||||
<Input
|
||||
class="fi-date-input"
|
||||
type="date"
|
||||
:value="props.filters.startDate"
|
||||
@update:value="(value) => handleStartDateChange(value)"
|
||||
/>
|
||||
<span class="fi-date-sep">至</span>
|
||||
<Input
|
||||
class="fi-date-input"
|
||||
type="date"
|
||||
:value="props.filters.endDate"
|
||||
@update:value="(value) => handleEndDateChange(value)"
|
||||
/>
|
||||
|
||||
<Select
|
||||
class="fi-status-select"
|
||||
:value="props.filters.status"
|
||||
:options="INVOICE_STATUS_OPTIONS"
|
||||
@update:value="(value) => handleStatusChange(value)"
|
||||
/>
|
||||
|
||||
<Select
|
||||
class="fi-type-select"
|
||||
:value="props.filters.invoiceType"
|
||||
:options="INVOICE_TYPE_OPTIONS"
|
||||
@update:value="(value) => handleInvoiceTypeChange(value)"
|
||||
/>
|
||||
|
||||
<div class="fi-toolbar-spacer" />
|
||||
|
||||
<Input
|
||||
class="fi-search"
|
||||
:value="props.filters.keyword"
|
||||
placeholder="搜索发票号码/公司名"
|
||||
allow-clear
|
||||
@update:value="(value) => handleKeywordChange(value)"
|
||||
@press-enter="emit('search')"
|
||||
>
|
||||
<template #prefix>
|
||||
<IconifyIcon icon="lucide:search" class="fi-search-icon" />
|
||||
</template>
|
||||
</Input>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,121 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：发票开票抽屉。
|
||||
*/
|
||||
import type {
|
||||
FinanceInvoiceRecordDetailDto,
|
||||
FinanceInvoiceRecordListItemDto,
|
||||
} from '#/api/finance';
|
||||
import type { FinanceInvoiceIssueFormState } from '../types';
|
||||
|
||||
import { Button, Drawer, Form, Input, Spin, Tag } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
formatCurrency,
|
||||
resolveInvoiceTypeTagColor,
|
||||
} from '../composables/invoice-page/helpers';
|
||||
|
||||
interface Props {
|
||||
detail: FinanceInvoiceRecordDetailDto | null;
|
||||
form: FinanceInvoiceIssueFormState;
|
||||
loadingDetail: boolean;
|
||||
open: boolean;
|
||||
submitting: boolean;
|
||||
targetRecord: FinanceInvoiceRecordListItemDto | null;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void;
|
||||
(event: 'submit'): void;
|
||||
(event: 'update:contactEmail', value: string): void;
|
||||
(event: 'update:issueRemark', value: string): void;
|
||||
}>();
|
||||
|
||||
function toStringValue(value: string | undefined) {
|
||||
return String(value ?? '');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Drawer
|
||||
:open="props.open"
|
||||
width="560"
|
||||
title="发票开票"
|
||||
@close="emit('close')"
|
||||
>
|
||||
<Spin :spinning="props.loadingDetail">
|
||||
<div class="fi-section">
|
||||
<div class="fi-section-title">开票信息</div>
|
||||
<div class="fi-info-grid">
|
||||
<div>
|
||||
<span class="label">发票号码：</span>
|
||||
<span class="fi-mono">{{ props.targetRecord?.invoiceNo || '--' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">发票类型：</span>
|
||||
<Tag
|
||||
:color="resolveInvoiceTypeTagColor(props.targetRecord?.invoiceType || '')"
|
||||
>
|
||||
{{ props.targetRecord?.invoiceTypeText || '--' }}
|
||||
</Tag>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">申请人：</span>
|
||||
<span>{{ props.targetRecord?.applicantName || '--' }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="label">开票金额：</span>
|
||||
<span class="fi-amount-strong">{{ formatCurrency(Number(props.targetRecord?.amount || 0)) }}</span>
|
||||
</div>
|
||||
<div class="full">
|
||||
<span class="label">公司抬头：</span>
|
||||
<span>{{ props.targetRecord?.companyName || '--' }}</span>
|
||||
</div>
|
||||
<div class="full">
|
||||
<span class="label">关联订单：</span>
|
||||
<span class="fi-mono">{{ props.targetRecord?.orderNo || '--' }}</span>
|
||||
</div>
|
||||
<div class="full">
|
||||
<span class="label">纳税人识别号：</span>
|
||||
<span class="fi-mono">{{ props.detail?.taxpayerNumber || '--' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fi-section">
|
||||
<div class="fi-section-title">开票补充信息</div>
|
||||
<Form layout="vertical">
|
||||
<Form.Item label="接收邮箱">
|
||||
<Input
|
||||
:value="props.form.contactEmail"
|
||||
placeholder="请输入开票接收邮箱"
|
||||
@update:value="(value) => emit('update:contactEmail', toStringValue(value))"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="开票备注">
|
||||
<Input.TextArea
|
||||
:value="props.form.issueRemark"
|
||||
placeholder="请输入开票备注（选填）"
|
||||
:maxlength="200"
|
||||
:rows="4"
|
||||
show-count
|
||||
@update:value="(value) => emit('update:issueRemark', toStringValue(value))"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
</Spin>
|
||||
|
||||
<template #footer>
|
||||
<div class="fi-drawer-footer">
|
||||
<Button @click="emit('close')">取消</Button>
|
||||
<Button type="primary" :loading="props.submitting" @click="emit('submit')">
|
||||
确认开票
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
</Drawer>
|
||||
</template>
|
||||
@@ -1,62 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：发票开票成功结果弹窗。
|
||||
*/
|
||||
import type { FinanceInvoiceIssueResultDto } from '#/api/finance';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { Modal } from 'ant-design-vue';
|
||||
|
||||
import { formatCurrency } from '../composables/invoice-page/helpers';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
result: FinanceInvoiceIssueResultDto | null;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal
|
||||
:open="props.open"
|
||||
title="开票完成"
|
||||
:footer="null"
|
||||
@cancel="emit('close')"
|
||||
>
|
||||
<div class="fi-issue-result">
|
||||
<div class="fi-result-title">发票已成功开具</div>
|
||||
|
||||
<div class="fi-result-list">
|
||||
<div class="fi-result-line">
|
||||
<span class="label">发票号码</span>
|
||||
<span class="value fi-mono">{{ props.result?.invoiceNo || '--' }}</span>
|
||||
</div>
|
||||
<div class="fi-result-line">
|
||||
<span class="label">公司抬头</span>
|
||||
<span class="value">{{ props.result?.companyName || '--' }}</span>
|
||||
</div>
|
||||
<div class="fi-result-line">
|
||||
<span class="label">开票金额</span>
|
||||
<span class="value">{{ formatCurrency(Number(props.result?.amount || 0)) }}</span>
|
||||
</div>
|
||||
<div class="fi-result-line">
|
||||
<span class="label">接收邮箱</span>
|
||||
<span class="value">{{ props.result?.contactEmail || '--' }}</span>
|
||||
</div>
|
||||
<div class="fi-result-line">
|
||||
<span class="label">开票时间</span>
|
||||
<span class="value">{{ props.result?.issuedAt || '--' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fi-result-footer">
|
||||
<Button type="primary" @click="emit('close')">我知道了</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -1,29 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：发票管理分段切换栏。
|
||||
*/
|
||||
import type { FinanceInvoiceTabKey } from '../types';
|
||||
|
||||
import { Segmented } from 'ant-design-vue';
|
||||
|
||||
interface Props {
|
||||
activeTab: FinanceInvoiceTabKey;
|
||||
options: Array<{ label: string; value: FinanceInvoiceTabKey }>;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:activeTab', value: FinanceInvoiceTabKey): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="props.options.length > 0" class="fi-seg-wrap">
|
||||
<Segmented
|
||||
:value="props.activeTab"
|
||||
:options="props.options"
|
||||
@update:value="(value) => emit('update:activeTab', value as FinanceInvoiceTabKey)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,72 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：保存发票设置确认弹窗。
|
||||
*/
|
||||
import type { FinanceInvoiceSettingFormState } from '../types';
|
||||
|
||||
import { Modal } from 'ant-design-vue';
|
||||
|
||||
import { formatCurrency } from '../composables/invoice-page/helpers';
|
||||
|
||||
interface Props {
|
||||
form: FinanceInvoiceSettingFormState;
|
||||
open: boolean;
|
||||
submitting: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void;
|
||||
(event: 'confirm'): void;
|
||||
}>();
|
||||
|
||||
function resolveEnabledText(value: boolean) {
|
||||
return value ? '已开启' : '已关闭';
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal
|
||||
:open="props.open"
|
||||
title="确认保存发票设置"
|
||||
ok-text="确认保存"
|
||||
cancel-text="取消"
|
||||
:confirm-loading="props.submitting"
|
||||
@ok="emit('confirm')"
|
||||
@cancel="emit('close')"
|
||||
>
|
||||
<div class="fi-settings-confirm">
|
||||
<p class="fi-settings-desc">
|
||||
即将更新企业开票信息与开票规则，请确认以下关键配置：
|
||||
</p>
|
||||
|
||||
<div class="fi-settings-list">
|
||||
<div class="fi-settings-line">
|
||||
<span class="label">企业名称</span>
|
||||
<span class="value">{{ props.form.companyName || '--' }}</span>
|
||||
</div>
|
||||
<div class="fi-settings-line">
|
||||
<span class="label">纳税人识别号</span>
|
||||
<span class="value fi-mono">{{ props.form.taxpayerNumber || '--' }}</span>
|
||||
</div>
|
||||
<div class="fi-settings-line">
|
||||
<span class="label">电子普通发票</span>
|
||||
<span class="value">{{ resolveEnabledText(props.form.enableElectronicNormalInvoice) }}</span>
|
||||
</div>
|
||||
<div class="fi-settings-line">
|
||||
<span class="label">电子专用发票</span>
|
||||
<span class="value">{{ resolveEnabledText(props.form.enableElectronicSpecialInvoice) }}</span>
|
||||
</div>
|
||||
<div class="fi-settings-line">
|
||||
<span class="label">自动开票</span>
|
||||
<span class="value">{{ resolveEnabledText(props.form.enableAutoIssue) }}</span>
|
||||
</div>
|
||||
<div class="fi-settings-line">
|
||||
<span class="label">自动开票上限</span>
|
||||
<span class="value">{{ formatCurrency(Number(props.form.autoIssueMaxAmount || 0)) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -1,171 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：发票设置表单区域。
|
||||
*/
|
||||
import type { FinanceInvoiceSettingFormState } from '../types';
|
||||
|
||||
import { Button, Card, Divider, Form, Input, InputNumber, Switch } from 'ant-design-vue';
|
||||
|
||||
interface Props {
|
||||
canManageSettings: boolean;
|
||||
form: FinanceInvoiceSettingFormState;
|
||||
saving: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'reset'): void;
|
||||
(event: 'save'): void;
|
||||
(event: 'update:autoIssueMaxAmount', value: number): void;
|
||||
(event: 'update:bankAccount', value: string): void;
|
||||
(event: 'update:bankName', value: string): void;
|
||||
(event: 'update:companyName', value: string): void;
|
||||
(event: 'update:enableAutoIssue', value: boolean): void;
|
||||
(event: 'update:enableElectronicNormalInvoice', value: boolean): void;
|
||||
(event: 'update:enableElectronicSpecialInvoice', value: boolean): void;
|
||||
(event: 'update:registeredAddress', value: string): void;
|
||||
(event: 'update:registeredPhone', value: string): void;
|
||||
(event: 'update:taxpayerNumber', value: string): void;
|
||||
}>();
|
||||
|
||||
function toStringValue(value: string | undefined) {
|
||||
return String(value ?? '');
|
||||
}
|
||||
|
||||
function toNumberValue(value: null | number | string) {
|
||||
const numeric = Number(value ?? 0);
|
||||
return Number.isFinite(numeric) ? numeric : 0;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fi-settings">
|
||||
<Card>
|
||||
<div class="fi-section-hd">企业开票信息</div>
|
||||
<Form layout="vertical">
|
||||
<div class="fi-form-grid">
|
||||
<Form.Item label="企业名称" required>
|
||||
<Input
|
||||
:value="props.form.companyName"
|
||||
placeholder="请输入企业全称"
|
||||
:disabled="!props.canManageSettings"
|
||||
@update:value="(value) => emit('update:companyName', toStringValue(value))"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="纳税人识别号" required>
|
||||
<Input
|
||||
:value="props.form.taxpayerNumber"
|
||||
placeholder="请输入统一社会信用代码"
|
||||
:disabled="!props.canManageSettings"
|
||||
@update:value="(value) => emit('update:taxpayerNumber', toStringValue(value))"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="注册地址">
|
||||
<Input
|
||||
:value="props.form.registeredAddress"
|
||||
placeholder="请输入注册地址"
|
||||
:disabled="!props.canManageSettings"
|
||||
@update:value="(value) => emit('update:registeredAddress', toStringValue(value))"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="注册电话">
|
||||
<Input
|
||||
:value="props.form.registeredPhone"
|
||||
placeholder="请输入注册电话"
|
||||
:disabled="!props.canManageSettings"
|
||||
@update:value="(value) => emit('update:registeredPhone', toStringValue(value))"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="开户银行">
|
||||
<Input
|
||||
:value="props.form.bankName"
|
||||
placeholder="请输入开户银行名称"
|
||||
:disabled="!props.canManageSettings"
|
||||
@update:value="(value) => emit('update:bankName', toStringValue(value))"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="银行账号">
|
||||
<Input
|
||||
:value="props.form.bankAccount"
|
||||
placeholder="请输入银行账号"
|
||||
:disabled="!props.canManageSettings"
|
||||
@update:value="(value) => emit('update:bankAccount', toStringValue(value))"
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
</Form>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<div class="fi-section-hd">发票类型设置</div>
|
||||
<div class="fi-toggle-row">
|
||||
<Switch
|
||||
:checked="props.form.enableElectronicNormalInvoice"
|
||||
:disabled="!props.canManageSettings"
|
||||
@update:checked="(value) => emit('update:enableElectronicNormalInvoice', Boolean(value))"
|
||||
/>
|
||||
<span class="fi-toggle-label">电子普通发票</span>
|
||||
</div>
|
||||
|
||||
<div class="fi-toggle-row">
|
||||
<Switch
|
||||
:checked="props.form.enableElectronicSpecialInvoice"
|
||||
:disabled="!props.canManageSettings"
|
||||
@update:checked="(value) => emit('update:enableElectronicSpecialInvoice', Boolean(value))"
|
||||
/>
|
||||
<span class="fi-toggle-label">电子专用发票</span>
|
||||
<span class="fi-toggle-hint">（需先完成税务资质认证）</span>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<div class="fi-section-hd">自动开票设置</div>
|
||||
<div class="fi-toggle-row">
|
||||
<Switch
|
||||
:checked="props.form.enableAutoIssue"
|
||||
:disabled="!props.canManageSettings"
|
||||
@update:checked="(value) => emit('update:enableAutoIssue', Boolean(value))"
|
||||
/>
|
||||
<span class="fi-toggle-label">自动开票</span>
|
||||
<span class="fi-toggle-hint">开启后，顾客申请发票将自动开具</span>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Form layout="vertical" class="fi-auto-form">
|
||||
<Form.Item label="单张发票最大金额">
|
||||
<InputNumber
|
||||
class="fi-max-amount-input"
|
||||
:value="props.form.autoIssueMaxAmount"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="100"
|
||||
:disabled="!props.canManageSettings"
|
||||
:formatter="(value) => `￥ ${value}`"
|
||||
:parser="(value) => String(value || '').replace(/￥\s?/g, '')"
|
||||
@update:value="(value) => emit('update:autoIssueMaxAmount', toNumberValue(value))"
|
||||
/>
|
||||
<div class="fi-toggle-hint">超过此金额的发票需人工审核后开具</div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
|
||||
<div class="fi-save-bar">
|
||||
<Button :disabled="!props.canManageSettings" @click="emit('reset')">重置</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
:disabled="!props.canManageSettings"
|
||||
:loading="props.saving"
|
||||
@click="emit('save')"
|
||||
>
|
||||
保存设置
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,47 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：发票记录统计卡片栏。
|
||||
*/
|
||||
import type { FinanceInvoiceStatsDto } from '#/api/finance';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { formatCurrency } from '../composables/invoice-page/helpers';
|
||||
|
||||
interface Props {
|
||||
stats: FinanceInvoiceStatsDto;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fi-stats">
|
||||
<div class="fi-stat-card">
|
||||
<div class="fi-stat-label">
|
||||
<IconifyIcon icon="lucide:receipt-text" class="fi-stat-icon" />
|
||||
<span>本月开票</span>
|
||||
</div>
|
||||
<div class="fi-stat-val">{{ formatCurrency(props.stats.currentMonthIssuedAmount) }}</div>
|
||||
<div class="fi-stat-sub">共 {{ props.stats.currentMonthIssuedCount }} 张</div>
|
||||
</div>
|
||||
|
||||
<div class="fi-stat-card warn">
|
||||
<div class="fi-stat-label">
|
||||
<IconifyIcon icon="lucide:clock" class="fi-stat-icon" />
|
||||
<span>待开票</span>
|
||||
</div>
|
||||
<div class="fi-stat-val">{{ props.stats.pendingCount }}</div>
|
||||
<div class="fi-stat-sub">张待处理</div>
|
||||
</div>
|
||||
|
||||
<div class="fi-stat-card danger">
|
||||
<div class="fi-stat-label">
|
||||
<IconifyIcon icon="lucide:ban" class="fi-stat-icon" />
|
||||
<span>已作废</span>
|
||||
</div>
|
||||
<div class="fi-stat-val">{{ props.stats.voidedCount }}</div>
|
||||
<div class="fi-stat-sub">张已作废</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,206 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：发票记录表格与分页。
|
||||
*/
|
||||
import type { TablePaginationConfig, TableProps } from 'ant-design-vue';
|
||||
|
||||
import type { FinanceInvoiceRecordListItemDto } from '#/api/finance';
|
||||
import type { VNode } from 'vue';
|
||||
|
||||
import { h } from 'vue';
|
||||
|
||||
import { Button, Table, Tag } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
formatCurrency,
|
||||
isIssuedInvoice,
|
||||
isPendingInvoice,
|
||||
resolveInvoiceStatusTagColor,
|
||||
resolveInvoiceTypeTagColor,
|
||||
} from '../composables/invoice-page/helpers';
|
||||
|
||||
interface PaginationState {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
totalCount: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
canIssue: boolean;
|
||||
canVoid: boolean;
|
||||
loading: boolean;
|
||||
pagination: PaginationState;
|
||||
rows: FinanceInvoiceRecordListItemDto[];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'detail', recordId: string): void;
|
||||
(event: 'issue', row: FinanceInvoiceRecordListItemDto): void;
|
||||
(event: 'pageChange', page: number, pageSize: number): void;
|
||||
(event: 'void', row: FinanceInvoiceRecordListItemDto): void;
|
||||
}>();
|
||||
|
||||
function renderActionButtons(row: FinanceInvoiceRecordListItemDto) {
|
||||
const buttons: VNode[] = [];
|
||||
|
||||
if (isPendingInvoice(row.status)) {
|
||||
if (props.canIssue) {
|
||||
buttons.push(
|
||||
h(
|
||||
Button,
|
||||
{
|
||||
type: 'link',
|
||||
class: 'fi-link-action',
|
||||
onClick: () => emit('issue', row),
|
||||
},
|
||||
() => '开票',
|
||||
),
|
||||
);
|
||||
} else {
|
||||
buttons.push(
|
||||
h(
|
||||
Button,
|
||||
{
|
||||
type: 'link',
|
||||
class: 'fi-link-action',
|
||||
onClick: () => emit('detail', row.recordId),
|
||||
},
|
||||
() => '查看',
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return h('div', { class: 'fi-action-wrap' }, buttons);
|
||||
}
|
||||
|
||||
buttons.push(
|
||||
h(
|
||||
Button,
|
||||
{
|
||||
type: 'link',
|
||||
class: 'fi-link-action',
|
||||
onClick: () => emit('detail', row.recordId),
|
||||
},
|
||||
() => '查看',
|
||||
),
|
||||
);
|
||||
|
||||
if (isIssuedInvoice(row.status) && props.canVoid) {
|
||||
buttons.push(
|
||||
h(
|
||||
Button,
|
||||
{
|
||||
type: 'link',
|
||||
danger: true,
|
||||
class: 'fi-link-action',
|
||||
onClick: () => emit('void', row),
|
||||
},
|
||||
() => '作废',
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return h('div', { class: 'fi-action-wrap' }, buttons);
|
||||
}
|
||||
|
||||
const columns: TableProps['columns'] = [
|
||||
{
|
||||
title: '发票号码',
|
||||
dataIndex: 'invoiceNo',
|
||||
width: 190,
|
||||
customRender: ({ record }) =>
|
||||
h(
|
||||
'span',
|
||||
{
|
||||
class: 'fi-mono',
|
||||
},
|
||||
String(record.invoiceNo || '--'),
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '申请人 / 公司名',
|
||||
dataIndex: 'companyName',
|
||||
width: 220,
|
||||
customRender: ({ record }) =>
|
||||
h('div', { class: 'fi-company-cell' }, [
|
||||
h('div', { class: 'fi-applicant' }, String(record.applicantName || '--')),
|
||||
h('div', { class: 'fi-company' }, String(record.companyName || '--')),
|
||||
]),
|
||||
},
|
||||
{
|
||||
title: '发票类型',
|
||||
dataIndex: 'invoiceTypeText',
|
||||
width: 110,
|
||||
customRender: ({ record }) =>
|
||||
h(
|
||||
Tag,
|
||||
{ color: resolveInvoiceTypeTagColor(String(record.invoiceType || '')) },
|
||||
() => String(record.invoiceTypeText || '--'),
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '金额',
|
||||
dataIndex: 'amount',
|
||||
width: 130,
|
||||
align: 'right',
|
||||
customRender: ({ record }) =>
|
||||
h('span', { class: 'fi-amount' }, formatCurrency(Number(record.amount || 0))),
|
||||
},
|
||||
{
|
||||
title: '关联订单',
|
||||
dataIndex: 'orderNo',
|
||||
width: 170,
|
||||
customRender: ({ text }) =>
|
||||
h('span', { class: 'fi-mono' }, String(text || '--')),
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'statusText',
|
||||
width: 100,
|
||||
customRender: ({ record }) =>
|
||||
h(
|
||||
Tag,
|
||||
{ color: resolveInvoiceStatusTagColor(String(record.status || '')) },
|
||||
() => String(record.statusText || '--'),
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '申请时间',
|
||||
dataIndex: 'appliedAt',
|
||||
width: 180,
|
||||
customRender: ({ text }) => h('span', { class: 'fi-time' }, String(text || '--')),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
width: 150,
|
||||
customRender: ({ record }) => renderActionButtons(record),
|
||||
},
|
||||
];
|
||||
|
||||
function handleTableChange(next: TablePaginationConfig) {
|
||||
emit('pageChange', Number(next.current || 1), Number(next.pageSize || 10));
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fi-table-card">
|
||||
<Table
|
||||
row-key="recordId"
|
||||
:columns="columns"
|
||||
:data-source="props.rows"
|
||||
:loading="props.loading"
|
||||
:pagination="{
|
||||
current: props.pagination.page,
|
||||
pageSize: props.pagination.pageSize,
|
||||
total: props.pagination.totalCount,
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50'],
|
||||
showTotal: (total: number) => `共 ${total} 条`,
|
||||
}"
|
||||
@change="handleTableChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,71 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：发票作废确认弹窗。
|
||||
*/
|
||||
import type { FinanceInvoiceRecordListItemDto } from '#/api/finance';
|
||||
import type { FinanceInvoiceVoidFormState } from '../types';
|
||||
|
||||
import { Modal, Input } from 'ant-design-vue';
|
||||
|
||||
import { formatCurrency } from '../composables/invoice-page/helpers';
|
||||
|
||||
interface Props {
|
||||
form: FinanceInvoiceVoidFormState;
|
||||
open: boolean;
|
||||
submitting: boolean;
|
||||
targetRecord: FinanceInvoiceRecordListItemDto | null;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'close'): void;
|
||||
(event: 'submit'): void;
|
||||
(event: 'update:voidReason', value: string): void;
|
||||
}>();
|
||||
|
||||
function toStringValue(value: string | undefined) {
|
||||
return String(value ?? '');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal
|
||||
:open="props.open"
|
||||
title="确认作废发票"
|
||||
ok-text="确认作废"
|
||||
cancel-text="取消"
|
||||
ok-type="danger"
|
||||
:confirm-loading="props.submitting"
|
||||
@ok="emit('submit')"
|
||||
@cancel="emit('close')"
|
||||
>
|
||||
<div class="fi-void-modal">
|
||||
<p class="fi-void-warning">发票作废后不可恢复，请确认本次操作。</p>
|
||||
|
||||
<div class="fi-void-summary">
|
||||
<div class="fi-void-line">
|
||||
<span class="label">发票号码</span>
|
||||
<span class="value fi-mono">{{ props.targetRecord?.invoiceNo || '--' }}</span>
|
||||
</div>
|
||||
<div class="fi-void-line">
|
||||
<span class="label">公司抬头</span>
|
||||
<span class="value">{{ props.targetRecord?.companyName || '--' }}</span>
|
||||
</div>
|
||||
<div class="fi-void-line">
|
||||
<span class="label">开票金额</span>
|
||||
<span class="value">{{ formatCurrency(Number(props.targetRecord?.amount || 0)) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Input.TextArea
|
||||
:value="props.form.voidReason"
|
||||
:rows="4"
|
||||
:maxlength="200"
|
||||
show-count
|
||||
placeholder="请输入作废原因"
|
||||
@update:value="(value) => emit('update:voidReason', toStringValue(value))"
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -1,108 +0,0 @@
|
||||
import type {
|
||||
FinanceInvoiceSettingFormState,
|
||||
FinanceInvoiceTabKey,
|
||||
OptionItem,
|
||||
} from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：发票管理页面常量定义。
|
||||
*/
|
||||
import type { FinanceInvoiceStatsDto } from '#/api/finance';
|
||||
|
||||
import { getMonthFirstDateString, getTodayDateString } from './helpers';
|
||||
|
||||
/** 发票管理页面查看权限。 */
|
||||
export const FINANCE_INVOICE_VIEW_PERMISSION = 'tenant:finance:invoice:view';
|
||||
|
||||
/** 发票开票权限。 */
|
||||
export const FINANCE_INVOICE_ISSUE_PERMISSION = 'tenant:finance:invoice:issue';
|
||||
|
||||
/** 发票作废权限。 */
|
||||
export const FINANCE_INVOICE_VOID_PERMISSION = 'tenant:finance:invoice:void';
|
||||
|
||||
/** 发票设置权限。 */
|
||||
export const FINANCE_INVOICE_SETTINGS_PERMISSION =
|
||||
'tenant:finance:invoice:settings';
|
||||
|
||||
/** 分段选项。 */
|
||||
export const INVOICE_TAB_OPTIONS: Array<{
|
||||
label: string;
|
||||
value: FinanceInvoiceTabKey;
|
||||
}> = [
|
||||
{ label: '开票记录', value: 'records' },
|
||||
{ label: '发票设置', value: 'settings' },
|
||||
];
|
||||
|
||||
/** 发票状态筛选项。 */
|
||||
export const INVOICE_STATUS_OPTIONS: OptionItem[] = [
|
||||
{ label: '全部状态', value: 'all' },
|
||||
{ label: '待开票', value: 'pending' },
|
||||
{ label: '已开票', value: 'issued' },
|
||||
{ label: '已作废', value: 'voided' },
|
||||
];
|
||||
|
||||
/** 发票类型筛选项。 */
|
||||
export const INVOICE_TYPE_OPTIONS: OptionItem[] = [
|
||||
{ label: '全部类型', value: 'all' },
|
||||
{ label: '普通发票', value: 'normal' },
|
||||
{ label: '专用发票', value: 'special' },
|
||||
];
|
||||
|
||||
/** 默认统计数据。 */
|
||||
export const DEFAULT_INVOICE_STATS: FinanceInvoiceStatsDto = {
|
||||
currentMonthIssuedAmount: 0,
|
||||
currentMonthIssuedCount: 0,
|
||||
pendingCount: 0,
|
||||
voidedCount: 0,
|
||||
};
|
||||
|
||||
/** 创建默认筛选条件。 */
|
||||
export function createDefaultFilters() {
|
||||
return {
|
||||
startDate: getMonthFirstDateString(),
|
||||
endDate: getTodayDateString(),
|
||||
status: 'all',
|
||||
invoiceType: 'all',
|
||||
keyword: '',
|
||||
};
|
||||
}
|
||||
|
||||
/** 创建默认分页。 */
|
||||
export function createDefaultPagination() {
|
||||
return {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
};
|
||||
}
|
||||
|
||||
/** 创建默认设置表单。 */
|
||||
export function createDefaultSettingsForm(): FinanceInvoiceSettingFormState {
|
||||
return {
|
||||
companyName: '',
|
||||
taxpayerNumber: '',
|
||||
registeredAddress: '',
|
||||
registeredPhone: '',
|
||||
bankName: '',
|
||||
bankAccount: '',
|
||||
enableElectronicNormalInvoice: true,
|
||||
enableElectronicSpecialInvoice: false,
|
||||
enableAutoIssue: false,
|
||||
autoIssueMaxAmount: 10_000,
|
||||
};
|
||||
}
|
||||
|
||||
/** 创建默认开票表单。 */
|
||||
export function createDefaultIssueForm() {
|
||||
return {
|
||||
contactEmail: '',
|
||||
issueRemark: '',
|
||||
};
|
||||
}
|
||||
|
||||
/** 创建默认作废表单。 */
|
||||
export function createDefaultVoidForm() {
|
||||
return {
|
||||
voidReason: '',
|
||||
};
|
||||
}
|
||||
@@ -1,126 +0,0 @@
|
||||
import type {
|
||||
FinanceInvoiceRecordListItemDto,
|
||||
FinanceInvoiceSettingDto,
|
||||
FinanceInvoiceStatsDto,
|
||||
} from '#/api/finance';
|
||||
import type {
|
||||
FinanceInvoiceFilterState,
|
||||
FinanceInvoicePaginationState,
|
||||
FinanceInvoiceSettingFormState,
|
||||
} from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：发票管理页面数据加载动作。
|
||||
*/
|
||||
import {
|
||||
getFinanceInvoiceRecordListApi,
|
||||
getFinanceInvoiceSettingDetailApi,
|
||||
} from '#/api/finance';
|
||||
|
||||
import {
|
||||
applySettingDtoToForm,
|
||||
buildInvoiceListQuery,
|
||||
cloneSettingsForm,
|
||||
} from './helpers';
|
||||
|
||||
interface DataActionOptions {
|
||||
canViewRecords: { value: boolean };
|
||||
canViewSettings: { value: boolean };
|
||||
createDefaultSettingsForm: () => FinanceInvoiceSettingFormState;
|
||||
filters: FinanceInvoiceFilterState;
|
||||
isListLoading: { value: boolean };
|
||||
isSettingsLoading: { value: boolean };
|
||||
pagination: FinanceInvoicePaginationState;
|
||||
rows: { value: FinanceInvoiceRecordListItemDto[] };
|
||||
settingForm: FinanceInvoiceSettingFormState;
|
||||
settingSnapshot: { value: FinanceInvoiceSettingFormState };
|
||||
stats: FinanceInvoiceStatsDto;
|
||||
}
|
||||
|
||||
/** 创建页面数据动作。 */
|
||||
export function createDataActions(options: DataActionOptions) {
|
||||
function resetStats() {
|
||||
options.stats.currentMonthIssuedAmount = 0;
|
||||
options.stats.currentMonthIssuedCount = 0;
|
||||
options.stats.pendingCount = 0;
|
||||
options.stats.voidedCount = 0;
|
||||
}
|
||||
|
||||
function clearRecordData() {
|
||||
options.rows.value = [];
|
||||
options.pagination.totalCount = 0;
|
||||
resetStats();
|
||||
}
|
||||
|
||||
function resetSettings() {
|
||||
const defaults = options.createDefaultSettingsForm();
|
||||
Object.assign(options.settingForm, defaults);
|
||||
options.settingSnapshot.value = cloneSettingsForm(defaults);
|
||||
}
|
||||
|
||||
function applySettingsResult(result: FinanceInvoiceSettingDto) {
|
||||
applySettingDtoToForm(options.settingForm, result);
|
||||
options.settingSnapshot.value = cloneSettingsForm(options.settingForm);
|
||||
}
|
||||
|
||||
async function loadRecordList() {
|
||||
if (!options.canViewRecords.value) {
|
||||
clearRecordData();
|
||||
return;
|
||||
}
|
||||
|
||||
options.isListLoading.value = true;
|
||||
try {
|
||||
const result = await getFinanceInvoiceRecordListApi(
|
||||
buildInvoiceListQuery(options.filters, options.pagination),
|
||||
);
|
||||
|
||||
options.rows.value = result.items;
|
||||
options.pagination.page = result.page;
|
||||
options.pagination.pageSize = result.pageSize;
|
||||
options.pagination.totalCount = result.totalCount;
|
||||
|
||||
options.stats.currentMonthIssuedAmount =
|
||||
result.stats.currentMonthIssuedAmount;
|
||||
options.stats.currentMonthIssuedCount = result.stats.currentMonthIssuedCount;
|
||||
options.stats.pendingCount = result.stats.pendingCount;
|
||||
options.stats.voidedCount = result.stats.voidedCount;
|
||||
} finally {
|
||||
options.isListLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadSettings() {
|
||||
if (!options.canViewSettings.value) {
|
||||
resetSettings();
|
||||
return;
|
||||
}
|
||||
|
||||
options.isSettingsLoading.value = true;
|
||||
try {
|
||||
const result = await getFinanceInvoiceSettingDetailApi();
|
||||
applySettingsResult(result);
|
||||
} finally {
|
||||
options.isSettingsLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function clearByPermission() {
|
||||
if (!options.canViewRecords.value) {
|
||||
clearRecordData();
|
||||
}
|
||||
|
||||
if (!options.canViewSettings.value) {
|
||||
resetSettings();
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
applySettingsResult,
|
||||
clearByPermission,
|
||||
clearRecordData,
|
||||
loadRecordList,
|
||||
loadSettings,
|
||||
resetSettings,
|
||||
};
|
||||
}
|
||||
@@ -1,253 +0,0 @@
|
||||
import type {
|
||||
FinanceInvoiceIssueResultDto,
|
||||
FinanceInvoiceRecordDetailDto,
|
||||
FinanceInvoiceRecordListItemDto,
|
||||
} from '#/api/finance';
|
||||
import type {
|
||||
FinanceInvoiceIssueFormState,
|
||||
FinanceInvoiceVoidFormState,
|
||||
} from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：发票管理页面抽屉与弹窗动作。
|
||||
*/
|
||||
import {
|
||||
getFinanceInvoiceRecordDetailApi,
|
||||
issueFinanceInvoiceRecordApi,
|
||||
voidFinanceInvoiceRecordApi,
|
||||
} from '#/api/finance';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import { isPendingInvoice, toOptionalTrimmed } from './helpers';
|
||||
|
||||
interface DrawerActionOptions {
|
||||
canIssue: { value: boolean };
|
||||
canVoid: { value: boolean };
|
||||
detail: { value: FinanceInvoiceRecordDetailDto | null };
|
||||
isDetailDrawerOpen: { value: boolean };
|
||||
isDetailLoading: { value: boolean };
|
||||
isIssueDetailLoading: { value: boolean };
|
||||
isIssueDrawerOpen: { value: boolean };
|
||||
isIssueResultModalOpen: { value: boolean };
|
||||
isIssueSubmitting: { value: boolean };
|
||||
isVoidModalOpen: { value: boolean };
|
||||
isVoidSubmitting: { value: boolean };
|
||||
issueDetail: { value: FinanceInvoiceRecordDetailDto | null };
|
||||
issueForm: FinanceInvoiceIssueFormState;
|
||||
issueResult: { value: FinanceInvoiceIssueResultDto | null };
|
||||
issueTargetRecord: { value: FinanceInvoiceRecordListItemDto | null };
|
||||
reloadRecordList: () => Promise<void>;
|
||||
voidForm: FinanceInvoiceVoidFormState;
|
||||
voidTargetRecord: { value: FinanceInvoiceRecordListItemDto | null };
|
||||
}
|
||||
|
||||
/** 创建抽屉与弹窗动作。 */
|
||||
export function createDrawerActions(options: DrawerActionOptions) {
|
||||
async function loadDetail(recordId: string) {
|
||||
const result = await getFinanceInvoiceRecordDetailApi({ recordId });
|
||||
options.detail.value = result;
|
||||
return result;
|
||||
}
|
||||
|
||||
function setDetailDrawerOpen(value: boolean) {
|
||||
options.isDetailDrawerOpen.value = value;
|
||||
if (!value) {
|
||||
options.detail.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
function setIssueDrawerOpen(value: boolean) {
|
||||
options.isIssueDrawerOpen.value = value;
|
||||
if (!value) {
|
||||
options.issueTargetRecord.value = null;
|
||||
options.issueDetail.value = null;
|
||||
options.issueForm.contactEmail = '';
|
||||
options.issueForm.issueRemark = '';
|
||||
}
|
||||
}
|
||||
|
||||
function setVoidModalOpen(value: boolean) {
|
||||
options.isVoidModalOpen.value = value;
|
||||
if (!value) {
|
||||
options.voidTargetRecord.value = null;
|
||||
options.voidForm.voidReason = '';
|
||||
}
|
||||
}
|
||||
|
||||
function setIssueResultModalOpen(value: boolean) {
|
||||
options.isIssueResultModalOpen.value = value;
|
||||
if (!value) {
|
||||
options.issueResult.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function openDetail(recordId: string) {
|
||||
if (!recordId) {
|
||||
return;
|
||||
}
|
||||
|
||||
options.isDetailDrawerOpen.value = true;
|
||||
options.isDetailLoading.value = true;
|
||||
try {
|
||||
await loadDetail(recordId);
|
||||
} finally {
|
||||
options.isDetailLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function openIssue(record: FinanceInvoiceRecordListItemDto) {
|
||||
if (!options.canIssue.value) {
|
||||
message.warning('当前账号暂无开票权限');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isPendingInvoice(record.status)) {
|
||||
message.warning('仅待开票记录可执行开票');
|
||||
return;
|
||||
}
|
||||
|
||||
options.issueTargetRecord.value = record;
|
||||
options.issueForm.contactEmail = '';
|
||||
options.issueForm.issueRemark = '';
|
||||
options.issueDetail.value = null;
|
||||
options.isIssueDrawerOpen.value = true;
|
||||
|
||||
options.isIssueDetailLoading.value = true;
|
||||
try {
|
||||
const detail = await getFinanceInvoiceRecordDetailApi({
|
||||
recordId: record.recordId,
|
||||
});
|
||||
options.issueDetail.value = detail;
|
||||
options.issueForm.contactEmail = detail.contactEmail ?? '';
|
||||
} finally {
|
||||
options.isIssueDetailLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshOpenDetailAfterMutation(recordId: string) {
|
||||
if (!options.isDetailDrawerOpen.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (options.detail.value?.recordId !== recordId) {
|
||||
return;
|
||||
}
|
||||
|
||||
options.isDetailLoading.value = true;
|
||||
try {
|
||||
await loadDetail(recordId);
|
||||
} finally {
|
||||
options.isDetailLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function submitIssue() {
|
||||
if (!options.canIssue.value) {
|
||||
message.warning('当前账号暂无开票权限');
|
||||
return;
|
||||
}
|
||||
|
||||
const target = options.issueTargetRecord.value;
|
||||
if (!target?.recordId) {
|
||||
message.warning('请选择待开票记录');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isPendingInvoice(target.status)) {
|
||||
message.warning('当前记录状态不可开票');
|
||||
return;
|
||||
}
|
||||
|
||||
const email = options.issueForm.contactEmail.trim();
|
||||
if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||
message.warning('请填写正确的邮箱地址');
|
||||
return;
|
||||
}
|
||||
|
||||
options.isIssueSubmitting.value = true;
|
||||
try {
|
||||
const result = await issueFinanceInvoiceRecordApi({
|
||||
recordId: target.recordId,
|
||||
contactEmail: toOptionalTrimmed(options.issueForm.contactEmail),
|
||||
issueRemark: toOptionalTrimmed(options.issueForm.issueRemark),
|
||||
});
|
||||
|
||||
options.issueResult.value = result;
|
||||
options.isIssueDrawerOpen.value = false;
|
||||
options.isIssueResultModalOpen.value = true;
|
||||
message.success('发票开具成功');
|
||||
|
||||
await options.reloadRecordList();
|
||||
await refreshOpenDetailAfterMutation(target.recordId);
|
||||
} finally {
|
||||
options.isIssueSubmitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openVoid(record: FinanceInvoiceRecordListItemDto) {
|
||||
if (!options.canVoid.value) {
|
||||
message.warning('当前账号暂无作废权限');
|
||||
return;
|
||||
}
|
||||
|
||||
options.voidTargetRecord.value = record;
|
||||
options.voidForm.voidReason = '';
|
||||
options.isVoidModalOpen.value = true;
|
||||
}
|
||||
|
||||
async function submitVoid() {
|
||||
if (!options.canVoid.value) {
|
||||
message.warning('当前账号暂无作废权限');
|
||||
return;
|
||||
}
|
||||
|
||||
const target = options.voidTargetRecord.value;
|
||||
if (!target?.recordId) {
|
||||
message.warning('请选择需要作废的发票');
|
||||
return;
|
||||
}
|
||||
|
||||
const reason = options.voidForm.voidReason.trim();
|
||||
if (!reason) {
|
||||
message.warning('请填写作废原因');
|
||||
return;
|
||||
}
|
||||
|
||||
options.isVoidSubmitting.value = true;
|
||||
try {
|
||||
const detail = await voidFinanceInvoiceRecordApi({
|
||||
recordId: target.recordId,
|
||||
voidReason: reason,
|
||||
});
|
||||
|
||||
message.success('发票已作废');
|
||||
options.isVoidModalOpen.value = false;
|
||||
options.voidTargetRecord.value = null;
|
||||
options.voidForm.voidReason = '';
|
||||
|
||||
if (
|
||||
options.isDetailDrawerOpen.value &&
|
||||
options.detail.value?.recordId === detail.recordId
|
||||
) {
|
||||
options.detail.value = detail;
|
||||
}
|
||||
|
||||
await options.reloadRecordList();
|
||||
} finally {
|
||||
options.isVoidSubmitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
openDetail,
|
||||
openIssue,
|
||||
openVoid,
|
||||
setDetailDrawerOpen,
|
||||
setIssueDrawerOpen,
|
||||
setIssueResultModalOpen,
|
||||
setVoidModalOpen,
|
||||
submitIssue,
|
||||
submitVoid,
|
||||
};
|
||||
}
|
||||
@@ -1,173 +0,0 @@
|
||||
import type {
|
||||
FinanceInvoiceRecordListQuery,
|
||||
FinanceInvoiceSettingDto,
|
||||
FinanceInvoiceStatusFilter,
|
||||
FinanceInvoiceTypeFilter,
|
||||
} from '#/api/finance';
|
||||
import type {
|
||||
FinanceInvoiceFilterState,
|
||||
FinanceInvoicePaginationState,
|
||||
FinanceInvoiceSettingFormState,
|
||||
} from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：发票管理页面纯函数工具。
|
||||
*/
|
||||
|
||||
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 normalizeStatus(
|
||||
status: FinanceInvoiceStatusFilter,
|
||||
): Exclude<FinanceInvoiceStatusFilter, 'all'> | undefined {
|
||||
return status === 'all' ? undefined : status;
|
||||
}
|
||||
|
||||
function normalizeInvoiceType(
|
||||
invoiceType: FinanceInvoiceTypeFilter,
|
||||
): Exclude<FinanceInvoiceTypeFilter, 'all'> | undefined {
|
||||
return invoiceType === 'all' ? undefined : invoiceType;
|
||||
}
|
||||
|
||||
/** 获取今天日期字符串（yyyy-MM-dd）。 */
|
||||
export function getTodayDateString() {
|
||||
return formatDate(new Date());
|
||||
}
|
||||
|
||||
/** 获取当月第一天日期字符串（yyyy-MM-dd）。 */
|
||||
export function getMonthFirstDateString() {
|
||||
const now = new Date();
|
||||
return formatDate(new Date(now.getFullYear(), now.getMonth(), 1));
|
||||
}
|
||||
|
||||
/** 构建发票记录列表查询参数。 */
|
||||
export function buildInvoiceListQuery(
|
||||
filters: FinanceInvoiceFilterState,
|
||||
pagination: FinanceInvoicePaginationState,
|
||||
): FinanceInvoiceRecordListQuery {
|
||||
return {
|
||||
page: pagination.page,
|
||||
pageSize: pagination.pageSize,
|
||||
startDate: filters.startDate || undefined,
|
||||
endDate: filters.endDate || undefined,
|
||||
status: normalizeStatus(filters.status),
|
||||
invoiceType: normalizeInvoiceType(filters.invoiceType),
|
||||
keyword: filters.keyword.trim() || undefined,
|
||||
};
|
||||
}
|
||||
|
||||
/** 判断日期范围是否合法。 */
|
||||
export function isDateRangeInvalid(filters: FinanceInvoiceFilterState) {
|
||||
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 resolveInvoiceTypeTagColor(type: string) {
|
||||
if (type === 'normal') return 'blue';
|
||||
if (type === 'special') return 'purple';
|
||||
return 'default';
|
||||
}
|
||||
|
||||
/** 发票状态标签颜色。 */
|
||||
export function resolveInvoiceStatusTagColor(status: string) {
|
||||
if (status === 'pending') return 'orange';
|
||||
if (status === 'issued') return 'green';
|
||||
if (status === 'voided') return 'default';
|
||||
return 'default';
|
||||
}
|
||||
|
||||
/** 是否为待开票状态。 */
|
||||
export function isPendingInvoice(status: string) {
|
||||
return status === 'pending';
|
||||
}
|
||||
|
||||
/** 是否为已开票状态。 */
|
||||
export function isIssuedInvoice(status: string) {
|
||||
return status === 'issued';
|
||||
}
|
||||
|
||||
/** 应用设置 DTO 到表单。 */
|
||||
export function applySettingDtoToForm(
|
||||
target: FinanceInvoiceSettingFormState,
|
||||
source: FinanceInvoiceSettingDto,
|
||||
) {
|
||||
target.companyName = source.companyName || '';
|
||||
target.taxpayerNumber = source.taxpayerNumber || '';
|
||||
target.registeredAddress = source.registeredAddress || '';
|
||||
target.registeredPhone = source.registeredPhone || '';
|
||||
target.bankName = source.bankName || '';
|
||||
target.bankAccount = source.bankAccount || '';
|
||||
target.enableElectronicNormalInvoice = Boolean(
|
||||
source.enableElectronicNormalInvoice,
|
||||
);
|
||||
target.enableElectronicSpecialInvoice = Boolean(
|
||||
source.enableElectronicSpecialInvoice,
|
||||
);
|
||||
target.enableAutoIssue = Boolean(source.enableAutoIssue);
|
||||
target.autoIssueMaxAmount = Number(source.autoIssueMaxAmount || 0);
|
||||
}
|
||||
|
||||
/** 深拷贝设置表单快照。 */
|
||||
export function cloneSettingsForm(
|
||||
source: FinanceInvoiceSettingFormState,
|
||||
): FinanceInvoiceSettingFormState {
|
||||
return {
|
||||
companyName: source.companyName,
|
||||
taxpayerNumber: source.taxpayerNumber,
|
||||
registeredAddress: source.registeredAddress,
|
||||
registeredPhone: source.registeredPhone,
|
||||
bankName: source.bankName,
|
||||
bankAccount: source.bankAccount,
|
||||
enableElectronicNormalInvoice: source.enableElectronicNormalInvoice,
|
||||
enableElectronicSpecialInvoice: source.enableElectronicSpecialInvoice,
|
||||
enableAutoIssue: source.enableAutoIssue,
|
||||
autoIssueMaxAmount: source.autoIssueMaxAmount,
|
||||
};
|
||||
}
|
||||
|
||||
/** 比较设置表单是否发生变化。 */
|
||||
export function isSettingsChanged(
|
||||
current: FinanceInvoiceSettingFormState,
|
||||
snapshot: FinanceInvoiceSettingFormState,
|
||||
) {
|
||||
return JSON.stringify(current) !== JSON.stringify(snapshot);
|
||||
}
|
||||
|
||||
/** 生成保存设置请求体。 */
|
||||
export function buildSettingSavePayload(form: FinanceInvoiceSettingFormState) {
|
||||
return {
|
||||
companyName: form.companyName.trim(),
|
||||
taxpayerNumber: form.taxpayerNumber.trim(),
|
||||
registeredAddress: form.registeredAddress.trim() || undefined,
|
||||
registeredPhone: form.registeredPhone.trim() || undefined,
|
||||
bankName: form.bankName.trim() || undefined,
|
||||
bankAccount: form.bankAccount.trim() || undefined,
|
||||
enableElectronicNormalInvoice: form.enableElectronicNormalInvoice,
|
||||
enableElectronicSpecialInvoice: form.enableElectronicSpecialInvoice,
|
||||
enableAutoIssue: form.enableAutoIssue,
|
||||
autoIssueMaxAmount: Number(form.autoIssueMaxAmount || 0),
|
||||
};
|
||||
}
|
||||
|
||||
/** 文本转空值。 */
|
||||
export function toOptionalTrimmed(value: string) {
|
||||
const normalized = value.trim();
|
||||
return normalized ? normalized : undefined;
|
||||
}
|
||||
@@ -1,120 +0,0 @@
|
||||
import type { FinanceInvoiceSettingFormState } from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：发票设置保存与确认动作。
|
||||
*/
|
||||
import type { FinanceInvoiceSettingDto } from '#/api/finance';
|
||||
|
||||
import { saveFinanceInvoiceSettingApi } from '#/api/finance';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
buildSettingSavePayload,
|
||||
cloneSettingsForm,
|
||||
isSettingsChanged,
|
||||
} from './helpers';
|
||||
|
||||
interface SettingsActionOptions {
|
||||
applySettingsResult: (result: FinanceInvoiceSettingDto) => void;
|
||||
canManageSettings: { value: boolean };
|
||||
isSettingsConfirmModalOpen: { value: boolean };
|
||||
isSettingsSaving: { value: boolean };
|
||||
settingForm: FinanceInvoiceSettingFormState;
|
||||
settingSnapshot: { value: FinanceInvoiceSettingFormState };
|
||||
}
|
||||
|
||||
/** 创建发票设置动作。 */
|
||||
export function createSettingsActions(options: SettingsActionOptions) {
|
||||
function setSettingsConfirmModalOpen(value: boolean) {
|
||||
options.isSettingsConfirmModalOpen.value = value;
|
||||
}
|
||||
|
||||
function resetSettings() {
|
||||
Object.assign(options.settingForm, cloneSettingsForm(options.settingSnapshot.value));
|
||||
}
|
||||
|
||||
function hasSettingsChanged() {
|
||||
return isSettingsChanged(options.settingForm, options.settingSnapshot.value);
|
||||
}
|
||||
|
||||
function validateSettings() {
|
||||
if (!options.settingForm.companyName.trim()) {
|
||||
message.warning('请输入企业名称');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!options.settingForm.taxpayerNumber.trim()) {
|
||||
message.warning('请输入纳税人识别号');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (
|
||||
!options.settingForm.enableElectronicNormalInvoice &&
|
||||
!options.settingForm.enableElectronicSpecialInvoice
|
||||
) {
|
||||
message.warning('请至少启用一种发票类型');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (options.settingForm.enableAutoIssue) {
|
||||
const maxAmount = Number(options.settingForm.autoIssueMaxAmount || 0);
|
||||
if (!Number.isFinite(maxAmount) || maxAmount <= 0) {
|
||||
message.warning('自动开票最大金额必须大于 0');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function openSettingsConfirmModal() {
|
||||
if (!options.canManageSettings.value) {
|
||||
message.warning('当前账号暂无发票设置权限');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!validateSettings()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!hasSettingsChanged()) {
|
||||
message.info('未检测到设置变更');
|
||||
return;
|
||||
}
|
||||
|
||||
options.isSettingsConfirmModalOpen.value = true;
|
||||
}
|
||||
|
||||
async function submitSettings() {
|
||||
if (!options.canManageSettings.value) {
|
||||
message.warning('当前账号暂无发票设置权限');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!validateSettings()) {
|
||||
return;
|
||||
}
|
||||
|
||||
options.isSettingsSaving.value = true;
|
||||
try {
|
||||
const result = await saveFinanceInvoiceSettingApi(
|
||||
buildSettingSavePayload(options.settingForm),
|
||||
);
|
||||
options.applySettingsResult(result);
|
||||
options.isSettingsConfirmModalOpen.value = false;
|
||||
message.success('发票设置已保存');
|
||||
} finally {
|
||||
options.isSettingsSaving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
hasSettingsChanged,
|
||||
openSettingsConfirmModal,
|
||||
resetSettings,
|
||||
setSettingsConfirmModalOpen,
|
||||
submitSettings,
|
||||
validateSettings,
|
||||
};
|
||||
}
|
||||
@@ -1,397 +0,0 @@
|
||||
/**
|
||||
* 文件职责：发票管理页面状态与动作编排。
|
||||
*/
|
||||
import type {
|
||||
FinanceInvoiceIssueResultDto,
|
||||
FinanceInvoiceRecordDetailDto,
|
||||
FinanceInvoiceRecordListItemDto,
|
||||
FinanceInvoiceStatsDto,
|
||||
} from '#/api/finance';
|
||||
import type {
|
||||
FinanceInvoiceFilterState,
|
||||
FinanceInvoiceIssueFormState,
|
||||
FinanceInvoicePaginationState,
|
||||
FinanceInvoiceSettingFormState,
|
||||
FinanceInvoiceTabKey,
|
||||
FinanceInvoiceVoidFormState,
|
||||
} from '../types';
|
||||
|
||||
import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue';
|
||||
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
createDefaultFilters,
|
||||
createDefaultIssueForm,
|
||||
createDefaultPagination,
|
||||
createDefaultSettingsForm,
|
||||
createDefaultVoidForm,
|
||||
DEFAULT_INVOICE_STATS,
|
||||
FINANCE_INVOICE_ISSUE_PERMISSION,
|
||||
FINANCE_INVOICE_SETTINGS_PERMISSION,
|
||||
FINANCE_INVOICE_VIEW_PERMISSION,
|
||||
FINANCE_INVOICE_VOID_PERMISSION,
|
||||
INVOICE_TAB_OPTIONS,
|
||||
} from './invoice-page/constants';
|
||||
import { createDataActions } from './invoice-page/data-actions';
|
||||
import { createDrawerActions } from './invoice-page/drawer-actions';
|
||||
import { isDateRangeInvalid } from './invoice-page/helpers';
|
||||
import { createSettingsActions } from './invoice-page/settings-actions';
|
||||
|
||||
/** 创建发票管理页面组合状态。 */
|
||||
export function useFinanceInvoicePage() {
|
||||
const accessStore = useAccessStore();
|
||||
|
||||
const activeTab = ref<FinanceInvoiceTabKey>('records');
|
||||
|
||||
const filters = reactive<FinanceInvoiceFilterState>(
|
||||
createDefaultFilters() as FinanceInvoiceFilterState,
|
||||
);
|
||||
const pagination = reactive<FinanceInvoicePaginationState>(
|
||||
createDefaultPagination(),
|
||||
);
|
||||
const rows = ref<FinanceInvoiceRecordListItemDto[]>([]);
|
||||
|
||||
const stats = reactive<FinanceInvoiceStatsDto>({ ...DEFAULT_INVOICE_STATS });
|
||||
|
||||
const settingForm = reactive<FinanceInvoiceSettingFormState>(
|
||||
createDefaultSettingsForm(),
|
||||
);
|
||||
const settingSnapshot = ref<FinanceInvoiceSettingFormState>(
|
||||
createDefaultSettingsForm(),
|
||||
);
|
||||
|
||||
const issueForm = reactive<FinanceInvoiceIssueFormState>(
|
||||
createDefaultIssueForm(),
|
||||
);
|
||||
const voidForm = reactive<FinanceInvoiceVoidFormState>(createDefaultVoidForm());
|
||||
|
||||
const detail = ref<FinanceInvoiceRecordDetailDto | null>(null);
|
||||
const issueDetail = ref<FinanceInvoiceRecordDetailDto | null>(null);
|
||||
const issueResult = ref<FinanceInvoiceIssueResultDto | null>(null);
|
||||
|
||||
const issueTargetRecord = ref<FinanceInvoiceRecordListItemDto | null>(null);
|
||||
const voidTargetRecord = ref<FinanceInvoiceRecordListItemDto | null>(null);
|
||||
|
||||
const isListLoading = ref(false);
|
||||
const isSettingsLoading = ref(false);
|
||||
const isDetailLoading = ref(false);
|
||||
const isIssueDetailLoading = ref(false);
|
||||
const isIssueSubmitting = ref(false);
|
||||
const isVoidSubmitting = ref(false);
|
||||
const isSettingsSaving = ref(false);
|
||||
|
||||
const isDetailDrawerOpen = ref(false);
|
||||
const isIssueDrawerOpen = ref(false);
|
||||
const isVoidModalOpen = ref(false);
|
||||
const isIssueResultModalOpen = ref(false);
|
||||
const isSettingsConfirmModalOpen = ref(false);
|
||||
|
||||
const accessCodeSet = computed(
|
||||
() => new Set((accessStore.accessCodes ?? []).map(String)),
|
||||
);
|
||||
|
||||
const canViewRecords = computed(() => {
|
||||
const accessCodes = accessCodeSet.value;
|
||||
return (
|
||||
accessCodes.has(FINANCE_INVOICE_VIEW_PERMISSION) ||
|
||||
accessCodes.has(FINANCE_INVOICE_ISSUE_PERMISSION) ||
|
||||
accessCodes.has(FINANCE_INVOICE_VOID_PERMISSION)
|
||||
);
|
||||
});
|
||||
|
||||
const canIssue = computed(() =>
|
||||
accessCodeSet.value.has(FINANCE_INVOICE_ISSUE_PERMISSION),
|
||||
);
|
||||
|
||||
const canVoid = computed(() =>
|
||||
accessCodeSet.value.has(FINANCE_INVOICE_VOID_PERMISSION),
|
||||
);
|
||||
|
||||
const canViewSettings = computed(() => {
|
||||
const accessCodes = accessCodeSet.value;
|
||||
return (
|
||||
accessCodes.has(FINANCE_INVOICE_VIEW_PERMISSION) ||
|
||||
accessCodes.has(FINANCE_INVOICE_SETTINGS_PERMISSION)
|
||||
);
|
||||
});
|
||||
|
||||
const canManageSettings = computed(() =>
|
||||
accessCodeSet.value.has(FINANCE_INVOICE_SETTINGS_PERMISSION),
|
||||
);
|
||||
|
||||
const canViewPage = computed(
|
||||
() => canViewRecords.value || canViewSettings.value,
|
||||
);
|
||||
|
||||
const tabOptions = computed(() =>
|
||||
INVOICE_TAB_OPTIONS.filter((item) => {
|
||||
if (item.value === 'records') {
|
||||
return canViewRecords.value;
|
||||
}
|
||||
if (item.value === 'settings') {
|
||||
return canViewSettings.value;
|
||||
}
|
||||
return false;
|
||||
}),
|
||||
);
|
||||
|
||||
const {
|
||||
applySettingsResult,
|
||||
clearByPermission,
|
||||
clearRecordData,
|
||||
loadRecordList,
|
||||
loadSettings,
|
||||
} = createDataActions({
|
||||
canViewRecords,
|
||||
canViewSettings,
|
||||
createDefaultSettingsForm,
|
||||
filters,
|
||||
isListLoading,
|
||||
isSettingsLoading,
|
||||
pagination,
|
||||
rows,
|
||||
settingForm,
|
||||
settingSnapshot,
|
||||
stats,
|
||||
});
|
||||
|
||||
const {
|
||||
openDetail,
|
||||
openIssue,
|
||||
openVoid,
|
||||
setDetailDrawerOpen,
|
||||
setIssueDrawerOpen,
|
||||
setIssueResultModalOpen,
|
||||
setVoidModalOpen,
|
||||
submitIssue,
|
||||
submitVoid,
|
||||
} = createDrawerActions({
|
||||
canIssue,
|
||||
canVoid,
|
||||
detail,
|
||||
isDetailDrawerOpen,
|
||||
isDetailLoading,
|
||||
isIssueDetailLoading,
|
||||
isIssueDrawerOpen,
|
||||
isIssueResultModalOpen,
|
||||
isIssueSubmitting,
|
||||
isVoidModalOpen,
|
||||
isVoidSubmitting,
|
||||
issueDetail,
|
||||
issueForm,
|
||||
issueResult,
|
||||
issueTargetRecord,
|
||||
reloadRecordList: loadRecordList,
|
||||
voidForm,
|
||||
voidTargetRecord,
|
||||
});
|
||||
|
||||
const {
|
||||
hasSettingsChanged,
|
||||
openSettingsConfirmModal,
|
||||
resetSettings,
|
||||
setSettingsConfirmModalOpen,
|
||||
submitSettings,
|
||||
} = createSettingsActions({
|
||||
applySettingsResult,
|
||||
canManageSettings,
|
||||
isSettingsConfirmModalOpen,
|
||||
isSettingsSaving,
|
||||
settingForm,
|
||||
settingSnapshot,
|
||||
});
|
||||
|
||||
function setActiveTab(value: FinanceInvoiceTabKey) {
|
||||
activeTab.value = value;
|
||||
}
|
||||
|
||||
function setStartDate(value: string) {
|
||||
filters.startDate = value;
|
||||
}
|
||||
|
||||
function setEndDate(value: string) {
|
||||
filters.endDate = value;
|
||||
}
|
||||
|
||||
function setStatus(value: string) {
|
||||
filters.status = (value || 'all') as FinanceInvoiceFilterState['status'];
|
||||
}
|
||||
|
||||
function setInvoiceType(value: string) {
|
||||
filters.invoiceType = (value || 'all') as FinanceInvoiceFilterState['invoiceType'];
|
||||
}
|
||||
|
||||
function setKeyword(value: string) {
|
||||
filters.keyword = value;
|
||||
}
|
||||
|
||||
function setIssueFormContactEmail(value: string) {
|
||||
issueForm.contactEmail = value;
|
||||
}
|
||||
|
||||
function setIssueFormRemark(value: string) {
|
||||
issueForm.issueRemark = value;
|
||||
}
|
||||
|
||||
function setVoidReason(value: string) {
|
||||
voidForm.voidReason = value;
|
||||
}
|
||||
|
||||
function setSettingsField<K extends keyof FinanceInvoiceSettingFormState>(
|
||||
field: K,
|
||||
value: FinanceInvoiceSettingFormState[K],
|
||||
) {
|
||||
settingForm[field] = value;
|
||||
}
|
||||
|
||||
async function handleSearch() {
|
||||
if (isDateRangeInvalid(filters)) {
|
||||
message.warning('开始日期不能晚于结束日期');
|
||||
return;
|
||||
}
|
||||
|
||||
pagination.page = 1;
|
||||
await loadRecordList();
|
||||
}
|
||||
|
||||
async function handlePageChange(page: number, pageSize: number) {
|
||||
pagination.page = page;
|
||||
pagination.pageSize = pageSize;
|
||||
await loadRecordList();
|
||||
}
|
||||
|
||||
function closeTransientPanels() {
|
||||
setDetailDrawerOpen(false);
|
||||
setIssueDrawerOpen(false);
|
||||
setVoidModalOpen(false);
|
||||
setIssueResultModalOpen(false);
|
||||
setSettingsConfirmModalOpen(false);
|
||||
}
|
||||
|
||||
async function loadByPermission() {
|
||||
const tasks: Array<Promise<void>> = [];
|
||||
|
||||
if (canViewRecords.value) {
|
||||
tasks.push(loadRecordList());
|
||||
} else {
|
||||
clearRecordData();
|
||||
}
|
||||
|
||||
if (canViewSettings.value) {
|
||||
tasks.push(loadSettings());
|
||||
}
|
||||
|
||||
await Promise.all(tasks);
|
||||
}
|
||||
|
||||
watch(tabOptions, (next) => {
|
||||
const values = next.map((item) => item.value);
|
||||
if (values.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!values.includes(activeTab.value)) {
|
||||
activeTab.value = values[0] as FinanceInvoiceTabKey;
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
canViewPage,
|
||||
async (value, oldValue) => {
|
||||
if (value === oldValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!value) {
|
||||
clearByPermission();
|
||||
closeTransientPanels();
|
||||
return;
|
||||
}
|
||||
|
||||
await loadByPermission();
|
||||
},
|
||||
{ immediate: false },
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
if (!canViewPage.value) {
|
||||
clearByPermission();
|
||||
closeTransientPanels();
|
||||
return;
|
||||
}
|
||||
|
||||
await loadByPermission();
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
if (!canViewPage.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
void loadByPermission();
|
||||
});
|
||||
|
||||
return {
|
||||
activeTab,
|
||||
canIssue,
|
||||
canManageSettings,
|
||||
canViewPage,
|
||||
canViewRecords,
|
||||
canViewSettings,
|
||||
canVoid,
|
||||
detail,
|
||||
filters,
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
hasSettingsChanged,
|
||||
isDetailDrawerOpen,
|
||||
isDetailLoading,
|
||||
isIssueDetailLoading,
|
||||
isIssueDrawerOpen,
|
||||
isIssueResultModalOpen,
|
||||
isIssueSubmitting,
|
||||
isListLoading,
|
||||
isSettingsConfirmModalOpen,
|
||||
isSettingsLoading,
|
||||
isSettingsSaving,
|
||||
isVoidModalOpen,
|
||||
isVoidSubmitting,
|
||||
issueDetail,
|
||||
issueForm,
|
||||
issueResult,
|
||||
issueTargetRecord,
|
||||
openDetail,
|
||||
openIssue,
|
||||
openSettingsConfirmModal,
|
||||
openVoid,
|
||||
pagination,
|
||||
resetSettings,
|
||||
rows,
|
||||
setActiveTab,
|
||||
setDetailDrawerOpen,
|
||||
setEndDate,
|
||||
setInvoiceType,
|
||||
setIssueDrawerOpen,
|
||||
setIssueFormContactEmail,
|
||||
setIssueFormRemark,
|
||||
setIssueResultModalOpen,
|
||||
setKeyword,
|
||||
setSettingsConfirmModalOpen,
|
||||
setSettingsField,
|
||||
setStartDate,
|
||||
setStatus,
|
||||
setVoidModalOpen,
|
||||
setVoidReason,
|
||||
settingForm,
|
||||
stats,
|
||||
submitIssue,
|
||||
submitSettings,
|
||||
submitVoid,
|
||||
tabOptions,
|
||||
voidForm,
|
||||
voidTargetRecord,
|
||||
};
|
||||
}
|
||||
@@ -1,198 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：财务中心发票管理页面入口编排。
|
||||
*/
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { Empty, Spin } from 'ant-design-vue';
|
||||
|
||||
import InvoiceDetailDrawer from './components/InvoiceDetailDrawer.vue';
|
||||
import InvoiceFilterBar from './components/InvoiceFilterBar.vue';
|
||||
import InvoiceIssueDrawer from './components/InvoiceIssueDrawer.vue';
|
||||
import InvoiceIssueResultModal from './components/InvoiceIssueResultModal.vue';
|
||||
import InvoiceSegmentTabs from './components/InvoiceSegmentTabs.vue';
|
||||
import InvoiceSettingsConfirmModal from './components/InvoiceSettingsConfirmModal.vue';
|
||||
import InvoiceSettingsPanel from './components/InvoiceSettingsPanel.vue';
|
||||
import InvoiceStatsBar from './components/InvoiceStatsBar.vue';
|
||||
import InvoiceTableCard from './components/InvoiceTableCard.vue';
|
||||
import InvoiceVoidConfirmModal from './components/InvoiceVoidConfirmModal.vue';
|
||||
import { useFinanceInvoicePage } from './composables/useFinanceInvoicePage';
|
||||
|
||||
const {
|
||||
activeTab,
|
||||
canIssue,
|
||||
canManageSettings,
|
||||
canViewPage,
|
||||
canViewRecords,
|
||||
canViewSettings,
|
||||
canVoid,
|
||||
detail,
|
||||
filters,
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
isDetailDrawerOpen,
|
||||
isDetailLoading,
|
||||
isIssueDetailLoading,
|
||||
isIssueDrawerOpen,
|
||||
isIssueResultModalOpen,
|
||||
isIssueSubmitting,
|
||||
isListLoading,
|
||||
isSettingsConfirmModalOpen,
|
||||
isSettingsLoading,
|
||||
isSettingsSaving,
|
||||
isVoidModalOpen,
|
||||
isVoidSubmitting,
|
||||
issueDetail,
|
||||
issueForm,
|
||||
issueResult,
|
||||
issueTargetRecord,
|
||||
openDetail,
|
||||
openIssue,
|
||||
openSettingsConfirmModal,
|
||||
openVoid,
|
||||
pagination,
|
||||
resetSettings,
|
||||
rows,
|
||||
setActiveTab,
|
||||
setDetailDrawerOpen,
|
||||
setEndDate,
|
||||
setInvoiceType,
|
||||
setIssueDrawerOpen,
|
||||
setIssueFormContactEmail,
|
||||
setIssueFormRemark,
|
||||
setIssueResultModalOpen,
|
||||
setKeyword,
|
||||
setSettingsConfirmModalOpen,
|
||||
setSettingsField,
|
||||
setStartDate,
|
||||
setStatus,
|
||||
setVoidModalOpen,
|
||||
setVoidReason,
|
||||
settingForm,
|
||||
stats,
|
||||
submitIssue,
|
||||
submitSettings,
|
||||
submitVoid,
|
||||
tabOptions,
|
||||
voidForm,
|
||||
voidTargetRecord,
|
||||
} = useFinanceInvoicePage();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page title="发票管理" content-class="page-finance-invoice">
|
||||
<div class="fi-page">
|
||||
<Empty v-if="!canViewPage" description="暂无发票管理页面访问权限" />
|
||||
|
||||
<template v-else>
|
||||
<InvoiceSegmentTabs
|
||||
:active-tab="activeTab"
|
||||
:options="tabOptions"
|
||||
@update:active-tab="setActiveTab"
|
||||
/>
|
||||
|
||||
<section v-show="activeTab === 'records'" class="fi-tab-panel">
|
||||
<template v-if="canViewRecords">
|
||||
<InvoiceStatsBar :stats="stats" />
|
||||
|
||||
<InvoiceFilterBar
|
||||
:filters="filters"
|
||||
@update:start-date="setStartDate"
|
||||
@update:end-date="setEndDate"
|
||||
@update:status="setStatus"
|
||||
@update:invoice-type="setInvoiceType"
|
||||
@update:keyword="setKeyword"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
|
||||
<InvoiceTableCard
|
||||
:rows="rows"
|
||||
:loading="isListLoading"
|
||||
:pagination="pagination"
|
||||
:can-issue="canIssue"
|
||||
:can-void="canVoid"
|
||||
@page-change="handlePageChange"
|
||||
@detail="openDetail"
|
||||
@issue="openIssue"
|
||||
@void="openVoid"
|
||||
/>
|
||||
</template>
|
||||
<Empty v-else description="暂无开票记录访问权限" />
|
||||
</section>
|
||||
|
||||
<section v-show="activeTab === 'settings'" class="fi-tab-panel">
|
||||
<template v-if="canViewSettings">
|
||||
<Spin :spinning="isSettingsLoading">
|
||||
<InvoiceSettingsPanel
|
||||
:form="settingForm"
|
||||
:can-manage-settings="canManageSettings"
|
||||
:saving="isSettingsSaving"
|
||||
@update:company-name="(value) => setSettingsField('companyName', value)"
|
||||
@update:taxpayer-number="(value) => setSettingsField('taxpayerNumber', value)"
|
||||
@update:registered-address="(value) => setSettingsField('registeredAddress', value)"
|
||||
@update:registered-phone="(value) => setSettingsField('registeredPhone', value)"
|
||||
@update:bank-name="(value) => setSettingsField('bankName', value)"
|
||||
@update:bank-account="(value) => setSettingsField('bankAccount', value)"
|
||||
@update:enable-electronic-normal-invoice="(value) => setSettingsField('enableElectronicNormalInvoice', value)"
|
||||
@update:enable-electronic-special-invoice="(value) => setSettingsField('enableElectronicSpecialInvoice', value)"
|
||||
@update:enable-auto-issue="(value) => setSettingsField('enableAutoIssue', value)"
|
||||
@update:auto-issue-max-amount="(value) => setSettingsField('autoIssueMaxAmount', value)"
|
||||
@reset="resetSettings"
|
||||
@save="openSettingsConfirmModal"
|
||||
/>
|
||||
</Spin>
|
||||
</template>
|
||||
<Empty v-else description="暂无发票设置访问权限" />
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<InvoiceIssueDrawer
|
||||
:open="isIssueDrawerOpen"
|
||||
:submitting="isIssueSubmitting"
|
||||
:loading-detail="isIssueDetailLoading"
|
||||
:target-record="issueTargetRecord"
|
||||
:detail="issueDetail"
|
||||
:form="issueForm"
|
||||
@close="setIssueDrawerOpen(false)"
|
||||
@update:contact-email="setIssueFormContactEmail"
|
||||
@update:issue-remark="setIssueFormRemark"
|
||||
@submit="submitIssue"
|
||||
/>
|
||||
|
||||
<InvoiceDetailDrawer
|
||||
:open="isDetailDrawerOpen"
|
||||
:loading="isDetailLoading"
|
||||
:detail="detail"
|
||||
@close="setDetailDrawerOpen(false)"
|
||||
/>
|
||||
|
||||
<InvoiceVoidConfirmModal
|
||||
:open="isVoidModalOpen"
|
||||
:submitting="isVoidSubmitting"
|
||||
:target-record="voidTargetRecord"
|
||||
:form="voidForm"
|
||||
@close="setVoidModalOpen(false)"
|
||||
@update:void-reason="setVoidReason"
|
||||
@submit="submitVoid"
|
||||
/>
|
||||
|
||||
<InvoiceIssueResultModal
|
||||
:open="isIssueResultModalOpen"
|
||||
:result="issueResult"
|
||||
@close="setIssueResultModalOpen(false)"
|
||||
/>
|
||||
|
||||
<InvoiceSettingsConfirmModal
|
||||
:open="isSettingsConfirmModalOpen"
|
||||
:submitting="isSettingsSaving"
|
||||
:form="settingForm"
|
||||
@close="setSettingsConfirmModalOpen(false)"
|
||||
@confirm="submitSettings"
|
||||
/>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
@import './styles/index.less';
|
||||
</style>
|
||||
@@ -1,24 +0,0 @@
|
||||
/**
|
||||
* 文件职责：发票管理页面基础样式。
|
||||
*/
|
||||
.page-finance-invoice {
|
||||
.ant-card {
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.fi-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fi-tab-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fi-mono {
|
||||
font-family: ui-monospace, sfmono-regular, menlo, consolas, monospace;
|
||||
}
|
||||
@@ -1,135 +0,0 @@
|
||||
/**
|
||||
* 文件职责：发票抽屉样式。
|
||||
*/
|
||||
.page-finance-invoice {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fi-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.fi-section-title {
|
||||
padding-left: 10px;
|
||||
margin-bottom: 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
border-left: 3px solid #1677ff;
|
||||
}
|
||||
|
||||
.fi-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px 20px;
|
||||
font-size: 13px;
|
||||
|
||||
.label {
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.fi-amount-strong {
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fi-drawer-footer {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.fi-timeline {
|
||||
position: relative;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
.fi-timeline-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
padding-bottom: 18px;
|
||||
font-size: 13px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: -22px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: '';
|
||||
background: #1677ff;
|
||||
border: 2px solid #d6e4ff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
left: -18px;
|
||||
width: 2px;
|
||||
height: calc(100% - 12px);
|
||||
content: '';
|
||||
background: #e8e8e8;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-weight: 500;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.time {
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
}
|
||||
|
||||
.fi-remark-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
font-size: 13px;
|
||||
color: rgb(0 0 0 / 65%);
|
||||
background: #fafafa;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.fi-remark-line {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
.label {
|
||||
width: 70px;
|
||||
flex-shrink: 0;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
/**
|
||||
* 文件职责：发票管理页面样式聚合入口。
|
||||
*/
|
||||
@import './base.less';
|
||||
@import './layout.less';
|
||||
@import './table.less';
|
||||
@import './drawer.less';
|
||||
@import './modal.less';
|
||||
@import './responsive.less';
|
||||
@@ -1,166 +0,0 @@
|
||||
/**
|
||||
* 文件职责：发票管理页面布局样式。
|
||||
*/
|
||||
.fi-seg-wrap {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.fi-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fi-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);
|
||||
}
|
||||
|
||||
&.warn .fi-stat-val {
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
&.danger .fi-stat-val {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
|
||||
.fi-stat-label {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fi-stat-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.fi-stat-val {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fi-stat-sub {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fi-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 14px 16px;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
|
||||
|
||||
.fi-date-input {
|
||||
width: 146px;
|
||||
}
|
||||
|
||||
.fi-status-select,
|
||||
.fi-type-select {
|
||||
width: 124px;
|
||||
}
|
||||
|
||||
.fi-date-sep {
|
||||
font-size: 13px;
|
||||
line-height: 32px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fi-toolbar-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.fi-search {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.fi-search-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.ant-select-selector,
|
||||
.ant-input,
|
||||
.ant-input-affix-wrapper {
|
||||
height: 32px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper .ant-input {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.fi-settings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fi-section-hd {
|
||||
padding-left: 10px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
border-left: 3px solid #1677ff;
|
||||
}
|
||||
|
||||
.fi-form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px 24px;
|
||||
}
|
||||
|
||||
.fi-toggle-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.fi-toggle-label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fi-toggle-hint {
|
||||
font-size: 12px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fi-auto-form {
|
||||
max-width: 340px;
|
||||
}
|
||||
|
||||
.fi-max-amount-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fi-save-bar {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@@ -1,63 +0,0 @@
|
||||
/**
|
||||
* 文件职责：发票弹窗样式。
|
||||
*/
|
||||
.fi-void-modal,
|
||||
.fi-issue-result,
|
||||
.fi-settings-confirm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fi-void-warning {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #cf1322;
|
||||
}
|
||||
|
||||
.fi-void-summary,
|
||||
.fi-result-list,
|
||||
.fi-settings-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px 14px;
|
||||
background: #fafafa;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.fi-void-line,
|
||||
.fi-result-line,
|
||||
.fi-settings-line {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
|
||||
.label {
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.value {
|
||||
color: rgb(0 0 0 / 88%);
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.fi-result-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.fi-result-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.fi-settings-desc {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: rgb(0 0 0 / 65%);
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
/**
|
||||
* 文件职责：发票管理页面响应式样式。
|
||||
*/
|
||||
@media (max-width: 1600px) {
|
||||
.fi-stats {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.fi-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.fi-toolbar {
|
||||
padding: 14px 12px;
|
||||
|
||||
.fi-date-input,
|
||||
.fi-status-select,
|
||||
.fi-type-select,
|
||||
.fi-search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fi-date-sep,
|
||||
.fi-toolbar-spacer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fi-form-grid,
|
||||
.fi-info-grid {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
.full {
|
||||
grid-column: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.fi-save-bar {
|
||||
justify-content: stretch;
|
||||
|
||||
.ant-btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
/**
|
||||
* 文件职责：发票记录表格样式。
|
||||
*/
|
||||
.fi-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-pagination {
|
||||
margin: 14px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.fi-company-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
|
||||
.fi-applicant {
|
||||
font-weight: 500;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fi-company {
|
||||
font-size: 12px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
}
|
||||
|
||||
.fi-amount {
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
|
||||
.fi-time {
|
||||
font-size: 12px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fi-link-action {
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.fi-action-wrap {
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
/**
|
||||
* 文件职责：发票管理页面本地状态类型定义。
|
||||
*/
|
||||
import type {
|
||||
FinanceInvoiceStatusFilter,
|
||||
FinanceInvoiceTypeFilter,
|
||||
} from '#/api/finance';
|
||||
|
||||
/** 页面分段键。 */
|
||||
export type FinanceInvoiceTabKey = 'records' | 'settings';
|
||||
|
||||
/** 发票记录筛选状态。 */
|
||||
export interface FinanceInvoiceFilterState {
|
||||
endDate: string;
|
||||
invoiceType: FinanceInvoiceTypeFilter;
|
||||
keyword: string;
|
||||
startDate: string;
|
||||
status: FinanceInvoiceStatusFilter;
|
||||
}
|
||||
|
||||
/** 发票记录分页状态。 */
|
||||
export interface FinanceInvoicePaginationState {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
totalCount: number;
|
||||
}
|
||||
|
||||
/** 发票设置表单状态。 */
|
||||
export interface FinanceInvoiceSettingFormState {
|
||||
autoIssueMaxAmount: number;
|
||||
bankAccount: string;
|
||||
bankName: string;
|
||||
companyName: string;
|
||||
enableAutoIssue: boolean;
|
||||
enableElectronicNormalInvoice: boolean;
|
||||
enableElectronicSpecialInvoice: boolean;
|
||||
registeredAddress: string;
|
||||
registeredPhone: string;
|
||||
taxpayerNumber: string;
|
||||
}
|
||||
|
||||
/** 发票开票抽屉表单状态。 */
|
||||
export interface FinanceInvoiceIssueFormState {
|
||||
contactEmail: string;
|
||||
issueRemark: string;
|
||||
}
|
||||
|
||||
/** 发票作废弹窗表单状态。 */
|
||||
export interface FinanceInvoiceVoidFormState {
|
||||
voidReason: string;
|
||||
}
|
||||
|
||||
/** 通用选项项。 */
|
||||
export interface OptionItem {
|
||||
label: string;
|
||||
value: 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,60 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：到账查询结算账户信息条展示。
|
||||
*/
|
||||
import type { FinanceSettlementAccountDto } from '#/api/finance';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
interface Props {
|
||||
account: FinanceSettlementAccountDto | null;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const accountText = computed(() => {
|
||||
const bankName = props.account?.bankName?.trim();
|
||||
const accountNoMasked = props.account?.bankAccountNoMasked?.trim();
|
||||
|
||||
if (!bankName && !accountNoMasked) {
|
||||
return '--';
|
||||
}
|
||||
|
||||
return `${bankName || ''} ${accountNoMasked || ''}`.trim();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fst-account-bar" :class="{ 'is-loading': props.loading }">
|
||||
<IconifyIcon icon="lucide:landmark" class="fst-account-icon" />
|
||||
|
||||
<span>
|
||||
结算账户：<strong>{{ accountText }}</strong>
|
||||
</span>
|
||||
|
||||
<span class="fst-account-sep"></span>
|
||||
|
||||
<span>
|
||||
微信商户号：<strong>{{
|
||||
props.account?.wechatMerchantNoMasked || '--'
|
||||
}}</strong>
|
||||
</span>
|
||||
|
||||
<span class="fst-account-sep"></span>
|
||||
|
||||
<span>
|
||||
支付宝PID：<strong>{{ props.account?.alipayPidMasked || '--' }}</strong>
|
||||
</span>
|
||||
|
||||
<span class="fst-account-sep"></span>
|
||||
|
||||
<span>
|
||||
结算周期：<strong>{{
|
||||
props.account?.settlementPeriodText || '--'
|
||||
}}</strong>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,51 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：到账查询展开明细子表。
|
||||
*/
|
||||
import type { FinanceSettlementDetailItemDto } from '#/api/finance';
|
||||
|
||||
import {
|
||||
formatCurrency,
|
||||
formatPaidTime,
|
||||
} from '../composables/settlement-page/helpers';
|
||||
|
||||
interface Props {
|
||||
items: FinanceSettlementDetailItemDto[];
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fst-detail-wrap">
|
||||
<div class="fst-detail-title">交易明细（部分）</div>
|
||||
|
||||
<table class="fst-mini-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>订单号</th>
|
||||
<th>金额</th>
|
||||
<th>时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="props.loading">
|
||||
<td colspan="3">加载中...</td>
|
||||
</tr>
|
||||
<tr v-else-if="props.items.length === 0">
|
||||
<td colspan="3">暂无明细数据</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-for="item in props.items"
|
||||
v-else
|
||||
:key="`${item.orderNo}_${item.paidAt}`"
|
||||
>
|
||||
<td class="fst-mono">{{ item.orderNo }}</td>
|
||||
<td>{{ formatCurrency(item.amount) }}</td>
|
||||
<td>{{ formatPaidTime(item.paidAt) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,105 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：到账查询筛选栏（门店、日期、渠道、导出）。
|
||||
*/
|
||||
import type { FinanceSettlementFilterState, OptionItem } from '../types';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Button, Input, Select } from 'ant-design-vue';
|
||||
|
||||
import { SETTLEMENT_CHANNEL_OPTIONS } from '../composables/settlement-page/constants';
|
||||
|
||||
interface Props {
|
||||
canExport: boolean;
|
||||
filters: FinanceSettlementFilterState;
|
||||
isExporting: boolean;
|
||||
isStoreLoading: boolean;
|
||||
selectedStoreId: string;
|
||||
storeOptions: OptionItem[];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'export'): void;
|
||||
(event: 'search'): void;
|
||||
(event: 'update:channel', value: string): void;
|
||||
(event: 'update:endDate', value: string): void;
|
||||
(event: 'update:selectedStoreId', value: string): void;
|
||||
(event: 'update:startDate', value: string): void;
|
||||
}>();
|
||||
|
||||
function handleStoreChange(value: unknown) {
|
||||
if (typeof value === 'number' || typeof value === 'string') {
|
||||
emit('update:selectedStoreId', String(value));
|
||||
return;
|
||||
}
|
||||
|
||||
emit('update:selectedStoreId', '');
|
||||
}
|
||||
|
||||
function handleStartDateChange(value: string | undefined) {
|
||||
emit('update:startDate', String(value ?? ''));
|
||||
emit('search');
|
||||
}
|
||||
|
||||
function handleEndDateChange(value: string | undefined) {
|
||||
emit('update:endDate', String(value ?? ''));
|
||||
emit('search');
|
||||
}
|
||||
|
||||
function handleChannelChange(value: unknown) {
|
||||
emit('update:channel', String(value ?? 'all'));
|
||||
emit('search');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fst-toolbar">
|
||||
<Select
|
||||
class="fst-store-select"
|
||||
:value="props.selectedStoreId"
|
||||
placeholder="选择门店"
|
||||
:loading="props.isStoreLoading"
|
||||
:options="props.storeOptions"
|
||||
:disabled="props.isStoreLoading || props.storeOptions.length === 0"
|
||||
@update:value="(value) => handleStoreChange(value)"
|
||||
/>
|
||||
|
||||
<Input
|
||||
class="fst-date-input"
|
||||
type="date"
|
||||
:value="props.filters.startDate"
|
||||
@update:value="(value) => handleStartDateChange(value)"
|
||||
/>
|
||||
<span class="fst-date-sep">~</span>
|
||||
<Input
|
||||
class="fst-date-input"
|
||||
type="date"
|
||||
:value="props.filters.endDate"
|
||||
@update:value="(value) => handleEndDateChange(value)"
|
||||
/>
|
||||
|
||||
<Select
|
||||
class="fst-channel-select"
|
||||
:value="props.filters.channel"
|
||||
:options="SETTLEMENT_CHANNEL_OPTIONS"
|
||||
@update:value="(value) => handleChannelChange(value)"
|
||||
/>
|
||||
|
||||
<div class="fst-toolbar-right">
|
||||
<Button
|
||||
class="fst-export-btn"
|
||||
:disabled="!props.canExport || !props.selectedStoreId"
|
||||
:loading="props.isExporting"
|
||||
@click="emit('export')"
|
||||
>
|
||||
<template #icon>
|
||||
<IconifyIcon icon="lucide:download" />
|
||||
</template>
|
||||
导出
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,63 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：到账查询统计卡片展示。
|
||||
*/
|
||||
import type { FinanceSettlementStatsDto } from '#/api/finance';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import {
|
||||
formatCount,
|
||||
formatCurrency,
|
||||
} from '../composables/settlement-page/helpers';
|
||||
|
||||
interface Props {
|
||||
stats: FinanceSettlementStatsDto;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fst-stats">
|
||||
<div class="fst-stat-card">
|
||||
<div class="fst-stat-label">
|
||||
<IconifyIcon icon="lucide:circle-check" class="fst-stat-icon" />
|
||||
今日到账
|
||||
</div>
|
||||
<div class="fst-stat-value is-green">
|
||||
{{ formatCurrency(props.stats.todayArrivedAmount) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fst-stat-card">
|
||||
<div class="fst-stat-label">
|
||||
<IconifyIcon icon="lucide:calendar-minus" class="fst-stat-icon" />
|
||||
昨日到账
|
||||
</div>
|
||||
<div class="fst-stat-value">
|
||||
{{ formatCurrency(props.stats.yesterdayArrivedAmount) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fst-stat-card">
|
||||
<div class="fst-stat-label">
|
||||
<IconifyIcon icon="lucide:calendar-check" class="fst-stat-icon" />
|
||||
本月累计到账
|
||||
</div>
|
||||
<div class="fst-stat-value">
|
||||
{{ formatCurrency(props.stats.currentMonthArrivedAmount) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fst-stat-card">
|
||||
<div class="fst-stat-label">
|
||||
<IconifyIcon icon="lucide:receipt" class="fst-stat-icon" />
|
||||
本月交易笔数
|
||||
</div>
|
||||
<div class="fst-stat-value">
|
||||
{{ formatCount(props.stats.currentMonthTransactionCount) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,131 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：到账查询列表表格与展开明细。
|
||||
*/
|
||||
import type { TablePaginationConfig, TableProps } from 'ant-design-vue';
|
||||
|
||||
import type { FinanceSettlementDetailStateMap } from '../types';
|
||||
|
||||
import type { FinanceSettlementListItemDto } from '#/api/finance';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { Table } from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
formatCurrency,
|
||||
getSettlementRowKey,
|
||||
resolveChannelDotClass,
|
||||
} from '../composables/settlement-page/helpers';
|
||||
import SettlementDetailTable from './SettlementDetailTable.vue';
|
||||
|
||||
interface PaginationState {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
detailStates: FinanceSettlementDetailStateMap;
|
||||
expandedRowKeys: string[];
|
||||
loading: boolean;
|
||||
pagination: PaginationState;
|
||||
rows: FinanceSettlementListItemDto[];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'expand', expanded: boolean, row: FinanceSettlementListItemDto): void;
|
||||
(event: 'pageChange', page: number, pageSize: number): void;
|
||||
}>();
|
||||
|
||||
const columns: TableProps['columns'] = [
|
||||
{
|
||||
title: '到账日期',
|
||||
dataIndex: 'arrivedDate',
|
||||
width: 170,
|
||||
},
|
||||
{
|
||||
title: '支付渠道',
|
||||
dataIndex: 'channelText',
|
||||
width: 190,
|
||||
},
|
||||
{
|
||||
title: '交易笔数',
|
||||
dataIndex: 'transactionCount',
|
||||
width: 130,
|
||||
},
|
||||
{
|
||||
title: '到账金额',
|
||||
dataIndex: 'arrivedAmount',
|
||||
align: 'right',
|
||||
width: 180,
|
||||
},
|
||||
];
|
||||
|
||||
const expandable = computed(() => ({
|
||||
expandedRowKeys: props.expandedRowKeys,
|
||||
onExpand: (expanded: boolean, row: FinanceSettlementListItemDto) => {
|
||||
emit('expand', expanded, row);
|
||||
},
|
||||
}));
|
||||
|
||||
function handleTableChange(next: TablePaginationConfig) {
|
||||
emit('pageChange', Number(next.current || 1), Number(next.pageSize || 20));
|
||||
}
|
||||
|
||||
function resolveDetailState(row: FinanceSettlementListItemDto) {
|
||||
return (
|
||||
props.detailStates[getSettlementRowKey(row)] ?? {
|
||||
loading: false,
|
||||
items: [],
|
||||
}
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fst-table-card">
|
||||
<Table
|
||||
:row-key="getSettlementRowKey"
|
||||
:columns="columns"
|
||||
:data-source="props.rows"
|
||||
:loading="props.loading"
|
||||
:pagination="{
|
||||
current: props.pagination.page,
|
||||
pageSize: props.pagination.pageSize,
|
||||
total: props.pagination.total,
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['20', '50', '100'],
|
||||
showTotal: (total: number) => `共 ${total} 条`,
|
||||
}"
|
||||
:expandable="expandable"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'channelText'">
|
||||
<span class="fst-channel-icon">
|
||||
<span
|
||||
class="fst-channel-dot"
|
||||
:class="resolveChannelDotClass(String(record.channel))"
|
||||
></span>
|
||||
{{ record.channelText }}
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'arrivedAmount'">
|
||||
<span class="fst-amount">{{
|
||||
formatCurrency(Number(record.arrivedAmount || 0))
|
||||
}}</span>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template #expandedRowRender="{ record }">
|
||||
<SettlementDetailTable
|
||||
:loading="resolveDetailState(record).loading"
|
||||
:items="resolveDetailState(record).items"
|
||||
/>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,55 +0,0 @@
|
||||
import type { FinanceSettlementFilterState, OptionItem } from '../../types';
|
||||
|
||||
import type {
|
||||
FinanceSettlementAccountDto,
|
||||
FinanceSettlementChannelFilter,
|
||||
FinanceSettlementStatsDto,
|
||||
} from '#/api/finance';
|
||||
|
||||
/**
|
||||
* 文件职责：到账查询页面常量与默认状态定义。
|
||||
*/
|
||||
import { getTodayDateString } from './helpers';
|
||||
|
||||
/** 到账查询查看权限。 */
|
||||
export const FINANCE_SETTLEMENT_VIEW_PERMISSION =
|
||||
'tenant:finance:settlement:view';
|
||||
|
||||
/** 到账查询导出权限。 */
|
||||
export const FINANCE_SETTLEMENT_EXPORT_PERMISSION =
|
||||
'tenant:finance:settlement:export';
|
||||
|
||||
/** 到账渠道筛选项。 */
|
||||
export const SETTLEMENT_CHANNEL_OPTIONS: OptionItem[] = [
|
||||
{ label: '全部渠道', value: 'all' },
|
||||
{ label: '微信支付', value: 'wechat' },
|
||||
{ label: '支付宝', value: 'alipay' },
|
||||
];
|
||||
|
||||
/** 默认筛选状态。 */
|
||||
export function createDefaultFilters(): FinanceSettlementFilterState {
|
||||
const today = getTodayDateString();
|
||||
return {
|
||||
channel: 'all' as FinanceSettlementChannelFilter,
|
||||
startDate: today,
|
||||
endDate: today,
|
||||
};
|
||||
}
|
||||
|
||||
/** 默认统计数据。 */
|
||||
export const DEFAULT_STATS: FinanceSettlementStatsDto = {
|
||||
todayArrivedAmount: 0,
|
||||
yesterdayArrivedAmount: 0,
|
||||
currentMonthArrivedAmount: 0,
|
||||
currentMonthTransactionCount: 0,
|
||||
};
|
||||
|
||||
/** 默认账户信息。 */
|
||||
export const DEFAULT_ACCOUNT: FinanceSettlementAccountDto = {
|
||||
bankName: '',
|
||||
bankAccountName: '',
|
||||
bankAccountNoMasked: '',
|
||||
wechatMerchantNoMasked: '',
|
||||
alipayPidMasked: '',
|
||||
settlementPeriodText: '',
|
||||
};
|
||||
@@ -1,133 +0,0 @@
|
||||
import type {
|
||||
FinanceSettlementFilterState,
|
||||
FinanceSettlementPaginationState,
|
||||
} from '../../types';
|
||||
|
||||
import type {
|
||||
FinanceSettlementAccountDto,
|
||||
FinanceSettlementListItemDto,
|
||||
FinanceSettlementStatsDto,
|
||||
} from '#/api/finance';
|
||||
import type { StoreListItemDto } from '#/api/store';
|
||||
|
||||
/**
|
||||
* 文件职责：到账查询页面数据加载动作。
|
||||
*/
|
||||
import {
|
||||
getFinanceSettlementAccountApi,
|
||||
getFinanceSettlementListApi,
|
||||
getFinanceSettlementStatsApi,
|
||||
} from '#/api/finance';
|
||||
import { getStoreListApi } from '#/api/store';
|
||||
|
||||
import { buildListQueryPayload } from './helpers';
|
||||
|
||||
interface DataActionOptions {
|
||||
account: { value: FinanceSettlementAccountDto | null };
|
||||
filters: FinanceSettlementFilterState;
|
||||
isAccountLoading: { value: boolean };
|
||||
isListLoading: { value: boolean };
|
||||
isStatsLoading: { value: boolean };
|
||||
isStoreLoading: { value: boolean };
|
||||
pagination: FinanceSettlementPaginationState;
|
||||
rows: { value: FinanceSettlementListItemDto[] };
|
||||
selectedStoreId: { value: string };
|
||||
stats: FinanceSettlementStatsDto;
|
||||
stores: { value: StoreListItemDto[] };
|
||||
}
|
||||
|
||||
/** 创建数据相关动作。 */
|
||||
export function createDataActions(options: DataActionOptions) {
|
||||
function resetStats() {
|
||||
options.stats.todayArrivedAmount = 0;
|
||||
options.stats.yesterdayArrivedAmount = 0;
|
||||
options.stats.currentMonthArrivedAmount = 0;
|
||||
options.stats.currentMonthTransactionCount = 0;
|
||||
}
|
||||
|
||||
function clearPageData() {
|
||||
options.rows.value = [];
|
||||
options.pagination.total = 0;
|
||||
resetStats();
|
||||
}
|
||||
|
||||
async function loadStores() {
|
||||
options.isStoreLoading.value = true;
|
||||
try {
|
||||
const result = await getStoreListApi({ page: 1, pageSize: 200 });
|
||||
options.stores.value = result.items;
|
||||
|
||||
if (result.items.length === 0) {
|
||||
options.selectedStoreId.value = '';
|
||||
clearPageData();
|
||||
return;
|
||||
}
|
||||
|
||||
const matched = result.items.some(
|
||||
(item) => item.id === options.selectedStoreId.value,
|
||||
);
|
||||
|
||||
if (!matched) {
|
||||
options.selectedStoreId.value = result.items[0]?.id ?? '';
|
||||
}
|
||||
} finally {
|
||||
options.isStoreLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAccount() {
|
||||
options.isAccountLoading.value = true;
|
||||
try {
|
||||
options.account.value = await getFinanceSettlementAccountApi();
|
||||
} finally {
|
||||
options.isAccountLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadPageData() {
|
||||
if (!options.selectedStoreId.value) {
|
||||
clearPageData();
|
||||
return;
|
||||
}
|
||||
|
||||
const storeId = options.selectedStoreId.value;
|
||||
const listPayload = buildListQueryPayload(
|
||||
storeId,
|
||||
options.filters,
|
||||
options.pagination.page,
|
||||
options.pagination.pageSize,
|
||||
);
|
||||
|
||||
options.isListLoading.value = true;
|
||||
options.isStatsLoading.value = true;
|
||||
try {
|
||||
const [listResult, statsResult] = await Promise.all([
|
||||
getFinanceSettlementListApi(listPayload),
|
||||
getFinanceSettlementStatsApi({ storeId }),
|
||||
]);
|
||||
|
||||
options.rows.value = listResult.items;
|
||||
options.pagination.total = listResult.total;
|
||||
options.pagination.page = listResult.page;
|
||||
options.pagination.pageSize = listResult.pageSize;
|
||||
|
||||
options.stats.todayArrivedAmount = statsResult.todayArrivedAmount;
|
||||
options.stats.yesterdayArrivedAmount = statsResult.yesterdayArrivedAmount;
|
||||
options.stats.currentMonthArrivedAmount =
|
||||
statsResult.currentMonthArrivedAmount;
|
||||
options.stats.currentMonthTransactionCount =
|
||||
statsResult.currentMonthTransactionCount;
|
||||
} finally {
|
||||
options.isListLoading.value = false;
|
||||
options.isStatsLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
clearPageData,
|
||||
loadAccount,
|
||||
loadPageData,
|
||||
loadStores,
|
||||
resetStats,
|
||||
};
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
import type {
|
||||
FinanceSettlementDetailStateMap,
|
||||
FinanceSettlementExpandAction,
|
||||
} from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：到账查询展开明细动作。
|
||||
*/
|
||||
import { getFinanceSettlementDetailApi } from '#/api/finance';
|
||||
|
||||
import { getSettlementRowKey } from './helpers';
|
||||
|
||||
interface DetailActionOptions {
|
||||
detailStates: FinanceSettlementDetailStateMap;
|
||||
expandedRowKeys: { value: string[] };
|
||||
selectedStoreId: { value: string };
|
||||
}
|
||||
|
||||
/** 创建展开明细动作。 */
|
||||
export function createDetailActions(options: DetailActionOptions) {
|
||||
function clearDetailStates() {
|
||||
options.expandedRowKeys.value = [];
|
||||
for (const key of Object.keys(options.detailStates)) {
|
||||
Reflect.deleteProperty(options.detailStates, key);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleExpand(action: FinanceSettlementExpandAction) {
|
||||
const key = getSettlementRowKey(action.row);
|
||||
|
||||
if (!action.expanded) {
|
||||
options.expandedRowKeys.value = options.expandedRowKeys.value.filter(
|
||||
(item) => item !== key,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!options.selectedStoreId.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!options.expandedRowKeys.value.includes(key)) {
|
||||
options.expandedRowKeys.value = [...options.expandedRowKeys.value, key];
|
||||
}
|
||||
|
||||
const currentState = options.detailStates[key] ?? {
|
||||
loading: false,
|
||||
items: [],
|
||||
};
|
||||
|
||||
if (currentState.loading || currentState.items.length > 0) {
|
||||
options.detailStates[key] = currentState;
|
||||
return;
|
||||
}
|
||||
|
||||
currentState.loading = true;
|
||||
options.detailStates[key] = currentState;
|
||||
|
||||
try {
|
||||
const result = await getFinanceSettlementDetailApi({
|
||||
storeId: options.selectedStoreId.value,
|
||||
arrivedDate: action.row.arrivedDate,
|
||||
channel: action.row.channel,
|
||||
});
|
||||
|
||||
currentState.items = result.items;
|
||||
} finally {
|
||||
currentState.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
clearDetailStates,
|
||||
handleExpand,
|
||||
};
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import type { FinanceSettlementFilterState } from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：到账查询导出动作。
|
||||
*/
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import { exportFinanceSettlementCsvApi } from '#/api/finance';
|
||||
|
||||
import {
|
||||
buildFilterQueryPayload,
|
||||
downloadBase64File,
|
||||
isDateRangeInvalid,
|
||||
} from './helpers';
|
||||
|
||||
interface ExportActionOptions {
|
||||
canExport: { value: boolean };
|
||||
filters: FinanceSettlementFilterState;
|
||||
isExporting: { value: boolean };
|
||||
selectedStoreId: { value: string };
|
||||
}
|
||||
|
||||
/** 创建导出动作。 */
|
||||
export function createExportActions(options: ExportActionOptions) {
|
||||
async function handleExport() {
|
||||
if (!options.canExport.value || !options.selectedStoreId.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isDateRangeInvalid(options.filters)) {
|
||||
message.warning('开始日期不能晚于结束日期');
|
||||
return;
|
||||
}
|
||||
|
||||
options.isExporting.value = true;
|
||||
try {
|
||||
const payload = buildFilterQueryPayload(
|
||||
options.selectedStoreId.value,
|
||||
options.filters,
|
||||
);
|
||||
const result = await exportFinanceSettlementCsvApi(payload);
|
||||
downloadBase64File(result.fileName, result.fileContentBase64);
|
||||
message.success(`导出成功，共 ${result.totalCount} 条记录`);
|
||||
} finally {
|
||||
options.isExporting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
handleExport,
|
||||
};
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
import type {
|
||||
FinanceSettlementFilterState,
|
||||
FinanceSettlementPaginationState,
|
||||
} from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：到账查询页面筛选与分页行为。
|
||||
*/
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
import { isDateRangeInvalid } from './helpers';
|
||||
|
||||
interface FilterActionOptions {
|
||||
filters: FinanceSettlementFilterState;
|
||||
loadPageData: () => Promise<void>;
|
||||
pagination: FinanceSettlementPaginationState;
|
||||
}
|
||||
|
||||
/** 创建筛选行为。 */
|
||||
export function createFilterActions(options: FilterActionOptions) {
|
||||
function setChannel(value: string) {
|
||||
options.filters.channel = (value ||
|
||||
'all') as FinanceSettlementFilterState['channel'];
|
||||
}
|
||||
|
||||
function setStartDate(value: string) {
|
||||
options.filters.startDate = value;
|
||||
}
|
||||
|
||||
function setEndDate(value: string) {
|
||||
options.filters.endDate = value;
|
||||
}
|
||||
|
||||
async function handleSearch() {
|
||||
if (isDateRangeInvalid(options.filters)) {
|
||||
message.warning('开始日期不能晚于结束日期');
|
||||
return;
|
||||
}
|
||||
|
||||
options.pagination.page = 1;
|
||||
await options.loadPageData();
|
||||
}
|
||||
|
||||
async function handlePageChange(page: number, pageSize: number) {
|
||||
options.pagination.page = page;
|
||||
options.pagination.pageSize = pageSize;
|
||||
await options.loadPageData();
|
||||
}
|
||||
|
||||
return {
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
setChannel,
|
||||
setEndDate,
|
||||
setStartDate,
|
||||
};
|
||||
}
|
||||
@@ -1,134 +0,0 @@
|
||||
import type {
|
||||
FinanceSettlementFilterState,
|
||||
FinanceSettlementListQueryPayload,
|
||||
FinanceSettlementQueryPayload,
|
||||
} from '../../types';
|
||||
|
||||
/**
|
||||
* 文件职责：到账查询页面纯函数与数据转换工具。
|
||||
*/
|
||||
import type {
|
||||
FinanceSettlementChannelFilter,
|
||||
FinanceSettlementListItemDto,
|
||||
} from '#/api/finance';
|
||||
|
||||
function formatDate(date: Date) {
|
||||
const year = date.getFullYear();
|
||||
const month = `${date.getMonth() + 1}`.padStart(2, '0');
|
||||
const day = `${date.getDate()}`.padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
function normalizeChannel(value: FinanceSettlementChannelFilter) {
|
||||
return value === 'all' ? undefined : value;
|
||||
}
|
||||
|
||||
function decodeBase64ToBlob(base64: string) {
|
||||
const binary = atob(base64);
|
||||
const bytes = new Uint8Array(binary.length);
|
||||
for (let index = 0; index < binary.length; index += 1) {
|
||||
bytes[index] = binary.codePointAt(index) ?? 0;
|
||||
}
|
||||
return new Blob([bytes], { type: 'text/csv;charset=utf-8;' });
|
||||
}
|
||||
|
||||
/** 获取今天日期字符串（yyyy-MM-dd）。 */
|
||||
export function getTodayDateString() {
|
||||
return formatDate(new Date());
|
||||
}
|
||||
|
||||
/** 构建到账筛选请求。 */
|
||||
export function buildFilterQueryPayload(
|
||||
storeId: string,
|
||||
filters: FinanceSettlementFilterState,
|
||||
): FinanceSettlementQueryPayload {
|
||||
return {
|
||||
storeId,
|
||||
startDate: filters.startDate || undefined,
|
||||
endDate: filters.endDate || undefined,
|
||||
channel: normalizeChannel(filters.channel),
|
||||
};
|
||||
}
|
||||
|
||||
/** 构建到账列表请求。 */
|
||||
export function buildListQueryPayload(
|
||||
storeId: string,
|
||||
filters: FinanceSettlementFilterState,
|
||||
page: number,
|
||||
pageSize: number,
|
||||
): FinanceSettlementListQueryPayload {
|
||||
return {
|
||||
...buildFilterQueryPayload(storeId, filters),
|
||||
page,
|
||||
pageSize,
|
||||
};
|
||||
}
|
||||
|
||||
/** 判断日期范围是否合法。 */
|
||||
export function isDateRangeInvalid(filters: FinanceSettlementFilterState) {
|
||||
if (!filters.startDate || !filters.endDate) {
|
||||
return false;
|
||||
}
|
||||
return filters.startDate > filters.endDate;
|
||||
}
|
||||
|
||||
/** 货币格式化（人民币）。 */
|
||||
export function formatCurrency(value: number) {
|
||||
return new Intl.NumberFormat('zh-CN', {
|
||||
style: 'currency',
|
||||
currency: 'CNY',
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
}).format(Number.isFinite(value) ? value : 0);
|
||||
}
|
||||
|
||||
/** 数值格式化（千分位整数）。 */
|
||||
export function formatCount(value: number) {
|
||||
return new Intl.NumberFormat('zh-CN', {
|
||||
maximumFractionDigits: 0,
|
||||
}).format(Number.isFinite(value) ? value : 0);
|
||||
}
|
||||
|
||||
/** 表格行唯一键。 */
|
||||
export function getSettlementRowKey(row: FinanceSettlementListItemDto) {
|
||||
return `${row.arrivedDate}_${row.channel}`;
|
||||
}
|
||||
|
||||
/** 到账渠道圆点类名。 */
|
||||
export function resolveChannelDotClass(channel: string) {
|
||||
return channel === 'wechat' ? 'is-wechat' : 'is-alipay';
|
||||
}
|
||||
|
||||
/** 明细支付时间格式化（HH:mm）。 */
|
||||
export function formatPaidTime(value: string) {
|
||||
const normalized = String(value || '').trim();
|
||||
if (!normalized) {
|
||||
return '--';
|
||||
}
|
||||
|
||||
const separatorIndex = normalized.indexOf(' ');
|
||||
if (separatorIndex !== -1 && normalized.length >= separatorIndex + 6) {
|
||||
return normalized.slice(separatorIndex + 1, separatorIndex + 6);
|
||||
}
|
||||
|
||||
const timePrefix = normalized.match(/^\d{2}:\d{2}/);
|
||||
if (timePrefix?.[0]) {
|
||||
return timePrefix[0];
|
||||
}
|
||||
|
||||
return normalized;
|
||||
}
|
||||
|
||||
/** 下载 Base64 编码文件。 */
|
||||
export function downloadBase64File(
|
||||
fileName: string,
|
||||
fileContentBase64: string,
|
||||
) {
|
||||
const blob = decodeBase64ToBlob(fileContentBase64);
|
||||
const url = URL.createObjectURL(blob);
|
||||
const anchor = document.createElement('a');
|
||||
anchor.href = url;
|
||||
anchor.download = fileName;
|
||||
anchor.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
@@ -1,201 +0,0 @@
|
||||
import type { FinanceSettlementDetailStateMap } from '../types';
|
||||
|
||||
/**
|
||||
* 文件职责：到账查询页面状态与动作编排。
|
||||
*/
|
||||
import type {
|
||||
FinanceSettlementAccountDto,
|
||||
FinanceSettlementListItemDto,
|
||||
FinanceSettlementStatsDto,
|
||||
} from '#/api/finance';
|
||||
import type { StoreListItemDto } from '#/api/store';
|
||||
|
||||
import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue';
|
||||
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
|
||||
import {
|
||||
createDefaultFilters,
|
||||
DEFAULT_STATS,
|
||||
FINANCE_SETTLEMENT_EXPORT_PERMISSION,
|
||||
FINANCE_SETTLEMENT_VIEW_PERMISSION,
|
||||
} from './settlement-page/constants';
|
||||
import { createDataActions } from './settlement-page/data-actions';
|
||||
import { createDetailActions } from './settlement-page/detail-actions';
|
||||
import { createExportActions } from './settlement-page/export-actions';
|
||||
import { createFilterActions } from './settlement-page/filter-actions';
|
||||
|
||||
/** 创建到账查询页面组合状态。 */
|
||||
export function useFinanceSettlementPage() {
|
||||
const accessStore = useAccessStore();
|
||||
|
||||
const stores = ref<StoreListItemDto[]>([]);
|
||||
const selectedStoreId = ref('');
|
||||
const isStoreLoading = ref(false);
|
||||
|
||||
const filters = reactive(createDefaultFilters());
|
||||
const rows = ref<FinanceSettlementListItemDto[]>([]);
|
||||
const pagination = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
const stats = reactive<FinanceSettlementStatsDto>({ ...DEFAULT_STATS });
|
||||
const account = ref<FinanceSettlementAccountDto | null>(null);
|
||||
|
||||
const isListLoading = ref(false);
|
||||
const isStatsLoading = ref(false);
|
||||
const isAccountLoading = ref(false);
|
||||
const isExporting = ref(false);
|
||||
|
||||
const expandedRowKeys = ref<string[]>([]);
|
||||
const detailStates = reactive<FinanceSettlementDetailStateMap>({});
|
||||
|
||||
const storeOptions = computed(() =>
|
||||
stores.value.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
})),
|
||||
);
|
||||
|
||||
const accessCodeSet = computed(
|
||||
() => new Set((accessStore.accessCodes ?? []).map(String)),
|
||||
);
|
||||
|
||||
const canView = computed(() =>
|
||||
accessCodeSet.value.has(FINANCE_SETTLEMENT_VIEW_PERMISSION),
|
||||
);
|
||||
|
||||
const canExport = computed(() =>
|
||||
accessCodeSet.value.has(FINANCE_SETTLEMENT_EXPORT_PERMISSION),
|
||||
);
|
||||
|
||||
const { clearPageData, loadAccount, loadPageData, loadStores, resetStats } =
|
||||
createDataActions({
|
||||
stores,
|
||||
selectedStoreId,
|
||||
filters,
|
||||
rows,
|
||||
pagination,
|
||||
stats,
|
||||
account,
|
||||
isStoreLoading,
|
||||
isListLoading,
|
||||
isStatsLoading,
|
||||
isAccountLoading,
|
||||
});
|
||||
|
||||
const {
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
setChannel,
|
||||
setEndDate,
|
||||
setStartDate,
|
||||
} = createFilterActions({
|
||||
filters,
|
||||
pagination,
|
||||
loadPageData,
|
||||
});
|
||||
|
||||
const { clearDetailStates, handleExpand } = createDetailActions({
|
||||
selectedStoreId,
|
||||
expandedRowKeys,
|
||||
detailStates,
|
||||
});
|
||||
|
||||
const { handleExport } = createExportActions({
|
||||
canExport,
|
||||
selectedStoreId,
|
||||
filters,
|
||||
isExporting,
|
||||
});
|
||||
|
||||
function setSelectedStoreId(value: string) {
|
||||
selectedStoreId.value = value;
|
||||
}
|
||||
|
||||
function clearByPermission() {
|
||||
stores.value = [];
|
||||
selectedStoreId.value = '';
|
||||
account.value = null;
|
||||
clearPageData();
|
||||
clearDetailStates();
|
||||
resetStats();
|
||||
}
|
||||
|
||||
watch(selectedStoreId, async (storeId) => {
|
||||
clearDetailStates();
|
||||
|
||||
if (!storeId) {
|
||||
clearPageData();
|
||||
return;
|
||||
}
|
||||
|
||||
pagination.page = 1;
|
||||
await loadPageData();
|
||||
});
|
||||
|
||||
watch(canView, async (value, oldValue) => {
|
||||
if (value === oldValue) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!value) {
|
||||
clearByPermission();
|
||||
return;
|
||||
}
|
||||
|
||||
await Promise.all([loadStores(), loadAccount()]);
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
if (!canView.value) {
|
||||
clearByPermission();
|
||||
return;
|
||||
}
|
||||
|
||||
await Promise.all([loadStores(), loadAccount()]);
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
if (!canView.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (stores.value.length === 0 || !selectedStoreId.value) {
|
||||
void loadStores();
|
||||
}
|
||||
|
||||
if (!account.value && !isAccountLoading.value) {
|
||||
void loadAccount();
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
account,
|
||||
canExport,
|
||||
canView,
|
||||
detailStates,
|
||||
expandedRowKeys,
|
||||
filters,
|
||||
handleExpand,
|
||||
handleExport,
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
isAccountLoading,
|
||||
isExporting,
|
||||
isListLoading,
|
||||
isStatsLoading,
|
||||
isStoreLoading,
|
||||
pagination,
|
||||
rows,
|
||||
selectedStoreId,
|
||||
setChannel,
|
||||
setEndDate,
|
||||
setSelectedStoreId,
|
||||
setStartDate,
|
||||
stats,
|
||||
storeOptions,
|
||||
};
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 文件职责：财务中心到账查询页面入口编排。
|
||||
*/
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { Empty } from 'ant-design-vue';
|
||||
|
||||
import SettlementAccountBar from './components/SettlementAccountBar.vue';
|
||||
import SettlementFilterBar from './components/SettlementFilterBar.vue';
|
||||
import SettlementStatsCards from './components/SettlementStatsCards.vue';
|
||||
import SettlementTableCard from './components/SettlementTableCard.vue';
|
||||
import { useFinanceSettlementPage } from './composables/useFinanceSettlementPage';
|
||||
|
||||
const {
|
||||
account,
|
||||
canExport,
|
||||
canView,
|
||||
detailStates,
|
||||
expandedRowKeys,
|
||||
filters,
|
||||
handleExpand,
|
||||
handleExport,
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
isAccountLoading,
|
||||
isExporting,
|
||||
isListLoading,
|
||||
isStoreLoading,
|
||||
pagination,
|
||||
rows,
|
||||
selectedStoreId,
|
||||
setChannel,
|
||||
setEndDate,
|
||||
setSelectedStoreId,
|
||||
setStartDate,
|
||||
stats,
|
||||
storeOptions,
|
||||
} = useFinanceSettlementPage();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page title="到账查询" content-class="page-finance-settlement">
|
||||
<div class="fst-page">
|
||||
<template v-if="canView">
|
||||
<SettlementStatsCards :stats="stats" />
|
||||
|
||||
<SettlementAccountBar :account="account" :loading="isAccountLoading" />
|
||||
|
||||
<SettlementFilterBar
|
||||
:selected-store-id="selectedStoreId"
|
||||
:store-options="storeOptions"
|
||||
:is-store-loading="isStoreLoading"
|
||||
:filters="filters"
|
||||
:can-export="canExport"
|
||||
:is-exporting="isExporting"
|
||||
@update:selected-store-id="setSelectedStoreId"
|
||||
@update:start-date="setStartDate"
|
||||
@update:end-date="setEndDate"
|
||||
@update:channel="setChannel"
|
||||
@search="handleSearch"
|
||||
@export="handleExport"
|
||||
/>
|
||||
|
||||
<SettlementTableCard
|
||||
:rows="rows"
|
||||
:loading="isListLoading"
|
||||
:pagination="pagination"
|
||||
:expanded-row-keys="expandedRowKeys"
|
||||
:detail-states="detailStates"
|
||||
@expand="(expanded, row) => handleExpand({ expanded, row })"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<Empty v-else description="暂无到账查询页面访问权限" />
|
||||
</div>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
@import './styles/index.less';
|
||||
</style>
|
||||
@@ -1,18 +0,0 @@
|
||||
/**
|
||||
* 文件职责：到账查询页面基础容器样式。
|
||||
*/
|
||||
.page-finance-settlement {
|
||||
.ant-card {
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.fst-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fst-mono {
|
||||
font-family: ui-monospace, sfmono-regular, menlo, consolas, monospace;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
/**
|
||||
* 文件职责：到账查询页面样式聚合入口。
|
||||
*/
|
||||
@import './base.less';
|
||||
@import './layout.less';
|
||||
@import './table.less';
|
||||
@import './responsive.less';
|
||||
@@ -1,134 +0,0 @@
|
||||
/**
|
||||
* 文件职责：到账查询页面布局与筛选区域样式。
|
||||
*/
|
||||
.fst-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.fst-stat-card {
|
||||
padding: 18px 20px;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 6px 14px rgb(15 23 42 / 10%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
.fst-stat-label {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
font-size: 13px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fst-stat-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.fst-stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
|
||||
&.is-green {
|
||||
color: #52c41a;
|
||||
}
|
||||
}
|
||||
|
||||
.fst-account-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
padding: 14px 20px;
|
||||
font-size: 13px;
|
||||
color: rgb(0 0 0 / 65%);
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
|
||||
|
||||
&.is-loading {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
}
|
||||
}
|
||||
|
||||
.fst-account-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.fst-account-sep {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.fst-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 14px 18px;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
|
||||
|
||||
.fst-store-select {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.fst-date-input {
|
||||
width: 145px;
|
||||
}
|
||||
|
||||
.fst-channel-select {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.fst-date-sep {
|
||||
font-size: 13px;
|
||||
line-height: 32px;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
}
|
||||
|
||||
.fst-toolbar-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.fst-export-btn {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.ant-select-selector,
|
||||
.ant-input,
|
||||
.ant-input-affix-wrapper {
|
||||
height: 32px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ant-input-affix-wrapper .ant-input {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
/**
|
||||
* 文件职责：到账查询页面响应式样式。
|
||||
*/
|
||||
@media (max-width: 1600px) {
|
||||
.fst-stats {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.fst-account-sep {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.fst-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.fst-toolbar {
|
||||
padding: 14px 12px;
|
||||
|
||||
.fst-store-select,
|
||||
.fst-date-input,
|
||||
.fst-channel-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fst-date-sep {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fst-toolbar-right {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.fst-export-btn {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.fst-detail-wrap {
|
||||
padding: 12px 12px 12px 24px;
|
||||
}
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
/**
|
||||
* 文件职责：到账查询表格与展开明细样式。
|
||||
*/
|
||||
.fst-table-card {
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 10px;
|
||||
|
||||
.ant-table-wrapper {
|
||||
.ant-table-thead > tr > th {
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
font-size: 13px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ant-table-expanded-row > td {
|
||||
padding: 0 !important;
|
||||
background: #f8f9fb !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination {
|
||||
margin: 14px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.fst-channel-icon {
|
||||
display: inline-flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fst-channel-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
|
||||
&.is-wechat {
|
||||
background: #07c160;
|
||||
}
|
||||
|
||||
&.is-alipay {
|
||||
background: #1677ff;
|
||||
}
|
||||
}
|
||||
|
||||
.fst-amount {
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fst-detail-wrap {
|
||||
padding: 14px 20px 14px 40px;
|
||||
}
|
||||
|
||||
.fst-detail-title {
|
||||
padding-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
border-left: 3px solid #1677ff;
|
||||
}
|
||||
|
||||
.fst-mini-table {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
border-collapse: collapse;
|
||||
|
||||
th {
|
||||
padding: 8px 10px;
|
||||
font-weight: 500;
|
||||
color: rgb(0 0 0 / 45%);
|
||||
text-align: left;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 8px 10px;
|
||||
color: rgb(0 0 0 / 88%);
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tbody tr td[colspan] {
|
||||
color: rgb(0 0 0 / 45%);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
/**
|
||||
* 文件职责：到账查询页面本地状态类型定义。
|
||||
*/
|
||||
import type {
|
||||
FinanceSettlementChannelFilter,
|
||||
FinanceSettlementDetailItemDto,
|
||||
FinanceSettlementListItemDto,
|
||||
} from '#/api/finance';
|
||||
|
||||
/** 到账查询筛选状态。 */
|
||||
export interface FinanceSettlementFilterState {
|
||||
channel: FinanceSettlementChannelFilter;
|
||||
endDate: string;
|
||||
startDate: string;
|
||||
}
|
||||
|
||||
/** 到账查询分页状态。 */
|
||||
export interface FinanceSettlementPaginationState {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
/** 通用选项项。 */
|
||||
export interface OptionItem {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
/** 到账筛选请求负载。 */
|
||||
export interface FinanceSettlementQueryPayload {
|
||||
channel?: Exclude<FinanceSettlementChannelFilter, 'all'>;
|
||||
endDate?: string;
|
||||
startDate?: string;
|
||||
storeId: string;
|
||||
}
|
||||
|
||||
/** 到账列表请求负载。 */
|
||||
export interface FinanceSettlementListQueryPayload extends FinanceSettlementQueryPayload {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
}
|
||||
|
||||
/** 展开行明细状态。 */
|
||||
export interface FinanceSettlementDetailState {
|
||||
items: FinanceSettlementDetailItemDto[];
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
/** 展开行明细缓存映射。 */
|
||||
export type FinanceSettlementDetailStateMap = Record<
|
||||
string,
|
||||
FinanceSettlementDetailState
|
||||
>;
|
||||
|
||||
/** 表格展开动作参数。 */
|
||||
export interface FinanceSettlementExpandAction {
|
||||
expanded: boolean;
|
||||
row: FinanceSettlementListItemDto;
|
||||
}
|
||||
@@ -12,11 +12,9 @@ interface Props {
|
||||
freeDeliveryThreshold: null | number;
|
||||
isSaving: boolean;
|
||||
minimumOrderAmount: number;
|
||||
platformServiceRate: number;
|
||||
onSetBaseDeliveryFee: (value: number) => void;
|
||||
onSetFreeDeliveryThreshold: (value: null | number) => void;
|
||||
onSetMinimumOrderAmount: (value: number) => void;
|
||||
onSetPlatformServiceRate: (value: number) => void;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
@@ -87,31 +85,6 @@ function toNumber(value: null | number | string, fallback = 0) {
|
||||
<div class="fees-hint">每笔订单默认收取的配送费</div>
|
||||
</div>
|
||||
|
||||
<div class="fees-field">
|
||||
<label>平台服务费率</label>
|
||||
<div class="fees-input-row">
|
||||
<InputNumber
|
||||
:value="props.platformServiceRate"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:precision="2"
|
||||
:step="0.1"
|
||||
:controls="false"
|
||||
:disabled="!props.canOperate"
|
||||
class="fees-input"
|
||||
placeholder="如：5.00"
|
||||
@update:value="
|
||||
(value) =>
|
||||
props.onSetPlatformServiceRate(
|
||||
toNumber(value, props.platformServiceRate),
|
||||
)
|
||||
"
|
||||
/>
|
||||
<span class="fees-unit">%</span>
|
||||
</div>
|
||||
<div class="fees-hint">按实收金额计算平台服务费成本</div>
|
||||
</div>
|
||||
|
||||
<div class="fees-field">
|
||||
<label>免配送费门槛</label>
|
||||
<div class="fees-input-row">
|
||||
|
||||
@@ -62,10 +62,6 @@ export function createDataActions(options: CreateDataActionsOptions) {
|
||||
0,
|
||||
);
|
||||
options.form.baseDeliveryFee = normalizeMoney(next.baseDeliveryFee, 0);
|
||||
options.form.platformServiceRate = normalizeMoney(
|
||||
next.platformServiceRate,
|
||||
0,
|
||||
);
|
||||
options.form.freeDeliveryThreshold =
|
||||
next.freeDeliveryThreshold === null
|
||||
? null
|
||||
@@ -113,7 +109,6 @@ export function createDataActions(options: CreateDataActionsOptions) {
|
||||
return {
|
||||
minimumOrderAmount: normalizeMoney(source?.minimumOrderAmount ?? 0, 0),
|
||||
baseDeliveryFee: normalizeMoney(source?.baseDeliveryFee ?? 0, 0),
|
||||
platformServiceRate: normalizeMoney(source?.platformServiceRate ?? 0, 0),
|
||||
freeDeliveryThreshold:
|
||||
source?.freeDeliveryThreshold === null ||
|
||||
source?.freeDeliveryThreshold === undefined
|
||||
@@ -135,7 +130,6 @@ export function createDataActions(options: CreateDataActionsOptions) {
|
||||
storeId,
|
||||
minimumOrderAmount: options.form.minimumOrderAmount,
|
||||
baseDeliveryFee: options.form.baseDeliveryFee,
|
||||
platformServiceRate: options.form.platformServiceRate,
|
||||
freeDeliveryThreshold: options.form.freeDeliveryThreshold,
|
||||
packagingFeeMode: options.form.packagingFeeMode,
|
||||
orderPackagingFeeMode: options.form.orderPackagingFeeMode,
|
||||
|
||||
@@ -26,7 +26,6 @@ export function cloneFeesForm(source: StoreFeesFormState): StoreFeesFormState {
|
||||
return {
|
||||
minimumOrderAmount: source.minimumOrderAmount,
|
||||
baseDeliveryFee: source.baseDeliveryFee,
|
||||
platformServiceRate: source.platformServiceRate,
|
||||
freeDeliveryThreshold: source.freeDeliveryThreshold,
|
||||
packagingFeeMode: source.packagingFeeMode,
|
||||
orderPackagingFeeMode: source.orderPackagingFeeMode,
|
||||
|
||||
@@ -36,7 +36,6 @@ import { createPackagingActions } from './fees-page/packaging-actions';
|
||||
const EMPTY_FEES_SETTINGS: StoreFeesFormState = {
|
||||
minimumOrderAmount: 0,
|
||||
baseDeliveryFee: 0,
|
||||
platformServiceRate: 0,
|
||||
freeDeliveryThreshold: null,
|
||||
packagingFeeMode: 'order',
|
||||
orderPackagingFeeMode: 'fixed',
|
||||
@@ -208,10 +207,6 @@ export function useStoreFeesPage() {
|
||||
form.baseDeliveryFee = normalizeMoney(value, form.baseDeliveryFee);
|
||||
}
|
||||
|
||||
function setPlatformServiceRate(value: number) {
|
||||
form.platformServiceRate = normalizeMoney(value, form.platformServiceRate);
|
||||
}
|
||||
|
||||
function setFreeDeliveryThreshold(value: null | number) {
|
||||
if (value === null || value === undefined) {
|
||||
form.freeDeliveryThreshold = null;
|
||||
@@ -306,7 +301,6 @@ export function useStoreFeesPage() {
|
||||
const source = snapshot.value;
|
||||
form.minimumOrderAmount = source.minimumOrderAmount;
|
||||
form.baseDeliveryFee = source.baseDeliveryFee;
|
||||
form.platformServiceRate = source.platformServiceRate;
|
||||
form.freeDeliveryThreshold = source.freeDeliveryThreshold;
|
||||
message.success('已重置起送与配送费');
|
||||
}
|
||||
@@ -455,7 +449,6 @@ export function useStoreFeesPage() {
|
||||
setFixedPackagingFee,
|
||||
setFreeDeliveryThreshold,
|
||||
setMinimumOrderAmount,
|
||||
setPlatformServiceRate,
|
||||
setPackagingMode,
|
||||
setRushAmount,
|
||||
setRushEnabled,
|
||||
|
||||
@@ -59,7 +59,6 @@ const {
|
||||
setFixedPackagingFee,
|
||||
setFreeDeliveryThreshold,
|
||||
setMinimumOrderAmount,
|
||||
setPlatformServiceRate,
|
||||
setPackagingMode,
|
||||
setRushAmount,
|
||||
setRushEnabled,
|
||||
@@ -112,12 +111,10 @@ function onEditTier(tier: PackagingFeeTierDto) {
|
||||
:can-operate="canOperate"
|
||||
:minimum-order-amount="form.minimumOrderAmount"
|
||||
:base-delivery-fee="form.baseDeliveryFee"
|
||||
:platform-service-rate="form.platformServiceRate"
|
||||
:free-delivery-threshold="form.freeDeliveryThreshold"
|
||||
:is-saving="isSavingDelivery"
|
||||
:on-set-minimum-order-amount="setMinimumOrderAmount"
|
||||
:on-set-base-delivery-fee="setBaseDeliveryFee"
|
||||
:on-set-platform-service-rate="setPlatformServiceRate"
|
||||
:on-set-free-delivery-threshold="setFreeDeliveryThreshold"
|
||||
@save="saveDeliverySection"
|
||||
@reset="resetDeliverySection"
|
||||
|
||||
@@ -21,7 +21,6 @@ export interface PackagingFeeTierFormState {
|
||||
|
||||
export interface StoreFeesFormState {
|
||||
baseDeliveryFee: number;
|
||||
platformServiceRate: number;
|
||||
fixedPackagingFee: number;
|
||||
freeDeliveryThreshold: null | number;
|
||||
minimumOrderAmount: number;
|
||||
|
||||
Reference in New Issue
Block a user