fix OrderFulfillmentCreate.vue style

src/pages/fulfillment/OrderFulfillmentCreate.vue

@@ -5,18 +5,67 @@
 			<t-cell title="客户" :note="order?.customer?.name || order?.customerId || '未选择'" />
 			<t-cell title="来源类型" :note="isPackage ? '套餐权益' : '直接产品'" />
 		</t-cell-group>
-		<t-cell-group v-if="sourceItems.length" title="本次履约明细" theme="card">
+		<t-form v-if="sourceItems.length" class="items form">
-			<t-cell v-for="item in sourceItems" :key="item.id" class="item">
+			<t-form-item v-for="item in sourceItems" :key="item.id" class="item" label-width="0">
-				<template #title><strong v-text="getItemTitle(item)" /></template>
+				<div class="content">
-				<template #description><span v-text="getItemDescription(item)" /></template>
+					<div class="photo">
-				<template #note><t-input v-model.trim="quantityMap[item.id || '']" class="quantity" type="number" borderless align="right" placeholder="数量" /></template>
+						<t-image
-			</t-cell>
+							v-if="getProductPhotoURL(item)"
-		</t-cell-group>
+							:src="getProductPhotoURL(item)"
+							:alt="item.productNameSnapshot || '产品图片'"
+							fit="cover"
+							class="avatar"
+						/>
+						<div
+							v-else
+							class="avatar fallback"
+							v-text="(item.productNameSnapshot || '产').slice(0, 1)"
+						/>
+					</div>
+					<div class="main">
+						<div class="title">
+							<strong v-text="item.productNameSnapshot" />
+							<span v-text="getItemDescription(item)" />
+						</div>
+						<div class="input">
+							<t-input
+								v-model.trim="quantityMap[item.id || '']"
+								class="quantity"
+								type="number"
+								borderless
+								align="right"
+								placeholder="请输入履约数量"
+							>
+								<template #suffix-icon>
+									<span class="unit" v-text="item.unitSnapshot" />
+								</template>
+							</t-input>
+							<t-button
+								size="extra-small"
+								variant="outline"
+								:disabled="getAvailableQuantity(item) === '0'"
+								@click.stop="fillAllQuantity(item)"
+							>全部履约</t-button>
+						</div>
+					</div>
+				</div>
+			</t-form-item>
+		</t-form>
 		<div v-else class="empty" v-text="order ? '该订单暂无可履约明细，请从客户套餐或订单详情进入' : '请先选择销售订单'" />
 		<t-form class="form" label-align="left" label-width="6rem">
-			<t-form-item label="履约时间" content-align="right"><t-button theme="primary" variant="outline" size="small" :content="deliveredAtText || '此刻'" @click="pickerVisible = true" /></t-form-item>
+			<t-form-item label="履约时间" content-align="right">
-			<t-form-item label="备注"><t-textarea v-model.trim="remark" borderless autosize maxlength="500" /></t-form-item>
+				<t-button
-		</t-form>
+					theme="primary"
+					variant="outline"
+					size="extra-small"
+					:content="deliveredAtText || '此刻'"
+					@click="pickerVisible = true"
+				/>
+			</t-form-item>
+			<t-form-item label="备注">
+				<t-textarea v-model="remark" borderless autosize maxlength="500" />
+			</t-form-item>
+			<t-form-item label-width="0">
 				<photo-scroller
 					v-if="order"
 					:model-value="photoUrlList"
@@ -26,6 +75,8 @@
 					required
 					title="履约凭证照片"
 				/>
+			</t-form-item>
+		</t-form>
 		<t-popup v-model="pickerVisible" placement="bottom">
 			<t-date-time-picker v-model="draftTime" format="YYYY-MM-DD HH:mm" :mode="['date', 'minute']" title="履约时间" @cancel="pickerVisible = false" @confirm="confirmTime" />
 		</t-popup>
@@ -65,6 +116,7 @@ import { getErrorMessage } from "@/utils/error";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 import { uploadPhotoList } from "@/utils/photo";
+import { getProductPhotoURL } from "@/utils/product";
 
 type SourceItem = SalesOrderItem | CustomerPackageItem;
 defineOptions({ name: "OrderFulfillmentCreate" });
@@ -87,6 +139,7 @@ const orderLoading = ref(false);
 const orderOptions = ref<SalesOrder[]>([]);
 const isPackage = computed(() => !!customerPackage.value);
 const sourceItems = computed<SourceItem[]>(() => customerPackage.value?.itemList || order.value?.itemList || []);
