timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix require photo event

Browse Source
This commit is contained in:
Timi
2026-08-30 01:25:10 +08:00
parent 320dab542a
commit e1a3df43a9
5 changed files with 189 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PhotoScroller.vue
+15 -1
View File
@@ -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;
src/pages/event/EventRecordEdit.vue
+25 -6
View File
@@ -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,9 +625,8 @@ 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({
// 后端批量接口仍按选择顺序逐条处理，并为重复临时附件生成副本。
await EventRecordAPI.createBatch(selectedEventIdList.value.map(eventId => ({
eventId,
customerIdList,
remark: note.value || "客户现场登记",
@@ -629,8 +637,7 @@ async function submitRecord(): Promise<void> {
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("登记事件记录不存在");
src/pages/home/QuickEntryPage.vue
+20 -1
View File
@@ -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,11 +679,13 @@ async function saveRecord(): Promise<void> {
}
// 记录照片
if (Toolkit.isNotEmpty(customer.eventRecordList)) {
customer.eventRecordList![0].attachmentList = recordPhotoItemList.value.map(item => ({
for (const record of customer.eventRecordList || []) {
record.attachmentList = recordPhotoItemList.value.map(item => ({
tempFileId: item.tempFileId,
attachType: item.attachType || "PHOTO"
}));
}
}
await EventRecordAPI.createWithCustomer(customer);
resetFormAfterSubmit();
await settingStore.playRegisterSuccessSound();
@@ -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 () => {
src/pages/home/QuickSignInPage.vue
+103 -7
View File
@@ -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({
await EventRecordAPI.createBatch(selectedEventIdList.value.map(eventId => ({
eventId,
customerId: customer.id,
pointValue: showSourceValueInput.value ? pointValue : undefined,
numberValue: resolveNumberValue(eventId),
remark: "客户快速扫码登记"
});
}
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;
src/utils/eventRecord.ts
+9
View File
@@ -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) {