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

# 信息维护页面头部按钮统一前端实施计划

> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 将“信息维护”菜单下所有前端页面的 `搜索 / 重置` 按钮移动到统一操作行，并放在页面原有业务按钮左侧。

**Architecture:** 本次只做前端模板层级调整，不引入新的公共头部组件，不改接口、不改权限、不改查询字段。常规页面统一把查询按钮从表单末尾移到 `el-row.mb8` 左侧；“征信维护”保留 `批量上传征信HTML` 语义；“中介库管理”保留 `SearchForm` 查询字段组件，仅把 `搜索 / 重置` 的展示职责收回父页面。

**Tech Stack:** Vue 2, Element UI, JavaScript, Playwright, Markdown

---

## 文件结构与职责

- `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/ccdiEnterpriseBaseInfo/index.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`
  招投标信息维护页，调整查询按钮与 `新增 / 导入 / 失败记录` 的统一排列。
- `ruoyi-ui/src/views/ccdiCreditInfo/index.vue`
  征信维护页，调整查询按钮与 `批量上传征信HTML` 的统一排列。
- `ruoyi-ui/src/views/ccdiIntermediary/index.vue`
  中介库管理父页，接管 `搜索 / 重置` 的展示位置，并与 `新增 / 两类导入 / 两类失败记录 / right-toolbar` 组成统一操作行。
- `ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue`
  中介库管理查询表单子组件，移除 `搜索 / 重置` 展示，仅保留查询字段与表单引用。
- `docs/reports/implementation/2026-04-23-info-maintenance-toolbar-unification-implementation.md`
  实施完成后补实施记录，记录改动范围、验证方式与结果。

## 实施原则

- 不新增公共组件。
- 不改任何页面的业务按钮文案、权限点、显隐条件和点击行为。
- 不改 `handleQuery`、`resetQuery`、导入、上传、失败记录、详情弹窗等业务逻辑。
- 样式只做最小补充，目标仅为保证统一操作行换行后仍可读、可点。
- 不新增测试文件到 git；如浏览器验证需要临时产物，放到 `output/playwright/` 并保持未跟踪。

## Task 1: 调整 10 个常规页面的统一操作行

**Files:**
- Modify: `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
- Modify: `ruoyi-ui/src/views/ccdiStaffRecruitment/index.vue`
- Modify: `ruoyi-ui/src/views/ccdiStaffTransfer/index.vue`
- Modify: `ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue`
- Modify: `ruoyi-ui/src/views/ccdiStaffEnterpriseRelation/index.vue`
- Modify: `ruoyi-ui/src/views/ccdiEnterpriseBaseInfo/index.vue`
- Modify: `ruoyi-ui/src/views/ccdiAccountInfo/index.vue`
- Modify: `ruoyi-ui/src/views/ccdiCustFmyRelation/index.vue`
- Modify: `ruoyi-ui/src/views/ccdiCustEnterpriseRelation/index.vue`
- Modify: `ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue`

- [ ] **Step 1: 逐页删除查询表单末尾的按钮型 `el-form-item`**
  目标：让查询表单只保留字段，不再在表单内部展示 `搜索 / 重置`。

- [ ] **Step 2: 在每个页面的 `el-row.mb8` 左侧插入统一的 `搜索 / 重置` 按钮**
  顺序固定为 `搜索 -> 重置 -> 页面原有业务按钮 -> right-toolbar`。

- [ ] **Step 3: 保持原有业务按钮顺序不变**
  例如：
  - 实体库管理仍为 `新增 -> 删除 -> 导入 -> 查看导入失败记录`
  - 招投标信息维护仍为 `新增 -> 导入 -> 查看导入失败记录`

- [ ] **Step 4: 如按钮容器出现换行错位，仅补最小样式**
  仅允许补操作行间距、换行或对齐样式，不扩展为整页样式重构。

- [ ] **Step 5: 本地自查这 10 个文件中不再出现“查询表单内按钮 + 下方业务按钮行”的双层结构**
  Run:
  ```bash
  rg -n "<el-form-item>\\s*$|el-icon-search|el-icon-refresh|right-toolbar" \
    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/ccdiEnterpriseBaseInfo/index.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
  ```
  Expected: `搜索 / 重置` 只出现在统一操作行区域，不再留在查询表单末尾。

- [ ] **Step 6: 提交常规页面改动**
  ```bash
  git add \
    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/ccdiEnterpriseBaseInfo/index.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
  git commit -m "统一信息维护常规页面头部按钮布局"
  ```

## Task 2: 调整征信维护页面的特殊按钮布局

**Files:**
- Modify: `ruoyi-ui/src/views/ccdiCreditInfo/index.vue`

- [ ] **Step 1: 删除征信维护查询表单末尾的 `搜索 / 重置`**
  保留姓名、身份证号字段与回车查询能力。

- [ ] **Step 2: 在操作行最左侧插入 `搜索 / 重置`**
  调整后顺序固定为 `搜索 -> 重置 -> 批量上传征信HTML -> right-toolbar`。

- [ ] **Step 3: 保持 `openUploadDialog`、上传弹窗和列表逻辑完全不变**
  本任务只改按钮位置，不改征信上传链路。

- [ ] **Step 4: 自查页面仍然保留“批量上传征信HTML”唯一业务按钮文案**
  Run:
  ```bash
  rg -n "批量上传征信HTML|el-icon-search|el-icon-refresh|right-toolbar" ruoyi-ui/src/views/ccdiCreditInfo/index.vue
  ```
  Expected: 页面仍包含 `批量上传征信HTML`，且 `搜索 / 重置` 位于统一操作行。

- [ ] **Step 5: 提交征信维护页面改动**
  ```bash
  git add ruoyi-ui/src/views/ccdiCreditInfo/index.vue
  git commit -m "统一征信维护页面头部按钮布局"
  ```

## Task 3: 调整中介库管理父子组件职责

**Files:**
- Modify: `ruoyi-ui/src/views/ccdiIntermediary/index.vue`
- Modify: `ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue`

- [ ] **Step 1: 从 `SearchForm.vue` 中移除 `搜索 / 重置` 的展示代码**
  保留查询字段、`ref="queryForm"` 和 `showSearch` 控制。

- [ ] **Step 2: 评估并补齐父页可用的查询 / 重置入口**
  如果当前父页只有 `handleQuery`，则以最短路径补出父页 `resetQuery`，保证它可以清空 `queryParams` 并刷新列表。

- [ ] **Step 3: 在 `ccdiIntermediary/index.vue` 的统一操作行最左侧新增 `搜索 / 重置`**
  顺序固定为：
  `搜索 -> 重置 -> 新增 -> 导入中介和亲属信息 -> 导入中介实体关联关系 -> 两类失败记录 -> right-toolbar`

- [ ] **Step 4: 保持两类导入按钮、两类失败记录按钮和详情维护链路不变**
  不改导入任务状态、不改失败记录弹窗、不改详情容器。

- [ ] **Step 5: 自查父子组件职责已收敛**
  Run:
  ```bash
  rg -n "el-icon-search|el-icon-refresh|handleQuery|resetQuery" \
    ruoyi-ui/src/views/ccdiIntermediary/index.vue \
    ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue
  ```
  Expected:
  - `SearchForm.vue` 不再渲染按钮
  - 父页负责展示 `搜索 / 重置`

- [ ] **Step 6: 提交中介库管理改动**
  ```bash
  git add \
    ruoyi-ui/src/views/ccdiIntermediary/index.vue \
    ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue
  git commit -m "统一中介库管理页面头部按钮布局"
  ```

## Task 4: 构建校验与真实页面浏览器验证

**Files:**
- Verify: `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
- Verify: `ruoyi-ui/src/views/ccdiCreditInfo/index.vue`
- Verify: `ruoyi-ui/src/views/ccdiIntermediary/index.vue`

