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

16 KiB
Raw Blame History

信息维护页面搜索区四列栅格统一 Implementation Plan

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: 将信息维护同批页面的搜索区统一为每行 4 个字段位的栅格布局，超过 4 个字段自动换行，字段内部控件在所属字段位内铺满。

Architecture: 本次只改前端查询区模板和最小必要样式，不新增公共搜索组件，不改查询逻辑。所有目标页统一使用 el-row + el-col :span="6" 包裹查询项，最后一行不足 4 项时保留空白字段位，不对现有字段做横向拉伸。实施前先写一个临时结构校验脚本，先跑出失败，再逐类页面改造并回归真实页面。

Tech Stack: Vue 2, Element UI, JavaScript, Node.js, Playwright, Markdown

文件结构与职责

  • ruoyi-ui/src/views/ccdiBaseStaff/index.vue 员工信息维护页，5 个查询字段，目标结构为 4 + 1。
  • ruoyi-ui/src/views/ccdiStaffRecruitment/index.vue 招聘信息维护页，6 个查询字段，目标结构为 4 + 2。
  • ruoyi-ui/src/views/ccdiStaffTransfer/index.vue 员工调动记录页，6 个查询字段，包含日期范围控件，目标结构为 4 + 2。
  • ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue 员工亲属关系维护页，4 个查询字段，目标结构为单行 4 列。
  • ruoyi-ui/src/views/ccdiStaffEnterpriseRelation/index.vue 员工实体关系维护页，4 个查询字段，目标结构为单行 4 列。
  • ruoyi-ui/src/views/ccdiCreditInfo/index.vue 征信维护页，2 个查询字段，目标结构为 2 + 2 个空白字段位，不拉伸。
  • ruoyi-ui/src/views/ccdiEnterpriseBaseInfo/index.vue 实体库管理页，8 个查询字段，目标结构为 4 + 4。
  • ruoyi-ui/src/views/ccdiIntermediary/index.vue 中介库管理父页，保持查询逻辑与统一操作行，不接管字段渲染。
  • ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue 中介库管理查询子组件，4 个查询字段，改为单行 4 列栅格。
  • ruoyi-ui/src/views/ccdiAccountInfo/index.vue 账户库管理页，9 个查询字段，目标结构为 4 + 4 + 1，并清理局部查询区样式覆盖。
  • ruoyi-ui/src/views/ccdiCustFmyRelation/index.vue 信贷客户家庭关系页，4 个查询字段，目标结构为单行 4 列。
  • ruoyi-ui/src/views/ccdiCustEnterpriseRelation/index.vue 信贷客户实体关联页，4 个查询字段，目标结构为单行 4 列。
  • ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue 招投标信息维护页，4 个查询字段，包含日期范围控件，目标结构为单行 4 列。
  • output/playwright/info-maintenance-search-grid-check.js 临时结构校验脚本，只用于本轮实现前后的失败/通过校验，不提交到 git。
  • docs/reports/implementation/2026-04-23-info-maintenance-search-grid-implementation.md 实施记录，记录改动范围、验证命令、真实页面回归结果与进程清理情况。

实施原则

  • 不新增公共搜索组件，不扩大为整页重构。
  • 不改 queryParams、handleQuery、resetQuery、回车查询、权限和业务按钮逻辑。
  • 搜索区字段统一改为四列栅格：每个查询项固定占 span=6。
  • 日期范围按 1 个字段位处理，只在所属列内铺满。
  • 清理查询区内联 style="width: ...px" 与局部查询区宽度覆盖样式，但不动弹窗和详情表单。
  • 临时测试脚本放在 output/playwright/，不提交到 git。
  • 每个阶段完成后做小步提交，提交说明使用中文。

Task 1: 建立搜索区结构校验基线

