feat(报表): 新增VIP报表功能模块

apps/finance/src/api/statistics/index.ts

@@ -22,6 +22,13 @@ export const statisticsApi = {
     return requestClient.post('common/statistics/trainingClassStatistics', data);
   },
 
+  /**
+   * 获取VIP报表列表
+   */
+  getVipStatistics: (data: { month?: string; year: number }) => {
+    return requestClient.post('common/statistics/vipStatistics', data);
+  },
+
   /**
    * 下载天医币报表
    */

apps/finance/src/router/routes/modules/statistics.ts

@@ -38,6 +38,15 @@ const routes: RouteRecordRaw[] = [
         path: '/statistics/training-class-report',
         component: () => import('#/views/statistics/trainingClass/report.vue'),
       },
+      {
+        meta: {
+          title: 'VIP报表',
+          keepAlive: true,
+        },
+        name: 'VipReport',
+        path: '/statistics/vip-report',
+        component: () => import('#/views/statistics/vip/report.vue'),
+      },
     ],
   },
 ];

apps/finance/src/views/statistics/vip/report.vue

@@ -0,0 +1,153 @@
+<script lang="ts" setup>
+import type { Dayjs } from 'dayjs';
+
+import { onMounted, ref } from 'vue';
+
+import { Page, Spinner } from '@vben/common-ui';
+// import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, Card, DatePicker, Empty } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import { statisticsApi } from '#/api/statistics';
+
+const year = ref<Dayjs>(dayjs());
+const disabledDate = (date: Dayjs) => date.year() > dayjs().year();
+
+interface Report {
+  incomes: Record<string, number>;
+  notyet: number;
+  already: number;
+  now: number;
+}
+
+interface ReportItem {
+  type: string;
+  fee: number;
+}
+
+// 报表数据
+const list = ref<Report[]>([]);
+const loading = ref<boolean>(false);
+const getList = async () => {
+  loading.value = true;
+  list.value = [];
+  try {
+    // 计算查询年份中包含哪些月份, 若为今年则只查询到当前月份，往年则查询所有月份
+    const monthList =
+      year.value.year() === dayjs().year()
+        ? Array.from({ length: dayjs().month() + 1 }, (_, i) => (i + 1).toString().padStart(2, '0'))
+        : Array.from({ length: 12 }, (_, i) => (i + 1).toString().padStart(2, '0'));
+    for (const month of monthList) {
+      const data = await statisticsApi.getVipStatistics({
+        year: year.value.year(),
+        month,
+      });
+      list.value.push({
+        incomes: {
+          微信: 0,
+          支付宝: 0,
+          银行: 0,
+          天医币: 0,
+          ...Object.fromEntries(data.incomes.map((item: ReportItem) => [item.type, item.fee])),
+        },
+        notyet: data.notyet || 0,
+        already: data.already || 0,
+        now: data.now || 0,
+      });
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 下载报表
+// const downloadReport = async (index: number) => {
+//   const month = index > 9 ? `${index + 1}` : `0${index + 1}`;
+//   const date = `${year.value.year()}-${month}`;
+//   const filename = `天医币报表_${year.value.year()}年${month}月_文件.xlsx`;
+//   const res = await statisticsApi.downloadReportTianyibi({
+//     date,
+//   });
+//   downloadFileFromBlobPart({
+//     source: res.data,
+//     fileName: filename,
+//   });
+// };
+
+// const downloadAllReport = () => {
+//   list.value.forEach((_, index) => {
+//     downloadReport(index);
+//   });
+// };
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="flex h-full flex-col rounded-md bg-white">
+      <div class="search-form p-4">
+        <DatePicker
+          v-model:value="year"
+          picker="year"
+          :disabled-date="disabledDate"
+          @change="getList"
+        />
+        <Button type="primary" class="ml-2" @click="getList">查询</Button>
+        <!-- <Button type="link" class="ml-2" @click="downloadAllReport">
+          下载 {{ year.year() }} 年全部天医币报表
+        </Button> -->
+      </div>
+      <div class="h-2 bg-gray-100"></div>
+      <Spinner class="content flex-1 px-3 py-4" :spinning="loading">
+        <div
+          v-if="list.length === 0 && !loading"
+          class="col-span-3 flex items-center justify-center"
+        >
+          <Empty />
+        </div>
+        <div v-else class="grid max-h-full grid-cols-3 gap-3 overflow-auto px-1">
+          <Card v-for="(item, index) in list" :key="index" :title="`${index + 1} 月`" size="small">
+            <!-- <template #extra>
+              <Button type="link" @click="downloadReport(index)">下载报表</Button>
+            </template> -->
+            <div class="-m-2 text-[16px]">
+              <div class="flex">
+                <div class="flex-1 bg-[#F6FFF5] px-2 pb-1">
+                  <div class="p-1 text-center font-bold">收入</div>
+                  <div v-for="(fee, type) in item.incomes" :key="type" class="p-1">
+                    <span class="text-gray-500">{{ type }}：</span>
+                    <span class="text-black">{{ fee }}</span>
+                  </div>
+                </div>
+                <div class="flex-1 bg-[#FFFBF0] px-2 pb-1">
+                  <div class="p-1 text-center font-bold">摊销</div>
+                  <div class="p-1">
+                    <span class="text-gray-500">已摊销：</span>
+                    <span class="text-black">{{ item.already }}</span>
+                  </div>
+                  <div class="p-1">
+                    <span class="text-gray-500">月摊销：</span>
+                    <span class="text-black">{{ item.now }}</span>
+                  </div>
+                  <div class="p-1">
+                    <span class="text-gray-500">剩余摊销：</span>
+                    <span class="text-black">{{ item.notyet }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Card>
+        </div>
+      </Spinner>
+    </div>
+  </Page>
+</template>
+<style scoped lang="scss">
+:deep(.ant-card-head-title) {
+  font-size: 16px !important;
+}
+</style>