refactor file tree
This commit is contained in:
Timi
@@ -0,0 +1,520 @@
|
||||
<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="formData.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>
|
||||
<t-form-item v-if="isGlobalManager" label="门店" required-mark arrow @click="openStorePicker">
|
||||
<div class="picker-text" v-text="selectedStoreName" />
|
||||
</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="formData.name"
|
||||
placeholder="姓名"
|
||||
borderless
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label="出生日期">
|
||||
<birthdate-picker
|
||||
v-model="formData.birthdate"
|
||||
v-model:calendar="formData.birthdateCalendar"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label="年龄">
|
||||
<t-input
|
||||
v-model.trim="formData.age"
|
||||
type="number"
|
||||
:readonly="!!formData.birthdate"
|
||||
:placeholder="formData.birthdate ? '根据出生日期自动计算' : '年龄'"
|
||||
borderless
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label="照片">
|
||||
<photo-field
|
||||
v-model="photoURL"
|
||||
alt-text="客户照片"
|
||||
:loading="isPhotoUploading"
|
||||
:preview="false"
|
||||
@add="openPhotoPicker"
|
||||
@clear="photoTempFileId = ''"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label="性别">
|
||||
<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="formData.telephone" type="tel" placeholder="手机号" borderless />
|
||||
</t-form-item>
|
||||
<t-form-item label="介绍人">
|
||||
<div class="referrer">
|
||||
<t-input
|
||||
:value="formData.introducerCustomer?.name"
|
||||
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('introducer')">
|
||||
<span v-text="scannerVisible && scannerTarget === 'introducer' ? '关闭扫码' : '扫码'" />
|
||||
</t-button>
|
||||
</div>
|
||||
</div>
|
||||
</t-form-item>
|
||||
<div v-if="scannerVisible && scannerTarget === 'introducer'" 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="formData.address"
|
||||
:autosize="{ minRows: 3, maxRows: 5 }"
|
||||
placeholder="住址"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label="病症">
|
||||
<t-textarea
|
||||
class="textarea"
|
||||
v-model.trim="formData.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="formData.remark"
|
||||
: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="isSubmitting"
|
||||
@click="doSubmit"
|
||||
>
|
||||
<template #icon>
|
||||
<t-icon name="check" />
|
||||
</template>
|
||||
保存
|
||||
</t-button>
|
||||
<customer-selector
|
||||
v-model="introducerCustomerId"
|
||||
v-model:visible="selectorVisible"
|
||||
@change="handleIntroducerChange"
|
||||
/>
|
||||
</div>
|
||||
<t-popup v-model="storePickerVisible" placement="bottom">
|
||||
<t-picker
|
||||
v-model="storePickerDraft"
|
||||
:columns="storePickerColumns"
|
||||
title="选择门店"
|
||||
@cancel="storePickerVisible = false"
|
||||
@confirm="confirmStorePicker"
|
||||
/>
|
||||
</t-popup>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { AttachmentAPI, useUserStore } 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 { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import { useSettingStore } from "@/store/settingStore";
|
||||
import type { BodyAreaValue, Customer } from "@/types/Customer";
|
||||
import { createBodyAreaValue, normalizeBodyAreaValue } from "@/utils/customer";
|
||||
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
||||
import { compressUploadImage } from "@/utils/imageCompression";
|
||||
|
||||
type PickerValue = string | number;
|
||||
|
||||
defineOptions({
|
||||
name: "CustomerEdit"
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const settingStore = useSettingStore();
|
||||
const currentStoreStore = useCurrentStoreStore();
|
||||
const isCreateMode = computed(() => route.name === "CustomerCreate");
|
||||
const savePermissionCode = computed(() => isCreateMode.value ? permissionCodes.customer.create : permissionCodes.customer.update);
|
||||
const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
|
||||
|
||||
let latestDecodedText = "";
|
||||
|
||||
// ---------- 扫码 ----------
|
||||
|
||||
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 = "";
|
||||
}
|
||||
|
||||
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") {
|
||||
// 选择客户扫码
|
||||
formData.code = normalizedText;
|
||||
scanStatus.value = `已识别客户编码 ${normalizedText}`;
|
||||
scannerVisible.value = false;
|
||||
return;
|
||||
} else {
|
||||
// 选择介绍人扫码
|
||||
await applyIntroducer(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 = "";
|
||||
formData.introducerCustomer = undefined;
|
||||
introducerCustomerId.value = "";
|
||||
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 = id ? await CustomerAPI.findById(id) : undefined;
|
||||
introducerCustomerId.value = customer?.id || "";
|
||||
formData.introducerCustomerId = 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>({
|
||||
});
|
||||
|
||||
function openPhotoPicker(): void {
|
||||
photoInputRef.value?.click();
|
||||
}
|
||||
|
||||
const canSubmit = computed(() => formData.name?.trim() && formData.storeId);
|
||||
|
||||
// ---------- 门店选择 ----------
|
||||
|
||||
const storePickerVisible = ref(false);
|
||||
const storePickerDraft = ref<PickerValue[]>([]);
|
||||
const storePickerColumns = computed(() => [
|
||||
currentStoreStore.storeList.map(item => ({
|
||||
label: item.name || item.code || "未命名门店",
|
||||
value: item.id || ""
|
||||
})).filter(item => item.value)
|
||||
]);
|
||||
const selectedStoreName = computed(() => {
|
||||
const store = currentStoreStore.storeList.find(item => item.id === formData.storeId);
|
||||
return store?.name || store?.code || "请选择门店";
|
||||
});
|
||||
|
||||
function openStorePicker(): void {
|
||||
if (!currentStoreStore.storeList.length) {
|
||||
Toast.warning("暂无可选门店");
|
||||
return;
|
||||
}
|
||||
|
||||
storePickerDraft.value = [formData.storeId || ""];
|
||||
storePickerVisible.value = true;
|
||||
}
|
||||
|
||||
function confirmStorePicker(): void {
|
||||
const storeId = String(storePickerDraft.value[0] || "");
|
||||
if (!storeId) {
|
||||
return;
|
||||
}
|
||||
|
||||
formData.storeId = storeId;
|
||||
currentStoreStore.selectStore(storeId);
|
||||
storePickerVisible.value = false;
|
||||
}
|
||||
|
||||
async function prepareStoreScope(): Promise<void> {
|
||||
if (isGlobalManager.value) {
|
||||
await currentStoreStore.loadStoreList();
|
||||
const queryStoreId = String(route.query.storeId || "");
|
||||
formData.storeId = currentStoreStore.storeList.some(item => item.id === queryStoreId)
|
||||
? queryStoreId
|
||||
: currentStoreStore.currentStoreId;
|
||||
return;
|
||||
}
|
||||
|
||||
const store = await currentStoreStore.loadLoginStore();
|
||||
formData.storeId = store?.id || "";
|
||||
}
|
||||
|
||||
async function loadDetail() {
|
||||
await prepareStoreScope();
|
||||
const id = String(route.params.id || "");
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const customer = await CustomerAPI.detail(id);
|
||||
Object.assign(formData, customer);
|
||||
formData.storeId = customer.storeId || formData.storeId;
|
||||
selectedAreas.value = normalizeBodyAreaValue(customer.conditioningPart);
|
||||
introducerCustomerId.value = customer.introducerCustomerId || 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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ---------- 照片 ----------
|
||||
|
||||
async function handlePhotoSelected(event: Event): Promise<void> {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
isPhotoUploading.value = true;
|
||||
try {
|
||||
const compressedFile = await compressUploadImage(file);
|
||||
const [tempFile] = await AttachmentAPI.upload(compressedFile);
|
||||
photoTempFileId.value = tempFile.id;
|
||||
photoURL.value = AttachmentAPI.getTempReadURL(tempFile.id);
|
||||
} finally {
|
||||
isPhotoUploading.value = false;
|
||||
input.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 保存 ----------
|
||||
|
||||
const isSubmitting = ref(false);
|
||||
|
||||
async function doSubmit(): Promise<void> {
|
||||
if (!formData.storeId) {
|
||||
Toast.warning("请选择门店");
|
||||
return;
|
||||
}
|
||||
|
||||
isSubmitting.value = true;
|
||||
try {
|
||||
const payload: Customer = { ...formData };
|
||||
payload.conditioningPart = selectedAreas.value;
|
||||
payload.introducerCustomerId = introducerCustomerId.value || "";
|
||||
payload.attachmentList = photoTempFileId.value ? [{
|
||||
attachType: "PHOTO",
|
||||
tempFileId: photoTempFileId.value
|
||||
}] : undefined;
|
||||
delete payload.introducerCustomer;
|
||||
|
||||
if (isCreateMode.value) {
|
||||
await CustomerAPI.create(payload);
|
||||
Toast.success("创建成功");
|
||||
const redirect = String(route.query.redirect || "");
|
||||
await router.replace(redirect || "/management/customers");
|
||||
return;
|
||||
} else {
|
||||
await CustomerAPI.update(payload);
|
||||
Toast.success("保存成功");
|
||||
const redirect = String(route.query.redirect || "");
|
||||
if (redirect) {
|
||||
await router.replace(redirect);
|
||||
return;
|
||||
}
|
||||
}
|
||||
await router.replace("/management/customers");
|
||||
} finally {
|
||||
isSubmitting.value = false;
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user