Files:

  • Create: output/playwright/info-maintenance-search-grid-check.js

  • Verify: ruoyi-ui/src/views/ccdiBaseStaff/index.vue

  • Verify: ruoyi-ui/src/views/ccdiStaffRecruitment/index.vue

  • Verify: ruoyi-ui/src/views/ccdiStaffTransfer/index.vue

  • Verify: ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue

  • Verify: ruoyi-ui/src/views/ccdiStaffEnterpriseRelation/index.vue

  • Verify: ruoyi-ui/src/views/ccdiCreditInfo/index.vue

  • Verify: ruoyi-ui/src/views/ccdiEnterpriseBaseInfo/index.vue

  • Verify: ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue

  • Verify: ruoyi-ui/src/views/ccdiAccountInfo/index.vue

  • Verify: ruoyi-ui/src/views/ccdiCustFmyRelation/index.vue

  • Verify: ruoyi-ui/src/views/ccdiCustEnterpriseRelation/index.vue

  • Verify: ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

  • Step 1: 编写临时结构校验脚本

const pages = [
  { file: "ruoyi-ui/src/views/ccdiBaseStaff/index.vue", expectedFields: 5 },
  { file: "ruoyi-ui/src/views/ccdiStaffRecruitment/index.vue", expectedFields: 6 },
  { file: "ruoyi-ui/src/views/ccdiStaffTransfer/index.vue", expectedFields: 6 },
  { file: "ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue", expectedFields: 4 },
  { file: "ruoyi-ui/src/views/ccdiStaffEnterpriseRelation/index.vue", expectedFields: 4 },
  { file: "ruoyi-ui/src/views/ccdiCreditInfo/index.vue", expectedFields: 2 },
  { file: "ruoyi-ui/src/views/ccdiEnterpriseBaseInfo/index.vue", expectedFields: 8 },
  { file: "ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue", expectedFields: 4 },
  { file: "ruoyi-ui/src/views/ccdiAccountInfo/index.vue", expectedFields: 9 },
  { file: "ruoyi-ui/src/views/ccdiCustFmyRelation/index.vue", expectedFields: 4 },
  { file: "ruoyi-ui/src/views/ccdiCustEnterpriseRelation/index.vue", expectedFields: 4 },
  { file: "ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue", expectedFields: 4 }
];

脚本至少检查：

  • 只解析页面头部的查询表单：优先圈定首个同时包含 ref="queryForm" 与 v-show="showSearch" 的表单块；若为子组件场景，则只解析 SearchForm.vue 顶层查询表单

  • 查询区中是否出现 el-col :span="6"

  • 查询项数量是否匹配预期

  • 查询区内是否仍保留任何 style="width: Npx" 的固定像素宽度

  • 账户库管理页是否仍存在旧的查询区局部宽度覆盖

  • Step 2: 运行脚本，确认当前结构先失败

Run:

source ~/.nvm/nvm.sh && cd ruoyi-ui && nvm use >/dev/null && cd .. && node output/playwright/info-maintenance-search-grid-check.js

Expected: FAIL，至少提示目标页面尚未统一为 span=6 的四列栅格，且仍存在旧的内联宽度。

  • Step 3: 不提交临时脚本

说明：

  • 脚本只用于本轮校验
  • 保持在 output/playwright/ 未跟踪状态

Task 2: 改造字段较多的 5 个页面

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/ccdiEnterpriseBaseInfo/index.vue

  • Modify: ruoyi-ui/src/views/ccdiAccountInfo/index.vue

  • Step 1: 将员工信息维护页查询区改为四列栅格

<el-form ...>
  <el-row :gutter="16">
    <el-col :span="6">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="queryParams.name" />
      </el-form-item>
    </el-col>
  </el-row>
</el-form>

要求：

  • 5 个字段落为 4 + 1

  • 最后一行保留空白字段位，不拉伸现有字段

  • 输入框、下拉框、树选择等控件在所属字段位内铺满，避免保留旧的固定像素宽度

  • Step 2: 将招聘信息维护页查询区改为四列栅格

Run after edit:

rg -n "<el-col :span=\"6\">|style=\"width: 240px\"" ruoyi-ui/src/views/ccdiStaffRecruitment/index.vue

Expected:

  • 查询区出现 el-col :span="6"

  • 查询区不再保留旧的 240px 固定宽度

  • el-input、el-select 等控件已改为在列内铺满

  • Step 3: 将员工调动记录页查询区改为四列栅格

要求：

  • 调动日期 的 daterange 只占 1 个字段位

  • 仍保留 value-format="yyyy-MM-dd"

  • el-select、el-date-picker 等控件在所属字段位内铺满

  • Step 4: 将实体库管理页查询区改为四列栅格

