fix OrderFulfillmentCreate.vue style
This commit is contained in:
Timi
@@ -5,27 +5,78 @@
|
||||
<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>
|
||||
<t-form v-if="sourceItems.length" class="items form">
|
||||
<t-form-item v-for="item in sourceItems" :key="item.id" class="item" label-width="0">
|
||||
<div class="content">
|
||||
<div class="photo">
|
||||
<t-image
|
||||
v-if="getProductPhotoURL(item)"
|
||||
:src="getProductPhotoURL(item)"
|
||||
:alt="item.productNameSnapshot || '产品图片'"
|
||||
fit="cover"
|
||||
class="avatar"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="avatar fallback"
|
||||
v-text="(item.productNameSnapshot || '产').slice(0, 1)"
|
||||
/>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="title">
|
||||
<strong v-text="item.productNameSnapshot" />
|
||||
<span v-text="getItemDescription(item)" />
|
||||
</div>
|
||||
<div class="input">
|
||||
<t-input
|
||||
v-model.trim="quantityMap[item.id || '']"
|
||||
class="quantity"
|
||||
type="number"
|
||||
borderless
|
||||
align="right"
|
||||
placeholder="请输入履约数量"
|
||||
>
|
||||
<template #suffix-icon>
|
||||
<span class="unit" v-text="item.unitSnapshot" />
|
||||
</template>
|
||||
</t-input>
|
||||
<t-button
|
||||
size="extra-small"
|
||||
variant="outline"
|
||||
:disabled="getAvailableQuantity(item) === '0'"
|
||||
@click.stop="fillAllQuantity(item)"
|
||||
>全部履约</t-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
<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-item label="履约时间" content-align="right">
|
||||
<t-button
|
||||
theme="primary"
|
||||
variant="outline"
|
||||
size="extra-small"
|
||||
:content="deliveredAtText || '此刻'"
|
||||
@click="pickerVisible = true"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label="备注">
|
||||
<t-textarea v-model="remark" borderless autosize maxlength="500" />
|
||||
</t-form-item>
|
||||
<t-form-item label-width="0">
|
||||
<photo-scroller
|
||||
v-if="order"
|
||||
:model-value="photoUrlList"
|
||||
v-model:photo-items="photoItems"
|
||||
:upload="uploadPhotoList"
|
||||
:edit-mode="true"
|
||||
required
|
||||
title="履约凭证照片"
|
||||
/>
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
<photo-scroller
|
||||
v-if="order"
|
||||
:model-value="photoUrlList"
|
||||
v-model:photo-items="photoItems"
|
||||
:upload="uploadPhotoList"
|
||||
:edit-mode="true"
|
||||
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>
|
||||
@@ -65,6 +116,7 @@ import { getErrorMessage } from "@/utils/error";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
import { uploadPhotoList } from "@/utils/photo";
|
||||
import { getProductPhotoURL } from "@/utils/product";
|
||||
|
||||
type SourceItem = SalesOrderItem | CustomerPackageItem;
|
||||
defineOptions({ name: "OrderFulfillmentCreate" });
|
||||
@@ -87,6 +139,7 @@ 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 || "");
|
||||
@@ -94,34 +147,71 @@ async function loadData(): Promise<void> {
|
||||
try {
|
||||
order.value = await SalesOrderAPI.detail(salesOrderId);
|
||||
if (customerPackageId) customerPackage.value = await PackageAPI.customerPackageDetail(customerPackageId);
|
||||
} catch (error) { Message.error(getErrorMessage(error, "履约来源加载失败")); }
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "履约来源加载失败"));
|
||||
}
|
||||
}
|
||||
function getItemTitle(item: SourceItem): string { return `${item.productNameSnapshot || "未命名产品"} · ${item.unitSnapshot || "未设置单位"}`; }
|
||||
function getItemDescription(item: SourceItem): string {
|
||||
|
||||
function getAvailableQuantity(item: SourceItem): string {
|
||||
if (isPackage.value) {
|
||||
return `本次可履约 ${getPackageQuantityText((item as CustomerPackageItem).availableQuantity)}`;
|
||||
return getPackageQuantityText((item as CustomerPackageItem).availableQuantity);
|
||||
}
|
||||
const orderItem = item as SalesOrderItem;
|
||||
const availableQuantity = Math.max(0, Number(orderItem.quantity || 0) - Number(orderItem.reservedQuantity || 0) - Number(orderItem.fulfilledQuantity || 0));
|
||||
return `本次可履约 ${getPackageQuantityText(availableQuantity.toFixed(3))}`;
|
||||
return getPackageQuantityText(availableQuantity.toFixed(3));
|
||||
}
|
||||
function confirmTime(value: string | number): void { deliveredAtText.value = String(value); pickerVisible.value = false; }
|
||||
|
||||
function getItemDescription(item: SourceItem): string {
|
||||
return ` · 剩余 ${getAvailableQuantity(item)}`;
|
||||
}
|
||||
|
||||
function fillAllQuantity(item: SourceItem): void {
|
||||
if (item.id) {
|
||||
quantityMap[item.id] = getAvailableQuantity(item);
|
||||
}
|
||||
}
|
||||
|
||||
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" }] : []);
|
||||
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; }
|
||||
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; } }
|
||||
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();
|
||||
@@ -141,12 +231,21 @@ async function save(): Promise<void> {
|
||||
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; }
|
||||
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}`);
|
||||
await router.push({
|
||||
path: `/management/sales-orders/${order.value.id}`,
|
||||
query: { transitionDepth: String(getCurrentRouteDepth() + 1) }
|
||||
});
|
||||
return;
|
||||
}
|
||||
orderPickerVisible.value = true;
|
||||
@@ -155,9 +254,13 @@ async function openOrderPicker(): Promise<void> {
|
||||
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; }
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "可履约订单加载失败"));
|
||||
} finally {
|
||||
orderLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function selectOrder(item: SalesOrder): Promise<void> {
|
||||
if (!item.id) return;
|
||||
order.value = item;
|
||||
@@ -165,16 +268,94 @@ async function selectOrder(item: SalesOrder): Promise<void> {
|
||||
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(); });
|
||||
|
||||
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(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; }
|
||||
.fulfillment-create {
|
||||
gap: 1rem;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.items {
|
||||
margin: 0 1rem;
|
||||
background: var(--td-bg-color-container);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
|
||||
.item {
|
||||
padding: 10px;
|
||||
|
||||
.content {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
|
||||
.photo {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
|
||||
.avatar {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
|
||||
}
|
||||
|
||||
.input {
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
|
||||
.unit {
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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