wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
129e44c808a504784264fe92d1abfc0a6536ad14
ccdi/docs/plans/frontend/2026-04-23-info-maintenance-toolbar-unification-frontend-implementation.md

13 KiB
Raw Blame History

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

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:

    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: 提交常规页面改动

    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:

    rg -n "批量上传征信HTML|el-icon-search|el-icon-refresh|right-toolbar" ruoyi-ui/src/views/ccdiCreditInfo/index.vue

    Expected: 页面仍包含 批量上传征信HTML，且 搜索 / 重置 位于统一操作行。

  • Step 5: 提交征信维护页面改动

    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:

    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: 提交中介库管理改动

    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:

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

    Expected: 输出项目要求的 Node 版本，不使用系统默认 Node。

  • Step 2: 执行前端构建，确认模板调整未引入语法或编译错误 Run:

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

    Expected: 构建成功，无 Vue 模板语法错误。

  • Step 3: 启动真实前端页面进行浏览器验证 Run:

    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: 提交验证通过后的前端实现

    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: 提交实施记录

    git add docs/reports/implementation/2026-04-23-info-maintenance-toolbar-unification-implementation.md
git commit -m "补充信息维护页面头部按钮统一实施记录"

完成标准

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