add event record calendar to record list

src/components/CustomerProfileCard.vue

@@ -64,6 +64,7 @@ function openPhotoViewer(): void {
 	gap: .875rem;
 	padding: .5rem;
 	display: flex;
+	box-shadow: var(--td-shadow-1);
 	background: #e6eeff;
 	border-radius: 1.125rem;
 

src/components/EventRecordCalendar.vue

@@ -47,6 +47,11 @@
 		</div>
 		<div v-if="loading" class="empty-block">正在加载登记日历</div>
 		<div v-else-if="!currentMonthFilteredRecords.length" class="empty-block" v-text="emptyText" />
+		<t-cell title="登记事件记录列表" arrow @click="openRecordList">
+			<template #left-icon>
+				<t-icon name="catalog" />
+			</template>
+		</t-cell>
 		<t-popup v-model="dayRecordVisible" placement="bottom" destroy-on-close>
 			<div class="day-record-panel">
 				<div class="popup-head">
@@ -112,6 +117,11 @@ interface CalendarDay {
 	records: EventRecord[];
 }
 
+export interface EventRecordCalendarListPayload {
+	monthCursor: Date;
+	selectedEventIdList: string[];
+}
+
 const props = withDefaults(defineProps<{
 	eventList: EventItem[];
 	customerName?: string;
@@ -131,6 +141,7 @@ const props = withDefaults(defineProps<{
 const emit = defineEmits<{
 	"update:modelValue": [value: Date];
 	"update:selectedEventIdList": [value: string[]];
+	list: [value: EventRecordCalendarListPayload];
 }>();
 
 const route = useRoute();
@@ -197,6 +208,13 @@ function openDayRecords(day: CalendarDay): void {
 	dayRecordVisible.value = true;
 }
 
+function openRecordList(): void {
+	emit("list", {
+		monthCursor: props.modelValue,
+		selectedEventIdList: props.selectedEventIdList
+	});
+}
+
 async function toRecordDetail(record: EventRecord): Promise<void> {
 	if (!record.id) {
 		return;
@@ -272,9 +290,8 @@ function addMonths(date: Date, months: number): Date {
 
 <style scoped lang="less">
 .register-record-calendar {
-	gap: .875rem;
-	padding: 1rem;
 	display: flex;
+	overflow: hidden;
 	background: rgba(255, 255, 255, .92);
 	box-shadow: var(--td-shadow-1);
 	border-radius: .75rem;
@@ -282,6 +299,7 @@ function addMonths(date: Date, months: number): Date {
 
 	.calendar-head {
 		display: flex;
+		padding: .5rem 1rem;
 		align-items: center;
 		justify-content: space-between;
 
@@ -312,12 +330,14 @@ function addMonths(date: Date, months: number): Date {
 
 	.week-line {
 		color: #52607a;
+		padding: 0 1rem;
 		font-size: .75rem;
 		text-align: center;
 	}
 
 	.calendar-grid {
 		gap: .375rem;
+		padding: 1rem 1rem .5rem 1rem;
 
 		.day-cell {
 			padding: .25rem;

src/components/PageTransition.vue

@@ -61,7 +61,12 @@ function parseTransitionDepth(value: unknown): number | undefined {
 		return undefined;
 	}
 
-	const depth = Number(value);
+	const text = value.trim();
+	if (!text) {
+		return undefined;
+	}
+
+	const depth = Number(text);
 	if (!Number.isInteger(depth) || depth < 0 || 20 < depth) {
 		return undefined;
 	}

src/pages/customer/CustomerDataCharts.vue

@@ -39,6 +39,7 @@
 				v-model:selected-event-id-list="selectedEventIdList"
 				:customer-id="selectedCustomer.id || ''"
 				:customer-name="selectedCustomer.name"
+				@list="toEventRecordList"
 			/>
 			<customer-record-trend-chart
 				v-if="selectedCustomer"
@@ -66,6 +67,7 @@ import { Time } from "timi-web";
 import CustomerAPI from "@/api/CustomerAPI";
 import CodeScanner from "@/components/CodeScanner.vue";
 import CustomerSelector from "@/components/CustomerSelector.vue";
+import type { EventRecordCalendarListPayload } from "@/components/EventRecordCalendar.vue";
 import CustomerChartSummary from "@/pages/customer/component/CustomerChartSummary.vue";
 import CustomerEventRecordCalendarSection from "@/pages/customer/component/CustomerEventRecordCalendarSection.vue";
 import CustomerEventStructureChart from "@/pages/customer/component/CustomerEventStructureChart.vue";
@@ -79,6 +81,7 @@ defineOptions({
 });
 
 const route = useRoute();
+const router = useRouter();
 const settingStore = useSettingStore();
 
 // ---------- 路由 ----------
@@ -160,6 +163,35 @@ function clearLoadedCustomer(): void {
 	selectedCustomerId.value = "";
 }
 
+async function toEventRecordList(payload: EventRecordCalendarListPayload): Promise<void> {
+	if (!selectedCustomer.value?.id) {
+		return;
+	}
+
+	await router.push({
+		name: "EventRecordList",
+		query: buildEventRecordListQuery(payload.monthCursor, payload.selectedEventIdList, selectedCustomer.value)
+	});
+}
+
+function buildEventRecordListQuery(monthCursor: Date, eventIdList: string[], customer: Customer): Record<string, string> {
+	const monthStart = getMonthStart(monthCursor);
+	const monthEnd = getDateEnd(addDays(addMonths(monthStart, 1), -1));
+	return {
+		customerId: customer.id || "",
+		customerName: customer.name || "",
+		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);
+}
+
 // ---------- 扫码 ----------
 
 const scannerVisible = ref(false);

src/pages/customer/component/CustomerEventRecordCalendarSection.vue

@@ -7,6 +7,7 @@
 		:customer-name="customerName"
 		:loading="isCalendarLoading"
 		:records="records"
+		@list="value => emit('list', value)"
 	/>
 </template>
 
@@ -14,7 +15,7 @@
 import { Time } from "timi-web";
 import CustomerChartAPI from "@/api/CustomerChartAPI";
 import EventAPI from "@/api/EventAPI";
-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";
@@ -29,6 +30,7 @@ const props = defineProps<{
 const emit = defineEmits<{
 	"update:modelValue": [value: Date];
 	"update:selectedEventIdList": [value: string[]];
+	list: [value: EventRecordCalendarListPayload];
 }>();
 
 const monthCursorProxy = computed({

src/pages/event/EventRecordList.vue

@@ -163,7 +163,8 @@ const dateOptions: Array<{ label: string; value: DateFilterType }> = [
 
 // ---------- 筛选 ----------
 
-const keyword = ref(getQueryText("keyword"));
+const keyword = ref(getInitialKeyword());
+const customerId = ref(getQueryText("customerId"));
 const dateFilterType = ref<DateFilterType>(parseDateFilterType(route.query.dateType));
 const dateRange = ref(parseDateRange(dateFilterType.value));
 const actionFilter = ref<string[]>([]);
@@ -350,12 +351,17 @@ async function toDetail(id: string): Promise<void> {
 	}
 	await router.push({
 		path: `/management/registration-event-records/${id}`,
-		query: buildFilterQuery()
+		query: buildFilterQuery(String(getCurrentRouteDepth() + 1))
 	});
 }
 
 async function toCreate(): Promise<void> {
-	await router.push("/management/registration-event-records/create");
+	await router.push({
+		path: "/management/registration-event-records/create",
+		query: {
+			transitionDepth: String(getCurrentRouteDepth() + 1)
+		}
+	});
 }
 
 async function confirmRemoveRecord(record: EventRecordListItemView): Promise<void> {
@@ -428,6 +434,7 @@ function buildRangeReq(): Omit<EventRecordPage, "index" | "size"> {
 	return {
 		beginAt,
 		endAt,
+		customerId: customerId.value || undefined,
 		keyword: keyword.value.trim() || undefined,
 		eventIdList: selectedAllEvent ? undefined : actionFilter.value
 	};
@@ -458,14 +465,41 @@ function parseEventIdList(value: unknown): string[] {
 	return text.split(",").map(item => item.trim()).filter(Boolean);
 }
 
-function buildFilterQuery(): Record<string, string> {
-	return {
+function buildFilterQuery(transitionDepth = getQueryText("transitionDepth")): Record<string, string> {
+	const query = {
 		keyword: keyword.value.trim(),
 		dateType: dateFilterType.value,
 		beginAt: dateRange.value[0] || "",
 		endAt: dateRange.value[1] || "",
+		customerId: customerId.value,
+		customerName: getQueryText("customerName"),
 		eventIds: actionFilter.value.join(",")
 	};
+	if (isValidTransitionDepth(transitionDepth)) {
+		return {
+			...query,
+			transitionDepth
+		};
+	}
+	return query;
+}
+
+function getInitialKeyword(): string {
+	return getQueryText("keyword") || getQueryText("customerName");
+}
+
+function getCurrentRouteDepth(): number {
+	const transitionDepth = getQueryText("transitionDepth").trim();
+	if (isValidTransitionDepth(transitionDepth)) {
+		return Number(transitionDepth);
+	}
+
+	return Number(route.meta.depth ?? 0);
+}
+
+function isValidTransitionDepth(value: string): boolean {
+	const depth = Number(value);
+	return value !== "" && Number.isInteger(depth) && 0 <= depth && depth <= 20;
 }
 
 async function replaceFilterQuery(): Promise<void> {

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[]>([]);