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

2026-04-23 15:53:32 +08:00
parent 50c177da78
commit 129e44c808
1 changed files with 263 additions and 0 deletions
--- a/docs/plans/frontend/2026-04-23-info-maintenance-toolbar-unification-frontend-implementation.md
+++ b/docs/plans/frontend/2026-04-23-info-maintenance-toolbar-unification-frontend-implementation.md
@@ -0,0 +1,263 @@
+# 信息维护页面头部按钮统一前端实施计划
+
+> **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` 查询字段组件、两类导入按钮、两类失败记录链路。
+- 前端构建成功，真实浏览器验证通过，测试进程已关闭。