fix SalesOrderDetail.vue style

src/pages/salesOrder/SalesOrderDetail.vue

@@ -3,45 +3,121 @@
 		<template v-if="order">
 			<customer-profile-card v-if="order.customer" class="customer" :customer="order.customer" v-entrance-transition />
 			<section class="hero" v-entrance-transition="35">
-				<span class="eyebrow" v-text="'销售订单'" />
-				<div class="hero-title">
-					<h1 v-text="order.orderNo || order.id || '未命名订单'" />
+				<div class="header">
+					<span class="eyebrow">销售订单</span>
 					<t-tag :content="getSalesOrderStatusText(order.status)" variant="light-outline" :theme="getStatusTheme(order.status)" />
 				</div>
-				<div class="hero-meta">
-					<span v-text="getSalesOrderTypeText(order.orderType)" />
-					<strong v-text="formatPackageAmount(order.saleAmount)" />
+				<h1 class="no" v-text="order.orderNo" />
+				<div class="meta">
+					<pass-time-label class="time" :timestamp="order.purchasedAt" underline />
+					<div class="amount" :class="getPaymentAmountClass(order.paymentStatus)">
+						<span>￥</span>
+						<strong class="value" v-text="formatPackageAmount(order.saleAmount)" />
+					</div>
 				</div>
 			</section>
-			<t-cell-group title="订单信息" theme="card" v-entrance-transition="70">
-				<t-cell title="订单号" :note="order.orderNo || order.id" />
-				<t-cell title="订单类型" :note="getSalesOrderTypeText(order.orderType)" />
-				<t-cell title="订单状态">
-					<template #note><t-tag :content="getSalesOrderStatusText(order.status)" variant="light-outline" :theme="getStatusTheme(order.status)" /></template>
-				</t-cell>
-				<t-cell title="下单时间" :note="order.purchasedAt ? Time.toDateTime(order.purchasedAt) : '未知'" />
+			<t-cell-group title="订单信息" class="info" theme="card" v-entrance-transition="70">
 				<t-cell v-if="order.sourceEventRecord?.id" title="来源登记记录" arrow @click="toEventRecord" />
-				<t-cell v-if="order.remark" title="备注" :note="order.remark" />
+				<t-cell title="备注" :note="Text.display(order.remark)" />
+				<div class="photo-wrap bg-white">
+					<photo-scroller
+						:model-value="photoURLList"
+						:photo-items="photoItems"
+						title="订单照片"
+						:show-add="false"
+						:show-remove="false"
+						:show-viewer-actions="false"
+						v-entrance-transition="105"
+					/>
+				</div>
 			</t-cell-group>
-			<t-cell-group v-if="order.itemList?.length" title="订单明细" theme="card" v-entrance-transition="140">
+			<t-cell-group
+				v-if="order.itemList?.length"
+				class="product"
+				title="订单明细"
+				theme="card"
+				v-entrance-transition="140"
+			>
 				<t-cell
 					v-for="item in order.itemList"
 					:key="item.id"
-					:title="item.productNameSnapshot || '未命名产品'"
-					:description="getItemDescription(item)"
-					:note="formatPackageAmount(item.lineAmount)"
-				/>
-			</t-cell-group>
-			<sales-order-finance-panel :order="order" :can-read-fund="canReadFund" @fund="toFundRecords" @record="toFundDetail" />
-			<t-cell-group title="统一履约" theme="card" v-entrance-transition="210">
+					:title="getItemTitle(item)"
+				>
+					<template #description>
+						<div class="description">
+							<span>
+								<span>￥</span>
+								<strong class="red" v-text="formatPackageAmount(item.lineAmount)" />
+							</span>
+							<span>
+								<span>已履约</span>
+								<strong :class="getFulfilledQuantityClass(item)" v-text="getPackageQuantityText(item.fulfilledQuantity)" />
+							</span>
+							<span>
+								<span>剩余履约</span>
+								<strong :class="getRemainingQuantityClass(item)" v-text="getRemainingQuantityText(item)" />
+							</span>
+						</div>
+					</template>
+					<template #note>
+						<t-tag
+							:content="getItemFulfillmentStatus(item).text"
+							:theme="getItemFulfillmentStatus(item).theme"
+							variant="light-outline"
+						/>
+					</template>
+				</t-cell>
 				<t-cell title="履约记录" note="查看本单所有履约单" arrow @click="toFulfillmentList" />
