From e9403662e2a9fb30a94f01f8fefc46d976d13f8a Mon Sep 17 00:00:00 2001 From: wkc <978997012@qq.com> Date: Thu, 23 Apr 2026 16:40:06 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BF=A1=E6=81=AF=E7=BB=B4?= =?UTF-8?q?=E6=8A=A4=E9=A1=B5=E9=9D=A2=E6=90=9C=E7=B4=A2=E5=8C=BA=E5=9B=9B?= =?UTF-8?q?=E5=88=97=E6=A0=85=E6=A0=BC=E5=89=8D=E7=AB=AF=E5=AE=9E=E6=96=BD?= =?UTF-8?q?=E8=AE=A1=E5=88=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...nce-search-grid-frontend-implementation.md | 421 ++++++++++++++++++ 1 file changed, 421 insertions(+) create mode 100644 docs/plans/frontend/2026-04-23-info-maintenance-search-grid-frontend-implementation.md diff --git a/docs/plans/frontend/2026-04-23-info-maintenance-search-grid-frontend-implementation.md b/docs/plans/frontend/2026-04-23-info-maintenance-search-grid-frontend-implementation.md new file mode 100644 index 00000000..bc480d3c --- /dev/null +++ b/docs/plans/frontend/2026-04-23-info-maintenance-search-grid-frontend-implementation.md @@ -0,0 +1,421 @@ +# 信息维护页面搜索区四列栅格统一 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: 编写临时结构校验脚本** + +```js +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: +```bash +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: 将员工信息维护页查询区改为四列栅格** + +```vue + + + + + + + + + +``` + +要求： +- 5 个字段落为 `4 + 1` +- 最后一行保留空白字段位，不拉伸现有字段 +- 输入框、下拉框、树选择等控件在所属字段位内铺满，避免保留旧的固定像素宽度 + +- [ ] **Step 2: 将招聘信息维护页查询区改为四列栅格** + +Run after edit: +```bash +rg -n "|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: +```bash +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: 提交第一批页面改动** + +```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/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: +```bash +rg -n "|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: 提交第二批页面改动** + +```bash +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: +```bash +rg -n "width: 220px|width: 180px|width: 260px" ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue +``` + +Expected: 无结果。 + +- [ ] **Step 3: 确认父页 `ccdiIntermediary/index.vue` 不需要额外接管布局逻辑** + +Run: +```bash +rg -n "/dev/null && cd .. && node output/playwright/info-maintenance-search-grid-check.js +``` + +Expected: PASS，输出“信息维护搜索区四列栅格结构校验通过”。 + +- [ ] **Step 2: 使用 nvm 切换前端 Node 版本** + +Run: +```bash +source ~/.nvm/nvm.sh && cd ruoyi-ui && nvm use +``` + +Expected: 命中项目 `.nvmrc`，不使用系统默认 Node。 + +- [ ] **Step 3: 执行前端构建** + +Run: +```bash +source ~/.nvm/nvm.sh && cd ruoyi-ui && nvm use >/dev/null && npm run build:prod +``` + +Expected: 构建成功，无新增模板语法错误。 + +- [ ] **Step 4: 启动真实前端页面** + +Run: +```bash +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: 提交实施记录** + +```bash +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` 行为不变。 +- 构建通过，真实页面验证通过，测试进程已清理。