549 lines
14 KiB
Vue
549 lines
14 KiB
Vue
<template>
|
|
<div v-can="savePermissionCode" class="customer-edit">
|
|
<t-form class="form" label-align="left" label-width="6rem">
|
|
<t-form-item label="客户编码">
|
|
<t-input
|
|
v-model.trim="formModel.code"
|
|
placeholder="客户编码"
|
|
borderless
|
|
>
|
|
<template #suffix-icon>
|
|
<t-button
|
|
theme="primary"
|
|
size="extra-small"
|
|
@click="toggleScanner('code')"
|
|
>
|
|
<span v-text="scannerVisible && scannerTarget === 'code' ? '关闭扫码' : '扫码'" />
|
|
</t-button>
|
|
</template>
|
|
</t-input>
|
|
</t-form-item>
|
|
<div v-if="scannerVisible && scannerTarget === 'code'" class="code-scanner-wrapper">
|
|
<code-scanner
|
|
visible
|
|
:status-text="scanStatus"
|
|
active-text="正在识别客户编码。"
|
|
@decode="handleDecodedText"
|
|
@status-change="handleScanStatusChange"
|
|
/>
|
|
</div>
|
|
<t-form-item label="姓名" required-mark>
|
|
<t-input
|
|
v-model.trim="formModel.name"
|
|
placeholder="姓名"
|
|
borderless
|
|
/>
|
|
</t-form-item>
|
|
<t-form-item label="年龄">
|
|
<t-input
|
|
v-model.trim="formModel.age"
|
|
type="number"
|
|
placeholder="年龄"
|
|
borderless
|
|
/>
|
|
</t-form-item>
|
|
<t-form-item label="照片">
|
|
<photo-field
|
|
v-model="formModel.photoURL"
|
|
alt-text="客户照片"
|
|
:loading="photoUploading"
|
|
:preview="false"
|
|
@add="selectPhoto"
|
|
@clear="resetPhotoState"
|
|
/>
|
|
</t-form-item>
|
|
<t-form-item label="性别">
|
|
<t-radio-group class="sex" v-model="formModel.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-form-item>
|
|
<t-form-item label="介绍人">
|
|
<div class="referrer">
|
|
<t-input
|
|
v-model.trim="formModel.referrer"
|
|
readonly
|
|
placeholder="选择或扫码"
|
|
borderless
|
|
/>
|
|
<div class="actions">
|
|
<t-button
|
|
theme="primary"
|
|
variant="outline"
|
|
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>
|
|
</div>
|
|
</div>
|
|
</t-form-item>
|
|
<div v-if="scannerVisible && scannerTarget === 'referrer'" class="code-scanner-wrapper">
|
|
<code-scanner
|
|
visible
|
|
:status-text="scanStatus"
|
|
active-text="正在识别介绍人编码。"
|
|
@decode="handleDecodedText"
|
|
@status-change="handleScanStatusChange"
|
|
/>
|
|
</div>
|
|
<t-form-item label="住址">
|
|
<t-textarea
|
|
class="textarea"
|
|
v-model.trim="formModel.address"
|
|
:autosize="{ minRows: 3, maxRows: 5 }"
|
|
placeholder="住址"
|
|
/>
|
|
</t-form-item>
|
|
<t-form-item label="病症">
|
|
<t-textarea
|
|
class="textarea"
|
|
v-model.trim="formModel.disease"
|
|
:autosize="{ minRows: 3, maxRows: 5 }"
|
|
placeholder="病症"
|
|
/>
|
|
</t-form-item>
|
|
<div class="conditioning-part">
|
|
<span class="gray">调理部位</span>
|
|
<body-area-selector v-model="selectedAreas" />
|
|
</div>
|
|
<t-form-item label="备注">
|
|
<t-textarea
|
|
class="textarea"
|
|
v-model.trim="formModel.note"
|
|
:autosize="{ minRows: 3, maxRows: 5 }"
|
|
placeholder="客户备注"
|
|
/>
|
|
</t-form-item>
|
|
</t-form>
|
|
<input
|
|
ref="photoInputRef"
|
|
class="file-input"
|
|
type="file"
|
|
accept="image/*"
|
|
@change="handlePhotoSelected"
|
|
>
|
|
<t-button
|
|
theme="primary"
|
|
class="save"
|
|
:disabled="!canSubmit"
|
|
:loading="saving"
|
|
@click="saveCustomer"
|
|
>
|
|
<template #icon>
|
|
<t-icon name="check" />
|
|
</template>
|
|
保存
|
|
</t-button>
|
|
<customer-selector
|
|
v-model="referrerCustomerId"
|
|
v-model:visible="selectorVisible"
|
|
@change="handleReferrerChange"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { AttachmentAPI } from "timi-web";
|
|
import { Toast } from "tdesign-mobile-vue";
|
|
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 { useSettingStore } from "@/store/settingStore";
|
|
import type { BodyAreaValue, Customer, CustomerGender } from "@/types/Customer";
|
|
import { createBodyAreaValue, getCustomerPhotoURL, normalizeBodyAreaValue } from "@/utils/customer";
|
|
import { gaoPermissionCodes } from "@/utils/gaoPermission";
|
|
import { compressUploadImage } from "@/utils/imageCompression";
|
|
|
|
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 ? gaoPermissionCodes.customer.create : gaoPermissionCodes.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: "",
|
|
address: "",
|
|
referrer: "",
|
|
disease: "",
|
|
inviterCustomerId: "",
|
|
note: ""
|
|
});
|
|
|
|
function resetFormModel(): void {
|
|
Object.assign(formModel, {
|
|
code: "",
|
|
name: "",
|
|
gender: "",
|
|
photoURL: "",
|
|
telephone: "",
|
|
age: "",
|
|
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),
|
|
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");
|
|
}
|
|
}
|
|
|
|
// ---------- 扫码 ----------
|
|
|
|
async function toggleScanner(target: ScanTarget): Promise<void> {
|
|
if (scannerVisible.value && scannerTarget.value === target) {
|
|
scannerVisible.value = false;
|
|
return;
|
|
}
|
|
|
|
scannerTarget.value = target;
|
|
scannerVisible.value = true;
|
|
latestDecodedText = "";
|
|
}
|
|
|
|
async function handleDecodedText(rawText: string): Promise<void> {
|
|
const normalizedText = rawText.trim();
|
|
if (!normalizedText || normalizedText === latestDecodedText) {
|
|
return;
|
|
}
|
|
|
|
latestDecodedText = normalizedText;
|
|
await settingStore.playScanSuccessSound();
|
|
if (scannerTarget.value === "code") {
|
|
formModel.code = normalizedText;
|
|
scanStatus.value = `已识别客户编码 ${normalizedText}。`;
|
|
scannerVisible.value = false;
|
|
return;
|
|
}
|
|
|
|
await applyReferrer(normalizedText);
|
|
}
|
|
|
|
function handleScanStatusChange(value: string): void {
|
|
scanStatus.value = value;
|
|
}
|
|
|
|
// ---------- 照片 ----------
|
|
|
|
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;
|
|
try {
|
|
const compressedFile = await compressUploadImage(file);
|
|
const [tempFile] = await AttachmentAPI.uploadTemp(compressedFile);
|
|
if (!tempFile?.id) {
|
|
showToast("客户照片上传失败", "warning");
|
|
return;
|
|
}
|
|
photoTempFileId.value = tempFile.id;
|
|
formModel.photoURL = AttachmentAPI.getTempReadURL(tempFile.id);
|
|
} finally {
|
|
photoUploading.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 customerCode = formModel.code.trim();
|
|
const payload: Customer = {
|
|
...(currentCustomer.value || {}),
|
|
code: customerCode || undefined,
|
|
name: formModel.name,
|
|
gender: formModel.gender || undefined,
|
|
age: Number(formModel.age) || undefined,
|
|
telephone: formModel.telephone,
|
|
address: formModel.address,
|
|
remark: formModel.note,
|
|
disease: formModel.disease,
|
|
conditioningPart: selectedAreas.value,
|
|
introducerCustomerId: formModel.inviterCustomerId || undefined,
|
|
attachmentIdList: photoTempFileId.value ? [photoTempFileId.value] : undefined
|
|
};
|
|
|
|
saving.value = true;
|
|
try {
|
|
let savedCustomer = currentCustomer.value;
|
|
if (isCreateMode.value) {
|
|
savedCustomer = await CustomerAPI.create(payload);
|
|
} 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 router.replace("/management/customers");
|
|
} finally {
|
|
saving.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 = "";
|
|
}
|
|
});
|
|
|
|
onMounted(async () => {
|
|
await fillForm();
|
|
});
|
|
|
|
watch(() => route.fullPath, async () => {
|
|
await fillForm();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.customer-edit {
|
|
padding: calc(var(--app-nav-height) + 1rem) 0 4rem 0;
|
|
|
|
.form {
|
|
padding: .5rem 0;
|
|
background: rgba(255, 255, 255, .92);
|
|
box-shadow: var(--td-shadow-1);
|
|
border-radius: 1.4rem;
|
|
|
|
.code-scanner-wrapper {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.textarea {
|
|
width: 100%;
|
|
}
|
|
|
|
.referrer {
|
|
gap: .75rem;
|
|
display: flex;
|
|
|
|
.actions {
|
|
gap: .5rem;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
.sex {
|
|
gap: 1rem;
|
|
display: flex;
|
|
}
|
|
|
|
.conditioning-part {
|
|
gap: .5rem;
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.file-input {
|
|
display: none;
|
|
}
|
|
|
|
.save {
|
|
left: 1rem;
|
|
right: 1rem;
|
|
bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
|
|
position: fixed;
|
|
}
|
|
}
|
|
|
|
:global(html.theme-dark) {
|
|
.customer-edit {
|
|
|
|
:deep(.form-item .t-form__label) {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.form {
|
|
background: rgba(15, 23, 42, .88);
|
|
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
|
|
}
|
|
|
|
:deep(.textarea .t-textarea__inner) {
|
|
color: #e2e8f0;
|
|
background: rgba(15, 23, 42, .72);
|
|
border-color: rgba(148, 163, 184, .16);
|
|
}
|
|
}
|
|
}
|
|
</style>
|