-				<t-cell v-if="canCreateFulfillment && order.orderType === 'DIRECT_PRODUCT' && order.status === 'ACTIVE'" title="创建履约单" note="直接产品订单统一履约" arrow @click="toCreateFulfillment" />
+			</t-cell-group>
+			<t-button
+				v-if="canCreateFulfillment && canFulfillByPayment && order.orderType === 'DIRECT_PRODUCT' && order.status === 'ACTIVE'"
+				class="cell-button"
+				theme="primary"
+				content="履约产品"
+				@click="toCreateFulfillment"
+			/>
+			<t-cell-group class="finance-panel" title="资金摘要" theme="card">
+				<t-cell title="成交金额">
+					<template #note><span :class="getPaymentAmountClass(order.paymentStatus)" v-text="formatPackageAmount(order.saleAmount)" /></template>
+				</t-cell>
+				<t-cell title="已生效收款">
+					<template #note><span :class="getAmountClass(order.paidAmount, 'green')" v-text="formatPackageAmount(order.paidAmount)" /></template>
+				</t-cell>
+				<t-cell title="待核销收款">
+					<template #note><span :class="getAmountClass(order.pendingPaidAmount, 'orange')" v-text="formatPackageAmount(order.pendingPaidAmount)" /></template>
+				</t-cell>
+				<t-cell title="剩余待收款">
+					<template #note><span :class="getRemainingAmountClass(order.unpaidAmount)" v-text="formatPackageAmount(order.unpaidAmount)" /></template>
+				</t-cell>
+				<t-cell title="有效退款">
+					<template #note><span :class="getAmountClass(order.refundedAmount, 'red')" v-text="formatPackageAmount(order.refundedAmount)" /></template>
+				</t-cell>
+				<t-cell title="收款状态" :note="getSalesPaymentStatusText(order.paymentStatus)" />
+				<t-cell v-if="order.paymentStatus === 'PAID'" title="全额实收时间" :note="getPaidAtText(order.paidAt)" />
+				<t-cell title="退款状态" :note="getSalesRefundStatusText(order.refundStatus)" />
+				<t-cell v-if="canReadFund" title="查看全部资金流水" arrow @click="toFundRecords" />
 			</t-cell-group>
 			<section class="actions" v-entrance-transition="280">
-				<t-button v-if="canReceive" theme="primary" @click="toPayment">登记收款</t-button>
-				<t-button v-if="canRefund" theme="danger" variant="outline" @click="toRefund">登记退款</t-button>
-				<t-button v-if="canConfirmNoRefund" theme="default" variant="outline" @click="toNoRefund">确认无需退款</t-button>
-				<t-button v-if="canCancel" theme="danger" variant="outline" @click="toCancel">取消订单</t-button>
+				<t-button
+					v-if="canReceive"
+					theme="primary"
+					@click="toPayment"
+				>登记收款</t-button>
+				<t-button
+					v-if="canRefund"
+					theme="danger"
+					@click="toRefund"
+				>登记退款</t-button>
+				<t-button
+					v-if="canConfirmNoRefund"
+					theme="default"
+					@click="toNoRefund"
+				>确认无需退款</t-button>
+				<t-button
+					v-if="canCancel"
+					theme="danger"
+					@click="toCancel"
+				>取消订单</t-button>
 			</section>
 		</template>
 		<t-empty v-else :description="loading ? '正在加载订单' : '订单不存在'" />
@@ -49,16 +125,23 @@
 </template>
 
 <script setup lang="ts">
-import { Time } from "timi-web";
+import { PassTimeLabel, Text, Time } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
-import SalesOrderFinancePanel from "@/pages/salesOrder/components/SalesOrderFinancePanel.vue";
+import PhotoScroller from "@/components/PhotoScroller.vue";
 import { useNavBarStore } from "@/store/navBarStore";
