<script lang="ts" setup>
|
import { onMounted, ref } from 'vue';
|
|
import { Page } from '@vben/common-ui';
|
import { erpPriceInputFormatter } from '@vben/utils';
|
|
import { Card, Col, Row, Statistic } from 'ant-design-vue';
|
|
import { getPurchaseSummary } from '#/api/erp/purchase/statistics';
|
import type { ErpPurchaseStatisticsApi } from '#/api/erp/purchase/statistics';
|
|
defineOptions({ name: 'ErpPurchaseStatistics' });
|
|
const loading = ref(false);
|
const summary = ref<ErpPurchaseStatisticsApi.Summary>({});
|
|
/** 获取统计数据 */
|
async function fetchSummary() {
|
loading.value = true;
|
try {
|
summary.value = await getPurchaseSummary();
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
onMounted(() => {
|
fetchSummary();
|
});
|
</script>
|
|
<template>
|
<Page auto-content-height>
|
<div class="p-4">
|
<Card title="采购汇总统计" :loading="loading">
|
<Row :gutter="16">
|
<Col :span="6">
|
<Statistic
|
title="总订单数"
|
:value="summary.totalOrderCount || 0"
|
suffix="单"
|
/>
|
</Col>
|
<Col :span="6">
|
<Statistic
|
title="总订单金额"
|
:value="erpPriceInputFormatter(summary.totalOrderAmount) || '0.00'"
|
suffix="元"
|
/>
|
</Col>
|
<Col :span="6">
|
<Statistic
|
title="总入库数"
|
:value="summary.totalInCount || 0"
|
suffix="单"
|
/>
|
</Col>
|
<Col :span="6">
|
<Statistic
|
title="总入库金额"
|
:value="erpPriceInputFormatter(summary.totalInAmount) || '0.00'"
|
suffix="元"
|
/>
|
</Col>
|
</Row>
|
<Row :gutter="16" class="mt-4">
|
<Col :span="6">
|
<Statistic
|
title="总退货数"
|
:value="summary.totalReturnCount || 0"
|
suffix="单"
|
/>
|
</Col>
|
<Col :span="6">
|
<Statistic
|
title="总退货金额"
|
:value="erpPriceInputFormatter(summary.totalReturnAmount) || '0.00'"
|
suffix="元"
|
/>
|
</Col>
|
</Row>
|
</Card>
|
</div>
|
</Page>
|
</template>
|
