loan-pricing/doc/implementation-report-2026-05-18-workflow-list-horizontal-scroll.md

流程列表列宽连续展示实施记录

修改时间

• 2026-05-18

修改范围

• ruoyi-ui/src/views/loanPricing/workflow/index.vue

修改内容

• 将流程列表表格字段改为最小列宽布局，宽屏下自动铺满容器，窄屏下通过表格横向滚动查看。
• 加宽“业务方流水号”“客户内码”“客户名称”“创建者”等关键字段最小列宽，避免当前业务数据被省略或换行截断。
• 将关键字段列的 show-overflow-tooltip 省略展示方式改为最小列宽完整展示，并覆盖 Element UI 默认省略号样式。
• 将“操作”列固定在右侧，并通过最小列宽布局让主体列自动铺满，避免固定列与主体列之间出现中间空白断开。

影响说明

• 本次仅调整流程列表前端表格展示，不修改接口、后端查询逻辑、数据库结构和权限逻辑。
• 字段内容较长时优先按最小列宽完整展示，页面可通过横向滚动查看完整列表。

验证

• 已执行 source ~/.nvm/nvm.sh && nvm use 14.21.3 && npm run build:prod，前端生产构建通过，仅存在既有资源体积 warning。
• 已复用本机前端 http://localhost:1024/ 与后端 http://localhost:63310 进行真实页面验证。
• 已通过 browser-use 打开真实流程列表页 http://localhost:1024/loanPricing/workflow 验证页面标题为“贷款利率定价系统”，页面非空且无浏览器 error/warn 日志。
• 在真实页面验证流程列表：
  • 在 1707x517 视口下，表格主体 scrollWidth=2020、clientWidth=1607，确认窄屏仍可横向滚动。
  • 在 2167x542 视口下，表格主体 scrollWidth=2067、clientWidth=2067，确认宽屏下表格自动铺满容器。
  • “操作”列固定在表格右侧，固定列宽度约 112px。
  • 固定“操作”列左侧间距 gapBeforeFixed=0，右侧尾部间距 trailingGapAfterFixed=0，未出现中间或尾部大块空白。
  • “业务方流水号”“客户内码”“客户名称”“创建者”单元格样式为 text-overflow: clip、overflow: hidden、white-space: nowrap，当前列表关键字段 BRANCH_SCOPE_20260518_MANAGER、测试支行管理员-8920100 等完整展示且未使用省略号截断。