update charts

src/pages/customer/component/CustomerChartSummary.vue

@@ -0,0 +1,124 @@
+<template>
+	<div v-for="item in summaryList" :key="item.label" class="summary-item">
+		<span v-text="item.label" />
+		<strong v-text="item.value" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Time } from "timi-web";
+import CustomerChartAPI from "@/api/CustomerChartAPI";
+import EventAPI from "@/api/EventAPI";
+import type { Customer } from "@/types/Customer";
+import type { EventItem } from "@/types/EventItem";
+import type { StoreEventRecordCalendarView } from "@/types/Store";
+
+interface SummaryItem {
+	label: string;
+	value: string;
+}
+
+const props = defineProps<{
+	customer: Customer;
+	monthCursor: Date;
+	selectedEventIdList: string[];
+}>();
+
+// ---------- 摘要数据 ----------
+
+const eventList = ref<EventItem[]>([]);
+const monthRecordList = ref<StoreEventRecordCalendarView[]>([]);
+let summaryRequestId = 0;
+
+const eventNameMap = computed(() => {
+	const map = new Map<string, string>();
+	for (const item of eventList.value) {
+		if (item.id) {
+			map.set(item.id, item.name || "未命名事件");
+		}
+	}
+	return map;
+});
+const summaryList = computed<SummaryItem[]>(() => [
+	{
+		label: "本月登记",
+		value: `${monthRecordList.value.length} 次`
+	},
+	{
+		label: "转介绍",
+		value: `${props.customer.invitedCount || 0} 人`
+	},
+	{
+		label: "最近登记",
+		value: getRecordEventName(monthRecordList.value[0]) || "暂无"
+	}
+]);
+
+watch([
+	() => props.customer.id,
+	() => props.monthCursor,
+	() => props.selectedEventIdList
+], async () => {
+	await loadMonthRecords();
+}, {
+	deep: true
+});
+
+onMounted(async () => {
+	await loadEvents();
+	await loadMonthRecords();
+});
+
+async function loadEvents(): Promise<void> {
+	eventList.value = await EventAPI.listValid();
+}
+
+async function loadMonthRecords(): Promise<void> {
+	const customerId = props.customer.id;
+	if (!customerId || !props.selectedEventIdList.length) {
+		monthRecordList.value = [];
+		return;
+	}
+
+	const requestId = ++summaryRequestId;
+	const begin = getMonthStart(props.monthCursor);
+	const end = getDateEnd(addDays(addMonths(begin, 1), -1));
+	const recordList = await CustomerChartAPI.eventRecordCalendar({
+		customerId,
+		beginAt: Time.toTimestamp(begin),
+		endAt: Time.toTimestamp(end),
+		eventIdList: props.selectedEventIdList
+	});
+	if (requestId === summaryRequestId) {
+		monthRecordList.value = recordList;
+	}
+}
+
+function getRecordEventName(record?: StoreEventRecordCalendarView): string {
+	if (!record) {
+		return "";
+	}
+
+	return record.eventId ? eventNameMap.value.get(record.eventId) || "未知事件" : "未知事件";
+}
+
+// ---------- 日期 ----------
+
+function getMonthStart(date: Date): Date {
+	return new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0, 0);
+}
+
+function getDateEnd(date: Date): Date {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
+}
+
+function addMonths(date: Date, months: number): Date {
+	return new Date(date.getFullYear(), date.getMonth() + months, date.getDate(), 0, 0, 0, 0);
+}
+
+function addDays(date: Date, days: number): Date {
+	const value = new Date(date);
+	value.setDate(value.getDate() + days);
+	return value;
+}
+</script>