init project
This commit is contained in:
Timi
@@ -0,0 +1,576 @@
|
||||
<template>
|
||||
<div v-can="gaoPermissionCodes.registrationEventRecord.create" class="quick-entry-page">
|
||||
<t-form class="form" label-align="left" label-width="6rem">
|
||||
<t-form-item label="客户编码" required-mark>
|
||||
<t-input
|
||||
v-model.trim="scanCode"
|
||||
placeholder="输入或扫描二维码"
|
||||
borderless
|
||||
@blur="applyScanCode"
|
||||
:tips="scanResult"
|
||||
:status="scanStatus"
|
||||
>
|
||||
<template #suffix-icon>
|
||||
<t-button
|
||||
theme="primary"
|
||||
size="extra-small"
|
||||
@click="toggleScanner"
|
||||
>
|
||||
<span v-text="scannerVisible ? '关闭扫码' : '扫码'" />
|
||||
</t-button>
|
||||
</template>
|
||||
</t-input>
|
||||
</t-form-item>
|
||||
<div v-if="scannerVisible" class="code-scanner-wrapper">
|
||||
<code-scanner
|
||||
visible
|
||||
:status-text="scannerTips"
|
||||
active-text="正在识别客户编码，请将二维码移入取景框"
|
||||
@decode="handleDecodedText"
|
||||
@status-change="handleScanStatusChange"
|
||||
/>
|
||||
</div>
|
||||
<t-form-item label="客户姓名" required-mark>
|
||||
<t-input
|
||||
v-model.trim="customerName"
|
||||
placeholder="输入或选择已存档客户"
|
||||
borderless
|
||||
@blur="applyCustomerName"
|
||||
:tips="customerTips"
|
||||
:status="customerStatus"
|
||||
>
|
||||
<template #suffix-icon>
|
||||
<t-button
|
||||
theme="primary"
|
||||
size="extra-small"
|
||||
@click="selectorVisible = true"
|
||||
>选择</t-button>
|
||||
</template>
|
||||
</t-input>
|
||||
</t-form-item>
|
||||
<t-form-item label="客户照片">
|
||||
<photo-field
|
||||
v-model="supplementPhoto"
|
||||
alt-text="客户照片"
|
||||
:preview="false"
|
||||
@add="selectSupplementPhoto"
|
||||
@clear="clearSupplementPhoto"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label-width="0">
|
||||
<registration-event-selector
|
||||
v-model="selectedRegistrationEventIdList"
|
||||
class="registration-event-selector"
|
||||
:registration-event-list="registrationEventList"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label="登记备注">
|
||||
<t-textarea
|
||||
v-model.trim="note"
|
||||
class="textarea"
|
||||
:autosize="{ minRows: 3, maxRows: 5 }"
|
||||
placeholder="现场说明"
|
||||
/>
|
||||
</t-form-item>
|
||||
<div class="photo-part">
|
||||
<photo-scroller
|
||||
title="登记事件照片"
|
||||
v-model="photoList"
|
||||
@add="selectRecordPhoto"
|
||||
/>
|
||||
</div>
|
||||
</t-form>
|
||||
<input
|
||||
ref="supplementPhotoInputRef"
|
||||
class="file-input"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
@change="handleSupplementPhotoSelected"
|
||||
>
|
||||
<input
|
||||
ref="recordPhotoInputRef"
|
||||
class="file-input"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
multiple
|
||||
@change="handleRecordPhotoSelected"
|
||||
>
|
||||
<t-button theme="primary" class="save" :disabled="!canSubmit" :loading="saving" @click="saveRecord">提交</t-button>
|
||||
</div>
|
||||
<customer-selector
|
||||
v-model="selectedCustomerId"
|
||||
v-model:visible="selectorVisible"
|
||||
@change="handleCustomerChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { AttachmentAPI } from "timi-web";
|
||||
import type { TdInputProps } from "tdesign-mobile-vue";
|
||||
import { Toast } from "tdesign-mobile-vue";
|
||||
import CustomerAPI from "@/api/CustomerAPI";
|
||||
import RegistrationEventAPI from "@/api/RegistrationEventAPI";
|
||||
import CodeScanner from "@/components/CodeScanner.vue";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import PhotoField from "@/components/PhotoField.vue";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import { useSettingStore } from "@/store/settingStore";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import type { RegistrationEvent } from "@/types/RegistrationEvent";
|
||||
import { getCustomerPhotoURL } from "@/utils/customer";
|
||||
import { gaoPermissionCodes } from "@/utils/gaoPermission";
|
||||
import { compressUploadImage, compressUploadImageList } from "@/utils/imageCompression";
|
||||
import RegistrationEventSelector from "@/components/RegistrationEventSelector.vue";
|
||||
|
||||
defineOptions({
|
||||
name: "QuickEntryPage"
|
||||
});
|
||||
|
||||
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 registrationEventList = ref<RegistrationEvent[]>([]);
|
||||
const selectedRegistrationEventIdList = ref<string[]>([]);
|
||||
const note = ref("");
|
||||
const photoList = ref<string[]>([]);
|
||||
const saving = ref(false);
|
||||
const canSubmit = computed(() => !!getInputCode() && !!customerName.value.trim());
|
||||
let latestDecodedText = "";
|
||||
|
||||
// ---------- 扫码 ----------
|
||||
const scanCode = ref("");
|
||||
const currentCode = ref("");
|
||||
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> {
|
||||
scannerVisible.value = !scannerVisible.value;
|
||||
if (scannerVisible.value) {
|
||||
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 applyScanCode();
|
||||
}
|
||||
|
||||
async function applyScanCode(): Promise<void> {
|
||||
const normalizedCode = scanCode.value.trim();
|
||||
if (!normalizedCode) {
|
||||
return;
|
||||
}
|
||||
currentCode.value = normalizedCode;
|
||||
await checkCustomerCode(normalizedCode);
|
||||
applyBoundCustomerIfNeeded();
|
||||
refreshInputTips();
|
||||
}
|
||||
|
||||
function handleScanStatusChange(value: string): void {
|
||||
scannerTips.value = value;
|
||||
}
|
||||
|
||||
// ---------- 补录客户 ----------
|
||||
const customerName = ref("");
|
||||
const currentCustomer = ref<Customer>();
|
||||
const customerTips = ref("");
|
||||
const customerStatus = ref<TdInputProps["status"]>("warning");
|
||||
const selectorVisible = ref(false);
|
||||
const selectedCustomerId = ref("");
|
||||
|
||||
async function ensureNewCustomerCode(code: string): Promise<boolean> {
|
||||
await checkCustomerCode(code);
|
||||
applyBoundCustomerIfNeeded();
|
||||
refreshInputTips();
|
||||
return !isCodeBoundToOtherCustomer();
|
||||
}
|
||||
|
||||
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);
|
||||
customerTips.value = "";
|
||||
if (!getInputCode() && customer.code) {
|
||||
fillCodeFromCustomer(customer);
|
||||
return;
|
||||
}
|
||||
if (getInputCode()) {
|
||||
await ensureCodeChecked();
|
||||
}
|
||||
refreshInputTips();
|
||||
}
|
||||
|
||||
async function applyCustomerName(): Promise<void> {
|
||||
const normalizedName = customerName.value.trim();
|
||||
if (!normalizedName) {
|
||||
currentCustomer.value = undefined;
|
||||
selectedCustomerId.value = "";
|
||||
customerTips.value = "";
|
||||
refreshInputTips();
|
||||
return;
|
||||
}
|
||||
const matched = await findCustomerByName(normalizedName);
|
||||
if (!matched) {
|
||||
currentCustomer.value = undefined;
|
||||
selectedCustomerId.value = "";
|
||||
customerTips.value = "客户暂无档案，提交登记时会自动新开客户档案";
|
||||
refreshInputTips();
|
||||
return;
|
||||
}
|
||||
currentCustomer.value = matched;
|
||||
selectedCustomerId.value = matched.id || "";
|
||||
customerName.value = matched.name || normalizedName;
|
||||
syncSupplementPhotoFromCustomer(matched);
|
||||
customerTips.value = "已匹配客户";
|
||||
if (!getInputCode() && matched.code) {
|
||||
fillCodeFromCustomer(matched);
|
||||
return;
|
||||
}
|
||||
if (getInputCode()) {
|
||||
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);
|
||||
}
|
||||
|
||||
function fillCodeFromCustomer(customer: Customer): void {
|
||||
const code = customer.code || "";
|
||||
if (!code) {
|
||||
refreshInputTips();
|
||||
return;
|
||||
}
|
||||
|
||||
scanCode.value = code;
|
||||
currentCode.value = code;
|
||||
checkedCode.value = code;
|
||||
boundCodeCustomer.value = customer;
|
||||
refreshInputTips();
|
||||
}
|
||||
|
||||
async function ensureCodeChecked(): Promise<void> {
|
||||
const code = getInputCode();
|
||||
if (!code || checkedCode.value === code) {
|
||||
return;
|
||||
}
|
||||
|
||||
await checkCustomerCode(code);
|
||||
}
|
||||
|
||||
async function checkCustomerCode(code: string): Promise<void> {
|
||||
const normalizedCode = code.trim();
|
||||
if (!normalizedCode) {
|
||||
checkedCode.value = "";
|
||||
boundCodeCustomer.value = undefined;
|
||||
refreshInputTips();
|
||||
return;
|
||||
}
|
||||
|
||||
checkedCode.value = normalizedCode;
|
||||
boundCodeCustomer.value = await CustomerAPI.nullableDetailByCode(normalizedCode) || undefined;
|
||||
scannerVisible.value = false;
|
||||
}
|
||||
|
||||
function applyBoundCustomerIfNeeded(): void {
|
||||
const boundCustomer = boundCodeCustomer.value;
|
||||
if (!boundCustomer?.id || currentCustomer.value?.id || customerName.value.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
currentCustomer.value = boundCustomer;
|
||||
selectedCustomerId.value = boundCustomer.id;
|
||||
customerName.value = boundCustomer.name || "";
|
||||
syncSupplementPhotoFromCustomer(boundCustomer);
|
||||
customerTips.value = "";
|
||||
}
|
||||
|
||||
function refreshInputTips(): void {
|
||||
scanStatus.value = "warning";
|
||||
customerStatus.value = "warning";
|
||||
|
||||
const code = getInputCode();
|
||||
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 ? "提交将会使用此编码" : "编码可用";
|
||||
}
|
||||
|
||||
function isCodeBoundToOtherCustomer(): boolean {
|
||||
const boundCustomerId = boundCodeCustomer.value?.id;
|
||||
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 || "未命名客户";
|
||||
}
|
||||
|
||||
// ---------- 照片 ----------
|
||||
|
||||
function selectSupplementPhoto(): void {
|
||||
supplementPhotoInputRef.value?.click();
|
||||
}
|
||||
|
||||
function clearSupplementPhoto(): void {
|
||||
supplementPhotoTempFileId.value = "";
|
||||
}
|
||||
|
||||
function syncSupplementPhotoFromCustomer(customer?: Customer): void {
|
||||
supplementPhotoTempFileId.value = "";
|
||||
supplementPhoto.value = getCustomerPhotoURL(customer);
|
||||
}
|
||||
|
||||
async function handleSupplementPhotoSelected(event: Event): Promise<void> {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
const compressedFile = await compressUploadImage(file);
|
||||
const [tempFile] = await AttachmentAPI.uploadTemp(compressedFile);
|
||||
if (!tempFile?.id) {
|
||||
showToast("客户照片上传失败", "warning");
|
||||
return;
|
||||
}
|
||||
supplementPhotoTempFileId.value = tempFile.id;
|
||||
supplementPhoto.value = AttachmentAPI.getTempReadURL(tempFile.id);
|
||||
input.value = "";
|
||||
}
|
||||
|
||||
function selectRecordPhoto(): void {
|
||||
recordPhotoInputRef.value?.click();
|
||||
}
|
||||
|
||||
async function handleRecordPhotoSelected(event: Event): Promise<void> {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const fileList = Array.from(input.files || []);
|
||||
if (!fileList.length) {
|
||||
return;
|
||||
}
|
||||
const compressedFileList = await compressUploadImageList(fileList);
|
||||
const tempFileList = await AttachmentAPI.uploadTemp(compressedFileList);
|
||||
for (const item of tempFileList) {
|
||||
if (!item.id) {
|
||||
continue;
|
||||
}
|
||||
recordPhotoTempFileIdList.value.push(item.id);
|
||||
photoList.value.push(AttachmentAPI.getTempReadURL(item.id));
|
||||
}
|
||||
input.value = "";
|
||||
}
|
||||
|
||||
// ---------- 提交 ----------
|
||||
|
||||
async function saveRecord(): Promise<void> {
|
||||
const customerCode = validateForm();
|
||||
if (!customerCode) {
|
||||
return;
|
||||
}
|
||||
|
||||
saving.value = true;
|
||||
try {
|
||||
if (!await ensureNewCustomerCode(customerCode)) {
|
||||
return;
|
||||
}
|
||||
await applyCustomerName();
|
||||
await saveCustomerProfile(customerCode);
|
||||
if (selectedRegistrationEventIdList.value.length) {
|
||||
for (const registrationEventId of selectedRegistrationEventIdList.value) {
|
||||
await CustomerAPI.quickRegister({
|
||||
customerCode,
|
||||
registrationEventId,
|
||||
remark: note.value || "前台快速登记",
|
||||
attachmentIdList: recordPhotoTempFileIdList.value
|
||||
});
|
||||
}
|
||||
}
|
||||
note.value = "";
|
||||
customerName.value = "";
|
||||
photoList.value = [];
|
||||
recordPhotoTempFileIdList.value = [];
|
||||
await settingStore.playRegisterSuccessSound();
|
||||
showToast("登记已提交");
|
||||
await router.replace("/customers");
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function saveCustomerProfile(customerCode: string): Promise<void> {
|
||||
const normalizedName = customerName.value.trim();
|
||||
const attachmentIdList = supplementPhotoTempFileId.value ? [supplementPhotoTempFileId.value] : undefined;
|
||||
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
|
||||
});
|
||||
}
|
||||
|
||||
function validateForm(): string {
|
||||
const customerCode = (currentCode.value || scanCode.value).trim();
|
||||
if (!customerCode) {
|
||||
showToast("请先输入或扫码客户编码", "warning");
|
||||
return "";
|
||||
}
|
||||
if (!customerName.value.trim()) {
|
||||
showToast("请填写客户姓名", "warning");
|
||||
return "";
|
||||
}
|
||||
|
||||
return customerCode;
|
||||
}
|
||||
|
||||
function showToast(message: string, theme: "success" | "warning" = "success"): void {
|
||||
Toast({
|
||||
theme,
|
||||
direction: "row",
|
||||
message
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- 初始化 ----------
|
||||
|
||||
onMounted(async () => {
|
||||
registrationEventList.value = await RegistrationEventAPI.enabledList();
|
||||
});
|
||||
|
||||
watch(scanCode, (value) => {
|
||||
const normalizedCode = value.trim();
|
||||
currentCode.value = normalizedCode;
|
||||
if (checkedCode.value && checkedCode.value !== normalizedCode) {
|
||||
checkedCode.value = "";
|
||||
boundCodeCustomer.value = undefined;
|
||||
}
|
||||
refreshInputTips();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.quick-entry-page {
|
||||
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,
|
||||
.photo-part {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.empty-block {
|
||||
padding: 1rem;
|
||||
color: #52607a;
|
||||
text-align: center;
|
||||
background: #f8fbff;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.save {
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.quick-entry-page {
|
||||
|
||||
: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);
|
||||
}
|
||||
|
||||
.registration-event-selector {
|
||||
|
||||
:deep(.item),
|
||||
.empty-block {
|
||||
color: #e2e8f0;
|
||||
background: rgba(15, 23, 42, .72);
|
||||
border-color: rgba(148, 163, 184, .16);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.textarea .t-textarea__inner) {
|
||||
color: #e2e8f0;
|
||||
background: rgba(15, 23, 42, .72);
|
||||
border-color: rgba(148, 163, 184, .16);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,445 @@
|
||||
<template>
|
||||
<div v-can="gaoPermissionCodes.registrationEventRecord.create" class="quick-sign-in-page">
|
||||
<button class="registration-event-select" type="button" @click="registrationEventSelectorVisible = true">
|
||||
<span class="required-label">登记事件</span>
|
||||
<strong v-text="selectedRegistrationEventName" />
|
||||
<t-icon name="chevron-right" />
|
||||
</button>
|
||||
<code-scanner
|
||||
visible
|
||||
:session-key="scannerSessionKey"
|
||||
:status-text="scanStatus"
|
||||
active-text="请将客户二维码移入取景框"
|
||||
@decode="handleDecodedText"
|
||||
@status-change="handleScanStatusChange"
|
||||
/>
|
||||
<div class="code-box">
|
||||
<span class="required-label">扫出编码</span>
|
||||
<strong v-text="scanCode || '未识别'" />
|
||||
</div>
|
||||
<customer-profile-card
|
||||
v-if="matchedCustomer"
|
||||
:customer="matchedCustomer"
|
||||
/>
|
||||
<t-cell-group
|
||||
v-if="recentRecordList.length"
|
||||
title="最近登记记录"
|
||||
theme="card"
|
||||
>
|
||||
<t-cell
|
||||
v-for="item in recentRecordList"
|
||||
:key="item.id"
|
||||
:title="getRecordRegistrationEventName(item)"
|
||||
:description="formatTime(item.registeredAt)"
|
||||
:note="item.remark || '无备注'"
|
||||
arrow
|
||||
hover
|
||||
@click="goRecordDetail(item.id || '')"
|
||||
>
|
||||
<template #leftIcon>
|
||||
<t-image
|
||||
v-if="getRecordPhotoURL(item)"
|
||||
:src="getRecordPhotoURL(item)"
|
||||
:alt="getRecordRegistrationEventName(item)"
|
||||
fit="cover"
|
||||
class="record-photo"
|
||||
/>
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<t-button
|
||||
class="submit"
|
||||
theme="primary"
|
||||
:disabled="!canSubmitRegister"
|
||||
:loading="submitting"
|
||||
@click="submitRegister"
|
||||
>登记</t-button>
|
||||
</div>
|
||||
<t-popup v-model="registrationEventSelectorVisible" placement="bottom">
|
||||
<div class="registration-event-panel">
|
||||
<div class="title">登记事件</div>
|
||||
<t-cell-group v-if="registrationEventList.length" theme="card">
|
||||
<t-cell
|
||||
v-for="item in registrationEventList"
|
||||
:key="item.id"
|
||||
:title="item.name"
|
||||
:note="item.id === selectedRegistrationEventId ? '当前使用' : ''"
|
||||
@click="selectRegistrationEvent(item.id || '')"
|
||||
/>
|
||||
</t-cell-group>
|
||||
<div v-else class="empty-block">暂无可用登记事件</div>
|
||||
</div>
|
||||
</t-popup>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Toast } from "tdesign-mobile-vue";
|
||||
import CustomerAPI from "@/api/CustomerAPI";
|
||||
import RegistrationEventAPI from "@/api/RegistrationEventAPI";
|
||||
import RegistrationEventRecordAPI from "@/api/RegistrationEventRecordAPI";
|
||||
import CodeScanner from "@/components/CodeScanner.vue";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import { useSettingStore } from "@/store/settingStore";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import type { RegistrationEvent } from "@/types/RegistrationEvent";
|
||||
import type { RegistrationEventRecord } from "@/types/RegistrationEventRecord";
|
||||
import { gaoPermissionCodes } from "@/utils/gaoPermission";
|
||||
import { getRegistrationEventRecordPhotoURL } from "@/utils/registrationEventRecord";
|
||||
import { Time } from "timi-web";
|
||||
|
||||
defineOptions({
|
||||
name: "QuickSignInPage"
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
const registrationEventStorageKey = "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<RegistrationEventRecord[]>([]);
|
||||
const registrationEventList = ref<RegistrationEvent[]>([]);
|
||||
const selectedRegistrationEventId = ref("");
|
||||
const registrationEventSelectorVisible = ref(false);
|
||||
const submitting = ref(false);
|
||||
let latestDecodedText = "";
|
||||
|
||||
const selectedRegistrationEventName = computed(() => registrationEventList.value.find(item => item.id === selectedRegistrationEventId.value)?.name || "请选择登记事件");
|
||||
const canSubmitRegister = computed(() => !!matchedCustomer.value && !!selectedRegistrationEventId.value);
|
||||
|
||||
// ---------- 扫码 ----------
|
||||
|
||||
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}，可直接登记。`;
|
||||
return;
|
||||
}
|
||||
|
||||
scanStatus.value = `已识别 ${normalizedText}，但未匹配客户档案。`;
|
||||
}
|
||||
|
||||
function handleScanStatusChange(value: string): void {
|
||||
scanStatus.value = value;
|
||||
}
|
||||
|
||||
// ---------- 提交 ----------
|
||||
|
||||
async function submitRegister(): Promise<void> {
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const customer = matchedCustomer.value;
|
||||
if (!customer) {
|
||||
return;
|
||||
}
|
||||
|
||||
submitting.value = true;
|
||||
try {
|
||||
await CustomerAPI.quickRegister({
|
||||
customerCode: customer.code || scanCode.value,
|
||||
registrationEventId: selectedRegistrationEventId.value,
|
||||
remark: "客户快速扫码登记"
|
||||
});
|
||||
scanStatus.value = `登记成功：${customer.name || customer.code || scanCode.value}。`;
|
||||
scanCode.value = "";
|
||||
matchedCustomer.value = undefined;
|
||||
recentRecordList.value = [];
|
||||
latestDecodedText = "";
|
||||
scannerSessionKey.value += 1;
|
||||
await settingStore.playRegisterSuccessSound();
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function validateForm(): boolean {
|
||||
if (!selectedRegistrationEventId.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 RegistrationEventRecordAPI.rangeList({
|
||||
customerId,
|
||||
beginRegisteredAt: 0,
|
||||
endRegisteredAt: 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 getRecordRegistrationEventName(record: RegistrationEventRecord): string {
|
||||
return record.registrationEvent?.name || "未知事件";
|
||||
}
|
||||
|
||||
function getRecordPhotoURL(record: RegistrationEventRecord): string {
|
||||
return getRegistrationEventRecordPhotoURL(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> {
|
||||
registrationEventList.value = await RegistrationEventAPI.enabledList();
|
||||
const storedRegistrationEventId = loadStoredRegistrationEventId();
|
||||
const storedAction = registrationEventList.value.find(item => item.id === storedRegistrationEventId);
|
||||
selectedRegistrationEventId.value = storedAction?.id || registrationEventList.value[0]?.id || "";
|
||||
saveStoredRegistrationEventId(selectedRegistrationEventId.value);
|
||||
}
|
||||
|
||||
function selectRegistrationEvent(registrationEventId: string | number | Array<string | number>): void {
|
||||
if (Array.isArray(registrationEventId)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextRegistrationEventId = String(registrationEventId);
|
||||
if (!nextRegistrationEventId) {
|
||||
return;
|
||||
}
|
||||
|
||||
selectedRegistrationEventId.value = nextRegistrationEventId;
|
||||
saveStoredRegistrationEventId(nextRegistrationEventId);
|
||||
registrationEventSelectorVisible.value = false;
|
||||
showToast("登记事件已切换");
|
||||
}
|
||||
|
||||
function loadStoredRegistrationEventId(): string {
|
||||
if (typeof window === "undefined") {
|
||||
return "";
|
||||
}
|
||||
|
||||
return window.localStorage.getItem(registrationEventStorageKey) || "";
|
||||
}
|
||||
|
||||
function saveStoredRegistrationEventId(registrationEventId: string): void {
|
||||
if (typeof window === "undefined" || !registrationEventId) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.localStorage.setItem(registrationEventStorageKey, registrationEventId);
|
||||
}
|
||||
|
||||
function showToast(message: string, theme: "success" | "warning" = "success"): void {
|
||||
Toast({
|
||||
theme,
|
||||
direction: "row",
|
||||
message
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(loadActions);
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.quick-sign-in-page {
|
||||
gap: 1rem;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 1rem 6rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.panel,
|
||||
.bottom-bar {
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, .94);
|
||||
border-radius: 1.4rem;
|
||||
box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .08);
|
||||
}
|
||||
|
||||
.registration-event-select {
|
||||
gap: .5rem;
|
||||
border: 0;
|
||||
padding: .875rem 1rem;
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
text-align: left;
|
||||
background: rgba(255, 255, 255, .94);
|
||||
box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .08);
|
||||
align-items: center;
|
||||
border-radius: .875rem;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
|
||||
span {
|
||||
color: #52607a;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #0f172a;
|
||||
overflow: hidden;
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.code-box {
|
||||
padding: .875rem;
|
||||
background: #f7faff;
|
||||
border: 1px solid rgba(148, 163, 184, .2);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.required-label::before {
|
||||
color: #e34d59;
|
||||
content: "*";
|
||||
margin-right: .25rem;
|
||||
}
|
||||
|
||||
.code-box {
|
||||
display: grid;
|
||||
margin-top: .875rem;
|
||||
gap: .375rem;
|
||||
|
||||
span {
|
||||
color: #52607a;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.submit {
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.record-photo {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
border-radius: .875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.registration-event-panel {
|
||||
gap: .875rem;
|
||||
padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0)) 0;
|
||||
display: flex;
|
||||
background: #f5f5f8;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
color: #0f172a;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.empty-block {
|
||||
color: #52607a;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.quick-sign-in-page {
|
||||
.panel,
|
||||
.bottom-bar {
|
||||
background: rgba(15, 23, 42, .88);
|
||||
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
|
||||
}
|
||||
|
||||
.registration-event-select {
|
||||
background: rgba(15, 23, 42, .88);
|
||||
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
|
||||
|
||||
span {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
}
|
||||
|
||||
.code-box {
|
||||
background: rgba(30, 41, 59, .9);
|
||||
border-color: rgba(148, 163, 184, .16);
|
||||
}
|
||||
|
||||
.code-box span {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
|
||||
.registration-event-panel {
|
||||
background: #10161f;
|
||||
|
||||
.title {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.empty-block {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user