Compare commits
1 Commits
1e3f1be961
...
23d26b4e47
| Author | SHA1 | Date | |
|---|---|---|---|
| 23d26b4e47 |
@@ -3,6 +3,5 @@
|
|||||||
*/
|
*/
|
||||||
export * from './cost';
|
export * from './cost';
|
||||||
export * from './invoice';
|
export * from './invoice';
|
||||||
export * from './report';
|
|
||||||
export * from './settlement';
|
export * from './settlement';
|
||||||
export * from './transaction';
|
export * from './transaction';
|
||||||
|
|||||||
@@ -1,156 +0,0 @@
|
|||||||
/**
|
|
||||||
* 文件职责：财务中心经营报表 API 契约与请求封装。
|
|
||||||
*/
|
|
||||||
import { requestClient } from '#/api/request';
|
|
||||||
|
|
||||||
/** 报表周期筛选值。 */
|
|
||||||
export type FinanceBusinessReportPeriodType = 'daily' | 'monthly' | 'weekly';
|
|
||||||
|
|
||||||
/** 经营报表状态值。 */
|
|
||||||
export type FinanceBusinessReportStatus =
|
|
||||||
| 'failed'
|
|
||||||
| 'queued'
|
|
||||||
| 'running'
|
|
||||||
| 'succeeded';
|
|
||||||
|
|
||||||
/** 经营报表列表查询参数。 */
|
|
||||||
export interface FinanceBusinessReportListQuery {
|
|
||||||
page: number;
|
|
||||||
pageSize: number;
|
|
||||||
periodType?: FinanceBusinessReportPeriodType;
|
|
||||||
storeId: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 经营报表详情查询参数。 */
|
|
||||||
export interface FinanceBusinessReportDetailQuery {
|
|
||||||
reportId: string;
|
|
||||||
storeId: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 经营报表批量导出查询参数。 */
|
|
||||||
export interface FinanceBusinessReportBatchExportQuery {
|
|
||||||
page: number;
|
|
||||||
pageSize: number;
|
|
||||||
periodType?: FinanceBusinessReportPeriodType;
|
|
||||||
storeId: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 经营报表列表行。 */
|
|
||||||
export interface FinanceBusinessReportListItemDto {
|
|
||||||
averageOrderValue: number;
|
|
||||||
canDownload: boolean;
|
|
||||||
costTotalAmount: number;
|
|
||||||
dateText: string;
|
|
||||||
netProfitAmount: number;
|
|
||||||
orderCount: number;
|
|
||||||
profitRatePercent: number;
|
|
||||||
refundRatePercent: number;
|
|
||||||
reportId: string;
|
|
||||||
revenueAmount: number;
|
|
||||||
status: FinanceBusinessReportStatus;
|
|
||||||
statusText: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 经营报表列表结果。 */
|
|
||||||
export interface FinanceBusinessReportListResultDto {
|
|
||||||
items: FinanceBusinessReportListItemDto[];
|
|
||||||
page: number;
|
|
||||||
pageSize: number;
|
|
||||||
total: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 经营报表 KPI 项。 */
|
|
||||||
export interface FinanceBusinessReportKpiDto {
|
|
||||||
key: string;
|
|
||||||
label: string;
|
|
||||||
momChangeRate: number;
|
|
||||||
valueText: string;
|
|
||||||
yoyChangeRate: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 经营报表明细项。 */
|
|
||||||
export interface FinanceBusinessReportBreakdownItemDto {
|
|
||||||
amount: number;
|
|
||||||
key: string;
|
|
||||||
label: string;
|
|
||||||
ratioPercent: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 经营报表详情。 */
|
|
||||||
export interface FinanceBusinessReportDetailDto {
|
|
||||||
costBreakdowns: FinanceBusinessReportBreakdownItemDto[];
|
|
||||||
incomeBreakdowns: FinanceBusinessReportBreakdownItemDto[];
|
|
||||||
kpis: FinanceBusinessReportKpiDto[];
|
|
||||||
periodType: FinanceBusinessReportPeriodType;
|
|
||||||
reportId: string;
|
|
||||||
status: FinanceBusinessReportStatus;
|
|
||||||
statusText: string;
|
|
||||||
title: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 经营报表导出结果。 */
|
|
||||||
export interface FinanceBusinessReportExportDto {
|
|
||||||
fileContentBase64: string;
|
|
||||||
fileName: string;
|
|
||||||
totalCount: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 查询经营报表列表。 */
|
|
||||||
export async function getFinanceBusinessReportListApi(
|
|
||||||
params: FinanceBusinessReportListQuery,
|
|
||||||
) {
|
|
||||||
return requestClient.get<FinanceBusinessReportListResultDto>(
|
|
||||||
'/finance/report/list',
|
|
||||||
{
|
|
||||||
params,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 查询经营报表详情。 */
|
|
||||||
export async function getFinanceBusinessReportDetailApi(
|
|
||||||
params: FinanceBusinessReportDetailQuery,
|
|
||||||
) {
|
|
||||||
return requestClient.get<FinanceBusinessReportDetailDto>(
|
|
||||||
'/finance/report/detail',
|
|
||||||
{
|
|
||||||
params,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 导出经营报表 PDF。 */
|
|
||||||
export async function exportFinanceBusinessReportPdfApi(
|
|
||||||
params: FinanceBusinessReportDetailQuery,
|
|
||||||
) {
|
|
||||||
return requestClient.get<FinanceBusinessReportExportDto>(
|
|
||||||
'/finance/report/export/pdf',
|
|
||||||
{
|
|
||||||
params,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 导出经营报表 Excel。 */
|
|
||||||
export async function exportFinanceBusinessReportExcelApi(
|
|
||||||
params: FinanceBusinessReportDetailQuery,
|
|
||||||
) {
|
|
||||||
return requestClient.get<FinanceBusinessReportExportDto>(
|
|
||||||
'/finance/report/export/excel',
|
|
||||||
{
|
|
||||||
params,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 批量导出经营报表（ZIP）。 */
|
|
||||||
export async function exportFinanceBusinessReportBatchApi(
|
|
||||||
params: FinanceBusinessReportBatchExportQuery,
|
|
||||||
) {
|
|
||||||
return requestClient.get<FinanceBusinessReportExportDto>(
|
|
||||||
'/finance/report/export/batch',
|
|
||||||
{
|
|
||||||
params,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,96 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
/**
|
|
||||||
* 文件职责：经营报表批量导出确认弹窗。
|
|
||||||
*/
|
|
||||||
import type { FinanceBusinessReportPeriodType } from '#/api/finance';
|
|
||||||
|
|
||||||
import { computed } from 'vue';
|
|
||||||
|
|
||||||
import { Modal } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import { resolvePeriodTypeLabel } from '../composables/report-page/helpers';
|
|
||||||
|
|
||||||
interface PaginationState {
|
|
||||||
page: number;
|
|
||||||
pageSize: number;
|
|
||||||
total: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
currentPageCount: number;
|
|
||||||
open: boolean;
|
|
||||||
pagination: PaginationState;
|
|
||||||
periodType: FinanceBusinessReportPeriodType;
|
|
||||||
selectedStoreName: string;
|
|
||||||
submitting: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = defineProps<Props>();
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(event: 'close'): void;
|
|
||||||
(event: 'confirm'): void;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const periodText = computed(() => resolvePeriodTypeLabel(props.periodType));
|
|
||||||
const pageSizeText = computed(() => `${props.pagination.pageSize} 条/页`);
|
|
||||||
|
|
||||||
const pageRangeText = computed(() => {
|
|
||||||
const pageSize = Math.max(1, Number(props.pagination.pageSize || 20));
|
|
||||||
const page = Math.max(1, Number(props.pagination.page || 1));
|
|
||||||
const currentCount = Math.max(0, Number(props.currentPageCount || 0));
|
|
||||||
|
|
||||||
if (currentCount === 0) {
|
|
||||||
return '当前页暂无数据';
|
|
||||||
}
|
|
||||||
|
|
||||||
const start = (page - 1) * pageSize + 1;
|
|
||||||
const end = start + currentCount - 1;
|
|
||||||
return `${start}-${end}`;
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Modal
|
|
||||||
:open="props.open"
|
|
||||||
title="批量导出经营报表"
|
|
||||||
ok-text="确认导出"
|
|
||||||
cancel-text="取消"
|
|
||||||
:confirm-loading="props.submitting"
|
|
||||||
@ok="emit('confirm')"
|
|
||||||
@cancel="emit('close')"
|
|
||||||
>
|
|
||||||
<div class="frp-batch-modal">
|
|
||||||
<p class="frp-batch-desc">
|
|
||||||
将按当前门店、当前周期和当前分页范围导出 ZIP 文件（包含 PDF 与 Excel）。
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="frp-batch-list">
|
|
||||||
<div class="frp-batch-line">
|
|
||||||
<span class="frp-batch-label">门店</span>
|
|
||||||
<span class="frp-batch-value">{{ props.selectedStoreName }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="frp-batch-line">
|
|
||||||
<span class="frp-batch-label">报表周期</span>
|
|
||||||
<span class="frp-batch-value">{{ periodText }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="frp-batch-line">
|
|
||||||
<span class="frp-batch-label">当前页</span>
|
|
||||||
<span class="frp-batch-value">第 {{ props.pagination.page }} 页</span>
|
|
||||||
</div>
|
|
||||||
<div class="frp-batch-line">
|
|
||||||
<span class="frp-batch-label">分页大小</span>
|
|
||||||
<span class="frp-batch-value">{{ pageSizeText }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="frp-batch-line">
|
|
||||||
<span class="frp-batch-label">导出范围</span>
|
|
||||||
<span class="frp-batch-value">{{ pageRangeText }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="frp-batch-line is-total">
|
|
||||||
<span class="frp-batch-label">总报表数</span>
|
|
||||||
<span class="frp-batch-value">{{ props.pagination.total }} 条</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
</template>
|
|
||||||
@@ -1,208 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
/**
|
|
||||||
* 文件职责：经营报表预览抽屉。
|
|
||||||
*/
|
|
||||||
import type { FinanceBusinessReportDetailDto } from '#/api/finance';
|
|
||||||
|
|
||||||
import { computed } from 'vue';
|
|
||||||
|
|
||||||
import { IconifyIcon } from '@vben/icons';
|
|
||||||
|
|
||||||
import { Button, Drawer, Empty, Spin } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import {
|
|
||||||
formatCurrency,
|
|
||||||
formatPercent,
|
|
||||||
formatSignedRate,
|
|
||||||
} from '../composables/report-page/helpers';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
canExport: boolean;
|
|
||||||
detail: FinanceBusinessReportDetailDto | null;
|
|
||||||
isDownloadingExcel: boolean;
|
|
||||||
isDownloadingPdf: boolean;
|
|
||||||
loading: boolean;
|
|
||||||
open: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = defineProps<Props>();
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(event: 'close'): void;
|
|
||||||
(event: 'downloadExcel'): void;
|
|
||||||
(event: 'downloadPdf'): void;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const drawerTitle = computed(() => props.detail?.title || '经营报表预览');
|
|
||||||
|
|
||||||
const canDownload = computed(
|
|
||||||
() => props.canExport && Boolean(props.detail?.reportId),
|
|
||||||
);
|
|
||||||
|
|
||||||
const incomeIconMap: Record<string, { icon: string; tone: string }> = {
|
|
||||||
delivery: { icon: 'lucide:bike', tone: 'primary' },
|
|
||||||
dine_in: { icon: 'lucide:utensils', tone: 'warning' },
|
|
||||||
pickup: { icon: 'lucide:shopping-bag', tone: 'success' },
|
|
||||||
};
|
|
||||||
|
|
||||||
const costIconMap: Record<string, { icon: string; tone: string }> = {
|
|
||||||
fixed_expense: { icon: 'lucide:building-2', tone: 'muted' },
|
|
||||||
food_material: { icon: 'lucide:carrot', tone: 'warning' },
|
|
||||||
labor: { icon: 'lucide:users', tone: 'primary' },
|
|
||||||
packaging_consumable: { icon: 'lucide:package', tone: 'success' },
|
|
||||||
};
|
|
||||||
|
|
||||||
function resolveBreakdownMeta(type: 'cost' | 'income', key: string) {
|
|
||||||
const map = type === 'income' ? incomeIconMap : costIconMap;
|
|
||||||
return map[key] || { icon: 'lucide:circle', tone: 'muted' };
|
|
||||||
}
|
|
||||||
|
|
||||||
function isPositiveMetric(key: string) {
|
|
||||||
return key !== 'refund_rate';
|
|
||||||
}
|
|
||||||
|
|
||||||
function resolveKpiChangeTone(key: string, value: number) {
|
|
||||||
if (!Number.isFinite(value) || value === 0) {
|
|
||||||
return 'neutral';
|
|
||||||
}
|
|
||||||
|
|
||||||
const increaseGood = isPositiveMetric(key);
|
|
||||||
const isGood = (value > 0 && increaseGood) || (value < 0 && !increaseGood);
|
|
||||||
return isGood ? 'positive' : 'negative';
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatKpiChangeText(prefix: '同比' | '环比', value: number) {
|
|
||||||
return `${prefix} ${formatSignedRate(value)}`;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Drawer
|
|
||||||
:open="props.open"
|
|
||||||
class="frp-preview-drawer"
|
|
||||||
width="560"
|
|
||||||
:title="drawerTitle"
|
|
||||||
@close="emit('close')"
|
|
||||||
>
|
|
||||||
<Spin :spinning="props.loading">
|
|
||||||
<template v-if="props.detail">
|
|
||||||
<div class="frp-section">
|
|
||||||
<div class="frp-section-hd">关键指标</div>
|
|
||||||
<div class="frp-kpi-grid">
|
|
||||||
<div
|
|
||||||
v-for="item in props.detail.kpis"
|
|
||||||
:key="`kpi-${item.key}`"
|
|
||||||
class="frp-kpi-item"
|
|
||||||
>
|
|
||||||
<div class="frp-kpi-label">{{ item.label }}</div>
|
|
||||||
<div
|
|
||||||
class="frp-kpi-val"
|
|
||||||
:class="{ 'is-profit': item.key === 'net_profit' }"
|
|
||||||
>
|
|
||||||
{{ item.valueText }}
|
|
||||||
</div>
|
|
||||||
<div class="frp-kpi-change">
|
|
||||||
<span
|
|
||||||
:class="`frp-kpi-change-${resolveKpiChangeTone(item.key, item.yoyChangeRate)}`"
|
|
||||||
>
|
|
||||||
{{ formatKpiChangeText('同比', item.yoyChangeRate) }}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
:class="`frp-kpi-change-${resolveKpiChangeTone(item.key, item.momChangeRate)}`"
|
|
||||||
>
|
|
||||||
{{ formatKpiChangeText('环比', item.momChangeRate) }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="frp-divider"></div>
|
|
||||||
|
|
||||||
<div class="frp-section">
|
|
||||||
<div class="frp-section-hd">收入明细（按渠道）</div>
|
|
||||||
<div
|
|
||||||
v-for="item in props.detail.incomeBreakdowns"
|
|
||||||
:key="`income-${item.key}`"
|
|
||||||
class="frp-detail-row"
|
|
||||||
>
|
|
||||||
<span class="frp-detail-name">
|
|
||||||
<IconifyIcon
|
|
||||||
:icon="resolveBreakdownMeta('income', item.key).icon"
|
|
||||||
class="frp-breakdown-icon"
|
|
||||||
:class="`is-${resolveBreakdownMeta('income', item.key).tone}`"
|
|
||||||
/>
|
|
||||||
{{ item.label }}
|
|
||||||
</span>
|
|
||||||
<div class="frp-detail-right">
|
|
||||||
<span class="frp-detail-pct">{{
|
|
||||||
formatPercent(item.ratioPercent)
|
|
||||||
}}</span>
|
|
||||||
<span class="frp-detail-amount">{{
|
|
||||||
formatCurrency(item.amount)
|
|
||||||
}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="frp-divider"></div>
|
|
||||||
|
|
||||||
<div class="frp-section">
|
|
||||||
<div class="frp-section-hd">成本明细（按类别）</div>
|
|
||||||
<div
|
|
||||||
v-for="item in props.detail.costBreakdowns"
|
|
||||||
:key="`cost-${item.key}`"
|
|
||||||
class="frp-detail-row"
|
|
||||||
>
|
|
||||||
<span class="frp-detail-name">
|
|
||||||
<IconifyIcon
|
|
||||||
:icon="resolveBreakdownMeta('cost', item.key).icon"
|
|
||||||
class="frp-breakdown-icon"
|
|
||||||
:class="`is-${resolveBreakdownMeta('cost', item.key).tone}`"
|
|
||||||
/>
|
|
||||||
{{ item.label }}
|
|
||||||
</span>
|
|
||||||
<div class="frp-detail-right">
|
|
||||||
<span class="frp-detail-pct">{{
|
|
||||||
formatPercent(item.ratioPercent)
|
|
||||||
}}</span>
|
|
||||||
<span class="frp-detail-amount">{{
|
|
||||||
formatCurrency(item.amount)
|
|
||||||
}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<Empty v-else description="暂无报表详情" />
|
|
||||||
</Spin>
|
|
||||||
|
|
||||||
<template #footer>
|
|
||||||
<div class="frp-drawer-footer">
|
|
||||||
<Button @click="emit('close')">关闭</Button>
|
|
||||||
<Button
|
|
||||||
type="primary"
|
|
||||||
class="frp-drawer-btn"
|
|
||||||
:disabled="!canDownload"
|
|
||||||
:loading="props.isDownloadingPdf"
|
|
||||||
@click="emit('downloadPdf')"
|
|
||||||
>
|
|
||||||
<template #icon>
|
|
||||||
<IconifyIcon icon="lucide:file-text" />
|
|
||||||
</template>
|
|
||||||
下载PDF
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
class="frp-drawer-btn"
|
|
||||||
:disabled="!canDownload"
|
|
||||||
:loading="props.isDownloadingExcel"
|
|
||||||
@click="emit('downloadExcel')"
|
|
||||||
>
|
|
||||||
<template #icon>
|
|
||||||
<IconifyIcon icon="lucide:table" />
|
|
||||||
</template>
|
|
||||||
下载Excel
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Drawer>
|
|
||||||
</template>
|
|
||||||
@@ -1,205 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import type { TablePaginationConfig, TableProps } from 'ant-design-vue';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 文件职责：经营报表列表表格与分页。
|
|
||||||
*/
|
|
||||||
import type { FinanceBusinessReportListItemDto } from '#/api/finance';
|
|
||||||
|
|
||||||
import { h } from 'vue';
|
|
||||||
|
|
||||||
import { Button, Table, Tag } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import {
|
|
||||||
formatAverageOrderValue,
|
|
||||||
formatCurrency,
|
|
||||||
formatOrderCount,
|
|
||||||
formatPercent,
|
|
||||||
resolveReportStatusTagColor,
|
|
||||||
} from '../composables/report-page/helpers';
|
|
||||||
|
|
||||||
interface PaginationState {
|
|
||||||
page: number;
|
|
||||||
pageSize: number;
|
|
||||||
total: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
canExport: boolean;
|
|
||||||
loading: boolean;
|
|
||||||
pagination: PaginationState;
|
|
||||||
rows: FinanceBusinessReportListItemDto[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = defineProps<Props>();
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(event: 'downloadExcel', reportId: string): void;
|
|
||||||
(event: 'downloadPdf', reportId: string): void;
|
|
||||||
(event: 'pageChange', page: number, pageSize: number): void;
|
|
||||||
(event: 'preview', reportId: string): void;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
const columns: TableProps['columns'] = [
|
|
||||||
{
|
|
||||||
title: '日期',
|
|
||||||
dataIndex: 'dateText',
|
|
||||||
width: 160,
|
|
||||||
customRender: ({ text }) => h('span', { class: 'frp-date' }, String(text)),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '营业额',
|
|
||||||
dataIndex: 'revenueAmount',
|
|
||||||
width: 130,
|
|
||||||
align: 'right',
|
|
||||||
customRender: ({ record }) =>
|
|
||||||
h('span', { class: 'frp-amount' }, formatCurrency(record.revenueAmount)),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '订单数',
|
|
||||||
dataIndex: 'orderCount',
|
|
||||||
width: 100,
|
|
||||||
align: 'right',
|
|
||||||
customRender: ({ record }) =>
|
|
||||||
h('span', { class: 'frp-value' }, formatOrderCount(record.orderCount)),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '客单价',
|
|
||||||
dataIndex: 'averageOrderValue',
|
|
||||||
width: 120,
|
|
||||||
align: 'right',
|
|
||||||
customRender: ({ record }) =>
|
|
||||||
h(
|
|
||||||
'span',
|
|
||||||
{ class: 'frp-value' },
|
|
||||||
formatAverageOrderValue(record.averageOrderValue),
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '退款率',
|
|
||||||
dataIndex: 'refundRatePercent',
|
|
||||||
width: 100,
|
|
||||||
align: 'right',
|
|
||||||
customRender: ({ record }) =>
|
|
||||||
h(
|
|
||||||
'span',
|
|
||||||
{ class: 'frp-value' },
|
|
||||||
formatPercent(record.refundRatePercent),
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '成本总额',
|
|
||||||
dataIndex: 'costTotalAmount',
|
|
||||||
width: 130,
|
|
||||||
align: 'right',
|
|
||||||
customRender: ({ record }) =>
|
|
||||||
h('span', { class: 'frp-value' }, formatCurrency(record.costTotalAmount)),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '净利润',
|
|
||||||
dataIndex: 'netProfitAmount',
|
|
||||||
width: 130,
|
|
||||||
align: 'right',
|
|
||||||
customRender: ({ record }) => {
|
|
||||||
const amount = Number(record.netProfitAmount || 0);
|
|
||||||
return h(
|
|
||||||
'span',
|
|
||||||
{
|
|
||||||
class: ['frp-amount', amount >= 0 ? 'is-profit' : 'is-loss'],
|
|
||||||
},
|
|
||||||
formatCurrency(amount),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '利润率',
|
|
||||||
dataIndex: 'profitRatePercent',
|
|
||||||
width: 100,
|
|
||||||
align: 'right',
|
|
||||||
customRender: ({ record }) =>
|
|
||||||
h(
|
|
||||||
'span',
|
|
||||||
{ class: 'frp-value' },
|
|
||||||
formatPercent(record.profitRatePercent),
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '状态',
|
|
||||||
dataIndex: 'statusText',
|
|
||||||
width: 96,
|
|
||||||
customRender: ({ record }) =>
|
|
||||||
h(
|
|
||||||
Tag,
|
|
||||||
{
|
|
||||||
color: resolveReportStatusTagColor(record.status),
|
|
||||||
},
|
|
||||||
() => String(record.statusText || '--'),
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
dataIndex: 'action',
|
|
||||||
width: 210,
|
|
||||||
customRender: ({ record }) => {
|
|
||||||
const reportId = String(record.reportId || '');
|
|
||||||
const canDownload = props.canExport && Boolean(record.canDownload);
|
|
||||||
|
|
||||||
return h('div', { class: 'frp-action-group' }, [
|
|
||||||
h(
|
|
||||||
Button,
|
|
||||||
{
|
|
||||||
type: 'link',
|
|
||||||
class: 'frp-action-link',
|
|
||||||
onClick: () => emit('preview', reportId),
|
|
||||||
},
|
|
||||||
() => '预览',
|
|
||||||
),
|
|
||||||
h(
|
|
||||||
Button,
|
|
||||||
{
|
|
||||||
type: 'link',
|
|
||||||
class: 'frp-action-link',
|
|
||||||
disabled: !canDownload,
|
|
||||||
onClick: () => emit('downloadPdf', reportId),
|
|
||||||
},
|
|
||||||
() => '下载PDF',
|
|
||||||
),
|
|
||||||
h(
|
|
||||||
Button,
|
|
||||||
{
|
|
||||||
type: 'link',
|
|
||||||
class: 'frp-action-link',
|
|
||||||
disabled: !canDownload,
|
|
||||||
onClick: () => emit('downloadExcel', reportId),
|
|
||||||
},
|
|
||||||
() => '下载Excel',
|
|
||||||
),
|
|
||||||
]);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
function handleTableChange(next: TablePaginationConfig) {
|
|
||||||
emit('pageChange', Number(next.current || 1), Number(next.pageSize || 20));
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="frp-table-card">
|
|
||||||
<Table
|
|
||||||
row-key="reportId"
|
|
||||||
:columns="columns"
|
|
||||||
:data-source="props.rows"
|
|
||||||
:loading="props.loading"
|
|
||||||
:pagination="{
|
|
||||||
current: props.pagination.page,
|
|
||||||
pageSize: props.pagination.pageSize,
|
|
||||||
total: props.pagination.total,
|
|
||||||
showSizeChanger: true,
|
|
||||||
pageSizeOptions: ['20', '50', '100'],
|
|
||||||
showTotal: (total: number) => `共 ${total} 条`,
|
|
||||||
}"
|
|
||||||
@change="handleTableChange"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,80 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import type { OptionItem } from '../types';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 文件职责：经营报表工具栏（周期切换、门店选择、批量导出）。
|
|
||||||
*/
|
|
||||||
import type { FinanceBusinessReportPeriodType } from '#/api/finance';
|
|
||||||
|
|
||||||
import { IconifyIcon } from '@vben/icons';
|
|
||||||
|
|
||||||
import { Button, Segmented, Select } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import { REPORT_PERIOD_OPTIONS } from '../composables/report-page/constants';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
canExport: boolean;
|
|
||||||
isBatchExporting: boolean;
|
|
||||||
isStoreLoading: boolean;
|
|
||||||
periodType: FinanceBusinessReportPeriodType;
|
|
||||||
selectedStoreId: string;
|
|
||||||
storeOptions: OptionItem[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = defineProps<Props>();
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
(event: 'batchExport'): void;
|
|
||||||
(event: 'update:periodType', value: FinanceBusinessReportPeriodType): void;
|
|
||||||
(event: 'update:selectedStoreId', value: string): void;
|
|
||||||
}>();
|
|
||||||
|
|
||||||
function handleStoreChange(value: unknown) {
|
|
||||||
if (typeof value === 'number' || typeof value === 'string') {
|
|
||||||
emit('update:selectedStoreId', String(value));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
emit('update:selectedStoreId', '');
|
|
||||||
}
|
|
||||||
|
|
||||||
function handlePeriodChange(value: unknown) {
|
|
||||||
const period = String(value || 'daily') as FinanceBusinessReportPeriodType;
|
|
||||||
emit('update:periodType', period);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="frp-toolbar">
|
|
||||||
<Segmented
|
|
||||||
class="frp-period-segment"
|
|
||||||
:value="props.periodType"
|
|
||||||
:options="REPORT_PERIOD_OPTIONS"
|
|
||||||
@update:value="(value) => handlePeriodChange(value)"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Select
|
|
||||||
class="frp-store-select"
|
|
||||||
:value="props.selectedStoreId"
|
|
||||||
placeholder="选择门店"
|
|
||||||
:loading="props.isStoreLoading"
|
|
||||||
:options="props.storeOptions"
|
|
||||||
:disabled="props.isStoreLoading || props.storeOptions.length === 0"
|
|
||||||
@update:value="(value) => handleStoreChange(value)"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="frp-toolbar-right">
|
|
||||||
<Button
|
|
||||||
class="frp-batch-export-btn"
|
|
||||||
:disabled="!props.canExport || !props.selectedStoreId"
|
|
||||||
:loading="props.isBatchExporting"
|
|
||||||
@click="emit('batchExport')"
|
|
||||||
>
|
|
||||||
<template #icon>
|
|
||||||
<IconifyIcon icon="lucide:download" />
|
|
||||||
</template>
|
|
||||||
批量导出
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
import type {
|
|
||||||
FinanceBusinessReportPaginationState,
|
|
||||||
FinanceBusinessReportPeriodOption,
|
|
||||||
} from '../../types';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 文件职责：经营报表页面常量与默认状态定义。
|
|
||||||
*/
|
|
||||||
|
|
||||||
/** 经营报表查看权限。 */
|
|
||||||
export const FINANCE_REPORT_VIEW_PERMISSION = 'tenant:statistics:report:view';
|
|
||||||
|
|
||||||
/** 经营报表导出权限。 */
|
|
||||||
export const FINANCE_REPORT_EXPORT_PERMISSION =
|
|
||||||
'tenant:statistics:report:export';
|
|
||||||
|
|
||||||
/** 报表周期选项。 */
|
|
||||||
export const REPORT_PERIOD_OPTIONS: FinanceBusinessReportPeriodOption[] = [
|
|
||||||
{ label: '日报', value: 'daily' },
|
|
||||||
{ label: '周报', value: 'weekly' },
|
|
||||||
{ label: '月报', value: 'monthly' },
|
|
||||||
];
|
|
||||||
|
|
||||||
/** 默认报表周期。 */
|
|
||||||
export const DEFAULT_PERIOD_TYPE = 'daily' as const;
|
|
||||||
|
|
||||||
/** 默认分页状态。 */
|
|
||||||
export const DEFAULT_PAGINATION: FinanceBusinessReportPaginationState = {
|
|
||||||
page: 1,
|
|
||||||
pageSize: 20,
|
|
||||||
total: 0,
|
|
||||||
};
|
|
||||||
@@ -1,84 +0,0 @@
|
|||||||
import type { FinanceBusinessReportPaginationState } from '../../types';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 文件职责：经营报表页面数据加载动作。
|
|
||||||
*/
|
|
||||||
import type { FinanceBusinessReportListItemDto } from '#/api/finance';
|
|
||||||
import type { StoreListItemDto } from '#/api/store';
|
|
||||||
|
|
||||||
import { getFinanceBusinessReportListApi } from '#/api/finance';
|
|
||||||
import { getStoreListApi } from '#/api/store';
|
|
||||||
|
|
||||||
import { buildReportListQueryPayload } from './helpers';
|
|
||||||
|
|
||||||
interface DataActionOptions {
|
|
||||||
isListLoading: { value: boolean };
|
|
||||||
isStoreLoading: { value: boolean };
|
|
||||||
pagination: FinanceBusinessReportPaginationState;
|
|
||||||
periodType: { value: 'daily' | 'monthly' | 'weekly' };
|
|
||||||
rows: { value: FinanceBusinessReportListItemDto[] };
|
|
||||||
selectedStoreId: { value: string };
|
|
||||||
stores: { value: StoreListItemDto[] };
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 创建数据相关动作。 */
|
|
||||||
export function createDataActions(options: DataActionOptions) {
|
|
||||||
function clearPageData() {
|
|
||||||
options.rows.value = [];
|
|
||||||
options.pagination.total = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadStores() {
|
|
||||||
options.isStoreLoading.value = true;
|
|
||||||
try {
|
|
||||||
const result = await getStoreListApi({ page: 1, pageSize: 200 });
|
|
||||||
options.stores.value = result.items;
|
|
||||||
|
|
||||||
if (result.items.length === 0) {
|
|
||||||
options.selectedStoreId.value = '';
|
|
||||||
clearPageData();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const matched = result.items.some(
|
|
||||||
(item) => item.id === options.selectedStoreId.value,
|
|
||||||
);
|
|
||||||
if (!matched) {
|
|
||||||
options.selectedStoreId.value = result.items[0]?.id ?? '';
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
options.isStoreLoading.value = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadReportList() {
|
|
||||||
if (!options.selectedStoreId.value) {
|
|
||||||
clearPageData();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
options.isListLoading.value = true;
|
|
||||||
try {
|
|
||||||
const payload = buildReportListQueryPayload(
|
|
||||||
options.selectedStoreId.value,
|
|
||||||
options.periodType.value,
|
|
||||||
options.pagination.page,
|
|
||||||
options.pagination.pageSize,
|
|
||||||
);
|
|
||||||
const result = await getFinanceBusinessReportListApi(payload);
|
|
||||||
|
|
||||||
options.rows.value = result.items;
|
|
||||||
options.pagination.total = result.total;
|
|
||||||
options.pagination.page = result.page;
|
|
||||||
options.pagination.pageSize = result.pageSize;
|
|
||||||
} finally {
|
|
||||||
options.isListLoading.value = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
clearPageData,
|
|
||||||
loadReportList,
|
|
||||||
loadStores,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,136 +0,0 @@
|
|||||||
/**
|
|
||||||
* 文件职责：经营报表预览抽屉与单条导出动作。
|
|
||||||
*/
|
|
||||||
import type { FinanceBusinessReportDetailDto } from '#/api/finance';
|
|
||||||
|
|
||||||
import { message } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import {
|
|
||||||
exportFinanceBusinessReportExcelApi,
|
|
||||||
exportFinanceBusinessReportPdfApi,
|
|
||||||
getFinanceBusinessReportDetailApi,
|
|
||||||
} from '#/api/finance';
|
|
||||||
|
|
||||||
import { buildReportDetailQueryPayload, downloadBase64File } from './helpers';
|
|
||||||
|
|
||||||
interface DetailActionOptions {
|
|
||||||
canExport: { value: boolean };
|
|
||||||
currentPreviewReportId: { value: string };
|
|
||||||
isDownloadingExcel: { value: boolean };
|
|
||||||
isDownloadingPdf: { value: boolean };
|
|
||||||
isPreviewDrawerOpen: { value: boolean };
|
|
||||||
isPreviewLoading: { value: boolean };
|
|
||||||
previewDetail: { value: FinanceBusinessReportDetailDto | null };
|
|
||||||
selectedStoreId: { value: string };
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 创建预览与单条导出动作。 */
|
|
||||||
export function createDetailActions(options: DetailActionOptions) {
|
|
||||||
function setPreviewDrawerOpen(value: boolean) {
|
|
||||||
options.isPreviewDrawerOpen.value = value;
|
|
||||||
if (!value) {
|
|
||||||
options.previewDetail.value = null;
|
|
||||||
options.currentPreviewReportId.value = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function openPreview(reportId: string) {
|
|
||||||
if (!options.selectedStoreId.value || !reportId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
options.currentPreviewReportId.value = reportId;
|
|
||||||
options.isPreviewDrawerOpen.value = true;
|
|
||||||
options.previewDetail.value = null;
|
|
||||||
options.isPreviewLoading.value = true;
|
|
||||||
try {
|
|
||||||
const payload = buildReportDetailQueryPayload(
|
|
||||||
options.selectedStoreId.value,
|
|
||||||
reportId,
|
|
||||||
);
|
|
||||||
options.previewDetail.value =
|
|
||||||
await getFinanceBusinessReportDetailApi(payload);
|
|
||||||
options.currentPreviewReportId.value =
|
|
||||||
options.previewDetail.value.reportId || reportId;
|
|
||||||
} finally {
|
|
||||||
options.isPreviewLoading.value = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function resolveTargetReportId(reportId?: string) {
|
|
||||||
const explicit = String(reportId ?? '').trim();
|
|
||||||
if (explicit) {
|
|
||||||
return explicit;
|
|
||||||
}
|
|
||||||
|
|
||||||
const current = String(options.currentPreviewReportId.value || '').trim();
|
|
||||||
if (current) {
|
|
||||||
return current;
|
|
||||||
}
|
|
||||||
|
|
||||||
return String(options.previewDetail.value?.reportId ?? '').trim();
|
|
||||||
}
|
|
||||||
|
|
||||||
async function downloadPdf(reportId?: string) {
|
|
||||||
if (!options.canExport.value || !options.selectedStoreId.value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const targetReportId = resolveTargetReportId(reportId);
|
|
||||||
if (!targetReportId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
options.isDownloadingPdf.value = true;
|
|
||||||
try {
|
|
||||||
const payload = buildReportDetailQueryPayload(
|
|
||||||
options.selectedStoreId.value,
|
|
||||||
targetReportId,
|
|
||||||
);
|
|
||||||
const result = await exportFinanceBusinessReportPdfApi(payload);
|
|
||||||
downloadBase64File(
|
|
||||||
result.fileName,
|
|
||||||
result.fileContentBase64,
|
|
||||||
'application/pdf',
|
|
||||||
);
|
|
||||||
message.success('PDF 下载成功');
|
|
||||||
} finally {
|
|
||||||
options.isDownloadingPdf.value = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function downloadExcel(reportId?: string) {
|
|
||||||
if (!options.canExport.value || !options.selectedStoreId.value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const targetReportId = resolveTargetReportId(reportId);
|
|
||||||
if (!targetReportId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
options.isDownloadingExcel.value = true;
|
|
||||||
try {
|
|
||||||
const payload = buildReportDetailQueryPayload(
|
|
||||||
options.selectedStoreId.value,
|
|
||||||
targetReportId,
|
|
||||||
);
|
|
||||||
const result = await exportFinanceBusinessReportExcelApi(payload);
|
|
||||||
downloadBase64File(
|
|
||||||
result.fileName,
|
|
||||||
result.fileContentBase64,
|
|
||||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
|
||||||
);
|
|
||||||
message.success('Excel 下载成功');
|
|
||||||
} finally {
|
|
||||||
options.isDownloadingExcel.value = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
downloadExcel,
|
|
||||||
downloadPdf,
|
|
||||||
openPreview,
|
|
||||||
setPreviewDrawerOpen,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,71 +0,0 @@
|
|||||||
import type { FinanceBusinessReportPaginationState } from '../../types';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 文件职责：经营报表批量导出弹窗与导出动作。
|
|
||||||
*/
|
|
||||||
import type { FinanceBusinessReportPeriodType } from '#/api/finance';
|
|
||||||
|
|
||||||
import { message } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import { exportFinanceBusinessReportBatchApi } from '#/api/finance';
|
|
||||||
|
|
||||||
import {
|
|
||||||
buildReportBatchExportQueryPayload,
|
|
||||||
downloadBase64File,
|
|
||||||
} from './helpers';
|
|
||||||
|
|
||||||
interface ExportActionOptions {
|
|
||||||
canExport: { value: boolean };
|
|
||||||
isBatchExportModalOpen: { value: boolean };
|
|
||||||
isBatchExporting: { value: boolean };
|
|
||||||
pagination: FinanceBusinessReportPaginationState;
|
|
||||||
periodType: { value: FinanceBusinessReportPeriodType };
|
|
||||||
selectedStoreId: { value: string };
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 创建批量导出动作。 */
|
|
||||||
export function createExportActions(options: ExportActionOptions) {
|
|
||||||
function setBatchExportModalOpen(value: boolean) {
|
|
||||||
options.isBatchExportModalOpen.value = value;
|
|
||||||
}
|
|
||||||
|
|
||||||
function openBatchExportModal() {
|
|
||||||
if (!options.canExport.value || !options.selectedStoreId.value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
options.isBatchExportModalOpen.value = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleConfirmBatchExport() {
|
|
||||||
if (!options.canExport.value || !options.selectedStoreId.value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
options.isBatchExporting.value = true;
|
|
||||||
try {
|
|
||||||
const payload = buildReportBatchExportQueryPayload(
|
|
||||||
options.selectedStoreId.value,
|
|
||||||
options.periodType.value,
|
|
||||||
options.pagination.page,
|
|
||||||
options.pagination.pageSize,
|
|
||||||
);
|
|
||||||
const result = await exportFinanceBusinessReportBatchApi(payload);
|
|
||||||
downloadBase64File(
|
|
||||||
result.fileName,
|
|
||||||
result.fileContentBase64,
|
|
||||||
'application/zip',
|
|
||||||
);
|
|
||||||
message.success(`批量导出成功，共 ${result.totalCount} 份报表`);
|
|
||||||
setBatchExportModalOpen(false);
|
|
||||||
} finally {
|
|
||||||
options.isBatchExporting.value = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
handleConfirmBatchExport,
|
|
||||||
openBatchExportModal,
|
|
||||||
setBatchExportModalOpen,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
import type { FinanceBusinessReportPaginationState } from '../../types';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 文件职责：经营报表页面筛选与分页行为。
|
|
||||||
*/
|
|
||||||
import type { FinanceBusinessReportPeriodType } from '#/api/finance';
|
|
||||||
|
|
||||||
interface FilterActionOptions {
|
|
||||||
loadReportList: () => Promise<void>;
|
|
||||||
pagination: FinanceBusinessReportPaginationState;
|
|
||||||
periodType: { value: FinanceBusinessReportPeriodType };
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 创建筛选与分页行为。 */
|
|
||||||
export function createFilterActions(options: FilterActionOptions) {
|
|
||||||
function setPeriodType(value: FinanceBusinessReportPeriodType) {
|
|
||||||
options.periodType.value = value || 'daily';
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handlePageChange(page: number, pageSize: number) {
|
|
||||||
options.pagination.page = page;
|
|
||||||
options.pagination.pageSize = pageSize;
|
|
||||||
await options.loadReportList();
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
handlePageChange,
|
|
||||||
setPeriodType,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,130 +0,0 @@
|
|||||||
import type {
|
|
||||||
FinanceBusinessReportBatchExportQuery,
|
|
||||||
FinanceBusinessReportDetailQuery,
|
|
||||||
FinanceBusinessReportPeriodType,
|
|
||||||
FinanceBusinessReportStatus,
|
|
||||||
} from '#/api/finance';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 文件职责：经营报表页面纯函数与数据转换工具。
|
|
||||||
*/
|
|
||||||
|
|
||||||
/** 构建经营报表列表查询请求。 */
|
|
||||||
export function buildReportListQueryPayload(
|
|
||||||
storeId: string,
|
|
||||||
periodType: FinanceBusinessReportPeriodType,
|
|
||||||
page: number,
|
|
||||||
pageSize: number,
|
|
||||||
) {
|
|
||||||
return {
|
|
||||||
storeId,
|
|
||||||
periodType,
|
|
||||||
page,
|
|
||||||
pageSize,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 构建经营报表详情查询请求。 */
|
|
||||||
export function buildReportDetailQueryPayload(
|
|
||||||
storeId: string,
|
|
||||||
reportId: string,
|
|
||||||
): FinanceBusinessReportDetailQuery {
|
|
||||||
return {
|
|
||||||
storeId,
|
|
||||||
reportId,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 构建经营报表批量导出查询请求。 */
|
|
||||||
export function buildReportBatchExportQueryPayload(
|
|
||||||
storeId: string,
|
|
||||||
periodType: FinanceBusinessReportPeriodType,
|
|
||||||
page: number,
|
|
||||||
pageSize: number,
|
|
||||||
): FinanceBusinessReportBatchExportQuery {
|
|
||||||
return {
|
|
||||||
storeId,
|
|
||||||
periodType,
|
|
||||||
page,
|
|
||||||
pageSize,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 报表周期文案。 */
|
|
||||||
export function resolvePeriodTypeLabel(value: FinanceBusinessReportPeriodType) {
|
|
||||||
if (value === 'weekly') return '周报';
|
|
||||||
if (value === 'monthly') return '月报';
|
|
||||||
return '日报';
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 报表状态标签色。 */
|
|
||||||
export function resolveReportStatusTagColor(
|
|
||||||
status: FinanceBusinessReportStatus,
|
|
||||||
) {
|
|
||||||
if (status === 'succeeded') return 'green';
|
|
||||||
if (status === 'failed') return 'red';
|
|
||||||
if (status === 'running' || status === 'queued') return 'blue';
|
|
||||||
return 'default';
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 货币格式化（人民币）。 */
|
|
||||||
export function formatCurrency(value: number, fractionDigits = 0) {
|
|
||||||
const digits = Math.max(0, Math.min(2, fractionDigits));
|
|
||||||
return new Intl.NumberFormat('zh-CN', {
|
|
||||||
style: 'currency',
|
|
||||||
currency: 'CNY',
|
|
||||||
minimumFractionDigits: digits,
|
|
||||||
maximumFractionDigits: digits,
|
|
||||||
}).format(Number.isFinite(value) ? value : 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 订单数格式化。 */
|
|
||||||
export function formatOrderCount(value: number) {
|
|
||||||
return `${Math.max(0, Math.round(value || 0))}单`;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 客单价格式化。 */
|
|
||||||
export function formatAverageOrderValue(value: number) {
|
|
||||||
return formatCurrency(value, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 百分比格式化。 */
|
|
||||||
export function formatPercent(value: number, digits = 1) {
|
|
||||||
const safeDigits = Math.max(0, Math.min(2, digits));
|
|
||||||
const normalized = Number.isFinite(value) ? value : 0;
|
|
||||||
return `${normalized.toFixed(safeDigits)}%`;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 数值符号格式化。 */
|
|
||||||
export function formatSignedRate(value: number, digits = 1) {
|
|
||||||
const normalized = Number.isFinite(value) ? value : 0;
|
|
||||||
if (normalized === 0) {
|
|
||||||
return `${normalized.toFixed(digits)}%`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return `${normalized > 0 ? '↑' : '↓'}${Math.abs(normalized).toFixed(digits)}%`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function decodeBase64ToBlob(base64: string, mimeType: string) {
|
|
||||||
const binary = atob(base64);
|
|
||||||
const bytes = new Uint8Array(binary.length);
|
|
||||||
for (let index = 0; index < binary.length; index += 1) {
|
|
||||||
bytes[index] = binary.codePointAt(index) ?? 0;
|
|
||||||
}
|
|
||||||
return new Blob([bytes], { type: mimeType });
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 下载 Base64 编码文件。 */
|
|
||||||
export function downloadBase64File(
|
|
||||||
fileName: string,
|
|
||||||
fileContentBase64: string,
|
|
||||||
mimeType = 'application/octet-stream',
|
|
||||||
) {
|
|
||||||
const blob = decodeBase64ToBlob(fileContentBase64, mimeType);
|
|
||||||
const url = URL.createObjectURL(blob);
|
|
||||||
const anchor = document.createElement('a');
|
|
||||||
anchor.href = url;
|
|
||||||
anchor.download = fileName;
|
|
||||||
anchor.click();
|
|
||||||
URL.revokeObjectURL(url);
|
|
||||||
}
|
|
||||||
@@ -1,219 +0,0 @@
|
|||||||
/**
|
|
||||||
* 文件职责：经营报表页面状态与动作编排。
|
|
||||||
*/
|
|
||||||
import type {
|
|
||||||
FinanceBusinessReportDetailDto,
|
|
||||||
FinanceBusinessReportListItemDto,
|
|
||||||
FinanceBusinessReportPeriodType,
|
|
||||||
} from '#/api/finance';
|
|
||||||
import type { StoreListItemDto } from '#/api/store';
|
|
||||||
|
|
||||||
import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue';
|
|
||||||
|
|
||||||
import { useAccessStore } from '@vben/stores';
|
|
||||||
|
|
||||||
import {
|
|
||||||
DEFAULT_PAGINATION,
|
|
||||||
DEFAULT_PERIOD_TYPE,
|
|
||||||
FINANCE_REPORT_EXPORT_PERMISSION,
|
|
||||||
FINANCE_REPORT_VIEW_PERMISSION,
|
|
||||||
} from './report-page/constants';
|
|
||||||
import { createDataActions } from './report-page/data-actions';
|
|
||||||
import { createDetailActions } from './report-page/detail-actions';
|
|
||||||
import { createExportActions } from './report-page/export-actions';
|
|
||||||
import { createFilterActions } from './report-page/filter-actions';
|
|
||||||
|
|
||||||
/** 创建经营报表页面组合状态。 */
|
|
||||||
export function useFinanceReportPage() {
|
|
||||||
const accessStore = useAccessStore();
|
|
||||||
|
|
||||||
const stores = ref<StoreListItemDto[]>([]);
|
|
||||||
const selectedStoreId = ref('');
|
|
||||||
const isStoreLoading = ref(false);
|
|
||||||
|
|
||||||
const periodType = ref<FinanceBusinessReportPeriodType>(DEFAULT_PERIOD_TYPE);
|
|
||||||
const rows = ref<FinanceBusinessReportListItemDto[]>([]);
|
|
||||||
const pagination = reactive({ ...DEFAULT_PAGINATION });
|
|
||||||
const isListLoading = ref(false);
|
|
||||||
|
|
||||||
const previewDetail = ref<FinanceBusinessReportDetailDto | null>(null);
|
|
||||||
const currentPreviewReportId = ref('');
|
|
||||||
const isPreviewDrawerOpen = ref(false);
|
|
||||||
const isPreviewLoading = ref(false);
|
|
||||||
const isDownloadingPdf = ref(false);
|
|
||||||
const isDownloadingExcel = ref(false);
|
|
||||||
|
|
||||||
const isBatchExportModalOpen = ref(false);
|
|
||||||
const isBatchExporting = ref(false);
|
|
||||||
|
|
||||||
const storeOptions = computed(() =>
|
|
||||||
stores.value.map((item) => ({
|
|
||||||
label: item.name,
|
|
||||||
value: item.id,
|
|
||||||
})),
|
|
||||||
);
|
|
||||||
|
|
||||||
const selectedStoreName = computed(
|
|
||||||
() =>
|
|
||||||
storeOptions.value.find((item) => item.value === selectedStoreId.value)
|
|
||||||
?.label ?? '--',
|
|
||||||
);
|
|
||||||
|
|
||||||
const accessCodeSet = computed(
|
|
||||||
() => new Set((accessStore.accessCodes ?? []).map(String)),
|
|
||||||
);
|
|
||||||
|
|
||||||
const canView = computed(() =>
|
|
||||||
accessCodeSet.value.has(FINANCE_REPORT_VIEW_PERMISSION),
|
|
||||||
);
|
|
||||||
|
|
||||||
const canExport = computed(() =>
|
|
||||||
accessCodeSet.value.has(FINANCE_REPORT_EXPORT_PERMISSION),
|
|
||||||
);
|
|
||||||
|
|
||||||
const { clearPageData, loadReportList, loadStores } = createDataActions({
|
|
||||||
stores,
|
|
||||||
selectedStoreId,
|
|
||||||
periodType,
|
|
||||||
rows,
|
|
||||||
pagination,
|
|
||||||
isStoreLoading,
|
|
||||||
isListLoading,
|
|
||||||
});
|
|
||||||
|
|
||||||
const { handlePageChange, setPeriodType } = createFilterActions({
|
|
||||||
periodType,
|
|
||||||
pagination,
|
|
||||||
loadReportList,
|
|
||||||
});
|
|
||||||
|
|
||||||
const { downloadExcel, downloadPdf, openPreview, setPreviewDrawerOpen } =
|
|
||||||
createDetailActions({
|
|
||||||
canExport,
|
|
||||||
selectedStoreId,
|
|
||||||
previewDetail,
|
|
||||||
currentPreviewReportId,
|
|
||||||
isPreviewDrawerOpen,
|
|
||||||
isPreviewLoading,
|
|
||||||
isDownloadingPdf,
|
|
||||||
isDownloadingExcel,
|
|
||||||
});
|
|
||||||
|
|
||||||
const {
|
|
||||||
handleConfirmBatchExport,
|
|
||||||
openBatchExportModal,
|
|
||||||
setBatchExportModalOpen,
|
|
||||||
} = createExportActions({
|
|
||||||
canExport,
|
|
||||||
selectedStoreId,
|
|
||||||
periodType,
|
|
||||||
pagination,
|
|
||||||
isBatchExportModalOpen,
|
|
||||||
isBatchExporting,
|
|
||||||
});
|
|
||||||
|
|
||||||
function setSelectedStoreId(value: string) {
|
|
||||||
selectedStoreId.value = value;
|
|
||||||
}
|
|
||||||
|
|
||||||
function clearByPermission() {
|
|
||||||
stores.value = [];
|
|
||||||
selectedStoreId.value = '';
|
|
||||||
clearPageData();
|
|
||||||
setPreviewDrawerOpen(false);
|
|
||||||
setBatchExportModalOpen(false);
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(selectedStoreId, async (storeId) => {
|
|
||||||
setPreviewDrawerOpen(false);
|
|
||||||
setBatchExportModalOpen(false);
|
|
||||||
|
|
||||||
if (!storeId) {
|
|
||||||
clearPageData();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
pagination.page = 1;
|
|
||||||
await loadReportList();
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(periodType, async (value, oldValue) => {
|
|
||||||
if (value === oldValue) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setPreviewDrawerOpen(false);
|
|
||||||
setBatchExportModalOpen(false);
|
|
||||||
|
|
||||||
if (!selectedStoreId.value) {
|
|
||||||
clearPageData();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
pagination.page = 1;
|
|
||||||
await loadReportList();
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(canView, async (value, oldValue) => {
|
|
||||||
if (value === oldValue) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!value) {
|
|
||||||
clearByPermission();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
await loadStores();
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
if (!canView.value) {
|
|
||||||
clearByPermission();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
await loadStores();
|
|
||||||
});
|
|
||||||
|
|
||||||
onActivated(() => {
|
|
||||||
if (!canView.value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (stores.value.length === 0 || !selectedStoreId.value) {
|
|
||||||
void loadStores();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
canExport,
|
|
||||||
canView,
|
|
||||||
currentPreviewReportId,
|
|
||||||
downloadPreviewExcel: downloadExcel,
|
|
||||||
downloadPreviewPdf: downloadPdf,
|
|
||||||
handleConfirmBatchExport,
|
|
||||||
handlePageChange,
|
|
||||||
isBatchExportModalOpen,
|
|
||||||
isBatchExporting,
|
|
||||||
isDownloadingExcel,
|
|
||||||
isDownloadingPdf,
|
|
||||||
isListLoading,
|
|
||||||
isPreviewDrawerOpen,
|
|
||||||
isPreviewLoading,
|
|
||||||
isStoreLoading,
|
|
||||||
openBatchExportModal,
|
|
||||||
openPreview,
|
|
||||||
pagination,
|
|
||||||
periodType,
|
|
||||||
previewDetail,
|
|
||||||
rows,
|
|
||||||
selectedStoreId,
|
|
||||||
selectedStoreName,
|
|
||||||
setBatchExportModalOpen,
|
|
||||||
setPeriodType,
|
|
||||||
setPreviewDrawerOpen,
|
|
||||||
setSelectedStoreId,
|
|
||||||
storeOptions,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,104 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
/**
|
|
||||||
* 文件职责：财务中心经营报表页面入口编排。
|
|
||||||
*/
|
|
||||||
import { Page } from '@vben/common-ui';
|
|
||||||
|
|
||||||
import { Empty } from 'ant-design-vue';
|
|
||||||
|
|
||||||
import ReportBatchExportModal from './components/ReportBatchExportModal.vue';
|
|
||||||
import ReportPreviewDrawer from './components/ReportPreviewDrawer.vue';
|
|
||||||
import ReportTableCard from './components/ReportTableCard.vue';
|
|
||||||
import ReportToolbar from './components/ReportToolbar.vue';
|
|
||||||
import { useFinanceReportPage } from './composables/useFinanceReportPage';
|
|
||||||
|
|
||||||
const {
|
|
||||||
canExport,
|
|
||||||
canView,
|
|
||||||
downloadPreviewExcel,
|
|
||||||
downloadPreviewPdf,
|
|
||||||
handleConfirmBatchExport,
|
|
||||||
handlePageChange,
|
|
||||||
isBatchExportModalOpen,
|
|
||||||
isBatchExporting,
|
|
||||||
isDownloadingExcel,
|
|
||||||
isDownloadingPdf,
|
|
||||||
isListLoading,
|
|
||||||
isPreviewDrawerOpen,
|
|
||||||
isPreviewLoading,
|
|
||||||
isStoreLoading,
|
|
||||||
openBatchExportModal,
|
|
||||||
openPreview,
|
|
||||||
pagination,
|
|
||||||
periodType,
|
|
||||||
previewDetail,
|
|
||||||
rows,
|
|
||||||
selectedStoreId,
|
|
||||||
selectedStoreName,
|
|
||||||
setBatchExportModalOpen,
|
|
||||||
setPeriodType,
|
|
||||||
setPreviewDrawerOpen,
|
|
||||||
setSelectedStoreId,
|
|
||||||
storeOptions,
|
|
||||||
} = useFinanceReportPage();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Page title="经营报表" content-class="page-finance-report">
|
|
||||||
<div class="frp-page">
|
|
||||||
<template v-if="canView">
|
|
||||||
<ReportToolbar
|
|
||||||
:period-type="periodType"
|
|
||||||
:selected-store-id="selectedStoreId"
|
|
||||||
:store-options="storeOptions"
|
|
||||||
:is-store-loading="isStoreLoading"
|
|
||||||
:can-export="canExport"
|
|
||||||
:is-batch-exporting="isBatchExporting"
|
|
||||||
@update:period-type="setPeriodType"
|
|
||||||
@update:selected-store-id="setSelectedStoreId"
|
|
||||||
@batch-export="openBatchExportModal"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ReportTableCard
|
|
||||||
:rows="rows"
|
|
||||||
:loading="isListLoading"
|
|
||||||
:pagination="pagination"
|
|
||||||
:can-export="canExport"
|
|
||||||
@page-change="handlePageChange"
|
|
||||||
@preview="openPreview"
|
|
||||||
@download-pdf="downloadPreviewPdf"
|
|
||||||
@download-excel="downloadPreviewExcel"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<Empty v-else description="暂无经营报表页面访问权限" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ReportPreviewDrawer
|
|
||||||
:open="isPreviewDrawerOpen"
|
|
||||||
:loading="isPreviewLoading"
|
|
||||||
:detail="previewDetail"
|
|
||||||
:can-export="canExport"
|
|
||||||
:is-downloading-pdf="isDownloadingPdf"
|
|
||||||
:is-downloading-excel="isDownloadingExcel"
|
|
||||||
@close="setPreviewDrawerOpen(false)"
|
|
||||||
@download-pdf="downloadPreviewPdf"
|
|
||||||
@download-excel="downloadPreviewExcel"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ReportBatchExportModal
|
|
||||||
:open="isBatchExportModalOpen"
|
|
||||||
:submitting="isBatchExporting"
|
|
||||||
:selected-store-name="selectedStoreName"
|
|
||||||
:period-type="periodType"
|
|
||||||
:pagination="pagination"
|
|
||||||
:current-page-count="rows.length"
|
|
||||||
@close="setBatchExportModalOpen(false)"
|
|
||||||
@confirm="handleConfirmBatchExport"
|
|
||||||
/>
|
|
||||||
</Page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
@import './styles/index.less';
|
|
||||||
</style>
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
/**
|
|
||||||
* 文件职责：经营报表页面基础容器样式。
|
|
||||||
*/
|
|
||||||
.page-finance-report {
|
|
||||||
.ant-card {
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-page {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
@@ -1,162 +0,0 @@
|
|||||||
/**
|
|
||||||
* 文件职责：经营报表预览抽屉样式。
|
|
||||||
*/
|
|
||||||
.page-finance-report {
|
|
||||||
.ant-drawer {
|
|
||||||
.ant-drawer-header {
|
|
||||||
padding: 14px 18px;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-drawer-body {
|
|
||||||
padding: 16px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-drawer-footer {
|
|
||||||
padding: 12px 20px;
|
|
||||||
border-top: 1px solid #f0f0f0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-section {
|
|
||||||
margin-bottom: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-section-hd {
|
|
||||||
padding-left: 10px;
|
|
||||||
margin-bottom: 14px;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: rgb(0 0 0 / 88%);
|
|
||||||
border-left: 3px solid #1677ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-kpi-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-kpi-item {
|
|
||||||
padding: 14px 16px;
|
|
||||||
background: #f8f9fb;
|
|
||||||
border: 1px solid #f0f0f0;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-kpi-label {
|
|
||||||
margin-bottom: 6px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgb(0 0 0 / 45%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-kpi-val {
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1.3;
|
|
||||||
color: rgb(0 0 0 / 88%);
|
|
||||||
|
|
||||||
&.is-profit {
|
|
||||||
color: #52c41a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-kpi-change {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-kpi-change-positive {
|
|
||||||
color: #52c41a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-kpi-change-negative {
|
|
||||||
color: #ff4d4f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-kpi-change-neutral {
|
|
||||||
color: rgb(0 0 0 / 45%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-divider {
|
|
||||||
height: 1px;
|
|
||||||
margin: 20px 0;
|
|
||||||
background: linear-gradient(90deg, #f0f0f0, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-detail-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 10px 0;
|
|
||||||
font-size: 13px;
|
|
||||||
border-bottom: 1px solid #f5f5f5;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-detail-name {
|
|
||||||
display: inline-flex;
|
|
||||||
gap: 6px;
|
|
||||||
align-items: center;
|
|
||||||
color: rgb(0 0 0 / 88%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-breakdown-icon {
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
|
|
||||||
&.is-primary {
|
|
||||||
color: #1677ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-success {
|
|
||||||
color: #52c41a;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-warning {
|
|
||||||
color: #faad14;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-muted {
|
|
||||||
color: rgb(0 0 0 / 45%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-detail-right {
|
|
||||||
display: flex;
|
|
||||||
gap: 16px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-detail-amount {
|
|
||||||
min-width: 80px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: rgb(0 0 0 / 88%);
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-detail-pct {
|
|
||||||
min-width: 50px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: rgb(0 0 0 / 45%);
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-drawer-footer {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-drawer-btn {
|
|
||||||
display: inline-flex;
|
|
||||||
gap: 4px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
/**
|
|
||||||
* 文件职责：经营报表页面样式聚合入口。
|
|
||||||
*/
|
|
||||||
@import './base.less';
|
|
||||||
@import './layout.less';
|
|
||||||
@import './table.less';
|
|
||||||
@import './drawer.less';
|
|
||||||
@import './modal.less';
|
|
||||||
@import './responsive.less';
|
|
||||||
@@ -1,39 +0,0 @@
|
|||||||
/**
|
|
||||||
* 文件职责：经营报表页面布局与工具栏样式。
|
|
||||||
*/
|
|
||||||
.frp-toolbar {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
align-items: center;
|
|
||||||
padding: 16px 20px;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #f0f0f0;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 2px 8px rgb(15 23 42 / 6%);
|
|
||||||
|
|
||||||
.frp-period-segment {
|
|
||||||
--ant-segmented-item-selected-bg: #fff;
|
|
||||||
--ant-segmented-item-selected-color: #1677ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-store-select {
|
|
||||||
width: 200px;
|
|
||||||
min-width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-toolbar-right {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-batch-export-btn {
|
|
||||||
display: inline-flex;
|
|
||||||
gap: 4px;
|
|
||||||
align-items: center;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-select-selector {
|
|
||||||
height: 32px;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
/**
|
|
||||||
* 文件职责：经营报表批量导出弹窗样式。
|
|
||||||
*/
|
|
||||||
.frp-batch-modal {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-batch-desc {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 13px;
|
|
||||||
color: rgb(0 0 0 / 65%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-batch-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 12px 14px;
|
|
||||||
background: #fafafa;
|
|
||||||
border: 1px solid #f0f0f0;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-batch-line {
|
|
||||||
display: flex;
|
|
||||||
gap: 16px;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 13px;
|
|
||||||
|
|
||||||
.frp-batch-label {
|
|
||||||
color: rgb(0 0 0 / 45%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-batch-value {
|
|
||||||
color: rgb(0 0 0 / 88%);
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-total {
|
|
||||||
padding-top: 8px;
|
|
||||||
margin-top: 4px;
|
|
||||||
font-weight: 600;
|
|
||||||
border-top: 1px solid #f0f0f0;
|
|
||||||
|
|
||||||
.frp-batch-value {
|
|
||||||
color: #1677ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,58 +0,0 @@
|
|||||||
/**
|
|
||||||
* 文件职责：经营报表页面响应式样式。
|
|
||||||
*/
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
.frp-kpi-grid {
|
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.frp-toolbar {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding: 14px 12px;
|
|
||||||
|
|
||||||
.frp-period-segment,
|
|
||||||
.frp-store-select {
|
|
||||||
width: 100%;
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-toolbar-right {
|
|
||||||
width: 100%;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-batch-export-btn {
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-table-card {
|
|
||||||
.ant-table-wrapper {
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-kpi-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-finance-report {
|
|
||||||
.ant-drawer {
|
|
||||||
.ant-drawer-content-wrapper {
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-drawer-body {
|
|
||||||
padding: 14px 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-drawer-footer {
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
/**
|
|
||||||
* 文件职责：经营报表表格区域样式。
|
|
||||||
*/
|
|
||||||
.frp-table-card {
|
|
||||||
overflow: hidden;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #f0f0f0;
|
|
||||||
border-radius: 10px;
|
|
||||||
|
|
||||||
.ant-table-wrapper {
|
|
||||||
.ant-table-thead > tr > th {
|
|
||||||
font-size: 13px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-table-tbody > tr > td {
|
|
||||||
font-size: 13px;
|
|
||||||
vertical-align: middle;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-pagination {
|
|
||||||
margin: 14px 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-date {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-value {
|
|
||||||
color: rgb(0 0 0 / 88%);
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-amount {
|
|
||||||
font-weight: 600;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
&.is-profit {
|
|
||||||
color: #52c41a;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-loss {
|
|
||||||
color: #ff4d4f;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-action-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 2px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frp-action-link {
|
|
||||||
padding-inline: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
/**
|
|
||||||
* 文件职责：经营报表页面本地状态类型定义。
|
|
||||||
*/
|
|
||||||
import type { FinanceBusinessReportPeriodType } from '#/api/finance';
|
|
||||||
|
|
||||||
/** 通用选项项。 */
|
|
||||||
export interface OptionItem {
|
|
||||||
label: string;
|
|
||||||
value: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 报表周期选项。 */
|
|
||||||
export interface FinanceBusinessReportPeriodOption {
|
|
||||||
label: string;
|
|
||||||
value: FinanceBusinessReportPeriodType;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 经营报表分页状态。 */
|
|
||||||
export interface FinanceBusinessReportPaginationState {
|
|
||||||
page: number;
|
|
||||||
pageSize: number;
|
|
||||||
total: number;
|
|
||||||
}
|
|
||||||
5
pnpm-lock.yaml
generated
5
pnpm-lock.yaml
generated
@@ -48,9 +48,6 @@ catalogs:
|
|||||||
'@manypkg/get-packages':
|
'@manypkg/get-packages':
|
||||||
specifier: ^3.1.0
|
specifier: ^3.1.0
|
||||||
version: 3.1.0
|
version: 3.1.0
|
||||||
'@microsoft/signalr':
|
|
||||||
specifier: ^8.0.7
|
|
||||||
version: 8.0.17
|
|
||||||
'@nolebase/vitepress-plugin-git-changelog':
|
'@nolebase/vitepress-plugin-git-changelog':
|
||||||
specifier: ^2.18.2
|
specifier: ^2.18.2
|
||||||
version: 2.18.2
|
version: 2.18.2
|
||||||
@@ -618,7 +615,7 @@ importers:
|
|||||||
apps/web-antd:
|
apps/web-antd:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@microsoft/signalr':
|
'@microsoft/signalr':
|
||||||
specifier: 'catalog:'
|
specifier: ^8.0.7
|
||||||
version: 8.0.17
|
version: 8.0.17
|
||||||
'@vben/access':
|
'@vben/access':
|
||||||
specifier: workspace:*
|
specifier: workspace:*
|
||||||
|
|||||||
Reference in New Issue
Block a user