more filter for sales order

2026-09-20 15:43:19 +08:00
parent 2aa29da3ff
commit 2fbd4c9fd0
9 changed files with 1337 additions and 180 deletions
@@ -1,7 +1,7 @@
 <template>
 	<div v-can="permissionCodes.salesOrder.read" class="sales-order-list">
 		<div class="filters">
-			<div class="search-status">
+			<div class="search-row">
 				<t-input
 					v-model.trim="keyword"
 					class="keyword"
@@ -21,36 +21,19 @@
 						</div>
 					</template>
 				</t-input>
-				<t-dropdown-menu class="status">
-					<t-dropdown-item
-						v-model="status"
-						label="订单状态"
-						:options="statusOptions"
-						@change="selectStatus"
-					/>
-				</t-dropdown-menu>
+				<t-button
+					class="filter-button"
+					size="small"
+					theme="light"
+					variant="outline"
+					@click="filterVisible = true"
+				>
+					<template #icon>
+						<t-icon name="filter-1" />
+					</template>
+					<span>筛选</span>
+				</t-button>
 			</div>
-			<t-dropdown-menu class="menus">
-				<t-dropdown-item
-					v-if="!packageConfigId"
-					v-model="orderType"
-					label="订单类型"
-					:options="orderTypeOptions"
-					@change="selectOrderType"
-				/>
-				<t-dropdown-item
-					v-model="paymentStatus"
-					label="收款状态"
-					:options="paymentOptions"
-					@change="selectPaymentStatus"
-				/>
-				<t-dropdown-item
-					v-model="refundStatus"
-					label="退款状态"
-					:options="refundOptions"
-					@change="selectRefundStatus"
-				/>
-			</t-dropdown-menu>
 		</div>
 		<t-pull-down-refresh
 			class="list-wrap"
@@ -60,6 +43,11 @@
 			@scrolltolower="loadMore"
 		>
 			<div class="items">
+				<sales-order-summary
+					v-if="customerId"
+					ref="customerOrderSummaryRef"
+					:customer="selectedCustomer"
+				/>
 				<t-cell-group v-if="packageConfigId" class="selected-package" theme="card">
 					<t-cell title="套餐" :note="selectedPackageName">
 						<template #left-icon>
@@ -67,15 +55,16 @@
 						</template>
 					</t-cell>
 				</t-cell-group>
-				<sales-order-summary
-					v-if="customerId"
-					ref="customerOrderSummaryRef"
-					:customer="selectedCustomer"
+				<sales-order-filter-summary
+					:filter="appliedFilter"
+					:total="total"
+					:package-config-id="packageConfigId"
+					@confirm="confirmFilter"
 				/>
 				<sales-order-list-cell
-					class="item"
 					v-for="(item, index) in list"
 					:key="item.id"
+					class="item"
 					:order="item"
 					:can-receive="canReceive"
 					:can-fulfill="canCreateFulfillment"
@@ -101,10 +90,15 @@
 		v-model:visible="customerSelectorVisible"
 		@change="handleCustomerChange"
 	/>
+	<sales-order-filter-popup
+		v-model:visible="filterVisible"
+		:model-value="appliedFilter"
+		:package-config-id="packageConfigId"
+		@confirm="confirmFilter"
+	/>
 </template>

 <script setup lang="ts">
-import { type DropdownValue } from "tdesign-mobile-vue";
 import { Toolkit } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import CustomerAPI from "@/api/CustomerAPI";
@@ -112,19 +106,40 @@ import PackageAPI from "@/api/PackageAPI";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
 import CustomerSelector from "@/components/CustomerSelector.vue";
 import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
+import SalesOrderFilterPopup from "@/pages/salesOrder/components/SalesOrderFilterPopup.vue";
+import SalesOrderFilterSummary from "@/pages/salesOrder/components/SalesOrderFilterSummary.vue";
 import SalesOrderListCell from "@/pages/salesOrder/components/SalesOrderListCell.vue";
 import SalesOrderSummary from "@/pages/salesOrder/components/SalesOrderSummary.vue";
+import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { Customer } from "@/types/Customer";
 import type { GaoPackageConfig } from "@/types/Package";
