refactor event

This commit is contained in:
Timi
2026-08-06 20:53:22 +08:00
parent 1243068fc3
commit 9df6dfaf59
37 changed files with 1584 additions and 2316 deletions
+144 -114
View File
@@ -50,12 +50,12 @@
</t-form-item>
<t-form-item label="客户照片">
<photo-field
v-model="supplementPhoto"
v-model="customerPhoto"
alt-text="客户照片"
:loading="supplementPhotoUploading"
:loading="customerPhotoUploading"
:preview="false"
@add="selectSupplementPhoto"
@clear="clearSupplementPhoto"
@add="customerPhotoInputRef?.click"
@clear="customerPhotoTempFileId = ''"
/>
</t-form-item>
<t-form-item label-width="0">
@@ -76,18 +76,18 @@
<div class="photo-part">
<photo-scroller
title="登记事件照片"
v-model="photoList"
v-model="recordPhotoList"
:loading="recordPhotoUploading"
@add="selectRecordPhoto"
@add="recordPhotoInputRef?.click"
/>
</div>
</t-form>
<input
ref="supplementPhotoInputRef"
ref="customerPhotoInputRef"
class="file-input"
type="file"
accept="image/*"
@change="handleSupplementPhotoSelected"
@change="handleCustomerPhotoSelected"
>
<input
ref="recordPhotoInputRef"
@@ -107,7 +107,7 @@
</template>
<script setup lang="ts">
import { AttachmentAPI } from "timi-web";
import { AttachmentAPI, Toolkit } from "timi-web";
import type { TdInputProps } from "tdesign-mobile-vue";
import { Toast } from "tdesign-mobile-vue";
import CustomerAPI from "@/api/CustomerAPI";
@@ -123,6 +123,7 @@ import { getCustomerPhotoURL } from "@/utils/customer";
import { permissionCodes } from "@/utils/permission";
import { compressUploadImage, compressUploadImageList } from "@/utils/imageCompression";
import EventSelector from "@/components/EventSelector.vue";
import EventRecordAPI from "@/api/EventRecordAPI.ts";
defineOptions({
name: "QuickEntryPage"
@@ -130,21 +131,25 @@ defineOptions({
const settingStore = useSettingStore();
const router = useRouter();
const supplementPhoto = ref("");
const supplementPhotoTempFileId = ref("");
const supplementPhotoInputRef = ref<HTMLInputElement>();
const recordPhotoInputRef = ref<HTMLInputElement>();
const recordPhotoTempFileIdList = ref<string[]>([]);
const supplementPhotoUploading = ref(false);
const recordPhotoUploading = ref(false);
const eventList = ref<EventItem[]>([]);
const selectedEventIdList = ref<string[]>([]);
const note = ref("");
const photoList = ref<string[]>([]);
const saving = ref(false);
const canSubmit = computed(() => !!getInputCode() && !!customerName.value.trim());
const canSubmit = computed(() => !!inputCode.value && !!customerName.value.trim() && !customerPhotoUploading.value && !recordPhotoUploading.value);
let latestDecodedText = "";
const inputCode = computed(() => currentCode.value || scanCode.value || "");
type QuickPhoto = {
tempFileId: string;
url: string;
};
// ---------- 扫码 ----------
const scanCode = ref("");
const currentCode = ref("");
@@ -152,7 +157,6 @@ const scanResult = ref("");
const scanStatus = ref<TdInputProps["status"]>("warning");
const scannerVisible = ref(false);
const scannerTips = ref("");
const checkedCode = ref("");
const boundCodeCustomer = ref<Customer>();
async function toggleScanner(): Promise<void> {
@@ -195,7 +199,13 @@ const customerTips = ref("");
const customerStatus = ref<TdInputProps["status"]>("warning");
const selectorVisible = ref(false);
const selectedCustomerId = ref("");
const checkedCode = ref("");
/**
* 检验新客户编码
*
* @param code
*/
async function ensureNewCustomerCode(code: string): Promise<boolean> {
await checkCustomerCode(code);
applyBoundCustomerIfNeeded();
@@ -203,18 +213,34 @@ async function ensureNewCustomerCode(code: string): Promise<boolean> {
return !isCodeBoundToOtherCustomer();
}
// 检验编码
async function ensureCodeChecked(): Promise<void> {
const code = inputCode.value;
if (!code || checkedCode.value === code) {
return;
}
// 检验编码客户
await checkCustomerCode(code);
}
/**
* 选择客户
*
* @param id 客户 ID
*/
async function handleCustomerChange(id: string): Promise<void> {
const customer = await CustomerAPI.detail(id);
currentCustomer.value = customer;
selectedCustomerId.value = customer.id || "";
customerName.value = customer.name || "";
syncSupplementPhotoFromCustomer(customer);
syncCustomerPhoto(customer);
customerTips.value = "";
if (!getInputCode() && customer.code) {
if (!inputCode.value && customer.code) {
// 补充编码
fillCodeFromCustomer(customer);
return;
}
if (getInputCode()) {
if (inputCode.value) {
await ensureCodeChecked();
}
refreshInputTips();
@@ -229,7 +255,7 @@ async function applyCustomerName(): Promise<void> {
refreshInputTips();
return;
}
const matched = await findCustomerByName(normalizedName);
const matched = await CustomerAPI.findByName(normalizedName) || undefined;
if (!matched) {
currentCustomer.value = undefined;
selectedCustomerId.value = "";
@@ -240,30 +266,30 @@ async function applyCustomerName(): Promise<void> {
currentCustomer.value = matched;
selectedCustomerId.value = matched.id || "";
customerName.value = matched.name || normalizedName;
syncSupplementPhotoFromCustomer(matched);
syncCustomerPhoto(matched);
customerTips.value = "已匹配客户";
if (!getInputCode() && matched.code) {
if (!inputCode.value && matched.code) {
fillCodeFromCustomer(matched);
return;
}
if (getInputCode()) {
if (inputCode.value) {
await ensureCodeChecked();
}
refreshInputTips();
}
async function findCustomerByName(name: string): Promise<Customer | undefined> {
const list = await CustomerAPI.search({ keyword: name });
return list.find(item => item.name?.trim() === name);
}
/**
* 补充客户编码
*
* @param customer 客户
*/
function fillCodeFromCustomer(customer: Customer): void {
const code = customer.code || "";
if (!code) {
// 未绑定编码
refreshInputTips();
return;
}
scanCode.value = code;
currentCode.value = code;
checkedCode.value = code;
@@ -271,15 +297,11 @@ function fillCodeFromCustomer(customer: Customer): void {
refreshInputTips();
}
async function ensureCodeChecked(): Promise<void> {
const code = getInputCode();
if (!code || checkedCode.value === code) {
return;
}
await checkCustomerCode(code);
}
/**
* 检验编码
*
* @param code 编码
*/
async function checkCustomerCode(code: string): Promise<void> {
const normalizedCode = code.trim();
if (!normalizedCode) {
@@ -288,9 +310,8 @@ async function checkCustomerCode(code: string): Promise<void> {
refreshInputTips();
return;
}
checkedCode.value = normalizedCode;
boundCodeCustomer.value = await CustomerAPI.nullableDetailByCode(normalizedCode) || undefined;
boundCodeCustomer.value = await CustomerAPI.findByCode(normalizedCode) || undefined;
scannerVisible.value = false;
}
@@ -303,41 +324,36 @@ function applyBoundCustomerIfNeeded(): void {
currentCustomer.value = boundCustomer;
selectedCustomerId.value = boundCustomer.id;
customerName.value = boundCustomer.name || "";
syncSupplementPhotoFromCustomer(boundCustomer);
syncCustomerPhoto(boundCustomer);
customerTips.value = "";
}
// 刷新提示
function refreshInputTips(): void {
scanStatus.value = "warning";
customerStatus.value = "warning";
const code = getInputCode();
const code = inputCode.value;
if (!code) {
scanResult.value = "";
return;
}
if (checkedCode.value !== code) {
scanResult.value = "";
return;
}
if (isCodeBoundToOtherCustomer()) {
scanResult.value = `编码已绑定客户 ${getCustomerName(boundCodeCustomer.value)},请使用新的编码`;
return;
}
if (boundCodeCustomer.value?.id) {
scanResult.value = "";
return;
}
if (currentCustomer.value?.code && currentCustomer.value.code !== code) {
scanResult.value = `客户已有编码 ${currentCustomer.value.code},将会替换新的编码`;
scanStatus.value = "error";
return;
}
scanResult.value = currentCustomer.value?.id ? "提交将会使用此编码" : "编码可用";
}
@@ -346,58 +362,59 @@ function isCodeBoundToOtherCustomer(): boolean {
if (!boundCustomerId) {
return false;
}
return currentCustomer.value?.id !== boundCustomerId;
}
function getInputCode(): string {
return (currentCode.value || scanCode.value).trim();
}
function getCustomerName(customer?: Customer): string {
return customer?.name || customer?.code || "未命名客户";
}
// ---------- 照片 ----------
// ---------- 客户照片 ----------
const customerPhoto = ref("");
const customerPhotoTempFileId = ref("");
const customerPhotoInputRef = ref<HTMLInputElement>();
const customerPhotoUploading = ref(false);
function selectSupplementPhoto(): void {
supplementPhotoInputRef.value?.click();
function syncCustomerPhoto(customer?: Customer): void {
customerPhotoTempFileId.value = "";
customerPhoto.value = getCustomerPhotoURL(customer);
}
function clearSupplementPhoto(): void {
supplementPhotoTempFileId.value = "";
}
function syncSupplementPhotoFromCustomer(customer?: Customer): void {
supplementPhotoTempFileId.value = "";
supplementPhoto.value = getCustomerPhotoURL(customer);
}
async function handleSupplementPhotoSelected(event: Event): Promise<void> {
async function handleCustomerPhotoSelected(event: Event): Promise<void> {
const input = event.target as HTMLInputElement;
const file = input.files?.[0];
if (!file) {
return;
}
supplementPhotoUploading.value = true;
customerPhotoUploading.value = true;
try {
const compressedFile = await compressUploadImage(file);
const [tempFile] = await AttachmentAPI.uploadTemp(compressedFile);
const [tempFile] = await AttachmentAPI.upload(compressedFile);
if (!tempFile?.id) {
showToast("客户照片上传失败", "warning");
return;
}
supplementPhotoTempFileId.value = tempFile.id;
supplementPhoto.value = AttachmentAPI.getTempReadURL(tempFile.id);
customerPhotoTempFileId.value = tempFile.id;
customerPhoto.value = AttachmentAPI.getTempReadURL(tempFile.id);
} finally {
supplementPhotoUploading.value = false;
customerPhotoUploading.value = false;
input.value = "";
}
}
function selectRecordPhoto(): void {
recordPhotoInputRef.value?.click();
}
// ---------- 记录照片 ----------
const recordPhotoInputRef = ref<HTMLInputElement>();
const recordPhotoUploading = ref(false);
const recordPhotoItemList = ref<QuickPhoto[]>([]);
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));
}
});
async function handleRecordPhotoSelected(event: Event): Promise<void> {
const input = event.target as HTMLInputElement;
@@ -408,13 +425,16 @@ async function handleRecordPhotoSelected(event: Event): Promise<void> {
recordPhotoUploading.value = true;
try {
const compressedFileList = await compressUploadImageList(fileList);
const tempFileList = await AttachmentAPI.uploadTemp(compressedFileList);
for (const item of tempFileList) {
if (!item.id) {
const tempFileList = await AttachmentAPI.upload(compressedFileList);
for (let i = 0; i < tempFileList.length; i++) {
const tempFile = tempFileList[i];
if (!tempFile.id) {
continue;
}
recordPhotoTempFileIdList.value.push(item.id);
photoList.value.push(AttachmentAPI.getTempReadURL(item.id));
recordPhotoItemList.value.push({
tempFileId: tempFile.id,
url: AttachmentAPI.getTempReadURL(tempFile.id)
});
}
} finally {
recordPhotoUploading.value = false;
@@ -429,28 +449,37 @@ async function saveRecord(): Promise<void> {
if (!customerCode) {
return;
}
saving.value = true;
try {
await ensureCustomerMatched();
if (!await ensureNewCustomerCode(customerCode)) {
return;
}
await applyCustomerName();
await saveCustomerProfile(customerCode);
if (selectedEventIdList.value.length) {
for (const eventId of selectedEventIdList.value) {
await CustomerAPI.quickRegister({
customerCode,
eventId,
remark: note.value || "前台快速登记",
attachmentIdList: recordPhotoTempFileIdList.value
});
}
const customer: Customer = {
id: currentCustomer.value?.id,
code: customerCode,
name: customerName.value.trim(),
eventRecordList: selectedEventIdList.value.map(eventId => ({
eventId,
remark: note.value || "快速补录登记"
}))
};
// 客户照片
if (customerPhotoTempFileId.value) {
customer.attachmentList = [{
tempFileId: customerPhotoTempFileId.value,
attachType: "PHOTO"
}];
}
note.value = "";
customerName.value = "";
photoList.value = [];
recordPhotoTempFileIdList.value = [];
// 记录照片
if (Toolkit.isNotEmpty(customer.eventRecordList)) {
customer.eventRecordList![0].attachmentList = recordPhotoItemList.value.map(item => ({
tempFileId: item.tempFileId,
attachType: "PHOTO"
}));
}
await EventRecordAPI.createWithCustomer(customer);
resetFormAfterSubmit();
await settingStore.playRegisterSuccessSound();
showToast("登记已提交");
await router.replace("/customers");
@@ -459,24 +488,26 @@ async function saveRecord(): Promise<void> {
}
}
async function saveCustomerProfile(customerCode: string): Promise<void> {
const normalizedName = customerName.value.trim();
const attachmentIdList = supplementPhotoTempFileId.value ? [supplementPhotoTempFileId.value] : undefined;
async function ensureCustomerMatched(): Promise<void> {
if (currentCustomer.value?.id) {
await CustomerAPI.update({
...currentCustomer.value,
code: customerCode,
name: normalizedName,
attachmentIdList
});
return;
}
currentCustomer.value = await CustomerAPI.create({
code: customerCode,
name: normalizedName,
attachmentIdList
});
await applyCustomerName();
}
function resetFormAfterSubmit(): void {
note.value = "";
scanCode.value = "";
currentCode.value = "";
customerName.value = "";
selectedCustomerId.value = "";
currentCustomer.value = undefined;
boundCodeCustomer.value = undefined;
customerPhoto.value = "";
customerPhotoTempFileId.value = "";
recordPhotoItemList.value = [];
refreshInputTips();
}
function validateForm(): string {
@@ -489,7 +520,6 @@ function validateForm(): string {
showToast("请填写客户姓名", "warning");
return "";
}
return customerCode;
}
@@ -504,7 +534,7 @@ function showToast(message: string, theme: "success" | "warning" = "success"): v
// ---------- 初始化 ----------
onMounted(async () => {
eventList.value = await EventAPI.enabledList();
eventList.value = await EventAPI.listValid();
});
watch(scanCode, (value) => {
+76 -153
View File
@@ -25,18 +25,18 @@
<t-cell
v-for="item in recentRecordList"
:key="item.id"
:title="getRecordEventName(item)"
:description="formatTime(item.registeredAt)"
:title="item.event?.name || '未知事件'"
:description="Time.toPassedDateTime(item.registeredAt)"
:note="item.remark || '无备注'"
arrow
hover
@click="goRecordDetail(item.id || '')"
@click="toRecordDetail(item.id || '')"
>
<template #leftIcon>
<t-image
v-if="getRecordPhotoURL(item)"
:src="getRecordPhotoURL(item)"
:alt="getRecordEventName(item)"
v-if="getEventRecordPhotoURL(item)"
:src="getEventRecordPhotoURL(item)"
:alt="item.event?.name || '未知事件'"
fit="cover"
class="record-photo"
/>
@@ -48,7 +48,7 @@
theme="primary"
:disabled="!canSubmitRegister"
:loading="submitting"
@click="submitRegister"
@click="doSubmit"
>登记</t-button>
</div>
<t-popup v-model="eventSelectorVisible" placement="bottom">
@@ -60,7 +60,7 @@
:key="item.id"
:title="item.name"
:note="item.id === selectedEventId ? '当前使用' : ''"
@click="selectEvent(item.id || '')"
@click="selectEvent(item.id)"
/>
</t-cell-group>
<div v-else class="empty-block">暂无可用登记事件</div>
@@ -81,72 +81,116 @@ import type { EventItem } from "@/types/EventItem";
import type { EventRecord } from "@/types/EventRecord";
import { permissionCodes } from "@/utils/permission";
import { getEventRecordPhotoURL } from "@/utils/eventRecord";
import { Time } from "timi-web";
import { Storage, Time } from "timi-web";
defineOptions({
name: "QuickSignInPage"
});
const router = useRouter();
const EventItemStorageKey = "quick-scan-registration-event-id";
const settingStore = useSettingStore();
const scanCode = ref("");
const scanStatus = ref("正在启动扫码预览。");
const scannerSessionKey = ref(0);
const matchedCustomer = ref<Customer>();
const recentRecordList = ref<EventRecord[]>([]);
const eventList = ref<EventItem[]>([]);
const selectedEventId = ref("");
const eventSelectorVisible = ref(false);
const submitting = ref(false);
let latestDecodedText = "";
// ---------- 登记事件 ----------
const EventItemStorageKey = "quick-scan-event-id";
const eventSelectorVisible = ref(false);
const selectedEventId = ref("");
const eventList = ref<EventItem[]>([]);
const selectedEventName = computed(() => eventList.value.find(item => item.id === selectedEventId.value)?.name || "请选择登记事件");
const canSubmitRegister = computed(() => !!matchedCustomer.value && !!selectedEventId.value);
async function loadActions(): Promise<void> {
eventList.value = await EventAPI.listValid();
const storedEventId = Storage.getString(EventItemStorageKey);
const storedAction = eventList.value.find(item => item.id === storedEventId);
selectedEventId.value = storedAction?.id || eventList.value[0]?.id || "";
if (selectedEventId.value) {
Storage.setString(EventItemStorageKey, selectedEventId);
}
}
function selectEvent(eventId?: string): void {
if (!eventId) {
return;
}
selectedEventId.value = eventId;
Storage.setString(EventItemStorageKey, selectedEventId);
eventSelectorVisible.value = false;
Toast.success("登记事件已切换");
}
onMounted(loadActions);
// ---------- 扫码 ----------
const scanCode = ref("");
const scanStatus = ref("正在启动扫码预览");
const scannerSessionKey = ref(0);
const matchedCustomer = ref<Customer>();
let latestDecodedText = "";
async function handleDecodedText(rawText: string): Promise<void> {
const normalizedText = rawText.trim();
if (!normalizedText || normalizedText === latestDecodedText) {
return;
}
latestDecodedText = normalizedText;
scanCode.value = normalizedText;
await settingStore.playScanSuccessSound();
await loadCustomer(normalizedText);
if (matchedCustomer.value) {
scanStatus.value = `已识别 ${normalizedText},可直接登记。`;
scanStatus.value = `已识别 ${normalizedText},可直接登记`;
return;
}
scanStatus.value = `已识别 ${normalizedText},但未匹配客户档案。`;
scanStatus.value = `已识别 ${normalizedText},但未匹配客户档案`;
}
function handleScanStatusChange(value: string): void {
scanStatus.value = value;
}
// ---------- 提交 ----------
// ---------- 读取客户 ----------
async function submitRegister(): Promise<void> {
if (!validateForm()) {
const recentRecordList = ref<EventRecord[]>([]);
async function loadCustomer(code: string): Promise<void> {
const customer = await CustomerAPI.findByCode(code);
if (!customer) {
matchedCustomer.value = undefined;
recentRecordList.value = [];
return;
}
matchedCustomer.value = customer;
recentRecordList.value = (await EventRecordAPI.list({
index: 0,
size: 5,
customerId: matchedCustomer.value.id!
})).list;
}
async function toRecordDetail(id: string): Promise<void> {
if (!id) {
return;
}
await router.push(`/management/registration-event-records/${id}`);
}
// ---------- 表单 ----------
const submitting = ref(false);
const canSubmitRegister = computed(() => !!matchedCustomer.value && !!selectedEventId.value);
async function doSubmit(): Promise<void> {
const customer = matchedCustomer.value;
if (!customer) {
return;
}
submitting.value = true;
try {
await CustomerAPI.quickRegister({
customerCode: customer.code || scanCode.value,
await EventRecordAPI.create({
customerId: customer.id,
eventId: selectedEventId.value,
remark: "客户快速扫码登记"
});
})
scanStatus.value = `登记成功:${customer.name || customer.code || scanCode.value}。`;
scanCode.value = "";
matchedCustomer.value = undefined;
@@ -158,127 +202,6 @@ async function submitRegister(): Promise<void> {
submitting.value = false;
}
}
function validateForm(): boolean {
if (!selectedEventId.value) {
showToast("请先选择登记事件", "warning");
return false;
}
if (!matchedCustomer.value) {
scanStatus.value = "当前编码未匹配客户,无法登记。";
showToast("请先扫码匹配客户", "warning");
return false;
}
return true;
}
async function loadCustomer(code: string): Promise<void> {
const customer = await CustomerAPI.nullableDetailByCode(code);
if (!customer) {
matchedCustomer.value = undefined;
recentRecordList.value = [];
return;
}
matchedCustomer.value = customer;
await loadRecentRecordList();
}
async function loadRecentRecordList(): Promise<void> {
const customerId = matchedCustomer.value?.id;
if (!customerId) {
recentRecordList.value = [];
return;
}
recentRecordList.value = (await EventRecordAPI.rangeList({
customerId,
beginAt: 0,
endAt: Time.toTimestamp(new Date())
}))
.sort((left, right) => (right.registeredAt || 0) - (left.registeredAt || 0))
.slice(0, 5);
}
async function goRecordDetail(id: string): Promise<void> {
if (!id) {
return;
}
await router.push(`/management/registration-event-records/${id}`);
}
function getRecordEventName(record: EventRecord): string {
return record.event?.name || "未知事件";
}
function getRecordPhotoURL(record: EventRecord): string {
return getEventRecordPhotoURL(record);
}
function formatTime(value?: number): string {
if (!value) {
return "-";
}
const date = Time.toDateObject(value);
if (!date) {
return "-";
}
return Time.formatDateTime(date);
}
// ---------- 登记事件 ----------
async function loadActions(): Promise<void> {
eventList.value = await EventAPI.enabledList();
const storedEventId = loadStoredEventId();
const storedAction = eventList.value.find(item => item.id === storedEventId);
selectedEventId.value = storedAction?.id || eventList.value[0]?.id || "";
saveStoredEventId(selectedEventId.value);
}
function selectEvent(eventId: string | number | Array<string | number>): void {
if (Array.isArray(eventId)) {
return;
}
const nextEventId = String(eventId);
if (!nextEventId) {
return;
}
selectedEventId.value = nextEventId;
saveStoredEventId(nextEventId);
eventSelectorVisible.value = false;
showToast("登记事件已切换");
}
function loadStoredEventId(): string {
if (typeof window === "undefined") {
return "";
}
return window.localStorage.getItem(EventItemStorageKey) || "";
}
function saveStoredEventId(eventId: string): void {
if (typeof window === "undefined" || !eventId) {
return;
}
window.localStorage.setItem(EventItemStorageKey, eventId);
}
function showToast(message: string, theme: "success" | "warning" = "success"): void {
Toast({
theme,
direction: "row",
message
});
}
onMounted(loadActions);
</script>
<style scoped lang="less">