diff --git 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 new file mode 100644 index 00000000..e7f3fe71 --- /dev/null +++ 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 "\\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` 查询字段组件、两类导入按钮、两类失败记录链路。 +- 前端构建成功，真实浏览器验证通过，测试进程已关闭。