ccdi/docs/superpowers/specs/2026-04-23-info-maintenance-search-grid-design.md

信息维护页面搜索区四列栅格统一设计文档

1. 背景

“信息维护”菜单下各页面的头部按钮已经完成统一，但搜索区字段布局仍保持各页各自实现：

• 大部分页面仍使用 el-form 的 inline 横向流式排列
• 字段控件宽度存在 180px、220px、240px、260px 等多种写法
• 当字段数量较多时，不同页面的换行位置和视觉节奏不一致
• 中介库管理页面的搜索区还拆分在独立 SearchForm 组件内

本次需求很明确：信息维护菜单下同一批页面的头部搜索框固定为每行 4 个字段，超过后自动换行，并且每个字段位宽度统一平分。

2. 目标

在沿用上一轮“信息维护页面头部按钮统一”范围的前提下，统一实现以下搜索区规则：

• 搜索区每行固定展示 4 个字段位
• 每个字段位宽度统一平分当前行
• 超过 4 个字段后自动换到下一行
• 日期范围等宽控件仍按 1 个字段位处理
• 字段内部控件在所属字段位内铺满可用宽度
• 不改变原有搜索、重置、回车查询和业务按钮逻辑

3. 范围

本次范围与上一轮“信息维护页面头部按钮统一”保持一致，覆盖以下页面：

• 员工信息维护
• 招聘信息维护
• 员工调动记录
• 员工亲属关系维护
• 员工实体关系维护
• 征信维护
• 实体库管理
• 中介库管理
• 账户库管理
• 信贷客户家庭关系
• 信贷客户实体关联
• 招投标信息维护

对应前端文件包括：

• 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

4. 非目标

• 不新增公共搜索组件
• 不调整头部按钮统一方案
• 不新增展开/收起搜索区交互
• 不改查询参数结构、接口、权限和业务流程
• 不对整页样式做额外重构
• 不引入“部分页面特殊规则”的兼容性分支

5. 当前现状分析

5.1 字段数量差异明显

当前目标页面的搜索字段数量并不一致：

• 2 个字段：征信维护
• 4 个字段：员工亲属关系、员工实体关系、信贷客户家庭关系、信贷客户实体关联、招投标信息维护、中介库管理
• 5 个字段：员工信息维护
• 6 个字段：招聘信息维护、员工调动记录
• 8 个字段：实体库管理
• 9 个字段：账户库管理

这意味着仅靠现有 inline 布局无法稳定保证“一行 4 个字段”的统一结果。

5.2 控件宽度分散

同一批页面中存在大量固定宽度写法，例如：

• 180px
• 220px
• 240px
• 260px

这会让字段宽度规则依赖单个控件实现，而不是依赖统一布局容器，无法满足“每行平分”的要求。

5.3 特殊控件和特殊页面共存

存在以下差异场景：

• 日期范围选择器仍要参与 4 列规则
• 账户库管理字段较多且控件宽度差异明显
• 中介库管理搜索字段由独立 SearchForm 组件维护

如果仅追加样式补丁，容易造成个别页面仍然偏离统一规则。

6. 方案比较

6.1 方案一：仅追加样式类约束

做法：

• 保留现有 inline 结构
• 通过统一 class 和宽度样式约束字段排列

优点：

• 模板改动较少

缺点：

• 受现有 el-form-item 结构和控件内联宽度影响较大
• 难以严格保证所有页面都稳定呈现为 4 列

6.2 方案二：页内统一改为四列栅格

做法：

• 各页面搜索区统一改为 el-row + el-col :span="6" 结构
• 每个查询项占一个固定字段位
• 控件宽度统一改为在字段位内铺满
• 中介库管理 SearchForm 同步采用相同骨架

优点：

• 能严格保证每行 4 个字段位
• 超过 4 个字段时自动按栅格换行
• 实现路径短，且结果稳定

缺点：

• 需要逐页调整模板结构

6.3 方案三：抽公共搜索组件

做法：

• 新增统一搜索区公共组件
• 各页面通过配置驱动字段渲染

优点：