要求：

  • 8 个字段严格排成 4 + 4

  • 清掉查询区的 240px 固定宽度

  • 下拉与输入控件在各自字段位内统一铺满

  • Step 5: 将账户库管理页查询区改为四列栅格

要求：

  • 9 个字段排成 4 + 4 + 1

  • 清理查询区中所有 style="width: Npx" 固定像素宽度，包括 160px / 180px / 220px

  • 检查并同步清理底部 .query-form ::v-deep .el-form-item 这类会干扰四列布局的局部宽度覆盖

  • el-select 与输入控件全部在所属字段位内铺满

  • Step 6: 运行临时结构校验脚本，确认这 5 个页面通过

Run:

source ~/.nvm/nvm.sh && cd ruoyi-ui && nvm use >/dev/null && cd .. && node output/playwright/info-maintenance-search-grid-check.js

Expected: 这 5 个页面不再报栅格和固定宽度相关失败，其余未改页面仍失败。

  • Step 7: 提交第一批页面改动
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/ccdiEnterpriseBaseInfo/index.vue \
  ruoyi-ui/src/views/ccdiAccountInfo/index.vue
git commit -m "统一信息维护复杂页面搜索区四列栅格"

Task 3: 改造其余常规页面

Files:

  • Modify: ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue

  • Modify: ruoyi-ui/src/views/ccdiStaffEnterpriseRelation/index.vue

  • Modify: ruoyi-ui/src/views/ccdiCreditInfo/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: 将员工亲属关系维护页改为单行四列

要求：

  • 4 个字段刚好占满一行

  • 不改原有按钮行和表格逻辑

  • 输入框和下拉框在字段位内铺满

  • Step 2: 将员工实体关系维护页改为单行四列

要求：

  • 保持现有 label-width="120px"

  • 只替换查询区结构

  • 输入框和下拉框在字段位内铺满

  • Step 3: 将征信维护页改为两字段栅格

要求：

  • 查询区仍只显示 2 个字段

  • 结构上仍使用 4 列栅格

  • 不把 2 个字段拉伸为 50% + 50%

  • 两个输入框在各自字段位内铺满

  • Step 4: 将信贷客户家庭关系与信贷客户实体关联页改为单行四列

Run after edit:

rg -n "<el-col :span=\"6\">|style=\"width: 240px\"" \
  ruoyi-ui/src/views/ccdiCustFmyRelation/index.vue \
  ruoyi-ui/src/views/ccdiCustEnterpriseRelation/index.vue

Expected:

  • 查询区出现 el-col :span="6"

  • 查询区不再保留旧的 240px 固定宽度

  • 输入框和下拉框在字段位内铺满

  • Step 5: 将招投标信息维护页改为单行四列

要求：

  • 申请日期 的日期范围只占 1 个字段位

  • 仍保留原有 dateRange 查询逻辑

  • 输入框与日期范围控件在字段位内铺满

  • Step 6: 提交第二批页面改动

git add \
  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/ccdiCustFmyRelation/index.vue \
  ruoyi-ui/src/views/ccdiCustEnterpriseRelation/index.vue \
  ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
git commit -m "统一信息维护常规页面搜索区四列栅格"

Task 4: 改造中介库管理搜索组件

Files:

  • Modify: ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue

  • Verify: ruoyi-ui/src/views/ccdiIntermediary/index.vue

  • Step 1: 将 SearchForm.vue 查询区改为单行四列栅格

要求：

  • 4 个查询项各占一个 span=6

  • 保留现有 query 事件发射，不改父子通信

  • 输入框和下拉框在字段位内铺满

  • Step 2: 清理 SearchForm.vue 内的固定宽度

Run:

rg -n "width: 220px|width: 180px|width: 260px" ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue

Expected: 无结果。

  • Step 3: 确认父页 ccdiIntermediary/index.vue 不需要额外接管布局逻辑

Run:

rg -n "<search-form|@query|queryParams|showSearch" ruoyi-ui/src/views/ccdiIntermediary/index.vue

Expected: 父页仍只负责查询参数、按钮行和列表刷新，不新增字段渲染职责。

  • Step 4: 提交中介库页面改动
