From 6989486d8a6f4ef07ef5aeb31401ecc52da8e5a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Fri, 21 Aug 2026 12:42:02 +0800
Subject: [PATCH] =?UTF-8?q?style(business):=20=E4=BC=98=E5=8C=96=E5=90=88?=
 =?UTF-8?q?=E5=90=8C=E7=AE=A1=E7=90=86=E3=80=81=E7=BB=BC=E5=90=88=E5=8F=B0?=
 =?UTF-8?q?=E8=B4=A6=E5=8F=8A=E5=BA=94=E4=BB=98=E6=98=8E=E7=BB=86=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 统一 business-crud-page 系列独立表单页标题显示，新增 contract-manage 支持
- 综合台账弹窗 vehicle-ledger/ship-ledger 中 el-table 移入各 tab-pane，调整蓝标内容为全局 section-card 组件
- 临时额度查看弹窗改为两列自定义详情显示，支持草稿态详情按钮显示
- 修复合同管理详情弹窗 label 对齐问题，增强 el-descriptions 表格宽度与标签样式
- contract-manage.vue 全局样式改为 scoped，消除全站弹窗样式污染
- 应付明细调整弹窗控件宽度撑满单元格，统一所有表头居中显示
- 移除 receivable-payable-detail 表格中部分列 align:right，避免内容截断
- 新增相应组件样式支持 :deep 选择器实现样式穿透，保证兼容性和维护性
---
 .workbuddy/memory/2026-08-21.md               | 32 +++++++++++++++++++
 .workbuddy/memory/MEMORY.md                   |  3 +-
 src/option/business/temporary-credit-limit.js | 29 +++++++++++++++++
 .../settlement/receivable-payable-detail.js   | 29 +++++++++--------
 .../components/business-crud-page.vue         | 20 +++++++++++-
 src/views/business/contract-manage.vue        |  8 ++---
 .../settlement/receivable-payable-detail.vue  | 26 +++++++++++++--
 7 files changed, 125 insertions(+), 22 deletions(-)

diff --git a/.workbuddy/memory/2026-08-21.md b/.workbuddy/memory/2026-08-21.md
index 3d66ae0..7b41714 100644
--- a/.workbuddy/memory/2026-08-21.md
+++ b/.workbuddy/memory/2026-08-21.md
@@ -58,3 +58,35 @@
 - **loading-manage/form**：该路由直接映射到 `loading-manage.vue`（非 business-crud-page）。新增 computed `formPageTitle()`（`query.name || '新增/编辑配载管理'`），并在独立表单页的 `<component>` 内、body 之前加 `<div v-if="isStandaloneFormPage" class="archive-page-form__title">{{ formPageTitle }}</div>`。
 - **master-order?mode=editor**：`master-order.vue` 渲染 `master-order-editor.vue`。将 `<master-order-editor>` 包进 `<template v-else-if="mode==='editor'">`，前置 `<div class="archive-page-form__title">{{ masterEditorTitle }}</div>`；新增 computed `masterEditorTitle`（`routeId ? '编辑总单' : '新增总单'`）。
 - 验证：4 个 SFC + element-ui.scss 经 Vite 2889 编译均 HTTP 200、无 transform/syntax 错误。
