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

## 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. 完成标准

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

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