style(ui): 统一全站 el-table 表头背景色及弹窗卡片化风格

- 将所有 el-table 表头背景色统一设为浅灰 #fafafa，覆盖普通表格、avue-crud 和固定列
- 移除业务组件内冗余的表头样式，改由全局样式统一控制
- 调整多处弹窗（预结算单、正式结算单、运输对账单、应收明细等）内容板块，改用全局 section-card 组件实现白底卡片分组
- 为多个弹窗内的搜索区域增加白底、圆角和阴影样式，提升视觉层次感
- 缩减多处表格“操作”列宽度以适配新布局
- 付款申请弹窗按钮由主色调 primary 改为 success，符合全站按钮风格规范
- 统一调整弹窗内表单、按钮、间距及背景细节，改善界面体验和视觉一致性

.workbuddy/memory/2026-08-20.md

@@ -17,3 +17,86 @@
 - 调整文件：`src/views/business/components/business-crud-page.vue`
 - 修改内容：在“计划调度”弹窗的待调度列表 `el-table` 上增加 `:header-cell-style="{ background: '#fafafa' }"`，将表头背景由白色改为浅灰。
 - 原因：用户反馈 `/business/transport-plan` 页面白色表头需统一改为灰色 `#fafafa`。
+
+## 运单管理货物信息表头背景色调整
+
+- 调整文件：`src/views/business/components/business-crud-page.vue`
+- 修改内容：在 `goodsJson-form` 货物信息表格上增加 `:header-cell-style="{ background: '#fafafa' }"`，表头背景改为浅灰。
+- 原因：用户反馈 `/business/waybill-manage` 页面货物信息表头需统一改为灰色 `#fafafa`。
+
+## 全站 el-table 表头背景色统一
+
+- 调整文件：`src/styles/element-ui.scss`（修改原仅限 `.avue-crud` 的表头规则）
+- 修改内容：将表头背景规则扩展为全站 `.el-table` 表头（含普通表格、avue-crud、固定列），统一 `background-color: #fafafa !important`。
+- 连带清理：移除 `business-crud-page.vue` 中两处冗余的 `:header-cell-style="{ background: '#fafafa' }"`（调度表、货物表），改由全局规则兜底。
+- 影响：`/business/loading-manage`、`/business/waybill-manage`、`/business/transport-plan` 以及全站所有白色 el-table 表头均统一为 `#fafafa`。`!important` 同时覆盖了部分组件内 scoped 设定的 `#f5f7fa` 表头背景。
+
+## 应收明细调整费用弹窗按钮间距
+
+- 调整文件：`src/views/settlement/receivable-payable-detail.vue`
+- 修改内容：为“调整费用”弹窗内的 `.settlement-detail-page__adjust-toolbar` 增加 `margin-bottom: 16px`，让“新增费用项”按钮与下方表格拉开间距。
+- 原因：用户反馈 `/settlement/receivable-detail` 页面调整费用弹窗中“新增费用项”按钮与表格贴得太近。
+
+## 应收明细生成费用弹窗搜索区域加白底
+
+- 调整文件：`src/views/settlement/receivable-payable-detail.vue`
+- 修改内容：为“生成费用”弹窗内的搜索 `el-form` 增加 class `settlement-detail-page__generate-search`，设置白底、圆角 6px、轻阴影，并与下方表格保留 16px 间距。
+- 原因：用户反馈 `/settlement/receivable-detail` 页面生成费用弹窗中搜索区域缺少白底卡片效果。
+
+## 应收明细更新费用弹窗表单加白底
+
+- 调整文件：`src/views/settlement/receivable-payable-detail.vue`
+- 修改内容：为“更新费用”弹窗的 `.settlement-detail-page__dialog-form` 增加白底、圆角 6px、轻阴影；将 padding 由 `16px 20px 0` 改为 `16px 20px`，并去掉最后一个表单项的底部外边距。
+- 原因：用户反馈 `/settlement/receivable-detail` 页面更新费用弹窗中表单区域缺少白底卡片效果。
+
+## 应收明细批量转结算弹窗搜索区域加白底
+
+- 调整文件：`src/views/settlement/receivable-payable-detail.vue`
+- 修改内容：为“批量转结算”弹窗的 `.settlement-detail-page__transfer-form` 搜索区域增加白底、圆角 6px、轻阴影，并保留与下方表格 16px 间距。
+- 原因：用户反馈 `/settlement/receivable-detail` 页面批量转结算弹窗中搜索区域缺少白底卡片效果。
+
+## 预结算单编辑弹窗改白底卡片分组
+
+- 调整文件：`src/views/settlement/components/pre-settlement-editor.vue`
+- 修改内容：将“新增/编辑预结算单”弹窗内的全部板块由自定义 `dialog-section-title` + `<section>` 改为全局 `<section-card>` 组件，包括：结算基本信息、结算合计、结算明细、附件、预付信息（readonly）、变更记录（readonly）。结算合计/结算明细头部右侧按钮改为 section-card 的 `#extra` 插槽；删除了不再使用的 `.pre-settlement-editor__section` 与 `.pre-settlement-editor__section-head` 样式，并去掉了 `.pre-settlement-editor__form` 多余的 `margin-top`。
+- 间距：卡片间距沿用全局 `.section-card` 的 `margin-bottom: 12px`（符合用户要求）。候选弹窗（添加应收应付明细）的 `dialog-section-title` 保持不变。
+- 原因：用户要求预结算单弹窗各板块使用白底卡片分隔，统一项目视觉规范。
+
+## 应收明细详情弹窗 tabs 内容区背景改白
+
+- 调整文件：`src/views/settlement/receivable-payable-detail.vue`
+- 修改内容：在 scoped 样式末尾新增 `.settlement-detail-dialog` 规则块，对 `:deep(.el-tabs__content)` 设置 `background: #fff; padding: 16px; border-radius: 0 0 6px 6px;`，`:deep(.el-tab-pane)` 设为透明。
+- 原因：全局 `.el-dialog__body { background: #f5f6fa }` 灰底透到 tabs 内容区（费用明细/变更记录），用户要求改为白色背景。
+
+## 预结算单打印弹窗白底卡片化
+
+- 调整文件：`src/views/settlement/pre-settlement.vue`
+- 修改内容：将“打印”弹窗内的手写 `.dialog-section-title` + 普通 `el-form` 改为全局 `<section-card title="选择打印模板">` 包裹表单；为打印弹窗增加 `class="pre-settlement-print-dialog"`；删除页面底部不再使用的 `.dialog-section-title` 样式块，并去掉 `.pre-settlement-page__print-form` 的 `margin-top`。
+- 原因：用户要求 `/settlement/pre-settlement` 打印弹窗按项目规范使用白底卡片分组，与预结算单编辑弹窗风格统一。
+
+## 正式结算付款申请弹窗白底卡片化
+
+- 调整文件：`src/views/settlement/formal-settlement.vue`
+- 修改内容：将“付款申请”弹窗内的普通 `el-form` 改为全局 `<section-card title="付款信息">` 包裹；为弹窗增加 `class="formal-payment-dialog"`；按全站按钮规范将“提交”按钮由 `type="primary"` 改为 `type="success"`。
+- 原因：用户要求 `/settlement/formal-settlement` 付款申请弹窗使用白底卡片分组，并与项目统一按钮风格对齐。
+
+## 正式结算单编辑弹窗改白底卡片分组
+
+- 调整文件：`src/views/settlement/components/formal-settlement-editor.vue`
+- 修改内容：将“新增/编辑正式结算单”弹窗内的全部板块由 `dialog-section-title` + `<section>` 改为全局 `<section-card>` 组件，包括：结算基本信息、来源预结算单、结算明细、附件、付款信息（readonly）。“来源预结算单”头部按钮改为 section-card 的 `#extra` 插槽；删除了不再使用的 `.formal-editor__section` 与 `.formal-editor__section-head` 样式。
+- 间距：沿用全局 `.section-card` 的 `margin-bottom: 12px`。
+- 原因：用户要求 `/settlement/formal-settlement` 页面与预结算单弹窗统一使用白底卡片分隔。
+
+## 正式结算选择预结算单/选择结算明细弹窗搜索区白底
+
+- 调整文件：`src/views/settlement/components/formal-settlement-editor.vue`
+- 修改内容：为"选择预结算单"和"选择结算明细"两个弹窗内的搜索 `el-form` 分别增加 class `formal-editor__candidate-search` / `formal-editor__detail-search`，统一样式：白底、圆角 6px、12px 内边距、16px 底间距、轻阴影。
+- 原因：用户反馈 `/settlement/formal-settlement` 页面"选择预结算单"弹窗搜索区域缺少白底卡片效果。
+
+## 运输对账单编辑弹窗改白底卡片分组
+
+- 调整文件：`src/views/settlement/components/transport-reconciliation-editor.vue`
+- 修改内容：将"新增/编辑运输对账单"弹窗内的全部板块由 `dialog-section-title` + `<section>` 改为全局 `<section-card>` 组件，包括：导入外部账单与内部账单核对、内部账单、导入外部账单、操作说明。"导入外部账单"头部按钮改为 section-card 的 `#extra` 插槽；删除了不再使用的 `.reconciliation-editor__section` 与 `.reconciliation-editor__section-head` 样式。
+- 间距：沿用全局 `.section-card` 的 `margin-bottom: 12px`。
+- 验证：已通过 SFC 解析与模板编译检查。
+- 原因：用户要求 `/settlement/transport-reconciliation` 页面与预结算单/正式结算单弹窗统一使用白底卡片分隔。

