add event option

src/pages/event/EventRecordDetail.vue

@@ -33,6 +33,19 @@
 			<t-cell title="登记人" :note="Text.display(record.operator?.nick || record.operator?.name)" />
 			<t-cell title="备注" :note="Text.display(record.remark)" />
 		</t-cell-group>
+		<card-container
+			v-if="recordOptionEvent"
+			description="登记选项"
+			v-entrance-transition="140"
+		>
+			<event-option-selector
+				class="option-selector"
+				:model-value="recordOptionSelectionMap"
+				:event-list="[recordOptionEvent]"
+				:selected-event-id-list="recordOptionEventIdList"
+				readonly
+			/>
+		</card-container>
 		<t-button
 			v-if="canVerifyRecord && record?.verificationStatus === 'PENDING'"
 			class="verify-button cell-button bg-orange white"
@@ -69,7 +82,9 @@
 import { PassTimeLabel, Text } from "timi-web";
 import { useUserStore, type Attachment } from "timi-web-api";
 import EventRecordAPI from "@/api/EventRecordAPI";
+import CardContainer from "@/components/CardContainer.vue";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
+import EventOptionSelector from "@/components/EventOptionSelector.vue";
 import EventRecordVerifyDialog from "@/components/EventRecordVerifyDialog.vue";
 import PhotoScroller from "@/components/PhotoScroller.vue";
 import { useNavBarStore } from "@/store/navBarStore";
@@ -77,6 +92,7 @@ import type { EventRecord } from "@/types/EventRecord";
 import type { PhotoItem } from "@/types/Photo";
 import type { PointLedgerChangeType } from "@/types/Point";
 import { getAttachmentReadURL } from "@/utils/attachment";
+import { buildEventOptionSelectionMap } from "@/utils/eventOption";
 import { formatEventNumberValue } from "@/utils/eventValue";
 import { permissionCodes } from "@/utils/permission";
 
@@ -163,6 +179,15 @@ function getVerificationStatusText(status?: EventRecord["verificationStatus"]):
 }
 
 const pointLedgerChangeType = computed(() => record.value?.changeType || parsePointLedgerChangeType(route.query.changeType));
+const recordOptionEvent = computed(() => {
+	const event = record.value?.event;
+	return event?.id && event.optionGroupList?.some(group => group.optionList?.length) ? event : undefined;
+});
+const recordOptionEventIdList = computed(() => recordOptionEvent.value?.id ? [String(recordOptionEvent.value.id)] : []);
+const recordOptionSelectionMap = computed(() => buildEventOptionSelectionMap(
+	recordOptionEventIdList.value[0] || "",
+	record.value?.selectedOptionGroupList
+));
 
 function getPointValueText(value?: number | null, changeType?: PointLedgerChangeType): string {
 	if (value === undefined || value === null) {
@@ -322,6 +347,10 @@ onUnmounted(() => {
 		width: calc(100% - 2rem);
 		margin: 0 1rem;
 	}
+
+	.option-selector {
+		padding-left: 1rem;
+	}
 }
 
 :global(html.theme-dark) {