disable form for bound customer code

2026-08-29 12:06:32 +08:00
parent 04179fa55c
commit 4217fdb71b
4 changed files with 213 additions and 17 deletions
@@ -6,6 +6,7 @@
 					v-model.trim="formData.code"
 					placeholder="客户编码"
 					borderless
+					@blur="handleCodeBlur"
 				>
 					<template #suffix-icon>
 						<t-button
@@ -22,22 +23,37 @@
 				<code-scanner
 					visible
 					:status-text="scanStatus"
-					active-text="正在识别客户编码。"
+					active-text="正在识别客户编码"
 					@decode="handleDecodedText"
 					@status-change="handleScanStatusChange"
 				/>
 			</div>
+			<div v-if="isCustomerBound" class="bound-customer">
+				<customer-profile-card :customer="boundCodeCustomer" />
+				<div class="tips red">
+					<t-icon name="error-circle" />
+					<span>该编码已绑定客户，不可新录入</span>
+				</div>
+				<t-button
+					block
+					theme="primary"
+					variant="outline"
+					@click="toBoundCustomerEdit"
+				>编辑该客户</t-button>
+			</div>
 			<t-form-item label="姓名" required-mark>
 				<t-input
 					v-model.trim="formData.name"
 					placeholder="姓名"
 					borderless
+					:disabled="isCustomerBound"
 				/>
 			</t-form-item>
 			<t-form-item label="出生日期">
 				<birthdate-picker
 					v-model="formData.birthdate"
 					v-model:calendar="formData.birthdateCalendar"
+					:disabled="isCustomerBound"
 				/>
 			</t-form-item>
 			<t-form-item label="年龄">
@@ -47,6 +63,7 @@
 					:readonly="!!formData.birthdate"
 					:placeholder="formData.birthdate ? '根据出生日期自动计算' : '年龄'"
 					borderless
+					:disabled="isCustomerBound"
 				/>
 			</t-form-item>
 			<t-form-item label-width="0">
@@ -55,6 +72,9 @@
 						v-model="photoList"
 						v-model:photo-items="photoItemList"
 						:edit-mode="true"
+						:show-add="!isCustomerBound"
+						:show-remove="!isCustomerBound"
+						:show-viewer-actions="!isCustomerBound"
 						:add-actions="photoAddActions"
 						:loading="isPhotoUploading"
 						@add-photo="openPhotoPicker('PHOTO')"
@@ -65,14 +85,14 @@
 				</div>
 			</t-form-item>
 			<t-form-item label="性别">
-				<t-radio-group class="sex" v-model="formData.gender" variant="default-filled">
+				<t-radio-group class="sex" v-model="formData.gender" variant="default-filled" :disabled="isCustomerBound">
 					<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-input v-model.trim="formData.telephone" type="tel" placeholder="手机号" borderless :disabled="isCustomerBound" />
 			</t-form-item>
 			<t-form-item label="介绍人">
 				<div class="referrer">
@@ -81,15 +101,17 @@
 						readonly
 						placeholder="选择或扫码"
 						borderless
+						:disabled="isCustomerBound"
 					/>
 					<div class="actions">
 						<t-button
 							theme="primary"
 							variant="outline"
 							size="extra-small"
+							:disabled="isCustomerBound"
 							@click="selectorVisible = true"
 						>选择</t-button>
-						<t-button theme="primary" size="extra-small" @click="toggleScanner('introducer')">
+						<t-button theme="primary" size="extra-small" :disabled="isCustomerBound" @click="toggleScanner('introducer')">
 							<span v-text="scannerVisible && scannerTarget === 'introducer' ? '关闭扫码' : '扫码'" />
 						</t-button>
 					</div>
@@ -104,14 +126,14 @@
 					@status-change="handleScanStatusChange"
 				/>
 			</div>
-			<t-form-item label="调理部位" arrow @click="openBodyAreaPicker">
+			<t-form-item label="调理部位" :arrow="!isCustomerBound" @click="openBodyAreaPicker">
 				<div class="picker-text" v-text="selectedAreaText" />
 			</t-form-item>
 		</t-form>
 		<customer-tag-card
 			v-if="canReadTag"
 			class="tag-card"
-			:editable="canEditTag"
+			:editable="canEditTag && !isCustomerBound"
 			:tag-list="customerTagList"
 			v-entrance-transition="70"
 			@edit="openTagSelector"
@@ -123,6 +145,7 @@
 					v-model.trim="formData.address"
 					:autosize="{ minRows: 3, maxRows: 5 }"
 					placeholder="住址"
+					:disabled="isCustomerBound"
 				/>
 			</t-form-item>
 			<t-form-item label="病症">