- [ ] **Step 1: 使用 nvm 切换前端 Node 版本**
  Run:
  ```bash
  source ~/.nvm/nvm.sh && cd ruoyi-ui && nvm use
  ```
  Expected: 输出项目要求的 Node 版本，不使用系统默认 Node。

- [ ] **Step 2: 执行前端构建，确认模板调整未引入语法或编译错误**
  Run:
  ```bash
  source ~/.nvm/nvm.sh && cd ruoyi-ui && nvm use >/dev/null && npm run build:prod
  ```
  Expected: 构建成功，无 Vue 模板语法错误。

- [ ] **Step 3: 启动真实前端页面进行浏览器验证**
  Run:
  ```bash
  source ~/.nvm/nvm.sh && cd ruoyi-ui && nvm use >/dev/null && npm run dev
  ```
  Expected: 本地前端服务可访问。

- [ ] **Step 4: 使用 Playwright 打开真实业务页面验证 3 类代表页**
  页面至少覆盖：
  - `/maintain/baseStaff`
  - `/maintain/creditInfo`
  - `/intermediary`

  验证点：
  - `搜索 / 重置` 已与业务按钮在同一行
  - `搜索 / 重置` 位于业务按钮左侧
  - 点击 `搜索`、`重置` 可正常工作
  - 特殊按钮如 `批量上传征信HTML`、两类中介导入按钮仍可点击

- [ ] **Step 5: 测试结束后关闭前端进程**
  禁止遗留开发服务占用端口。

- [ ] **Step 6: 提交验证通过后的前端实现**
  ```bash
  git add \
    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
  git commit -m "统一信息维护页面头部按钮布局"
  ```

## Task 5: 补实施记录

**Files:**
- Create: `docs/reports/implementation/2026-04-23-info-maintenance-toolbar-unification-implementation.md`

- [ ] **Step 1: 记录本次改动范围**
  列出 13 个前端文件及三类页面口径：常规页、征信维护、中介库管理。

- [ ] **Step 2: 记录验证命令与浏览器实测结论**
  包含 `nvm use`、`npm run build:prod`、Playwright 真实页面验证及关闭进程情况。

- [ ] **Step 3: 提交实施记录**
  ```bash
  git add docs/reports/implementation/2026-04-23-info-maintenance-toolbar-unification-implementation.md
  git commit -m "补充信息维护页面头部按钮统一实施记录"
  ```

## 完成标准

- 信息维护菜单下全部前端页面都不再把 `搜索 / 重置` 放在查询表单最后一个 `el-form-item` 中。
- 所有页面都满足 `搜索 -> 重置 -> 页面原有业务按钮 -> right-toolbar` 的统一顺序。
- 征信维护仍保留 `批量上传征信HTML` 语义与上传链路。
- 中介库管理仍保留 `SearchForm` 查询字段组件、两类导入按钮、两类失败记录链路。
- 前端构建成功，真实浏览器验证通过，测试进程已关闭。