修复流程列表列宽展示

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` 等完整展示且未使用省略号截断。

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

@@ -44,30 +44,30 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="workflowList">
-      <el-table-column label="业务方流水号" align="center" prop="serialNum" width="180" :show-overflow-tooltip="true" />
-      <el-table-column label="客户内码" align="center" prop="custIsn" width="140" :show-overflow-tooltip="true" />
-      <el-table-column label="客户名称" align="center" prop="custName" :show-overflow-tooltip="true" />
-      <el-table-column label="客户类型" align="center" prop="custType" width="100" />
-      <el-table-column label="担保方式" align="center" prop="guarType" width="100" />
-      <el-table-column label="申请金额(元)" align="center" prop="applyAmt" width="120" />
-      <el-table-column label="最终测算利率(%)" align="center" prop="calculateRate" width="120">
+    <el-table v-loading="loading" :data="workflowList" class="workflow-table" style="width: 100%">
+      <el-table-column label="业务方流水号" align="center" prop="serialNum" min-width="320" class-name="workflow-important-column" />
+      <el-table-column label="客户内码" align="center" prop="custIsn" min-width="320" class-name="workflow-important-column" />
+      <el-table-column label="客户名称" align="center" prop="custName" min-width="240" class-name="workflow-important-column" />
+      <el-table-column label="客户类型" align="center" prop="custType" min-width="110" />
+      <el-table-column label="担保方式" align="center" prop="guarType" min-width="120" />
+      <el-table-column label="申请金额(元)" align="center" prop="applyAmt" min-width="140" />
+      <el-table-column label="最终测算利率(%)" align="center" prop="calculateRate" min-width="150">
         <template slot-scope="scope">
           <span>{{ formatRate(scope.row.calculateRate) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="执行利率(%)" align="center" prop="executeRate" width="100">
+      <el-table-column label="执行利率(%)" align="center" prop="executeRate" min-width="120">
         <template slot-scope="scope">
           <span>{{ formatRate(scope.row.executeRate) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="160">
+      <el-table-column label="创建时间" align="center" prop="createTime" min-width="170">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="创建者" align="center" prop="createBy" width="120" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="创建者" align="center" prop="createBy" min-width="220" class-name="workflow-important-column" />
+      <el-table-column label="操作" align="center" fixed="right" min-width="110" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -239,3 +239,12 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.workflow-table ::v-deep .workflow-important-column .cell {
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap;
+  word-break: normal;
+}
+</style>