@@ -131,6 +154,7 @@
 					v-model.trim="formData.disease"
 					:autosize="{ minRows: 3, maxRows: 5 }"
 					placeholder="病症"
+					:disabled="isCustomerBound"
 				/>
 			</t-form-item>
 			<t-form-item label="备注">
@@ -139,6 +163,7 @@
 					v-model.trim="formData.remark"
 					:autosize="{ minRows: 3, maxRows: 5 }"
 					placeholder="客户备注"
+					:disabled="isCustomerBound"
 				/>
 			</t-form-item>
 		</t-form>
@@ -150,12 +175,13 @@
 			@change="handlePhotoSelected"
 		>
 		<customer-selector
+			v-if="!isCustomerBound"
 			v-model="introducerCustomerId"
 			v-model:visible="selectorVisible"
 			@change="handleIntroducerChange"
 		/>
 		<tag-selector
-			v-if="canEditTag"
+			v-if="canEditTag && !isCustomerBound"
 			v-model="selectedTagIdList"
 			v-model:visible="tagSelectorVisible"
 			@change="handleTagSelected"
@@ -168,7 +194,7 @@
 		@left-button-click="cancelBodyAreaPicker"
 		@right-button-click="confirmBodyAreaPicker"
 	>
-		<body-area-selector v-model="bodyAreaDraft" />
+		<body-area-selector v-model="bodyAreaDraft" :readonly="isCustomerBound" />
 	</bottom-popup>
 </template>

@@ -180,6 +206,7 @@ import CustomerAPI from "@/api/CustomerAPI";
 import TagAPI from "@/api/TagAPI";
 import BodyAreaSelector from "@/components/BodyAreaSelector.vue";
 import CodeScanner from "@/components/CodeScanner.vue";
+import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
 import CustomerSelector from "@/components/CustomerSelector.vue";
 import PhotoScroller from "@/components/PhotoScroller.vue";
 import TagSelector from "@/components/TagSelector.vue";
@@ -219,8 +246,17 @@ const scannerVisible = ref(false);
 const scannerTarget = ref<ScanTarget>("code");
 const scanStatus = ref("点击扫码开始识别");
 const introducerCustomerId = ref("");
