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

refactor event

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/management/CustomerEdit.vue
+146 -298
View File
@@ -3,7 +3,7 @@
<t-form class="form" label-align="left" label-width="6rem">
<t-form-item label="客户编码">
<t-input
v-model.trim="formModel.code"
v-model.trim="formData.code"
placeholder="客户编码"
borderless
>
@@ -29,50 +29,50 @@
</div>
<t-form-item label="姓名" required-mark>
<t-input
v-model.trim="formModel.name"
v-model.trim="formData.name"
placeholder="姓名"
borderless
/>
</t-form-item>
<t-form-item label="出生日期">
<birthdate-picker
v-model="formModel.birthdate"
v-model:calendar="formModel.birthdateCalendar"
v-model="formData.birthdate"
v-model:calendar="formData.birthdateCalendar"
/>
</t-form-item>
<t-form-item label="年龄">
<t-input
v-model.trim="formModel.age"
v-model.trim="formData.age"
type="number"
:readonly="!!formModel.birthdate"
:placeholder="formModel.birthdate ? '根据出生日期自动计算' : '年龄'"
:readonly="!!formData.birthdate"
:placeholder="formData.birthdate ? '根据出生日期自动计算' : '年龄'"
borderless
/>
</t-form-item>
<t-form-item label="照片">
<photo-field
v-model="formModel.photoURL"
v-model="photoURL"
alt-text="客户照片"
:loading="photoUploading"
:loading="isPhotoUploading"
:preview="false"
@add="selectPhoto"
@clear="resetPhotoState"
@add="photoInputRef?.click"
@clear="photoTempFileId = ''"
/>
</t-form-item>
<t-form-item label="性别">
<t-radio-group class="sex" v-model="formModel.gender" variant="default-filled">
<t-radio-group class="sex" v-model="formData.gender" variant="default-filled">
<t-radio :block="false" borderless value="MALE">男</t-radio>
<t-radio :block="false" borderless value="FEMALE">女</t-radio>
<t-radio :block="false" borderless value="">未知</t-radio>
</t-radio-group>
</t-form-item>
<t-form-item label="手机号">
<t-input v-model.trim="formModel.telephone" type="tel" placeholder="手机号" borderless />
<t-input v-model.trim="formData.telephone" type="tel" placeholder="手机号" borderless />
</t-form-item>
<t-form-item label="介绍人">
<div class="referrer">
<t-input
v-model.trim="formModel.referrer"
:value="formData.introducerCustomer?.name"
readonly
placeholder="选择或扫码"
borderless
@@ -84,17 +84,17 @@
size="extra-small"
@click="selectorVisible = true"
>选择</t-button>
<t-button theme="primary" size="extra-small" @click="toggleScanner('referrer')">
<span v-text="scannerVisible && scannerTarget === 'referrer' ? '关闭扫码' : '扫码'" />
<t-button theme="primary" size="extra-small" @click="toggleScanner('introducer')">
<span v-text="scannerVisible && scannerTarget === 'introducer' ? '关闭扫码' : '扫码'" />
</t-button>
</div>
</div>
</t-form-item>
<div v-if="scannerVisible && scannerTarget === 'referrer'" class="code-scanner-wrapper">
<div v-if="scannerVisible && scannerTarget === 'introducer'" class="code-scanner-wrapper">
<code-scanner
visible
:status-text="scanStatus"
active-text="正在识别介绍人编码。"
active-text="正在识别介绍人编码"
@decode="handleDecodedText"
@status-change="handleScanStatusChange"
/>
@@ -102,7 +102,7 @@
<t-form-item label="住址">
<t-textarea
class="textarea"
v-model.trim="formModel.address"
v-model.trim="formData.address"
:autosize="{ minRows: 3, maxRows: 5 }"
placeholder="住址"
/>
@@ -110,7 +110,7 @@
<t-form-item label="病症">
<t-textarea
class="textarea"
v-model.trim="formModel.disease"
v-model.trim="formData.disease"
:autosize="{ minRows: 3, maxRows: 5 }"
placeholder="病症"
/>
@@ -122,7 +122,7 @@
<t-form-item label="备注">
<t-textarea
class="textarea"
v-model.trim="formModel.note"
v-model.trim="formData.remark"
:autosize="{ minRows: 3, maxRows: 5 }"
placeholder="客户备注"
/>
@@ -139,8 +139,8 @@
theme="primary"
class="save"
:disabled="!canSubmit"
:loading="saving"
@click="saveCustomer"
:loading="isSubmitting"
@click="doSubmit"
>
<template #icon>
<t-icon name="check" />
@@ -148,9 +148,9 @@
保存
</t-button>
<customer-selector
v-model="referrerCustomerId"
v-model="introducerCustomerId"
v-model:visible="selectorVisible"
@change="handleReferrerChange"
@change="handleIntroducerChange"
/>
</div>
</template>
@@ -164,8 +164,8 @@ import CodeScanner from "@/components/CodeScanner.vue";
import CustomerSelector from "@/components/CustomerSelector.vue";
import PhotoField from "@/components/PhotoField.vue";
import { useSettingStore } from "@/store/settingStore";
import type { BodyAreaValue, Customer, CustomerBirthdateCalendar, CustomerGender } from "@/types/Customer";
import { createBodyAreaValue, getCustomerPhotoURL, normalizeBodyAreaValue } from "@/utils/customer";
import type { BodyAreaValue, Customer } from "@/types/Customer";
import { createBodyAreaValue, normalizeBodyAreaValue } from "@/utils/customer";
import { permissionCodes } from "@/utils/permission";
import { compressUploadImage } from "@/utils/imageCompression";
@@ -173,126 +173,27 @@ defineOptions({
name: "CustomerEdit"
});
type ScanTarget = "code" | "referrer";
const route = useRoute();
const router = useRouter();
const settingStore = useSettingStore();
const isCreateMode = computed(() => route.name === "CustomerCreate");
const savePermissionCode = computed(() => isCreateMode.value ? permissionCodes.customer.create : permissionCodes.customer.update);
const selectedAreas = ref<BodyAreaValue>(createBodyAreaValue());
const selectorVisible = ref(false);
const referrerCustomerId = ref("");
const photoInputRef = ref<HTMLInputElement>();
const photoTempFileId = ref("");
const photoUploading = ref(false);
const scannerVisible = ref(false);
const scannerTarget = ref<ScanTarget>("code");
const scanStatus = ref("点击扫码开始识别。");
const currentCustomer = ref<Customer>();
const saving = ref(false);
const canSubmit = computed(() => !!formModel.name.trim());
let latestDecodedText = "";
const formModel = reactive({
code: "",
name: "",
gender: "" as CustomerGender | "",
photoURL: "",
telephone: "",
age: "",
birthdate: "",
birthdateCalendar: "SOLAR" as CustomerBirthdateCalendar,
address: "",
referrer: "",
disease: "",
inviterCustomerId: "",
note: ""
});
function resetFormModel(): void {
Object.assign(formModel, {
code: "",
name: "",
gender: "",
photoURL: "",
telephone: "",
age: "",
birthdate: "",
birthdateCalendar: "SOLAR",
address: "",
referrer: "",
disease: "",
inviterCustomerId: "",
note: ""
});
currentCustomer.value = undefined;
selectedAreas.value = createBodyAreaValue();
referrerCustomerId.value = "";
photoTempFileId.value = "";
scannerVisible.value = false;
}
async function fillCreateInviter(): Promise<void> {
const inviterCode = String(route.query.inviterCode || "");
if (!inviterCode) {
return;
}
const inviter = await findCustomer(inviterCode);
if (!inviter) {
return;
}
formModel.referrer = inviter.name || inviter.code || "";
formModel.inviterCustomerId = inviter.id || "";
referrerCustomerId.value = inviter.id || "";
}
async function fillForm(): Promise<void> {
resetFormModel();
if (isCreateMode.value) {
await fillCreateInviter();
return;
}
const id = String(route.params.id || "");
if (!id) {
return;
}
try {
const customer = await CustomerAPI.detail(id);
currentCustomer.value = customer;
Object.assign(formModel, {
code: customer.code || "",
name: customer.name || "",
gender: customer.gender || "",
photoURL: getCustomerPhotoURL(customer),
telephone: customer.telephone || "",
age: customer.age === undefined || customer.age === null ? "" : String(customer.age),
birthdate: customer.birthdate || "",
birthdateCalendar: customer.birthdateCalendar || "SOLAR",
address: customer.address || "",
referrer: customer.introducerCustomer?.name || "",
disease: customer.disease || "",
inviterCustomerId: customer.introducerCustomerId || "",
note: customer.remark || ""
});
selectedAreas.value = normalizeBodyAreaValue(customer.conditioningPart);
referrerCustomerId.value = customer.introducerCustomer?.id || "";
} catch (err) {
console.warn("客户详情加载失败", err);
showToast("客户详情加载失败", "warning");
}
}
// ---------- 扫码 ----------
type ScanTarget = "code" | "introducer";
const scannerVisible = ref(false);
const scannerTarget = ref<ScanTarget>("code");
const scanStatus = ref("点击扫码开始识别");
const introducerCustomerId = ref("");
async function toggleScanner(target: ScanTarget): Promise<void> {
if (scannerVisible.value && scannerTarget.value === target) {
scannerVisible.value = false;
return;
}
scannerTarget.value = target;
scannerVisible.value = true;
latestDecodedText = "";
@@ -303,210 +204,157 @@ async function handleDecodedText(rawText: string): Promise<void> {
if (!normalizedText || normalizedText === latestDecodedText) {
return;
}
latestDecodedText = normalizedText;
await settingStore.playScanSuccessSound();
if (scannerTarget.value === "code") {
formModel.code = normalizedText;
scanStatus.value = `已识别客户编码 ${normalizedText}。`;
// 选择客户扫码
formData.code = normalizedText;
scanStatus.value = `已识别客户编码 ${normalizedText}`;
scannerVisible.value = false;
return;
} else {
// 选择介绍人扫码
await applyIntroducer(normalizedText);
}
await applyReferrer(normalizedText);
}
function handleScanStatusChange(value: string): void {
scanStatus.value = value;
}
// ---------- 介绍人 ----------
const selectorVisible = ref(false);
async function applyIntroducer(code: string): Promise<void> {
if (!code) {
formData.introducerCustomerId = "";
introducerCustomerId.value = "";
scannerVisible.value = false;
return;
}
const matched = await CustomerAPI.findByCode(code);
if (!matched?.id) {
formData.introducerCustomerId = "";
introducerCustomerId.value = "";
scannerVisible.value = false;
scannerVisible.value = false;
Toast.warning(`未匹配到 ${code} 编码介绍人，请选择或扫码已有客户`);
return;
}
formData.introducerCustomerId = matched.id;
formData.introducerCustomer = matched;
introducerCustomerId.value = matched.id;
scannerVisible.value = false;
}
async function handleIntroducerChange(id: string): Promise<void> {
const customer = await CustomerAPI.findById(id);
introducerCustomerId.value = customer!.id!;
formData.introducerCustomer = customer;
}
// ---------- 表单 ----------
const photoInputRef = ref<HTMLInputElement>();
const photoTempFileId = ref("");
const isPhotoUploading = ref(false);
const photoURL = ref();
const selectedAreas = ref<BodyAreaValue>(createBodyAreaValue());
const formData = reactive<Customer>({
});
const canSubmit = computed(() => formData.name?.trim());
async function loadDetail() {
const id = String(route.params.id || "");
if (!id) {
return;
}
try {
const customer = await CustomerAPI.detail(id);
Object.assign(formData, customer);
selectedAreas.value = normalizeBodyAreaValue(customer.conditioningPart);
introducerCustomerId.value = customer.introducerCustomer?.id || "";
} catch (err) {
console.warn("客户详情加载失败", err);
Toast.error("客户详情加载失败");
}
}
onMounted(loadDetail);
watch(() => route.fullPath, loadDetail);
// ---------- 年龄 ----------
watch(() => formData.birthdate, (value) => {
if (value) {
const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
if (match) {
const birthYear = Number(match[1]);
const birthMonth = Number(match[2]);
const birthDay = Number(match[3]);
const today = new Date();
let age = today.getFullYear() - birthYear;
if (today.getMonth() + 1 < birthMonth || (today.getMonth() + 1 === birthMonth && today.getDate() < birthDay)) {
age--;
}
formData.age = Math.max(age, 0);
} else {
formData.age = undefined;
}
}
});
// ---------- 照片 ----------
function selectPhoto(): void {
photoInputRef.value?.click();
}
function resetPhotoState(): void {
photoTempFileId.value = "";
}
async function handlePhotoSelected(event: Event): Promise<void> {
const input = event.target as HTMLInputElement;
const file = input.files?.[0];
if (!file) {
return;
}
photoUploading.value = true;
isPhotoUploading.value = true;
try {
const compressedFile = await compressUploadImage(file);
const [tempFile] = await AttachmentAPI.uploadTemp(compressedFile);
if (!tempFile?.id) {
showToast("客户照片上传失败", "warning");
return;
}
const [tempFile] = await AttachmentAPI.upload(compressedFile);
photoTempFileId.value = tempFile.id;
formModel.photoURL = AttachmentAPI.getTempReadURL(tempFile.id);
photoURL.value = AttachmentAPI.getTempReadURL(tempFile.id);
} finally {
photoUploading.value = false;
isPhotoUploading.value = false;
input.value = "";
}
}
// ---------- 介绍人 ----------
async function findCustomer(rawValue: string): Promise<Customer | undefined> {
const normalizedText = rawValue.trim();
if (!normalizedText) {
return undefined;
}
const customer = await CustomerAPI.nullableDetailByCode(normalizedText);
if (customer) {
return customer;
}
const list = await CustomerAPI.search({ keyword: normalizedText });
return list[0];
}
async function applyReferrer(rawValue: string): Promise<void> {
const normalizedText = rawValue.trim();
if (!normalizedText) {
formModel.referrer = "";
formModel.inviterCustomerId = "";
referrerCustomerId.value = "";
scannerVisible.value = false;
return;
}
const matched = await findCustomer(normalizedText);
if (!matched?.id) {
formModel.referrer = "";
formModel.inviterCustomerId = "";
referrerCustomerId.value = "";
scanStatus.value = `未匹配到介绍人 ${normalizedText}，请重新选择或扫码。`;
scannerVisible.value = false;
showToast("介绍人不存在，请选择或扫码已有客户", "warning");
return;
}
formModel.referrer = matched.name || matched.code || "";
formModel.inviterCustomerId = matched.id;
referrerCustomerId.value = matched.id;
scanStatus.value = `已匹配介绍人 ${formModel.referrer}。`;
scannerVisible.value = false;
}
async function handleReferrerChange(id: string): Promise<void> {
const customer = await CustomerAPI.detail(id);
formModel.referrer = customer.name || customer.code || "";
formModel.inviterCustomerId = customer.id || "";
referrerCustomerId.value = customer.id || "";
scanStatus.value = `已选择介绍人 ${formModel.referrer}。`;
}
// ---------- 保存 ----------
async function saveCustomer(): Promise<void> {
if (!validateForm()) {
return;
}
const isSubmitting = ref(false);
const customerCode = formModel.code.trim();
const payload: Customer = {
...(currentCustomer.value || {}),
code: customerCode || null,
name: formModel.name,
gender: formModel.gender || undefined,
age: Number(formModel.age) || undefined,
birthdate: formModel.birthdate || null,
birthdateCalendar: formModel.birthdate ? formModel.birthdateCalendar : undefined,
telephone: formModel.telephone,
address: formModel.address,
remark: formModel.note,
disease: formModel.disease,
conditioningPart: selectedAreas.value,
introducerCustomerId: formModel.inviterCustomerId || null,
attachmentIdList: photoTempFileId.value ? [photoTempFileId.value] : undefined
};
saving.value = true;
async function doSubmit(): Promise<void> {
isSubmitting.value = true;
try {
let savedCustomer = currentCustomer.value;
formData.conditioningPart = selectedAreas.value;
formData.attachmentList = photoTempFileId.value ? [{
tempFileId: photoTempFileId.value
}] : undefined;
if (isCreateMode.value) {
savedCustomer = await CustomerAPI.create(payload);
const id = await CustomerAPI.create(formData);
Toast.success("创建成功");
await router.replace(`/management/customers/${id}`);
} else {
await CustomerAPI.update(payload);
}
showToast("客户已保存");
const redirect = String(route.query.redirect || "");
if (redirect) {
await router.replace(redirect);
return;
}
if (savedCustomer?.id) {
await router.replace(`/management/customers/${savedCustomer.id}`);
return;
await CustomerAPI.update(formData);
Toast.success("保存成功");
const redirect = String(route.query.redirect || "");
if (redirect) {
await router.replace(redirect);
return;
}
}
await router.replace("/management/customers");
} finally {
saving.value = false;
isSubmitting.value = false;
}
}
function validateForm(): boolean {
if (!formModel.name.trim()) {
showToast("请填写客户姓名", "warning");
return false;
}
return true;
}
function showToast(message: string, theme: "success" | "warning" = "success"): void {
Toast({
theme,
direction: "row",
message
});
}
watch(() => formModel.referrer, (value) => {
if (!value.trim()) {
formModel.inviterCustomerId = "";
referrerCustomerId.value = "";
}
});
watch(() => formModel.birthdate, (value) => {
if (value) {
formModel.age = String(calculateAge(value));
}
});
function calculateAge(value: string): number {
const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
if (!match) {
return 0;
}
const birthYear = Number(match[1]);
const birthMonth = Number(match[2]);
const birthDay = Number(match[3]);
const today = new Date();
let age = today.getFullYear() - birthYear;
if (today.getMonth() + 1 < birthMonth || (today.getMonth() + 1 === birthMonth && today.getDate() < birthDay)) {
age--;
}
return Math.max(age, 0);
}
onMounted(async () => {
await fillForm();
});
watch(() => route.fullPath, async () => {
await fillForm();
});
</script>
<style scoped lang="less">