-import type { SalesOrder, SalesOrderItem } from "@/types/SalesOrder";
+import type { SalesOrder, SalesOrderItem, SalesPaymentStatus } from "@/types/SalesOrder";
+import type { PhotoItem } from "@/types/Photo";
 import { formatPackageAmount, getPackageQuantityText } from "@/utils/package";
+import { getAttachmentReadURL } from "@/utils/attachment";
 import { getErrorMessage } from "@/utils/error";
-import { getSalesOrderStatusText, getSalesOrderTypeText, getStatusTheme } from "@/utils/salesOrder";
+import {
+	getSalesOrderStatusText,
+	getSalesPaymentStatusText,
+	getSalesRefundStatusText,
+	getStatusTheme
+} from "@/utils/salesOrder";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 
@@ -71,53 +154,255 @@ const order = ref<SalesOrder>();
 const loading = ref(false);
 const canReadFund = computed(() => userStore.hasPermissions(permissionCodes.fundRecord.read));
 const canCreateFulfillment = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.create));
+const canOperateStock = computed(() => userStore.hasPermissions(permissionCodes.productStock.create));
 const canReceive = computed(() => !!order.value && order.value.status !== "CANCELLED" && order.value.paymentStatus !== "PAID" && userStore.hasPermissions(permissionCodes.fundReceive.create));
 const canRefund = computed(() => !!order.value && order.value.status === "CANCELLED" && order.value.refundStatus === "PENDING" && userStore.hasPermissions(permissionCodes.fund.refund));
 const canConfirmNoRefund = computed(() => !!order.value && order.value.status === "CANCELLED" && order.value.refundStatus === "PENDING" && userStore.hasPermissions(permissionCodes.fund.refund));
 const canCancel = computed(() => !!order.value && order.value.status === "ACTIVE" && userStore.hasPermissions(permissionCodes.salesOrder.cancel));
-function getItemDescription(item: SalesOrderItem): string {
+const canFulfillByPayment = computed(() => order.value?.paymentStatus === "PAID" || (order.value?.paymentStatus === "PARTIALLY_PAID" && canOperateStock.value));
+const photoItems = computed<PhotoItem[]>(() => (order.value?.attachmentList || [])
+	.filter(item => !!item.id)
+	.map(item => ({
+		attachment: item,
+		attachType: item.attachType || "PHOTO",
+		previewUrl: getAttachmentReadURL(item.id || ""),
+		url: getAttachmentReadURL(item.id || "", 90)
+	})));
+const photoURLList = computed(() => photoItems.value.map(item => item.url));
+
+function getPaidAtText(paidAt?: number | null): string {
+	return paidAt ? Time.toDateTime(paidAt) : "待后端回填";
+}
+
+function getPaymentAmountClass(status?: SalesPaymentStatus): "green" | "orange" | "red" | "gray" {
+	if (status === "PAID") return "green";
+	if (status === "PARTIALLY_PAID") return "orange";
+	if (status === "UNPAID") return "red";
+	return "gray";
+}
+
+function getAmountClass(amount?: number | null, activeClass: "green" | "orange" | "red" = "green"): "green" | "orange" | "red" | "gray" {
+	if (amount === undefined || amount === null || amount === 0) return "gray";
+	return activeClass;
+}
+
+function getRemainingAmountClass(amount?: number | null): "green" | "red" | "gray" {
+	if (amount === undefined || amount === null) return "gray";
+	return amount === 0 ? "green" : "red";
+}
+
+function getItemTitle(item: SalesOrderItem): string {
+	const productName = item.productNameSnapshot || "未命名产品";
+	const quantity = getPackageQuantityText(item.quantity);
+	const unit = item.unitSnapshot ? ` ${item.unitSnapshot}` : "";
+	return `${productName} ${quantity}${unit}`;
+}
+
+function getRemainingQuantity(item: SalesOrderItem): number {
 	const quantity = Number(item.quantity || 0);
 	const fulfilledQuantity = Number(item.fulfilledQuantity || 0);
-	const remainingQuantity = Math.max(0, quantity - fulfilledQuantity);
-	return `${getPackageQuantityText(item.quantity)} ${item.unitSnapshot || ""} · 已履约 ${getPackageQuantityText(item.fulfilledQuantity)} · 剩余待履约 ${getPackageQuantityText(remainingQuantity.toFixed(3))}`;
+	return Math.max(0, quantity - fulfilledQuantity);
+}
+
+function getRemainingQuantityText(item: SalesOrderItem): string {
+	return getPackageQuantityText(getRemainingQuantity(item).toFixed(3));
+}
+
+function getFulfilledQuantityClass(item: SalesOrderItem): "green" | "orange" {
+	const quantity = Number(item.quantity || 0);
+	const fulfilledQuantity = Number(item.fulfilledQuantity || 0);
+	return fulfilledQuantity < quantity ? "orange" : "green";
+}
+
+function getRemainingQuantityClass(item: SalesOrderItem): "green" | "orange" {
+	return getRemainingQuantity(item) === 0 ? "green" : "orange";
+}
+
+function getItemFulfillmentStatus(item: SalesOrderItem): { text: string; theme: "success" | "warning" | "danger" } {
+	const quantity = Number(item.quantity || 0);
+	const fulfilledQuantity = Number(item.fulfilledQuantity || 0);
+	if (0 < quantity && (fulfilledQuantity === quantity || quantity < fulfilledQuantity)) {
+		return { text: "已完成", theme: "success" };
+	}
+	if (0 < fulfilledQuantity) {
+		return { text: "部分履约", theme: "warning" };
+	}
+	return { text: "未履约", theme: "danger" };
 }
 
 async function loadData(): Promise<void> {
 	const id = String(route.params.id || "");
 	if (!id) return;
 	loading.value = true;
-	try { order.value = await SalesOrderAPI.detail(id); }
-	catch (error) { Message.error(getErrorMessage(error, "订单加载失败")); }
-	finally { loading.value = false; }
+	try {
+		order.value = await SalesOrderAPI.detail(id);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "订单加载失败"));
+	} finally {
+		loading.value = false;
+	}
 }