+
 async function loadData(): Promise<void> {
 	const salesOrderId = String(route.query.salesOrderId || "");
 	const customerPackageId = String(route.query.customerPackageId || "");
@@ -94,34 +147,71 @@ async function loadData(): Promise<void> {
 	try {
 		order.value = await SalesOrderAPI.detail(salesOrderId);
 		if (customerPackageId) customerPackage.value = await PackageAPI.customerPackageDetail(customerPackageId);
-	} catch (error) { Message.error(getErrorMessage(error, "履约来源加载失败")); }
+	} catch (error) {
+		Message.error(getErrorMessage(error, "履约来源加载失败"));
+	}
 }
-function getItemTitle(item: SourceItem): string { return `${item.productNameSnapshot || "未命名产品"} · ${item.unitSnapshot || "未设置单位"}`; }
+
-function getItemDescription(item: SourceItem): string {
+function getAvailableQuantity(item: SourceItem): string {
 	if (isPackage.value) {
-		return `本次可履约 ${getPackageQuantityText((item as CustomerPackageItem).availableQuantity)}`;
+		return getPackageQuantityText((item as CustomerPackageItem).availableQuantity);
 	}
 	const orderItem = item as SalesOrderItem;
 	const availableQuantity = Math.max(0, Number(orderItem.quantity || 0) - Number(orderItem.reservedQuantity || 0) - Number(orderItem.fulfilledQuantity || 0));
-	return `本次可履约 ${getPackageQuantityText(availableQuantity.toFixed(3))}`;
+	return getPackageQuantityText(availableQuantity.toFixed(3));
 }
-function confirmTime(value: string | number): void { deliveredAtText.value = String(value); pickerVisible.value = false; }
+
+function getItemDescription(item: SourceItem): string {
+	return ` · 剩余 ${getAvailableQuantity(item)}`;
+}
+
+function fillAllQuantity(item: SourceItem): void {
+	if (item.id) {
+		quantityMap[item.id] = getAvailableQuantity(item);
+	}
+}
+
+function confirmTime(value: string | number): void {
+	deliveredAtText.value = String(value);
+	pickerVisible.value = false;
+}
+
 function resolveTimestamp(value: string): number | undefined {
 	if (!value) return undefined;
 	const timestamp = new Date(value.replace(" ", "T")).getTime();
 	return Number.isFinite(timestamp) ? timestamp : undefined;
 }
+
 function buildAttachments(): Partial<Attachment>[] {
-	return photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: "PHOTO" }] : []);
+	return photoItems.value.flatMap(item => item.tempFileId ? [{
+		tempFileId: item.tempFileId,
+		attachType: "PHOTO"
+	}] : []);
 }
+
 function validate(): boolean {
-	if (!order.value?.id) { Message.warning("请先从订单详情进入履约创建"); return false; }
+	if (!order.value?.id) {
-	if (!buildAttachments().length) { Message.warning("履约必须上传至少一张照片"); return false; }
+		Message.warning("请先从订单详情进入履约创建");
+		return false;
+	}
+	if (!buildAttachments().length) {
+		Message.warning("履约必须上传至少一张照片");
+		return false;
+	}
 	const selected = sourceItems.value.filter(item => !!item.id && quantityMap[item.id]);
-	if (!selected.length) { Message.warning("请填写至少一项履约数量"); return false; }
+	if (!selected.length) {
-	for (const item of selected) { if (!normalizePackageQuantity(quantityMap[item.id || ""])) { Message.warning("履约数量必须是正数，最多三位小数"); return false; } }
+		Message.warning("请填写至少一项履约数量");
+		return false;
+	}
+	for (const item of selected) {
+		if (!normalizePackageQuantity(quantityMap[item.id || ""])) {
+			Message.warning("履约数量必须是正数，最多三位小数");
+			return false;
+		}
+	}
 	return true;
 }
+
 async function save(): Promise<void> {
 	if (isSaving.value || !validate()) return;
 	if (!requestNo.value) requestNo.value = createPackageRequestNo();
@@ -141,12 +231,21 @@ async function save(): Promise<void> {
 			attachmentList: buildAttachments(),
 			remark: remark.value.trim() || null
 		});
-		Message.success("履约单已提交"); await router.replace(`/management/order-fulfillments/${result.id}`);
+		Message.success("履约单已提交");
-	} catch (error) { Message.error(getErrorMessage(error, "履约单创建失败，重试会复用同一请求号")); } finally { isSaving.value = false; }
+		await router.replace(`/management/order-fulfillments/${result.id}`);
+	} catch (error) {
+		Message.error(getErrorMessage(error, "履约单创建失败，重试会复用同一请求号"));
+	} finally {
+		isSaving.value = false;
+	}
 }
