48 lines
1.4 KiB
Vue
48 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* 文件职责：发票记录统计卡片栏。
|
|
*/
|
|
import type { FinanceInvoiceStatsDto } from '#/api/finance';
|
|
|
|
import { IconifyIcon } from '@vben/icons';
|
|
|
|
import { formatCurrency } from '../composables/invoice-page/helpers';
|
|
|
|
interface Props {
|
|
stats: FinanceInvoiceStatsDto;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="fi-stats">
|
|
<div class="fi-stat-card">
|
|
<div class="fi-stat-label">
|
|
<IconifyIcon icon="lucide:receipt-text" class="fi-stat-icon" />
|
|
<span>本月开票</span>
|
|
</div>
|
|
<div class="fi-stat-val">{{ formatCurrency(props.stats.currentMonthIssuedAmount) }}</div>
|
|
<div class="fi-stat-sub">共 {{ props.stats.currentMonthIssuedCount }} 张</div>
|
|
</div>
|
|
|
|
<div class="fi-stat-card warn">
|
|
<div class="fi-stat-label">
|
|
<IconifyIcon icon="lucide:clock" class="fi-stat-icon" />
|
|
<span>待开票</span>
|
|
</div>
|
|
<div class="fi-stat-val">{{ props.stats.pendingCount }}</div>
|
|
<div class="fi-stat-sub">张待处理</div>
|
|
</div>
|
|
|
|
<div class="fi-stat-card danger">
|
|
<div class="fi-stat-label">
|
|
<IconifyIcon icon="lucide:ban" class="fi-stat-icon" />
|
|
<span>已作废</span>
|
|
</div>
|
|
<div class="fi-stat-val">{{ props.stats.voidedCount }}</div>
|
|
<div class="fi-stat-sub">张已作废</div>
|
|
</div>
|
|
</div>
|
|
</template>
|