+const boundCodeCustomer = ref<Customer>();
+const checkedCode = ref("");
+let codeCheckToken = 0;
+let pendingCodeCheck: Promise<void> | undefined;
+let pendingCode = "";
+const isCustomerBound = computed(() => isCreateMode.value && !!boundCodeCustomer.value?.id);

 async function toggleScanner(target: ScanTarget): Promise<void> {
+	if (isCustomerBound.value && target !== "code") {
+		return;
+	}
 	if (scannerVisible.value && scannerTarget.value === target) {
 		scannerVisible.value = false;
 		return;
@@ -240,8 +276,9 @@ async function handleDecodedText(rawText: string): Promise<void> {
 	if (scannerTarget.value === "code") {
 		// 选择客户扫码
 		formData.code = normalizedText;
-		scanStatus.value = `已识别客户编码 ${normalizedText}`;
 		scannerVisible.value = false;
+		await checkBoundCustomerCode();
+		scanStatus.value = `已识别客户编码 ${normalizedText}`;
 		return;
 	} else {
 		// 选择介绍人扫码
@@ -253,6 +290,56 @@ function handleScanStatusChange(value: string): void {
 	scanStatus.value = value;
 }

+async function handleCodeBlur(): Promise<void> {
+	if (!isCreateMode.value) {
+		return;
+	}
+	await checkBoundCustomerCode();
+}
+
+async function checkBoundCustomerCode(): Promise<void> {
+	if (!isCreateMode.value) {
+		return;
+	}
+
+	const normalizedCode = formData.code?.trim() || "";
+	if (!normalizedCode) {
+		codeCheckToken++;
+		checkedCode.value = "";
+		boundCodeCustomer.value = undefined;
+		pendingCodeCheck = undefined;
+		pendingCode = "";
+		return;
+	}
+	if (checkedCode.value === normalizedCode) {
+		return;
+	}
+	if (pendingCodeCheck && pendingCode === normalizedCode) {
+		await pendingCodeCheck;
+		return;
+	}
+
+	const requestToken = ++codeCheckToken;
+	boundCodeCustomer.value = undefined;
+	pendingCode = normalizedCode;
+	pendingCodeCheck = (async () => {
+		const matched = await CustomerAPI.findByCode(normalizedCode);
+		if (requestToken !== codeCheckToken || normalizedCode !== (formData.code?.trim() || "")) {
+			return;
+		}
+		checkedCode.value = normalizedCode;
+		boundCodeCustomer.value = matched?.id ? matched : undefined;
+	})();
+	try {
+		await pendingCodeCheck;
+	} finally {
+		if (pendingCode === normalizedCode) {
+			pendingCodeCheck = undefined;
+			pendingCode = "";
+		}
+	}
+}
+
 // ---------- 介绍人 ----------

 const selectorVisible = ref(false);
@@ -291,6 +378,18 @@ async function handleIntroducerChange(id: string): Promise<void> {
 const formData = reactive<Customer>({
 });

+watch(() => formData.code, (value) => {
+	if (!isCreateMode.value) {
+		return;
+	}
+	const normalizedCode = value?.trim() || "";
+	if (normalizedCode !== checkedCode.value && normalizedCode !== pendingCode) {
+		codeCheckToken++;
+		checkedCode.value = "";
+		boundCodeCustomer.value = undefined;
+	}
+});
+
 // ---------- 标签 ----------

 const canReadTag = computed(() => userStore.hasPermissions(corePermissionCodes.tag.read));
@@ -312,7 +411,7 @@ async function loadCustomerTags(customerId: string): Promise<void> {
 }

 function openTagSelector(): void {
-	if (!canEditTag.value) {
+	if (!canEditTag.value || isCustomerBound.value) {
 		return;
 	}
 	selectedTagIdList.value = customerTagList.value.map(item => item.id || "").filter(Boolean);
@@ -339,6 +438,9 @@ const selectedAreaText = computed(() => {
 });

 function openBodyAreaPicker(): void {
+	if (isCustomerBound.value) {
+		return;
+	}
 	bodyAreaDraft.value = {
 		selectedCodeList: [...selectedAreas.value.selectedCodeList]
 	};
@@ -350,6 +452,10 @@ function cancelBodyAreaPicker(): void {
 }

 function confirmBodyAreaPicker(): void {
+	if (isCustomerBound.value) {
+		bodyAreaPickerVisible.value = false;
+		return;
+	}
 	selectedAreas.value = {
 		selectedCodeList: [...bodyAreaDraft.value.selectedCodeList]
 	};
@@ -357,10 +463,24 @@ function confirmBodyAreaPicker(): void {
 }

 function openPhotoPicker(target: CustomerAttachmentType): void {
+	if (isCustomerBound.value) {
+		return;
+	}
 	photoPickerTarget.value = target;
 	photoInputRef.value?.click();
 }

+watch(isCustomerBound, (value) => {
+	navBarStore.setRightDisabled(value);
+	if (!value) {
+		return;
+	}
+	scannerVisible.value = false;
+	selectorVisible.value = false;
+	tagSelectorVisible.value = false;
+	bodyAreaPickerVisible.value = false;
+});
+
 const canSubmit = computed(() => formData.name?.trim() && currentStoreStore.currentStoreId);

 async function prepareStoreScope(): Promise<void> {
@@ -408,6 +528,7 @@ onMounted(() => {
 	navBarStore.clearRight();
 	if (userStore.hasPermissions(savePermissionCode.value)) {
 		navBarStore.setRightText("保存", "var(--td-brand-color)", doSubmit);
+		navBarStore.setRightDisabled(isCustomerBound.value);
 	}
 });

@@ -526,6 +647,9 @@ async function doSubmit(): Promise<void> {
 	if (isSubmitting.value) {
 		return;
 	}
+	if (!await ensureCustomerCodeAvailable()) {
+		return;
+	}
 	if (!canSubmit.value) {
 		if (!formData.name?.trim()) {
 			Message.warning("请填写姓名");
@@ -576,6 +700,26 @@ async function doSubmit(): Promise<void> {
 	}
 }

+async function ensureCustomerCodeAvailable(): Promise<boolean> {
+	if (!isCreateMode.value || !formData.code?.trim()) {
+		return true;
+	}
+	await checkBoundCustomerCode();
+	if (!boundCodeCustomer.value?.id) {
+		return true;
+	}
+	Message.warning("该客户编码已绑定客户，不可新录入，请编辑已有客户");
+	return false;
+}
+
+async function toBoundCustomerEdit(): Promise<void> {
+	const customerId = boundCodeCustomer.value?.id;
+	if (!customerId) {
+		return;
+	}
+	await router.push(`/management/customers/${customerId}/edit`);
+}
+
 onUnmounted(() => {
 	navBarStore.clearRight();
 });
@@ -616,6 +760,21 @@ function buildAttachmentList(): Attachment[] {
 			padding: 1rem;
 		}

+		.bound-customer {
+			gap: .75rem;
+			padding: 1rem;
+			display: flex;
+			flex-direction: column;
+			border-radius: 1rem;
+
+			.tips {
+				gap: .25rem;
+				display: flex;
+				font-size: .875rem;
+				align-items: center;
+			}
+		}
+
 		.textarea {
 			width: 100%;
 		}