add product
This commit is contained in:
Timi
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.orderFulfillment.create" class="fulfillment-create">
|
||||
<t-cell-group title="履约来源" theme="card">
|
||||
<t-cell title="销售订单" :note="order?.orderNo || order?.id || '请选择直接产品订单'" arrow @click="openOrderPicker" />
|
||||
<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-cell v-for="item in sourceItems" :key="item.id" class="item">
|
||||
<template #title><strong v-text="getItemTitle(item)" /></template>
|
||||
<template #description><span v-text="getItemDescription(item)" /></template>
|
||||
<template #note><t-input v-model.trim="quantityMap[item.id || '']" class="quantity" type="number" borderless align="right" placeholder="数量" /></template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<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="备注"><t-textarea v-model.trim="remark" borderless autosize maxlength="500" /></t-form-item>
|
||||
</t-form>
|
||||
<package-photo-field v-if="order" v-model="photoItems" required title="履约凭证照片" />
|
||||
<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>
|
||||
<t-popup v-model="orderPickerVisible" placement="bottom" :style="{height: '75vh'}">
|
||||
<div class="order-picker">
|
||||
<div class="picker-title" v-text="'选择进行中的直接产品订单'" />
|
||||
<t-cell-group v-if="orderOptions.length" theme="card">
|
||||
<t-cell
|
||||
v-for="item in orderOptions"
|
||||
:key="item.id"
|
||||
:title="item.orderNo || item.id"
|
||||
:description="item.customer?.name || item.customerId || '未知客户'"
|
||||
:note="formatPackageAmount(item.saleAmount)"
|
||||
arrow
|
||||
@click="selectOrder(item)"
|
||||
/>
|
||||
</t-cell-group>
|
||||
<div v-else class="empty" v-text="orderLoading ? '正在加载订单' : '暂无可履约的直接产品订单'" />
|
||||
</div>
|
||||
</t-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import PackageAPI from "@/api/PackageAPI";
|
||||
import SalesOrderAPI from "@/api/SalesOrderAPI";
|
||||
import FulfillmentAPI from "@/api/FulfillmentAPI";
|
||||
import PackagePhotoField from "@/components/PackagePhotoField.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { CustomerPackageItem, GaoCustomerPackage } from "@/types/Package";
|
||||
import type { OrderFulfillmentItemRequest } from "@/types/Fulfillment";
|
||||
import type { SalesOrder, SalesOrderItem } from "@/types/SalesOrder";
|
||||
import type { PhotoItem } from "@/types/Photo";
|
||||
import type { Attachment } from "timi-web-api";
|
||||
import { createPackageRequestNo, formatPackageAmount, getPackageQuantityText, normalizePackageQuantity } from "@/utils/package";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
type SourceItem = SalesOrderItem | CustomerPackageItem;
|
||||
defineOptions({ name: "OrderFulfillmentCreate" });
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const order = ref<SalesOrder>();
|
||||
const customerPackage = ref<GaoCustomerPackage>();
|
||||
const quantityMap = reactive<Record<string, string>>({});
|
||||
const deliveredAtText = ref("");
|
||||
const draftTime = ref("");
|
||||
const pickerVisible = ref(false);
|
||||
const remark = ref("");
|
||||
const requestNo = ref("");
|
||||
const isSaving = ref(false);
|
||||
const photoItems = ref<PhotoItem[]>([]);
|
||||
const orderPickerVisible = ref(false);
|
||||
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 || "");
|
||||
if (!salesOrderId) return;
|
||||
try {
|
||||
order.value = await SalesOrderAPI.detail(salesOrderId);
|
||||
if (customerPackageId) customerPackage.value = await PackageAPI.customerPackageDetail(customerPackageId);
|
||||
} catch (error) { Message.error(getErrorMessage(error, "履约来源加载失败")); }
|
||||
}
|
||||
function getItemTitle(item: SourceItem): string { return `${item.productNameSnapshot || "未命名产品"} · ${item.unitSnapshot || "未设置单位"}`; }
|
||||
function getItemDescription(item: SourceItem): string {
|
||||
return isPackage.value
|
||||
? `可履约 ${getPackageQuantityText((item as CustomerPackageItem).availableQuantity)}`
|
||||
: `待履约 ${getPackageQuantityText((item as SalesOrderItem).reservedQuantity)}`;
|
||||
}
|
||||
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" }] : []);
|
||||
}
|
||||
function validate(): boolean {
|
||||
if (!order.value?.id) { 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; }
|
||||
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();
|
||||
isSaving.value = true;
|
||||
try {
|
||||
const itemList: OrderFulfillmentItemRequest[] = sourceItems.value
|
||||
.filter(item => !!item.id && quantityMap[item.id])
|
||||
.map(item => ({
|
||||
...(isPackage.value ? { sourceCustomerPackageItemId: item.id } : { sourceOrderItemId: item.id }),
|
||||
quantity: normalizePackageQuantity(quantityMap[item.id || ""])!
|
||||
}));
|
||||
const result = await FulfillmentAPI.create({
|
||||
salesOrderId: order.value!.id!,
|
||||
requestNo: requestNo.value,
|
||||
deliveredAt: resolveTimestamp(deliveredAtText.value),
|
||||
itemList,
|
||||
attachmentList: buildAttachments(),
|
||||
remark: remark.value.trim() || null
|
||||
});
|
||||
Message.success("履约单已提交"); 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}`);
|
||||
return;
|
||||
}
|
||||
orderPickerVisible.value = true;
|
||||
if (orderOptions.value.length) return;
|
||||
orderLoading.value = true;
|
||||
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, "可履约订单加载失败")); }
|
||||
finally { orderLoading.value = false; }
|
||||
}
|
||||
async function selectOrder(item: SalesOrder): Promise<void> {
|
||||
if (!item.id) return;
|
||||
order.value = item;
|
||||
orderPickerVisible.value = false;
|
||||
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(); });
|
||||
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;
|
||||
.item .quantity { width: 7rem; }
|
||||
.form { padding: 0 1rem; }
|
||||
.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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.orderFulfillment.read" class="fulfillment-list">
|
||||
<div class="filters">
|
||||
<t-dropdown-menu>
|
||||
<t-dropdown-item v-model="type" label="履约类型" :options="typeOptions" @change="selectType" />
|
||||
<t-dropdown-item v-model="status" label="履约状态" :options="statusOptions" @change="selectStatus" />
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh v-model="refreshing" :refresh-timeout="30000" @refresh="refresh" @scrolltolower="loadMore">
|
||||
<t-cell-group v-if="list.length" theme="card">
|
||||
<t-cell v-for="(item, index) in list" :key="item.id" arrow hover v-entrance-transition="index * 30" @click="toDetail(item)">
|
||||
<template #title>
|
||||
<div class="title">
|
||||
<strong v-text="item.id || '履约单'" />
|
||||
<t-tag :content="getFulfillmentStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
|
||||
</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="description">
|
||||
<span v-text="getFulfillmentTypeText(item.fulfillmentType)" />
|
||||
<span v-text="`订单：${item.salesOrderId || '未知'}`" />
|
||||
<span v-text="`${(item.itemList || []).length} 项`" />
|
||||
</div>
|
||||
</template>
|
||||
<template #note><span v-text="item.deliveredAt ? Time.toDateTime(item.deliveredAt) : '时间未知'" /></template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<div v-else class="empty" v-text="loading ? '正在加载履约单' : '暂无履约单'" />
|
||||
<div class="center-tips" v-text="loading ? '正在加载' : noMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</t-pull-down-refresh>
|
||||
</div>
|
||||
<nav-bar-action-menu v-if="canCreate" :actions="actions" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type DropdownValue } from "tdesign-mobile-vue";
|
||||
import { Time } from "timi-web";
|
||||
import { useUserStore } from "timi-web-api";
|
||||
import FulfillmentAPI from "@/api/FulfillmentAPI";
|
||||
import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { FulfillmentStatus, FulfillmentType, OrderFulfillment } from "@/types/Fulfillment";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { getFulfillmentStatusText, getFulfillmentTypeText, getStatusTheme } from "@/utils/salesOrder";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({ name: "OrderFulfillmentList" });
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const canCreate = computed(() => userStore.hasPermissions(permissionCodes.orderFulfillment.create));
|
||||
const actions = computed(() => canCreate.value ? [{ key: "create", text: "创建履约单", icon: "add", theme: "primary" as const, action: toCreate }] : []);
|
||||
const type = ref("ALL");
|
||||
const status = ref(String(route.query.status || "ALL"));
|
||||
const list = ref<OrderFulfillment[]>([]);
|
||||
const pageIndex = ref(0);
|
||||
const total = ref(0);
|
||||
const loading = ref(false);
|
||||
const refreshing = ref(false);
|
||||
const noMore = ref(false);
|
||||
const pageSize = 15;
|
||||
const typeOptions = [{ label: "全部类型", value: "ALL" }, { label: "套餐权益", value: "PACKAGE_ENTITLEMENT" }, { label: "直接产品", value: "DIRECT_PRODUCT" }];
|
||||
const statusOptions = [
|
||||
{ label: "全部状态", value: "ALL" },
|
||||
{ label: "等待库存", value: "WAITING_STOCK" },
|
||||
{ label: "待核销", value: "PENDING" },
|
||||
{ label: "已核销", value: "VERIFIED" },
|
||||
{ label: "已拒绝", value: "REJECTED" },
|
||||
{ label: "已撤销", value: "CANCELLED" },
|
||||
{ label: "已冲正", value: "REVOKED" }
|
||||
];
|
||||
async function fetchList(reset: boolean): Promise<void> {
|
||||
if (loading.value || (!reset && noMore.value)) return;
|
||||
if (reset) { pageIndex.value = 0; total.value = 0; noMore.value = false; list.value = []; }
|
||||
loading.value = true;
|
||||
try {
|
||||
const result = await FulfillmentAPI.list({
|
||||
index: pageIndex.value,
|
||||
size: pageSize,
|
||||
salesOrderId: String(route.query.salesOrderId || "") || undefined,
|
||||
fulfillmentType: type.value === "ALL" ? undefined : type.value as FulfillmentType,
|
||||
status: status.value === "ALL" ? undefined : status.value as FulfillmentStatus
|
||||
});
|
||||
const rows = result.list || [];
|
||||
list.value = reset ? rows : list.value.concat(rows);
|
||||
total.value = result.total || 0;
|
||||
pageIndex.value += 1;
|
||||
noMore.value = rows.length < pageSize || total.value <= list.value.length;
|
||||
} finally { loading.value = false; }
|
||||
}
|
||||
async function refresh(): Promise<void> { try { await fetchList(true); } catch (error) { Message.error(getErrorMessage(error, "履约单加载失败")); } finally { refreshing.value = false; } }
|
||||
async function loadMore(): Promise<void> { try { await fetchList(false); } catch (error) { Message.error(getErrorMessage(error, "履约单加载失败")); } }
|
||||
async function selectType(value: DropdownValue): Promise<void> { if (!Array.isArray(value)) { type.value = String(value); await fetchList(true); } }
|
||||
async function selectStatus(value: DropdownValue): Promise<void> { if (!Array.isArray(value)) { status.value = String(value); await fetchList(true); } }
|
||||
async function toDetail(item: OrderFulfillment): Promise<void> { if (item.id) await router.push(`/management/order-fulfillments/${item.id}`); }
|
||||
async function toCreate(): Promise<void> { await router.push("/management/order-fulfillments/create"); }
|
||||
onMounted(async () => { navBarStore.clearRight(); navBarStore.setCustomRightVisible(canCreate.value); try { await fetchList(true); } catch (error) { Message.error(getErrorMessage(error, "履约单加载失败")); } });
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.fulfillment-list { padding: var(--app-nav-height) 0 1rem;
|
||||
.filters { top: var(--app-nav-height); z-index: 10; padding: .75rem 1rem; position: sticky; background: #f5f5f8; box-shadow: var(--td-shadow-1); }
|
||||
.title, .description { gap: .5rem; display: flex; align-items: center; }
|
||||
.description { color: var(--td-text-color-secondary); flex-wrap: wrap; }
|
||||
.empty { color: var(--td-text-color-secondary); padding: 3rem 1rem; text-align: center; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user