• 长期统一性最好

缺点：

• 明显超出本次需求的最短路径
• 会引入额外抽象和页面适配成本

6.4 结论

采用方案二：页内统一改为四列栅格。

该方案既能满足“固定 4 个字段位、每行平分、超出自动换行”的明确需求，又不会引入超出本次范围的公共组件重构。

7. 总体设计

7.1 查询区骨架

所有目标页面的搜索区统一收敛为以下结构：

1. el-form
2. 表单内部使用 el-row
3. 每个查询项由一个 el-col :span="6" 包裹
4. el-col 内部放对应 el-form-item

这样每行固定为 4 个字段位，总宽度按 24 栅格平分，每个字段位占 6 栅格。

7.2 字段占位规则

统一采用以下规则：

• 普通输入框按 1 个字段位处理
• 下拉框按 1 个字段位处理
• 树选择按 1 个字段位处理
• 日期范围按 1 个字段位处理
• 不为任何字段引入“占 2 格”的特例

对应效果如下：

• 5 个字段排布为 4 + 1
• 6 个字段排布为 4 + 2
• 8 个字段排布为 4 + 4
• 9 个字段排布为 4 + 4 + 1

7.3 字段宽度规则

本次固定的是“字段位宽度”，不是“控件像素宽度”。

因此需要统一收敛以下做法：

• 去掉分散在字段控件上的固定像素宽度
• 让输入框、下拉框、日期范围在所属字段位内铺满
• 保持 label-width 沿用页面现有值，避免标签对齐被一并重构

7.4 操作行边界

搜索区改造不改变上一轮已统一完成的操作行规则：

• 搜索区只负责字段排布
• 搜索、重置、业务按钮、right-toolbar 继续保留在独立操作行
• 不把按钮重新并回查询表单

8. 页面分类设计

8.1 常规页面

适用于大多数直接在 index.vue 中维护查询表单的页面。

处理方式：

• 保留原有 queryParams、handleQuery、resetQuery
• 仅改查询区模板骨架为四列栅格
• 保留原有回车查询和显隐逻辑

8.2 中介库管理

中介库管理页保持当前父子组件职责边界：

• 父页 ccdiIntermediary/index.vue 不接管字段渲染
• 子组件 SearchForm.vue 内部改为四列栅格
• 父页继续负责统一操作行和列表逻辑

这样可以在不扩大改造面的前提下，让中介库管理与其余页面保持同一布局规则。

8.3 特殊控件页面

针对日期范围等宽控件，统一采用单字段位处理：

• 员工调动记录中的调动日期范围
• 招投标信息维护中的申请日期范围

这些控件不获得额外列宽，只在自身字段位内铺满，以保证全页面规则始终一致。

9. 风险与控制

9.1 风险

• 个别页面原有固定宽度移除后，字段视觉宽度会发生变化
• 字段标签宽度如果处理不当，可能造成个别页面对齐不一致
• 中介库管理的独立组件如果只做局部样式修改，容易与其他页面规则不一致

9.2 控制方式

• 统一使用栅格结构，而不是继续依赖零散内联宽度
• 仅收敛字段控件宽度，不改页面既有业务逻辑
• 保持页面既有 label-width，减少额外样式扰动
• 对中介库管理直接按同一栅格骨架处理，而不是加兼容补丁

10. 验证口径

实施完成后，按以下口径判定是否达成目标：

• 范围内页面全部命中，无遗漏
• 所有页面搜索区均为四列栅格结构
• 每行最多 4 个字段位
• 超过 4 个字段后自动换行
• 日期范围仍只占 1 个字段位
• 字段内部控件在所属字段位内铺满
• 搜索、重置、回车查询、showSearch、业务按钮和 right-toolbar 行为不变

11. 完成标准

如果以下结果全部满足，则本次设计落地完成：

• 信息维护同批页面的搜索区统一为“四列平分栅格”
• 不再依赖页面各自的固定像素宽度控制字段排布
• 不新增额外交互模式和兼容性方案
• 不修改业务逻辑，只统一查询字段布局规则