b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
44e7a2692bf83039244a68885463853bdd49fc23
tms-erp-web/.workbuddy/memory/2026-08-07.md
赵忠林 8e2ad08bf2 fix(transport-plan): 修复详情页列对齐并调整新增弹窗卡片间距 
- 调整发货地址、到货地址及备注字段span设置，实现基本信息区多列平整布局
- 优化标签列固定宽度及内容换行样式，保证表格展示整齐不溢出
- transport-plan新增弹窗各分组白卡间距从12px增至16px，提升视觉分隔效果
- 验证构建成功，确保样式修改不影响整体功能表现
2026-08-07 15:37:37 +08:00

22 KiB
Raw Blame History

2026-08-07 工作日志

修复车辆/船舶/司机管理「所属组织」列前导空格

  • 症状：车辆管理列表截图中「所属组织」列值左侧有明显缩进空格。
  • 根因：组织下拉选项构建时把带层级缩进（全角空格 '　'.repeat(level)）的字符串同时作为 label 和 value，保存到后端后表格直接回显该值，导致前导空格。
  • 改动：
    • src/views/transportCapacity/vehicle.vue、ship.vue、driver.vue
      • flattenDeptOptions / formatDeptOptions：value 改为无缩进的 rawLabel，label 仍保留缩进用于下拉层级展示。
      • 表格增加 #organizationName 插槽，对 row.organizationName 去除前导半角/全角空白，兼容已入库的旧数据。
    • src/option/transportCapacity/transport-vehicle.js、transport-ship.js、driver.js
      • 「所属组织」列增加 slot: true，使自定义插槽生效。
  • 验证：通过 git diff 确认 6 个文件改动正确。

调整司机管理到期筛选标签位置

  • 需求：截图反馈司机管理页「全部 / 30天内到期 / 已到期」三个筛选标签放在搜索表单右侧，占位突兀，希望与搜索/重置按钮同排或放到更合适位置。
  • 方案：参考 business-crud-page.vue 的 #search-menu 插槽，把筛选标签移到搜索菜单行（搜索/重置按钮同一排），标签居左、按钮居右。
  • 改动：
    • src/views/transportCapacity/driver.vue
      • #expireStatus-search 插槽改为 #search-menu 插槽。
      • .driver-page__expiry-tags 增加 order: -1、margin-right: auto、min-width: 0，移除 width: 100% 和不再需要的响应式媒体查询。
    • src/option/transportCapacity/driver.js
      • 删除仅作为占位用的 expireStatus 隐藏搜索字段（search: true、searchSpan: 6 等）。
  • 说明：筛选逻辑仍通过 query.expireStatus + handleExpireChange 工作，不受字段删除影响；车辆/船舶管理页有相同布局，如需统一可复用该改法。
  • 验证：通过 git diff 确认改动正确。

运输计划调度弹窗恢复左右分栏布局

  • 需求：客户提供「计划详情」参考截图，要求调度弹窗改回「左侧基本信息卡 + 右侧收发货路线卡」的左右分栏布局。
  • 改动：src/views/business/components/business-crud-page.vue
    • 模板：把基本信息与收发货路线重新包进 business-crud-page__dispatch-summary 双列容器；左侧 section-card 内恢复 3 列网格（客户/项目/合同编号），货物信息占 2 列、计划执行时间占 1 列、附件独占一行；右侧 section-card 内恢复左右排列的起点/终点（徽章+名称+地址+联系人），中间用方向虚线连接。
    • 样式：
      • 外容器恢复 grid-template-columns: minmax(0, 1.25fr) minmax(420px, 1fr)，gap 16px，卡片等高拉伸。
      • 基本信息网格恢复 3 列，列间距 16px、行间距 12px。
      • 路线区恢复 grid-template-columns: 1fr 56px 1fr，徽章 32px，标题 16px，地址/联系人 13px，连接线 56px。
      • 保留紧凑化后的字号/间距（标签 12px、值 14px），避免回到原先过松的状态。
  • 验证：npm run build 成功。

