better customer photo selector
This commit is contained in:
Timi
@@ -30,6 +30,7 @@
|
||||
<template #title>
|
||||
<photo-scroller
|
||||
:model-value="photoList"
|
||||
:photo-items="photoItemList"
|
||||
:show-add="false"
|
||||
:show-remove="false"
|
||||
title="照片列表"
|
||||
@@ -227,6 +228,12 @@ const ageText = computed(() => customer.value?.age === undefined || customer.val
|
||||
const photoList = computed(() => (customer.value?.attachmentList || [])
|
||||
.filter(item => !!item.id)
|
||||
.map(item => AttachmentAPI.getReadURL(item.id || "")));
|
||||
const photoItemList = computed(() => (customer.value?.attachmentList || [])
|
||||
.filter(item => !!item.id)
|
||||
.map(item => ({
|
||||
attachType: item.attachType || "PHOTO",
|
||||
url: AttachmentAPI.getReadURL(item.id || "")
|
||||
})));
|
||||
const selectedAreas = computed<BodyAreaValue>({
|
||||
get() {
|
||||
return normalizeBodyAreaValue(customer.value?.conditioningPart);
|
||||
|
||||
@@ -52,25 +52,15 @@
|
||||
borderless
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label="照片">
|
||||
<photo-field
|
||||
v-model="photoURL"
|
||||
alt-text="客户照片"
|
||||
<t-form-item label-width="0">
|
||||
<photo-scroller
|
||||
v-model="photoList"
|
||||
:photo-items="photoItemList"
|
||||
:add-actions="photoAddActions"
|
||||
:loading="isPhotoUploading"
|
||||
:preview="false"
|
||||
@add="openPhotoPicker('photo')"
|
||||
@clear="handlePhotoClear"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label="积分卡">
|
||||
<photo-field
|
||||
v-model="pointCardURL"
|
||||
add-text="拍积分卡"
|
||||
alt-text="积分卡"
|
||||
:loading="isPointCardUploading"
|
||||
:preview="false"
|
||||
@add="openPhotoPicker('pointCard')"
|
||||
@clear="handlePointCardClear"
|
||||
@add-photo="openPhotoPicker('PHOTO')"
|
||||
@add-point-card="openPhotoPicker('POINT_CARD')"
|
||||
@add-other="openPhotoPicker('OTHER')"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label="性别">
|
||||
@@ -185,11 +175,11 @@ import CustomerAPI from "@/api/CustomerAPI";
|
||||
import BodyAreaSelector from "@/components/BodyAreaSelector.vue";
|
||||
import CodeScanner from "@/components/CodeScanner.vue";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import PhotoField from "@/components/PhotoField.vue";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import { useSettingStore } from "@/store/settingStore";
|
||||
import type { BodyAreaValue, Customer } from "@/types/Customer";
|
||||
import { createBodyAreaValue, getCustomerPhotoURL, getCustomerPointCardURL, normalizeBodyAreaValue } from "@/utils/customer";
|
||||
import type { BodyAreaValue, Customer, CustomerAttachmentType, EditableCustomerPhoto } from "@/types/Customer";
|
||||
import { createBodyAreaValue, normalizeBodyAreaValue } from "@/utils/customer";
|
||||
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
||||
import { compressUploadImage } from "@/utils/imageCompression";
|
||||
|
||||
@@ -287,22 +277,43 @@ async function handleIntroducerChange(id: string): Promise<void> {
|
||||
// ---------- 表单 ----------
|
||||
|
||||
const photoInputRef = ref<HTMLInputElement>();
|
||||
type PhotoPickerTarget = "photo" | "pointCard";
|
||||
const photoPickerTarget = ref<PhotoPickerTarget>("photo");
|
||||
const photoTempFileId = ref("");
|
||||
const photoAddActions = [
|
||||
{
|
||||
icon: "user-avatar",
|
||||
text: "拍照片",
|
||||
emit: "add-photo",
|
||||
theme: "primary"
|
||||
},
|
||||
{
|
||||
icon: "cardmembership",
|
||||
text: "拍积分卡",
|
||||
emit: "add-point-card",
|
||||
theme: "primary"
|
||||
},
|
||||
{
|
||||
icon: "file-attachment",
|
||||
text: "其他文件",
|
||||
emit: "add-other",
|
||||
theme: "default"
|
||||
}
|
||||
] as const;
|
||||
const photoPickerTarget = ref<CustomerAttachmentType>("PHOTO");
|
||||
const isPhotoUploading = ref(false);
|
||||
const photoURL = ref();
|
||||
const pointCardTempFileId = ref("");
|
||||
const isPointCardUploading = ref(false);
|
||||
const pointCardURL = ref("");
|
||||
const originalAttachmentList = ref<Attachment[]>([]);
|
||||
const photoChanged = ref(false);
|
||||
const pointCardChanged = ref(false);
|
||||
const photoItemList = ref<EditableCustomerPhoto[]>([]);
|
||||
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));
|
||||
}
|
||||
});
|
||||
const selectedAreas = ref<BodyAreaValue>(createBodyAreaValue());
|
||||
const formData = reactive<Customer>({
|
||||
});
|
||||
|
||||
function openPhotoPicker(target: PhotoPickerTarget): void {
|
||||
function openPhotoPicker(target: CustomerAttachmentType): void {
|
||||
photoPickerTarget.value = target;
|
||||
photoInputRef.value?.click();
|
||||
}
|
||||
@@ -369,13 +380,13 @@ async function loadDetail() {
|
||||
const customer = await CustomerAPI.detail(id);
|
||||
Object.assign(formData, customer);
|
||||
formData.storeId = customer.storeId || formData.storeId;
|
||||
photoURL.value = getCustomerPhotoURL(customer);
|
||||
pointCardURL.value = getCustomerPointCardURL(customer);
|
||||
originalAttachmentList.value = [...(customer.attachmentList || [])];
|
||||
photoTempFileId.value = "";
|
||||
pointCardTempFileId.value = "";
|
||||
photoChanged.value = false;
|
||||
pointCardChanged.value = false;
|
||||
photoItemList.value = (customer.attachmentList || [])
|
||||
.filter(item => !!item.id)
|
||||
.map(item => ({
|
||||
attachment: item,
|
||||
attachType: normalizeAttachmentType(item.attachType),
|
||||
url: AttachmentAPI.getReadURL(item.id || "")
|
||||
}));
|
||||
selectedAreas.value = normalizeBodyAreaValue(customer.conditioningPart);
|
||||
introducerCustomerId.value = customer.introducerCustomerId || customer.introducerCustomer?.id || "";
|
||||
} catch (err) {
|
||||
@@ -409,50 +420,37 @@ watch(() => formData.birthdate, (value) => {
|
||||
|
||||
// ---------- 照片 ----------
|
||||
|
||||
function normalizeAttachmentType(attachType?: string): CustomerAttachmentType {
|
||||
if (attachType === "POINT_CARD" || attachType === "OTHER") {
|
||||
return attachType;
|
||||
}
|
||||
|
||||
return "PHOTO";
|
||||
}
|
||||
|
||||
async function handlePhotoSelected(event: Event): Promise<void> {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
const isPointCard = photoPickerTarget.value === "pointCard";
|
||||
if (isPointCard) {
|
||||
isPointCardUploading.value = true;
|
||||
} else {
|
||||
isPhotoUploading.value = true;
|
||||
}
|
||||
isPhotoUploading.value = true;
|
||||
try {
|
||||
const compressedFile = await compressUploadImage(file);
|
||||
const [tempFile] = await AttachmentAPI.upload(compressedFile);
|
||||
if (isPointCard) {
|
||||
pointCardTempFileId.value = tempFile.id;
|
||||
pointCardURL.value = AttachmentAPI.getTempReadURL(tempFile.id);
|
||||
pointCardChanged.value = true;
|
||||
} else {
|
||||
photoTempFileId.value = tempFile.id;
|
||||
photoURL.value = AttachmentAPI.getTempReadURL(tempFile.id);
|
||||
photoChanged.value = true;
|
||||
if (tempFile?.id) {
|
||||
photoItemList.value.push({
|
||||
attachType: photoPickerTarget.value,
|
||||
tempFileId: tempFile.id,
|
||||
url: AttachmentAPI.getTempReadURL(tempFile.id)
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
if (isPointCard) {
|
||||
isPointCardUploading.value = false;
|
||||
} else {
|
||||
isPhotoUploading.value = false;
|
||||
}
|
||||
isPhotoUploading.value = false;
|
||||
input.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
function handlePhotoClear(): void {
|
||||
photoTempFileId.value = "";
|
||||
photoChanged.value = true;
|
||||
}
|
||||
|
||||
function handlePointCardClear(): void {
|
||||
pointCardTempFileId.value = "";
|
||||
pointCardChanged.value = true;
|
||||
}
|
||||
|
||||
// ---------- 保存 ----------
|
||||
|
||||
const isSubmitting = ref(false);
|
||||
@@ -493,19 +491,18 @@ async function doSubmit(): Promise<void> {
|
||||
}
|
||||
|
||||
function buildAttachmentList(): Attachment[] {
|
||||
let attachmentList = [...originalAttachmentList.value];
|
||||
if (photoChanged.value) {
|
||||
attachmentList = replaceAttachment(attachmentList, "PHOTO", photoTempFileId.value);
|
||||
}
|
||||
if (pointCardChanged.value) {
|
||||
attachmentList = replaceAttachment(attachmentList, "POINT_CARD", pointCardTempFileId.value);
|
||||
}
|
||||
return attachmentList;
|
||||
}
|
||||
|
||||
function replaceAttachment(attachmentList: Attachment[], attachType: "PHOTO" | "POINT_CARD", tempFileId: string): Attachment[] {
|
||||
const preservedList = attachmentList.filter(item => item.attachType !== attachType);
|
||||
return tempFileId ? [...preservedList, { attachType, tempFileId }] : preservedList;
|
||||
return photoItemList.value.flatMap(item => {
|
||||
if (item.attachment) {
|
||||
return [item.attachment];
|
||||
}
|
||||
if (item.tempFileId) {
|
||||
return [{
|
||||
attachType: item.attachType,
|
||||
tempFileId: item.tempFileId
|
||||
}];
|
||||
}
|
||||
return [];
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user