789 lines
23 KiB
Vue
789 lines
23 KiB
Vue
<template>
|
|
<div ref="salesOrderListRef" v-can="permissionCodes.salesOrder.read" class="sales-order-list">
|
|
<div class="filters glass">
|
|
<div class="search-row">
|
|
<t-input
|
|
v-model.trim="keyword"
|
|
class="keyword"
|
|
type="search"
|
|
borderless
|
|
placeholder="订单号或客户"
|
|
>
|
|
<template #suffix-icon>
|
|
<div class="actions">
|
|
<t-button
|
|
size="extra-small"
|
|
theme="primary"
|
|
variant="outline"
|
|
content="选择客户"
|
|
@click.stop="customerSelectorVisible = true"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</t-input>
|
|
<t-button
|
|
class="filter-button"
|
|
size="small"
|
|
theme="light"
|
|
variant="outline"
|
|
@click="filterVisible = true"
|
|
>
|
|
<template #icon>
|
|
<t-icon name="filter-1" />
|
|
</template>
|
|
<span>筛选</span>
|
|
</t-button>
|
|
</div>
|
|
</div>
|
|
<t-pull-down-refresh
|
|
class="list-wrap"
|
|
v-model="refreshing"
|
|
:refresh-timeout="30000"
|
|
@refresh="refresh"
|
|
@scrolltolower="loadMore"
|
|
>
|
|
<div class="items">
|
|
<sales-order-summary
|
|
v-if="customerId"
|
|
ref="customerOrderSummaryRef"
|
|
:customer="selectedCustomer"
|
|
/>
|
|
<t-cell-group v-if="packageConfigId" class="selected-package" theme="card">
|
|
<t-cell title="套餐" :note="selectedPackageName">
|
|
<template #left-icon>
|
|
<t-icon name="layers" />
|
|
</template>
|
|
</t-cell>
|
|
</t-cell-group>
|
|
<sales-order-filter-summary
|
|
:filter="appliedFilter"
|
|
:total="total"
|
|
:package-config-id="packageConfigId"
|
|
@confirm="confirmFilter"
|
|
/>
|
|
<sales-order-list-cell
|
|
v-for="(item, index) in list"
|
|
:key="item.id"
|
|
class="item"
|
|
:order="item"
|
|
:can-receive="canReceive"
|
|
:can-fulfill="canCreateFulfillment"
|
|
:can-cancel="canCancel"
|
|
:can-refund="canRefund"
|
|
:can-store-manager="canStoreManager"
|
|
v-entrance-transition="index * 30"
|
|
@click="toDetail(item)"
|
|
@cancel="toCancel(item)"
|
|
@receive="toPayment(item)"
|
|
@fulfill="toFulfillment(item)"
|
|
@refund="toRefund(item)"
|
|
@confirm-no-refund="toNoRefund(item)"
|
|
/>
|
|
<div v-if="!list.length" class="empty" v-text="loading ? '正在加载销售订单' : '暂无销售订单'" />
|
|
</div>
|
|
<div class="center-tips" v-text="loading ? '正在加载' : noMore ? '已经到底了' : '上拉加载更多'" />
|
|
</t-pull-down-refresh>
|
|
</div>
|
|
<nav-bar-action-menu v-if="route.name === 'SalesOrderList' && actions.length" :actions="actions" />
|
|
<customer-selector
|
|
v-model="customerId"
|
|
v-model:visible="customerSelectorVisible"
|
|
@change="handleCustomerChange"
|
|
/>
|
|
<sales-order-filter-popup
|
|
v-model:visible="filterVisible"
|
|
:model-value="appliedFilter"
|
|
:package-config-id="packageConfigId"
|
|
@confirm="confirmFilter"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { 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";
|
|
import CustomerSelector from "@/components/CustomerSelector.vue";
|
|
import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
|
|
import SalesOrderFilterPopup from "@/pages/salesOrder/components/SalesOrderFilterPopup.vue";
|
|
import SalesOrderFilterSummary from "@/pages/salesOrder/components/SalesOrderFilterSummary.vue";
|
|
import SalesOrderListCell from "@/pages/salesOrder/components/SalesOrderListCell.vue";
|
|
import SalesOrderSummary from "@/pages/salesOrder/components/SalesOrderSummary.vue";
|
|
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
|
import { useNavBarStore } from "@/store/navBarStore";
|
|
import type { Customer } from "@/types/Customer";
|
|
import type { GaoPackageConfig } from "@/types/Package";
|
|
import type {
|
|
GaoSalesOrderStatus,
|
|
GaoSalesOrderType,
|
|
GaoSalesPaymentStatus,
|
|
GaoSalesRefundStatus,
|
|
SalesOrder,
|
|
SalesOrderPage
|
|
} from "@/types/SalesOrder";
|
|
import {
|
|
cloneSalesOrderFilter,
|
|
createDefaultSalesOrderFilter,
|
|
normalizeSalesOrderFilter,
|
|
type SalesOrderListFilter,
|
|
type SalesOrderPaymentFilter
|
|
} from "@/types/SalesOrderFilter";
|
|
import { buildPresetDateRange, parseDateTime } from "@/utils/date";
|
|
import { getErrorMessage } from "@/utils/error";
|
|
import { events, isCurrentStoreEvent, listDataEventKeys, type ListDataChangedPayload } from "@/utils/listDataEvents";
|
|
import { Message } from "@/utils/message";
|
|
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
|
|
|
defineOptions({ name: "SalesOrderList" });
|
|
|
|
const SALES_ORDER_FILTER_STORAGE_KEY = "gao-customer-h5:sales-order-filter";
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const salesOrderListRef = ref<HTMLElement | null>(null);
|
|
const currentStoreStore = useCurrentStoreStore();
|
|
const navBarStore = useNavBarStore();
|
|
const userStore = useUserStore();
|
|
const canCreate = computed(() => userStore.hasPermissions(permissionCodes.salesOrder.create));
|
|
const canCreatePackageOrder = computed(() => userStore.hasPermissions(permissionCodes.customerPackage.create));
|
|
const canReceive = computed(() => userStore.hasPermissions(permissionCodes.fundReceive.create));
|
|
const canCreateFulfillment = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.create));
|
|
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;
|
|
let eventRefreshPromise: Promise<void> | undefined;
|
|
let hasPendingEventRefresh = false;
|
|
let unregisterSalesOrderListEvent: (() => void) | undefined;
|
|
let isDisposed = 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",
|
|
text: "直接产品下单",
|
|
icon: "task",
|
|
theme: "primary" as const,
|
|
action: () => router.push("/management/sales-orders/create")
|
|
}] : []),
|
|
...(canCreatePackageOrder.value ? [{
|
|
key: "create-package-order",
|
|
text: "创建客户套餐",
|
|
icon: "layers",
|
|
theme: "primary" as const,
|
|
action: () => router.push("/management/customer-packages/create")
|
|
}] : [])
|
|
]);
|
|
|
|
// ---------- 顶部搜索和客户 ----------
|
|
|
|
const keyword = ref("");
|
|
const customerId = ref("");
|
|
const selectedCustomer = ref<Customer>();
|
|
const customerSelectorVisible = ref(false);
|
|
let customerKeyword = "";
|
|
const selectedPackage = ref<GaoPackageConfig>();
|
|
const packageConfigId = computed(() => queryValue(route.query.packageConfigId));
|
|
const selectedPackageName = computed(() => selectedPackage.value?.name || queryValue(route.query.packageConfigName) || "未命名套餐");
|
|
|
|
// ---------- 筛选 ----------
|
|
|
|
const filterVisible = ref(false);
|
|
const appliedFilter = ref<SalesOrderListFilter>(createDefaultSalesOrderFilter());
|
|
const filterStorageKey = computed(() => `${SALES_ORDER_FILTER_STORAGE_KEY}:${currentStoreStore.currentStoreId || "default"}:${packageConfigId.value || "all"}`);
|
|
let cachedPackageConfigId = "";
|
|
const orderTypeOptions: Array<{ label: string; value: GaoSalesOrderType }> = [
|
|
{ label: "套餐订单", value: "PACKAGE" },
|
|
{ label: "产品订单", value: "DIRECT_PRODUCT" }
|
|
];
|
|
const statusOptions: Array<{ label: string; value: GaoSalesOrderStatus }> = [
|
|
{ label: "进行中", value: "ACTIVE" },
|
|
{ label: "已履约", value: "FULFILLED" },
|
|
{ label: "已取消", value: "CANCELLED" }
|
|
];
|
|
const paymentOptions: Array<{ label: string; value: SalesOrderPaymentFilter }> = [
|
|
{ label: "未收清", value: "PENDING_RECEIVE" },
|
|
{ label: "未收款", value: "UNPAID" },
|
|
{ label: "部分收款", value: "PARTIALLY_PAID" },
|
|
{ label: "已收款", value: "PAID" }
|
|
];
|
|
const paymentStatusValues: GaoSalesPaymentStatus[] = ["UNPAID", "PARTIALLY_PAID", "PAID"];
|
|
const refundOptions: Array<{ label: string; value: GaoSalesRefundStatus }> = [
|
|
{ label: "无需退款", value: "NOT_REQUIRED" },
|
|
{ label: "待退款", value: "PENDING" },
|
|
{ label: "已退款", value: "REFUNDED" }
|
|
];
|
|
// ---------- 列表 ----------
|
|
|
|
type SalesOrderSummaryExpose = { refresh: () => Promise<void> };
|
|
const customerOrderSummaryRef = ref<SalesOrderSummaryExpose>();
|
|
const list = ref<SalesOrder[]>([]);
|
|
const pageIndex = ref(0);
|
|
const total = ref(0);
|
|
const loading = ref(false);
|
|
const refreshing = ref(false);
|
|
const noMore = ref(false);
|
|
const pageSize = 15;
|
|
let listRequestId = 0;
|
|
|
|
// ---------- 路由和持久化 ----------
|
|
|
|
const routeFilterKey = computed(() => [
|
|
route.query.customerId,
|
|
route.query.packageConfigId,
|
|
route.query.packageConfigName,
|
|
route.query.orderType,
|
|
route.query.status,
|
|
route.query.paymentStatus,
|
|
route.query.refundStatus,
|
|
route.query.pendingReceive
|
|
].map(queryValue).join("|"));
|
|
let initialized = false;
|
|
let lastAppliedRouteFilterKey = "";
|
|
|
|
interface PersistedSalesOrderState {
|
|
filter: SalesOrderListFilter;
|
|
customerId: string;
|
|
}
|
|
|
|
function queryValue(value: unknown): string {
|
|
return Array.isArray(value) ? "" : typeof value === "string" ? value : "";
|
|
}
|
|
|
|
function readPersistedState(): PersistedSalesOrderState {
|
|
try {
|
|
const value = localStorage.getItem(filterStorageKey.value);
|
|
const source: unknown = value ? JSON.parse(value) : undefined;
|
|
const filter = normalizeSalesOrderFilter(source);
|
|
if (filter.dateFilterType !== "custom") {
|
|
filter.dateRange = buildPresetDateRange(filter.dateFilterType);
|
|
}
|
|
const customerId = source && typeof source === "object" && typeof (source as { customerId?: unknown }).customerId === "string"
|
|
? (source as { customerId: string }).customerId
|
|
: "";
|
|
return { filter, customerId };
|
|
} catch {
|
|
return { filter: createDefaultSalesOrderFilter(), customerId: "" };
|
|
}
|
|
}
|
|
|
|
function persistFilter(): void {
|
|
try {
|
|
localStorage.setItem(filterStorageKey.value, JSON.stringify({
|
|
...appliedFilter.value,
|
|
customerId: customerId.value || undefined
|
|
}));
|
|
} catch {
|
|
return;
|
|
}
|
|
}
|
|
|
|
function applyRouteFilters(): void {
|
|
const persistedState = readPersistedState();
|
|
const nextFilter = persistedState.filter;
|
|
customerId.value = queryValue(route.query.customerId) || persistedState.customerId;
|
|
const routeOrderType = queryValue(route.query.orderType);
|
|
const routeStatus = queryValue(route.query.status);
|
|
const routePaymentStatus = queryValue(route.query.paymentStatus);
|
|
const routeRefundStatus = queryValue(route.query.refundStatus);
|
|
const pendingReceive = queryValue(route.query.pendingReceive) === "true";
|
|
if (packageConfigId.value) {
|
|
nextFilter.orderTypeList = ["PACKAGE"];
|
|
} else if (routeOrderType) {
|
|
nextFilter.orderTypeList = routeOrderType === "ALL" ? orderTypeOptions.map(item => item.value) : [routeOrderType as GaoSalesOrderType];
|
|
}
|
|
if (routeStatus) {
|
|
nextFilter.statusList = routeStatus === "ALL" ? statusOptions.map(item => item.value) : [routeStatus as GaoSalesOrderStatus];
|
|
}
|
|
if (pendingReceive) {
|
|
nextFilter.statusList = ["ACTIVE", "FULFILLED"];
|
|
nextFilter.paymentStatusList = ["PENDING_RECEIVE"];
|
|
} else if (routePaymentStatus) {
|
|
nextFilter.paymentStatusList = routePaymentStatus === "PENDING_RECEIVE"
|
|
? ["PENDING_RECEIVE"]
|
|
: routePaymentStatus === "ALL" ? paymentOptions.map(item => item.value) : [routePaymentStatus as GaoSalesPaymentStatus];
|
|
}
|
|
if (routeRefundStatus) {
|
|
nextFilter.refundStatusList = routeRefundStatus === "ALL" ? refundOptions.map(item => item.value) : [routeRefundStatus as GaoSalesRefundStatus];
|
|
}
|
|
appliedFilter.value = nextFilter;
|
|
}
|
|
|
|
function syncCachedRouteContext(): void {
|
|
if (route.name === "SalesOrderList") {
|
|
cachedPackageConfigId = packageConfigId.value;
|
|
}
|
|
}
|
|
|
|
async function loadRoutePackage(): Promise<void> {
|
|
selectedPackage.value = undefined;
|
|
if (!packageConfigId.value) {
|
|
return;
|
|
}
|
|
try {
|
|
selectedPackage.value = await PackageAPI.configDetail(packageConfigId.value);
|
|
} catch {
|
|
return;
|
|
}
|
|
}
|
|
|
|
function setCustomerKeyword(customer: Customer): void {
|
|
const value = customer.name?.trim() || customer.code?.trim() || "";
|
|
customerId.value = customer.id || "";
|
|
selectedCustomer.value = customer;
|
|
customerKeyword = value;
|
|
keyword.value = value;
|
|
}
|
|
|
|
async function loadRouteCustomer(): Promise<void> {
|
|
if (!customerId.value) {
|
|
selectedCustomer.value = undefined;
|
|
customerKeyword = "";
|
|
return;
|
|
}
|
|
selectedCustomer.value = await CustomerAPI.detail(customerId.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;
|
|
cachedPackageConfigId = "";
|
|
localStorage.removeItem(filterStorageKey.value);
|
|
const page = getSalesOrderPage();
|
|
if (page) {
|
|
page.scrollTop = 0;
|
|
}
|
|
}
|
|
|
|
// ---------- 请求筛选 ----------
|
|
|
|
function getEffectiveList<T>(value: T[], allValues: T[]): T[] | undefined {
|
|
return value.length && value.length < allValues.length ? value : undefined;
|
|
}
|
|
|
|
function getPaymentStatusValues(valueList: SalesOrderPaymentFilter[]): GaoSalesPaymentStatus[] {
|
|
const valueSet = new Set<GaoSalesPaymentStatus>(valueList.filter(value => value !== "PENDING_RECEIVE") as GaoSalesPaymentStatus[]);
|
|
if (valueList.includes("PENDING_RECEIVE")) {
|
|
valueSet.add("UNPAID");
|
|
valueSet.add("PARTIALLY_PAID");
|
|
}
|
|
return paymentStatusValues.filter(value => valueSet.has(value));
|
|
}
|
|
|
|
function buildPageFilter(index = pageIndex.value): SalesOrderPage {
|
|
const filter = appliedFilter.value;
|
|
const [beginText, endText] = filter.dateRange;
|
|
const currentPackageConfigId = cachedPackageConfigId || packageConfigId.value;
|
|
return {
|
|
customerId: customerId.value || undefined,
|
|
packageConfigId: currentPackageConfigId || undefined,
|
|
keyword: keyword.value || undefined,
|
|
orderTypeList: currentPackageConfigId ? ["PACKAGE"] : getEffectiveList(filter.orderTypeList, orderTypeOptions.map(item => item.value)),
|
|
statusList: getEffectiveList(filter.statusList, statusOptions.map(item => item.value)),
|
|
paymentStatusList: getEffectiveList(getPaymentStatusValues(filter.paymentStatusList), paymentStatusValues),
|
|
refundStatusList: getEffectiveList(filter.refundStatusList, refundOptions.map(item => item.value)),
|
|
beginAt: beginText ? parseDateTime(beginText, false).getTime() : undefined,
|
|
endAt: endText ? parseDateTime(endText, true).getTime() : undefined,
|
|
index,
|
|
size: pageSize
|
|
};
|
|
}
|
|
|
|
async function fetchList(reset: boolean, preserveScroll = false): Promise<void> {
|
|
if (!reset && (loading.value || noMore.value)) return;
|
|
const loadedPageCount = reset && preserveScroll ? Math.max(pageIndex.value, 1) : 1;
|
|
const preserveScrollTop = preserveScroll ? getSalesOrderPage()?.scrollTop : undefined;
|
|
if (reset) {
|
|
pageIndex.value = 0;
|
|
total.value = 0;
|
|
noMore.value = false;
|
|
if (!preserveScroll) {
|
|
const page = getSalesOrderPage();
|
|
if (page) {
|
|
page.scrollTop = 0;
|
|
}
|
|
}
|
|
}
|
|
const requestId = ++listRequestId;
|
|
loading.value = true;
|
|
try {
|
|
if (reset && preserveScroll) {
|
|
const nextList: SalesOrder[] = [];
|
|
let nextTotal = 0;
|
|
let nextPageIndex = 0;
|
|
for (let index = 0; index < loadedPageCount; index += 1) {
|
|
const result = await SalesOrderAPI.list(buildPageFilter(index));
|
|
if (requestId !== listRequestId) {
|
|
return;
|
|
}
|
|
const rows = result.list || [];
|
|
nextList.push(...rows);
|
|
nextTotal = result.total || 0;
|
|
nextPageIndex += 1;
|
|
if (rows.length < pageSize || nextTotal <= nextList.length) {
|
|
break;
|
|
}
|
|
}
|
|
list.value = nextList;
|
|
total.value = nextTotal;
|
|
pageIndex.value = nextPageIndex;
|
|
noMore.value = nextList.length < pageSize || nextTotal <= nextList.length;
|
|
} else {
|
|
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;
|
|
}
|
|
if (preserveScrollTop !== undefined) {
|
|
requestAnimationFrame(() => {
|
|
const page = getSalesOrderPage();
|
|
if (page) {
|
|
page.scrollTop = preserveScrollTop;
|
|
}
|
|
});
|
|
}
|
|
} finally {
|
|
if (requestId === listRequestId) {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
async function reloadList(preserveScroll = false): Promise<void> {
|
|
await customerOrderSummaryRef.value?.refresh();
|
|
await fetchList(true, preserveScroll);
|
|
}
|
|
|
|
function startEventRefresh(): void {
|
|
if (isDisposed) {
|
|
return;
|
|
}
|
|
eventRefreshPromise = reloadList(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 reloadList();
|
|
} catch (error) {
|
|
Message.error(getErrorMessage(error, "销售订单加载失败"));
|
|
} finally {
|
|
refreshing.value = false;
|
|
}
|
|
}
|
|
|
|
async function loadMore(): Promise<void> {
|
|
try {
|
|
await fetchList(false);
|
|
} catch (error) {
|
|
Message.error(getErrorMessage(error, "销售订单加载失败"));
|
|
}
|
|
}
|
|
|
|
async function confirmFilter(value: SalesOrderListFilter): Promise<void> {
|
|
appliedFilter.value = cloneSalesOrderFilter(value);
|
|
persistFilter();
|
|
try {
|
|
await reloadList();
|
|
} catch (error) {
|
|
Message.error(getErrorMessage(error, "销售订单加载失败"));
|
|
}
|
|
}
|
|
|
|
// ---------- 客户、路由和导航 ----------
|
|
|
|
async function handleCustomerChange(): Promise<void> {
|
|
try {
|
|
await loadRouteCustomer();
|
|
persistFilter();
|
|
await reloadList();
|
|
} catch (error) {
|
|
selectedCustomer.value = undefined;
|
|
Message.error(getErrorMessage(error, "客户加载失败"));
|
|
}
|
|
}
|
|
|
|
async function toDetail(item: SalesOrder): Promise<void> {
|
|
if (item.id) await router.push(`/management/sales-orders/${item.id}`);
|
|
}
|
|
|
|
async function toPayment(item: SalesOrder): Promise<void> {
|
|
if (item.id) await router.push(`/management/sales-orders/${item.id}/payment`);
|
|
}
|
|
|
|
async function toCancel(item: SalesOrder): Promise<void> {
|
|
if (item.id) await router.push(`/management/sales-orders/${item.id}/cancel`);
|
|
}
|
|
|
|
async function toRefund(item: SalesOrder): Promise<void> {
|
|
if (item.id) await router.push(`/management/sales-orders/${item.id}/refund`);
|
|
}
|
|
|
|
async function toNoRefund(item: SalesOrder): Promise<void> {
|
|
if (item.id) await router.push(`/management/sales-orders/${item.id}/no-refund`);
|
|
}
|
|
|
|
async function toFulfillment(item: SalesOrder): Promise<void> {
|
|
if (item.id) await router.push({ path: "/management/order-fulfillments/create", query: { salesOrderId: item.id } });
|
|
}
|
|
|
|
const search = Toolkit.debounce(async () => {
|
|
try {
|
|
await fetchList(true);
|
|
} catch (error) {
|
|
Message.error(getErrorMessage(error, "销售订单加载失败"));
|
|
}
|
|
}, false);
|
|
|
|
watch(keyword, async () => {
|
|
if (route.name !== "SalesOrderList") {
|
|
return;
|
|
}
|
|
const isCustomerKeyword = !!customerId.value && keyword.value.trim() === customerKeyword;
|
|
customerKeyword = "";
|
|
if (isCustomerKeyword) {
|
|
return;
|
|
}
|
|
customerId.value = "";
|
|
selectedCustomer.value = undefined;
|
|
persistFilter();
|
|
await search();
|
|
});
|
|
|
|
watch(routeFilterKey, async value => {
|
|
if (!initialized || route.name !== "SalesOrderList" || value === lastAppliedRouteFilterKey) {
|
|
return;
|
|
}
|
|
lastAppliedRouteFilterKey = value;
|
|
syncCachedRouteContext();
|
|
applyRouteFilters();
|
|
try {
|
|
await loadRouteCustomer();
|
|
await loadRoutePackage();
|
|
await fetchList(true);
|
|
} catch {
|
|
selectedCustomer.value = undefined;
|
|
}
|
|
});
|
|
|
|
watch(() => currentStoreStore.currentStoreId, async (value, oldValue) => {
|
|
if (!initialized || value === oldValue || route.name !== "SalesOrderList") {
|
|
return;
|
|
}
|
|
const persistedState = readPersistedState();
|
|
appliedFilter.value = persistedState.filter;
|
|
if (!queryValue(route.query.customerId)) {
|
|
customerId.value = persistedState.customerId;
|
|
}
|
|
await loadRouteCustomer();
|
|
await refresh();
|
|
});
|
|
|
|
onMounted(async () => {
|
|
unregisterSalesOrderListEvent = events.register(listDataEventKeys.salesOrderChanged, (payload: ListDataChangedPayload) => requestEventRefresh(payload));
|
|
syncCachedRouteContext();
|
|
navBarStore.clearRight();
|
|
navBarStore.setCustomRightVisible(!!actions.value.length);
|
|
applyRouteFilters();
|
|
lastAppliedRouteFilterKey = routeFilterKey.value;
|
|
try {
|
|
await loadRouteCustomer();
|
|
await loadRoutePackage();
|
|
await fetchList(true);
|
|
initialized = true;
|
|
} catch (error) {
|
|
Message.error(getErrorMessage(error, "销售订单加载失败"));
|
|
}
|
|
});
|
|
|
|
onActivated(async () => {
|
|
syncCachedRouteContext();
|
|
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(() => {
|
|
isDisposed = true;
|
|
unregisterSalesOrderListEvent?.();
|
|
unregisterSalesOrderListEvent = undefined;
|
|
navBarStore.clearRight();
|
|
search.cancel();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.sales-order-list {
|
|
padding: var(--app-nav-height) 0 1rem;
|
|
|
|
.filters {
|
|
top: var(--app-nav-height);
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
padding: .75rem 1rem .5rem;
|
|
position: sticky;
|
|
|
|
.search-row {
|
|
gap: .5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.keyword {
|
|
--td-button-border-radius: .75rem;
|
|
--td-input-vertical-padding: .25rem 1rem;
|
|
|
|
flex: 1;
|
|
min-width: 0;
|
|
border: 1px solid var(--td-component-border);
|
|
background: var(--td-bg-color-container);
|
|
padding-right: .3rem;
|
|
border-radius: 1rem;
|
|
|
|
.actions {
|
|
gap: .25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.filter-button {
|
|
--td-button-border-radius: 99rem;
|
|
flex: none;
|
|
height: auto;
|
|
padding: 0 1.25rem;
|
|
align-self: stretch;
|
|
}
|
|
}
|
|
|
|
.list-wrap {
|
|
padding-top: 1rem;
|
|
|
|
:deep(.t-cell-group) {
|
|
margin: 0;
|
|
}
|
|
|
|
.items {
|
|
gap: 1rem;
|
|
display: flex;
|
|
padding: 0 1rem;
|
|
flex-direction: column;
|
|
|
|
.item {
|
|
border-radius: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.empty {
|
|
color: var(--td-text-color-secondary);
|
|
padding: 3rem 1rem;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|