-async function toEventRecord(): Promise<void> { if (order.value?.sourceEventRecord?.id) await router.push(`/management/registration-event-records/${order.value.sourceEventRecord.id}`); }
-async function toFundRecords(): Promise<void> { if (order.value?.id) await router.push({ path: "/management/fund-records", query: { salesOrderId: order.value.id } }); }
-async function toFundDetail(id: string): Promise<void> { await router.push(`/management/fund-records/${id}`); }
-async function toFulfillmentList(): Promise<void> { if (order.value?.id) await router.push({ path: "/management/order-fulfillments", query: { salesOrderId: order.value.id } }); }
-async function toCreateFulfillment(): Promise<void> { if (order.value?.id) await router.push({ path: "/management/order-fulfillments/create", query: { salesOrderId: order.value.id } }); }
-async function toPayment(): Promise<void> { if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/payment`); }
-async function toRefund(): Promise<void> { if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/refund`); }
-async function toNoRefund(): Promise<void> { if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/no-refund`); }
-async function toCancel(): Promise<void> { if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/cancel`); }
+
+async function toEventRecord(): Promise<void> {
+	if (order.value?.sourceEventRecord?.id) await router.push(`/management/registration-event-records/${order.value.sourceEventRecord.id}`);
+}
+
+async function toFundRecords(): Promise<void> {
+	if (order.value?.id) await router.push({
+		path: "/management/fund-records",
+		query: {
+			salesOrderId: order.value.id,
+			transitionDepth: String(getCurrentRouteDepth() + 1)
+		}
+	});
+}
+
+async function toFulfillmentList(): Promise<void> {
+	if (order.value?.id) await router.push({
+		path: "/management/order-fulfillments",
+		query: {
+			salesOrderId: order.value.id,
+			transitionDepth: String(getCurrentRouteDepth() + 1)
+		}
+	});
+}
+
+async function toCreateFulfillment(): Promise<void> {
+	if (order.value?.id) await router.push({
+		path: "/management/order-fulfillments/create",
+		query: { salesOrderId: order.value.id }
+	});
+}
+
+async function toPayment(): Promise<void> {
+	if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/payment`);
+}
+
+async function toRefund(): Promise<void> {
+	if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/refund`);
+}
+
+async function toNoRefund(): Promise<void> {
+	if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/no-refund`);
+}
+
+async function toCancel(): Promise<void> {
+	if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/cancel`);
+}
+
+function getCurrentRouteDepth(): number {
+	const transitionDepth = Array.isArray(route.query.transitionDepth)
+		? route.query.transitionDepth[0]
+		: route.query.transitionDepth;
+	const depth = Number(transitionDepth);
+	if (transitionDepth && Number.isInteger(depth) && 0 <= depth && depth <= 20) {
+		return depth;
+	}
+	return Number(route.meta.depth ?? 0);
+}
+
 onMounted(loadData);
 onUnmounted(() => navBarStore.clearRight());
 </script>
 
 <style scoped lang="less">
