refactor PageTransition and PullDownRefresh
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
v-can="permissionCodes.customer.read"
|
||||
class="customer-invite-rank"
|
||||
>
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
class="list-wrapper"
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@@ -46,7 +46,7 @@
|
||||
</t-cell-group>
|
||||
<div v-else class="center-tips" v-text="emptyText" />
|
||||
<div v-if="rankedCustomerList.length" class="center-tips" v-text="loadStateText" />
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
/>
|
||||
<t-button size="extra-small" variant="text" @click="clearTagFilter">清空</t-button>
|
||||
</div>
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
class="fix-last-cell-line"
|
||||
v-model="isRefreshing"
|
||||
: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 ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</div>
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
<tag-selector
|
||||
v-model="selectedTagIdList"
|
||||
v-model:visible="tagSelectorVisible"
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
v-can="{ value: [permissionCodes.event.read, permissionCodes.user.read], mode: 'and' }"
|
||||
class="registration-event-list"
|
||||
>
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="refresh"
|
||||
@@ -71,7 +71,7 @@
|
||||
</t-cell-group>
|
||||
<div v-if="!visibleEventList.length" class="empty-block" v-text="emptyText" />
|
||||
<div v-if="visibleEventList.length" class="center-tips" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
|
||||
<event-remove-dialog
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
/>
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="reloadRecords"
|
||||
@@ -101,7 +101,7 @@
|
||||
<div v-else class="center-tips" v-text="isLoading ? '正在加载登记事件记录' : '暂无登记事件记录'" />
|
||||
<div v-if="pageResult.list.length" class="center-tips" v-text="loadStateText" />
|
||||
</div>
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
|
||||
<customer-selector
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
@click="endVisible = true"
|
||||
/>
|
||||
</t-cell-group>
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
class="list-wrapper"
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@@ -100,7 +100,7 @@
|
||||
</t-cell-group>
|
||||
<div v-else class="center-tips" v-text="emptyStateText" />
|
||||
<div v-if="pageResult.list.length" class="center-tips" v-text="loadStateText" />
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
<t-popup v-model="startVisible" placement="bottom">
|
||||
<t-date-time-picker
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
/>
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
class="list-wrap"
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@@ -149,7 +149,7 @@
|
||||
</t-swipe-cell>
|
||||
</t-cell-group>
|
||||
<div class="center-tips" v-text="isLoading ? '正在加载提醒' : pageResult.list.length ? (isNoMore ? '已经到底了' : '上拉加载更多') : '暂无跟进提醒'" />
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
<customer-selector
|
||||
v-model="selectedCustomerId"
|
||||
v-model:visible="customerSelectorVisible"
|
||||
|
||||
@@ -46,7 +46,6 @@
|
||||
:product-name="item.productNameSnapshot"
|
||||
:snapshot="item.skuSpecSnapshot"
|
||||
:fallback="item.specSummarySnapshot || item.skuNameSnapshot"
|
||||
:unit="item.unitSnapshot"
|
||||
/>
|
||||
</div>
|
||||
<t-input
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
/>
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
v-model="refreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="refresh"
|
||||
@@ -93,7 +93,7 @@
|
||||
<div v-else class="center-tips" v-text="loading ? '正在加载履约单' : '暂无履约单'" />
|
||||
<div class="center-tips" v-text="loading ? '正在加载' : noMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</div>
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
<nav-bar-action-menu v-if="canCreate" :actions="actions" />
|
||||
<customer-selector
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div v-can="corePermissionCodes.notify.read" class="notify-management">
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="refresh"
|
||||
@@ -54,7 +54,7 @@
|
||||
</t-cell-group>
|
||||
<t-empty v-else-if="!isLoading" description="暂无已发送通知" />
|
||||
<div class="center-tips" v-text="loadStateText" />
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
@change="switchFilter"
|
||||
v-entrance-transition
|
||||
/>
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="refresh"
|
||||
@@ -61,7 +61,7 @@
|
||||
description="暂无站内通知"
|
||||
/>
|
||||
<div class="center-tips" v-text="loadStateText" />
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
/>
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="reload"
|
||||
@@ -73,7 +73,7 @@
|
||||
</t-cell-group>
|
||||
<div v-else class="center-tips" v-text="loading ? '正在加载套餐配置' : '暂无套餐配置'" />
|
||||
<div class="center-tips" v-text="loadStateText" />
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
<nav-bar-action-menu v-if="canCreate" :actions="actionList" />
|
||||
</template>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
/>
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
v-model="refreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="reload"
|
||||
@@ -64,7 +64,7 @@
|
||||
</t-cell-group>
|
||||
<div v-else class="center-tips" v-text="loading ? '正在加载套餐' : '暂无套餐'" />
|
||||
<div class="center-tips" v-text="loadStateText" />
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<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"
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@@ -27,7 +27,7 @@
|
||||
</t-cell-group>
|
||||
<t-empty v-if="!permissionStore.loading && !isSourceLoading" description="暂无权限" />
|
||||
</div>
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<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"
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@@ -30,7 +30,7 @@
|
||||
</t-swipe-cell>
|
||||
</t-cell-group>
|
||||
<t-empty v-else-if="!permissionStore.loading" description="暂无角色" />
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
</template>
|
||||
</t-input>
|
||||
</div>
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="reload"
|
||||
@@ -47,7 +47,7 @@
|
||||
</t-cell-group>
|
||||
<div class="center-tips" v-text="loadStateText" />
|
||||
</div>
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
<customer-selector
|
||||
v-model="selectedCustomerId"
|
||||
v-model:visible="customerSelectorVisible"
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
/>
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="reload"
|
||||
@@ -107,7 +107,7 @@
|
||||
</t-cell-group>
|
||||
<div class="center-tips" v-text="loadStateText" />
|
||||
</div>
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
<customer-selector
|
||||
v-model="selectedCustomerId"
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
placeholder="搜索产品名称、编码或 SKU"
|
||||
/>
|
||||
</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
|
||||
v-for="(item, index) in result.list"
|
||||
@@ -56,7 +56,7 @@
|
||||
</t-cell-group>
|
||||
<t-empty v-else :description="isLoading ? '正在加载兑换配置' : '暂无兑换配置'" />
|
||||
<div class="tips" v-text="isNoMore ? `共 ${result.total} 条配置` : '上拉加载更多'" />
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
<nav-bar-action-menu
|
||||
v-can="permissionCodes.pointRedeemSku.manage"
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
/>
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
v-model="refreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="reload"
|
||||
@@ -112,7 +112,7 @@
|
||||
:description="loading ? '正在加载兑换记录' : hasFilter ? '未找到匹配的兑换记录' : '暂无兑换记录'"
|
||||
/>
|
||||
</div>
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
<customer-selector
|
||||
v-model="customerId"
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
/>
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
class="list-wrapper"
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@@ -56,7 +56,7 @@
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<div class="center-tips" v-text="loadStateText" />
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
|
||||
</template>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
/>
|
||||
</t-dropdown-menu>
|
||||
</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-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)">
|
||||
@@ -37,7 +37,7 @@
|
||||
</t-cell-group>
|
||||
<div v-else class="center-tips" v-text="emptyText" />
|
||||
<div v-if="categoryList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
<t-dialog
|
||||
v-model:visible="editDialogVisible"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<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">
|
||||
<t-input
|
||||
v-model="keyword"
|
||||
@@ -34,7 +34,7 @@
|
||||
/>
|
||||
</t-dropdown-menu>
|
||||
</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="productList.length"
|
||||
class="list fix-last-cell-line empty-cell-title-margin"
|
||||
@@ -84,14 +84,15 @@
|
||||
</t-cell-group>
|
||||
<div v-else class="center-tips" v-text="emptyText" />
|
||||
<div v-if="productList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
<nav-bar-action-menu v-if="canCreate" :actions="actionList" />
|
||||
<nav-bar-action-menu v-if="route.name === 'ProductList' && canCreate" :actions="actionList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type DropdownValue } from "tdesign-mobile-vue";
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import { onBeforeRouteLeave } from "vue-router";
|
||||
import ProductAPI from "@/api/ProductAPI";
|
||||
import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
@@ -105,6 +106,8 @@ import { permissionCodes } from "@/utils/permission";
|
||||
defineOptions({ name: "ProductList" });
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const productListRef = ref<HTMLElement | null>(null);
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const canCreate = computed(() => userStore.hasPermissions(permissionCodes.product.create));
|
||||
@@ -129,6 +132,42 @@ const isRefreshing = ref(false);
|
||||
const isNoMore = ref(false);
|
||||
let keywordTimer: number | undefined;
|
||||
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 = [
|
||||
{ label: "全部状态", value: "ALL" },
|
||||
@@ -265,8 +304,7 @@ async function toDetail(item: Product): Promise<void> {
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
navBarStore.clearRight();
|
||||
navBarStore.setCustomRightVisible(canCreate.value);
|
||||
syncNavBar();
|
||||
try {
|
||||
await Promise.all([loadCategories(), fetch(true)]);
|
||||
} catch (error) {
|
||||
@@ -274,6 +312,15 @@ onMounted(async () => {
|
||||
}
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
restorePageScrollPosition();
|
||||
syncNavBar();
|
||||
});
|
||||
|
||||
onDeactivated(() => {
|
||||
savePageScrollPosition();
|
||||
});
|
||||
|
||||
watch(keyword, () => {
|
||||
window.clearTimeout(keywordTimer);
|
||||
keywordTimer = window.setTimeout(async () => {
|
||||
@@ -285,6 +332,11 @@ watch(keyword, () => {
|
||||
}, 300);
|
||||
});
|
||||
|
||||
onBeforeRouteLeave(() => {
|
||||
savePageScrollPosition();
|
||||
navBarStore.clearRight();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
navBarStore.clearRight();
|
||||
window.clearTimeout(keywordTimer);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<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">
|
||||
<t-input
|
||||
v-model="keyword"
|
||||
@@ -11,7 +11,7 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
class="list-wrap empty-cell-title-margin"
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@@ -64,12 +64,13 @@
|
||||
</t-cell-group>
|
||||
<div v-else class="center-tips" v-text="emptyText" />
|
||||
<div v-if="productList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import { onBeforeRouteLeave } from "vue-router";
|
||||
import ProductAPI from "@/api/ProductAPI";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { ProductStockProduct } from "@/types/Product";
|
||||
@@ -82,6 +83,7 @@ defineOptions({ name: "ProductStockList" });
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const productStockListRef = ref<HTMLElement | null>(null);
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const keyword = ref("");
|
||||
@@ -93,6 +95,37 @@ const isRefreshing = ref(false);
|
||||
const isNoMore = ref(false);
|
||||
let keywordTimer: number | undefined;
|
||||
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 ? "未找到匹配产品" : "暂无启用库存管理的产品");
|
||||
|
||||
@@ -175,6 +208,14 @@ onMounted(async () => {
|
||||
}
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
restorePageScrollPosition();
|
||||
});
|
||||
|
||||
onDeactivated(() => {
|
||||
savePageScrollPosition();
|
||||
});
|
||||
|
||||
watch(keyword, () => {
|
||||
window.clearTimeout(keywordTimer);
|
||||
keywordTimer = window.setTimeout(async () => {
|
||||
@@ -186,6 +227,11 @@ watch(keyword, () => {
|
||||
}, 300);
|
||||
});
|
||||
|
||||
onBeforeRouteLeave(() => {
|
||||
savePageScrollPosition();
|
||||
navBarStore.clearRight();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
navBarStore.clearRight();
|
||||
window.clearTimeout(keywordTimer);
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<t-dropdown-item v-model="direction" label="出入库" :options="directionOptions" @change="selectDirection" />
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="refresh"
|
||||
@@ -84,7 +84,7 @@
|
||||
</t-cell-group>
|
||||
<div v-else class="center-tips" v-text="emptyText" />
|
||||
<div v-if="recordList.length" class="center-tips" v-text="loadStateText" />
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
placeholder="搜索 SKU 名称、编码或规格"
|
||||
/>
|
||||
</div>
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
class="list-wrap empty-cell-title-margin"
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@@ -68,7 +68,7 @@
|
||||
<div v-else class="center-tips" v-text="emptyText" />
|
||||
<div v-if="skuStockList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</div>
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
/>
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="reloadRecords"
|
||||
@@ -137,7 +137,7 @@
|
||||
<div v-else class="center-tips" v-text="isLoading ? '正在加载消费记录' : '暂无消费记录'" />
|
||||
<div v-if="recordList.length" class="center-tips" v-text="loadStateText" />
|
||||
</div>
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
<customer-selector
|
||||
v-model="customerId"
|
||||
v-model:visible="customerSelectorVisible"
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
/>
|
||||
</t-dropdown-menu>
|
||||
</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
|
||||
class="item"
|
||||
@@ -117,7 +117,7 @@
|
||||
</t-cell-group>
|
||||
<div v-else class="empty" v-text="loading ? '正在加载资金流水' : '暂无资金流水'" />
|
||||
<div class="center-tips" v-text="loadStateText" />
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
<customer-selector
|
||||
v-model="customerId"
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
<span v-else v-text="Text.display(order.remark)" />
|
||||
</t-form-item>
|
||||
<t-form-item label-width="0">
|
||||
<div class="photo-wrap">
|
||||
<div class="photo-wrap" v-entrance-transition="105">
|
||||
<media-selector
|
||||
:model-value="photoURLList"
|
||||
v-model:photo-items="photoItems"
|
||||
@@ -38,7 +38,6 @@
|
||||
:show-viewer-actions="isEditing"
|
||||
:upload="isEditing ? uploadPhotoList : undefined"
|
||||
title="订单照片"
|
||||
v-entrance-transition="105"
|
||||
/>
|
||||
</div>
|
||||
</t-form-item>
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
v-can="permissionCodes.storeDiary.read"
|
||||
class="store-diary-list"
|
||||
v-model="isRefreshing"
|
||||
@@ -52,7 +52,7 @@
|
||||
</t-cell-group>
|
||||
<div class="center-tips" v-text="loadStateText" />
|
||||
</div>
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
|
||||
<bottom-popup
|
||||
v-model="diaryPopupVisible"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.store.read" class="store-list">
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
class="list-wrapper"
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@@ -46,7 +46,7 @@
|
||||
</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="isNoMore ? '已加载全部门店' : '上拉加载更多'" />
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
<store-remove-dialog
|
||||
v-model:visible="removeDialogVisible"
|
||||
|
||||
@@ -99,7 +99,7 @@ const route = useRoute();
|
||||
const userStore = useUserStore();
|
||||
|
||||
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"));
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
placeholder="搜索标签"
|
||||
/>
|
||||
</div>
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="refresh"
|
||||
@@ -36,7 +36,7 @@
|
||||
</div>
|
||||
<div v-if="!tagList.length" class="empty" v-text="emptyText" />
|
||||
<div v-if="tagList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
<t-dialog
|
||||
v-model:visible="editDialogVisible"
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
v-can="permissionCodes.user.read"
|
||||
class="user-list"
|
||||
>
|
||||
<t-pull-down-refresh
|
||||
<app-pull-down-refresh
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="refresh"
|
||||
@@ -44,7 +44,7 @@
|
||||
</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="isNoMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</t-pull-down-refresh>
|
||||
</app-pull-down-refresh>
|
||||
</div>
|
||||
<nav-bar-action-menu
|
||||
v-if="canCreateUser"
|
||||
|
||||
Reference in New Issue
Block a user