fix OrderFulfillmentList.vue style

2026-09-05 23:36:53 +08:00
parent 813d511d30
commit 3698f7151f
4 changed files with 172 additions and 102 deletions
@@ -2,32 +2,82 @@
 	<div v-can="permissionCodes.orderFulfillment.read" class="fulfillment-detail">
 		<template v-if="fulfillment">
 			<t-cell-group title="履约单信息" theme="card" v-entrance-transition>
-				<t-cell title="履约单号" :note="fulfillment.id" />
-				<t-cell title="销售订单" :note="fulfillment.salesOrderId || '未知'" arrow @click="toOrder" />
+				<t-cell title="销售订单" arrow @click="toOrder" />
 				<t-cell title="履约类型" :note="getFulfillmentTypeText(fulfillment.fulfillmentType)" />
 				<t-cell title="状态"><template #note><t-tag :content="getFulfillmentStatusText(fulfillment.status)" variant="light-outline" :theme="getStatusTheme(fulfillment.status)" /></template></t-cell>
-				<t-cell title="履约时间" :note="fulfillment.deliveredAt ? Time.toDateTime(fulfillment.deliveredAt) : '未知'" />
+				<t-cell title="履约时间">
+					<template #note>
+						<pass-time-label :timestamp="fulfillment.deliveredAt" underline />
+					</template>
+				</t-cell>
 				<t-cell title="提交人" :note="fulfillment.operator?.name || fulfillment.operatorUserId || '未知'" />
 				<t-cell title="处理人" :note="fulfillment.verifier?.name || fulfillment.verifierUserId || '未处理'" />
 				<t-cell v-if="fulfillment.reason" title="原因" :note="fulfillment.reason" />
 				<t-cell v-if="fulfillment.remark" title="备注" :note="fulfillment.remark" />
 			</t-cell-group>
-			<t-cell-group title="履约明细" theme="card" v-entrance-transition="70">
+			<div class="photos" v-entrance-transition="35">
+				<photo-scroller
+					:model-value="fulfillmentPhotoURLList"
+					:photo-items="fulfillmentPhotoItems"
+					:show-add="false"
+					:show-remove="false"
+					:show-viewer-actions="false"
+					title="履约照片"
+				/>
+			</div>
+			<t-cell-group class="items" title="履约明细" theme="card" v-entrance-transition="70">
 				<t-cell
+					class="item"
 					v-for="item in fulfillment.itemList || []"
 					:key="item.id"
-					:title="`${item.productNameSnapshot || '未命名产品'} · ${item.unitSnapshot || ''}`"
-					:description="`本次 ${item.quantity || 0} · 基础单位 ${item.baseQuantity || 0}`"
+					:title="item.productNameSnapshot"
+					:description="`${item.quantity} ${item.unitSnapshot}`"
 					:note="`待履约 ${item.reservedBefore || 0} → ${item.reservedAfter || 0}`"
-				/>
+				>
+					<template #leftIcon>
+						<t-image
+							v-if="getProductPhotoURL(item)"
+							:src="getProductPhotoURL(item)"
+							:alt="item.productNameSnapshot || '产品图片'"
+							fit="cover"
+							class="avatar"
+						/>
+						<div
+							v-else
+							class="avatar fallback"
+							v-text="(item.productNameSnapshot || '产').slice(0, 1)"
+						/>
+					</template>
+				</t-cell>
 				<t-cell v-if="!fulfillment.itemList?.length" title="暂无履约明细" />
 			</t-cell-group>
-			<section class="actions" v-entrance-transition="140">
-				<t-button v-if="isWaitingStock && canVerify" theme="primary" @click="prepareStock">准备库存</t-button>
-				<t-button v-if="isPending && canVerify" theme="primary" @click="verify">核销履约</t-button>
-				<t-button v-if="isPending && canVerify" theme="default" variant="outline" @click="openReason('reject')">拒绝履约</t-button>
-				<t-button v-if="isPending && canCreate" theme="default" variant="outline" @click="openReason('cancel')">撤销履约</t-button>
-				<t-button v-if="isVerified && canRevoke" theme="danger" variant="outline" @click="openRevoke">履约冲正</t-button>
+			<section
+				v-if="(isWaitingStock && canVerify) || (isPending && (canVerify || canCreate)) || (isVerified && canRevoke)"
+				class="actions"
+				v-entrance-transition="140"
+			>
+				<t-button
+					v-if="isWaitingStock && canVerify"
+					theme="primary"
+					content="准备库存"
+					@click="prepareStock"
+				/>
+				<div v-if="isPending && canVerify" class="pair">
+					<t-button theme="primary" content="核销履约" @click="verify" />
+					<t-button theme="danger" content="拒绝履约" @click="openReason('reject')" />
+				</div>
+				<t-button
+					v-if="isPending && canCreate"
+					theme="default"
+					content="撤销履约"
+					@click="openReason('cancel')"
+				/>
+				<t-button
+					v-if="isVerified && canRevoke"
+					theme="danger"
+					content="履约冲正"
+					@click="openRevoke"
+				/>
 			</section>
 		</template>
 		<t-empty v-else :description="loading ? '正在加载履约单' : '履约单不存在'" />
