diff --git a/doc/implementation-report-2026-05-18-workflow-list-horizontal-scroll.md b/doc/implementation-report-2026-05-18-workflow-list-horizontal-scroll.md new file mode 100644 index 0000000..b5047c8 --- /dev/null +++ b/doc/implementation-report-2026-05-18-workflow-list-horizontal-scroll.md @@ -0,0 +1,28 @@ +# 流程列表列宽连续展示实施记录 + +## 修改时间 +- 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` 等完整展示且未使用省略号截断。 diff --git a/ruoyi-ui/src/views/loanPricing/workflow/index.vue b/ruoyi-ui/src/views/loanPricing/workflow/index.vue index 3009b33..f7ddb94 100644 --- a/ruoyi-ui/src/views/loanPricing/workflow/index.vue +++ b/ruoyi-ui/src/views/loanPricing/workflow/index.vue @@ -44,30 +44,30 @@ - - - - - - - - + + + + + + + + - + - + - - + +