fix SalesOrderList.vue style

2026-09-05 00:26:31 +08:00
parent 71dc209a5a
commit 25bbdafcc8
4 changed files with 388 additions and 55 deletions
@@ -24,6 +24,7 @@
 			</t-dropdown-menu>
 		</div>
 		<t-pull-down-refresh
+			class="list-wrap"
 			v-model="refreshing"
 			:refresh-timeout="30000"
 			@refresh="refresh"
@@ -34,30 +35,20 @@
 				class="view-tip"
 				v-text="viewMode === 'pending-receive' ? '当前显示未收清订单' : '当前显示待处理退款订单'"
 			/>
-			<t-cell-group v-if="displayList.length" theme="card">
-				<t-cell
+			<div v-if="displayList.length" class="items">
+				<sales-order-list-cell
+					class="item"
 					v-for="(item, index) in displayList"
 					:key="item.id"
-					arrow
+					:order="item"
+					:can-receive="canReceive"
+					:can-fulfill="canCreateFulfillment"
 					v-entrance-transition="index * 30"
 					@click="toDetail(item)"
-				>
-					<template #title>
-						<div class="title">
-							<strong v-text="item.orderNo || item.id || '未命名订单'" />
-							<t-tag :content="getSalesOrderStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
-						</div>
-					</template>
-					<template #note><span class="amount" v-text="formatPackageAmount(item.saleAmount)" /></template>
-					<template #description>
-						<div class="description">
-							<span v-text="getSalesOrderTypeText(item.orderType)" />
-							<span v-text="item.customer?.name || item.customerId || '未知客户'" />
-							<t-tag :content="getSalesPaymentStatusText(item.paymentStatus)" theme="primary" variant="outline" />
-						</div>
-					</template>
-				</t-cell>
-			</t-cell-group>
+					@receive="toPayment(item)"
+					@fulfill="toFulfillment(item)"
+				/>
+			</div>
 			<div v-else class="center-tips" v-text="loading ? '正在加载销售订单' : '暂无销售订单'" />
 			<div class="center-tips" v-text="loading ? '正在加载' : noMore ? '已经到底了' : '上拉加载更多'" />
 		</t-pull-down-refresh>
@@ -71,11 +62,10 @@ import { Toolkit } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
 import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
+import SalesOrderListCell from "@/pages/salesOrder/components/SalesOrderListCell.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { SalesOrder, SalesOrderStatus, SalesOrderType, SalesPaymentStatus } from "@/types/SalesOrder";
 import { getErrorMessage } from "@/utils/error";
-import { formatPackageAmount } from "@/utils/package";
-import { getSalesOrderStatusText, getSalesOrderTypeText, getSalesPaymentStatusText, getStatusTheme } from "@/utils/salesOrder";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";

@@ -85,7 +75,15 @@ const router = useRouter();
 const navBarStore = useNavBarStore();
 const userStore = useUserStore();
 const canCreate = computed(() => userStore.hasPermissions(permissionCodes.salesOrder.create));
-const actions = computed(() => canCreate.value ? [{ key: "create", text: "直接产品下单", icon: "add", theme: "primary" as const, action: toCreate }] : []);
+const canReceive = computed(() => userStore.hasPermissions(permissionCodes.fundReceive.create));
+const canCreateFulfillment = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.create));
+const actions = computed(() => canCreate.value ? [{
+	key: "create",
+	text: "直接产品下单",
+	icon: "add",
+	theme: "primary" as const,
+	action: toCreate
+}] : []);
 const keyword = ref("");
 const orderType = ref("ALL");
 const viewMode = computed(() => route.query.view === "pending-receive" || route.query.view === "pending-refund" ? String(route.query.view) : "");
@@ -127,14 +125,69 @@ async function fetchList(reset: boolean): Promise<void> {
 		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); await fetchList(true); } }
-async function toDetail(item: SalesOrder): Promise<void> { if (item.id) await router.push(`/management/sales-orders/${item.id}`); }
-async function toCreate(): Promise<void> { await router.push("/management/sales-orders/create"); }
-const search = Toolkit.debounce(async () => { try { await fetchList(true); } catch (error) { Message.error(getErrorMessage(error, "销售订单加载失败")); } }, 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);
+		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 toFulfillment(item: SalesOrder): Promise<void> {
+	if (item.id) await router.push({ path: "/management/order-fulfillments/create", query: { salesOrderId: item.id } });
+}
+
+async function toCreate(): Promise<void> {
+	await router.push("/management/sales-orders/create");
+}
+
+const search = Toolkit.debounce(async () => {
+	try {
+		await fetchList(true);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "销售订单加载失败"));
+	}
+}, false);
 watch(keyword, () => search());
 watch(viewMode, async value => {
 	status.value = value === "pending-refund" ? "CANCELLED" : "ALL";
@@ -174,11 +227,11 @@ onUnmounted(() => { navBarStore.clearRight(); search.cancel(); });
 			--td-spacer-1: 6px;

 			width: 100%;
+			border: 1px solid rgba(148, 163, 184, .18);
 			overflow: hidden;
 			margin-top: -1rem;
 			padding-top: .8rem;
 			background: #fff;
-			border: 1px solid rgba(148, 163, 184, .18);
 			border-radius: 0 0 1rem 1rem;

 			&:after {
@@ -197,26 +250,25 @@ onUnmounted(() => { navBarStore.clearRight(); search.cancel(); });
 		}
 	}

-	.title, .description {
-		gap: .5rem;
-		display: flex;
-		align-items: center;
-	}
+	.list-wrap {
+		padding-top: 1rem;

-	.description {
-		color: var(--td-text-color-secondary);
-		flex-wrap: wrap;
-	}
+		.view-tip {
+			color: var(--td-text-color-secondary);
+			padding: .75rem 1rem 0;
+			font-size: .8125rem;
+		}

-	.amount {
-		color: var(--td-brand-color);
-		font-weight: 700;
-	}
+		.items {
+			gap: 1rem;
+			display: flex;
+			padding: 0 1rem;
+			flex-direction: column;

-	.view-tip {
-		color: var(--td-text-color-secondary);
-		padding: .75rem 1rem 0;
-		font-size: .8125rem;
+			.item {
+				border-radius: 1rem;
+			}
+		}
 	}

 	.empty {