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

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

@@ -0,0 +1,275 @@
+# 信息维护页面搜索区四列栅格统一设计文档
+
+## 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. 完成标准
+
+如果以下结果全部满足，则本次设计落地完成：
+
+- 信息维护同批页面的搜索区统一为“四列平分栅格”
+- 不再依赖页面各自的固定像素宽度控制字段排布
+- 不新增额外交互模式和兼容性方案
+- 不修改业务逻辑，只统一查询字段布局规则