refactor PageTransition and PullDownRefresh

src/pages/salesOrder/SalesOrderList.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-can="permissionCodes.salesOrder.read" class="sales-order-list">
+	<div ref="salesOrderListRef" v-can="permissionCodes.salesOrder.read" class="sales-order-list">
 		<div class="filters">
 			<div class="search-row">
 				<t-input
@@ -35,7 +35,7 @@
 				</t-button>
 			</div>
 		</div>
-		<t-pull-down-refresh
+		<app-pull-down-refresh
 			class="list-wrap"
 			v-model="refreshing"
 			:refresh-timeout="30000"
@@ -82,9 +82,9 @@
 				<div v-if="!list.length" class="empty" v-text="loading ? '正在加载销售订单' : '暂无销售订单'" />
 			</div>
 			<div class="center-tips" v-text="loading ? '正在加载' : noMore ? '已经到底了' : '上拉加载更多'" />
-		</t-pull-down-refresh>
+		</app-pull-down-refresh>
 	</div>
-	<nav-bar-action-menu v-if="actions.length" :actions="actions" />
+	<nav-bar-action-menu v-if="route.name === 'SalesOrderList' && actions.length" :actions="actions" />
 	<customer-selector
 		v-model="customerId"
 		v-model:visible="customerSelectorVisible"
@@ -101,6 +101,7 @@
 <script setup lang="ts">
 import { Toolkit } from "timi-web";
 import { useUserStore } from "timi-web-api";
+import { onBeforeRouteLeave } from "vue-router";
 import CustomerAPI from "@/api/CustomerAPI";
 import PackageAPI from "@/api/PackageAPI";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
@@ -139,6 +140,7 @@ defineOptions({ name: "SalesOrderList" });
 const SALES_ORDER_FILTER_STORAGE_KEY = "gao-customer-h5:sales-order-filter";
 const route = useRoute();
 const router = useRouter();
+const salesOrderListRef = ref<HTMLElement | null>(null);
 const currentStoreStore = useCurrentStoreStore();
 const navBarStore = useNavBarStore();
 const userStore = useUserStore();
@@ -149,6 +151,38 @@ const canCreateFulfillment = computed(() => userStore.hasPermissions(permissionC
 const canCancel = computed(() => userStore.hasPermissions(permissionCodes.salesOrder.cancel));
 const canRefund = computed(() => userStore.hasPermissions(permissionCodes.fund.refund));
 const canStoreManager = computed(() => userStore.hasRoles(gaoRoleCodes.storeManager));
+let savedPageScrollTop: number | undefined;
+let shouldReloadOnActivate = false;
+
+function getSalesOrderPage(): HTMLElement | null {
+	return salesOrderListRef.value?.closest<HTMLElement>(".page") || null;
+}
+
+function savePageScrollPosition(): void {
+	const page = getSalesOrderPage();
+	if (!page) {
+		return;
+	}
+
+	savedPageScrollTop = page.scrollTop;
+}
+
+function restorePageScrollPosition(): void {
+	if (savedPageScrollTop === undefined) {
+		return;
+	}
+
+	const scrollTop = savedPageScrollTop;
+	requestAnimationFrame(() => {
+		const page = getSalesOrderPage();
+		if (!page) {
+			return;
+		}
+
+		page.scrollTop = scrollTop;
+		savedPageScrollTop = undefined;
+	});
+}
 const actions = computed(() => [
 	...(canCreate.value ? [{
 		key: "create",
@@ -214,6 +248,7 @@ const loading = ref(false);
 const refreshing = ref(false);
 const noMore = ref(false);
 const pageSize = 15;
+let listRequestId = 0;
 
 // ---------- 路由和持久化 ----------
 
@@ -328,6 +363,35 @@ async function loadRouteCustomer(): Promise<void> {
 	setCustomerKeyword(selectedCustomer.value);
 }
 
+function clearSelectedCustomer(): void {
+	customerId.value = "";
+	selectedCustomer.value = undefined;
+	customerKeyword = "";
+	keyword.value = "";
+}
+
+function resetForProductTab(): void {
+	search.cancel();
+	listRequestId += 1;
+	filterVisible.value = false;
+	customerSelectorVisible.value = false;
+	appliedFilter.value = createDefaultSalesOrderFilter();
+	clearSelectedCustomer();
+	selectedPackage.value = undefined;
+	list.value = [];
+	pageIndex.value = 0;
+	total.value = 0;
+	loading.value = false;
+	refreshing.value = false;
+	noMore.value = false;
+	savedPageScrollTop = undefined;
+	localStorage.removeItem(filterStorageKey.value);
+	const page = getSalesOrderPage();
+	if (page) {
+		page.scrollTop = 0;
+	}
+}
+
 // ---------- 请求筛选 ----------
 
 function getEffectiveList<T>(value: T[], allValues: T[]): T[] | undefined {
@@ -369,16 +433,22 @@ async function fetchList(reset: boolean): Promise<void> {
 		noMore.value = false;
 		list.value = [];
 	}
+	const requestId = ++listRequestId;
 	loading.value = true;
 	try {
 		const result = await SalesOrderAPI.list(buildPageFilter());
+		if (requestId !== listRequestId) {
+			return;
+		}
 		const rows = result.list || [];
 		list.value = reset ? rows : list.value.concat(rows);
 		total.value = result.total || 0;
 		pageIndex.value += 1;
 		noMore.value = rows.length < pageSize || total.value <= list.value.length;
 	} finally {
-		loading.value = false;
+		if (requestId === listRequestId) {
+			loading.value = false;
+		}
 	}
 }
 
@@ -461,6 +531,9 @@ const search = Toolkit.debounce(async () => {
 }, false);
 
 watch(keyword, async () => {
+	if (route.name !== "SalesOrderList") {
+		return;
+	}
 	const isCustomerKeyword = !!customerId.value && keyword.value.trim() === customerKeyword;
 	customerKeyword = "";
 	if (isCustomerKeyword) {
@@ -515,16 +588,42 @@ onMounted(async () => {
 	}
 });
 
-onActivated(() => {
+onActivated(async () => {
+	if (shouldReloadOnActivate) {
+		shouldReloadOnActivate = false;
+		applyRouteFilters();
+		lastAppliedRouteFilterKey = routeFilterKey.value;
+		try {
+			await loadRouteCustomer();
+			await loadRoutePackage();
+			await fetchList(true);
+		} catch (error) {
+			Message.error(getErrorMessage(error, "销售订单加载失败"));
+		}
+	} else {
+		restorePageScrollPosition();
+	}
 	navBarStore.clearRight();
 	navBarStore.setCustomRightVisible(!!actions.value.length);
 });
 
 onDeactivated(() => {
+	if (!shouldReloadOnActivate && savedPageScrollTop === undefined) {
+		savePageScrollPosition();
+	}
 	filterVisible.value = false;
 	navBarStore.clearRight();
 });
 
+onBeforeRouteLeave(to => {
+	if (to.name === "ProductTab") {
+		shouldReloadOnActivate = true;
+		resetForProductTab();
+		return;
+	}
+	savePageScrollPosition();
+});
+
 onUnmounted(() => {
 	navBarStore.clearRight();
 	search.cancel();