timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add listDataEvents.ts

Browse Source
This commit is contained in:
Timi
2026-09-22 01:29:34 +08:00
parent c4d71078b3
commit fd4146476b
22 changed files with 377 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/product/ProductDetail.vue
+3
View File
@@ -136,6 +136,7 @@ import type { PhotoItem } from "@/types/Photo";
import type { Product, ProductSku } from "@/types/Product";
import { getAttachmentReadURL } from "@/utils/attachment";
import { getErrorMessage } from "@/utils/error";
import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
import {
getProductPhotoURL,
getProductQuantityText,
@@ -254,6 +255,8 @@ function disable(): void {
onConfirm: async () => {
try {
await ProductAPI.disable(id);
emitListDataChanged(listDataEventKeys.productChanged, id);
emitListDataChanged(listDataEventKeys.productStockChanged, id);
await load();
Message.success("产品已停用");
} catch (error) {
src/pages/product/ProductEdit.vue
+5
View File
@@ -222,6 +222,7 @@ import type { ProductAttachmentItem, ProductForm, ProductSkuForm as SkuForm, Pro
import { compressUploadImage } from "@/utils/imageCompression";
import { getAttachmentReadURL } from "@/utils/attachment";
import { getErrorMessage } from "@/utils/error";
import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
import { formatProductAmount, getProductStatusText, getProductTypeText, normalizeProductQuantity, parseProductAmount } from "@/utils/product";
import { Message } from "@/utils/message";
import { permissionCodes } from "@/utils/permission";
@@ -1005,6 +1006,8 @@ async function save(): Promise<void> {
generateSkuList([], true);
}
const productId = await ProductAPI.create(buildProductPayload(form.skuList.map(buildSkuPayload), true));
emitListDataChanged(listDataEventKeys.productChanged, productId);
emitListDataChanged(listDataEventKeys.productStockChanged, productId);
Message.success("产品已创建");
await router.replace(`/management/products/${productId}`);
return;
@@ -1030,6 +1033,8 @@ async function save(): Promise<void> {
const retainedSkuIdSet = new Set(form.skuList.map(sku => sku.id).filter((id): id is string => !!id));
const disabledSkuIdList = [...previousSkuIdSet].filter(id => !retainedSkuIdSet.has(id));
await Promise.all(disabledSkuIdList.map(async skuId => await ProductAPI.skuDisable(skuId)));
emitListDataChanged(listDataEventKeys.productChanged, productId);
emitListDataChanged(listDataEventKeys.productStockChanged, productId);
Message.success(isCreateMode.value ? "产品已创建" : "产品已保存");
await router.replace(`/management/products/${productId}`);
} catch (error) {
src/pages/product/ProductList.vue
+97 -17
View File
@@ -95,6 +95,7 @@ import type { NavBarAction } from "@/types/NavBarAction";
import type { Product, ProductCategory, ProductStatus, ProductType } from "@/types/Product";
import { getErrorMessage } from "@/utils/error";
import { getProductPhotoURL, getProductStatusText, getProductStatusTheme, getProductTypeText } from "@/utils/product";
import { events, isCurrentStoreEvent, listDataEventKeys, type ListDataChangedPayload } from "@/utils/listDataEvents";
import { Message } from "@/utils/message";
import { permissionCodes } from "@/utils/permission";
@@ -128,6 +129,10 @@ const isNoMore = ref(false);
let keywordTimer: number | undefined;
let requestToken = 0;
let savedPageScrollTop: number | undefined;
let eventRefreshPromise: Promise<void> | undefined;
let hasPendingEventRefresh = false;
let unregisterProductListEvent: (() => void) | undefined;
let isDisposed = false;
function getProductListPage(): HTMLElement | null {
return productListRef.value?.closest<HTMLElement>(".page") || null;
@@ -186,36 +191,81 @@ async function loadCategories(): Promise<void> {
categoryList.value = result.list || [];
}
async function fetch(reset = false): Promise<void> {
async function fetch(reset = false, preserveScroll = false): Promise<void> {
if (!reset && (isLoading.value || isNoMore.value)) {
return;
}
const loadedPageCount = reset && preserveScroll ? Math.max(pageIndex.value, 1) : 1;
const preserveScrollTop = preserveScroll ? getProductListPage()?.scrollTop : undefined;
if (reset) {
pageIndex.value = 0;
productList.value = [];
total.value = 0;
isNoMore.value = false;
if (!preserveScroll) {
const page = getProductListPage();
if (page) {
page.scrollTop = 0;
}
}
}
const token = ++requestToken;
isLoading.value = true;
try {
const pageSize = 15;
const result = await ProductAPI.list({
index: pageIndex.value,
size: pageSize,
keyword: keyword.value || undefined,
status: status.value === "ALL" ? undefined : status.value as ProductStatus,
productType: productType.value === "ALL" ? undefined : productType.value as ProductType,
categoryIdList: categoryIdList.value.includes("ALL") ? undefined : categoryIdList.value
});
if (token !== requestToken) {
return;
if (reset && preserveScroll) {
const nextList: Product[] = [];
let nextTotal = 0;
let nextPageIndex = 0;
for (let index = 0; index < loadedPageCount; index += 1) {
const result = await ProductAPI.list({
index,
size: pageSize,
keyword: keyword.value || undefined,
status: status.value === "ALL" ? undefined : status.value as ProductStatus,
productType: productType.value === "ALL" ? undefined : productType.value as ProductType,
categoryIdList: categoryIdList.value.includes("ALL") ? undefined : categoryIdList.value
});
if (token !== requestToken) {
return;
}
const list = result.list || [];
nextList.push(...list);
nextTotal = result.total || 0;
nextPageIndex += 1;
if (list.length < pageSize || nextTotal <= nextList.length) {
break;
}
}
productList.value = nextList;
total.value = nextTotal;
pageIndex.value = nextPageIndex;
isNoMore.value = nextList.length < pageSize || nextList.length === nextTotal || nextTotal < nextList.length;
} else {
const result = await ProductAPI.list({
index: pageIndex.value,
size: pageSize,
keyword: keyword.value || undefined,
status: status.value === "ALL" ? undefined : status.value as ProductStatus,
productType: productType.value === "ALL" ? undefined : productType.value as ProductType,
categoryIdList: categoryIdList.value.includes("ALL") ? undefined : categoryIdList.value
});
if (token !== requestToken) {
return;
}
const list = result.list || [];
productList.value = reset ? list : productList.value.concat(list);
total.value = result.total || 0;
pageIndex.value += 1;
isNoMore.value = list.length < pageSize || productList.value.length === total.value || total.value < productList.value.length;
}
if (preserveScrollTop !== undefined) {
requestAnimationFrame(() => {
const page = getProductListPage();
if (page) {
page.scrollTop = preserveScrollTop;
}
});
}
const list = result.list || [];
productList.value = reset ? list : productList.value.concat(list);
total.value = result.total || 0;
pageIndex.value += 1;
isNoMore.value = list.length < pageSize || productList.value.length === total.value || total.value < productList.value.length;
} finally {
if (token === requestToken) {
isLoading.value = false;
@@ -223,6 +273,32 @@ async function fetch(reset = false): Promise<void> {
}
}
function startEventRefresh(): void {
if (isDisposed) {
return;
}
eventRefreshPromise = fetch(true, true)
.catch(error => Message.error(getErrorMessage(error, "产品列表加载失败")))
.finally(() => {
eventRefreshPromise = undefined;
if (!isDisposed && hasPendingEventRefresh) {
hasPendingEventRefresh = false;
startEventRefresh();
}
});
}
function requestEventRefresh(payload?: ListDataChangedPayload): void {
if (!isCurrentStoreEvent(payload)) {
return;
}
if (eventRefreshPromise) {
hasPendingEventRefresh = true;
return;
}
startEventRefresh();
}
async function refresh(): Promise<void> {
try {
await fetch(true);
@@ -299,6 +375,7 @@ async function toDetail(item: Product): Promise<void> {
}
onMounted(async () => {
unregisterProductListEvent = events.register(listDataEventKeys.productChanged, (payload: ListDataChangedPayload) => requestEventRefresh(payload));
syncNavBar();
try {
await Promise.all([loadCategories(), fetch(true)]);
@@ -333,6 +410,9 @@ onBeforeRouteLeave(() => {
});
onUnmounted(() => {
isDisposed = true;
unregisterProductListEvent?.();
unregisterProductListEvent = undefined;
navBarStore.clearRight();
window.clearTimeout(keywordTimer);
requestToken += 1;
src/pages/product/ProductStockList.vue
+91 -14
View File
@@ -70,6 +70,7 @@ import { useNavBarStore } from "@/store/navBarStore";
import type { ProductStockProduct } from "@/types/Product";
import { getErrorMessage } from "@/utils/error";
import { getProductPhotoURL, getProductQuantityText } from "@/utils/product";
import { events, isCurrentStoreEvent, listDataEventKeys, type ListDataChangedPayload } from "@/utils/listDataEvents";
import { Message } from "@/utils/message";
import { permissionCodes } from "@/utils/permission";
@@ -90,6 +91,10 @@ const isNoMore = ref(false);
let keywordTimer: number | undefined;
let requestToken = 0;
let savedPageScrollTop: number | undefined;
let eventRefreshPromise: Promise<void> | undefined;
let hasPendingEventRefresh = false;
let unregisterProductStockListEvent: (() => void) | undefined;
let isDisposed = false;
function getProductStockListPage(): HTMLElement | null {
return productStockListRef.value?.closest<HTMLElement>(".page") || null;
@@ -127,33 +132,75 @@ function getCurrentRouteDepth(): number {
return Number(route.meta.depth ?? 0);
}
async function fetch(reset = false): Promise<void> {
async function fetch(reset = false, preserveScroll = false): Promise<void> {
if (!reset && (isLoading.value || isNoMore.value)) {
return;
}
const loadedPageCount = reset && preserveScroll ? Math.max(pageIndex.value, 1) : 1;
const preserveScrollTop = preserveScroll ? getProductStockListPage()?.scrollTop : undefined;
if (reset) {
pageIndex.value = 0;
productList.value = [];
total.value = 0;
isNoMore.value = false;
if (!preserveScroll) {
const page = getProductStockListPage();
if (page) {
page.scrollTop = 0;
}
}
}
const token = ++requestToken;
isLoading.value = true;
try {
const pageSize = 15;
const result = await ProductAPI.stockProductList({
index: pageIndex.value,
size: pageSize,
keyword: keyword.value || undefined
});
if (token !== requestToken) {
return;
if (reset && preserveScroll) {
const nextList: ProductStockProduct[] = [];
let nextTotal = 0;
let nextPageIndex = 0;
for (let index = 0; index < loadedPageCount; index += 1) {
const result = await ProductAPI.stockProductList({
index,
size: pageSize,
keyword: keyword.value || undefined
});
if (token !== requestToken) {
return;
}
const list = result.list || [];
nextList.push(...list);
nextTotal = result.total || 0;
nextPageIndex += 1;
if (list.length < pageSize || nextTotal <= nextList.length) {
break;
}
}
productList.value = nextList;
total.value = nextTotal;
pageIndex.value = nextPageIndex;
isNoMore.value = nextList.length < pageSize || nextList.length === nextTotal || nextTotal < nextList.length;
} else {
const result = await ProductAPI.stockProductList({
index: pageIndex.value,
size: pageSize,
keyword: keyword.value || undefined
});
if (token !== requestToken) {
return;
}
const list = result.list || [];
productList.value = reset ? list : productList.value.concat(list);
total.value = result.total || 0;
pageIndex.value += 1;
isNoMore.value = list.length < pageSize || productList.value.length === total.value || total.value < productList.value.length;
}
if (preserveScrollTop !== undefined) {
requestAnimationFrame(() => {
const page = getProductStockListPage();
if (page) {
page.scrollTop = preserveScrollTop;
}
});
}
const list = result.list || [];
productList.value = reset ? list : productList.value.concat(list);
total.value = result.total || 0;
pageIndex.value += 1;
isNoMore.value = list.length < pageSize || productList.value.length === total.value || total.value < productList.value.length;
} finally {
if (token === requestToken) {
isLoading.value = false;
@@ -161,6 +208,32 @@ async function fetch(reset = false): Promise<void> {
}
}
function startEventRefresh(): void {
if (isDisposed) {
return;
}
eventRefreshPromise = fetch(true, true)
.catch(error => Message.error(getErrorMessage(error, "产品列表加载失败")))
.finally(() => {
eventRefreshPromise = undefined;
if (!isDisposed && hasPendingEventRefresh) {
hasPendingEventRefresh = false;
startEventRefresh();
}
});
}
function requestEventRefresh(payload?: ListDataChangedPayload): void {
if (!isCurrentStoreEvent(payload)) {
return;
}
if (eventRefreshPromise) {
hasPendingEventRefresh = true;
return;
}
startEventRefresh();
}
async function refresh(): Promise<void> {
try {
await fetch(true);
@@ -191,6 +264,7 @@ async function toSkuList(item: ProductStockProduct): Promise<void> {
}
onMounted(async () => {
unregisterProductStockListEvent = events.register(listDataEventKeys.productStockChanged, (payload: ListDataChangedPayload) => requestEventRefresh(payload));
navBarStore.clearRight();
if (!userStore.hasPermissions(permissionCodes.productStock.read)) {
return;
@@ -227,6 +301,9 @@ onBeforeRouteLeave(() => {
});
onUnmounted(() => {
isDisposed = true;
unregisterProductStockListEvent?.();
unregisterProductStockListEvent = undefined;
navBarStore.clearRight();
window.clearTimeout(keywordTimer);
requestToken += 1;
src/pages/product/ProductStockOperationPopup.vue
+2
View File
@@ -108,6 +108,7 @@ import type {
StockOperationType
} from "@/types/Product";
import { getErrorMessage } from "@/utils/error";
import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
import { createProductRequestNo, getStockOperationText } from "@/utils/product";
import { Message } from "@/utils/message";
import type { PhotoItem } from "@/types/Photo";
@@ -260,6 +261,7 @@ async function submit(): Promise<void> {
break;
}
visible.value = false;
emitListDataChanged(listDataEventKeys.productStockChanged, props.product.id);
Message.success("库存操作已提交");
emit("success");
} catch (error) {
src/pages/product/ProductStockRecordDetail.vue
+2
View File
@@ -144,6 +144,7 @@ import type { PhotoItem } from "@/types/Photo";
import type { StockBizType, StockRecord } from "@/types/Product";
import { getAttachmentReadURL } from "@/utils/attachment";
import { getErrorMessage } from "@/utils/error";
import { emitListDataChanged, listDataEventKeys } from "@/utils/listDataEvents";
import { createProductRequestNo, getProductQuantityText, getStockOperationText } from "@/utils/product";
import { Message } from "@/utils/message";
import { permissionCodes } from "@/utils/permission";
@@ -279,6 +280,7 @@ async function submitManualRevoke(): Promise<void> {
attachmentList: buildAttachments()
});
revokeVisible.value = false;
emitListDataChanged(listDataEventKeys.productStockChanged, record.value.id);
Message.success("手工库存流水已冲正");
await loadData();
} catch (error) {