update EventRecordEdit.vue style

2026-09-01 16:27:53 +08:00
parent bfea58f714
commit 9c5306d8e4
30 changed files with 583 additions and 621 deletions
@@ -50,17 +50,19 @@
 				class="event-selector"
 				:event-list="eventList"
 				:disabled="isEditMode"
+				:selection-mode="isPackagePurchaseSelected ? 'single' : 'multiple'"
 				required-mark
 				@update:model-value="handleEventSelectionChange"
 			/>
 			<event-option-selector
+				v-if="!isPackagePurchaseSelected"
 				class="option-selector"
 				v-model="selectedOptionSelectionMap"
 				:event-list="eventList"
 				:selected-event-id-list="selectedEventIdList"
 				:disabled="isSaving"
 			/>
-			<div v-if="!isEditMode && selectedNumberEventList.length" class="event-value-list">
+			<div v-if="!isEditMode && !isPackagePurchaseSelected && selectedNumberEventList.length" class="event-value-list">
 				<t-form-item
 					v-for="item in selectedNumberEventList"
 					:key="item.id"
@@ -77,6 +79,13 @@
 					/>
 				</t-form-item>
 			</div>
+			<package-purchase-form
+				v-if="isPackagePurchaseSelected"
+				v-model:item-list="packagePurchaseItemList"
+				v-model:sale-amount="saleAmountText"
+				:can-price-override="canPriceOverride"
+				:package-config="selectedPackageConfig"
+			/>
 			<t-form-item v-if="showSourceValueInput" label="积分动作">
 				<span class="picker-text" v-text="getPointActionText(sourceValueAction)" />
 			</t-form-item>
@@ -111,7 +120,7 @@
 			<t-form-item v-else label="登记时间" content-align="right">
 				<span class="readonly-time" v-text="registeredAtText || '此刻'" />
 			</t-form-item>
-			<t-form-item label="登记备注">
+			<t-form-item :label="isPackagePurchaseSelected ? '购买备注' : '登记备注'">
 				<t-textarea
 					v-model.trim="note"
 					class="textarea"
@@ -157,7 +166,7 @@
 			v-if="!isEditMode"
 			v-model="selectedCustomerIdList"
 			v-model:visible="selectorVisible"
-			:selection-mode="isEditMode ? 'single' : 'multiple'"
+			:selection-mode="isEditMode || isPackagePurchaseSelected ? 'single' : 'multiple'"
 			@change="handleCustomerChange"
 		/>
 		<t-popup v-model="selectedCustomerListVisible" placement="bottom">
@@ -201,7 +210,7 @@

 <script setup lang="ts">
 import { Time } from "timi-web";
-import { AttachmentAPI, type Attachment, useUserStore } from "timi-web-api";
+import { useUserStore } from "timi-web-api";
 import { Message } from "@/utils/message";
 import CustomerAPI from "@/api/CustomerAPI";
 import EventAPI from "@/api/EventAPI";
@@ -213,20 +222,21 @@ import CustomerSelector from "@/components/CustomerSelector.vue";
 import EventOptionSelector from "@/components/EventOptionSelector.vue";
 import PhotoScroller from "@/components/PhotoScroller.vue";
 import EventSelector from "@/components/EventSelector.vue";
+import PackagePurchaseForm from "@/pages/event/component/PackagePurchaseForm.vue";
+import { useEventRecordPhoto } from "@/pages/event/component/useEventRecordPhoto";
+import { usePackagePurchaseRecord } from "@/pages/event/component/usePackagePurchaseRecord";
 import { useNavBarStore } from "@/store/navBarStore";
 import { useSettingStore } from "@/store/settingStore";
 import type { Customer } from "@/types/Customer";
 import type { EventItem, EventOptionSelectionMap } from "@/types/EventItem";
 import type { EventRecord } from "@/types/EventRecord";
 import type { PointAction } from "@/types/Point";