-import type { GaoSalesOrderStatus, GaoSalesOrderType, GaoSalesPaymentStatus, GaoSalesRefundStatus, SalesOrder, SalesOrderPage } from "@/types/SalesOrder";
+import type {
+	GaoSalesOrderStatus,
+	GaoSalesOrderType,
+	GaoSalesPaymentStatus,
+	GaoSalesRefundStatus,
+	SalesOrder,
+	SalesOrderPage
+} from "@/types/SalesOrder";
+import {
+	cloneSalesOrderFilter,
+	createDefaultSalesOrderFilter,
+	normalizeSalesOrderFilter,
+	type SalesOrderListFilter,
+	type SalesOrderPaymentFilter
+} from "@/types/SalesOrderFilter";
+import { buildPresetDateRange, parseDateTime } from "@/utils/date";
 import { getErrorMessage } from "@/utils/error";
 import { Message } from "@/utils/message";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";

 defineOptions({ name: "SalesOrderList" });
+
+const SALES_ORDER_FILTER_STORAGE_KEY = "gao-customer-h5:sales-order-filter";
 const route = useRoute();
 const router = useRouter();
+const currentStoreStore = useCurrentStoreStore();
 const navBarStore = useNavBarStore();
 const userStore = useUserStore();
 const canCreate = computed(() => userStore.hasPermissions(permissionCodes.salesOrder.create));
@@ -150,19 +165,46 @@ const actions = computed(() => [
 		action: () => router.push("/management/customer-packages/create")
 	}] : [])
 ]);
+
+// ---------- 顶部搜索和客户 ----------
+
 const keyword = ref("");
 const customerId = ref("");
 const selectedCustomer = ref<Customer>();
 const customerSelectorVisible = ref(false);
 let customerKeyword = "";
 const selectedPackage = ref<GaoPackageConfig>();
-const orderType = ref("ALL");
-type PaymentFilter = "ALL" | GaoSalesPaymentStatus | "PENDING_RECEIVE";
-type RefundFilter = "ALL" | GaoSalesRefundStatus;
+const packageConfigId = computed(() => queryValue(route.query.packageConfigId));
+const selectedPackageName = computed(() => selectedPackage.value?.name || queryValue(route.query.packageConfigName) || "未命名套餐");
+
+// ---------- 筛选 ----------
+
+const filterVisible = ref(false);
+const appliedFilter = ref<SalesOrderListFilter>(createDefaultSalesOrderFilter());
+const filterStorageKey = computed(() => `${SALES_ORDER_FILTER_STORAGE_KEY}:${currentStoreStore.currentStoreId || "default"}:${packageConfigId.value || "all"}`);
+const orderTypeOptions: Array<{ label: string; value: GaoSalesOrderType }> = [
+	{ label: "套餐订单", value: "PACKAGE" },
+	{ label: "产品订单", value: "DIRECT_PRODUCT" }
+];
+const statusOptions: Array<{ label: string; value: GaoSalesOrderStatus }> = [
+	{ label: "进行中", value: "ACTIVE" },
+	{ label: "已履约", value: "FULFILLED" },
+	{ label: "已取消", value: "CANCELLED" }
+];
+const paymentOptions: Array<{ label: string; value: SalesOrderPaymentFilter }> = [
+	{ label: "未收清", value: "PENDING_RECEIVE" },
+	{ label: "未收款", value: "UNPAID" },
+	{ label: "部分收款", value: "PARTIALLY_PAID" },
+	{ label: "已收款", value: "PAID" }
+];
+const paymentStatusValues: GaoSalesPaymentStatus[] = ["UNPAID", "PARTIALLY_PAID", "PAID"];
+const refundOptions: Array<{ label: string; value: GaoSalesRefundStatus }> = [
+	{ label: "无需退款", value: "NOT_REQUIRED" },
+	{ label: "待退款", value: "PENDING" },
+	{ label: "已退款", value: "REFUNDED" }
+];
+// ---------- 列表 ----------

-const status = ref("ALL");
-const paymentStatus = ref<PaymentFilter>("ALL");
-const refundStatus = ref<RefundFilter>("ALL");
 type SalesOrderSummaryExpose = { refresh: () => Promise<void> };
 const customerOrderSummaryRef = ref<SalesOrderSummaryExpose>();
 const list = ref<SalesOrder[]>([]);