src/styles/element-ui.scss

@@ -598,11 +598,11 @@
   border-color: #eff1f7;
 }
 
-// 统一 avue-crud 表头背景色
-.avue-crud .el-table th.el-table__cell,
-.avue-crud .el-table__header-wrapper tr th.el-table-fixed-column--left,
-.avue-crud .el-table__header-wrapper tr th.el-table-fixed-column--right {
-  background-color: #fafafa;
+// 统一全站 el-table 表头背景色为浅灰 #fafafa（普通表格、avue-crud、固定列均覆盖）
+.el-table .el-table__header-wrapper th.el-table__cell,
+.el-table .el-table__header-wrapper tr th.el-table-fixed-column--left,
+.el-table .el-table__header-wrapper tr th.el-table-fixed-column--right {
+  background-color: #fafafa !important;
 }
 
 // 统一 avue-crud 偶数行背景色

src/views/business/components/business-crud-page.vue

@@ -3774,7 +3774,6 @@
             height="100%"
             row-key="_key"
             class="business-crud-page__dispatch-table"
-            :header-cell-style="{ background: '#fafafa' }"
           >
             <el-table-column type="index" label="序号" width="70" align="center" fixed="left" />
             <el-table-column label="运输方式" min-width="180" align="center" show-overflow-tooltip>

src/views/settlement/components/formal-settlement-editor.vue

@@ -1,8 +1,7 @@
 <template>
   <el-dialog v-model="visible" :title="title" width="96%" top="2vh" append-to-body destroy-on-close>
     <div v-loading="loading" class="formal-editor">
-      <section class="formal-editor__section">
-        <div class="dialog-section-title">结算基本信息</div>
+      <section-card title="结算基本信息">
         <el-form
           ref="formRef"
           :model="form"
@@ -64,11 +63,10 @@
             </el-col>
           </el-row>
         </el-form>
-      </section>
+      </section-card>
 
-      <section class="formal-editor__section">
-        <div class="formal-editor__section-head">
-          <div class="dialog-section-title">来源预结算单</div>
+      <section-card title="来源预结算单">
+        <template #extra>
           <div class="formal-editor__actions">
             <el-button v-if="editable" type="primary" plain @click="openCandidateDialog"
               >选择预结算单</el-button
@@ -77,7 +75,7 @@
               >选择结算明细</el-button
             >
           </div>
-        </div>
+        </template>
         <el-table :data="sources" border>
           <el-table-column type="index" label="序号" width="64" align="center" />
           <el-table-column
@@ -97,10 +95,9 @@
             >
           </el-table-column>
         </el-table>
-      </section>
+      </section-card>
 
-      <section v-if="details.length" class="formal-editor__section">
-        <div class="dialog-section-title">结算明细</div>
+      <section-card v-if="details.length" title="结算明细">
         <el-table :data="details" border>
           <el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
           <el-table-column
@@ -131,10 +128,9 @@
             </template>
           </el-table-column>
         </el-table>
-      </section>
+      </section-card>
 
-      <section class="formal-editor__section">
-        <div class="dialog-section-title">附件</div>
+      <section-card title="附件">
         <vehicle-attachment-upload
           v-model="attachments"
           :readonly="!editable"
@@ -143,10 +139,9 @@
           :max-size="500"
           :file-types="attachmentFileTypes"
         />
-      </section>
+      </section-card>
 
-      <section v-if="readonly && payments.length" class="formal-editor__section">
-        <div class="dialog-section-title">付款信息</div>
+      <section-card v-if="readonly && payments.length" title="付款信息">
         <el-table :data="payments" border>
           <el-table-column type="index" label="序号" width="64" align="center" />
           <el-table-column
@@ -167,7 +162,7 @@
             </template>
           </el-table-column>
         </el-table>
-      </section>
+      </section-card>
     </div>
     <template #footer>
       <el-button @click="visible = false">取消</el-button>
@@ -177,7 +172,7 @@
     </template>
 
     <el-dialog v-model="candidate.visible" title="选择预结算单" width="88%" append-to-body>
-      <el-form :model="candidate.query" inline label-position="right" label-width="160px">
+      <el-form :model="candidate.query" inline label-position="right" label-width="160px" class="formal-editor__candidate-search">
         <el-form-item label="预结算单号"
           ><el-input v-model="candidate.query.preSettlementNo" clearable
         /></el-form-item>
@@ -227,7 +222,7 @@
     </el-dialog>
 
     <el-dialog v-model="detailCandidate.visible" title="选择结算明细" width="92%" append-to-body>
-      <el-form :model="detailCandidate.query" inline label-position="right" label-width="160px">
+      <el-form :model="detailCandidate.query" inline label-position="right" label-width="160px" class="formal-editor__detail-search">
         <el-form-item label="批次号"
           ><el-input v-model="detailCandidate.query.batchNo" clearable
         /></el-form-item>
@@ -725,15 +720,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.formal-editor__section {
-  margin-bottom: 24px;
-}
-.formal-editor__section-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
 .formal-editor__actions {
   display: flex;
   gap: 8px;
@@ -761,4 +747,13 @@ export default {
 .formal-editor__adjust-reason {
   margin-top: 16px;
 }
+/* 选择预结算单 / 选择结算明细 弹窗搜索区白底 */
+.formal-editor__candidate-search,
+.formal-editor__detail-search {
+  background: #fff;
+  border-radius: 6px;
+  padding: 12px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
 </style>

src/views/settlement/components/pre-settlement-editor.vue

@@ -10,8 +10,8 @@
     @closed="handleClosed"
   >
     <div v-loading="loading" class="pre-settlement-editor__content">
-      <div class="dialog-section-title">结算基本信息</div>
-      <el-form
+      <section-card title="结算基本信息">
+        <el-form
         ref="formRef"
         :model="form"
         :rules="formRules"
@@ -81,14 +81,14 @@
           </el-col>
         </el-row>
       </el-form>
+      </section-card>
 
-      <section class="pre-settlement-editor__section">
-        <div class="pre-settlement-editor__section-head">
-          <div class="dialog-section-title">结算合计</div>
+      <section-card title="结算合计">
+        <template #extra>
           <el-button v-if="editable" type="primary" plain @click="addSummaryFee">
             添加费用
           </el-button>
-        </div>
+        </template>
         <el-table :data="summaryFees" border>
           <el-table-column type="index" label="序号" width="64" align="center" />
           <el-table-column
@@ -161,11 +161,10 @@
         <div class="pre-settlement-editor__summary-total">
           合计：{{ formatMoney(summaryTotal, form.currency) }}
         </div>
-      </section>
+      </section-card>
 
-      <section class="pre-settlement-editor__section">
-        <div class="pre-settlement-editor__section-head">
-          <div class="dialog-section-title">结算明细</div>
+      <section-card title="结算明细">
+        <template #extra>
           <div class="pre-settlement-editor__section-actions">
             <el-button
               v-if="hasPermission('pre_settlement_export')"
@@ -182,7 +181,7 @@
               {{ detailCollapsed ? '展开明细' : '收起明细' }}
             </el-button>
           </div>
-        </div>
+        </template>
         <el-form
           :model="detailQuery"
           inline
@@ -284,12 +283,9 @@
             </el-table-column>
           </el-table>
         </div>
-      </section>
+      </section-card>
 
-      <section class="pre-settlement-editor__section">
-        <div class="pre-settlement-editor__section-head">
-          <div class="dialog-section-title">附件</div>
-        </div>
+      <section-card title="附件">
         <div class="pre-settlement-editor__attachment">
           <div class="pre-settlement-editor__attachment-actions">
             <vehicle-attachment-upload
@@ -344,10 +340,9 @@
             </el-table-column>
           </el-table>
         </div>
-      </section>
+      </section-card>
 
-      <section v-if="form.id && readonly" class="pre-settlement-editor__section">
-        <div class="dialog-section-title">预付信息</div>
+      <section-card v-if="form.id && readonly" title="预付信息">
         <el-table :data="advances" border>
           <el-table-column type="index" label="序号" width="64" align="center" />
           <el-table-column
@@ -370,10 +365,9 @@
             </template>
           </el-table-column>
         </el-table>
-      </section>
+      </section-card>
 
-      <section v-if="form.id && readonly" class="pre-settlement-editor__section">
-        <div class="dialog-section-title">变更记录</div>
+      <section-card v-if="form.id && readonly" title="变更记录">
         <el-table :data="changeRecords" border>
           <el-table-column type="index" label="序号" width="64" align="center" />
           <el-table-column
@@ -391,7 +385,7 @@
             </template>
           </el-table-column>
         </el-table>
-      </section>
+      </section-card>
     </div>
 
     <template #footer>
@@ -1317,12 +1311,9 @@ export default {
   &__content {
     max-height: 82vh;
     overflow-y: auto;
-    padding: 4px 12px 16px;
   }
 
   &__form {
-    margin-top: 12px;
-
     :deep(.el-select),
     :deep(.el-date-editor),
     :deep(.el-input-number) {
@@ -1330,17 +1321,6 @@ export default {
     }
   }
 
-  &__section {
-    margin-top: 20px;
-  }
-
-  &__section-head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 12px;
-  }
-
   &__section-actions,
   &__links {
     display: flex;

src/views/settlement/components/settlement-adjustment-editor.vue

@@ -1,8 +1,7 @@
 <template>
   <el-dialog v-model="visible" :title="title" width="94%" top="3vh" append-to-body destroy-on-close>
     <div v-loading="loading" class="settlement-adjustment-editor">
-      <section class="settlement-adjustment-editor__section">
-        <div class="dialog-section-title">基本信息</div>
+      <section-card title="基本信息">
         <el-form
           ref="formRef"
           :model="form"
@@ -57,11 +56,10 @@
             >
           </el-row>
         </el-form>
-      </section>
+      </section-card>
 
-      <section class="settlement-adjustment-editor__section">
-        <div class="settlement-adjustment-editor__section-head">
-          <div class="dialog-section-title">调整费用</div>
+      <section-card title="调整费用">
+        <template #extra>
           <el-button
             v-if="editable && form.formalSettlementId"
             type="primary"
@@ -69,7 +67,7 @@
             @click="openFeeDialog"
             >添加费用</el-button
           >
-        </div>
+        </template>
         <el-table :data="details" border>
           <el-table-column type="index" label="序号" width="64" align="center" /><el-table-column
             prop="feeType"
@@ -141,7 +139,7 @@
           }}</strong
           >；调整后结算金额：<strong>{{ formatMoney(form.adjustedSettlementAmount) }}</strong>
         </div>
-      </section>
+      </section-card>
     </div>
     <template #footer
       ><el-button @click="visible = false">取消</el-button
@@ -354,15 +352,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.settlement-adjustment-editor__section {
-  margin-bottom: 24px;
-}
-.settlement-adjustment-editor__section-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
 .settlement-adjustment-editor__summary {
   padding: 12px 0;
   text-align: right;
@@ -379,18 +368,4 @@ export default {
 .negative {
   color: #f56c6c;
 }
-.dialog-section-title {
-  display: flex;
-  align-items: center;
-  min-height: 22px;
-  font-size: 16px;
-  font-weight: 600;
-}
-.dialog-section-title::before {
-  width: 4px;
-  height: 18px;
-  margin-right: 8px;
-  background: #409eff;
-  content: '';
-}
 </style>

src/views/settlement/components/transport-reconciliation-editor.vue

@@ -1,8 +1,7 @@
 <template>
   <el-dialog v-model="visible" :title="title" width="98%" top="2vh" append-to-body destroy-on-close>
     <div v-loading="loading" class="reconciliation-editor">
-      <section class="reconciliation-editor__section">
-        <div class="dialog-section-title">导入外部账单，与内部账单核对</div>
+      <section-card title="导入外部账单，与内部账单核对">
         <el-form
           ref="formRef"
           :model="form"
@@ -61,10 +60,9 @@
             </el-col>
           </el-row>
         </el-form>
-      </section>
+      </section-card>
 
-      <section class="reconciliation-editor__section">
-        <div class="dialog-section-title">内部账单</div>
+      <section-card title="内部账单">
         <div class="reconciliation-editor__stats">
           <div class="stat-card">
             <b>{{ form.internalBillCount || 0 }}</b
@@ -149,11 +147,10 @@
             </template>
           </el-table-column>
         </el-table>
-      </section>
+      </section-card>
 
-      <section class="reconciliation-editor__section">
-        <div class="reconciliation-editor__section-head">
-          <div class="dialog-section-title">导入外部账单</div>
+      <section-card title="导入外部账单">
+        <template #extra>
           <div class="reconciliation-editor__actions" v-if="editable">
             <el-button type="primary" plain @click="downloadTemplate('vehicle')"
               >下载整车对账模板</el-button
@@ -171,7 +168,7 @@
               @change="handleImport"
             />
           </div>
-        </div>
+        </template>
         <el-tabs v-model="externalTab">
           <el-tab-pane :label="`导入明细（${externalDetails.length}）`" name="all" />
           <el-tab-pane :label="`疑似重复（${duplicateRows.length}）`" name="duplicate" />
@@ -203,9 +200,9 @@
             >
           </el-table-column>
         </el-table>
-      </section>
+      </section-card>
 
-      <section class="reconciliation-editor__section">
+      <section-card title="操作说明">
         <el-collapse>
           <el-collapse-item title="操作说明" name="help">
             <div class="reconciliation-editor__help">
@@ -224,7 +221,7 @@
             </div>
           </el-collapse-item>
         </el-collapse>
-      </section>
+      </section-card>
     </div>
 
     <template #footer>
@@ -744,15 +741,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.reconciliation-editor__section {
-  margin-bottom: 24px;
-}
-.reconciliation-editor__section-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
 .reconciliation-editor__actions,
 .reconciliation-editor__links {
   display: flex;

src/views/settlement/formal-settlement.vue

@@ -115,7 +115,7 @@
             <span v-else>{{ displayValue(row[column.prop]) }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="320" fixed="right" align="center">
+        <el-table-column label="操作" width="120" fixed="right" align="center">
           <template #default="{ row }"
             ><div class="formal-page__links">
               <el-link
@@ -190,33 +190,41 @@
       :readonly="editor.readonly"
       @success="loadTable"
     />
-    <el-dialog v-model="paymentDialog.visible" title="付款申请" width="520px" append-to-body>
-      <el-form :model="paymentDialog.form" label-position="right" label-width="auto">
-        <el-form-item label="结算单号">{{
-          paymentDialog.row.formalSettlementNo || '-'
-        }}</el-form-item>
-        <el-form-item label="剩余可申请金额">{{
-          formatMoney(paymentAvailable, paymentDialog.row.currency)
-        }}</el-form-item>
-        <el-form-item label="申请付款金额" required
-          ><el-input-number
-            v-model="paymentDialog.form.appliedAmount"
-            :min="0.01"
-            :max="paymentAvailable"
-            :precision="2"
-            :controls="false"
-        /></el-form-item>
-        <el-form-item label="备注"
-          ><el-input
-            v-model="paymentDialog.form.remark"
-            type="textarea"
-            maxlength="200"
-            show-word-limit
-        /></el-form-item>
-      </el-form>
+    <el-dialog
+      v-model="paymentDialog.visible"
+      title="付款申请"
+      width="520px"
+      append-to-body
+      class="formal-payment-dialog"
+    >
+      <section-card title="付款信息">
+        <el-form :model="paymentDialog.form" label-position="right" label-width="auto">
+          <el-form-item label="结算单号">{{
+            paymentDialog.row.formalSettlementNo || '-'
+          }}</el-form-item>
+          <el-form-item label="剩余可申请金额">{{
+            formatMoney(paymentAvailable, paymentDialog.row.currency)
+          }}</el-form-item>
+          <el-form-item label="申请付款金额" required
+            ><el-input-number
+              v-model="paymentDialog.form.appliedAmount"
+              :min="0.01"
+              :max="paymentAvailable"
+              :precision="2"
+              :controls="false"
+          /></el-form-item>
+          <el-form-item label="备注"
+            ><el-input
+              v-model="paymentDialog.form.remark"
+              type="textarea"
+              maxlength="200"
+              show-word-limit
+          /></el-form-item>
+        </el-form>
+      </section-card>
       <template #footer
         ><el-button @click="paymentDialog.visible = false">取消</el-button
-        ><el-button type="primary" :loading="paymentDialog.loading" @click="submitPayment"
+        ><el-button type="success" :loading="paymentDialog.loading" @click="submitPayment"
           >提交</el-button
         ></template
       >

src/views/settlement/pre-settlement.vue

@@ -128,7 +128,7 @@
             <span v-else>{{ displayValue(row[column.prop]) }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="320" fixed="right" align="center">
+        <el-table-column label="操作" width="130" fixed="right" align="center">
           <template #default="{ row }">
             <div class="pre-settlement-page__links">
               <el-link
@@ -255,23 +255,30 @@
       </template>
     </el-dialog>
 
-    <el-dialog v-model="printDialog.visible" title="打印" width="620px" append-to-body>
-      <div class="dialog-section-title">选择打印模板</div>
-      <el-form label-position="right" label-width="auto" class="pre-settlement-page__print-form">
-        <el-form-item label="项目">
-          <span>{{ printDialog.row.projectName || '-' }}</span>
-        </el-form-item>
-        <el-form-item label="模板名称">
-          <el-select v-model="printDialog.template" placeholder="请选择">
-            <el-option
-              v-for="item in printDialog.templates"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-      </el-form>
+    <el-dialog
+      v-model="printDialog.visible"
+      title="打印"
+      width="620px"
+      append-to-body
+      class="pre-settlement-print-dialog"
+    >
+      <section-card title="选择打印模板">
+        <el-form label-position="right" label-width="auto" class="pre-settlement-page__print-form">
+          <el-form-item label="项目">
+            <span>{{ printDialog.row.projectName || '-' }}</span>
+          </el-form-item>
+          <el-form-item label="模板名称">
+            <el-select v-model="printDialog.template" placeholder="请选择">
+              <el-option
+                v-for="item in printDialog.templates"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </section-card>
       <template #footer>
         <el-button @click="printDialog.visible = false">取消</el-button>
         <el-button type="primary" :loading="printDialog.loading" @click="handlePrintPreview">
@@ -752,8 +759,6 @@ export default {
   }
 
   &__print-form {
-    margin-top: 20px;
-
     :deep(.el-select) {
       width: 320px;
     }
@@ -772,22 +777,6 @@ export default {
   }
 }
 
-.dialog-section-title {
-  display: flex;
-  align-items: center;
-  min-height: 22px;
-  font-size: 16px;
-  font-weight: 600;
-
-  &::before {
-    width: 4px;
-    height: 18px;
-    margin-right: 8px;
-    background: #409eff;
-    content: '';
-  }
-}
-
 :deep(.pre-settlement-page .el-table) {
   --el-table-border-color: #eff1f7;
   background: #fff;

src/views/settlement/receivable-payable-detail.vue

@@ -76,7 +76,7 @@
             <span v-else>{{ formatColumnValue(row, column) }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="220" fixed="right" align="center">
+        <el-table-column label="操作" width="120" fixed="right" align="center">
           <template #default="{ row }">
             <div class="settlement-detail-page__actions">
               <el-link v-if="row.settlementStatus === 'pending'" type="primary" @click="openAdjustDialog(row)">
@@ -399,7 +399,13 @@
     </el-dialog>
 
     <el-dialog v-model="generateDialog.visible" title="生成费用" width="88%" append-to-body>
-      <el-form :model="generateQuery" inline label-position="right" label-width="120px">
+      <el-form
+        :model="generateQuery"
+        class="settlement-detail-page__generate-search"
+        inline
+        label-position="right"
+        label-width="120px"
+      >
         <el-form-item label="运单合同" required>
           <el-select
             v-model="generateQuery.contractId"
@@ -1329,10 +1335,17 @@ export default {
 }
 
 .settlement-detail-page__dialog-form {
-  padding: 16px 20px 0;
+  padding: 16px 20px;
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 
   :deep(.el-form-item) {
     margin-bottom: 16px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 
   :deep(.el-select) {
@@ -1340,8 +1353,24 @@ export default {
   }
 }
 
+.settlement-detail-page__adjust-toolbar {
+  margin-bottom: 8px;
+}
+
+.settlement-detail-page__generate-search {
+  margin-bottom: 16px;
+  padding: 12px 12px 4px;
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
 .settlement-detail-page__transfer-form {
   margin-bottom: 16px;
+  padding: 12px 12px 4px;
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }
 
 @media screen and (max-width: 1200px) {
@@ -1355,4 +1384,17 @@ export default {
     grid-template-columns: 1fr;
   }
 }
+
+/* 详情弹窗 tabs 白底 */
+.settlement-detail-dialog {
+  :deep(.el-tabs__content) {
+    background: #fff;
+    padding: 16px;
+    border-radius: 0 0 6px 6px;
+  }
+
+  :deep(.el-tab-pane) {
+    background: transparent;
+  }
+}
 </style>

src/views/settlement/settlement-adjustment.vue

@@ -78,7 +78,7 @@
             ><span v-else>{{ displayValue(row[column.prop]) }}</span></template
           ></el-table-column
         >
-        <el-table-column label="操作" width="320" fixed="right" align="center"
+        <el-table-column label="操作" width="120" fixed="right" align="center"
           ><template #default="{ row }"
             ><div class="settlement-adjustment-page__links">
               <el-link

src/views/settlement/transport-reconciliation.vue

@@ -74,7 +74,7 @@
             <span v-else>{{ displayValue(row[column.prop]) }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="220" fixed="right" align="center">
+        <el-table-column label="操作" width="120" fixed="right" align="center">
           <template #default="{ row }">
             <div class="reconciliation-page__links">
               <el-link type="primary" @click="openView(row)">查看</el-link>