refactor(@vben/web-antd): ERP 首页适配已有组件

- 移除不必要的 API 调用和数据处理逻辑 - 使用 AnalysisOverview 组件替换自定义统计卡片 - 优化 TimeSummaryChart组件，支持不同类型的数据展示 - 简化页面结构，提高组件的可复用性和可维护性
2025-07-21 21:36:40 +08:00 · 2025-07-21 21:36:40 +08:00 · 073dc4c6c5
parent 0c1bfe62a2
commit 073dc4c6c5
3 changed files with 128 additions and 97 deletions
--- a/apps/web-antd/src/views/erp/home/components/SummaryCard.vue
+++ b/apps/web-antd/src/views/erp/home/components/SummaryCard.vue
@ -1,29 +1,69 @@
 <script lang="ts" setup>
-import { VbenCountToAnimator } from '@vben/common-ui';
+import type { AnalysisOverviewItem } from '@vben/common-ui';
+
+import { computed } from 'vue';
+
+import { AnalysisOverview } from '@vben/common-ui';
+import {
+  SvgBellIcon,
+  SvgCakeIcon,
+  SvgCardIcon,
+  SvgDownloadIcon,
+} from '@vben/icons';

 interface Props {
-  title: string;
-  value?: number;
+  saleSummary?: {
+    monthPrice?: number;
+    todayPrice?: number;
+    yearPrice?: number;
+    yesterdayPrice?: number;
+  };
+  purchaseSummary?: {
+    monthPrice?: number;
+    todayPrice?: number;
+    yearPrice?: number;
+    yesterdayPrice?: number;
+  };
 }

-withDefaults(defineProps<Props>(), {
-  value: 0,
+const props = withDefaults(defineProps<Props>(), {
+  saleSummary: () => ({}),
+  purchaseSummary: () => ({}),
 });
+
+/** 概览数据 */
+const overviewItems = computed<AnalysisOverviewItem[]>(() => [
+  {
+    icon: SvgCardIcon,
+    title: '今日销售',
+    totalTitle: '今日采购',
+    totalValue: props.purchaseSummary?.todayPrice || 0,
+    value: props.saleSummary?.todayPrice || 0,
+  },
+  {
+    icon: SvgCakeIcon,
+    title: '昨日销售',
+    totalTitle: '昨日采购',
+    totalValue: props.purchaseSummary?.yesterdayPrice || 0,
+    value: props.saleSummary?.yesterdayPrice || 0,
+  },
+  {
+    icon: SvgDownloadIcon,
+    title: '本月销售',
+    totalTitle: '本月采购',
+    totalValue: props.purchaseSummary?.monthPrice || 0,
+    value: props.saleSummary?.monthPrice || 0,
+  },
+  {
+    icon: SvgBellIcon,
+    title: '今年销售',
+    totalTitle: '今年采购',
+    totalValue: props.purchaseSummary?.yearPrice || 0,
+    value: props.saleSummary?.yearPrice || 0,
+  },
+]);
 </script>

 <template>
-  <div class="flex flex-col gap-2 rounded-lg border bg-white p-6 shadow-sm">
-    <div class="flex items-center justify-between text-gray-500">
-      <span>{{ title }}</span>
-    </div>
-    <div class="flex flex-row items-baseline justify-between">
-      <VbenCountToAnimator
-        :end-val="value"
-        :decimals="2"
-        :duration="500"
-        prefix="￥"
-        class="text-3xl font-semibold text-gray-900"
-      />
-    </div>
-  </div>
+  <AnalysisOverview :items="overviewItems" />
 </template>
--- a/apps/web-antd/src/views/erp/home/components/TimeSummaryChart.vue
+++ b/apps/web-antd/src/views/erp/home/components/TimeSummaryChart.vue
@ -3,23 +3,51 @@ import type { EChartsOption } from 'echarts';

 import type { EchartsUIType } from '@vben/plugins/echarts';

-import { ref, watch } from 'vue';
+import type { ErpPurchaseStatisticsApi } from '#/api/erp/statistics/purchase';
+import type { ErpSaleStatisticsApi } from '#/api/erp/statistics/sale';
+
+import { onMounted, ref, watch } from 'vue';

 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

 import { Card } from 'ant-design-vue';

+import {
+  getPurchaseSummary,
+  getPurchaseTimeSummary,
+} from '#/api/erp/statistics/purchase';
+import { getSaleSummary, getSaleTimeSummary } from '#/api/erp/statistics/sale';
 import { CardTitle } from '#/components/card';

 interface Props {
  title: string;
-  value?: Array<{ price: number; time: string }>;
+  type?: 'purchase' | 'sale';
 }

 const props = withDefaults(defineProps<Props>(), {
-  value: () => [],
+  type: 'sale',
 });

+/** 销售统计数据 */
+const saleSummary = ref<ErpSaleStatisticsApi.SaleSummary>(); // 销售概况统计
+const saleTimeSummaryList = ref<ErpSaleStatisticsApi.SaleTimeSummary[]>(); // 销售时段统计
+const getSaleStatistics = async () => {
+  saleSummary.value = await getSaleSummary();
+  saleTimeSummaryList.value = await getSaleTimeSummary();
+};
+
+/** 采购统计数据 */
+const purchaseSummary = ref<ErpPurchaseStatisticsApi.PurchaseSummary>(); // 采购概况统计
+const purchaseTimeSummaryList =
+  ref<ErpPurchaseStatisticsApi.PurchaseTimeSummary[]>(); // 采购时段统计
+const getPurchaseStatistics = async () => {
+  purchaseSummary.value = await getPurchaseSummary();
+  purchaseTimeSummaryList.value = await getPurchaseTimeSummary();
+};
+
+/** 获取当前类型的时段数据 */
+const currentTimeSummaryList = ref<Array<{ price: number; time: string }>>();
+
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);

@ -80,8 +108,20 @@ const lineChartOptions: EChartsOption = {
  },
 };

