ccdi/docs/reports/implementation/2026-04-23-info-maintenance-toolbar-unification-implementation.md

信息维护页面头部按钮统一实施记录

1. 实施目标

将“信息维护”菜单下各前端页面的 搜索 / 重置 按钮统一移动到业务按钮所在操作行，并放在业务按钮左侧，覆盖常规页、征信维护页和中介库管理页。

2. 实施范围

本次实际调整的前端文件如下：

• ruoyi-ui/src/views/ccdiBaseStaff/index.vue
• ruoyi-ui/src/views/ccdiStaffRecruitment/index.vue
• ruoyi-ui/src/views/ccdiStaffTransfer/index.vue
• ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue
• ruoyi-ui/src/views/ccdiStaffEnterpriseRelation/index.vue
• ruoyi-ui/src/views/ccdiCreditInfo/index.vue
• ruoyi-ui/src/views/ccdiEnterpriseBaseInfo/index.vue
• ruoyi-ui/src/views/ccdiIntermediary/index.vue
• ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue
• ruoyi-ui/src/views/ccdiAccountInfo/index.vue
• ruoyi-ui/src/views/ccdiCustFmyRelation/index.vue
• ruoyi-ui/src/views/ccdiCustEnterpriseRelation/index.vue
• ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

页面口径分为三类：

1. 常规页
   员工信息维护、招聘信息维护、员工调动记录、员工亲属关系维护、员工实体关系维护、实体库管理、账户库管理、信贷客户家庭关系、信贷客户实体关联、招投标信息维护。

2. 特殊业务按钮页
   征信维护，保留 批量上传征信HTML 语义，只统一按钮所在行。

3. 组件拆分页
   中介库管理，保留 SearchForm 查询字段组件，但把 搜索 / 重置 的展示职责收回父页面。

3. 实施内容

3.1 常规页

• 删除查询表单末尾用于展示 搜索 / 重置 的 el-form-item
• 在原有 el-row.mb8 操作行最左侧新增 搜索、重置
• 保留原有业务按钮顺序、权限和显示逻辑

统一后的顺序为：

搜索 -> 重置 -> 页面原有业务按钮 -> right-toolbar

3.2 征信维护

• 删除查询表单末尾的 搜索 / 重置
• 在操作行最左侧新增 搜索 / 重置
• 保持 批量上传征信HTML 按钮文案和上传链路不变

统一后的顺序为：

搜索 -> 重置 -> 批量上传征信HTML -> right-toolbar

3.3 中介库管理

• SearchForm.vue 移除 搜索 / 重置 的展示代码
• 父页面 index.vue 在操作行最左侧新增 搜索 / 重置
• 父页面补充 resetQuery，用于清空查询参数并刷新列表
• 保持两类导入按钮、两类失败记录按钮和详情维护链路不变

统一后的顺序为：

搜索 -> 重置 -> 新增 -> 导入中介和亲属信息 -> 导入中介实体关联关系 -> 失败记录按钮 -> right-toolbar

4. TDD / 结构校验

为避免直接改模板后再“凭感觉确认”，本次先编写了临时结构校验脚本，先跑出失败，再修改页面：

node output/playwright/info-maintenance-toolbar-check.js

初次运行结果：

• 当前各页面查询表单内仍然包含 搜索 / 重置
• 中介库 SearchForm 仍然包含 搜索 / 重置
• 各页面操作行中缺少统一放置在左侧的 搜索 / 重置

页面改造完成后再次运行，同一脚本返回：

• 信息维护头部按钮结构校验通过

5. 构建验证

5.1 Node 版本

执行命令：

source ~/.nvm/nvm.sh && cd ruoyi-ui && nvm use

结果：

• 命中 ruoyi-ui/.nvmrc
• 使用 node v14.21.3

5.2 前端构建

执行命令：

source ~/.nvm/nvm.sh && cd ruoyi-ui && nvm use >/dev/null && npm run build:prod

结果：

• 构建成功
• 无新增 Vue 模板语法错误
• 仅保留项目原有的打包体积告警

6. 真实页面浏览器验证

6.1 验证方式

• 使用真实前端开发服务，不打开 prototype 页面
• 使用 Playwright 打开真实业务路由
• 先登录系统，再进入代表页验证

启动前端：

source ~/.nvm/nvm.sh && cd ruoyi-ui && nvm use >/dev/null && npm run dev

登录与页面验证覆盖以下三类代表页：

• http://localhost:1025/maintain/baseStaff
• http://localhost:1025/maintain/creditInfo
• http://localhost:1025/maintain/intermediary

6.2 员工信息维护

验证结果：

• 查询条件区不再展示 搜索 / 重置
• 操作行顺序为 搜索 -> 重置 -> 新增 -> 导入 -> right-toolbar
• 在页面内输入姓名后点击 重置，输入框成功清空

6.3 征信维护

验证结果：

• 查询条件区不再展示 搜索 / 重置
• 操作行顺序为 搜索 -> 重置 -> 批量上传征信HTML -> right-toolbar
• 在页面内输入姓名后点击 重置，输入框成功清空
• 批量上传征信HTML 按钮仍正常显示

6.4 中介库管理

验证结果：

• SearchForm 仅保留查询字段，不再展示 搜索 / 重置
• 父页面操作行顺序为 搜索 -> 重置 -> 新增 -> 导入中介和亲属信息 -> 导入中介实体关联关系 -> right-toolbar
• 在页面内输入名称后点击 重置，输入框成功清空

7. 进程清理

测试完成后已主动关闭：

• Playwright 浏览器会话
• 前端开发进程 npm run dev

未保留测试进程占用端口。

8. 风险说明

• 当前工作区中部分前端页面和后端文件本身已存在其他未提交改动，本次实现没有回退这些既有改动，只在头部按钮结构范围内继续追加修改。
• 因同名文件中存在先前改动，本轮未直接执行代码提交，避免误把无关改动一起纳入提交。