add customer filter

src/pages/salesOrder/FundRecordList.vue

@@ -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;
+			padding-top: .8rem;
-
+			border-radius: 0 0 1rem 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;
-			}
 		}
 	}