timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add customer filter

Browse Source
This commit is contained in:
Timi
2026-09-18 18:25:55 +08:00
parent f2f990bd3b
commit 7d0bd38de2
1 changed files with 119 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/salesOrder/FundRecordList.vue
+119 -15
View File
@@ -1,6 +1,36 @@
<template>
<div v-can="pageAccess" class="sales-order-record-list">
<div class="filters">
<t-input
class="customer"
v-model.trim="customerSearchKeyword"
borderless
placeholder="输入客户编码或姓名"
@enter="applyCustomerSearch"
>
<template #suffix-icon>
<div class="actions">
<t-button
v-if="customerId"
shape="circle"
theme="danger"
variant="text"
size="extra-small"
aria-label="清除客户选择"
@click.stop="clearCustomer"
>
<t-icon name="close" size="1rem" />
</t-button>
<t-button
size="extra-small"
theme="primary"
variant="outline"
content="选择客户"
@click.stop="customerSelectorVisible = true"
/>
</div>
</template>
</t-input>
<t-dropdown-menu class="menus">
<t-dropdown-item
v-if="!isSelfReceiveOnly"
@@ -89,13 +119,21 @@
<div class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh>
</div>
<customer-selector
v-model="customerId"
v-model:visible="customerSelectorVisible"
@change="handleCustomerChange"
/>
</template>
<script setup lang="ts">
import { type DropdownValue } from "tdesign-mobile-vue";
import { useUserStore } from "timi-web-api";
import CustomerAPI from "@/api/CustomerAPI";
import SalesOrderAPI from "@/api/SalesOrderAPI";
import CustomerSelector from "@/components/CustomerSelector.vue";
import { useNavBarStore } from "@/store/navBarStore";
import type { Customer } from "@/types/Customer";
import type { FundOperationType, FundRecord, FundRecordStatus } from "@/types/SalesOrder";
import { getErrorMessage } from "@/utils/error";
import { formatPackageAmount } from "@/utils/package";
@@ -119,6 +157,10 @@ const total = ref(0);
const loading = ref(false);
const isRefreshing = ref(false);
const noMore = ref(false);
const customerId = ref(getQueryText(route.query.customerId));
const selectedCustomer = ref<Customer>();
const customerSelectorVisible = ref(false);
const customerSearchKeyword = ref("");
const isSelfReceiveOnly = computed(() => !userStore.hasPermissions(permissionCodes.fundRecord.read)
&& userStore.hasPermissions(permissionCodes.fundReceive.create));
const pageAccess = computed(() => [permissionCodes.fundRecord.read, permissionCodes.fundReceive.create]);
@@ -138,6 +180,10 @@ const statusOptions = [
];
const loadStateText = computed(() => loading.value ? "正在加载" : noMore.value ? "已经到底了" : "上拉加载更多");
function getQueryText(value: unknown): string {
return Array.isArray(value) ? "" : typeof value === "string" ? value : "";
}
async function loadMore(): Promise<void> {
if (loading.value || noMore.value) {
return;
@@ -148,6 +194,7 @@ async function loadMore(): Promise<void> {
index: pageIndex.value,
size: 15,
salesOrderId: String(route.query.salesOrderId || "") || undefined,
customerId: customerId.value || undefined,
operationType: isSelfReceiveOnly.value || operationType.value === "ALL" ? undefined : operationType.value as FundOperationType,
status: status.value === "ALL" ? undefined : status.value as FundRecordStatus
};
@@ -164,6 +211,53 @@ async function loadMore(): Promise<void> {
}
}
async function handleCustomerChange(value: string | string[]): Promise<void> {
customerId.value = Array.isArray(value) ? String(value[0] || "") : value;
try {
selectedCustomer.value = customerId.value ? await CustomerAPI.detail(customerId.value) : undefined;
customerSearchKeyword.value = getCustomerSearchKeyword(selectedCustomer.value);
await reload();
} catch (error) {
Message.error(getErrorMessage(error, "客户资金流水加载失败"));
}
}
async function applyCustomerSearch(): Promise<void> {
const keyword = customerSearchKeyword.value.trim();
if (!keyword) {
await clearCustomer();
return;
}
if (keyword === getCustomerSearchKeyword(selectedCustomer.value)) {
return;
}
try {
const customer = await CustomerAPI.findByCode(keyword) || await CustomerAPI.findByName(keyword);
if (!customer?.id) {
Message.warning("未找到客户");
return;
}
customerId.value = customer.id;
selectedCustomer.value = customer;
customerSearchKeyword.value = getCustomerSearchKeyword(customer);
await reload();
} catch (error) {
Message.error(getErrorMessage(error, "客户信息加载失败"));
}
}
function getCustomerSearchKeyword(customer?: Customer): string {
return customer?.name?.trim() || customer?.code?.trim() || "";
}
async function clearCustomer(): Promise<void> {
customerId.value = "";
selectedCustomer.value = undefined;
customerSearchKeyword.value = "";
await reload();
}
async function reload(): Promise<void> {
if (loading.value) {
return;
@@ -236,6 +330,10 @@ function getCurrentRouteDepth(): number {
onMounted(async () => {
navBarStore.clearRight();
try {
if (customerId.value) {
selectedCustomer.value = await CustomerAPI.detail(customerId.value);
customerSearchKeyword.value = getCustomerSearchKeyword(selectedCustomer.value);
}
await reload();
} catch (error) {
Message.error(getErrorMessage(error, "资金流水加载失败"));
@@ -261,29 +359,35 @@ onUnmounted(() => navBarStore.clearRight());
box-shadow: var(--td-shadow-1);
flex-direction: column;
.customer {
--td-button-border-radius: .75rem;
--td-input-vertical-padding: .25rem 1rem;
border: 1px solid var(--td-component-border);
z-index: 2;
background: var(--td-bg-color-container);
padding-right: .3rem;
border-radius: 1rem;
.actions {
gap: .25rem;
display: flex;
align-items: center;
}
}
.menus {
--td-spacer-1: 6px;
width: 100%;
border: 1px solid rgba(148, 163, 184, .18);
z-index: -1;
overflow: hidden;
margin-top: -1rem;
background: #fff;
border-top: none;
border-radius: 1rem;
&:after {
display: none;
}
:deep(.t-dropdown-menu__item) {
min-width: 0;
}
:deep(.t-dropdown-menu__title) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
padding-top: .8rem;
border-radius: 0 0 1rem 1rem;
}
}