125 lines
3.0 KiB
Vue
125 lines
3.0 KiB
Vue
<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>
|