git add ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue
git commit -m "统一中介库管理搜索区四列栅格"

Task 5: 构建校验与真实页面验证

Files:

  • Verify: ruoyi-ui/src/views/ccdiBaseStaff/index.vue

  • Verify: ruoyi-ui/src/views/ccdiEnterpriseBaseInfo/index.vue

  • Verify: ruoyi-ui/src/views/ccdiAccountInfo/index.vue

  • Verify: ruoyi-ui/src/views/ccdiCreditInfo/index.vue

  • Verify: ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue

  • Step 1: 再次运行临时结构校验脚本，确认全部页面通过

Run:

source ~/.nvm/nvm.sh && cd ruoyi-ui && nvm use >/dev/null && cd .. && node output/playwright/info-maintenance-search-grid-check.js

Expected: PASS，输出“信息维护搜索区四列栅格结构校验通过”。

  • Step 2: 使用 nvm 切换前端 Node 版本

Run:

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

Expected: 命中项目 .nvmrc，不使用系统默认 Node。

  • Step 3: 执行前端构建

Run:

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

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

  • Step 4: 启动真实前端页面

Run:

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

Expected: 前端开发服务启动成功，可访问真实业务页面。

说明：

  • 该命令需在单独终端中运行，或以后台会话方式启动后保留服务

  • 不要在唯一执行终端里前台挂起后继续不下去

  • Step 5: 准备真实业务页验证所需后端

要求：

  • 优先复用已在运行的本地后端

  • 若当前没有可用后端，使用 sh bin/restart_java_backend.sh 启动后端，不要手工执行 java -jar

  • 若需要本轮新启动后端，同样在单独终端或后台会话中运行，确保后续还能继续执行 Playwright 验证

  • 记录本轮是否由本次验证启动了后端；若是，则验证结束后要一并关闭

  • 使用真实登录页完成登录，不打开 prototype 页面

  • 默认测试账号可使用 admin / admin123（若本地环境已变更，则以当前可用测试账号为准）

  • Step 6: 使用 @playwright 打开真实业务页面验证代表页

至少覆盖以下路由：

  • /maintain/baseStaff
  • /maintain/enterpriseBaseInfo
  • /maintain/accountInfo
  • /maintain/creditInfo
  • /maintain/intermediary
  • /maintain/staffTransfer
  • /maintain/purchaseTransaction

验证点：

  • 每行固定 4 个字段位

  • 超过 4 个字段自动换行

  • 最后一行不足 4 项时不拉伸已有字段

  • 日期范围仍只占 1 个字段位

  • 搜索、重置仍可正常工作

  • Step 7: 测试结束后关闭验证过程中启动的进程

Expected:

  • 不保留 npm run dev 相关端口占用
  • 如果本轮验证启动了后端，也使用 sh bin/restart_java_backend.sh stop 同步关闭对应后端进程

Task 6: 补实施记录

Files:

  • Create: docs/reports/implementation/2026-04-23-info-maintenance-search-grid-implementation.md

  • Step 1: 记录改动范围

至少包括：

  • 12 个页面文件 + 1 个中介库搜索组件

  • 四列栅格规则

  • 最后一行不足 4 项时保留空白字段位

  • 查询区固定宽度清理范围

  • Step 2: 记录验证命令与结果

至少包括：

  • node output/playwright/info-maintenance-search-grid-check.js

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

  • npm run build:prod

  • Playwright 真实页面验证

  • 测试结束后的进程清理

  • Step 3: 提交实施记录

git add docs/reports/implementation/2026-04-23-info-maintenance-search-grid-implementation.md
git commit -m "补充信息维护搜索区四列栅格实施记录"

完成标准

  • 范围内页面全部改为四列栅格查询区。
  • 每个查询项固定占一个 span=6 字段位。
  • 日期范围不占双列。
  • 最后一行不足 4 项时保留空白字段位，不拉伸已有字段。
  • 查询区不再保留任何 style="width: Npx" 这类旧固定像素宽度。
  • 搜索、重置、回车查询、业务按钮和 right-toolbar 行为不变。
  • 构建通过，真实页面验证通过，测试进程已清理。
Reference in New Issue View Git Blame Copy Permalink