add product-stock-preview for OrderFulfillmentDetail.vue

src/pages/fulfillment/OrderFulfillmentCreate.vue

@@ -57,6 +57,7 @@
 								align="right"
 								:disabled="!getFulfillmentUnit(item)"
 								placeholder="请输入履约数量"
+								@change="refreshStockPreview"
 							>
 								<template #suffix-icon>
 									<t-button
@@ -92,9 +93,9 @@
 			<t-form-item v-if="canDirectVerify" label="直接核销履约" content-align="right">
 				<t-switch v-model="directVerify" size="small" :disabled="isSaving || isStockChecking" />
 			</t-form-item>
-			<t-form-item v-if="directVerify" label-width="0">
+			<t-form-item v-if="directVerify || stockPreviewList.length" label-width="0">
 				<div class="stock-tips">
-					<span class="tips red">直接核销会立即扣减实物库存</span>
+					<span v-if="directVerify" class="tips red">直接核销会立即扣减实物库存</span>
 					<product-stock-preview v-if="stockPreviewList.length" :items="stockPreviewList" />
 				</div>
 			</t-form-item>
@@ -302,9 +303,7 @@ async function fillAllQuantity(item: GaoSalesOrderItem): Promise<void> {
 		return;
 	}
 	quantityMap[item.id] = quantity;
-	if (directVerify.value) {
-		await previewDirectStock();
-	}
+	await refreshStockPreview();
 }
 
 function getFulfillmentUnitList(item: GaoSalesOrderItem): ProductSkuUnit[] {
@@ -357,7 +356,7 @@ function openUnitPicker(item: GaoSalesOrderItem): void {
 	unitPickerVisible.value = true;
 }
 
-function confirmUnitPicker(value: Array<string | number>): void {
+async function confirmUnitPicker(value: Array<string | number>): Promise<void> {
 	const skuUnitId = String(value[0] || "");
 	const item = sourceItems.value.find(sourceItem => sourceItem.id === unitPickerSourceItemId.value);
 	const selectedUnit = item ? getFulfillmentUnitList(item).find(unit => unit.id === skuUnitId) : undefined;
@@ -366,6 +365,7 @@ function confirmUnitPicker(value: Array<string | number>): void {
 		setFulfillmentUnit(item, fulfillmentUnit);
 	}
 	unitPickerVisible.value = false;
+	await refreshStockPreview();
 }
 
 function confirmTime(value: string | number): void {
@@ -386,7 +386,7 @@ function buildAttachments(): Partial<Attachment>[] {
 	}] : []);
 }
 
-async function validateDirectStock(): Promise<boolean> {
+async function validateDirectStock(showShortageMessage = true): Promise<boolean> {
 	stockPreviewList.value = [];
 	const selected = sourceItems.value.filter(item => !!item.id && quantityMap[item.id]);
 	const skuMap = new Map<string, ProductSku>();
@@ -427,7 +427,9 @@ async function validateDirectStock(): Promise<boolean> {
 		stockPreviewList.value = buildProductStockPreview(stockList, requirementList);
 		const shortageMessage = getProductStockShortageMessage(stockList, requirementList);
 		if (shortageMessage) {
-			Message.warning(`${shortageMessage}，不能直接核销履约`);
+			if (showShortageMessage) {
+				Message.warning(`${shortageMessage}，不能直接核销履约`);
+			}
 			return false;
 		}
 		return true;
@@ -438,15 +440,16 @@ async function validateDirectStock(): Promise<boolean> {
 	}
 }
 
-async function previewDirectStock(): Promise<void> {
-	if (!directVerify.value || isStockChecking.value) {
+async function previewDirectStock(force = false): Promise<void> {
+	if ((!directVerify.value && !force) || isStockChecking.value) {
 		return;
 	}
 	stockCheckToken += 1;
 	const token = stockCheckToken;
+	const showShortageMessage = directVerify.value;
 	isStockChecking.value = true;
 	try {
-		if (!await validateDirectStock() && token === stockCheckToken && directVerify.value) {
+		if (!await validateDirectStock(showShortageMessage) && token === stockCheckToken && directVerify.value) {
 			directVerify.value = false;
 		}
 	} finally {
@@ -456,6 +459,13 @@ async function previewDirectStock(): Promise<void> {
 	}
 }
 
+async function refreshStockPreview(): Promise<void> {
+	if (!directVerify.value && !stockPreviewList.value.length) {
+		return;
+	}
+	await previewDirectStock(!directVerify.value);
+}
+
 function validate(): boolean {
 	if (!order.value?.id) {
 		Message.warning("请从订单详情进入履约创建");
@@ -523,7 +533,10 @@ async function save(): Promise<void> {
 			attachmentList: buildAttachments(),
 			remark: remark.value.trim() || null
 		};
-		if (directVerify.value && !await validateDirectStock()) return;
+		if (directVerify.value && !await validateDirectStock(true)) {
+			directVerify.value = false;
+			return;
+		}
 		const result = directVerify.value
 			? await FulfillmentAPI.createAndVerify(request)
 			: await FulfillmentAPI.create(request);