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