add event record calendar to record list

src/pages/store/StoreDataCharts.vue

@@ -2,7 +2,7 @@
 	<div v-can="permissionCodes.stat.read" class="data-charts-page">
 		<store-chart-summary :date-text-list="dateTextList" />
 
-		<store-event-record-calendar-section />
+		<store-event-record-calendar-section @list="toEventRecordList" />
 		<store-customer-growth-chart :date-text-list="dateTextList" />
 		<store-event-record-trend-chart :date-text-list="dateTextList" />
 		<store-event-structure-chart :date-text-list="dateTextList" />
@@ -19,6 +19,7 @@ import StoreEventRecordCalendarSection from "@/pages/store/component/StoreEventR
 import StoreEventRecordTrendChart from "@/pages/store/component/StoreEventRecordTrendChart.vue";
 import StoreEventStructureChart from "@/pages/store/component/StoreEventStructureChart.vue";
 import { permissionCodes } from "@/utils/permission";
+import type { EventRecordCalendarListPayload } from "@/components/EventRecordCalendar.vue";
 
 defineOptions({
 	name: "StoreDataCharts"
@@ -29,9 +30,38 @@ defineOptions({
 const beginDate = getDateStart(addMonths(new Date(), -1));
 const endDate = getDateEnd(new Date());
 const dateTextList = buildDateTextList(beginDate, endDate);
+const route = useRoute();
+const router = useRouter();
+
+async function toEventRecordList(payload: EventRecordCalendarListPayload): Promise<void> {
+	await router.push({
+		name: "EventRecordList",
+		query: buildEventRecordListQuery(payload.monthCursor, payload.selectedEventIdList)
+	});
+}
+
+function buildEventRecordListQuery(monthCursor: Date, eventIdList: string[]): Record<string, string> {
+	const monthStart = getMonthStart(monthCursor);
+	const monthEnd = getDateEnd(addDays(addMonths(monthStart, 1), -1));
+	return {
+		dateType: "custom",
+		beginAt: `${Time.formatDate(monthStart)} 00:00`,
+		endAt: `${Time.formatDate(monthEnd)} 23:59`,
+		transitionDepth: String(getCurrentRouteDepth() + 1),
+		eventIds: eventIdList.join(",")
+	};
+}
+
+function getCurrentRouteDepth(): number {
+	return Number(route.meta.depth ?? 0);
+}
 
 // ---------- 日期工具 ----------
 
+function getMonthStart(date: Date): Date {
+	return new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0, 0);
+}
+
 function getDateStart(date: Date): Date {
 	return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
 }

src/pages/store/component/StoreEventRecordCalendarSection.vue

@@ -6,18 +6,23 @@
 		empty-text="当前月份暂无登记事件记录"
 		:loading="isCalendarLoading"
 		:records="monthRecords"
+		@list="value => emit('list', value)"
 	/>
 </template>
 
 <script setup lang="ts">
 import EventAPI from "@/api/EventAPI";
 import StoreChartAPI from "@/api/StoreChartAPI";
-import EventRecordCalendar from "@/components/EventRecordCalendar.vue";
+import EventRecordCalendar, { type EventRecordCalendarListPayload } from "@/components/EventRecordCalendar.vue";
 import type { EventItem } from "@/types/EventItem";
 import type { EventRecord } from "@/types/EventRecord";
 import type { StoreEventRecordCalendarView } from "@/types/Store";
 import { Time } from "timi-web";
 
+const emit = defineEmits<{
+	list: [value: EventRecordCalendarListPayload];
+}>();
+
 const eventList = ref<EventItem[]>([]);
 const selectedEventIdList = ref<string[]>([]);
 const monthRecords = ref<EventRecord[]>([]);