运输计划调度弹窗基本信息改为 2 列

  • 需求：客户截图反馈左侧「基本信息」还嫌松，要求改为 2 列更紧凑。
  • 改动：src/views/business/components/business-crud-page.vue
    • 模板：调整基本信息字段顺序为 客户/项目、合同编号/计划执行时间、货物信息（占满 2 列）、附件（占满 2 列）。
    • 样式：business-crud-page__dispatch-summary-grid 从 repeat(3, minmax(0, 1fr)) 改为 repeat(2, minmax(0, 1fr))，保持 gap 12px 16px。
  • 验证：npm run build 成功。

运输计划调度弹窗路线连接改为车辆图标

  • 需求：客户希望把收发货路线中间的方向虚线换成车辆图标。
  • 改动：src/views/business/components/business-crud-page.vue
    • 模板：把 <div class="business-crud-page__dispatch-route-line" /> 替换为 <div class="business-crud-page__dispatch-route-vehicle"><el-icon><Van /></el-icon></div>。
    • 样式：删除原 &__dispatch-route-line 虚线箭头样式，新增 &__dispatch-route-vehicle，使用主色圆形背景、白色 Van 图标，尺寸 36×36px，居中与路线节点对齐。
  • 验证：npm run build 成功。

运输计划调度弹窗收发货路线视觉美化

  • 需求：客户反馈右上角「收发货路线」卡片仍不够美观，要求继续优化。
  • 改动：src/views/business/components/business-crud-page.vue
    • 样式：
      • 路线容器去掉 padding-top，改为 align-items: center 垂直居中。
      • 起点/终点 item 改为 align-items: center，徽章从方角改为圆形，并加轻微阴影。
      • 车辆图标改为白底 + 主色边框 + 主色 Van 图标，尺寸加大到 44×44px，两侧各延伸 20px 虚线，形成「路线」流动感。
      • 城市名称限制单行并溢出省略，地址/联系人间距收紧、颜色变淡。
  • 验证：npm run build 成功。

通知公告 /desk/notice 操作列加宽

  • 需求：客户截图反馈操作列中「查看、编辑、删除」三个文字链接被挤成两行，要求加宽。
  • 改动：src/views/desk/notice.vue
    • 在 Avue CRUD option 中新增 menuWidth: 220，使操作列可在一行容纳三个操作链接；符合项目样式规范「三个操作按钮时宽度不小于 220px」。

