Files
tms-erp-web/.workbuddy/memory/2026-08-20.md
T
gxwebsoft 37a4eef515 style(settlement): 统一弹窗卡片样式并优化标签页样式
- 将结算调整单编辑弹窗内各板块统一替换为全局 section-card 组件
- “添加费用”按钮移至 section-card 的 #extra 插槽,删除多余样式
- 应付/应收对账页、收付明细弹窗标签页使用 border-card 类型提升视觉效果
- 调整对账页表格区域上间距由 8px 增加到 12px
- 确保修改均通过 SFC 解析与模板编译检查
2026-08-20 14:57:17 +08:00

9.6 KiB
Raw Blame History

2026-08-20 工作日志

保险 OCR 识别模板弹窗列宽调整

  • 调整文件:src/views/base/insurance-ocr-template.vue
  • 修改内容:字段映射表格中,键名列由 min-width="240" 改为 width="120" align="center";自定义映射值列由 min-width="500" 改为 width="360"
  • 原因:原列宽导致表格总宽度超出 860px 弹窗 body 可用区域,输入框右侧字数统计(0/100)被截断看不全。

保险 OCR 识别模板弹窗卡片化

  • 调整文件:src/views/base/insurance-ocr-template.vue
  • 修改内容:将弹窗内表单的白色背景 div 替换为全局 <section-card title="模板信息"> 组件,形成白底圆角卡片;同时为自定义映射值列保留 width="360",避免在卡片内被撑开。
  • 原因:用户希望弹窗表单区域呈现卡片效果,与项目统一的 section-card 分组风格一致。

运输计划调度弹窗表头背景色调整

  • 调整文件: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-cardmargin-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-formmargin-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-cardmargin-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-cardmargin-bottom: 12px
  • 验证:已通过 SFC 解析与模板编译检查。
  • 原因:用户要求 /settlement/transport-reconciliation 页面与预结算单/正式结算单弹窗统一使用白底卡片分隔。

结算调整单编辑弹窗改白底卡片分组

  • 调整文件:src/views/settlement/components/settlement-adjustment-editor.vue
  • 修改内容:将"新增/编辑结算调整单"弹窗内的全部板块由 dialog-section-title + <section> 改为全局 <section-card> 组件,包括:基本信息、调整费用。"调整费用"头部"添加费用"按钮改为 section-card 的 #extra 插槽;删除了不再使用的 .settlement-adjustment-editor__section.settlement-adjustment-editor__section-head 以及 .dialog-section-title 样式块。
  • 间距:沿用全局 .section-cardmargin-bottom: 12px
  • 验证:已通过 SFC 解析与模板编译检查。
  • 原因:用户要求 /settlement/settlement-adjustment 页面与预结算单/正式结算单弹窗统一使用白底卡片分隔。