+
 async function openOrderPicker(): Promise<void> {
 	if (order.value?.id) {
-		await router.push(`/management/sales-orders/${order.value.id}`);
+		await router.push({
+			path: `/management/sales-orders/${order.value.id}`,
+			query: { transitionDepth: String(getCurrentRouteDepth() + 1) }
+		});
 		return;
 	}
 	orderPickerVisible.value = true;
@@ -155,9 +254,13 @@ async function openOrderPicker(): Promise<void> {
 	try {
 		const result = await SalesOrderAPI.list({ index: 0, size: 100, orderType: "DIRECT_PRODUCT", status: "ACTIVE" });
 		orderOptions.value = result.list || [];
-	} catch (error) { Message.error(getErrorMessage(error, "可履约订单加载失败")); }
+	} catch (error) {
-	finally { orderLoading.value = false; }
+		Message.error(getErrorMessage(error, "可履约订单加载失败"));
+	} finally {
+		orderLoading.value = false;
+	}
 }
+
 async function selectOrder(item: SalesOrder): Promise<void> {
 	if (!item.id) return;
 	order.value = item;
@@ -165,16 +268,94 @@ async function selectOrder(item: SalesOrder): Promise<void> {
 	for (const key of Object.keys(quantityMap)) delete quantityMap[key];
 	await router.replace({ query: { salesOrderId: item.id } });
 }
-onMounted(async () => { navBarStore.setRightText("提交履约", "var(--td-brand-color)", save); await loadData(); });
+
+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(async () => {
+	navBarStore.setRightText("提交", "var(--td-brand-color)", save);
+	await loadData();
+});
 onUnmounted(() => navBarStore.clearRight());
 </script>
 
 <style scoped lang="less">
-.fulfillment-create { gap: 1rem; padding: calc(var(--app-nav-height) + 1rem) 0 2rem; display: flex; flex-direction: column;
+.fulfillment-create {
-	.item .quantity { width: 7rem; }
+	gap: 1rem;
-	.form { padding: 0 1rem; }
+	padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
-	.empty { color: var(--td-text-color-secondary); padding: 2rem 1rem; text-align: center; }
+	display: flex;
-	.order-picker { height: 100%; overflow: auto; padding: 1rem 0; }
+	flex-direction: column;
-	.picker-title { padding: 0 1rem 1rem; font-weight: 700; }
+
+	.items {
+		margin: 0 1rem;
+		background: var(--td-bg-color-container);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1rem;
+		overflow: hidden;
+
+		.item {
+			padding: 10px;
+
+			.content {
+				gap: .5rem;
+				display: flex;
+
+				.photo {
+					gap: .5rem;
+					display: flex;
+
+					.avatar {
+						width: 3.5rem;
+						height: 3.5rem;
+					}
+				}
+
+				.main {
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+					justify-content: space-between;
+
+					.title {
+
+					}
+
+					.input {
+						gap: 1rem;
+						display: flex;
+
+						.unit {
+							font-size: .875rem;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.empty {
+		color: var(--td-text-color-secondary);
+		padding: 2rem 1rem;
+		text-align: center;
+	}
+
+	.order-picker {
+		height: 100%;
+		overflow: auto;
+		padding: 1rem 0;
+	}
+
+	.picker-title {
+		padding: 0 1rem 1rem;
+		font-weight: 700;
+	}
 }
 </style>

src/types/Package.ts

@@ -36,6 +36,7 @@ export type CustomerPackageItem = {
 	customerPackageId?: string;
 	productId?: string;
 	productUnitId?: string;
+	attachmentList?: Attachment[];
 	productNameSnapshot?: string;
 	unitSnapshot?: string;
 	baseQuantityPerUnitSnapshot?: number | string;

src/types/SalesOrder.ts

@@ -14,6 +14,7 @@ export type SalesOrderItem = {
 	salesOrderId?: string;
 	productId?: string;
 	productUnitId?: string;
+	attachmentList?: Attachment[];
 	productNameSnapshot?: string;
 	unitSnapshot?: string;
 	baseQuantityPerUnitSnapshot?: number | string;

src/utils/product.ts

@@ -78,7 +78,7 @@ export function getStockOperationText(type?: StockOperationType): string {
 	} as Record<string, string>)[type || ""] || "未知操作";
 }
 
-export function getProductPhotoURL(item: Product): string {
+export function getProductPhotoURL(item: Pick<Product, "attachmentList">): string {
 	const attachment = item.attachmentList?.find(item => item.attachType === "PHOTO" && !!item.id);
 	return attachment?.id ? getAttachmentReadURL(attachment.id, 128) : "";
 }