scanner in CustomerSelector.vue
This commit is contained in:
Timi
@@ -6,7 +6,17 @@
|
||||
class="search"
|
||||
placeholder="搜索客户编码、姓名、拼音或电话"
|
||||
borderless
|
||||
/>
|
||||
>
|
||||
<template #suffix-icon>
|
||||
<t-button
|
||||
size="extra-small"
|
||||
theme="primary"
|
||||
variant="outline"
|
||||
content="选择客户"
|
||||
@click.stop="customerSelectorVisible = true"
|
||||
/>
|
||||
</template>
|
||||
</t-input>
|
||||
</div>
|
||||
<t-pull-down-refresh
|
||||
class="list-wrapper"
|
||||
@@ -37,12 +47,19 @@
|
||||
</t-cell-group>
|
||||
<div class="center-tips" v-text="loadStateText" />
|
||||
</t-pull-down-refresh>
|
||||
<customer-selector
|
||||
v-model="selectedCustomerId"
|
||||
v-model:visible="customerSelectorVisible"
|
||||
@change="handleCustomerChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type PageResult, useUserStore } from "timi-web-api";
|
||||
import CustomerAPI from "@/api/CustomerAPI";
|
||||
import PointAPI from "@/api/PointAPI";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import type { PointAccount, PointAccountPage } from "@/types/Point";
|
||||
import { Message } from "@/utils/message";
|
||||
@@ -71,8 +88,31 @@ async function prepareStoreScope(): Promise<void> {
|
||||
// ---------- 筛选 ----------
|
||||
|
||||
const keyword = ref("");
|
||||
const selectedCustomerId = ref("");
|
||||
const customerSelectorVisible = ref(false);
|
||||
let selectedCustomerKeyword = "";
|
||||
let keywordTimer: number | undefined;
|
||||
|
||||
async function handleCustomerChange(value: string | string[]): Promise<void> {
|
||||
selectedCustomerId.value = Array.isArray(value) ? String(value[0] || "") : value;
|
||||
if (!selectedCustomerId.value) {
|
||||
selectedCustomerKeyword = "";
|
||||
keyword.value = "";
|
||||
await reload();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const customer = await CustomerAPI.detail(selectedCustomerId.value);
|
||||
selectedCustomerKeyword = customer.name?.trim() || customer.code?.trim() || "";
|
||||
keyword.value = selectedCustomerKeyword;
|
||||
await reload();
|
||||
} catch {
|
||||
selectedCustomerKeyword = "";
|
||||
Message.error("客户信息加载失败");
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 分页 ----------
|
||||
|
||||
const page = reactive<PointAccountPage>({
|
||||
@@ -179,6 +219,11 @@ async function toDetail(item: PointAccount): Promise<void> {
|
||||
|
||||
watch(keyword, () => {
|
||||
window.clearTimeout(keywordTimer);
|
||||
if (selectedCustomerKeyword && keyword.value.trim() === selectedCustomerKeyword) {
|
||||
selectedCustomerKeyword = "";
|
||||
return;
|
||||
}
|
||||
selectedCustomerKeyword = "";
|
||||
keywordTimer = window.setTimeout(async () => {
|
||||
await reload();
|
||||
}, 300);
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<t-notice-bar
|
||||
theme="warning"
|
||||
visible
|
||||
content="人工调整会追加一条不可修改的 ADJUST 流水，请填写真实、明确的调整原因。"
|
||||
content="人工调整会追加一条不可修改的积分流水，请填写真实、明确的调整原因。"
|
||||
/>
|
||||
<t-form class="form" label-align="left" label-width="7rem" v-entrance-transition>
|
||||
<t-form-item label="客户" required-mark>
|
||||
@@ -13,24 +13,9 @@
|
||||
size="extra-small"
|
||||
variant="outline"
|
||||
@click="selectorVisible = true"
|
||||
>选择</t-button>
|
||||
<t-button theme="primary" size="extra-small" variant="outline" @click="toggleScanner">
|
||||
<template #icon>
|
||||
<t-icon name="scan" />
|
||||
</template>
|
||||
<span v-text="scannerVisible ? '关闭扫码' : '扫码'" />
|
||||
</t-button>
|
||||
>选择客户</t-button>
|
||||
</div>
|
||||
</t-form-item>
|
||||
<div v-if="scannerVisible" class="scanner-wrapper">
|
||||
<code-scanner
|
||||
visible
|
||||
:status-text="scanStatus"
|
||||
active-text="正在识别客户编码，请将二维码移入取景框"
|
||||
@decode="handleDecodedText"
|
||||
@status-change="handleScanStatusChange"
|
||||
/>
|
||||
</div>
|
||||
<section v-if="selectedCustomer" class="selected-customer">
|
||||
<customer-profile-card :customer="selectedCustomer" />
|
||||
<div class="balance" v-text="balanceText" />
|
||||
@@ -92,11 +77,9 @@ import { useUserStore } from "timi-web-api";
|
||||
import type { PointAction } from "@/types/Point";
|
||||
import CustomerAPI from "@/api/CustomerAPI";
|
||||
import PointAPI from "@/api/PointAPI";
|
||||
import CodeScanner from "@/components/CodeScanner.vue";
|
||||
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import { useSettingStore } from "@/store/settingStore";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import type { PointAccount } from "@/types/Point";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
@@ -110,7 +93,6 @@ const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const currentStoreStore = useCurrentStoreStore();
|
||||
const settingStore = useSettingStore();
|
||||
|
||||
// ---------- 权限与门店 ----------
|
||||
|
||||
@@ -138,28 +120,6 @@ async function handleCustomerChange(value: string | string[]): Promise<void> {
|
||||
await loadCustomerAccount();
|
||||
}
|
||||
|
||||
async function loadCustomerByCode(code: string): Promise<void> {
|
||||
const normalizedCode = code.trim();
|
||||
if (!normalizedCode) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const matched = await CustomerAPI.findByCode(normalizedCode);
|
||||
if (!matched?.id) {
|
||||
Message.warning("未找到客户");
|
||||
return;
|
||||
}
|
||||
selectedCustomerId.value = matched.id;
|
||||
selectedCustomer.value = matched;
|
||||
await loadCustomerAccount();
|
||||
} catch {
|
||||
selectedCustomer.value = undefined;
|
||||
account.value = undefined;
|
||||
Message.error("客户信息加载失败");
|
||||
}
|
||||
}
|
||||
|
||||
async function loadCustomerAccount(): Promise<void> {
|
||||
if (!selectedCustomerId.value) {
|
||||
selectedCustomer.value = undefined;
|
||||
@@ -183,36 +143,6 @@ async function loadCustomerAccount(): Promise<void> {
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 扫码 ----------
|
||||
|
||||
const scannerVisible = ref(false);
|
||||
const scanStatus = ref("点击扫码开始识别");
|
||||
let latestDecodedText = "";
|
||||
|
||||
async function toggleScanner(): Promise<void> {
|
||||
scannerVisible.value = !scannerVisible.value;
|
||||
if (scannerVisible.value) {
|
||||
latestDecodedText = "";
|
||||
scanStatus.value = "正在启动扫码预览";
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDecodedText(rawText: string): Promise<void> {
|
||||
const normalizedText = rawText.trim();
|
||||
if (!normalizedText || normalizedText === latestDecodedText) {
|
||||
return;
|
||||
}
|
||||
latestDecodedText = normalizedText;
|
||||
await settingStore.playScanSuccessSound();
|
||||
scanStatus.value = `已识别 ${normalizedText}，正在加载客户档案`;
|
||||
scannerVisible.value = false;
|
||||
await loadCustomerByCode(normalizedText);
|
||||
}
|
||||
|
||||
function handleScanStatusChange(value: string): void {
|
||||
scanStatus.value = value;
|
||||
}
|
||||
|
||||
// ---------- 调整表单 ----------
|
||||
|
||||
const pointDeltaText = ref("");
|
||||
@@ -322,10 +252,6 @@ onMounted(async () => {
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.scanner-wrapper {
|
||||
margin: 1rem .75rem .75rem;
|
||||
}
|
||||
|
||||
.selected-customer {
|
||||
margin: 1rem .75rem .5rem;
|
||||
|
||||
|
||||
@@ -2,33 +2,25 @@
|
||||
<div v-can="permissionCodes.point.ledgerRead" class="point-ledger-list">
|
||||
<div class="header bg-white">
|
||||
<div class="buttons">
|
||||
<t-button
|
||||
class="selector"
|
||||
size="small"
|
||||
theme="primary"
|
||||
variant="outline"
|
||||
@click="selectorVisible = true"
|
||||
<t-input
|
||||
v-model.trim="customerKeyword"
|
||||
class="search"
|
||||
borderless
|
||||
clearable
|
||||
placeholder="输入客户编码或姓名"
|
||||
@clear="applyCustomerSearch"
|
||||
@enter="applyCustomerSearch"
|
||||
>
|
||||
<template #icon>
|
||||
<t-icon name="user-search" />
|
||||
<template #suffix-icon>
|
||||
<t-button
|
||||
size="extra-small"
|
||||
theme="primary"
|
||||
variant="outline"
|
||||
content="选择客户"
|
||||
@click.stop="selectorVisible = true"
|
||||
/>
|
||||
</template>
|
||||
<span v-text="customerFilterText" />
|
||||
</t-button>
|
||||
<t-button size="small" theme="primary" @click="toggleScanner">
|
||||
<template #icon>
|
||||
<t-icon name="scan" />
|
||||
</template>
|
||||
<span v-text="scannerVisible ? '关闭扫码' : '扫码'" />
|
||||
</t-button>
|
||||
</div>
|
||||
<div v-if="scannerVisible" class="line scanner-wrapper">
|
||||
<code-scanner
|
||||
visible
|
||||
:status-text="scanStatus"
|
||||
active-text="正在识别客户编码，请将二维码移入取景框"
|
||||
@decode="handleDecodedText"
|
||||
@status-change="handleScanStatusChange"
|
||||
/>
|
||||
</t-input>
|
||||
</div>
|
||||
<div class="filters">
|
||||
<t-dropdown-menu>
|
||||
@@ -160,10 +152,8 @@ import { Time } from "timi-web";
|
||||
import { type PageResult, useUserStore } from "timi-web-api";
|
||||
import CustomerAPI from "@/api/CustomerAPI";
|
||||
import PointAPI from "@/api/PointAPI";
|
||||
import CodeScanner from "@/components/CodeScanner.vue";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import { useSettingStore } from "@/store/settingStore";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import type { PointLedger, PointLedgerChangeType, PointLedgerPage } from "@/types/Point";
|
||||
import { getCustomerPhotoURL } from "@/utils/customer";
|
||||
@@ -180,7 +170,6 @@ const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const currentStoreStore = useCurrentStoreStore();
|
||||
const settingStore = useSettingStore();
|
||||
|
||||
// ---------- 筛选 ----------
|
||||
|
||||
@@ -188,6 +177,7 @@ const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalMan
|
||||
const selectedCustomerId = ref(String(route.query.customerId || ""));
|
||||
const selectedAccountId = ref(String(route.query.accountId || ""));
|
||||
const customer = ref<Customer>();
|
||||
const customerKeyword = ref("");
|
||||
const selectorVisible = ref(false);
|
||||
const changeTypeFilter = ref("ALL");
|
||||
const dateFilter = ref<DateFilter>("last30");
|
||||
@@ -208,7 +198,6 @@ const dateFilterOptions = [
|
||||
{ label: "近 30 天", value: "last30" },
|
||||
{ label: "自定义", value: "custom" }
|
||||
];
|
||||
const customerFilterText = computed(() => customer.value?.name || customer.value?.code || "全部客户");
|
||||
const dateFilterLabel = computed(() => dateFilterOptions.find(item => item.value === dateFilter.value)?.label || "时间范围");
|
||||
const isCustomDate = computed(() => dateFilter.value === "custom");
|
||||
|
||||
@@ -216,32 +205,46 @@ async function handleCustomerChange(value: string | string[]): Promise<void> {
|
||||
selectedCustomerId.value = Array.isArray(value) ? String(value[0] || "") : value;
|
||||
if (selectedCustomerId.value) {
|
||||
customer.value = await CustomerAPI.detail(selectedCustomerId.value);
|
||||
customerKeyword.value = getCustomerSearchKeyword(customer.value);
|
||||
} else {
|
||||
customer.value = undefined;
|
||||
customerKeyword.value = "";
|
||||
}
|
||||
await reload();
|
||||
}
|
||||
|
||||
async function loadCustomerByCode(code: string): Promise<void> {
|
||||
const normalizedCode = code.trim();
|
||||
if (!normalizedCode) {
|
||||
async function applyCustomerSearch(): Promise<void> {
|
||||
const keyword = customerKeyword.value.trim();
|
||||
if (!keyword) {
|
||||
selectedCustomerId.value = "";
|
||||
customer.value = undefined;
|
||||
await reload();
|
||||
return;
|
||||
}
|
||||
if (keyword === getCustomerSearchKeyword(customer.value)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const matched = await CustomerAPI.findByCode(normalizedCode);
|
||||
const matched = await CustomerAPI.findByCode(keyword, currentStoreStore.currentStoreId || undefined)
|
||||
|| await CustomerAPI.findByName(keyword);
|
||||
if (!matched?.id) {
|
||||
Message.warning("未找到客户");
|
||||
return;
|
||||
}
|
||||
selectedCustomerId.value = matched.id;
|
||||
customer.value = matched;
|
||||
customerKeyword.value = getCustomerSearchKeyword(matched);
|
||||
await reload();
|
||||
} catch {
|
||||
Message.error("客户信息加载失败");
|
||||
}
|
||||
}
|
||||
|
||||
function getCustomerSearchKeyword(value?: Customer): string {
|
||||
return value?.name?.trim() || value?.code?.trim() || "";
|
||||
}
|
||||
|
||||
async function selectChangeType(value: DropdownValue): Promise<void> {
|
||||
if (Array.isArray(value)) {
|
||||
return;
|
||||
@@ -270,36 +273,6 @@ async function confirmDateRange(): Promise<void> {
|
||||
await reload();
|
||||
}
|
||||
|
||||
// ---------- 扫码 ----------
|
||||
|
||||
const scannerVisible = ref(false);
|
||||
const scanStatus = ref("点击扫码开始识别");
|
||||
let latestDecodedText = "";
|
||||
|
||||
async function toggleScanner(): Promise<void> {
|
||||
scannerVisible.value = !scannerVisible.value;
|
||||
if (scannerVisible.value) {
|
||||
latestDecodedText = "";
|
||||
scanStatus.value = "正在启动扫码预览";
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDecodedText(rawText: string): Promise<void> {
|
||||
const normalizedText = rawText.trim();
|
||||
if (!normalizedText || normalizedText === latestDecodedText) {
|
||||
return;
|
||||
}
|
||||
latestDecodedText = normalizedText;
|
||||
await settingStore.playScanSuccessSound();
|
||||
scanStatus.value = `已识别 ${normalizedText}，正在加载积分流水`;
|
||||
scannerVisible.value = false;
|
||||
await loadCustomerByCode(normalizedText);
|
||||
}
|
||||
|
||||
function handleScanStatusChange(value: string): void {
|
||||
scanStatus.value = value;
|
||||
}
|
||||
|
||||
// ---------- 分页 ----------
|
||||
|
||||
const page = reactive<PointLedgerPage>({
|
||||
@@ -490,6 +463,7 @@ async function preparePage(): Promise<void> {
|
||||
}
|
||||
if (selectedCustomerId.value) {
|
||||
customer.value = await CustomerAPI.detail(selectedCustomerId.value);
|
||||
customerKeyword.value = getCustomerSearchKeyword(customer.value);
|
||||
}
|
||||
await reload();
|
||||
}
|
||||
@@ -518,12 +492,15 @@ onMounted(async () => {
|
||||
position: fixed;
|
||||
|
||||
.buttons {
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
|
||||
.selector {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
.search {
|
||||
--td-input-vertical-padding: .25rem 1rem;
|
||||
|
||||
width: 100%;
|
||||
border: 1px solid var(--td-component-border);
|
||||
padding-right: .3rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -531,10 +508,6 @@ onMounted(async () => {
|
||||
margin: .5rem -1rem 0;
|
||||
}
|
||||
|
||||
.scanner-wrapper {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
:deep(.t-dropdown-menu) {
|
||||
background: transparent;
|
||||
}
|
||||
@@ -610,7 +583,7 @@ onMounted(async () => {
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.point-ledger-list {
|
||||
.selector {
|
||||
.search {
|
||||
background: #10161f;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user