@@ -172,30 +214,8 @@ const loading = ref(false);
 const refreshing = ref(false);
 const noMore = ref(false);
 const pageSize = 15;
-const orderTypeOptions = [
-	{ label: "全部类型", value: "ALL" },
-	{ label: "套餐订单", value: "PACKAGE" },
-	{ label: "产品订单", value: "DIRECT_PRODUCT" }
-];
-const statusOptions = [
-	{ label: "全部状态", value: "ALL" },
-	{ label: "进行中", value: "ACTIVE" },
-	{ label: "已履约", value: "FULFILLED" },
-	{ label: "已取消", value: "CANCELLED" }
-];
-const paymentOptions = [
-	{ label: "全部收款", value: "ALL" },
-	{ label: "未收清", value: "PENDING_RECEIVE" },
-	{ label: "未收款", value: "UNPAID" },
-	{ label: "部分收款", value: "PARTIALLY_PAID" },
-	{ label: "已收款", value: "PAID" }
-];
-const refundOptions = [
-	{ label: "全部退款", value: "ALL" },
-	{ label: "无需退款", value: "NOT_REQUIRED" },
-	{ label: "待退款", value: "PENDING" },
-	{ label: "已退款", value: "REFUNDED" }
-];
+
+// ---------- 路由和持久化 ----------

 const routeFilterKey = computed(() => [
 	route.query.customerId,
@@ -207,21 +227,75 @@ const routeFilterKey = computed(() => [
 	route.query.refundStatus,
 	route.query.pendingReceive
 ].map(queryValue).join("|"));
+let initialized = false;
+let lastAppliedRouteFilterKey = "";
+
+interface PersistedSalesOrderState {
+	filter: SalesOrderListFilter;
+	customerId: string;
+}

 function queryValue(value: unknown): string {
 	return Array.isArray(value) ? "" : typeof value === "string" ? value : "";
 }

-const packageConfigId = computed(() => queryValue(route.query.packageConfigId));
-const selectedPackageName = computed(() => selectedPackage.value?.name || queryValue(route.query.packageConfigName) || "未命名套餐");
+function readPersistedState(): PersistedSalesOrderState {
+	try {
+		const value = localStorage.getItem(filterStorageKey.value);
+		const source: unknown = value ? JSON.parse(value) : undefined;
+		const filter = normalizeSalesOrderFilter(source);
+		if (filter.dateFilterType !== "custom") {
+			filter.dateRange = buildPresetDateRange(filter.dateFilterType);
+		}
+		const customerId = source && typeof source === "object" && typeof (source as { customerId?: unknown }).customerId === "string"
+			? (source as { customerId: string }).customerId
+			: "";
+		return { filter, customerId };
+	} catch {
+		return { filter: createDefaultSalesOrderFilter(), customerId: "" };
+	}
+}
+
+function persistFilter(): void {
+	try {
+		localStorage.setItem(filterStorageKey.value, JSON.stringify({
+			...appliedFilter.value,
+			customerId: customerId.value || undefined
+		}));
+	} catch {
+		return;
+	}
+}

 function applyRouteFilters(): void {
+	const persistedState = readPersistedState();
+	const nextFilter = persistedState.filter;
+	customerId.value = queryValue(route.query.customerId) || persistedState.customerId;
+	const routeOrderType = queryValue(route.query.orderType);
+	const routeStatus = queryValue(route.query.status);
+	const routePaymentStatus = queryValue(route.query.paymentStatus);
+	const routeRefundStatus = queryValue(route.query.refundStatus);
 	const pendingReceive = queryValue(route.query.pendingReceive) === "true";
-	customerId.value = queryValue(route.query.customerId);
-	orderType.value = packageConfigId.value ? "PACKAGE" : queryValue(route.query.orderType) || "ALL";
-	status.value = queryValue(route.query.status) || "ALL";
-	paymentStatus.value = pendingReceive ? "PENDING_RECEIVE" : queryValue(route.query.paymentStatus) as PaymentFilter || "ALL";
-	refundStatus.value = queryValue(route.query.refundStatus) as RefundFilter || "ALL";
+	if (packageConfigId.value) {
+		nextFilter.orderTypeList = ["PACKAGE"];
+	} else if (routeOrderType) {
+		nextFilter.orderTypeList = routeOrderType === "ALL" ? orderTypeOptions.map(item => item.value) : [routeOrderType as GaoSalesOrderType];
+	}
+	if (routeStatus) {
+		nextFilter.statusList = routeStatus === "ALL" ? statusOptions.map(item => item.value) : [routeStatus as GaoSalesOrderStatus];
+	}
+	if (pendingReceive) {
+		nextFilter.statusList = ["ACTIVE", "FULFILLED"];
+		nextFilter.paymentStatusList = ["PENDING_RECEIVE"];
+	} else if (routePaymentStatus) {
+		nextFilter.paymentStatusList = routePaymentStatus === "PENDING_RECEIVE"
+		? ["PENDING_RECEIVE"]
+		: routePaymentStatus === "ALL" ? paymentOptions.map(item => item.value) : [routePaymentStatus as GaoSalesPaymentStatus];
+	}
+	if (routeRefundStatus) {
+		nextFilter.refundStatusList = routeRefundStatus === "ALL" ? refundOptions.map(item => item.value) : [routeRefundStatus as GaoSalesRefundStatus];
+	}
+	appliedFilter.value = nextFilter;
 }

 async function loadRoutePackage(): Promise<void> {
@@ -254,27 +328,34 @@ async function loadRouteCustomer(): Promise<void> {
 	setCustomerKeyword(selectedCustomer.value);
 }

-async function handleCustomerChange(): Promise<void> {
-	try {
-		await loadRouteCustomer();
-		await fetchList(true);
-	} catch (error) {
-		selectedCustomer.value = undefined;
-		Message.error(getErrorMessage(error, "客户加载失败"));
+// ---------- 请求筛选 ----------
+
+function getEffectiveList<T>(value: T[], allValues: T[]): T[] | undefined {
+	return value.length && value.length < allValues.length ? value : undefined;
+}
+
+function getPaymentStatusValues(valueList: SalesOrderPaymentFilter[]): GaoSalesPaymentStatus[] {
+	const valueSet = new Set<GaoSalesPaymentStatus>(valueList.filter(value => value !== "PENDING_RECEIVE") as GaoSalesPaymentStatus[]);
+	if (valueList.includes("PENDING_RECEIVE")) {
+		valueSet.add("UNPAID");
+		valueSet.add("PARTIALLY_PAID");
 	}
+	return paymentStatusValues.filter(value => valueSet.has(value));
 }

 function buildPageFilter(): SalesOrderPage {
-	const pendingReceive = paymentStatus.value === "PENDING_RECEIVE";
+	const filter = appliedFilter.value;
+	const [beginText, endText] = filter.dateRange;
 	return {
 		customerId: customerId.value || undefined,
 		packageConfigId: packageConfigId.value || undefined,
 		keyword: keyword.value || undefined,
-		orderType: orderType.value === "ALL" ? undefined : orderType.value as GaoSalesOrderType,
-		status: status.value === "ALL" ? undefined : status.value as GaoSalesOrderStatus,
-		paymentStatus: pendingReceive || paymentStatus.value === "ALL" ? undefined : paymentStatus.value as GaoSalesPaymentStatus,
-		refundStatus: refundStatus.value === "ALL" ? undefined : refundStatus.value as GaoSalesRefundStatus,
-		pendingReceive: pendingReceive ? true : undefined,
+		orderTypeList: packageConfigId.value ? ["PACKAGE"] : getEffectiveList(filter.orderTypeList, orderTypeOptions.map(item => item.value)),
+		statusList: getEffectiveList(filter.statusList, statusOptions.map(item => item.value)),
+		paymentStatusList: getEffectiveList(getPaymentStatusValues(filter.paymentStatusList), paymentStatusValues),
+		refundStatusList: getEffectiveList(filter.refundStatusList, refundOptions.map(item => item.value)),
+		beginAt: beginText ? parseDateTime(beginText, false).getTime() : undefined,
+		endAt: endText ? parseDateTime(endText, true).getTime() : undefined,
 		index: pageIndex.value,
 		size: pageSize
 	};
@@ -282,7 +363,12 @@ function buildPageFilter(): SalesOrderPage {

 async function fetchList(reset: boolean): Promise<void> {
 	if (loading.value || (!reset && noMore.value)) return;
-	if (reset) { pageIndex.value = 0; total.value = 0; noMore.value = false; list.value = []; }
+	if (reset) {
+		pageIndex.value = 0;
+		total.value = 0;
+		noMore.value = false;
+		list.value = [];
+	}
 	loading.value = true;
 	try {
 		const result = await SalesOrderAPI.list(buildPageFilter());
@@ -291,13 +377,19 @@ async function fetchList(reset: boolean): Promise<void> {
 		total.value = result.total || 0;
 		pageIndex.value += 1;
 		noMore.value = rows.length < pageSize || total.value <= list.value.length;
-	} finally { loading.value = false; }
+	} finally {
+		loading.value = false;
+	}
+}
+
+async function reloadList(): Promise<void> {
+	await customerOrderSummaryRef.value?.refresh();
+	await fetchList(true);
 }

 async function refresh(): Promise<void> {
 	try {
-		await customerOrderSummaryRef.value?.refresh();
-		await fetchList(true);
+		await reloadList();
 	} catch (error) {
 		Message.error(getErrorMessage(error, "销售订单加载失败"));
 	} finally {
@@ -313,31 +405,26 @@ async function loadMore(): Promise<void> {
 	}
 }

-async function selectOrderType(value: DropdownValue): Promise<void> {
-	if (!Array.isArray(value)) {
-		orderType.value = String(value);
-		await fetchList(true);
+async function confirmFilter(value: SalesOrderListFilter): Promise<void> {
+	appliedFilter.value = cloneSalesOrderFilter(value);
+	persistFilter();
+	try {
+		await reloadList();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "销售订单加载失败"));
 	}
 }

-async function selectStatus(value: DropdownValue): Promise<void> {
-	if (!Array.isArray(value)) {
-		status.value = String(value);
-		await fetchList(true);
-	}
-}
+// ---------- 客户、路由和导航 ----------

-async function selectPaymentStatus(value: DropdownValue): Promise<void> {
-	if (!Array.isArray(value)) {
-		paymentStatus.value = String(value) as PaymentFilter;
-		await fetchList(true);
-	}
-}
-
-async function selectRefundStatus(value: DropdownValue): Promise<void> {
-	if (!Array.isArray(value)) {
-		refundStatus.value = String(value) as RefundFilter;
-		await fetchList(true);
+async function handleCustomerChange(): Promise<void> {
+	try {
+		await loadRouteCustomer();
+		persistFilter();
+		await reloadList();
+	} catch (error) {
+		selectedCustomer.value = undefined;
+		Message.error(getErrorMessage(error, "客户加载失败"));
 	}
 }

@@ -372,6 +459,7 @@ const search = Toolkit.debounce(async () => {
 		Message.error(getErrorMessage(error, "销售订单加载失败"));
 	}
 }, false);
+
 watch(keyword, async () => {
 	const isCustomerKeyword = !!customerId.value && keyword.value.trim() === customerKeyword;
 	customerKeyword = "";
@@ -380,31 +468,67 @@ watch(keyword, async () => {
 	}
 	customerId.value = "";
 	selectedCustomer.value = undefined;
+	persistFilter();
 	await search();
 });
-watch(routeFilterKey, async () => {
-	applyRouteFilters();
-	try {
-		await loadRouteCustomer();
-	} catch {
-		selectedCustomer.value = undefined;
+
+watch(routeFilterKey, async value => {
+	if (!initialized || route.name !== "SalesOrderList" || value === lastAppliedRouteFilterKey) {
+		return;
 	}
-	await loadRoutePackage();
-	await fetchList(true);
-});
-onMounted(async () => {
-	navBarStore.clearRight();
-	navBarStore.setCustomRightVisible(!!actions.value.length);
+	lastAppliedRouteFilterKey = value;
 	applyRouteFilters();
 	try {
 		await loadRouteCustomer();
 		await loadRoutePackage();
 		await fetchList(true);
+	} catch {
+		selectedCustomer.value = undefined;
+	}
+});
+
+watch(() => currentStoreStore.currentStoreId, async (value, oldValue) => {
+	if (!initialized || value === oldValue || route.name !== "SalesOrderList") {
+		return;
+	}
+	const persistedState = readPersistedState();
+	appliedFilter.value = persistedState.filter;
+	if (!queryValue(route.query.customerId)) {
+		customerId.value = persistedState.customerId;
+	}
+	await loadRouteCustomer();
+	await refresh();
+});
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	navBarStore.setCustomRightVisible(!!actions.value.length);
+	applyRouteFilters();
+	lastAppliedRouteFilterKey = routeFilterKey.value;
+	try {
+		await loadRouteCustomer();
+		await loadRoutePackage();
+		await fetchList(true);
+		initialized = true;
 	} catch (error) {
 		Message.error(getErrorMessage(error, "销售订单加载失败"));
 	}
 });
-onUnmounted(() => { navBarStore.clearRight(); search.cancel(); });
+
+onActivated(() => {
+	navBarStore.clearRight();
+	navBarStore.setCustomRightVisible(!!actions.value.length);
+});
+
+onDeactivated(() => {
+	filterVisible.value = false;
+	navBarStore.clearRight();
+});
+
+onUnmounted(() => {
+	navBarStore.clearRight();
+	search.cancel();
+});
 </script>

 <style scoped lang="less">
@@ -416,62 +540,41 @@ onUnmounted(() => { navBarStore.clearRight(); search.cancel(); });
 		left: 0;
 		right: 0;
 		z-index: 10;
-		display: flex;
-		padding: .75rem 1rem;
+		padding: .75rem 1rem .5rem;
 		position: sticky;
-		background: #F5F5F8;
+		background: var(--td-bg-color-page);
 		box-shadow: var(--td-shadow-1);
-		flex-direction: column;

-		.search-status {
+		.search-row {
+			gap: .5rem;
 			display: flex;
+			align-items: center;
+		}

-			.keyword {
-				--td-button-border-radius: .75rem;
-				--td-input-vertical-padding: .25rem 1rem;
+		.keyword {
+			--td-button-border-radius: .75rem;
+			--td-input-vertical-padding: .25rem 1rem;

-				flex: 1;
-				border: 1px solid var(--td-component-border);
-				z-index: 2;
-				background: var(--td-bg-color-container);
-				padding-right: .3rem;
-				border-radius: 1rem;
+			flex: 1;
+			min-width: 0;
+			border: 1px solid var(--td-component-border);
+			background: var(--td-bg-color-container);
+			padding-right: .3rem;
+			border-radius: 1rem;

-				.actions {
-					gap: .25rem;
-					display: flex;
-					align-items: center;
-				}
-			}
-
-			.status {
-				--td-spacer: 4px;
-				--td-spacer-1: 6px;
-
-				border: 1px solid rgba(148, 163, 184, .18);
-				z-index: 1;
-				margin-left: -2.5rem;
-				padding-left: 3rem;
-				padding-right: .7rem;
-				border-radius: 1rem;
-
-				&:after {
-					display: none;
-				}
+			.actions {
+				gap: .25rem;
+				display: flex;
+				align-items: center;
 			}
 		}

-		.menus {
-			--td-spacer-1: 6px;
-
-			width: 100%;
-			border: 1px solid rgba(148, 163, 184, .18);
-			overflow: hidden;
-			margin-top: -1rem;
-			background: #fff;
-			border-top: none;
-			padding-top: .8rem;
-			border-radius: 0 0 1rem 1rem;
+		.filter-button {
+			--td-button-border-radius: 99rem;
+			flex: none;
+			height: auto;
+			padding: 0 1.25rem;
+			align-self: stretch;
 		}
 	}

@@ -484,13 +587,6 @@ onUnmounted(() => { navBarStore.clearRight(); search.cancel(); });
 			padding: 0 1rem;
 			flex-direction: column;

-			.selected-package {
-
-				:deep(.t-cell-group) {
-					margin: 0;
-				}
-			}
-
 			.item {
 				border-radius: 1rem;
 			}
@@ -503,5 +599,4 @@ onUnmounted(() => { navBarStore.clearRight(); search.cancel(); });
 		text-align: center;
 	}
 }
-
 </style>