From 71ae7e8f18089203a374851c197e3d611a3fcfad Mon Sep 17 00:00:00 2001 From: ouyangxq <775153912@qq.com> Date: Mon, 14 Sep 2026 10:02:37 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../cross-border/businessOrders.test.mjs | 13 ++++++ .../components/BusinessOrdersView.vue | 42 +++++++++++++++++-- 2 files changed, 52 insertions(+), 3 deletions(-) diff --git a/src/modules/cross-border/businessOrders.test.mjs b/src/modules/cross-border/businessOrders.test.mjs index 0c0a0ed..7a9b649 100644 --- a/src/modules/cross-border/businessOrders.test.mjs +++ b/src/modules/cross-border/businessOrders.test.mjs @@ -36,4 +36,17 @@ test('covers list detail create loading error empty pagination and actions-first assert.match(view, /empty-text="暂无订单"/) assert.match(view, /]*fixed="left"/) + assert.match(view, /PENDING_OUTBOUND: '待出库'/) + assert.match(view, /PARTIALLY_OUTBOUND: '部分出库'/) + assert.match(view, /OUTBOUNDED: '全部出库'/) + assert.match(view, /\['入库量', read\(summary, 'inboundQuantity'\)\]/) + assert.match(view, /\['审核备注', current\.reviewRemark\]/) +}) + +test('keeps procurement filters, details and forms readable at PDA width', () => { + assert.match(view, /@media \(max-width: 767px\)/) + assert.match(view, /\.filter-card :deep\(\.el-form\) \{ display: grid; grid-template-columns: 1fr; \}/) + assert.match(view, /\.detail-grid \{ grid-template-columns: 1fr; \}/) + assert.match(view, /\.form-card :deep\(\.el-form-item\) \{ display: block; \}/) + assert.match(view, /\.budget-form-item :deep\(\.el-form-item__content\) \{ display: flex; flex-wrap: nowrap; \}/) }) diff --git a/src/modules/cross-border/components/BusinessOrdersView.vue b/src/modules/cross-border/components/BusinessOrdersView.vue index a2c6e77..e7e23ce 100644 --- a/src/modules/cross-border/components/BusinessOrdersView.vue +++ b/src/modules/cross-border/components/BusinessOrdersView.vue @@ -61,6 +61,9 @@ const configuration = computed(() => ({ { key: 'productSpecification', label: '商品规格', width: 160 }, { key: 'purchaseQuantity', label: '采购数量', width: 100 }, { key: 'budgetUnitPrice', label: '预算单价', width: 110 }, + { key: 'inboundQuantity', label: '入库量', width: 90 }, + { key: 'outboundQuantity', label: '出库量', width: 90 }, + { key: 'inventoryQuantity', label: '库存量', width: 90 }, { key: 'status', label: '状态', width: 120 }, { key: 'createdAt', label: '创建时间', width: 170 }, ] satisfies ColumnDefinition[], @@ -125,11 +128,13 @@ const detailFields = computed(() => { ['订单号', summary.orderNo], ['采购品类', read(summary, 'purchaseCategory')], ['商品名称', read(summary, 'productName')], ['商品规格', read(summary, 'productSpecification')], ['采购数量', read(summary, 'purchaseQuantity')], ['预算单价', money(read(summary, 'budgetUnitPrice'), read(summary, 'currency'))], + ['入库量', read(summary, 'inboundQuantity')], ['出库量', read(summary, 'outboundQuantity')], + ['库存量', read(summary, 'inventoryQuantity')], ['预计到达时间', dateTime(current.estimatedArrivalAt)], ['联系人', current.contactName], ['联系电话', current.contactPhone], ['收货地址', current.receivingAddress], ['商品链接', current.productUrl], ['国内运单', joinText(current.domesticCarrier, current.domesticTrackingNo)], ['海外运单', joinText(current.overseasCarrier, current.overseasTrackingNo)], - ['状态', statusLabel(summary.status)], ['备注', current.remark], + ['状态', statusLabel(summary.status)], ['审核备注', current.reviewRemark], ['备注', current.remark], ] } const current = detail.value as TransportDetail @@ -166,7 +171,7 @@ function yesNo(value: unknown) { return value === 'YES' ? '是' : value === 'NO' function transportTypeLabel(value: unknown) { return ({ PORT_PICKUP: '港口提柜', WAREHOUSE_TO_WAREHOUSE: '仓到仓', WAREHOUSE_TO_DOOR: '仓到门' } as Record)[String(value)] || text(value) } function transportModeLabel(value: unknown) { return ({ SHARED_TRUCK: '拼车', PRIORITY_CONSOLIDATION: '优先拼载' } as Record)[String(value)] || text(value) } function statusLabel(value: unknown) { - return ({ PENDING_REVIEW: '待审核', APPROVED: '已通过', REJECTED: '已拒绝', PENDING_ACCEPTANCE: '待接单', PROCESSING: '处理中', IN_TRANSIT: '运输中', COMPLETED: '已完成', CANCELLED: '已取消' } as Record)[String(value)] || text(value) + return ({ PENDING_REVIEW: '待审核', APPROVED: '已通过', REJECTED: '已拒绝', PENDING_OUTBOUND: '待出库', PARTIALLY_OUTBOUND: '部分出库', OUTBOUNDED: '全部出库', PENDING_ACCEPTANCE: '待接单', PROCESSING: '处理中', IN_TRANSIT: '运输中', COMPLETED: '已完成', CANCELLED: '已取消' } as Record)[String(value)] || text(value) } function displayCell(candidate: unknown, key: string) { const row = candidate as BusinessRow @@ -330,7 +335,7 @@ onMounted(() => void load()) - + @@ -355,4 +360,35 @@ onMounted(() => void load()) .form-card :deep(.el-form) { max-width: 860px; } .form-card :deep(.el-input), .form-card :deep(.el-textarea), .form-card :deep(.el-select) { width: 100%; } .form-card .currency { width: 110px; margin-left: 12px; } + +@media (max-width: 767px) { + .business-orders { gap: 14px; } + .page-head { align-items: flex-start; gap: 12px; } + .page-head h2 { font-size: 24px; } + .page-head > div { min-width: 0; } + + .filter-card :deep(.el-form) { display: grid; grid-template-columns: 1fr; } + .filter-card :deep(.el-form-item) { width: 100%; margin-right: 0; margin-bottom: 12px; } + .filter-card :deep(.el-form-item:last-child) { margin-bottom: 0; } + .filter-card :deep(.el-form-item__content), + .filter-card :deep(.el-input) { width: 100%; } + + .detail-grid { grid-template-columns: 1fr; } + .detail-grid div { padding: 14px 16px; border-right: 0; } + .detail-grid dd { overflow-wrap: break-word; word-break: normal; } + + .form-card :deep(.el-form-item) { display: block; } + .form-card :deep(.el-form-item__label) { + width: auto !important; + height: auto; + margin-bottom: 7px; + line-height: 1.4; + justify-content: flex-start; + } + .form-card :deep(.el-form-item__content) { width: 100%; margin-left: 0 !important; } + .form-card :deep(.el-input-number) { width: 100%; } + .form-card .budget-form-item :deep(.el-form-item__content) { display: flex; flex-wrap: nowrap; } + .form-card .budget-form-item :deep(.el-input-number) { width: auto; min-width: 0; flex: 1 1 auto; } + .form-card .currency { width: 96px; flex: 0 0 96px; margin-left: 8px; } +}