409 lines
13 KiB
Vue
409 lines
13 KiB
Vue
<template>
|
|
<div v-can="permissionCodes.salesOrder.read" class="sales-order-detail">
|
|
<template v-if="order">
|
|
<customer-profile-card v-if="order.customer" class="customer" :customer="order.customer" v-entrance-transition />
|
|
<section class="hero" v-entrance-transition="35">
|
|
<div class="header">
|
|
<span class="eyebrow">销售订单</span>
|
|
<t-tag :content="getSalesOrderStatusText(order.status)" variant="light-outline" :theme="getStatusTheme(order.status)" />
|
|
</div>
|
|
<h1 class="no" v-text="order.orderNo" />
|
|
<div class="meta">
|
|
<pass-time-label class="time" :timestamp="order.purchasedAt" underline />
|
|
<div class="amount" :class="getPaymentAmountClass(order.paymentStatus)">
|
|
<span>￥</span>
|
|
<strong class="value" v-text="formatPackageAmount(order.saleAmount)" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<t-cell-group title="订单信息" class="info" theme="card" v-entrance-transition="70">
|
|
<t-cell v-if="order.sourceEventRecord?.id" title="来源登记记录" arrow @click="toEventRecord" />
|
|
<t-cell title="备注" :note="Text.display(order.remark)" />
|
|
<div class="photo-wrap bg-white">
|
|
<photo-scroller
|
|
:model-value="photoURLList"
|
|
:photo-items="photoItems"
|
|
title="订单照片"
|
|
:show-add="false"
|
|
:show-remove="false"
|
|
:show-viewer-actions="false"
|
|
v-entrance-transition="105"
|
|
/>
|
|
</div>
|
|
</t-cell-group>
|
|
<t-cell-group
|
|
v-if="order.itemList?.length"
|
|
class="product"
|
|
title="订单明细"
|
|
theme="card"
|
|
v-entrance-transition="140"
|
|
>
|
|
<t-cell
|
|
v-for="item in order.itemList"
|
|
:key="item.id"
|
|
:title="getItemTitle(item)"
|
|
>
|
|
<template #description>
|
|
<div class="description">
|
|
<span>
|
|
<span>￥</span>
|
|
<strong class="red" v-text="formatPackageAmount(item.lineAmount)" />
|
|
</span>
|
|
<span>
|
|
<span>已履约</span>
|
|
<strong :class="getFulfilledQuantityClass(item)" v-text="getPackageQuantityText(item.fulfilledQuantity)" />
|
|
</span>
|
|
<span>
|
|
<span>剩余履约</span>
|
|
<strong :class="getRemainingQuantityClass(item)" v-text="getRemainingQuantityText(item)" />
|
|
</span>
|
|
</div>
|
|
</template>
|
|
<template #note>
|
|
<t-tag
|
|
:content="getItemFulfillmentStatus(item).text"
|
|
:theme="getItemFulfillmentStatus(item).theme"
|
|
variant="light-outline"
|
|
/>
|
|
</template>
|
|
</t-cell>
|
|
<t-cell title="履约记录" note="查看本单所有履约单" arrow @click="toFulfillmentList" />
|
|
</t-cell-group>
|
|
<t-button
|
|
v-if="canCreateFulfillment && canFulfillByPayment && order.orderType === 'DIRECT_PRODUCT' && order.status === 'ACTIVE'"
|
|
class="cell-button"
|
|
theme="primary"
|
|
content="履约产品"
|
|
@click="toCreateFulfillment"
|
|
/>
|
|
<t-cell-group class="finance-panel" title="资金摘要" theme="card">
|
|
<t-cell title="成交金额">
|
|
<template #note><span :class="getPaymentAmountClass(order.paymentStatus)" v-text="formatPackageAmount(order.saleAmount)" /></template>
|
|
</t-cell>
|
|
<t-cell title="已生效收款">
|
|
<template #note><span :class="getAmountClass(order.paidAmount, 'green')" v-text="formatPackageAmount(order.paidAmount)" /></template>
|
|
</t-cell>
|
|
<t-cell title="待核销收款">
|
|
<template #note><span :class="getAmountClass(order.pendingPaidAmount, 'orange')" v-text="formatPackageAmount(order.pendingPaidAmount)" /></template>
|
|
</t-cell>
|
|
<t-cell title="剩余待收款">
|
|
<template #note><span :class="getRemainingAmountClass(order.unpaidAmount)" v-text="formatPackageAmount(order.unpaidAmount)" /></template>
|
|
</t-cell>
|
|
<t-cell title="有效退款">
|
|
<template #note><span :class="getAmountClass(order.refundedAmount, 'red')" v-text="formatPackageAmount(order.refundedAmount)" /></template>
|
|
</t-cell>
|
|
<t-cell title="收款状态" :note="getSalesPaymentStatusText(order.paymentStatus)" />
|
|
<t-cell v-if="order.paymentStatus === 'PAID'" title="全额实收时间" :note="getPaidAtText(order.paidAt)" />
|
|
<t-cell title="退款状态" :note="getSalesRefundStatusText(order.refundStatus)" />
|
|
<t-cell v-if="canReadFund" title="查看全部资金流水" arrow @click="toFundRecords" />
|
|
</t-cell-group>
|
|
<section class="actions" v-entrance-transition="280">
|
|
<t-button
|
|
v-if="canReceive"
|
|
theme="primary"
|
|
@click="toPayment"
|
|
>登记收款</t-button>
|
|
<t-button
|
|
v-if="canRefund"
|
|
theme="danger"
|
|
@click="toRefund"
|
|
>登记退款</t-button>
|
|
<t-button
|
|
v-if="canConfirmNoRefund"
|
|
theme="default"
|
|
@click="toNoRefund"
|
|
>确认无需退款</t-button>
|
|
<t-button
|
|
v-if="canCancel"
|
|
theme="danger"
|
|
@click="toCancel"
|
|
>取消订单</t-button>
|
|
</section>
|
|
</template>
|
|
<t-empty v-else :description="loading ? '正在加载订单' : '订单不存在'" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { PassTimeLabel, Text, Time } from "timi-web";
|
|
import { useUserStore } from "timi-web-api";
|
|
import SalesOrderAPI from "@/api/SalesOrderAPI";
|
|
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
|
|
import PhotoScroller from "@/components/PhotoScroller.vue";
|
|
import { useNavBarStore } from "@/store/navBarStore";
|
|
import type { SalesOrder, SalesOrderItem, SalesPaymentStatus } from "@/types/SalesOrder";
|
|
import type { PhotoItem } from "@/types/Photo";
|
|
import { formatPackageAmount, getPackageQuantityText } from "@/utils/package";
|
|
import { getAttachmentReadURL } from "@/utils/attachment";
|
|
import { getErrorMessage } from "@/utils/error";
|
|
import {
|
|
getSalesOrderStatusText,
|
|
getSalesPaymentStatusText,
|
|
getSalesRefundStatusText,
|
|
getStatusTheme
|
|
} from "@/utils/salesOrder";
|
|
import { Message } from "@/utils/message";
|
|
import { permissionCodes } from "@/utils/permission";
|
|
|
|
defineOptions({ name: "SalesOrderDetail" });
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const navBarStore = useNavBarStore();
|
|
const userStore = useUserStore();
|
|
const order = ref<SalesOrder>();
|
|
const loading = ref(false);
|
|
const canReadFund = computed(() => userStore.hasPermissions(permissionCodes.fundRecord.read));
|
|
const canCreateFulfillment = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.create));
|
|
const canOperateStock = computed(() => userStore.hasPermissions(permissionCodes.productStock.create));
|
|
const canReceive = computed(() => !!order.value && order.value.status !== "CANCELLED" && order.value.paymentStatus !== "PAID" && userStore.hasPermissions(permissionCodes.fundReceive.create));
|
|
const canRefund = computed(() => !!order.value && order.value.status === "CANCELLED" && order.value.refundStatus === "PENDING" && userStore.hasPermissions(permissionCodes.fund.refund));
|
|
const canConfirmNoRefund = computed(() => !!order.value && order.value.status === "CANCELLED" && order.value.refundStatus === "PENDING" && userStore.hasPermissions(permissionCodes.fund.refund));
|
|
const canCancel = computed(() => !!order.value && order.value.status === "ACTIVE" && userStore.hasPermissions(permissionCodes.salesOrder.cancel));
|
|
const canFulfillByPayment = computed(() => order.value?.paymentStatus === "PAID" || (order.value?.paymentStatus === "PARTIALLY_PAID" && canOperateStock.value));
|
|
const photoItems = computed<PhotoItem[]>(() => (order.value?.attachmentList || [])
|
|
.filter(item => !!item.id)
|
|
.map(item => ({
|
|
attachment: item,
|
|
attachType: item.attachType || "PHOTO",
|
|
previewUrl: getAttachmentReadURL(item.id || ""),
|
|
url: getAttachmentReadURL(item.id || "", 90)
|
|
})));
|
|
const photoURLList = computed(() => photoItems.value.map(item => item.url));
|
|
|
|
function getPaidAtText(paidAt?: number | null): string {
|
|
return paidAt ? Time.toDateTime(paidAt) : "待后端回填";
|
|
}
|
|
|
|
function getPaymentAmountClass(status?: SalesPaymentStatus): "green" | "orange" | "red" | "gray" {
|
|
if (status === "PAID") return "green";
|
|
if (status === "PARTIALLY_PAID") return "orange";
|
|
if (status === "UNPAID") return "red";
|
|
return "gray";
|
|
}
|
|
|
|
function getAmountClass(amount?: number | null, activeClass: "green" | "orange" | "red" = "green"): "green" | "orange" | "red" | "gray" {
|
|
if (amount === undefined || amount === null || amount === 0) return "gray";
|
|
return activeClass;
|
|
}
|
|
|
|
function getRemainingAmountClass(amount?: number | null): "green" | "red" | "gray" {
|
|
if (amount === undefined || amount === null) return "gray";
|
|
return amount === 0 ? "green" : "red";
|
|
}
|
|
|
|
function getItemTitle(item: SalesOrderItem): string {
|
|
const productName = item.productNameSnapshot || "未命名产品";
|
|
const quantity = getPackageQuantityText(item.quantity);
|
|
const unit = item.unitSnapshot ? ` ${item.unitSnapshot}` : "";
|
|
return `${productName} ${quantity}${unit}`;
|
|
}
|
|
|
|
function getRemainingQuantity(item: SalesOrderItem): number {
|
|
const quantity = Number(item.quantity || 0);
|
|
const fulfilledQuantity = Number(item.fulfilledQuantity || 0);
|
|
return Math.max(0, quantity - fulfilledQuantity);
|
|
}
|
|
|
|
function getRemainingQuantityText(item: SalesOrderItem): string {
|
|
return getPackageQuantityText(getRemainingQuantity(item).toFixed(3));
|
|
}
|
|
|
|
function getFulfilledQuantityClass(item: SalesOrderItem): "green" | "orange" {
|
|
const quantity = Number(item.quantity || 0);
|
|
const fulfilledQuantity = Number(item.fulfilledQuantity || 0);
|
|
return fulfilledQuantity < quantity ? "orange" : "green";
|
|
}
|
|
|
|
function getRemainingQuantityClass(item: SalesOrderItem): "green" | "orange" {
|
|
return getRemainingQuantity(item) === 0 ? "green" : "orange";
|
|
}
|
|
|
|
function getItemFulfillmentStatus(item: SalesOrderItem): { text: string; theme: "success" | "warning" | "danger" } {
|
|
const quantity = Number(item.quantity || 0);
|
|
const fulfilledQuantity = Number(item.fulfilledQuantity || 0);
|
|
if (0 < quantity && (fulfilledQuantity === quantity || quantity < fulfilledQuantity)) {
|
|
return { text: "已完成", theme: "success" };
|
|
}
|
|
if (0 < fulfilledQuantity) {
|
|
return { text: "部分履约", theme: "warning" };
|
|
}
|
|
return { text: "未履约", theme: "danger" };
|
|
}
|
|
|
|
async function loadData(): Promise<void> {
|
|
const id = String(route.params.id || "");
|
|
if (!id) return;
|
|
loading.value = true;
|
|
try {
|
|
order.value = await SalesOrderAPI.detail(id);
|
|
} catch (error) {
|
|
Message.error(getErrorMessage(error, "订单加载失败"));
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
async function toEventRecord(): Promise<void> {
|
|
if (order.value?.sourceEventRecord?.id) await router.push(`/management/registration-event-records/${order.value.sourceEventRecord.id}`);
|
|
}
|
|
|
|
async function toFundRecords(): Promise<void> {
|
|
if (order.value?.id) await router.push({
|
|
path: "/management/fund-records",
|
|
query: {
|
|
salesOrderId: order.value.id,
|
|
transitionDepth: String(getCurrentRouteDepth() + 1)
|
|
}
|
|
});
|
|
}
|
|
|
|
async function toFulfillmentList(): Promise<void> {
|
|
if (order.value?.id) await router.push({
|
|
path: "/management/order-fulfillments",
|
|
query: {
|
|
salesOrderId: order.value.id,
|
|
transitionDepth: String(getCurrentRouteDepth() + 1)
|
|
}
|
|
});
|
|
}
|
|
|
|
async function toCreateFulfillment(): Promise<void> {
|
|
if (order.value?.id) await router.push({
|
|
path: "/management/order-fulfillments/create",
|
|
query: { salesOrderId: order.value.id }
|
|
});
|
|
}
|
|
|
|
async function toPayment(): Promise<void> {
|
|
if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/payment`);
|
|
}
|
|
|
|
async function toRefund(): Promise<void> {
|
|
if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/refund`);
|
|
}
|
|
|
|
async function toNoRefund(): Promise<void> {
|
|
if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/no-refund`);
|
|
}
|
|
|
|
async function toCancel(): Promise<void> {
|
|
if (order.value?.id) await router.push(`/management/sales-orders/${order.value.id}/cancel`);
|
|
}
|
|
|
|
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(loadData);
|
|
onUnmounted(() => navBarStore.clearRight());
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.sales-order-detail {
|
|
gap: 1rem;
|
|
padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.customer {
|
|
margin: 0 1rem;
|
|
}
|
|
|
|
.hero {
|
|
margin: 0 1rem;
|
|
padding: 1rem;
|
|
background: linear-gradient(135deg, #fff7ed, #eff6ff);
|
|
box-shadow: var(--td-shadow-1);
|
|
border-radius: 1.25rem;
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.eyebrow {
|
|
color: #c2410c;
|
|
display: block;
|
|
font-weight: 700;
|
|
letter-spacing: .08em;
|
|
}
|
|
}
|
|
|
|
.no {
|
|
margin: 1rem 0;
|
|
min-width: 0;
|
|
font-size: 1.2rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.meta {
|
|
gap: .75rem;
|
|
display: flex;
|
|
margin-top: .6rem;
|
|
color: var(--td-text-color-secondary);
|
|
align-items: end;
|
|
justify-content: space-between;
|
|
|
|
.time {
|
|
font-size: .875rem;
|
|
}
|
|
|
|
.amount {
|
|
|
|
.value {
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.info {
|
|
|
|
.photo-wrap {
|
|
padding: .75rem;
|
|
}
|
|
}
|
|
|
|
.product {
|
|
|
|
.description {
|
|
gap: .75rem;
|
|
display: flex;
|
|
|
|
> span {
|
|
gap: .25rem;
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
.actions {
|
|
--td-button-border-radius: 1rem;
|
|
|
|
gap: .5rem;
|
|
padding: 0 1rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.actions .t-button {
|
|
flex: 1 1 8rem;
|
|
}
|
|
}
|
|
|
|
:global(html.theme-dark) .sales-order-detail .hero {
|
|
background: linear-gradient(135deg, rgba(194, 65, 12, .2), rgba(37, 99, 235, .18));
|
|
|
|
.eyebrow, strong {
|
|
color: #fdba74;
|
|
}
|
|
}
|
|
</style>
|