@@ -66,7 +116,7 @@

 <script setup lang="ts">
 import { BottomPopup } from "timi-tdesign-mobile";
-import { Time } from "timi-web";
+import { PassTimeLabel } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import FulfillmentAPI from "@/api/FulfillmentAPI";
 import PhotoScroller from "@/components/PhotoScroller.vue";
@@ -75,7 +125,9 @@ import type { OrderFulfillment } from "@/types/Fulfillment";
 import type { PhotoItem } from "@/types/Photo";
 import type { Attachment } from "timi-web-api";
 import { createPackageRequestNo } from "@/utils/package";
+import { getAttachmentReadURL } from "@/utils/attachment";
 import { getErrorMessage } from "@/utils/error";
+import { getProductPhotoURL } from "@/utils/product";
 import { getFulfillmentStatusText, getFulfillmentTypeText, getStatusTheme } from "@/utils/salesOrder";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
@@ -99,6 +151,15 @@ const returnedToStore = ref(true);
 const revokeRequestNo = ref("");
 const photoItems = ref<PhotoItem[]>([]);
 const photoUrlList = computed(() => photoItems.value.map(item => item.url));
+const fulfillmentPhotoItems = computed<PhotoItem[]>(() => (fulfillment.value?.attachmentList || [])
+	.filter(item => !!item.id)
+	.map(item => ({
+		attachment: item,
+		attachType: item.attachType || "PHOTO",
+		previewUrl: getAttachmentReadURL(item.id || ""),
+		url: getAttachmentReadURL(item.id || "", 90)
+	})));
+const fulfillmentPhotoURLList = computed(() => fulfillmentPhotoItems.value.map(item => item.url));
 const isWaitingStock = computed(() => fulfillment.value?.status === "WAITING_STOCK");
 const isPending = computed(() => fulfillment.value?.status === "PENDING");
 const isVerified = computed(() => fulfillment.value?.status === "VERIFIED");
@@ -114,7 +175,22 @@ async function loadData(): Promise<void> {
 	finally { loading.value = false; }
 }
 async function toOrder(): Promise<void> {
-	if (fulfillment.value?.salesOrderId) await router.push(`/management/sales-orders/${fulfillment.value.salesOrderId}`);
+	if (fulfillment.value?.salesOrderId) {
+		await router.push({
+			path: `/management/sales-orders/${fulfillment.value.salesOrderId}`,
+			query: { transitionDepth: String(getCurrentRouteDepth() + 1) }
+		});
+	}
+}
+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);
 }
 async function prepareStock(): Promise<void> {
 	if (!fulfillment.value?.id || operating.value) return;
@@ -178,8 +254,53 @@ onUnmounted(() => navBarStore.clearRight());
 </script>

 <style scoped lang="less">
-.fulfillment-detail { gap: 1rem; padding: calc(var(--app-nav-height) + 1rem) 0 2rem; display: flex; flex-direction: column;
-	.actions { gap: .5rem; padding: 0 1rem; display: flex; flex-wrap: wrap; }
-	.actions .t-button { flex: 1 1 8rem; }
+.fulfillment-detail {
+	gap: 1rem;
+	padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
+	display: flex;
+	flex-direction: column;
+
+	.actions {
+		--td-button-border-radius: 1rem;
+
+		gap: .5rem;
+		padding: 0 1rem;
+		display: flex;
+		flex-wrap: wrap;
+
+		.pair {
+			gap: .5rem;
+			width: 100%;
+			display: flex;
+
+			.t-button {
+				width: calc(50% - .25rem);
+				margin: 0;
+				flex: 1 1 0;
+			}
+		}
+
+		.t-button { flex: 1 1 auto; }
+	}
+
+	.photos {
+		margin: 0 1rem;
+		padding: 1rem;
+		background: var(--td-bg-color-container, #fff);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1.25rem;
+	}
+
+	.items {
+
+		.item {
+			padding: 10px;
+
+			.avatar {
+				width: 3.5rem;
+				height: 3.5rem;
+			}
+		}
+	}
 }
 </style>