-import { getAttachmentReadURL } from "@/utils/attachment";
 import { isPackagePurchaseEvent } from "@/utils/event";
 import { buildEventOptionSelectionMap, resolveSelectedOptionGroupList, validateEventOptionSelection } from "@/utils/eventOption";
 import { getEventRecordPhotoURL, hasPhotoAttachment } from "@/utils/eventRecord";
 import { getEventNumberValuePlaceholder, resolveEventNumberValue } from "@/utils/eventValue";
 import { permissionCodes } from "@/utils/permission";
 import { loadSourceValueConfig, type SourceValueConfig } from "@/utils/point";
-import { compressUploadImageList } from "@/utils/imageCompression";

 defineOptions({
 	name: "EventRecordEdit"
@@ -238,14 +248,6 @@ const settingStore = useSettingStore();
 const userStore = useUserStore();
 const navBarStore = useNavBarStore();

-type EditablePhoto = {
-	attachment?: Partial<Attachment>;
-	attachType?: string;
-	previewUrl?: string;
-	tempFileId?: string;
-	url: string;
-};
-
 // ---------- 路由权限 ----------

 const routeId = computed(() => String(route.params.id || ""));
@@ -329,10 +331,10 @@ async function loadSelectedCustomer(): Promise<void> {
 	}

 	if (customer.id) {
-		selectedCustomerIdList.value = isEditMode.value
+		selectedCustomerIdList.value = isEditMode.value || isPackagePurchaseSelected.value
 			? [customer.id]
 			: [...new Set([...selectedCustomerIdList.value, customer.id])];
-		selectedCustomerList.value = isEditMode.value
+		selectedCustomerList.value = isEditMode.value || isPackagePurchaseSelected.value
 			? [customer]
 			: [...selectedCustomerList.value.filter(item => item.id !== customer.id), customer];
 	}
@@ -436,27 +438,6 @@ const eventNameMap = computed(() => {
 	return map;
 });

-async function handleEventSelectionChange(eventIdList: string[]): Promise<void> {
-	const packageEvent = eventIdList
-		.map(eventId => eventList.value.find(item => item.id === eventId))
-		.find(item => isPackagePurchaseEvent(item));
-	if (!isEditMode.value && packageEvent?.id) {
-		if (!userStore.hasPermissions(permissionCodes.customerPackage.create)) {
-			Message.warning("当前账号没有套餐购买权限");
-			return;
-		}
-		await router.push({
-			name: "CustomerPackagePurchase",
-			query: {
-				eventId: packageEvent.id,
-				...(selectedCustomer.value?.id ? { customerId: selectedCustomer.value.id } : {})
-			}
-		});
-		return;
-	}
-	selectedEventIdList.value = eventIdList;
-}
-
 function appendRecordEvent(record: EventRecord): void {
 	if (!record.event?.id || eventList.value.some(item => item.id === record.event?.id)) {
 		return;
@@ -519,6 +500,7 @@ let sourceValueLoadToken = 0;

 const showSourceValueInput = computed(() => (
 	!isEditMode.value
+	&& !isPackagePurchaseSelected.value
 	&& userStore.hasPermissions(permissionCodes.point.sourceValue)
 	&& !!sourceValueConfig.value
 ));
@@ -531,7 +513,7 @@ async function loadSourceValueRule(): Promise<void> {
 	const token = sourceValueLoadToken + 1;
 	sourceValueLoadToken = token;
 	sourceValueConfig.value = undefined;
-	if (isEditMode.value || !userStore.hasPermissions(permissionCodes.point.sourceValue) || !selectedEventIdList.value.length) {
+	if (isEditMode.value || isPackagePurchaseSelected.value || !userStore.hasPermissions(permissionCodes.point.sourceValue) || !selectedEventIdList.value.length) {
 		return;
 	}

@@ -557,48 +539,17 @@ function getPointActionText(action: PointAction): string {

 // ---------- 照片 ----------

-const recordPhotoInputRef = ref<HTMLInputElement>();
-const photoItemList = ref<EditablePhoto[]>([]);
-const isPhotoUploading = ref(false);
-
-const photoList = computed<string[]>({
-	get() {
-		return photoItemList.value.map(item => item.url);
-	},
-	set(value) {
-		const urlSet = new Set(value);
-		photoItemList.value = photoItemList.value.filter(item => urlSet.has(item.url));
-	}
-});
-
-function capturePhoto(): void {
-	recordPhotoInputRef.value?.click();
-}
-
-async function handleRecordPhotoSelected(event: Event): Promise<void> {
-	const input = event.target as HTMLInputElement;
-	const fileList = Array.from(input.files || []);
-	if (!fileList.length) {
-		return;
-	}
-	isPhotoUploading.value = true;
-	try {
-		const compressedFileList = await compressUploadImageList(fileList);
-		const tempFileList = await AttachmentAPI.upload(compressedFileList);
-		for (const item of tempFileList) {
-			if (!item.id) {
-				continue;
-			}
-			photoItemList.value.push({
-				tempFileId: item.id,
-				url: AttachmentAPI.getTempReadURL(item.id)
-			});
-		}
-	} finally {
-		isPhotoUploading.value = false;
-		input.value = "";
-	}
-}
+const {
+	recordPhotoInputRef,
+	photoItemList,
+	isPhotoUploading,
+	photoList,
+	capturePhoto,
+	handleRecordPhotoSelected,
+	setExistingPhotoList,
+	buildTempFileIdList,
+	buildPhotoAttachmentList
+} = useEventRecordPhoto();

 // ---------- 登记时间 ----------

@@ -640,6 +591,28 @@ function parseDateTime(value: string): Date {
 // ---------- 提交 ----------

 const note = ref("");
+const {
+	selectedPackageEvent,
+	isPackagePurchaseSelected,
+	selectedPackageConfig,
+	canPriceOverride,
+	saleAmountText,
+	packagePurchaseItemList,
+	handleEventSelectionChange,
+	applySelectedPackageEvent,
+	resetPackagePurchaseForm,
+	submitPackagePurchase,
+	validatePackagePurchaseForm
+} = usePackagePurchaseRecord({
+	eventList,
+	selectedEventIdList,
+	selectedCustomerIdList,
+	selectedCustomerList,
+	note,
+	hasPermission: permissionCode => userStore.hasPermissions(permissionCode),
+	buildRegisteredAt,
+	buildTempFileIdList
+});
 const isSaving = ref(false);
 const editingRecord = ref<EventRecord>();

@@ -662,40 +635,58 @@ async function submitRecord(): Promise<void> {
 			return;
 		}

-		const customerIdList = selectedCustomerList.value.map(customer => customer.id).filter((item): item is string => !!item);
-		// 后端批量接口仍按选择顺序逐条处理，并为重复临时附件生成副本。
-		await EventRecordAPI.createBatch(selectedEventIdList.value.map(eventId => ({
-			eventId,
-			customerIdList,
-			selectedOptionGroupList: resolveRecordOptionGroupList(eventId),
-			remark: note.value || "客户现场登记",
-			registeredAt: buildRegisteredAt(),
-			pointValue: showSourceValueInput.value ? resolveSourceValue() : undefined,
-			numberValue: resolveNumberValue(eventId),
-			attachmentList: buildTempFileIdList().map(tempFileId => ({
-				tempFileId,
-				attachType: "PHOTO"
-			}))
-		})));
-		selectedCustomerList.value = [];
-		selectedCustomerIdList.value = [];
-		note.value = "";
-		pointValueText.value = "";
-		photoItemList.value = [];
-		for (const eventId of Object.keys(numberValueTextMap)) {
-			delete numberValueTextMap[eventId];
-		}
-		for (const eventId of Object.keys(selectedOptionSelectionMap)) {
-			delete selectedOptionSelectionMap[eventId];
+		const success = isPackagePurchaseSelected.value
+			? await submitPackagePurchase()
+			: await submitEventRecords();
+		if (!success) {
+			return;
 		}
+		resetCreateForm();
 		await loadRecentRecordList();
 		await settingStore.playRegisterSuccessSound();
-		Message.success("登记已提交");
+		Message.success(isPackagePurchaseSelected.value ? "套餐购买已提交" : "登记已提交");
 		await router.replace("/customers");
 	} finally {
 		isSaving.value = false;
 	}
 }
+async function submitEventRecords(): Promise<boolean> {
+	const customerIdList = selectedCustomerList.value.map(customer => customer.id).filter((item): item is string => !!item);
+	// 后端批量接口仍按选择顺序逐条处理，并为重复临时附件生成副本。
+	await EventRecordAPI.createBatch(selectedEventIdList.value.map(eventId => ({
+		eventId,
+		customerIdList,
+		selectedOptionGroupList: resolveRecordOptionGroupList(eventId),
+		remark: note.value || "客户现场登记",
+		registeredAt: buildRegisteredAt(),
+		pointValue: showSourceValueInput.value ? resolveSourceValue() : undefined,
+		numberValue: resolveNumberValue(eventId),
+		attachmentList: buildTempFileIdList().map(tempFileId => ({
+			tempFileId,
+			attachType: "PHOTO"
+		}))
+	})));
+	return true;
+}
+
+function resetCreateForm(): void {
+	selectedCustomerList.value = [];
+	selectedCustomerIdList.value = [];
+	note.value = "";
+	pointValueText.value = "";
+	photoItemList.value = [];
+	for (const eventId of Object.keys(numberValueTextMap)) {
+		delete numberValueTextMap[eventId];
+	}
+	for (const eventId of Object.keys(selectedOptionSelectionMap)) {
+		delete selectedOptionSelectionMap[eventId];
+	}
+	if (selectedPackageEvent.value) {
+		applySelectedPackageEvent(selectedPackageEvent.value);
+	} else {
+		resetPackagePurchaseForm();
+	}
+}

 function validateForm(): boolean {
 	if (!selectedCustomerList.value.some(item => !!item.id)) {
@@ -706,9 +697,8 @@ function validateForm(): boolean {
 		Message.warning("请至少选择一个登记事件");
 		return false;
 	}
-	if (selectedEventIdList.value.some(eventId => isPackagePurchaseEvent(eventList.value.find(item => item.id === eventId)))) {
-		Message.warning("套餐购买事件必须通过客户套餐购买页面登记");
-		return false;
+	if (isPackagePurchaseSelected.value) {
+		return validatePackagePurchaseForm() && validateRequiredPhotoList();
 	}
 	for (const eventId of selectedEventIdList.value) {
 		const event = eventList.value.find(item => item.id === eventId);
@@ -738,7 +728,6 @@ function validateForm(): boolean {

 	return true;
 }
-
 function validateRequiredPhotoList(): boolean {
 	const event = selectedRequiredPhotoEventList.value[0];
 	if (event && !hasPhotoAttachment(photoItemList.value)) {
@@ -766,27 +755,6 @@ async function updateRecord(): Promise<void> {
 	Message.success("记录已保存");
 	await router.replace(`/management/registration-event-records/${editingRecord.value.id}`);
 }
-
-function buildTempFileIdList(): string[] {
-	return photoItemList.value.map(item => item.tempFileId).filter((item): item is string => !!item);
-}
-
-function buildPhotoAttachmentList(): Array<Partial<Attachment>> {
-	return photoItemList.value.map((item) => {
-		if (item.attachment) {
-			return {
-				...item.attachment,
-				attachType: item.attachType || item.attachment.attachType || "PHOTO"
-			};
-		}
-
-		return {
-			tempFileId: item.tempFileId,
-			attachType: item.attachType || "PHOTO"
-		};
-	});
-}
-
 // ---------- 页面数据 ----------

 async function loadPageData(): Promise<void> {
@@ -822,14 +790,7 @@ async function loadRecordForEdit(): Promise<void> {
 	registeredAtText.value = record.registeredAt ? Time.formatDateTime(new Date(record.registeredAt)) : "";
 	note.value = record.remark || "";
 	pointValueText.value = "";
-	photoItemList.value = (record.attachmentList || [])
-		.filter(item => item.attachType === "PHOTO" || !item.attachType)
-		.filter(item => !!item.id)
-		.map(item => ({
-			attachment: item,
-			previewUrl: getAttachmentReadURL(item.id || ""),
-			url: getAttachmentReadURL(item.id || "", 90)
-		}));
+	setExistingPhotoList(record.attachmentList);
 	await loadRecentRecordList();
 }