fix require photo event

2026-08-30 01:25:10 +08:00
parent 320dab542a
commit e1a3df43a9
5 changed files with 189 additions and 32 deletions
@@ -1,6 +1,10 @@
 <template>
 	<div v-bind="$attrs" class="photo-scroller">
-		<div class="t-form__label" v-text="title" />
+		<div class="t-form__label" :class="{ required }">
+			<slot name="title">
+				<span v-text="title" />
+			</slot>
+		</div>
 		<div class="photo-shell" :class="{ 'without-add': !showAdd }">
 			<div class="items">
 				<div v-if="!displayPhotoList.length" class="empty" v-text="emptyText" />
@@ -157,6 +161,7 @@ interface Props {
 	loading?: boolean;
 	modelValue: string[];
 	photoItems?: readonly PhotoItem[];
+	required?: boolean;
 	showViewerActions?: boolean;
 	showAdd?: boolean;
 	showRemove?: boolean;
@@ -188,6 +193,7 @@ const props = withDefaults(defineProps<Props>(), {
 	editMode: false,
 	emptyText: "暂无照片",
 	loading: false,
+	required: false,
 	showAdd: true,
 	showRemove: true,
 	showViewerActions: true
@@ -412,6 +418,14 @@ function normalizePhotoItem(item: PhotoItem): PhotoItem {
 		}
 	}

+	.t-form__label {
+		&.required::before {
+			color: var(--td-error-color, #e34d59);
+			content: "*";
+			margin-right: .25rem;
+		}
+	}
+
 	.add-trigger {
 		--td-popover-padding: 0 .5rem;
 		width: 5.5rem;
@@ -114,6 +114,8 @@

 			<div class="photo-part">
 				<photo-scroller
+					title="登记事件照片"
+					:required="selectedRequiredPhotoEventList.length > 0"
 					v-model="photoList"
 					v-model:photo-items="photoItemList"
 					:edit-mode="true"
@@ -209,7 +211,7 @@ import type { EventItem } from "@/types/EventItem";
 import type { EventRecord } from "@/types/EventRecord";
 import type { PointAction } from "@/types/Point";
 import { getAttachmentReadURL } from "@/utils/attachment";
-import { getEventRecordPhotoURL } from "@/utils/eventRecord";
+import { getEventRecordPhotoURL, hasPhotoAttachment } from "@/utils/eventRecord";
 import { getEventNumberValuePlaceholder, resolveEventNumberValue } from "@/utils/eventValue";
 import { permissionCodes } from "@/utils/permission";
 import { loadSourceValueConfig, type SourceValueConfig } from "@/utils/point";
@@ -408,6 +410,9 @@ const numberValueTextMap = reactive<Record<string, string>>({});
 const selectedNumberEventList = computed(() => selectedEventIdList.value
 	.map(eventId => eventList.value.find(item => item.id === eventId))
 	.filter((item): item is EventItem => item?.valueType === "NUMBER"));
+const selectedRequiredPhotoEventList = computed(() => selectedEventIdList.value
+	.map(eventId => eventList.value.find(item => item.id === eventId))
+	.filter((item): item is EventItem => item?.requirePhoto === true));

 const eventNameMap = computed(() => {
 	const map = new Map<string, string>();
@@ -604,6 +609,10 @@ async function submitRecord(): Promise<void> {
 	if (isSaving.value) {
 		return;
 	}
+	if (isPhotoUploading.value) {
+		Message.warning("照片正在上传，请稍候");
+		return;
+	}
 	if (!validateForm()) {
 		return;
 	}
@@ -616,21 +625,19 @@ async function submitRecord(): Promise<void> {
 		}

 		const customerIdList = selectedCustomerList.value.map(customer => customer.id).filter((item): item is string => !!item);
-		// 多个事件按选择顺序逐条提交，避免把有累计积分顺序依赖的事件混入同一批次。
-		for (const eventId of selectedEventIdList.value) {
-			await EventRecordAPI.create({
-				eventId,
-				customerIdList,
-				remark: note.value || "客户现场登记",
-				registeredAt: buildRegisteredAt(),
-				pointValue: showSourceValueInput.value ? resolveSourceValue() : undefined,
-				numberValue: resolveNumberValue(eventId),
-				attachmentList: buildTempFileIdList().map(tempFileId => ({
-					tempFileId,
-					attachType: "PHOTO"
-				}))
-			});
-		}
+		// 后端批量接口仍按选择顺序逐条处理，并为重复临时附件生成副本。
+		await EventRecordAPI.createBatch(selectedEventIdList.value.map(eventId => ({
+			eventId,
+			customerIdList,
+			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 = "";
@@ -657,6 +664,9 @@ function validateForm(): boolean {
 		Message.warning("请至少选择一个登记事件");
 		return false;
 	}
+	if (!validateRequiredPhotoList()) {
+		return false;
+	}
 	if (!isEditMode.value && !validateNumberValueList()) {
 		return false;
 	}
@@ -672,6 +682,15 @@ function validateForm(): boolean {
 	return true;
 }

+function validateRequiredPhotoList(): boolean {
+	const event = selectedRequiredPhotoEventList.value[0];
+	if (event && !hasPhotoAttachment(photoItemList.value)) {
+		Message.warning(`请上传${event.name || "当前事件"}照片`);
+		return false;
+	}
+	return true;
+}
+
 async function updateRecord(): Promise<void> {
 	if (!editingRecord.value?.id || !editingRecord.value.customerId || !editingRecord.value.eventId) {
 		Message.warning("登记事件记录不存在");
@@ -109,6 +109,7 @@
 			<div class="photo-part">
 				<photo-scroller
 					title="登记事件照片"
+					:required="selectedRequiredPhotoEventList.length > 0"
 					v-model="recordPhotoList"
 					v-model:photo-items="recordPhotoItemList"
 					:edit-mode="true"
@@ -156,6 +157,7 @@ import type { EventItem } from "@/types/EventItem";
 import type { PointAction } from "@/types/Point";
 import { getEventNumberValuePlaceholder, resolveEventNumberValue } from "@/utils/eventValue";
 import { getAttachmentReadURL } from "@/utils/attachment";
+import { hasPhotoAttachment } from "@/utils/eventRecord";
 import { permissionCodes } from "@/utils/permission";
 import { loadSourceValueConfig, type SourceValueConfig } from "@/utils/point";
 import { compressUploadImage, compressUploadImageList } from "@/utils/imageCompression";
@@ -180,6 +182,9 @@ const numberValueTextMap = reactive<Record<string, string>>({});
 const selectedNumberEventList = computed(() => selectedEventIdList.value
 	.map(eventId => eventList.value.find(item => item.id === eventId))
 	.filter((item): item is EventItem => item?.valueType === "NUMBER"));
+const selectedRequiredPhotoEventList = computed(() => selectedEventIdList.value
+	.map(eventId => eventList.value.find(item => item.id === eventId))
+	.filter((item): item is EventItem => item?.requirePhoto === true));
 const pointValueText = ref("");
 const sourceValueConfig = ref<SourceValueConfig>();
 const sourceValueAction = ref<PointAction>("EARN");
@@ -674,10 +679,12 @@ async function saveRecord(): Promise<void> {
 		}
 		// 记录照片
 		if (Toolkit.isNotEmpty(customer.eventRecordList)) {
-			customer.eventRecordList![0].attachmentList = recordPhotoItemList.value.map(item => ({
-				tempFileId: item.tempFileId,
-				attachType: item.attachType || "PHOTO"
-			}));
+			for (const record of customer.eventRecordList || []) {
+				record.attachmentList = recordPhotoItemList.value.map(item => ({
+					tempFileId: item.tempFileId,
+					attachType: item.attachType || "PHOTO"
+				}));
+			}
 		}
 		await EventRecordAPI.createWithCustomer(customer);
 		resetFormAfterSubmit();
@@ -745,6 +752,9 @@ function validateForm(): string {
 	if (!validateCustomerPhotoList()) {
 		return "";
 	}
+	if (!validateRequiredPhotoList()) {
+		return "";
+	}
 	if (!validateNumberValueList()) {
 		return "";
 	}
@@ -759,6 +769,15 @@ function validateForm(): string {
 	return customerCode;
 }

+function validateRequiredPhotoList(): boolean {
+	const event = selectedRequiredPhotoEventList.value[0];
+	if (event && !hasPhotoAttachment(recordPhotoItemList.value)) {
+		Message.warning(`请上传${event.name || "当前事件"}照片`);
+		return false;
+	}
+	return true;
+}
+
 // ---------- 初始化 ----------

 onMounted(async () => {
@@ -15,6 +15,17 @@
 					<t-button size="small" theme="primary" variant="text" @click="loadActions">重试</t-button>
 				</div>
 			</div>
+			<div v-if="showRecordPhotoInput" class="input-form photo-form">
+				<photo-scroller
+					title="登记事件照片"
+					:required="selectedRequiredPhotoEventList.length > 0"
+					v-model="recordPhotoList"
+					v-model:photo-items="recordPhotoItemList"
+					:edit-mode="true"
+					:loading="recordPhotoUploading"
+					@add="capturePhoto"
+				/>
+			</div>
 			<code-scanner
 				visible
 				:session-key="scannerSessionKey"
@@ -103,6 +114,14 @@
 				</template>
 			</t-cell>
 		</t-cell-group>
+		<input
+			ref="recordPhotoInputRef"
+			class="file-input"
+			type="file"
+			accept="image/*"
+			multiple
+			@change="handleRecordPhotoSelected"
+		>
 	</div>
 </template>

@@ -113,16 +132,19 @@ import EventAPI from "@/api/EventAPI";
 import EventRecordAPI from "@/api/EventRecordAPI";
 import CodeScanner from "@/components/CodeScanner.vue";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
+import PhotoScroller from "@/components/PhotoScroller.vue";
 import { useSettingStore } from "@/store/settingStore";
 import type { Customer } from "@/types/Customer";
 import type { EventItem } from "@/types/EventItem";
 import type { EventRecord } from "@/types/EventRecord";
+import type { PhotoItem } from "@/types/Photo";
 import type { PointAction } from "@/types/Point";
 import { getEventNumberValuePlaceholder, resolveEventNumberValue } from "@/utils/eventValue";
 import { permissionCodes } from "@/utils/permission";
-import { getEventRecordPhotoURL } from "@/utils/eventRecord";
+import { getEventRecordPhotoURL, hasPhotoAttachment } from "@/utils/eventRecord";
+import { compressUploadImageList } from "@/utils/imageCompression";
 import { Storage, Time } from "timi-web";
-import { useUserStore } from "timi-web-api";
+import { AttachmentAPI, useUserStore, type Attachment } from "timi-web-api";
 import { loadSourceValueConfig, type SourceValueConfig } from "@/utils/point";
 import EventSelector from "@/components/EventSelector.vue";
 import { Space } from "timi-tdesign-mobile";
@@ -146,6 +168,7 @@ const selectedEventList = computed(() => selectedEventIdList.value
 	.map(eventId => eventList.value.find(item => normalizeEventId(item) === eventId))
 	.filter((item): item is EventItem => !!item));
 const selectedNumberEventList = computed(() => selectedEventList.value.filter(item => item.valueType === "NUMBER"));
+const selectedRequiredPhotoEventList = computed(() => selectedEventList.value.filter(item => item.requirePhoto === true));
 let sourceValueRequestNo = 0;

 function normalizeEventId(item?: EventItem): string {
@@ -347,6 +370,68 @@ function validateNumberValueList(): boolean {
 	return true;
 }

+// ---------- 照片 ----------
+
+const recordPhotoInputRef = ref<HTMLInputElement>();
+const recordPhotoItemList = ref<PhotoItem[]>([]);
+const recordPhotoUploading = ref(false);
+const showRecordPhotoInput = computed(() => selectedRequiredPhotoEventList.value.length > 0 || recordPhotoItemList.value.length > 0);
+const recordPhotoList = computed<string[]>({
+	get() {
+		return recordPhotoItemList.value.map(item => item.url);
+	},
+	set(value) {
+		const urlSet = new Set(value);
+		recordPhotoItemList.value = recordPhotoItemList.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;
+	}
+	recordPhotoUploading.value = true;
+	try {
+		const compressedFileList = await compressUploadImageList(fileList);
+		const tempFileList = await AttachmentAPI.upload(compressedFileList);
+		for (const item of tempFileList) {
+			if (!item.id) {
+				continue;
+			}
+			recordPhotoItemList.value.push({
+				tempFileId: item.id,
+				attachType: "PHOTO",
+				url: AttachmentAPI.getTempReadURL(item.id)
+			});
+		}
+	} finally {
+		recordPhotoUploading.value = false;
+		input.value = "";
+	}
+}
+
+function validateRequiredPhotoList(): boolean {
+	const event = selectedRequiredPhotoEventList.value[0];
+	if (event && !hasPhotoAttachment(recordPhotoItemList.value)) {
+		Message.warning(`请上传${event.name || "当前事件"}照片`);
+		return false;
+	}
+	return true;
+}
+
+function buildPhotoAttachmentList(): Array<Partial<Attachment>> {
+	return recordPhotoItemList.value.map(item => ({
+		tempFileId: item.tempFileId,
+		attachType: item.attachType || "PHOTO"
+	}));
+}
+
 async function doSubmit(): Promise<void> {
 	const customer = matchedCustomer.value;
 	if (!customer) {
@@ -356,6 +441,13 @@ async function doSubmit(): Promise<void> {
 		Message.warning("请至少选择一个登记事件");
 		return;
 	}
+	if (recordPhotoUploading.value) {
+		Message.warning("照片正在上传，请稍候");
+		return;
+	}
+	if (!validateRequiredPhotoList()) {
+		return;
+	}
 	if (!validateNumberValueList()) {
 		return;
 	}
@@ -367,19 +459,19 @@ async function doSubmit(): Promise<void> {
 	}
 	submitting.value = true;
 	try {
-		for (const eventId of selectedEventIdList.value) {
-			await EventRecordAPI.create({
-				eventId,
-				customerId: customer.id,
-				pointValue: showSourceValueInput.value ? pointValue : undefined,
-				numberValue: resolveNumberValue(eventId),
-				remark: "客户快速扫码登记"
-			});
-		}
+		await EventRecordAPI.createBatch(selectedEventIdList.value.map(eventId => ({
+			eventId,
+			customerId: customer.id,
+			pointValue: showSourceValueInput.value ? pointValue : undefined,
+			numberValue: resolveNumberValue(eventId),
+			remark: "客户快速扫码登记",
+			attachmentList: buildPhotoAttachmentList()
+		})));
 		scanStatus.value = `登记成功：${customer.name || customer.code || scanCode.value}。`;
 		scanCode.value = "";
 		matchedCustomer.value = undefined;
 		pointValueText.value = "";
+		recordPhotoItemList.value = [];
 		for (const eventId of Object.keys(numberValueTextMap)) {
 			delete numberValueTextMap[eventId];
 		}
@@ -421,6 +513,10 @@ async function doSubmit(): Promise<void> {
 		}
 	}

+	.file-input {
+		display: none;
+	}
+
 	.empty-block,
 	.event-load-error {
 		color: #52607a;
@@ -1,6 +1,15 @@
 import type { EventRecord } from "@/types/EventRecord";
 import { getAttachmentReadURL } from "@/utils/attachment";

+type EventRecordAttachment = {
+	attachType?: string;
+};
+
+/** 判断登记记录附件列表中是否包含照片。未指定类型时按历史默认值 PHOTO 处理。 */
+export function hasPhotoAttachment(attachmentList?: readonly EventRecordAttachment[]): boolean {
+	return !!attachmentList?.some(item => !item.attachType || item.attachType === "PHOTO");
+}
+
 export function getEventRecordPhotoURL(record?: EventRecord, thumbnailSize?: number): string {
 	const attachment = record?.attachmentList?.find(item => item.attachType === "PHOTO") || record?.attachmentList?.[0];
 	if (!attachment?.id) {