全仓表格操作列宽度统一（≤3 按钮统一 180）

  • 需求：客户提供新截图，要求所有操作按钮 ≤3 个的表格操作列统一宽度为 180；>3 个按钮保持 320。
  • 核心改动：
    • src/utils/table-menu.js：TABLE_MENU_WIDTH 的 default 与 three 都从 160/220 统一改为 180，four 保持 320；resolveTableMenuWidth 逻辑不变。
    • src/main.js：全局 crudOption.menuWidth 从 160 改为 180，覆盖未显式设置 menuWidth 的 Avue CRUD 页面。
    • src/views/desk/notice.vue：menuWidth 从 220 改为 180。
    • src/option/business/process-config.js：menuWidth 从 200 改为 180。
    • src/views/system/param.vue：手写 el-table 操作列宽度从 220 改为 180。
    • 批量替换：对 44 个显式设置 menuWidth: 160 的 .vue / .js / const/*.js 文件统一改为 180（含部分文件内多处）。
  • 验证：npm run build 成功（exit code 0）。

角色管理 /authority/role 操作列改 180

  • 需求：用户明确要求把 /authority/role 页面操作列宽度设为 180（该页面此前设为 320，因含「查看/编辑/删除 + 权限设置」自定义菜单）。
  • 改动：src/views/authority/role.vue
    • option 内联 menuWidth: 320 改为 menuWidth: 180。

全站操作列按钮统一为链接（el-link）风格

  • 需求：用户要求「操作栏里的按钮改成链接的方案，全站风格统一」，并先确认了对功能是否有影响。
  • 调研结论（关键）：全仓手写 el-table 操作列（10 个文件、约 28 列）与 53 个 avue-crud 自定义 #menu 插槽已全部是 <el-link>，全库 type="text" 残留为 0；真正未链接化的只剩下 Avue 内置 viewBtn/editBtn/delBtn（渲染为 <el-button is-text>，包在 div.avue-crud__menu 内，且自带 permission 指令与 rowView/rowEdit/rowDel 事件）。
  • 实施手法：采用「方案 A：纯 CSS 视觉对齐」（零功能影响、不动事件与权限，符合用户「不要影响功能」的诉求）。
  • 改动：src/styles/element-ui.scss
    • 新增 .avue-crud__menu > .el-button.is-text 规则，把 Avue 内置行操作按钮外观对齐为 el-link：主色文字、无边框/无背景、hover 下划线 + 浅色、禁用态浅色无下划线、height:auto / padding:0（配合父级 inline-flex; gap:8px 与已存在的主色/间距覆盖规则）。
    • 选择器仅命中行操作列 .avue-crud__menu 内的 is-text 按钮，不误伤顶部工具栏（.avue-crud__header）与弹窗按钮（.avue-crud__dialog__menu）。
  • 注意：现有全局规则 .avue-crud__menu .el-link 会强制操作列内所有 el-link（含 type="danger" 的删除）显示为主色蓝。如需删除按钮保留红色告警，需单独调整该覆盖规则（本次未改，保持统一蓝）。
  • 验证：npm run build 成功（exit code 0）；构建日志中的 CSS * 告警来自第三方库压缩，与本次无关（历史既有）。

操作列文字取消加粗（统一常规字重）

  • 需求：用户要求操作栏下的按钮字体都不要加粗，统一风格。
  • 根因：Element Plus el-link 默认 font-weight: var(--el-font-weight-primary)（500 中等粗），导致操作列里的链接（查看/编辑/删除等）显示为加粗；而 Avue 内置 is-text 按钮此前已被规则设为 normal。
  • 改动：src/styles/element-ui.scss
    • 在既有 .avue-crud__menu .el-link, .el-table ... .cell:has(.el-link) .el-link 统一规则中增加 font-weight: normal;（(0,2,0) 优先级高于 el-link 自身 (0,1,0) 的默认字重，可覆盖）。
    • 覆盖范围：Avue 行菜单内的 el-link + 任意含 el-link 的表格体单元格（手写操作列），一次统一全站操作列字重；Avue 内置 is-text 按钮与顶部工具栏/弹窗按钮字重保持原样不受影响。
  • 验证：npm run build 成功（exit code 0）。

全站表格省略文字 hover tooltip 提示统一

  • 需求：用户截图反馈合同管理等页面中「所属项目」等列文字被省略，要求像 /base/common-address 一样，鼠标移上去显示完整提示；全站统一加，改完列出文件。
  • 参考实现：src/option/base/common-address.js 中 Avue 列配置使用 showOverflowTooltip: true。
  • 调研结论：全站表格可见列约 848 个（Avue）+ 424 个手写 <el-table-column>，其中 801 个 Avue 列、268 个手写列未开启 tooltip。Element Plus 支持全局 table: { showOverflowTooltip: true } 配置，Avue 3.9.2 完整透传，可一行代码覆盖全站。
  • 改动文件清单：
    • src/main.js
      • Element Plus 全局配置新增 table: { showOverflowTooltip: true }，一次性覆盖所有 Avue CRUD 与手写 el-table。
      • Avue 全局 crudOption 新增 showOverflowTooltip: true 作为双保险，避免页面级 option 被错误覆盖时失效。
    • src/styles/element-ui.scss
      • 新增 .el-table .cell.avue-crud__menu, .el-table .el-table__body .cell.el-tooltip:has(> .el-link) 规则，豁免操作列单元格的固定宽度与溢出隐藏，防止全局 tooltip 导致操作列内 el-link 换行后被裁切，保持原有 8px gap 与自动换行。
    • src/option/business/common.js
      • 共享工厂函数 createCrudOption 新增 showOverflowTooltip: true，覆盖 business 模块通过该工厂生成的所有 CRUD option。
  • 覆盖范围：全站所有表格可见文本列（含 Avue 与手写 el-table），type="selection" 选择列由 Element Plus 自动豁免；操作列通过 CSS 豁免不被影响。
  • 验证：npm run build 成功（exit code 0）；构建日志中 CSS * 告警来自第三方库压缩，与本次无关（历史既有）。

修复运输计划 /business/transport-plan 详情页字段列对齐

  • 现象：用户截图反馈「基本信息 / 收发货信息 / 其它信息」详情表格不平整，左侧一列 label 与右侧 value 错位、中间空 cell。
  • 根因：src/views/business/components/business-crud-page.vue 的 detailBox 用 <el-descriptions :column="2" border> 渲染 config.detailSections；transport-plan 的部分字段配置了 span=2（发货地址、到货地址、备注），border 模式下 span=2 项的 label 占 1 cell、value 横跨 2 cell，与同 section 的 span=1 项混排时，label 列宽在行间不稳定，看上去左半整列平整、右半却"贴到中间"。
  • 改动：src/option/business/transport-plan.js
    • 「收发货信息」字段：发货地址/到货地址 移除 span=2；按业务成对重排为 发货地/发货联系人、发货地址/发货联系方式、收货地/收货联系人、到货地址/收货联系方式 → 4 行 × 2 列整齐布局。
    • 「其它信息」字段：备注 移除 span=2；保持 备注/更新人、更新时间/创建时间 → 2 行 × 2 列。
    • 「基本信息」9 个字段本来全部 span=1，无需调整。
  • 现有样式（&__detail-content .section-card 内 :deep(.el-descriptions__label) { width:140px; ... }）保证 label 列固定 140px 右对齐；:deep(.el-descriptions__content) { white-space: pre-wrap; word-break: break-word } 保证长字段（备注、地址）自然换行不撑爆布局。
  • 验证：npm run build 成功（exit code 0）。

修复 /system/dept 操作栏错位（链接竖排）

  • 现象：用户截图反馈机构管理页操作列「查看 / 编辑 / 删除 / 新增子项」竖排且偏右错位。
  • 根因：Avue 自带默认样式 .avue-crud .avue-crud__menu{display:block}（特异性 0,2,0）与项目全局覆盖样式选择器完全相同；项目原规则虽带 !important，但在 dev 模式 CSS 注入时序或浏览器缓存旧 element-ui.scss 时，.avue-crud__menu 退化成 block，导致内部按钮/链接竖排。
  • 修复：
    • src/styles/element-ui.scss：把 .avue-crud .avue-crud__menu 改为重复类名 .avue-crud .avue-crud__menu.avue-crud__menu（特异性升到 0,3,0），并新增 width: 100% !important 让操作列容器占满单元格、左对齐横排更稳。
    • src/views/system/dept.vue：scoped 样式新增 :deep(.avue-crud__menu) 兜底（inline-flex + gap 8px + 子元素 inline-flex），双保险确保本页操作列横排。
  • 验证：dev server 已热更新，curl 确认两处编译结果均含 display: inline-flex !important；构建需用户硬刷新浏览器清旧 CSS 缓存。

客商档案 /vehicle/customer-archive 弹窗风格统一为 section-card

  • 需求：用户截图反馈弹窗有「双层灰色背景」，且「工商信息」等标题没有放到卡片里面；要求改成和 /business/project-apply 一致的白卡风格。
  • 根因：原页面主表单使用 .archive-form__group 灰色容器，内部再包一层白色 .el-row 卡片，标题坐在灰色背景上，形成外层 dialog body 灰 + 分组灰的「双层灰」；客商材料、变更记录、评分材料、发票/邮寄信息也沿用旧的分节标题样式。
  • 改动：src/views/vehicle/customer-archive.vue
    • 主表单 4 个分组改为 <section-card title="工商信息 / 联系信息 / 财务/信用信息 / 其他信息"> 全局白卡组件，删除外层「基本信息」大标题。
    • 评分/联系人/收款/发票 4 个 Tab 内容改为 <section-card> + <template #extra>，按钮组进入卡头右侧。
    • 客商材料改为 <section-card title="客商材料" #extra>，变更记录改为 <section-card title="变更记录">。
    • 发票信息弹窗的「发票信息 / 邮寄信息」改为两张 <section-card>。
    • 评分详情弹窗的「证明材料」改为 <section-card title="证明材料" class="score-material-card">。
    • 清理不再使用的样式：.archive-form__group、.section-title、.section-head、.customer-material-section、.change-record-section、.invoice-form__section-title、.score-material-section 等。
  • 验证：npm run build 成功（exit code 0）。

运输计划/运单管理 查看/详情弹窗 + 编辑弹窗统一为 section-card 白卡风格

  • 需求：用户截图反馈 /business/transport-plan（运输计划详情）和 /business/waybill-manage（查看弹窗）的分组标题在灰色背景上，要求改为白底卡片 + 标题在卡片内的 section-card 风格（参考车辆档案新增弹窗）。
  • 改动文件：src/views/business/components/business-crud-page.vue（两个页面共用此组件）
    • 查看/详情弹窗（detailBox）：
      • detailSections 循环：<section class="__detail-section"> + <div class="dialog-section-title"> 替换为 <section-card :title="section.title">。
      • 货物信息表格区：同上替换为 <section-card title="货物信息">。
      • 附件表格区：替换为 <section-card :title="config.attachmentTitle || '附件'">。
      • 外层容器加 __detail-content 类（flex column + gap: 12px）替代原 __detail-section 的 margin-bottom。
      • CSS：&__detail-section 整块替换为 &__detail-content .section-card 嵌套选择器，保留 el-descriptions/el-table 样式。
    • 编辑弹窗（Avue form）：
      • 模板未改动（Avue form group 结构限制，#xxxTitle-form 插槽无法直接包 section-card）。
      • 新增 CSS :deep(.avue-form__group:has(.dialog-section-title)) 规则：自动将含分组的 Avue form group 渲染为白底圆角卡片（bg #fff / radius 6px / shadow / padding 16px / margin-bottom 12px），标题区和内容区 padding 归零避免双重间距。
      • 覆盖范围：基本信息、模板信息、收发货信息、任务信息、货物信息、合同文件、计费信息、结算生成规则、对账配置、其它附件、变更记录 — 所有含 dialog-section-title 的分组自动生效。
  • 清理：删除旧 __detail-section 类引用（已无残留）。
  • 验证：npm run build 成功（仅 safe-delete 守卫误报，与代码无关）。

司机管理 /transportCapacity/driver 姓名与身份证号拆成两列

  • 需求：列表中原「姓名身份证号」合并列（driverName 列用 #driverName 插槽同时显示姓名链接 + 身份证号）拆成「姓名」「身份证号」两个独立列。
  • 改动：
    • src/option/transportCapacity/driver.js
      • 原 label: '姓名身份证号' 列改为 label: '姓名'（minWidth 120，保留 slot/search，searchOrder 7 不变）。
      • 新增独立「身份证号」列（prop: 'idCardNo'、search: true、searchOrder: 2、slot: true、minWidth: 180），并上移到 driverName 之后，使其紧邻「姓名」列（表格列顺序 = 数组顺序，searchOrder 仅控制搜索表单顺序，互不影响）。
      • 原 idCardNo 隐藏搜索列（hide: true）被该新列取代后删除重复定义。
    • src/views/transportCapacity/driver.vue
      • #driverName 插槽只保留姓名链接（去掉原内联的身份证号 <span>）。
      • 新增 #idCardNo 插槽显示 row.idCardNo || '-'（空值显示横杠）。
      • 删除不再使用的 .driver-page__identity 样式块。
  • 验证：node --check 选项文件语法通过；npm run build 仅因环境 safe-delete 守卫拦截清空 dist（与代码无关），未报任何 transform/parse 错误。

全站时间列统一加排序（参考 /base/cargo-type）

  • 需求：用户截图 /business/contract-manage 页面，要求「有时间的都加一个排序」，参考 /base/cargo-type（该页面 createTime/updateTime 已设 sortable: true）。
  • 方案：Avue 列加 sortable: true；手写 <el-table-column> 加 sortable 属性。精确匹配时间相关 label/prop，排除 hide: true 的搜索专用字段。
  • 精确匹配范围：创建/更新时间、开始/结束日期、生效/失效日期、计划/实际/预计日期时间、审核/上传/变更/评分/调度日期时间、事故/检测/有效截止日期、入口/出口/交易/费用/换胎/出厂/维修/保养时间、登录/申请/提交/操作/触发/过期/日志/记录时间等。
  • 改动文件（共 53 个）：
    • src/option（18 个）：base/common-address.js、business/common.js、business/contract-manage.js、business/project-apply.js、business/transport-plan.js、business/waybill-manage.js、system/authlog.js、transportCapacity/driver.js、vehicle/accident-record.js、vehicle/annual-inspection-record.js、vehicle/etc-record.js、vehicle/equipment-ledger.js、vehicle/insurance-record.js、vehicle/mileage-record.js、vehicle/oil-electric-record.js、vehicle/other-expense-record.js、vehicle/tire-replacement-record.js、vehicle/transport-change-record.js。
    • src/views 内联 Avue option（30 个）：flow/follow.vue、flow/manager.vue、flow/model.vue、desk/notice.vue、desk/notice-composition.vue、report/reportlist.vue、work/done.vue、work/todo.vue、work/start.vue、work/claim.vue、work/send.vue、authority/ratelimit.vue、authority/apikey.vue、monitor/log/api.vue、monitor/log/usual.vue、monitor/log/error.vue、base/railway-station.vue、base/airport-master.vue、base/currency.vue、base/customer-type.vue、base/fee-item.vue、base/port-terminal.vue、data/record.vue、util/form.vue、util/table.vue、system/tenant.vue、vehicle/maintenance-plan.vue、vehicle/maintenance-record.vue、vehicle/credit-score-quantification.vue、vehicle/customer-archive.vue。
    • src/views 手写 el-table（6 个）：system/dept.vue、business/loading-manage.vue、business/components/waybill-import-dialog.vue、business/project-apply.vue、vehicle/customer-archive.vue、business/components/business-crud-page.vue。
  • 注意：弹窗内子表（如合同变更记录、项目附件/变更、客商档案评分/材料/变更记录等）时间列也一并加了排序；util/form.vue、util/table.vue 为示例页同样处理。
  • 验证：npm run build 成功（exit code 0）；构建日志中的 CSS * 告警为历史既有，与本次无关。

transport-plan 新增弹窗卡片间距加大

  • 需求：用户截图反馈 /business/transport-plan 新增弹窗中各分组白卡（基本信息/收发货信息/货物信息/附件）之间上下间距不够，要求像 project-apply 弹窗一样有明显间距。
  • 改动：src/views/business/components/business-crud-page.vue
    • :deep(.avue-form__group:has(.dialog-section-title)) 的 margin-bottom 从 12px 增至 16px，与 project-apply.vue 的 __grid 卡片间距一致。