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>
|
||||
|
||||
|
||||
@@ -48,14 +48,16 @@
|
||||
</template>
|
||||
</t-input>
|
||||
</t-form-item>
|
||||
<t-form-item label="客户照片">
|
||||
<photo-field
|
||||
v-model="customerPhoto"
|
||||
alt-text="客户照片"
|
||||
<t-form-item label-width="0">
|
||||
<photo-scroller
|
||||
title="客户照片列表"
|
||||
v-model="customerPhotoList"
|
||||
:photo-items="customerPhotoItemList"
|
||||
:add-actions="customerPhotoAddActions"
|
||||
:loading="customerPhotoUploading"
|
||||
:preview="false"
|
||||
@add="openCustomerPhotoPicker"
|
||||
@clear="customerPhotoTempFileId = ''"
|
||||
@add-photo="openCustomerPhotoPicker('PHOTO')"
|
||||
@add-point-card="openCustomerPhotoPicker('POINT_CARD')"
|
||||
@add-other="openCustomerPhotoPicker('OTHER')"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label-width="0">
|
||||
@@ -134,20 +136,18 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { AttachmentAPI, Toolkit, useUserStore } from "timi-web";
|
||||
import { AttachmentAPI, Toolkit, useUserStore, type Attachment } from "timi-web";
|
||||
import type { TdInputProps } from "tdesign-mobile-vue";
|
||||
import { Toast } from "tdesign-mobile-vue";
|
||||
import CustomerAPI from "@/api/CustomerAPI";
|
||||
import EventAPI from "@/api/EventAPI";
|
||||
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 { useSettingStore } from "@/store/settingStore";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import type { EventItem } from "@/types/EventItem";
|
||||
import type { PointAction } from "@/types/Point";
|
||||
import { getCustomerPhotoURL } from "@/utils/customer";
|
||||
import { getEventNumberValuePlaceholder, resolveEventNumberValue } from "@/utils/eventValue";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
import { loadSourceValueConfig, type SourceValueConfig } from "@/utils/point";
|
||||
@@ -254,6 +254,14 @@ type QuickPhoto = {
|
||||
url: string;
|
||||
};
|
||||
|
||||
type CustomerAttachmentType = "PHOTO" | "POINT_CARD" | "OTHER";
|
||||
type QuickCustomerPhoto = {
|
||||
attachment?: Attachment;
|
||||
attachType: CustomerAttachmentType;
|
||||
tempFileId?: string;
|
||||
url: string;
|
||||
};
|
||||
|
||||
// ---------- 扫码 ----------
|
||||
const scanCode = ref("");
|
||||
const currentCode = ref("");
|
||||
@@ -474,18 +482,61 @@ function getCustomerName(customer?: Customer): string {
|
||||
}
|
||||
|
||||
// ---------- 客户照片 ----------
|
||||
const customerPhoto = ref("");
|
||||
const customerPhotoTempFileId = ref("");
|
||||
const customerPhotoAddActions = [
|
||||
{
|
||||
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 customerPhotoItemList = ref<QuickCustomerPhoto[]>([]);
|
||||
const customerPhotoInputRef = ref<HTMLInputElement>();
|
||||
const customerPhotoUploading = ref(false);
|
||||
const customerPhotoPickerTarget = ref<CustomerAttachmentType>("PHOTO");
|
||||
const customerPhotoList = computed<string[]>({
|
||||
get() {
|
||||
return customerPhotoItemList.value.map(item => item.url);
|
||||
},
|
||||
set(value) {
|
||||
const urlSet = new Set(value);
|
||||
customerPhotoItemList.value = customerPhotoItemList.value.filter(item => urlSet.has(item.url));
|
||||
}
|
||||
});
|
||||
|
||||
function openCustomerPhotoPicker(): void {
|
||||
function openCustomerPhotoPicker(target: CustomerAttachmentType): void {
|
||||
customerPhotoPickerTarget.value = target;
|
||||
customerPhotoInputRef.value?.click();
|
||||
}
|
||||
|
||||
function syncCustomerPhoto(customer?: Customer): void {
|
||||
customerPhotoTempFileId.value = "";
|
||||
customerPhoto.value = getCustomerPhotoURL(customer);
|
||||
customerPhotoItemList.value = (customer?.attachmentList || [])
|
||||
.filter(item => !!item.id)
|
||||
.map(item => ({
|
||||
attachment: item,
|
||||
attachType: normalizeCustomerAttachmentType(item.attachType),
|
||||
url: AttachmentAPI.getReadURL(item.id || "")
|
||||
}));
|
||||
}
|
||||
|
||||
function normalizeCustomerAttachmentType(attachType?: string): CustomerAttachmentType {
|
||||
if (attachType === "POINT_CARD" || attachType === "OTHER") {
|
||||
return attachType;
|
||||
}
|
||||
|
||||
return "PHOTO";
|
||||
}
|
||||
|
||||
async function handleCustomerPhotoSelected(event: Event): Promise<void> {
|
||||
@@ -502,8 +553,11 @@ async function handleCustomerPhotoSelected(event: Event): Promise<void> {
|
||||
showToast("客户照片上传失败", "warning");
|
||||
return;
|
||||
}
|
||||
customerPhotoTempFileId.value = tempFile.id;
|
||||
customerPhoto.value = AttachmentAPI.getTempReadURL(tempFile.id);
|
||||
customerPhotoItemList.value.push({
|
||||
attachType: customerPhotoPickerTarget.value,
|
||||
tempFileId: tempFile.id,
|
||||
url: AttachmentAPI.getTempReadURL(tempFile.id)
|
||||
});
|
||||
} finally {
|
||||
customerPhotoUploading.value = false;
|
||||
input.value = "";
|
||||
@@ -579,11 +633,9 @@ async function saveRecord(): Promise<void> {
|
||||
}))
|
||||
};
|
||||
// 客户照片
|
||||
if (customerPhotoTempFileId.value) {
|
||||
customer.attachmentList = [{
|
||||
tempFileId: customerPhotoTempFileId.value,
|
||||
attachType: "PHOTO"
|
||||
}];
|
||||
const customerAttachmentList = buildCustomerAttachmentList();
|
||||
if (customerAttachmentList.length) {
|
||||
customer.attachmentList = customerAttachmentList;
|
||||
}
|
||||
// 记录照片
|
||||
if (Toolkit.isNotEmpty(customer.eventRecordList)) {
|
||||
@@ -618,9 +670,8 @@ function resetFormAfterSubmit(): void {
|
||||
selectedCustomerId.value = "";
|
||||
currentCustomer.value = undefined;
|
||||
boundCodeCustomer.value = undefined;
|
||||
customerPhoto.value = "";
|
||||
customerPhotoTempFileId.value = "";
|
||||
recordPhotoItemList.value = [];
|
||||
customerPhotoItemList.value = [];
|
||||
recordPhotoItemList.value = [];
|
||||
pointValueText.value = "";
|
||||
for (const eventId of Object.keys(numberValueTextMap)) {
|
||||
delete numberValueTextMap[eventId];
|
||||
@@ -628,6 +679,21 @@ function resetFormAfterSubmit(): void {
|
||||
refreshInputTips();
|
||||
}
|
||||
|
||||
function buildCustomerAttachmentList(): Attachment[] {
|
||||
return customerPhotoItemList.value.flatMap(item => {
|
||||
if (item.attachment) {
|
||||
return [item.attachment];
|
||||
}
|
||||
if (item.tempFileId) {
|
||||
return [{
|
||||
attachType: item.attachType,
|
||||
tempFileId: item.tempFileId
|
||||
}];
|
||||
}
|
||||
return [];
|
||||
});
|
||||
}
|
||||
|
||||
function validateForm(): string {
|
||||
const customerCode = (currentCode.value || scanCode.value).trim();
|
||||
if (!customerCode) {
|
||||
|
||||
Reference in New Issue
Block a user