Merge pull request 'feat(@vben/web-antd): add finance cost management pages' (#6) from feature/finance-cost-1to1-clean into main
Some checks failed
Build and Deploy TenantUI / build-and-deploy (push) Failing after 1s
Some checks failed
Build and Deploy TenantUI / build-and-deploy (push) Failing after 1s
Reviewed-on: #6
This commit was merged in pull request #6.
This commit is contained in:
143
apps/web-antd/src/api/finance/cost.ts
Normal file
143
apps/web-antd/src/api/finance/cost.ts
Normal file
@@ -0,0 +1,143 @@
|
|||||||
|
/**
|
||||||
|
* 文件职责：财务中心成本管理 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,
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -0,0 +1,119 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,114 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,157 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,191 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,107 @@
|
|||||||
|
<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>
|
||||||
@@ -0,0 +1,96 @@
|
|||||||
|
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),
|
||||||
|
}));
|
||||||
|
}
|
||||||
@@ -0,0 +1,169 @@
|
|||||||
|
/**
|
||||||
|
* 文件职责：成本管理页面数据加载与保存动作。
|
||||||
|
*/
|
||||||
|
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,
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,89 @@
|
|||||||
|
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,
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,122 @@
|
|||||||
|
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)}`;
|
||||||
|
}
|
||||||
@@ -0,0 +1,53 @@
|
|||||||
|
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,
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,154 @@
|
|||||||
|
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}`;
|
||||||
|
}
|
||||||
@@ -0,0 +1,313 @@
|
|||||||
|
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,
|
||||||
|
};
|
||||||
|
}
|
||||||
184
apps/web-antd/src/views/finance/cost/index.vue
Normal file
184
apps/web-antd/src/views/finance/cost/index.vue
Normal file
@@ -0,0 +1,184 @@
|
|||||||
|
<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>
|
||||||
146
apps/web-antd/src/views/finance/cost/styles/analysis.less
Normal file
146
apps/web-antd/src/views/finance/cost/styles/analysis.less
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
/**
|
||||||
|
* 文件职责：成本分析区域样式。
|
||||||
|
*/
|
||||||
|
.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;
|
||||||
|
}
|
||||||
22
apps/web-antd/src/views/finance/cost/styles/base.less
Normal file
22
apps/web-antd/src/views/finance/cost/styles/base.less
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
/**
|
||||||
|
* 文件职责：成本管理页面基础容器样式。
|
||||||
|
*/
|
||||||
|
.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;
|
||||||
|
}
|
||||||
24
apps/web-antd/src/views/finance/cost/styles/drawer.less
Normal file
24
apps/web-antd/src/views/finance/cost/styles/drawer.less
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
/**
|
||||||
|
* 文件职责：成本明细抽屉与删除弹窗样式。
|
||||||
|
*/
|
||||||
|
.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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
153
apps/web-antd/src/views/finance/cost/styles/entry.less
Normal file
153
apps/web-antd/src/views/finance/cost/styles/entry.less
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
/**
|
||||||
|
* 文件职责：成本录入区域样式。
|
||||||
|
*/
|
||||||
|
.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;
|
||||||
|
}
|
||||||
9
apps/web-antd/src/views/finance/cost/styles/index.less
Normal file
9
apps/web-antd/src/views/finance/cost/styles/index.less
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
/**
|
||||||
|
* 文件职责：成本管理页面样式聚合入口。
|
||||||
|
*/
|
||||||
|
@import './base.less';
|
||||||
|
@import './layout.less';
|
||||||
|
@import './entry.less';
|
||||||
|
@import './analysis.less';
|
||||||
|
@import './drawer.less';
|
||||||
|
@import './responsive.less';
|
||||||
86
apps/web-antd/src/views/finance/cost/styles/layout.less
Normal file
86
apps/web-antd/src/views/finance/cost/styles/layout.less
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
/**
|
||||||
|
* 文件职责：成本管理页面布局与顶部工具条样式。
|
||||||
|
*/
|
||||||
|
.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;
|
||||||
|
}
|
||||||
84
apps/web-antd/src/views/finance/cost/styles/responsive.less
Normal file
84
apps/web-antd/src/views/finance/cost/styles/responsive.less
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
/**
|
||||||
|
* 文件职责：成本管理页面响应式适配样式。
|
||||||
|
*/
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
67
apps/web-antd/src/views/finance/cost/types.ts
Normal file
67
apps/web-antd/src/views/finance/cost/types.ts
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
/**
|
||||||
|
* 文件职责：成本管理页面本地类型定义。
|
||||||
|
*/
|
||||||
|
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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user