+
+## 综合台账弹窗 & 临时额度查看弹窗 布局调整
+- vehicle-ledger / ship-ledger（/transportCapacity 车辆·船舶综合台账弹窗）：把 `<el-table>`+分页从 `el-tabs` 外移入每个 `<el-tab-pane>` 内（切换 tab 表格跟着切换）；ship-ledger 同步把三个蓝标内容块（船舶基本信息/船舶证书信息/证书附件）由 `<section>`+`.dialog-section-title` 改为全局 `<section-card :title>`，卡片间距 12px。两文件均加 `:deep(.el-tabs__content){padding:0}` 去 border-card 默认内边距。
+- 临时额度查看弹窗改两列（/business/temporary-credit-limit）：
+  - 原"查看"调 Avue 内置 `rowView`（列数复用 column.span，呈 3 列）。改用 business-crud-page 内置自定义详情弹窗。
+  - `src/option/business/temporary-credit-limit.js` config 加 `detailButton:true`、`detailButtonIgnoreDraftStatus:true`、`detailSections:[申请信息(申请单号/备注 span:2 整行，其余两列)、额度信息]`。
+  - `business-crud-page.vue` 的 `showDetailButton` 加 `if(this.config.detailButtonIgnoreDraftStatus) return true`（仅放开草稿态也走自定义详情，不动其他页面）。
+
+## contract-manage/form 独立表单页也加 archive-page-form__title
+- 需求：`/business/contract-manage/form?mode=add&name=新运费合同管理` 也要同样顶部页面标题。
+- 改动：`business-crud-page.vue` 的 `formPageTitle()` 条件再并入 `isContractConfig`（`config.permission==='contract_manage'`，contract-manage 已用 `contract-form-page` prop 走 `PageAvueForm`）。标题取 `query.name`（「新运费合同管理」）或回退「新增/编辑合同管理」。
+- 验证：Vite 2889 编译通过（HTTP 200，无错误），HMR 生效。至此 business-crud-page 系列（shipping-template / transport-plan / waybill-manage / contract-manage）独立表单页均已带统一标题。
+  - 渲染走 `detailSections` 分支（`section-card` + `el-descriptions(:column=2)`），值经 `formatDetailValue` 转字典 label。
+  - 验证：`temporary-credit-limit.js` 经 `node --check` 语法通过；business-crud-page.vue 仅 template 表达式改动。待用户在 2889 刷新核对两列效果。
+
+## 合同管理详情弹窗 label 对齐修复
+- 需求：`/business/contract-manage` 详情弹窗里两列 `el-descriptions` 的 label（尤其右边列 label）对齐不一致，长 label（如"是否需要加盖法人章"）换行后行高/垂直位置错乱。
+- 根因：`business-crud-page.vue` 的 `&__detail-content .section-card` 中对 `.el-descriptions__label` 只写了 `width: 140px` 与 `text-align: right`，缺 `min/max-width`、`vertical-align`、`line-height`、`box-sizing`；对 `.el-descriptions__content` 也缺垂直对齐，导致跨列/跨行 label 视觉上不齐。另外 `contract-manage.vue` 底部的 `<style>`（未加 `scoped`）把 `.el-dialog .el-form-item__label` 与 `.el-col` 全局覆盖，会污染全站弹窗。
+- 改动：
+  1. `src/views/business/components/business-crud-page.vue`（15440 行附近）：
+     - label 与 content 统一加 `box-sizing:border-box`、`vertical-align:middle`、`line-height:1.4`、一致 padding；label 加 `min-width:140px; max-width:140px` 防止被内容撑开或压缩，content 保持 `min-height:42px`。
+     - **新增 `:deep(.el-descriptions__table) { width:100%; table-layout:fixed }`**：强制表格按固定列宽渲染，label 占 140px 后，左右两个 content 列均分剩余宽度，解决用户截图里"合同期限"卡片左右内容区宽度不一致的问题。
+  2. `src/views/business/contract-manage.vue`：把底部无 scoped 的全局样式改为 `<style scoped>`，并把选择器限定到 `.contract-manage-dialog`；删除污染性更强的 `.el-col { margin-bottom:0 !important }` 全局覆盖。
+- 验证：Vite 2889 编译通过（HTTP 200），HMR 生效。待用户在 2889 刷新核对详情弹窗两列 label 是否左右/上下对齐、左右内容区宽度是否均等。
+
+## 应付明细调整弹窗：控件撑满单元格 + 表头居中
+- 需求：`/settlement/payable-detail`（即 `receivable-payable-detail.vue`）"调整费用"弹窗中，里程 / 杂项 / 装卸费等列的 `el-input-number` 默认宽度 180px，超出窄列后被截断（见截图）；同时要求所有表头居中。
+- 改动（单文件 `src/views/settlement/receivable-payable-detail.vue`）：
+  1. 给调整弹窗 `<el-table>` 加 `class="settlement-detail-page__adjust-table"`。
+  2. 页面级表格样式 `.settlement-detail-page__table, .settlement-detail-page :deep(.el-table)` 的 `th.el-table__cell` 增加 `text-align: center !important;`，统一所有表头居中（覆盖金额列 `align: right` 导致的表头右偏）。
+  3. 新增 `.settlement-detail-page__adjust-table` 样式块：`.el-input-number`、`.el-input`、`.el-select` 全部 `width: 100% !important;`，使控件撑满单元格不被截断；`el-input-number` 内部输入保持右对齐。
+- 验证：Vite 2889 编译通过（HTTP 200），HMR 生效。待用户在 2889 刷新核对调整弹窗输入框是否完整显示、表头是否全部居中。
diff --git a/.workbuddy/memory/MEMORY.md b/.workbuddy/memory/MEMORY.md
index 37b1c9e..c5c320e 100644
--- a/.workbuddy/memory/MEMORY.md
+++ b/.workbuddy/memory/MEMORY.md
@@ -28,7 +28,7 @@
 
 ### 独立表单页标题 `archive-page-form__title`（全局统一，参考 customer-archive）
 - 样式已**全局化**到 `src/styles/element-ui.scss`（5b 段）：18px/600/#303133 + margin-bottom:20px + `::before` 4px 主色竖条 + 8px 间距。原 `customer-archive.vue`（scoped）与 `business-crud-page.vue`（`:global`）两处本地重复定义已删除，改由全局规则统一驱动（全站任意页面用此 class 即得统一标题）。
