add OrderFulfillmentRevoke.vue

src/pages/fulfillment/OrderFulfillmentDetail.vue

@@ -95,7 +95,7 @@
 					v-if="isVerified && canRevoke"
 					theme="danger"
 					content="履约冲正"
-					@click="openRevoke"
+					@click="revokeVisible = true"
 				/>
 			</section>
 		</template>
@@ -110,42 +110,16 @@
 		>
 			<t-textarea v-model.trim="reason" borderless autosize placeholder="请输入原因" />
 		</t-dialog>
-		<bottom-popup
-			v-model="revokeVisible"
-			title="履约冲正"
-			left-button-text="取消"
-			right-button-text="提交"
-			@left-button-click="revokeVisible = false"
-			@right-button-click="submitRevoke"
-		>
-			<t-form class="revoke-form">
-				<t-form-item label="冲正原因" required-mark>
-					<t-textarea
-						v-model="revokeReason"
-						borderless
-						autosize
-					/>
-				</t-form-item>
-				<t-form-item label="库存退回门店" content-align="right">
-					<t-switch v-model="returnedToStore" />
-				</t-form-item>
-				<t-form-item label-width="0">
-					<media-selector
-						:model-value="photoUrlList"
-						v-model:photo-items="photoItems"
-						:upload="uploadPhotoList"
-						:edit-mode="true"
-						required
-						title="冲正凭证照片"
-					/>
-				</t-form-item>
-			</t-form>
-		</bottom-popup>
+		<order-fulfillment-revoke
+			v-if="fulfillment"
+			v-model:visible="revokeVisible"
+			:fulfillment="fulfillment"
+			@success="loadData"
+		/>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { BottomPopup } from "timi-tdesign-mobile";
 import { PassTimeLabel } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import FulfillmentAPI from "@/api/FulfillmentAPI";
@@ -154,19 +128,18 @@ import SalesOrderAPI from "@/api/SalesOrderAPI";
 import MediaSelector from "@/components/mediaSelector/MediaSelector.vue";
 import ProductSkuTags from "@/components/ProductSkuTags.vue";
 import ProductStockPreview from "@/components/ProductStockPreview.vue";
+import OrderFulfillmentRevoke from "@/pages/fulfillment/components/OrderFulfillmentRevoke.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { OrderFulfillment, OrderFulfillmentItem } from "@/types/Fulfillment";
 import type { GaoSalesOrderItemType, SalesOrder } from "@/types/SalesOrder";
 import type { PhotoItem } from "@/types/Photo";
-import type { Attachment } from "timi-web-api";
-import { addPackageQuantity, createPackageRequestNo, getPackageQuantityText } from "@/utils/package";
+import { addPackageQuantity, getPackageQuantityText } from "@/utils/package";
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { getErrorMessage } from "@/utils/error";
 import { getProductPhotoURL } from "@/utils/product";
 import { getFulfillmentStatusText, getSalesOrderItemTypeText, getStatusTheme } from "@/utils/salesOrder";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
-import { uploadPhotoList } from "@/utils/photo";
 import type { ProductStockPreviewItem } from "@/utils/productStock";
 import { buildProductStockPreview, mergeProductStockRequirements } from "@/utils/productStock";
 
@@ -184,13 +157,8 @@ const reasonVisible = ref(false);
 const reasonAction = ref<ReasonAction>("reject");
 const reason = ref("");
 const revokeVisible = ref(false);
-const revokeReason = ref("");
-const returnedToStore = ref(true);
-const revokeRequestNo = ref("");
-const photoItems = ref<PhotoItem[]>([]);
 const stockPreviewList = ref<ProductStockPreviewItem[]>([]);
 const stockPreviewLoading = ref(false);
-const photoUrlList = computed(() => photoItems.value.map(item => item.url));
 const fulfillmentPhotoItems = computed<PhotoItem[]>(() => (fulfillment.value?.attachmentList || [])
 	.filter(item => !!item.id)
 	.map(item => ({
@@ -363,29 +331,6 @@ async function submitReason(): Promise<void> {
 	} catch (error) { Message.error(getErrorMessage(error, "履约状态操作失败")); }
 	finally { operating.value = false; }
 }
-function openRevoke(): void { revokeReason.value = ""; returnedToStore.value = true; revokeRequestNo.value = ""; photoItems.value = []; revokeVisible.value = true; }
-function buildAttachments(): Partial<Attachment>[] {
-	return photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: "PHOTO" }] : []);
-}
-async function submitRevoke(): Promise<void> {
-	if (!fulfillment.value?.id || !revokeReason.value || operating.value) return;
-	if (fulfillment.value.stockRecordList?.length && !buildAttachments().length) { Message.warning("实物履约冲正必须上传退回照片"); return; }
-	if (!revokeRequestNo.value) revokeRequestNo.value = createPackageRequestNo();
-	operating.value = true;
-	try {
-		fulfillment.value = await FulfillmentAPI.revoke({
-			fulfillmentId: fulfillment.value.id,
-			requestNo: revokeRequestNo.value,
-			reason: revokeReason.value.trim(),
-			returnedToStore: returnedToStore.value,
-			attachmentList: buildAttachments()
-		});
-		revokeVisible.value = false;
-		Message.success("履约单已冲正");
-		await loadData();
-	} catch (error) { Message.error(getErrorMessage(error, "履约冲正失败，重试会复用同一请求号")); }
-	finally { operating.value = false; }
-}
 onMounted(loadData);
 onUnmounted(() => navBarStore.clearRight());
 </script>
@@ -467,7 +412,4 @@ onUnmounted(() => navBarStore.clearRight());
 	}
 }
 
-.revoke-form {
-	margin: 0;
-}
 </style>