From 36278517dd0e2a39a3c0a34cef24035d03b0403f Mon Sep 17 00:00:00 2001
From: ouyangxq <775153912@qq.com>
Date: Mon, 7 Sep 2026 19:59:34 +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

---
 .../layoutAcceptance.test.ts                  |  5 +++++
 .../pages/LastMileOrderDetailView.vue         | 21 ++++++++++++-------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/modules/overseas-warehouse/layoutAcceptance.test.ts b/src/modules/overseas-warehouse/layoutAcceptance.test.ts
index 60363d97..7909dd20 100644
--- a/src/modules/overseas-warehouse/layoutAcceptance.test.ts
+++ b/src/modules/overseas-warehouse/layoutAcceptance.test.ts
@@ -65,5 +65,10 @@ describe('overseas warehouse 1920px layout acceptance', () => {
     expect(page('PalletsView.vue')).toContain('.el-form :deep(.el-input-number) { width: 100%; }')
     expect(page('RelabelOrdersView.vue')).toContain('.el-form :deep(.el-row) { margin-left: 0 !important; margin-right: 0 !important; }')
     expect(page('PalletsView.vue')).toContain('.el-form :deep(.el-row) { margin-left: 0 !important; margin-right: 0 !important; }')
+    const lastMileDetail = page('LastMileOrderDetailView.vue')
+    expect(lastMileDetail).toContain('class="fee-form-grid"')
+    expect(lastMileDetail).toContain('filterable allow-create clearable default-first-option')
+    expect(lastMileDetail).toContain('.fee-form { min-width: 0; overflow-x: hidden; }')
+    expect(lastMileDetail).toContain('.fee-form :deep(.el-select), .fee-form :deep(.el-input-number) { width: 100%; }')
   })
 })
diff --git a/src/modules/overseas-warehouse/pages/LastMileOrderDetailView.vue b/src/modules/overseas-warehouse/pages/LastMileOrderDetailView.vue
index 4c061148..a388767f 100644
--- a/src/modules/overseas-warehouse/pages/LastMileOrderDetailView.vue
+++ b/src/modules/overseas-warehouse/pages/LastMileOrderDetailView.vue
@@ -34,6 +34,7 @@ const mutationError = ref<ApiErrorDetails | null>(null)
 const activeTab = ref('basic')
 const feeDialogOpen = ref(false)
 const feeForm = reactive({ item: '', currency: 'USD', amount: 0, status: 'PENDING_REVIEW', description: '' })
+const feeItemOptions = ['仓储费', '入库操作费', '出库操作费', '换标费', '托盘费', '派送费', '转仓费', '异常处理费', '其他']
 
 function text(value: unknown) { return String(value ?? '').trim() || '—' }
 function yesNo(value: boolean | null | undefined) { return value == null ? '—' : value ? '是' : '否' }
@@ -172,13 +173,13 @@ onMounted(load)
       </el-tabs>
     </section>
     <AppDialog v-model="feeDialogOpen" title="新增费用" width="min(720px, calc(100vw - 28px))" confirm-text="保存费用" :confirm-loading="saving" @confirm="saveFee">
-      <el-form label-position="top"><el-row :gutter="20">
-        <el-col :span="12"><el-form-item label="费用项目" required><el-input v-model="feeForm.item" maxlength="128" placeholder="如 派送费" /></el-form-item></el-col>
-        <el-col :span="12"><el-form-item label="供应商/说明"><el-input v-model="feeForm.description" maxlength="500" placeholder="请输入供应商或费用说明" /></el-form-item></el-col>
-        <el-col :span="12"><el-form-item label="币种" required><el-select v-model="feeForm.currency"><el-option v-for="currency in ['USD', 'CNY', 'EUR', 'GBP', 'CAD', 'MXN']" :key="currency" :label="currency" :value="currency" /></el-select></el-form-item></el-col>
-        <el-col :span="12"><el-form-item label="金额" required><el-input-number v-model="feeForm.amount" :min="0" :precision="2" :step="10" controls-position="right" placeholder="请输入费用金额" /></el-form-item></el-col>
-        <el-col :span="24"><el-form-item label="状态" required><el-select v-model="feeForm.status"><el-option label="待审核" value="PENDING_REVIEW" /><el-option label="审核通过" value="APPROVED" /><el-option label="已驳回" value="REJECTED" /></el-select></el-form-item></el-col>
-      </el-row></el-form>
+      <el-form class="fee-form" label-position="top"><div class="fee-form-grid">
+        <el-form-item label="费用项目" required><el-select v-model="feeForm.item" filterable allow-create clearable default-first-option placeholder="选择或输入费用项目"><el-option v-for="item in feeItemOptions" :key="item" :label="item" :value="item" /></el-select></el-form-item>
+        <el-form-item label="供应商/说明"><el-input v-model="feeForm.description" maxlength="500" placeholder="请输入供应商或费用说明" /></el-form-item>
+        <el-form-item label="币种" required><el-select v-model="feeForm.currency" placeholder="请选择币种"><el-option v-for="currency in ['USD', 'CNY', 'EUR', 'GBP', 'CAD', 'MXN']" :key="currency" :label="currency" :value="currency" /></el-select></el-form-item>
+        <el-form-item label="金额" required><el-input-number v-model="feeForm.amount" :min="0" :precision="2" :step="10" controls-position="right" placeholder="请输入费用金额" /></el-form-item>
+        <el-form-item class="fee-form-full" label="状态" required><el-select v-model="feeForm.status" placeholder="请选择费用状态"><el-option label="待审核" value="PENDING_REVIEW" /><el-option label="审核通过" value="APPROVED" /><el-option label="已驳回" value="REJECTED" /></el-select></el-form-item>
+      </div></el-form>
     </AppDialog>
   </OverseasDetailShell>
 </template>
@@ -202,6 +203,10 @@ onMounted(load)
 .plan-fields > div { grid-template-columns: minmax(90px, 42%) minmax(0, 1fr); }
 .related-panel { margin-top: 20px; }
 .table-panel :deep(.data-table__toolbar) { min-height: 58px; }
+.fee-form { min-width: 0; overflow-x: hidden; }
+.fee-form-grid { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
+.fee-form-full { grid-column: 1 / -1; }
+.fee-form :deep(.el-select), .fee-form :deep(.el-input-number) { width: 100%; }
 @media (max-width: 1100px) { .basic-grid { grid-template-columns: 1fr; } .plan-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-@media (max-width: 720px) { .detail-tabs :deep(.el-tabs__header) { padding: 0 10px; } .detail-tabs :deep(.el-tabs__content) { padding: 12px; } .detail-tabs :deep(.el-tabs__item) { padding: 0 12px; } .detail-fields, .plan-fields { grid-template-columns: 1fr; } }
+@media (max-width: 720px) { .detail-tabs :deep(.el-tabs__header) { padding: 0 10px; } .detail-tabs :deep(.el-tabs__content) { padding: 12px; } .detail-tabs :deep(.el-tabs__item) { padding: 0 12px; } .detail-fields, .plan-fields, .fee-form-grid { grid-template-columns: 1fr; } .fee-form-full { grid-column: auto; } }
 </style>