add product
This commit is contained in:
Timi
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<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="履约类型" :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="提交人" :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">
|
||||
<t-cell
|
||||
v-for="item in fulfillment.itemList || []"
|
||||
:key="item.id"
|
||||
:title="`${item.productNameSnapshot || '未命名产品'} · ${item.unitSnapshot || ''}`"
|
||||
:description="`本次 ${item.quantity || 0} · 基础单位 ${item.baseQuantity || 0}`"
|
||||
:note="`待履约 ${item.reservedBefore || 0} → ${item.reservedAfter || 0}`"
|
||||
/>
|
||||
<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>
|
||||
</template>
|
||||
<t-empty v-else :description="loading ? '正在加载履约单' : '履约单不存在'" />
|
||||
<t-dialog
|
||||
v-model:visible="reasonVisible"
|
||||
:title="reasonAction === 'reject' ? '拒绝履约' : '撤销履约'"
|
||||
:confirm-btn="reasonAction === 'reject' ? '拒绝' : '撤销'"
|
||||
@confirm="submitReason"
|
||||
>
|
||||
<t-textarea v-model.trim="reason" borderless autosize placeholder="请输入原因" />
|
||||
</t-dialog>
|
||||
<bottom-popup
|
||||
v-model="revokeVisible"
|
||||
title="履约冲正"
|
||||
height="min(55vh, 32rem)"
|
||||
left-button-text="取消"
|
||||
right-button-text="提交"
|
||||
@left-button-click="revokeVisible = false"
|
||||
@right-button-click="submitRevoke"
|
||||
>
|
||||
<t-form label-align="top">
|
||||
<t-form-item label="冲正原因" required-mark><t-textarea v-model.trim="revokeReason" borderless autosize /></t-form-item>
|
||||
<t-form-item label="库存是否退回门店"><t-switch v-model="returnedToStore" /></t-form-item>
|
||||
</t-form>
|
||||
<package-photo-field v-model="photoItems" required title="冲正凭证照片" />
|
||||
</bottom-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { BottomPopup } from "timi-tdesign-mobile";
|
||||
import { Time } from "timi-web";
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import FulfillmentAPI from "@/api/FulfillmentAPI";
|
||||
import PackagePhotoField from "@/components/PackagePhotoField.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
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 { getErrorMessage } from "@/utils/error";
|
||||
import { getFulfillmentStatusText, getFulfillmentTypeText, getStatusTheme } from "@/utils/salesOrder";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
type ReasonAction = "reject" | "cancel";
|
||||
defineOptions({ name: "OrderFulfillmentDetail" });
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const fulfillment = ref<OrderFulfillment>();
|
||||
const loading = ref(false);
|
||||
const operating = ref(false);
|
||||
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 isWaitingStock = computed(() => fulfillment.value?.status === "WAITING_STOCK");
|
||||
const isPending = computed(() => fulfillment.value?.status === "PENDING");
|
||||
const isVerified = computed(() => fulfillment.value?.status === "VERIFIED");
|
||||
const canVerify = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.verify));
|
||||
const canCreate = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.create));
|
||||
const canRevoke = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.revoke));
|
||||
async function loadData(): Promise<void> {
|
||||
const id = String(route.params.id || "");
|
||||
if (!id) return;
|
||||
loading.value = true;
|
||||
try { fulfillment.value = await FulfillmentAPI.detail(id); }
|
||||
catch (error) { Message.error(getErrorMessage(error, "履约单加载失败")); }
|
||||
finally { loading.value = false; }
|
||||
}
|
||||
async function toOrder(): Promise<void> {
|
||||
if (fulfillment.value?.salesOrderId) await router.push(`/management/sales-orders/${fulfillment.value.salesOrderId}`);
|
||||
}
|
||||
async function prepareStock(): Promise<void> {
|
||||
if (!fulfillment.value?.id || operating.value) return;
|
||||
operating.value = true;
|
||||
try {
|
||||
await FulfillmentAPI.prepareStock({ fulfillmentId: fulfillment.value.id });
|
||||
Message.success("库存准备已提交");
|
||||
await loadData();
|
||||
} catch (error) { Message.error(getErrorMessage(error, "库存准备失败")); }
|
||||
finally { operating.value = false; }
|
||||
}
|
||||
async function verify(): Promise<void> {
|
||||
if (!fulfillment.value?.id || operating.value) return;
|
||||
operating.value = true;
|
||||
try {
|
||||
await FulfillmentAPI.verify({ fulfillmentId: fulfillment.value.id, reason: "" });
|
||||
Message.success("履约已核销");
|
||||
await loadData();
|
||||
} catch (error) { Message.error(getErrorMessage(error, "履约核销失败")); }
|
||||
finally { operating.value = false; }
|
||||
}
|
||||
function openReason(action: ReasonAction): void { reasonAction.value = action; reason.value = ""; reasonVisible.value = true; }
|
||||
async function submitReason(): Promise<void> {
|
||||
if (!fulfillment.value?.id || !reason.value || operating.value) return;
|
||||
operating.value = true;
|
||||
try {
|
||||
const payload = { fulfillmentId: fulfillment.value.id, reason: reason.value.trim() };
|
||||
if (reasonAction.value === "reject") await FulfillmentAPI.reject(payload);
|
||||
else await FulfillmentAPI.cancel(payload);
|
||||
reasonVisible.value = false;
|
||||
Message.success(reasonAction.value === "reject" ? "履约已拒绝" : "履约已撤销");
|
||||
await loadData();
|
||||
} 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 {
|
||||
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>
|
||||
|
||||
<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; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user