-- **business-crud-page 系列**（shipping-template / transport-plan / waybill-manage 独立表单页）：`PageAvueForm`（render `h('div',{class:dialogCustomClass},[titleDiv, avue-form])`）声明 `props.formPageTitle`，模板 `:form-page-title="isStandaloneFormPage ? formPageTitle : undefined"`；computed `formPageTitle()` 在 `isStandaloneFormPage && (isShippingTemplatePage || isTransportPlanPage || isWaybillDetailLayout)` 时返回 `this.$route.query.name || '新增'/'编辑'+config.title`（`isWaybillDetailLayout` = `config.permission==='waybill_manage'`）。
+- **business-crud-page 系列**（shipping-template / transport-plan / waybill-manage / contract-manage 独立表单页）：`PageAvueForm`（render `h('div',{class:dialogCustomClass},[titleDiv, avue-form])`）声明 `props.formPageTitle`，模板 `:form-page-title="isStandaloneFormPage ? formPageTitle : undefined"`；computed `formPageTitle()` 在 `isStandaloneFormPage && (isShippingTemplatePage || isTransportPlanPage || isWaybillDetailLayout || isContractConfig)` 时返回 `this.$route.query.name || '新增'/'编辑'+config.title`（`isWaybillDetailLayout` = `config.permission==='waybill_manage'`；`isContractConfig` = `config.permission==='contract_manage'`）。
 - **loading-manage/form**：路由直接映射 `loading-manage.vue`（非 business-crud-page）。新增 computed `formPageTitle()`（`query.name || '新增/编辑配载管理'`），并在 `<component :is="isStandaloneFormPage?'div':'el-dialog'">` 内、body 前加 `<div v-if="isStandaloneFormPage" class="archive-page-form__title">`。
 - **master-order?mode=editor**：`master-order.vue` 把 `<master-order-editor>` 包进 `<template v-else-if="mode==='editor'">`，前置 `<div class="archive-page-form__title">{{ masterEditorTitle }}</div>`（computed `masterEditorTitle` = `routeId ? '编辑总单' : '新增总单'`）。
 - 扩展原则：新增独立表单页要带此标题，要么并入 business-crud-page 的 `formPageTitle` 条件（business-crud-page 系列），要么在对应页面模板手写 `<div class="archive-page-form__title">`（loading-manage / master-order 模式）。
