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