498 lines
14 KiB
Vue
498 lines
14 KiB
Vue
<template>
|
|
<div v-can="permissionCodes.salesOrder.read" class="sales-order-list">
|
|
<div class="filters">
|
|
<div class="search-status">
|
|
<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-dropdown-menu class="status">
|
|
<t-dropdown-item
|
|
v-model="status"
|
|
label="订单状态"
|
|
:options="statusOptions"
|
|
@change="selectStatus"
|
|
/>
|
|
</t-dropdown-menu>
|
|
</div>
|
|
<t-dropdown-menu class="menus">
|
|
<t-dropdown-item
|
|
v-if="!packageConfigId"
|
|
v-model="orderType"
|
|
label="订单类型"
|
|
:options="orderTypeOptions"
|
|
@change="selectOrderType"
|
|
/>
|
|
<t-dropdown-item
|
|
v-model="paymentStatus"
|
|
label="收款状态"
|
|
:options="paymentOptions"
|
|
@change="selectPaymentStatus"
|
|
/>
|
|
<t-dropdown-item
|
|
v-model="refundStatus"
|
|
label="退款状态"
|
|
:options="refundOptions"
|
|
@change="selectRefundStatus"
|
|
/>
|
|
</t-dropdown-menu>
|
|
</div>
|
|
<t-pull-down-refresh
|
|
class="list-wrap"
|
|
v-model="refreshing"
|
|
:refresh-timeout="30000"
|
|
@refresh="refresh"
|
|
@scrolltolower="loadMore"
|
|
>
|
|
<div v-if="list.length" class="items">
|
|
<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-list-cell
|
|
class="item"
|
|
v-for="(item, index) in list"
|
|
:key="item.id"
|
|
: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>
|
|
<div v-else class="center-tips" v-text="loading ? '正在加载销售订单' : '暂无销售订单'" />
|
|
<div class="center-tips" v-text="loading ? '正在加载' : noMore ? '已经到底了' : '上拉加载更多'" />
|
|
</t-pull-down-refresh>
|
|
</div>
|
|
<nav-bar-action-menu v-if="actions.length" :actions="actions" />
|
|
<customer-selector
|
|
v-model="customerId"
|
|
v-model:visible="customerSelectorVisible"
|
|
@change="handleCustomerChange"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { type DropdownValue } from "tdesign-mobile-vue";
|
|
import { Toolkit } from "timi-web";
|
|
import { useUserStore } from "timi-web-api";
|
|
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 SalesOrderListCell from "@/pages/salesOrder/components/SalesOrderListCell.vue";
|
|
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 { getErrorMessage } from "@/utils/error";
|
|
import { Message } from "@/utils/message";
|
|
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
|
|
|
defineOptions({ name: "SalesOrderList" });
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
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));
|
|
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 orderType = ref("ALL");
|
|
type PaymentFilter = "ALL" | GaoSalesPaymentStatus | "PENDING_RECEIVE";
|
|
type RefundFilter = "ALL" | GaoSalesRefundStatus;
|
|
|
|
const status = ref("ALL");
|
|
const paymentStatus = ref<PaymentFilter>("ALL");
|
|
const refundStatus = ref<RefundFilter>("ALL");
|
|
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;
|
|
const orderTypeOptions = [
|
|
{ label: "全部类型", value: "ALL" },
|
|
{ label: "套餐订单", value: "PACKAGE" },
|
|
{ label: "产品订单", value: "DIRECT_PRODUCT" }
|
|
];
|
|
const statusOptions = [
|
|
{ label: "全部状态", value: "ALL" },
|
|
{ label: "进行中", value: "ACTIVE" },
|
|
{ label: "已履约", value: "FULFILLED" },
|
|
{ label: "已取消", value: "CANCELLED" }
|
|
];
|
|
const paymentOptions = [
|
|
{ label: "全部收款", value: "ALL" },
|
|
{ label: "未收清", value: "PENDING_RECEIVE" },
|
|
{ label: "未收款", value: "UNPAID" },
|
|
{ label: "部分收款", value: "PARTIALLY_PAID" },
|
|
{ label: "已收款", value: "PAID" }
|
|
];
|
|
const refundOptions = [
|
|
{ label: "全部退款", value: "ALL" },
|
|
{ label: "无需退款", value: "NOT_REQUIRED" },
|
|
{ label: "待退款", value: "PENDING" },
|
|
{ label: "已退款", value: "REFUNDED" }
|
|
];
|
|
|
|
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("|"));
|
|
|
|
function queryValue(value: unknown): string {
|
|
return Array.isArray(value) ? "" : typeof value === "string" ? value : "";
|
|
}
|
|
|
|
const packageConfigId = computed(() => queryValue(route.query.packageConfigId));
|
|
const selectedPackageName = computed(() => selectedPackage.value?.name || queryValue(route.query.packageConfigName) || "未命名套餐");
|
|
|
|
function applyRouteFilters(): void {
|
|
const pendingReceive = queryValue(route.query.pendingReceive) === "true";
|
|
customerId.value = queryValue(route.query.customerId);
|
|
orderType.value = packageConfigId.value ? "PACKAGE" : queryValue(route.query.orderType) || "ALL";
|
|
status.value = queryValue(route.query.status) || "ALL";
|
|
paymentStatus.value = pendingReceive ? "PENDING_RECEIVE" : queryValue(route.query.paymentStatus) as PaymentFilter || "ALL";
|
|
refundStatus.value = queryValue(route.query.refundStatus) as RefundFilter || "ALL";
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
async function handleCustomerChange(): Promise<void> {
|
|
try {
|
|
await loadRouteCustomer();
|
|
await fetchList(true);
|
|
} catch (error) {
|
|
selectedCustomer.value = undefined;
|
|
Message.error(getErrorMessage(error, "客户加载失败"));
|
|
}
|
|
}
|
|
|
|
function buildPageFilter(): SalesOrderPage {
|
|
const pendingReceive = paymentStatus.value === "PENDING_RECEIVE";
|
|
return {
|
|
customerId: customerId.value || undefined,
|
|
packageConfigId: packageConfigId.value || undefined,
|
|
keyword: keyword.value || undefined,
|
|
orderType: orderType.value === "ALL" ? undefined : orderType.value as GaoSalesOrderType,
|
|
status: status.value === "ALL" ? undefined : status.value as GaoSalesOrderStatus,
|
|
paymentStatus: pendingReceive || paymentStatus.value === "ALL" ? undefined : paymentStatus.value as GaoSalesPaymentStatus,
|
|
refundStatus: refundStatus.value === "ALL" ? undefined : refundStatus.value as GaoSalesRefundStatus,
|
|
pendingReceive: pendingReceive ? true : undefined,
|
|
index: pageIndex.value,
|
|
size: pageSize
|
|
};
|
|
}
|
|
|
|
async function fetchList(reset: boolean): Promise<void> {
|
|
if (loading.value || (!reset && noMore.value)) return;
|
|
if (reset) { pageIndex.value = 0; total.value = 0; noMore.value = false; list.value = []; }
|
|
loading.value = true;
|
|
try {
|
|
const result = await SalesOrderAPI.list(buildPageFilter());
|
|
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; }
|
|
}
|
|
|
|
async function refresh(): Promise<void> {
|
|
try {
|
|
await fetchList(true);
|
|
} 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 selectOrderType(value: DropdownValue): Promise<void> {
|
|
if (!Array.isArray(value)) {
|
|
orderType.value = String(value);
|
|
await fetchList(true);
|
|
}
|
|
}
|
|
|
|
async function selectStatus(value: DropdownValue): Promise<void> {
|
|
if (!Array.isArray(value)) {
|
|
status.value = String(value);
|
|
await fetchList(true);
|
|
}
|
|
}
|
|
|
|
async function selectPaymentStatus(value: DropdownValue): Promise<void> {
|
|
if (!Array.isArray(value)) {
|
|
paymentStatus.value = String(value) as PaymentFilter;
|
|
await fetchList(true);
|
|
}
|
|
}
|
|
|
|
async function selectRefundStatus(value: DropdownValue): Promise<void> {
|
|
if (!Array.isArray(value)) {
|
|
refundStatus.value = String(value) as RefundFilter;
|
|
await fetchList(true);
|
|
}
|
|
}
|
|
|
|
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 () => {
|
|
const isCustomerKeyword = !!customerId.value && keyword.value.trim() === customerKeyword;
|
|
customerKeyword = "";
|
|
if (isCustomerKeyword) {
|
|
return;
|
|
}
|
|
customerId.value = "";
|
|
selectedCustomer.value = undefined;
|
|
await search();
|
|
});
|
|
watch(routeFilterKey, async () => {
|
|
applyRouteFilters();
|
|
try {
|
|
await loadRouteCustomer();
|
|
} catch {
|
|
selectedCustomer.value = undefined;
|
|
}
|
|
await loadRoutePackage();
|
|
await fetchList(true);
|
|
});
|
|
onMounted(async () => {
|
|
navBarStore.clearRight();
|
|
navBarStore.setCustomRightVisible(!!actions.value.length);
|
|
applyRouteFilters();
|
|
try {
|
|
await loadRouteCustomer();
|
|
await loadRoutePackage();
|
|
await fetchList(true);
|
|
} catch (error) {
|
|
Message.error(getErrorMessage(error, "销售订单加载失败"));
|
|
}
|
|
});
|
|
onUnmounted(() => { 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;
|
|
display: flex;
|
|
padding: .75rem 1rem;
|
|
position: sticky;
|
|
background: #F5F5F8;
|
|
box-shadow: var(--td-shadow-1);
|
|
flex-direction: column;
|
|
|
|
.search-status {
|
|
display: flex;
|
|
|
|
.keyword {
|
|
--td-button-border-radius: .75rem;
|
|
--td-input-vertical-padding: .25rem 1rem;
|
|
|
|
flex: 1;
|
|
border: 1px solid var(--td-component-border);
|
|
z-index: 2;
|
|
background: var(--td-bg-color-container);
|
|
padding-right: .3rem;
|
|
border-radius: 1rem;
|
|
|
|
.actions {
|
|
gap: .25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.status {
|
|
--td-spacer: 4px;
|
|
--td-spacer-1: 6px;
|
|
|
|
border: 1px solid rgba(148, 163, 184, .18);
|
|
z-index: 1;
|
|
margin-left: -2.5rem;
|
|
padding-left: 3rem;
|
|
padding-right: .7rem;
|
|
border-radius: 1rem;
|
|
|
|
&:after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menus {
|
|
--td-spacer-1: 6px;
|
|
|
|
width: 100%;
|
|
border: 1px solid rgba(148, 163, 184, .18);
|
|
overflow: hidden;
|
|
margin-top: -1rem;
|
|
background: #fff;
|
|
border-top: none;
|
|
padding-top: .8rem;
|
|
border-radius: 0 0 1rem 1rem;
|
|
}
|
|
}
|
|
|
|
.list-wrap {
|
|
padding-top: 1rem;
|
|
|
|
.items {
|
|
gap: 1rem;
|
|
display: flex;
|
|
padding: 0 1rem;
|
|
flex-direction: column;
|
|
|
|
.selected-package {
|
|
|
|
:deep(.t-cell-group) {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.item {
|
|
border-radius: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.empty {
|
|
color: var(--td-text-color-secondary);
|
|
padding: 3rem 1rem;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|