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>
|
||||
Reference in New Issue
Block a user