-.sales-order-detail { gap: 1rem; padding: calc(var(--app-nav-height) + 1rem) 0 2rem; display: flex; flex-direction: column;
-	.customer { margin: 0 1rem; }
-	.hero { margin: 0 1rem; padding: 1rem; background: linear-gradient(135deg, #fff7ed, #eff6ff); box-shadow: var(--td-shadow-1); border-radius: 1.25rem;
-		.eyebrow { color: #c2410c; display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; }
-		.hero-title { gap: .5rem; display: flex; margin-top: .35rem; align-items: center; justify-content: space-between; }
-		h1 { margin: 0; min-width: 0; font-size: 1.2rem; line-height: 1.35; }
-		.hero-meta { gap: .75rem; display: flex; margin-top: .6rem; color: var(--td-text-color-secondary); align-items: center; justify-content: space-between; }
-		strong { color: #c2410c; font-size: 1.2rem; white-space: nowrap; }
+.sales-order-detail {
+	gap: 1rem;
+	padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
+	display: flex;
+	flex-direction: column;
+
+	.customer {
+		margin: 0 1rem;
+	}
+
+	.hero {
+		margin: 0 1rem;
+		padding: 1rem;
+		background: linear-gradient(135deg, #fff7ed, #eff6ff);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1.25rem;
+
+		.header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.eyebrow {
+				color: #c2410c;
+				display: block;
+				font-weight: 700;
+				letter-spacing: .08em;
+			}
+		}
+
+		.no {
+			margin: 1rem 0;
+			min-width: 0;
+			font-size: 1.2rem;
+			line-height: 1.35;
+		}
+
+		.meta {
+			gap: .75rem;
+			display: flex;
+			margin-top: .6rem;
+			color: var(--td-text-color-secondary);
+			align-items: end;
+			justify-content: space-between;
+
+			.time {
+				font-size: .875rem;
+			}
+
+			.amount {
+
+				.value {
+					font-size: 1.5rem;
+				}
+			}
+		}
+	}
+
+	.info {
+
+		.photo-wrap {
+			padding: .75rem;
+		}
+	}
+
+	.product {
+
+		.description {
+			gap: .75rem;
+			display: flex;
+
+			> span {
+				gap: .25rem;
+				display: flex;
+			}
+		}
+	}
+
+	.actions {
+		--td-button-border-radius: 1rem;
+
+		gap: .5rem;
+		padding: 0 1rem;
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.actions .t-button {
+		flex: 1 1 8rem;
 	}
-	.actions { gap: .5rem; padding: 0 1rem; display: flex; flex-wrap: wrap; }
-	.actions .t-button { flex: 1 1 8rem; }
 }
 
-:global(html.theme-dark) .sales-order-detail .hero { background: linear-gradient(135deg, rgba(194, 65, 12, .2), rgba(37, 99, 235, .18));
-	.eyebrow, strong { color: #fdba74; }
+:global(html.theme-dark) .sales-order-detail .hero {
+	background: linear-gradient(135deg, rgba(194, 65, 12, .2), rgba(37, 99, 235, .18));
+
+	.eyebrow, strong {
+		color: #fdba74;
+	}
 }
 </style>