timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix OrderFulfillmentCreate.vue style

Browse Source
This commit is contained in:
Timi
2026-09-05 12:12:26 +08:00
parent 184fa5be83
commit eb8f4778a5
4 changed files with 225 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/fulfillment/OrderFulfillmentCreate.vue
+214 -33
View File
@@ -5,18 +5,67 @@
<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>
<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"
@@ -26,6 +75,8 @@
required
title="履约凭证照片"
/>
</t-form-item>
</t-form>
<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>
src/types/Package.ts
+1
View File
@@ -36,6 +36,7 @@ export type CustomerPackageItem = {
customerPackageId?: string;
productId?: string;
productUnitId?: string;
attachmentList?: Attachment[];
productNameSnapshot?: string;
unitSnapshot?: string;
baseQuantityPerUnitSnapshot?: number | string;
src/types/SalesOrder.ts
+1
View File
@@ -14,6 +14,7 @@ export type SalesOrderItem = {
salesOrderId?: string;
productId?: string;
productUnitId?: string;
attachmentList?: Attachment[];
productNameSnapshot?: string;
unitSnapshot?: string;
baseQuantityPerUnitSnapshot?: number | string;
src/utils/product.ts
+1 -1
View File
@@ -78,7 +78,7 @@ export function getStockOperationText(type?: StockOperationType): string {
} as Record<string, string>)[type || ""] || "未知操作";
}
export function getProductPhotoURL(item: Product): string {
export function getProductPhotoURL(item: Pick<Product, "attachmentList">): string {
const attachment = item.attachmentList?.find(item => item.attachType === "PHOTO" && !!item.id);
return attachment?.id ? getAttachmentReadURL(attachment.id, 128) : "";
}