+/** 初始化数据 */
+const initData = async () => {
+  if (props.type === 'sale') {
+    await getSaleStatistics();
+    currentTimeSummaryList.value = saleTimeSummaryList.value;
+  } else {
+    await getPurchaseStatistics();
+    currentTimeSummaryList.value = purchaseTimeSummaryList.value;
+  }
+};
+
+/** 监听数据变化并更新图表 */
 watch(
-  () => props.value,
+  () => currentTimeSummaryList.value,
  (val) => {
    if (!val || val.length === 0) {
      return;
@ -109,6 +149,19 @@ watch(
  },
  { immediate: true },
 );
+
+/** 组件挂载时初始化数据 */
+onMounted(() => {
+  initData();
+});
+
+/** 暴露数据给父组件使用 */
+defineExpose({
+  saleSummary,
+  purchaseSummary,
+  saleTimeSummaryList,
+  purchaseTimeSummaryList,
+});
 </script>

 <template>
--- a/apps/web-antd/src/views/erp/home/index.vue
+++ b/apps/web-antd/src/views/erp/home/index.vue
@ -1,50 +1,21 @@
 <script lang="ts" setup>
-import type { ErpPurchaseStatisticsApi } from '#/api/erp/statistics/purchase';
-import type { ErpSaleStatisticsApi } from '#/api/erp/statistics/sale';
-
-import { onMounted, ref } from 'vue';
+import { ref } from 'vue';

 import { DocAlert, Page } from '@vben/common-ui';

 import { Col, Row, Spin } from 'ant-design-vue';

-import {
-  getPurchaseSummary,
-  getPurchaseTimeSummary,
-} from '#/api/erp/statistics/purchase';
-import { getSaleSummary, getSaleTimeSummary } from '#/api/erp/statistics/sale';
-
 import SummaryCard from './components/SummaryCard.vue';
 import TimeSummaryChart from './components/TimeSummaryChart.vue';

 /** ERP首页 */
 defineOptions({ name: 'ErpHome' });

-const loading = ref(true); // 加载中
+const loading = ref(false); // 加载中

-/** 获得销售统计 */
-const saleSummary = ref<ErpSaleStatisticsApi.SaleSummary>(); // 销售概况统计
-const saleTimeSummaryList = ref<ErpSaleStatisticsApi.SaleTimeSummary[]>(); // 销售时段统计
-const getSaleStatistics = async () => {
-  saleSummary.value = await getSaleSummary();
-  saleTimeSummaryList.value = await getSaleTimeSummary();
-};
-
-/** 获得采购统计 */
-const purchaseSummary = ref<ErpPurchaseStatisticsApi.PurchaseSummary>(); // 采购概况统计
-const purchaseTimeSummaryList =
-  ref<ErpPurchaseStatisticsApi.PurchaseTimeSummary[]>(); // 采购时段统计
-const getPurchaseStatistics = async () => {
-  purchaseSummary.value = await getPurchaseSummary();
-  purchaseTimeSummaryList.value = await getPurchaseTimeSummary();
-};
-
-/** 初始化 */
-onMounted(async () => {
-  loading.value = true;
-  await Promise.all([getSaleStatistics(), getPurchaseStatistics()]);
-  loading.value = false;
-});
+/** 图表组件引用 */
+const saleChartRef = ref();
+const purchaseChartRef = ref();
 </script>

 <template>
@ -59,56 +30,23 @@ onMounted(async () => {
    <Spin :spinning="loading">
      <div class="flex flex-col gap-4">
        <!-- 销售/采购的全局统计 -->
-        <Row :gutter="16">
-          <Col :md="6" :sm="12" :xs="24">
-            <SummaryCard title="今日销售" :value="saleSummary?.todayPrice" />
-          </Col>
-          <Col :md="6" :sm="12" :xs="24">
-            <SummaryCard
-              title="昨日销售"
-              :value="saleSummary?.yesterdayPrice"
-            />
-          </Col>
-          <Col :md="6" :sm="12" :xs="24">
-            <SummaryCard
-              title="今日采购"
-              :value="purchaseSummary?.todayPrice"
-            />
-          </Col>
-          <Col :md="6" :sm="12" :xs="24">
-            <SummaryCard
-              title="昨日采购"
-              :value="purchaseSummary?.yesterdayPrice"
-            />
-          </Col>
-          <Col :md="6" :sm="12" :xs="24">
-            <SummaryCard title="本月销售" :value="saleSummary?.monthPrice" />
-          </Col>
-          <Col :md="6" :sm="12" :xs="24">
-            <SummaryCard title="今年销售" :value="saleSummary?.yearPrice" />
-          </Col>
-          <Col :md="6" :sm="12" :xs="24">
-            <SummaryCard
-              title="本月采购"
-              :value="purchaseSummary?.monthPrice"
-            />
-          </Col>
-          <Col :md="6" :sm="12" :xs="24">
-            <SummaryCard title="今年采购" :value="purchaseSummary?.yearPrice" />
-          </Col>
-        </Row>
+        <SummaryCard
+          :sale-summary="saleChartRef?.saleSummary"
+          :purchase-summary="purchaseChartRef?.purchaseSummary"
+        />

        <!-- 销售/采购的时段统计 -->
        <Row :gutter="16">
          <!-- 销售统计 -->
          <Col :md="12" :sm="12" :xs="24">
-            <TimeSummaryChart title="销售统计" :value="saleTimeSummaryList" />
+            <TimeSummaryChart ref="saleChartRef" title="销售统计" type="sale" />
          </Col>
          <!-- 采购统计 -->
          <Col :md="12" :sm="12" :xs="24">
            <TimeSummaryChart
+              ref="purchaseChartRef"
              title="采购统计"
-              :value="purchaseTimeSummaryList"
+              type="purchase"
            />
          </Col>
        </Row>