refactor PageTransition and PullDownRefresh

This commit is contained in:
Timi
2026-09-21 01:22:10 +08:00
parent 2fbd4c9fd0
commit 4e860800a7
40 changed files with 506 additions and 116 deletions
+2 -7
View File
@@ -4,11 +4,6 @@ settings:
autoInstallPeers: true autoInstallPeers: true
excludeLinksFromLockfile: false excludeLinksFromLockfile: false
patchedDependencies:
tdesign-mobile-vue@1.16.0:
hash: zwjpdqqohmbknbgri7osfh6nzy
path: patches/tdesign-mobile-vue@1.16.0.patch
importers: importers:
.: .:
@@ -36,7 +31,7 @@ importers:
version: 3.0.4(typescript@5.8.3)(vue@3.5.40(typescript@5.8.3)) version: 3.0.4(typescript@5.8.3)(vue@3.5.40(typescript@5.8.3))
tdesign-mobile-vue: tdesign-mobile-vue:
specifier: ^1.16.0 specifier: ^1.16.0
version: 1.16.0(patch_hash=zwjpdqqohmbknbgri7osfh6nzy)(vue@3.5.40(typescript@5.8.3)) version: 1.16.0(vue@3.5.40(typescript@5.8.3))
timi-tdesign-mobile: timi-tdesign-mobile:
specifier: link:E:/WebProject/timi-tdesign-mobile specifier: link:E:/WebProject/timi-tdesign-mobile
version: link:../timi-tdesign-mobile version: link:../timi-tdesign-mobile
@@ -3661,7 +3656,7 @@ snapshots:
'@babel/runtime': 7.29.7 '@babel/runtime': 7.29.7
vue: 3.5.40(typescript@5.8.3) vue: 3.5.40(typescript@5.8.3)
tdesign-mobile-vue@1.16.0(patch_hash=zwjpdqqohmbknbgri7osfh6nzy)(vue@3.5.40(typescript@5.8.3)): tdesign-mobile-vue@1.16.0(vue@3.5.40(typescript@5.8.3)):
dependencies: dependencies:
'@babel/runtime': 7.29.7 '@babel/runtime': 7.29.7
'@use-gesture/vanilla': 10.3.1 '@use-gesture/vanilla': 10.3.1
+3 -3
View File
@@ -95,9 +95,9 @@ html.theme-dark body {
gap: 1rem; gap: 1rem;
} }
.t-pull-down-refresh { .app-pull-down-refresh {
overflow-x: hidden; height: auto;
overflow-y: auto; overflow: visible;
} }
.t-dropdown-menu { .t-dropdown-menu {
+152
View File
@@ -0,0 +1,152 @@
<template>
<t-pull-down-refresh
ref="rootRef"
class="app-pull-down-refresh"
v-bind="forwardedAttrs"
@touchstart.capture="guardTouch"
@touchmove.capture="guardTouch"
@touchend.capture="guardTouch"
@touchcancel.capture="guardTouch"
>
<slot />
</t-pull-down-refresh>
</template>
<script setup lang="ts">
import type { ComponentPublicInstance } from "vue";
defineOptions({
name: "AppPullDownRefresh",
inheritAttrs: false
});
type EventListener = (...args: unknown[]) => unknown;
type ScrollTarget = HTMLElement | Window;
const scrollToLowerThreshold = 20;
const attrs = useAttrs();
const rootRef = ref<ComponentPublicInstance | null>(null);
const forwardedAttrs = computed(() => Object.fromEntries(
Object.entries(attrs).filter(([key]) => key !== "onScrolltolower")
));
let rootElement: HTMLElement | null = null;
let scrollFrame = 0;
let isScrollListenerBound = false;
function isScrollable(element: HTMLElement): boolean {
const overflowY = window.getComputedStyle(element).overflowY;
return /auto|scroll/i.test(overflowY) && element.clientHeight < element.scrollHeight;
}
function getScrollParents(target: EventTarget | null): HTMLElement[] {
let current = target instanceof HTMLElement
? target
: target instanceof Element ? target.parentElement : null;
const parents: HTMLElement[] = [];
while (current) {
if (isScrollable(current)) {
parents.push(current);
}
current = current.parentElement;
}
return parents;
}
function getWindowScrollTop(): number {
return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
}
function isAtTop(target: EventTarget | null): boolean {
if (getScrollParents(target).some(parent => 0 < parent.scrollTop)) {
return false;
}
return getWindowScrollTop() < 1;
}
function guardTouch(event: TouchEvent): void {
if (isAtTop(event.target)) {
return;
}
event.stopImmediatePropagation();
}
function getScrollTarget(event: Event): ScrollTarget {
return getScrollParents(event.target)[0] || window;
}
function isReachBottom(target: ScrollTarget): boolean {
if (target === window) {
const documentElement = document.documentElement;
const scrollHeight = Math.max(documentElement.scrollHeight, document.body.scrollHeight);
const clientHeight = window.innerHeight || documentElement.clientHeight;
return clientHeight < scrollHeight && scrollHeight - scrollToLowerThreshold < getWindowScrollTop() + clientHeight;
}
if (!(target instanceof HTMLElement)) {
return false;
}
return target.clientHeight < target.scrollHeight
&& target.scrollHeight - scrollToLowerThreshold < target.scrollTop + target.clientHeight;
}
function invokeListener(listener: unknown): void {
if (Array.isArray(listener)) {
for (const item of listener) {
invokeListener(item);
}
return;
}
if (typeof listener === "function") {
(listener as EventListener)();
}
}
function handleScroll(event: Event): void {
const target = getScrollTarget(event);
if (scrollFrame || !isReachBottom(target)) {
return;
}
scrollFrame = requestAnimationFrame(() => {
scrollFrame = 0;
if (isReachBottom(target)) {
invokeListener(attrs.onScrolltolower);
}
});
}
function bindScrollListeners(): void {
if (isScrollListenerBound) {
return;
}
const element = rootRef.value?.$el;
if (!(element instanceof HTMLElement)) {
return;
}
rootElement = element;
rootElement.addEventListener("scroll", handleScroll, true);
window.addEventListener("scroll", handleScroll, { passive: true });
isScrollListenerBound = true;
}
function unbindScrollListeners(): void {
if (!isScrollListenerBound) {
return;
}
rootElement?.removeEventListener("scroll", handleScroll, true);
window.removeEventListener("scroll", handleScroll);
isScrollListenerBound = false;
if (scrollFrame) {
cancelAnimationFrame(scrollFrame);
scrollFrame = 0;
}
}
onMounted(bindScrollListeners);
onActivated(bindScrollListeners);
onDeactivated(unbindScrollListeners);
onUnmounted(unbindScrollListeners);
</script>
+17
View File
@@ -0,0 +1,17 @@
<template>
<route-page :background="background" :component="component" />
</template>
<script setup lang="ts">
import type { Component } from "vue";
import RoutePage from "@/components/RoutePage.vue";
defineOptions({
name: "CachedRoutePage"
});
defineProps<{
background: string;
component: Component;
}>();
</script>
+2 -2
View File
@@ -38,7 +38,7 @@
@status-change="handleScanStatusChange" @status-change="handleScanStatusChange"
/> />
</div> </div>
<t-pull-down-refresh <app-pull-down-refresh
class="result-list" class="result-list"
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@@ -52,7 +52,7 @@
:empty-text="loading ? '正在加载客户' : '未找到匹配客户'" :empty-text="loading ? '正在加载客户' : '未找到匹配客户'"
@select="toggleCustomer" @select="toggleCustomer"
/> />
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
</bottom-popup> </bottom-popup>
</template> </template>
+34 -31
View File
@@ -2,9 +2,14 @@
<div class="page-transition"> <div class="page-transition">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<transition :name="transitionName"> <transition :name="transitionName">
<div :key="route.path" class="pages"> <keep-alive :include="keepAlivePageNames">
<component :is="Component" /> <component
</div> :is="isCachedPage ? CachedRoutePage : RoutePage"
:key="route.path"
:background="pageBackground"
:component="Component"
/>
</keep-alive>
</transition> </transition>
</router-view> </router-view>
</div> </div>
@@ -12,15 +17,21 @@
<script setup lang="ts"> <script setup lang="ts">
import type { RouteLocationNormalized } from "vue-router"; import type { RouteLocationNormalized } from "vue-router";
import CachedRoutePage from "@/components/CachedRoutePage.vue";
import RoutePage from "@/components/RoutePage.vue";
import { useGlobalUIStore } from "@/store/globalUI"; import { useGlobalUIStore } from "@/store/globalUI";
defineOptions({ defineOptions({
name: "PageTransition" name: "PageTransition"
}); });
const router = useRouter();
const route = useRoute(); const route = useRoute();
const router = useRouter();
const globalUIStore = useGlobalUIStore(); const globalUIStore = useGlobalUIStore();
// KeepAlive 直接缓存的是单根路由边界,列表页面位于该边界子树中,仍会收到 activated / deactivated 生命周期。
const keepAlivePageNames = ["CachedRoutePage"];
const cachedPageRouteNameSet = new Set(["SalesOrderList", "ProductList", "ProductStockList"]);
const isCachedPage = computed(() => cachedPageRouteNameSet.has(String(route.name)));
const transitionName = ref("push-left"); const transitionName = ref("push-left");
const pageBackground = computed(() => globalUIStore.bodyBackground); const pageBackground = computed(() => globalUIStore.bodyBackground);
@@ -46,7 +57,7 @@ function calcDepth(sourceRoute: RouteLocationNormalized): number {
} }
const baseDepth = Number(sourceRoute.meta.baseDepth ?? 0); const baseDepth = Number(sourceRoute.meta.baseDepth ?? 0);
const pathSegments = fullPath.split("?")[0].split("/").filter((pathSegment) => pathSegment !== ""); const pathSegments = fullPath.split("?")[0].split("/").filter(pathSegment => pathSegment !== "");
const depth = baseDepth + (pathSegments.length - 1); const depth = baseDepth + (pathSegments.length - 1);
pathCache.set(fullPath, depth); pathCache.set(fullPath, depth);
return depth; return depth;
@@ -103,23 +114,15 @@ onUnmounted(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
overflow-x: hidden; overflow-x: clip;
z-index: 0;
// 此 wrapper 必须独立,不可将 class=pages 直接加在 <component> 上:
// 否则页面 root element 与动画容器同为一个 DOM 节点,
// 页面自身的 padding 会使 position:fixed; width:100% 的盒子溢出视口。
.pages {
height: 100%;
background: v-bind(pageBackground);
overflow-x: hidden;
}
// ---------- push-left / push-right 公共激活状态 ---------- // ---------- push-left / push-right 公共激活状态 ----------
.push-left-enter-active, :deep(.push-left-enter-active),
.push-left-leave-active, :deep(.push-left-leave-active),
.push-right-enter-active, :deep(.push-right-enter-active),
.push-right-leave-active { :deep(.push-right-leave-active) {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: fixed; position: fixed;
@@ -127,51 +130,51 @@ onUnmounted(() => {
backface-visibility: hidden; backface-visibility: hidden;
} }
// ---------- 前进:下一页从右滑入,当前页缩退到左侧 ---------- // ---------- push-left:下一页从右滑入,当前页缩退到左侧 ----------
.push-left-enter-from { :deep(.push-left-enter-from) {
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
box-shadow: -4px 0 16px rgba(0, 0, 0, @shadow-intensity); box-shadow: -4px 0 16px rgba(0, 0, 0, @shadow-intensity);
} }
.push-left-enter-to { :deep(.push-left-enter-to) {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
.push-left-leave-active { :deep(.push-left-leave-active) {
transition: all @duration @easing, filter .3s; transition: all @duration @easing, filter .3s;
} }
.push-left-leave-to { :deep(.push-left-leave-to) {
filter: brightness(@brightness); filter: brightness(@brightness);
transform: translate3d(-@page-offset, 0, 0); transform: translate3d(-@page-offset, 0, 0);
} }
// ---------- 返回:当前页从右滑出,上一页从左侧复位 ---------- // ---------- push-right:当前页从右滑出,上一页从左侧复位 ----------
.push-right-enter-active { :deep(.push-right-enter-active) {
z-index: 0; z-index: 0;
transition: transform @duration @easing, opacity .3s; transition: transform @duration @easing, opacity .3s;
} }
.push-right-enter-from { :deep(.push-right-enter-from) {
transform: translate3d(-@page-offset, 0, 0); transform: translate3d(-@page-offset, 0, 0);
} }
.push-right-enter-to { :deep(.push-right-enter-to) {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
.push-right-leave-active { :deep(.push-right-leave-active) {
z-index: 1; z-index: 1;
transition: transform @duration @easing, box-shadow .3s; transition: transform @duration @easing, box-shadow .3s;
} }
.push-right-leave-from { :deep(.push-right-leave-from) {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
.push-right-leave-to { :deep(.push-right-leave-to) {
transform: translate3d(105%, 0, 0); transform: translate3d(105%, 0, 0);
box-shadow: 4px 0 16px rgba(0, 0, 0, @shadow-intensity); box-shadow: 4px 0 16px rgba(0, 0, 0, @shadow-intensity);
} }
+28
View File
@@ -0,0 +1,28 @@
<template>
<div class="page">
<component :is="component" />
</div>
</template>
<script setup lang="ts">
import type { Component } from "vue";
defineOptions({
name: "RoutePage"
});
defineProps<{
component: Component;
background: string;
}>();
</script>
<style scoped lang="less">
.page {
width: 100%;
height: 100%;
overflow: auto;
overflow-x: clip;
background: v-bind(background);
}
</style>
+2 -2
View File
@@ -3,7 +3,7 @@
v-can="permissionCodes.customer.read" v-can="permissionCodes.customer.read"
class="customer-invite-rank" class="customer-invite-rank"
> >
<t-pull-down-refresh <app-pull-down-refresh
class="list-wrapper" class="list-wrapper"
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@@ -46,7 +46,7 @@
</t-cell-group> </t-cell-group>
<div v-else class="center-tips" v-text="emptyText" /> <div v-else class="center-tips" v-text="emptyText" />
<div v-if="rankedCustomerList.length" class="center-tips" v-text="loadStateText" /> <div v-if="rankedCustomerList.length" class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
</template> </template>
+2 -2
View File
@@ -54,7 +54,7 @@
/> />
<t-button size="extra-small" variant="text" @click="clearTagFilter">清空</t-button> <t-button size="extra-small" variant="text" @click="clearTagFilter">清空</t-button>
</div> </div>
<t-pull-down-refresh <app-pull-down-refresh
class="fix-last-cell-line" class="fix-last-cell-line"
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@@ -113,7 +113,7 @@
<div v-if="!pageResult.list.length" class="center-tips" v-text="isLoading ? '正在加载客户' : '暂无客户数据'" /> <div v-if="!pageResult.list.length" class="center-tips" v-text="isLoading ? '正在加载客户' : '暂无客户数据'" />
<div v-if="pageResult.list.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" /> <div v-if="pageResult.list.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
</div> </div>
</t-pull-down-refresh> </app-pull-down-refresh>
<tag-selector <tag-selector
v-model="selectedTagIdList" v-model="selectedTagIdList"
v-model:visible="tagSelectorVisible" v-model:visible="tagSelectorVisible"
+2 -2
View File
@@ -3,7 +3,7 @@
v-can="{ value: [permissionCodes.event.read, permissionCodes.user.read], mode: 'and' }" v-can="{ value: [permissionCodes.event.read, permissionCodes.user.read], mode: 'and' }"
class="registration-event-list" class="registration-event-list"
> >
<t-pull-down-refresh <app-pull-down-refresh
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@refresh="refresh" @refresh="refresh"
@@ -71,7 +71,7 @@
</t-cell-group> </t-cell-group>
<div v-if="!visibleEventList.length" class="empty-block" v-text="emptyText" /> <div v-if="!visibleEventList.length" class="empty-block" v-text="emptyText" />
<div v-if="visibleEventList.length" class="center-tips" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" /> <div v-if="visibleEventList.length" class="center-tips" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" />
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" /> <nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
<event-remove-dialog <event-remove-dialog
+2 -2
View File
@@ -51,7 +51,7 @@
/> />
</t-dropdown-menu> </t-dropdown-menu>
</div> </div>
<t-pull-down-refresh <app-pull-down-refresh
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@refresh="reloadRecords" @refresh="reloadRecords"
@@ -101,7 +101,7 @@
<div v-else class="center-tips" v-text="isLoading ? '正在加载登记事件记录' : '暂无登记事件记录'" /> <div v-else class="center-tips" v-text="isLoading ? '正在加载登记事件记录' : '暂无登记事件记录'" />
<div v-if="pageResult.list.length" class="center-tips" v-text="loadStateText" /> <div v-if="pageResult.list.length" class="center-tips" v-text="loadStateText" />
</div> </div>
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" /> <nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
<customer-selector <customer-selector
+2 -2
View File
@@ -35,7 +35,7 @@
@click="endVisible = true" @click="endVisible = true"
/> />
</t-cell-group> </t-cell-group>
<t-pull-down-refresh <app-pull-down-refresh
class="list-wrapper" class="list-wrapper"
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@@ -100,7 +100,7 @@
</t-cell-group> </t-cell-group>
<div v-else class="center-tips" v-text="emptyStateText" /> <div v-else class="center-tips" v-text="emptyStateText" />
<div v-if="pageResult.list.length" class="center-tips" v-text="loadStateText" /> <div v-if="pageResult.list.length" class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
<t-popup v-model="startVisible" placement="bottom"> <t-popup v-model="startVisible" placement="bottom">
<t-date-time-picker <t-date-time-picker
@@ -40,7 +40,7 @@
/> />
</t-dropdown-menu> </t-dropdown-menu>
</div> </div>
<t-pull-down-refresh <app-pull-down-refresh
class="list-wrap" class="list-wrap"
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@@ -149,7 +149,7 @@
</t-swipe-cell> </t-swipe-cell>
</t-cell-group> </t-cell-group>
<div class="center-tips" v-text="isLoading ? '正在加载提醒' : pageResult.list.length ? (isNoMore ? '已经到底了' : '上拉加载更多') : '暂无跟进提醒'" /> <div class="center-tips" v-text="isLoading ? '正在加载提醒' : pageResult.list.length ? (isNoMore ? '已经到底了' : '上拉加载更多') : '暂无跟进提醒'" />
</t-pull-down-refresh> </app-pull-down-refresh>
<customer-selector <customer-selector
v-model="selectedCustomerId" v-model="selectedCustomerId"
v-model:visible="customerSelectorVisible" v-model:visible="customerSelectorVisible"
@@ -46,7 +46,6 @@
:product-name="item.productNameSnapshot" :product-name="item.productNameSnapshot"
:snapshot="item.skuSpecSnapshot" :snapshot="item.skuSpecSnapshot"
:fallback="item.specSummarySnapshot || item.skuNameSnapshot" :fallback="item.specSummarySnapshot || item.skuNameSnapshot"
:unit="item.unitSnapshot"
/> />
</div> </div>
<t-input <t-input
@@ -46,7 +46,7 @@
/> />
</t-dropdown-menu> </t-dropdown-menu>
</div> </div>
<t-pull-down-refresh <app-pull-down-refresh
v-model="refreshing" v-model="refreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@refresh="refresh" @refresh="refresh"
@@ -93,7 +93,7 @@
<div v-else class="center-tips" v-text="loading ? '正在加载履约单' : '暂无履约单'" /> <div v-else class="center-tips" v-text="loading ? '正在加载履约单' : '暂无履约单'" />
<div class="center-tips" v-text="loading ? '正在加载' : noMore ? '已经到底了' : '上拉加载更多'" /> <div class="center-tips" v-text="loading ? '正在加载' : noMore ? '已经到底了' : '上拉加载更多'" />
</div> </div>
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
<nav-bar-action-menu v-if="canCreate" :actions="actions" /> <nav-bar-action-menu v-if="canCreate" :actions="actions" />
<customer-selector <customer-selector
+2 -2
View File
@@ -1,6 +1,6 @@
<template> <template>
<div v-can="corePermissionCodes.notify.read" class="notify-management"> <div v-can="corePermissionCodes.notify.read" class="notify-management">
<t-pull-down-refresh <app-pull-down-refresh
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@refresh="refresh" @refresh="refresh"
@@ -54,7 +54,7 @@
</t-cell-group> </t-cell-group>
<t-empty v-else-if="!isLoading" description="暂无已发送通知" /> <t-empty v-else-if="!isLoading" description="暂无已发送通知" />
<div class="center-tips" v-text="loadStateText" /> <div class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
</template> </template>
+2 -2
View File
@@ -8,7 +8,7 @@
@change="switchFilter" @change="switchFilter"
v-entrance-transition v-entrance-transition
/> />
<t-pull-down-refresh <app-pull-down-refresh
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@refresh="refresh" @refresh="refresh"
@@ -61,7 +61,7 @@
description="暂无站内通知" description="暂无站内通知"
/> />
<div class="center-tips" v-text="loadStateText" /> <div class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
</template> </template>
+2 -2
View File
@@ -17,7 +17,7 @@
/> />
</t-dropdown-menu> </t-dropdown-menu>
</div> </div>
<t-pull-down-refresh <app-pull-down-refresh
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@refresh="reload" @refresh="reload"
@@ -73,7 +73,7 @@
</t-cell-group> </t-cell-group>
<div v-else class="center-tips" v-text="loading ? '正在加载套餐配置' : '暂无套餐配置'" /> <div v-else class="center-tips" v-text="loading ? '正在加载套餐配置' : '暂无套餐配置'" />
<div class="center-tips" v-text="loadStateText" /> <div class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
<nav-bar-action-menu v-if="canCreate" :actions="actionList" /> <nav-bar-action-menu v-if="canCreate" :actions="actionList" />
</template> </template>
+2 -2
View File
@@ -17,7 +17,7 @@
/> />
</t-dropdown-menu> </t-dropdown-menu>
</div> </div>
<t-pull-down-refresh <app-pull-down-refresh
v-model="refreshing" v-model="refreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@refresh="reload" @refresh="reload"
@@ -64,7 +64,7 @@
</t-cell-group> </t-cell-group>
<div v-else class="center-tips" v-text="loading ? '正在加载套餐' : '暂无套餐'" /> <div v-else class="center-tips" v-text="loading ? '正在加载套餐' : '暂无套餐'" />
<div class="center-tips" v-text="loadStateText" /> <div class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
</template> </template>
+2 -2
View File
@@ -1,6 +1,6 @@
<template> <template>
<div v-can="{ value: [corePermissionCodes.role.read, corePermissionCodes.permission.read], mode: 'and' }" class="permission-list"> <div v-can="{ value: [corePermissionCodes.role.read, corePermissionCodes.permission.read], mode: 'and' }" class="permission-list">
<t-pull-down-refresh <app-pull-down-refresh
class="list-wrapper" class="list-wrapper"
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@@ -27,7 +27,7 @@
</t-cell-group> </t-cell-group>
<t-empty v-if="!permissionStore.loading && !isSourceLoading" description="暂无权限" /> <t-empty v-if="!permissionStore.loading && !isSourceLoading" description="暂无权限" />
</div> </div>
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
</template> </template>
+2 -2
View File
@@ -1,6 +1,6 @@
<template> <template>
<div v-can="{ value: [corePermissionCodes.role.read, corePermissionCodes.permission.read], mode: 'and' }" class="role-list"> <div v-can="{ value: [corePermissionCodes.role.read, corePermissionCodes.permission.read], mode: 'and' }" class="role-list">
<t-pull-down-refresh <app-pull-down-refresh
class="list-wrapper" class="list-wrapper"
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@@ -30,7 +30,7 @@
</t-swipe-cell> </t-swipe-cell>
</t-cell-group> </t-cell-group>
<t-empty v-else-if="!permissionStore.loading" description="暂无角色" /> <t-empty v-else-if="!permissionStore.loading" description="暂无角色" />
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
</template> </template>
+2 -2
View File
@@ -18,7 +18,7 @@
</template> </template>
</t-input> </t-input>
</div> </div>
<t-pull-down-refresh <app-pull-down-refresh
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@refresh="reload" @refresh="reload"
@@ -47,7 +47,7 @@
</t-cell-group> </t-cell-group>
<div class="center-tips" v-text="loadStateText" /> <div class="center-tips" v-text="loadStateText" />
</div> </div>
</t-pull-down-refresh> </app-pull-down-refresh>
<customer-selector <customer-selector
v-model="selectedCustomerId" v-model="selectedCustomerId"
v-model:visible="customerSelectorVisible" v-model:visible="customerSelectorVisible"
+2 -2
View File
@@ -36,7 +36,7 @@
/> />
</t-dropdown-menu> </t-dropdown-menu>
</div> </div>
<t-pull-down-refresh <app-pull-down-refresh
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@refresh="reload" @refresh="reload"
@@ -107,7 +107,7 @@
</t-cell-group> </t-cell-group>
<div class="center-tips" v-text="loadStateText" /> <div class="center-tips" v-text="loadStateText" />
</div> </div>
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
<customer-selector <customer-selector
v-model="selectedCustomerId" v-model="selectedCustomerId"
+2 -2
View File
@@ -10,7 +10,7 @@
placeholder="搜索产品名称、编码或 SKU" placeholder="搜索产品名称、编码或 SKU"
/> />
</div> </div>
<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="reload" @scrolltolower="load"> <app-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="reload" @scrolltolower="load">
<t-cell-group v-if="result.list.length" theme="card"> <t-cell-group v-if="result.list.length" theme="card">
<t-cell <t-cell
v-for="(item, index) in result.list" v-for="(item, index) in result.list"
@@ -56,7 +56,7 @@
</t-cell-group> </t-cell-group>
<t-empty v-else :description="isLoading ? '正在加载兑换配置' : '暂无兑换配置'" /> <t-empty v-else :description="isLoading ? '正在加载兑换配置' : '暂无兑换配置'" />
<div class="tips" v-text="isNoMore ? `共 ${result.total} 条配置` : '上拉加载更多'" /> <div class="tips" v-text="isNoMore ? `共 ${result.total} 条配置` : '上拉加载更多'" />
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
<nav-bar-action-menu <nav-bar-action-menu
v-can="permissionCodes.pointRedeemSku.manage" v-can="permissionCodes.pointRedeemSku.manage"
+2 -2
View File
@@ -40,7 +40,7 @@
/> />
</t-dropdown-menu> </t-dropdown-menu>
</div> </div>
<t-pull-down-refresh <app-pull-down-refresh
v-model="refreshing" v-model="refreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@refresh="reload" @refresh="reload"
@@ -112,7 +112,7 @@
:description="loading ? '正在加载兑换记录' : hasFilter ? '未找到匹配的兑换记录' : '暂无兑换记录'" :description="loading ? '正在加载兑换记录' : hasFilter ? '未找到匹配的兑换记录' : '暂无兑换记录'"
/> />
</div> </div>
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
<customer-selector <customer-selector
v-model="customerId" v-model="customerId"
+2 -2
View File
@@ -10,7 +10,7 @@
/> />
</t-dropdown-menu> </t-dropdown-menu>
</div> </div>
<t-pull-down-refresh <app-pull-down-refresh
class="list-wrapper" class="list-wrapper"
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@@ -56,7 +56,7 @@
</t-cell> </t-cell>
</t-cell-group> </t-cell-group>
<div class="center-tips" v-text="loadStateText" /> <div class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" /> <nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
</template> </template>
+2 -2
View File
@@ -17,7 +17,7 @@
/> />
</t-dropdown-menu> </t-dropdown-menu>
</div> </div>
<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="refresh" @scrolltolower="loadMore"> <app-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="refresh" @scrolltolower="loadMore">
<t-cell-group v-if="categoryList.length" theme="card" class="list fix-last-cell-line"> <t-cell-group v-if="categoryList.length" theme="card" class="list fix-last-cell-line">
<t-swipe-cell v-for="(item, index) in categoryList" :key="item.id" class="item" v-entrance-transition="index * 30"> <t-swipe-cell v-for="(item, index) in categoryList" :key="item.id" class="item" v-entrance-transition="index * 30">
<t-cell arrow hover @click="openEditDialog(item)"> <t-cell arrow hover @click="openEditDialog(item)">
@@ -37,7 +37,7 @@
</t-cell-group> </t-cell-group>
<div v-else class="center-tips" v-text="emptyText" /> <div v-else class="center-tips" v-text="emptyText" />
<div v-if="categoryList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" /> <div v-if="categoryList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
<t-dialog <t-dialog
v-model:visible="editDialogVisible" v-model:visible="editDialogVisible"
+58 -6
View File
@@ -1,5 +1,5 @@
<template> <template>
<div v-can="permissionCodes.product.read" class="product-list"> <div ref="productListRef" v-can="permissionCodes.product.read" class="product-list">
<div class="filters bg-white"> <div class="filters bg-white">
<t-input <t-input
v-model="keyword" v-model="keyword"
@@ -34,7 +34,7 @@
/> />
</t-dropdown-menu> </t-dropdown-menu>
</div> </div>
<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="refresh" @scrolltolower="loadMore"> <app-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="refresh" @scrolltolower="loadMore">
<t-cell-group <t-cell-group
v-if="productList.length" v-if="productList.length"
class="list fix-last-cell-line empty-cell-title-margin" class="list fix-last-cell-line empty-cell-title-margin"
@@ -84,14 +84,15 @@
</t-cell-group> </t-cell-group>
<div v-else class="center-tips" v-text="emptyText" /> <div v-else class="center-tips" v-text="emptyText" />
<div v-if="productList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" /> <div v-if="productList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
<nav-bar-action-menu v-if="canCreate" :actions="actionList" /> <nav-bar-action-menu v-if="route.name === 'ProductList' && canCreate" :actions="actionList" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { type DropdownValue } from "tdesign-mobile-vue"; import { type DropdownValue } from "tdesign-mobile-vue";
import { useUserStore } from "timi-web-api"; import { useUserStore } from "timi-web-api";
import { onBeforeRouteLeave } from "vue-router";
import ProductAPI from "@/api/ProductAPI"; import ProductAPI from "@/api/ProductAPI";
import NavBarActionMenu from "@/components/NavBarActionMenu.vue"; import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
import { useNavBarStore } from "@/store/navBarStore"; import { useNavBarStore } from "@/store/navBarStore";
@@ -105,6 +106,8 @@ import { permissionCodes } from "@/utils/permission";
defineOptions({ name: "ProductList" }); defineOptions({ name: "ProductList" });
const router = useRouter(); const router = useRouter();
const route = useRoute();
const productListRef = ref<HTMLElement | null>(null);
const navBarStore = useNavBarStore(); const navBarStore = useNavBarStore();
const userStore = useUserStore(); const userStore = useUserStore();
const canCreate = computed(() => userStore.hasPermissions(permissionCodes.product.create)); const canCreate = computed(() => userStore.hasPermissions(permissionCodes.product.create));
@@ -129,6 +132,42 @@ const isRefreshing = ref(false);
const isNoMore = ref(false); const isNoMore = ref(false);
let keywordTimer: number | undefined; let keywordTimer: number | undefined;
let requestToken = 0; let requestToken = 0;
let savedPageScrollTop: number | undefined;
function getProductListPage(): HTMLElement | null {
return productListRef.value?.closest<HTMLElement>(".page") || null;
}
function savePageScrollPosition(): void {
const page = getProductListPage();
if (!page) {
return;
}
savedPageScrollTop = page.scrollTop;
}
function restorePageScrollPosition(): void {
if (savedPageScrollTop === undefined) {
return;
}
const scrollTop = savedPageScrollTop;
requestAnimationFrame(() => {
const page = getProductListPage();
if (!page) {
return;
}
page.scrollTop = scrollTop;
savedPageScrollTop = undefined;
});
}
function syncNavBar(): void {
navBarStore.clearRight();
navBarStore.setCustomRightVisible(route.name === "ProductList" && canCreate.value);
}
const statusOptions = [ const statusOptions = [
{ label: "全部状态", value: "ALL" }, { label: "全部状态", value: "ALL" },
@@ -265,8 +304,7 @@ async function toDetail(item: Product): Promise<void> {
} }
onMounted(async () => { onMounted(async () => {
navBarStore.clearRight(); syncNavBar();
navBarStore.setCustomRightVisible(canCreate.value);
try { try {
await Promise.all([loadCategories(), fetch(true)]); await Promise.all([loadCategories(), fetch(true)]);
} catch (error) { } catch (error) {
@@ -274,6 +312,15 @@ onMounted(async () => {
} }
}); });
onActivated(() => {
restorePageScrollPosition();
syncNavBar();
});
onDeactivated(() => {
savePageScrollPosition();
});
watch(keyword, () => { watch(keyword, () => {
window.clearTimeout(keywordTimer); window.clearTimeout(keywordTimer);
keywordTimer = window.setTimeout(async () => { keywordTimer = window.setTimeout(async () => {
@@ -285,6 +332,11 @@ watch(keyword, () => {
}, 300); }, 300);
}); });
onBeforeRouteLeave(() => {
savePageScrollPosition();
navBarStore.clearRight();
});
onUnmounted(() => { onUnmounted(() => {
navBarStore.clearRight(); navBarStore.clearRight();
window.clearTimeout(keywordTimer); window.clearTimeout(keywordTimer);
+49 -3
View File
@@ -1,5 +1,5 @@
<template> <template>
<div v-can="permissionCodes.productStock.read" class="product-stock-list"> <div ref="productStockListRef" v-can="permissionCodes.productStock.read" class="product-stock-list">
<div class="search bg-white"> <div class="search bg-white">
<t-input <t-input
v-model="keyword" v-model="keyword"
@@ -11,7 +11,7 @@
/> />
</div> </div>
<t-pull-down-refresh <app-pull-down-refresh
class="list-wrap empty-cell-title-margin" class="list-wrap empty-cell-title-margin"
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@@ -64,12 +64,13 @@
</t-cell-group> </t-cell-group>
<div v-else class="center-tips" v-text="emptyText" /> <div v-else class="center-tips" v-text="emptyText" />
<div v-if="productList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" /> <div v-if="productList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useUserStore } from "timi-web-api"; import { useUserStore } from "timi-web-api";
import { onBeforeRouteLeave } from "vue-router";
import ProductAPI from "@/api/ProductAPI"; import ProductAPI from "@/api/ProductAPI";
import { useNavBarStore } from "@/store/navBarStore"; import { useNavBarStore } from "@/store/navBarStore";
import type { ProductStockProduct } from "@/types/Product"; import type { ProductStockProduct } from "@/types/Product";
@@ -82,6 +83,7 @@ defineOptions({ name: "ProductStockList" });
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const productStockListRef = ref<HTMLElement | null>(null);
const navBarStore = useNavBarStore(); const navBarStore = useNavBarStore();
const userStore = useUserStore(); const userStore = useUserStore();
const keyword = ref(""); const keyword = ref("");
@@ -93,6 +95,37 @@ const isRefreshing = ref(false);
const isNoMore = ref(false); const isNoMore = ref(false);
let keywordTimer: number | undefined; let keywordTimer: number | undefined;
let requestToken = 0; let requestToken = 0;
let savedPageScrollTop: number | undefined;
function getProductStockListPage(): HTMLElement | null {
return productStockListRef.value?.closest<HTMLElement>(".page") || null;
}
function savePageScrollPosition(): void {
const page = getProductStockListPage();
if (!page) {
return;
}
savedPageScrollTop = page.scrollTop;
}
function restorePageScrollPosition(): void {
if (savedPageScrollTop === undefined) {
return;
}
const scrollTop = savedPageScrollTop;
requestAnimationFrame(() => {
const page = getProductStockListPage();
if (!page) {
return;
}
page.scrollTop = scrollTop;
savedPageScrollTop = undefined;
});
}
const emptyText = computed(() => isLoading.value ? "正在加载产品" : keyword.value ? "未找到匹配产品" : "暂无启用库存管理的产品"); const emptyText = computed(() => isLoading.value ? "正在加载产品" : keyword.value ? "未找到匹配产品" : "暂无启用库存管理的产品");
@@ -175,6 +208,14 @@ onMounted(async () => {
} }
}); });
onActivated(() => {
restorePageScrollPosition();
});
onDeactivated(() => {
savePageScrollPosition();
});
watch(keyword, () => { watch(keyword, () => {
window.clearTimeout(keywordTimer); window.clearTimeout(keywordTimer);
keywordTimer = window.setTimeout(async () => { keywordTimer = window.setTimeout(async () => {
@@ -186,6 +227,11 @@ watch(keyword, () => {
}, 300); }, 300);
}); });
onBeforeRouteLeave(() => {
savePageScrollPosition();
navBarStore.clearRight();
});
onUnmounted(() => { onUnmounted(() => {
navBarStore.clearRight(); navBarStore.clearRight();
window.clearTimeout(keywordTimer); window.clearTimeout(keywordTimer);
+2 -2
View File
@@ -14,7 +14,7 @@
<t-dropdown-item v-model="direction" label="出入库" :options="directionOptions" @change="selectDirection" /> <t-dropdown-item v-model="direction" label="出入库" :options="directionOptions" @change="selectDirection" />
</t-dropdown-menu> </t-dropdown-menu>
</div> </div>
<t-pull-down-refresh <app-pull-down-refresh
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@refresh="refresh" @refresh="refresh"
@@ -84,7 +84,7 @@
</t-cell-group> </t-cell-group>
<div v-else class="center-tips" v-text="emptyText" /> <div v-else class="center-tips" v-text="emptyText" />
<div v-if="recordList.length" class="center-tips" v-text="loadStateText" /> <div v-if="recordList.length" class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
</template> </template>
+2 -2
View File
@@ -10,7 +10,7 @@
placeholder="搜索 SKU 名称、编码或规格" placeholder="搜索 SKU 名称、编码或规格"
/> />
</div> </div>
<t-pull-down-refresh <app-pull-down-refresh
class="list-wrap empty-cell-title-margin" class="list-wrap empty-cell-title-margin"
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@@ -68,7 +68,7 @@
<div v-else class="center-tips" v-text="emptyText" /> <div v-else class="center-tips" v-text="emptyText" />
<div v-if="skuStockList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" /> <div v-if="skuStockList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
</div> </div>
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
</template> </template>
@@ -53,7 +53,7 @@
/> />
</t-dropdown-menu> </t-dropdown-menu>
</div> </div>
<t-pull-down-refresh <app-pull-down-refresh
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@refresh="reloadRecords" @refresh="reloadRecords"
@@ -137,7 +137,7 @@
<div v-else class="center-tips" v-text="isLoading ? '正在加载消费记录' : '暂无消费记录'" /> <div v-else class="center-tips" v-text="isLoading ? '正在加载消费记录' : '暂无消费记录'" />
<div v-if="recordList.length" class="center-tips" v-text="loadStateText" /> <div v-if="recordList.length" class="center-tips" v-text="loadStateText" />
</div> </div>
</t-pull-down-refresh> </app-pull-down-refresh>
<customer-selector <customer-selector
v-model="customerId" v-model="customerId"
v-model:visible="customerSelectorVisible" v-model:visible="customerSelectorVisible"
+2 -2
View File
@@ -47,7 +47,7 @@
/> />
</t-dropdown-menu> </t-dropdown-menu>
</div> </div>
<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="reload" @scrolltolower="loadMore"> <app-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="reload" @scrolltolower="loadMore">
<t-cell-group v-if="recordList.length" class="empty-cell-title-margin" theme="card"> <t-cell-group v-if="recordList.length" class="empty-cell-title-margin" theme="card">
<t-cell <t-cell
class="item" class="item"
@@ -117,7 +117,7 @@
</t-cell-group> </t-cell-group>
<div v-else class="empty" v-text="loading ? '正在加载资金流水' : '暂无资金流水'" /> <div v-else class="empty" v-text="loading ? '正在加载资金流水' : '暂无资金流水'" />
<div class="center-tips" v-text="loadStateText" /> <div class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
<customer-selector <customer-selector
v-model="customerId" v-model="customerId"
+1 -2
View File
@@ -28,7 +28,7 @@
<span v-else v-text="Text.display(order.remark)" /> <span v-else v-text="Text.display(order.remark)" />
</t-form-item> </t-form-item>
<t-form-item label-width="0"> <t-form-item label-width="0">
<div class="photo-wrap"> <div class="photo-wrap" v-entrance-transition="105">
<media-selector <media-selector
:model-value="photoURLList" :model-value="photoURLList"
v-model:photo-items="photoItems" v-model:photo-items="photoItems"
@@ -38,7 +38,6 @@
:show-viewer-actions="isEditing" :show-viewer-actions="isEditing"
:upload="isEditing ? uploadPhotoList : undefined" :upload="isEditing ? uploadPhotoList : undefined"
title="订单照片" title="订单照片"
v-entrance-transition="105"
/> />
</div> </div>
</t-form-item> </t-form-item>
+104 -5
View File
@@ -1,5 +1,5 @@
<template> <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="filters">
<div class="search-row"> <div class="search-row">
<t-input <t-input
@@ -35,7 +35,7 @@
</t-button> </t-button>
</div> </div>
</div> </div>
<t-pull-down-refresh <app-pull-down-refresh
class="list-wrap" class="list-wrap"
v-model="refreshing" v-model="refreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@@ -82,9 +82,9 @@
<div v-if="!list.length" class="empty" v-text="loading ? '正在加载销售订单' : '暂无销售订单'" /> <div v-if="!list.length" class="empty" v-text="loading ? '正在加载销售订单' : '暂无销售订单'" />
</div> </div>
<div class="center-tips" v-text="loading ? '正在加载' : noMore ? '已经到底了' : '上拉加载更多'" /> <div class="center-tips" v-text="loading ? '正在加载' : noMore ? '已经到底了' : '上拉加载更多'" />
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </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 <customer-selector
v-model="customerId" v-model="customerId"
v-model:visible="customerSelectorVisible" v-model:visible="customerSelectorVisible"
@@ -101,6 +101,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { Toolkit } from "timi-web"; import { Toolkit } from "timi-web";
import { useUserStore } from "timi-web-api"; import { useUserStore } from "timi-web-api";
import { onBeforeRouteLeave } from "vue-router";
import CustomerAPI from "@/api/CustomerAPI"; import CustomerAPI from "@/api/CustomerAPI";
import PackageAPI from "@/api/PackageAPI"; import PackageAPI from "@/api/PackageAPI";
import SalesOrderAPI from "@/api/SalesOrderAPI"; 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 SALES_ORDER_FILTER_STORAGE_KEY = "gao-customer-h5:sales-order-filter";
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const salesOrderListRef = ref<HTMLElement | null>(null);
const currentStoreStore = useCurrentStoreStore(); const currentStoreStore = useCurrentStoreStore();
const navBarStore = useNavBarStore(); const navBarStore = useNavBarStore();
const userStore = useUserStore(); const userStore = useUserStore();
@@ -149,6 +151,38 @@ const canCreateFulfillment = computed(() => userStore.hasPermissions(permissionC
const canCancel = computed(() => userStore.hasPermissions(permissionCodes.salesOrder.cancel)); const canCancel = computed(() => userStore.hasPermissions(permissionCodes.salesOrder.cancel));
const canRefund = computed(() => userStore.hasPermissions(permissionCodes.fund.refund)); const canRefund = computed(() => userStore.hasPermissions(permissionCodes.fund.refund));
const canStoreManager = computed(() => userStore.hasRoles(gaoRoleCodes.storeManager)); 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(() => [ const actions = computed(() => [
...(canCreate.value ? [{ ...(canCreate.value ? [{
key: "create", key: "create",
@@ -214,6 +248,7 @@ const loading = ref(false);
const refreshing = ref(false); const refreshing = ref(false);
const noMore = ref(false); const noMore = ref(false);
const pageSize = 15; const pageSize = 15;
let listRequestId = 0;
// ---------- 路由和持久化 ---------- // ---------- 路由和持久化 ----------
@@ -328,6 +363,35 @@ async function loadRouteCustomer(): Promise<void> {
setCustomerKeyword(selectedCustomer.value); 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 { function getEffectiveList<T>(value: T[], allValues: T[]): T[] | undefined {
@@ -369,18 +433,24 @@ async function fetchList(reset: boolean): Promise<void> {
noMore.value = false; noMore.value = false;
list.value = []; list.value = [];
} }
const requestId = ++listRequestId;
loading.value = true; loading.value = true;
try { try {
const result = await SalesOrderAPI.list(buildPageFilter()); const result = await SalesOrderAPI.list(buildPageFilter());
if (requestId !== listRequestId) {
return;
}
const rows = result.list || []; const rows = result.list || [];
list.value = reset ? rows : list.value.concat(rows); list.value = reset ? rows : list.value.concat(rows);
total.value = result.total || 0; total.value = result.total || 0;
pageIndex.value += 1; pageIndex.value += 1;
noMore.value = rows.length < pageSize || total.value <= list.value.length; noMore.value = rows.length < pageSize || total.value <= list.value.length;
} finally { } finally {
if (requestId === listRequestId) {
loading.value = false; loading.value = false;
} }
} }
}
async function reloadList(): Promise<void> { async function reloadList(): Promise<void> {
await customerOrderSummaryRef.value?.refresh(); await customerOrderSummaryRef.value?.refresh();
@@ -461,6 +531,9 @@ const search = Toolkit.debounce(async () => {
}, false); }, false);
watch(keyword, async () => { watch(keyword, async () => {
if (route.name !== "SalesOrderList") {
return;
}
const isCustomerKeyword = !!customerId.value && keyword.value.trim() === customerKeyword; const isCustomerKeyword = !!customerId.value && keyword.value.trim() === customerKeyword;
customerKeyword = ""; customerKeyword = "";
if (isCustomerKeyword) { 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.clearRight();
navBarStore.setCustomRightVisible(!!actions.value.length); navBarStore.setCustomRightVisible(!!actions.value.length);
}); });
onDeactivated(() => { onDeactivated(() => {
if (!shouldReloadOnActivate && savedPageScrollTop === undefined) {
savePageScrollPosition();
}
filterVisible.value = false; filterVisible.value = false;
navBarStore.clearRight(); navBarStore.clearRight();
}); });
onBeforeRouteLeave(to => {
if (to.name === "ProductTab") {
shouldReloadOnActivate = true;
resetForProductTab();
return;
}
savePageScrollPosition();
});
onUnmounted(() => { onUnmounted(() => {
navBarStore.clearRight(); navBarStore.clearRight();
search.cancel(); search.cancel();
+2 -2
View File
@@ -1,5 +1,5 @@
<template> <template>
<t-pull-down-refresh <app-pull-down-refresh
v-can="permissionCodes.storeDiary.read" v-can="permissionCodes.storeDiary.read"
class="store-diary-list" class="store-diary-list"
v-model="isRefreshing" v-model="isRefreshing"
@@ -52,7 +52,7 @@
</t-cell-group> </t-cell-group>
<div class="center-tips" v-text="loadStateText" /> <div class="center-tips" v-text="loadStateText" />
</div> </div>
</t-pull-down-refresh> </app-pull-down-refresh>
<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" /> <nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
<bottom-popup <bottom-popup
v-model="diaryPopupVisible" v-model="diaryPopupVisible"
+2 -2
View File
@@ -1,6 +1,6 @@
<template> <template>
<div v-can="permissionCodes.store.read" class="store-list"> <div v-can="permissionCodes.store.read" class="store-list">
<t-pull-down-refresh <app-pull-down-refresh
class="list-wrapper" class="list-wrapper"
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@@ -46,7 +46,7 @@
</t-cell-group> </t-cell-group>
<div v-if="!pageResult.list.length" class="center-tips" v-text="isLoading ? '正在加载门店' : '暂无门店'" /> <div v-if="!pageResult.list.length" class="center-tips" v-text="isLoading ? '正在加载门店' : '暂无门店'" />
<div v-if="pageResult.list.length" class="center-tips" v-text="isNoMore ? '已加载全部门店' : '上拉加载更多'" /> <div v-if="pageResult.list.length" class="center-tips" v-text="isNoMore ? '已加载全部门店' : '上拉加载更多'" />
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
<store-remove-dialog <store-remove-dialog
v-model:visible="removeDialogVisible" v-model:visible="removeDialogVisible"
+1 -1
View File
@@ -99,7 +99,7 @@ const route = useRoute();
const userStore = useUserStore(); const userStore = useUserStore();
function getSettingTabPage(): HTMLElement | undefined { function getSettingTabPage(): HTMLElement | undefined {
return Array.from(document.querySelectorAll<HTMLElement>(".page-transition .pages")) return Array.from(document.querySelectorAll<HTMLElement>(".page-transition .page"))
.find(element => !!element.querySelector(".management-tab")); .find(element => !!element.querySelector(".management-tab"));
} }
+2 -2
View File
@@ -9,7 +9,7 @@
placeholder="搜索标签" placeholder="搜索标签"
/> />
</div> </div>
<t-pull-down-refresh <app-pull-down-refresh
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@refresh="refresh" @refresh="refresh"
@@ -36,7 +36,7 @@
</div> </div>
<div v-if="!tagList.length" class="empty" v-text="emptyText" /> <div v-if="!tagList.length" class="empty" v-text="emptyText" />
<div v-if="tagList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" /> <div v-if="tagList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
<t-dialog <t-dialog
v-model:visible="editDialogVisible" v-model:visible="editDialogVisible"
+2 -2
View File
@@ -3,7 +3,7 @@
v-can="permissionCodes.user.read" v-can="permissionCodes.user.read"
class="user-list" class="user-list"
> >
<t-pull-down-refresh <app-pull-down-refresh
v-model="isRefreshing" v-model="isRefreshing"
:refresh-timeout="30000" :refresh-timeout="30000"
@refresh="refresh" @refresh="refresh"
@@ -44,7 +44,7 @@
</t-cell-group> </t-cell-group>
<div v-if="!pageResult.list.length" class="center-tips" v-text="isLoading ? '正在加载用户' : '暂无用户'" /> <div v-if="!pageResult.list.length" class="center-tips" v-text="isLoading ? '正在加载用户' : '暂无用户'" />
<div v-if="pageResult.list.length" class="center-tips" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" /> <div v-if="pageResult.list.length" class="center-tips" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" />
</t-pull-down-refresh> </app-pull-down-refresh>
</div> </div>
<nav-bar-action-menu <nav-bar-action-menu
v-if="canCreateUser" v-if="canCreateUser"