feat：【mall 商城】会员统计【antd】50% 全部完成

apps/web-antd/src/views/mall/statistics/member/modules/area-card.vue

@@ -6,13 +6,13 @@ import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
 import { onMounted, ref, shallowRef } from 'vue';
 
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
-import { fenToYuan } from '@vben/utils';
 
-import { Card, Spin, Table } from 'ant-design-vue';
+import { Card, Spin } from 'ant-design-vue';
 
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import * as MemberStatisticsApi from '#/api/mall/statistics/member';
 
-import { getAreaChartOptions } from './area-chart-options';
+import { getAreaChartOptions, getAreaTableColumns } from './area-chart-options';
 
 /** 会员地域分布卡片 */
 defineOptions({ name: 'MemberAreaCard' });
@@ -24,62 +24,24 @@ const areaStatisticsList = shallowRef<MallMemberStatisticsApi.AreaStatistics[]>(
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
 
-/** 城市名兼容：ercharts 地名存在差异 */
-function areaReplace(areaName: string) {
-  if (!areaName) {
-    return areaName;
-  }
-  return areaName
-    .replace('维吾尔自治区', '')
-    .replace('壮族自治区', '')
-    .replace('回族自治区', '')
-    .replace('自治区', '')
-    .replace('省', '');
-}
-
-/** 表格列配置 */
-const columns = [
-  {
-    title: '省份',
-    dataIndex: 'areaName',
-    key: 'areaName',
-    width: 80,
-    sorter: true,
-    ellipsis: true,
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: getAreaTableColumns(),
+    height: 300,
+    border: true,
+    showOverflow: true,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
   },
-  {
-    title: '会员数量',
-    dataIndex: 'userCount',
-    key: 'userCount',
-    width: 100,
-    sorter: (a: any, b: any) => (a.userCount || 0) - (b.userCount || 0),
-  },
-  {
-    title: '订单创建数量',
-    dataIndex: 'orderCreateUserCount',
-    key: 'orderCreateUserCount',
-    width: 120,
-    sorter: (a: any, b: any) =>
-      (a.orderCreateUserCount || 0) - (b.orderCreateUserCount || 0),
-  },
-  {
-    title: '订单支付数量',
-    dataIndex: 'orderPayUserCount',
-    key: 'orderPayUserCount',
-    width: 120,
-    sorter: (a: any, b: any) =>
-      (a.orderPayUserCount || 0) - (b.orderPayUserCount || 0),
-  },
-  {
-    title: '订单支付金额',
-    dataIndex: 'orderPayPrice',
-    key: 'orderPayPrice',
-    width: 120,
-    sorter: (a: any, b: any) => (a.orderPayPrice || 0) - (b.orderPayPrice || 0),
-    customRender: ({ record }: any) =>
-      `￥${Number(fenToYuan(record.orderPayPrice || 0)).toFixed(2)}`,
-  },
-];
+});
 
 /** 按照省份，查询会员统计列表 */
 async function getMemberAreaStatisticsList() {
@@ -95,11 +57,27 @@ async function getMemberAreaStatisticsList() {
     // 渲染图表
     const chartOptions = getAreaChartOptions(areaStatisticsList.value);
     await renderEcharts(chartOptions);
+
+    // 加载表格数据
+    await gridApi.grid.loadData(areaStatisticsList.value);
   } finally {
     loading.value = false;
   }
 }
 
+/** 城市名兼容：ECharts 地名存在差异 */
+function areaReplace(areaName: string): string {
+  if (!areaName) {
+    return areaName;
+  }
+  return areaName
+    .replace('维吾尔自治区', '')
+    .replace('壮族自治区', '')
+    .replace('回族自治区', '')
+    .replace('自治区', '')
+    .replace('省', '');
+}
+
 /** 初始化 */
 onMounted(() => {
   getMemberAreaStatisticsList();
@@ -114,14 +92,7 @@ onMounted(() => {
           <EchartsUI ref="chartRef" />
         </div>
         <div class="w-3/5">
-          <Table
-            :data-source="areaStatisticsList"
-            :columns="columns"
-            :scroll="{ y: 260 }"
-            size="small"
-            :pagination="false"
-            bordered
-          />
+          <Grid />
         </div>
       </div>
     </Spin>

apps/web-antd/src/views/mall/statistics/member/modules/area-chart-options.ts

@@ -1,3 +1,4 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallMemberStatisticsApi } from '#/api/mall/statistics/member';
 
 import { fenToYuan } from '@vben/utils';
@@ -89,3 +90,41 @@ export function getAreaChartOptions(
     ],
   };
 }
+
+/** VXE Grid 表格列配置 */
+export function getAreaTableColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'areaName',
+      title: '省份',
+      minWidth: 80,
+      sortable: true,
+      showOverflow: 'tooltip',
+    },
+    {
+      field: 'userCount',
+      title: '会员数量',
+      minWidth: 100,
+      sortable: true,
+    },
+    {
+      field: 'orderCreateUserCount',
+      title: '订单创建数量',
+      minWidth: 120,
+      sortable: true,
+    },
+    {
+      field: 'orderPayUserCount',
+      title: '订单支付数量',
+      minWidth: 120,
+      sortable: true,
+    },
+    {
+      field: 'orderPayPrice',
+      title: '订单支付金额',
+      minWidth: 120,
+      sortable: true,
+      formatter: 'formatFenToYuanAmount',
+    },
+  ];
+}