diff --git a/docs/superpowers/specs/2026-04-23-info-maintenance-search-grid-design.md b/docs/superpowers/specs/2026-04-23-info-maintenance-search-grid-design.md new file mode 100644 index 00000000..0c3a0f30 --- /dev/null +++ b/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. 完成标准 + +如果以下结果全部满足,则本次设计落地完成: + +- 信息维护同批页面的搜索区统一为“四列平分栅格” +- 不再依赖页面各自的固定像素宽度控制字段排布 +- 不新增额外交互模式和兼容性方案 +- 不修改业务逻辑,只统一查询字段布局规则