@@ -47,3 +47,4 @@
 - option 由 prop `crudOption` 经 `cloneOption` 克隆（保留所有顶层属性）。给各页 option 顶层加 `dialogCustomClass:'xxx-dialog'` + element-ui.scss `.xxx-dialog.el-dialog{height/max-height:calc(100vh - 40px)!important}` 可只影响该页。
 - avue-crud 弹窗带 `avue-crud__dialog` class，受全局 `.avue-crud__dialog .avue-dialog__footer{margin-top:-30px!important}` 影响，自定义 footer 须加 `margin-top:0!important` 抵消。
 - 独立表单页（contract-manage / shipping-template / waybill / transport-plan）走 `PageAvueForm`，不包 el-dialog，底部按钮随内容滚动不浮动。`pageFormOption`（6205 行）负责装配。contract 用 `buildContractFormGroupOption`（6861 行）按 order 分 7 组白卡。
+- **查看详情弹窗（detailBox）自定义机制**：列表"查看/详情"按钮默认调 Avue 内置 `rowView`（列数复用 column.span，常呈 3 列）。要改成自定义两列白卡详情，在页面 `config` 加 `detailButton:true` + `detailSections:[{title, fields:[[prop,label,span],...]}]`，组件渲染 `section-card` + `el-descriptions(:column=2)`（field 默认占 1 列，span:2 整行）。数据经 `api.getDetail(row.id)` 拉取，值用 `formatDetailValue` 经 column.dicData 转字典显示 label。开关：`showDetailButton` 默认仅非草稿态显示"详情"（草稿态仍走 rowView 3 列）；加 `config.detailButtonIgnoreDraftStatus:true` 可让所有状态（含草稿）都走自定义两列详情。statusProp='approvalStatus' 的页面草稿值须为 'draft'。
diff --git a/src/option/business/temporary-credit-limit.js b/src/option/business/temporary-credit-limit.js
index a539440..06d1f15 100644
--- a/src/option/business/temporary-credit-limit.js
+++ b/src/option/business/temporary-credit-limit.js
@@ -45,6 +45,35 @@ export const config = {
   editStatus: ['draft', 'withdrawn', 'rejected', '草稿', '已撤回'],
   ignoreReadonlyEditStatus: ['draft', 'withdrawn', '草稿', '已撤回'],
   ignoreReadonlyDeleteStatus: ['draft', '草稿'],
+  detailButton: true,
+  detailButtonIgnoreDraftStatus: true,
+  detailSections: [
+    {
+      title: '申请信息',
+      fields: [
+        ['applicationNo', '申请单号', 2],
+        ['projectName', '项目', 1],
+        ['projectCode', '项目编号', 1],
+        ['undertakeDeptName', '承办部门', 1],
+        ['applyDeptName', '申请部门', 1],
+        ['applicantName', '申请人', 1],
+        ['approvalStatus', '审批状态', 1],
+        ['currentNode', '当前节点', 1],
+        ['currentProcessor', '当前处理人', 1],
+        ['validUntil', '申请有效期至', 1],
+        ['remark', '备注', 2],
+      ],
+    },
+    {
+      title: '额度信息',
+      fields: [
+        ['projectFundLimit', '项目资金使用额度（万元）', 1],
+        ['usedFundLimit', '已使用项目资金使用额度（万元）', 1],
+        ['remainingFundLimit', '剩余项目资金使用额度（万元）', 1],
+        ['applyLimit', '申请临时额度（万元）', 1],
+      ],
+    },
+  ],
   operations: [
     {
       action: 'submitApproval',
diff --git a/src/option/settlement/receivable-payable-detail.js b/src/option/settlement/receivable-payable-detail.js
index 6c1420c..c28dd62 100644
--- a/src/option/settlement/receivable-payable-detail.js
+++ b/src/option/settlement/receivable-payable-detail.js
@@ -42,11 +42,11 @@ export const tableColumns = [
   { label: '运输类型', prop: 'transportType', minWidth: 120 },
   { label: '货物名称', prop: 'cargoName', minWidth: 130 },
   { label: '货物类型', prop: 'cargoType', minWidth: 120 },
-  { label: '运输总量', prop: 'transportQuantity', minWidth: 120, align: 'right' },
-  { label: '里程（KM）', prop: 'mileage', minWidth: 120, align: 'right' },
+  { label: '运输总量', prop: 'transportQuantity', minWidth: 120 },
+  { label: '里程（KM）', prop: 'mileage', minWidth: 120 },
   { label: '批次号', prop: 'batchNo', minWidth: 120 },
-  { label: '运输单价', prop: 'unitPriceText', minWidth: 120, align: 'right' },
-  { label: '费用合计', prop: 'totalAmountText', minWidth: 130, align: 'right' },
+  { label: '运输单价', prop: 'unitPriceText', minWidth: 120 },
+  { label: '费用合计', prop: 'totalAmountText', minWidth: 130 },
   { label: '状态', prop: 'settlementStatusName', minWidth: 120 },
   { label: '创建人', prop: 'createUserName', minWidth: 120 },
   { label: '创建时间', prop: 'createTime', minWidth: 170 },
@@ -61,15 +61,16 @@ export const feeDetailBaseColumns = [
   { label: '运费计费类型', prop: 'billingType', minWidth: 130 },
   { label: '运输量', prop: 'transportQuantityText', minWidth: 120 },
   { label: '运费计算单位', prop: 'priceUnit', minWidth: 130 },
-  { label: '运输单价', prop: 'unitPrice', minWidth: 120, align: 'right' },
-  { label: '里程（KM）', prop: 'mileage', minWidth: 120, align: 'right' },
-  { label: '运输费', prop: 'freightAmount', minWidth: 120, align: 'right' },
+  { label: '运输单价', prop: 'unitPrice', minWidth: 120 },
+  { label: '里程（KM）', prop: 'mileage', minWidth: 120 },
+  { label: '运输费', prop: 'freightAmount', minWidth: 180 }
+
 ];
 
 export const feeDetailTailColumns = [
-  { label: '原总金额', prop: 'originalAmountText', minWidth: 120, align: 'right' },
-  { label: '调整金额', prop: 'adjustAmountText', minWidth: 120, align: 'right' },
-  { label: '调整后总金额', prop: 'afterAmountText', minWidth: 140, align: 'right' },
+  { label: '原总金额', prop: 'originalAmountText', minWidth: 120 },
+  { label: '调整金额', prop: 'adjustAmountText', minWidth: 120 },
+  { label: '调整后总金额', prop: 'afterAmountText', minWidth: 140 },
   { label: '备注', prop: 'remark', minWidth: 160 },
   { label: '最后录入人', prop: 'updateUserName', minWidth: 120 },
   { label: '最后录入时间', prop: 'updateTime', minWidth: 170 },
@@ -116,10 +117,10 @@ export const generateWaybillColumns = [
   { label: '发货联系人', prop: 'departureContact', minWidth: 130 },
   { label: '到货地址', prop: 'arrivalAddress', minWidth: 220 },
   { label: '收货联系人', prop: 'arrivalContact', minWidth: 130 },
-  { label: '单价', prop: 'unitPrice', minWidth: 110, align: 'right' },
-  { label: '运费', prop: 'freight', minWidth: 110, align: 'right' },
-  { label: '其他费用合计', prop: 'otherFeeTotal', minWidth: 140, align: 'right' },
-  { label: '运费合计', prop: 'freightTotal', minWidth: 120, align: 'right' },
+  { label: '单价', prop: 'unitPrice', minWidth: 110 },
+  { label: '运费', prop: 'freight', minWidth: 110 },
+  { label: '其他费用合计', prop: 'otherFeeTotal', minWidth: 140 },
+  { label: '运费合计', prop: 'freightTotal', minWidth: 120 },
   { label: '客户合同', prop: 'contractName', minWidth: 160 },
   { label: '发货计划', prop: 'planName', minWidth: 140 },
   { label: '运输批次', prop: 'batchNo', minWidth: 140 },
diff --git a/src/views/business/components/business-crud-page.vue b/src/views/business/components/business-crud-page.vue
index 3372b81..4f8e78c 100644
--- a/src/views/business/components/business-crud-page.vue
+++ b/src/views/business/components/business-crud-page.vue
@@ -6267,7 +6267,10 @@ export default {
     formPageTitle() {
       if (
         this.isStandaloneFormPage &&
-        (this.isShippingTemplatePage || this.isTransportPlanPage || this.isWaybillDetailLayout)
+        (this.isShippingTemplatePage ||
+          this.isTransportPlanPage ||
+          this.isWaybillDetailLayout ||
+          this.isContractConfig)
       ) {
         return (
           this.$route.query.name ||
@@ -7350,6 +7353,7 @@ export default {
     showDetailButton(row) {
       if (!this.config.detailButton || !this.hasPermission(`${this.config.permission}_view`))
         return false;
+      if (this.config.detailButtonIgnoreDraftStatus) return true;
       const status = this.statusValue(row);
       return status !== 'draft';
     },
@@ -15437,17 +15441,31 @@ export default {
     gap: 12px;
 
     .section-card {
+      :deep(.el-descriptions__table) {
+        width: 100%;
+        table-layout: fixed;
+      }
+
       :deep(.el-descriptions__label) {
         width: 140px;
+        min-width: 140px;
+        max-width: 140px;
+        box-sizing: border-box;
+        padding: 8px 12px;
         color: #606266;
         font-weight: 600;
         text-align: right;
+        vertical-align: middle;
+        line-height: 1.4;
       }
 
       :deep(.el-descriptions__content) {
         min-height: 42px;
+        padding: 8px 12px;
         white-space: pre-wrap;
         word-break: break-word;
+        vertical-align: middle;
+        line-height: 1.4;
       }
     }
   }
diff --git a/src/views/business/contract-manage.vue b/src/views/business/contract-manage.vue
index d3a2646..d696958 100644
--- a/src/views/business/contract-manage.vue
+++ b/src/views/business/contract-manage.vue
@@ -25,10 +25,10 @@ export default {
 };
 </script>
 
-<style>
-/* 合同管理弹窗：长 label（如"是否需要加盖法人章"）在标签列内自动换行 */
-.el-dialog .el-form-item__label {
+<style scoped>
+/* 合同管理弹窗：长 label（如"是否需要加盖法人章"）在标签列内自动换行，且不影响全站弹窗 */
+.contract-manage-dialog .el-form-item__label {
   white-space: normal;
-  line-height: 1.2;
+  line-height: 1.4;
 }
 </style>
diff --git a/src/views/settlement/receivable-payable-detail.vue b/src/views/settlement/receivable-payable-detail.vue
index 2faac17..ddeafd7 100644
--- a/src/views/settlement/receivable-payable-detail.vue
+++ b/src/views/settlement/receivable-payable-detail.vue
@@ -166,8 +166,13 @@
       <div class="settlement-detail-page__adjust-toolbar">
         <el-button type="primary" plain @click="addManualAdjustRow">新增费用项</el-button>
       </div>
-      <el-table v-loading="adjustDialog.loading" :data="adjustRows" border>
-        <el-table-column type="index" label="序号" width="64" align="center" />
+      <el-table
+        v-loading="adjustDialog.loading"
+        :data="adjustRows"
+        border
+        class="settlement-detail-page__adjust-table"
+      >
+        <el-table-column type="index" label="序号" width="64" align="center" header-align="center" />
         <el-table-column label="手工费用项目" min-width="180" align="center">
           <template #default="{ row }">
             <el-input
@@ -1319,6 +1324,7 @@ export default {
 
   :deep(th.el-table__cell) {
     background: #f5f7fa;
+    text-align: center !important;
   }
 
   :deep(.el-table__row:nth-child(even) td.el-table__cell) {
@@ -1362,6 +1368,22 @@ export default {
   margin-bottom: 8px;
 }
 
+.settlement-detail-page__adjust-table {
+  :deep(th.el-table__cell) {
+    text-align: center !important;
+  }
+
+  :deep(.el-input-number),
+  :deep(.el-input),
+  :deep(.el-select) {
+    width: 100% !important;
+  }
+
+  :deep(.el-input-number .el-input__inner) {
+    text-align: right;
+  }
+}
+
 .settlement-detail-page__generate-search {
   margin-bottom: 16px;
   padding: 12px 12px 4px;