189 lines
5.8 KiB
Markdown
189 lines
5.8 KiB
Markdown
|
# 信息维护页面搜索区四列栅格统一实施记录
|
|||
|
|
|
|||
|
|
## 1. 实施目标
|
|||
|
|
|
|||
|
|
将信息维护同批页面的搜索区统一为每行 4 个字段位的栅格布局，超过 4 个字段自动换行，最后一行不足 4 项时保留空白字段位，不拉伸现有字段；同时清理查询区内遗留的固定像素宽度写法。
|
|||
|
|
|
|||
|
|
## 2. 实施范围
|
|||
|
|
|
|||
|
|
本次实际调整的前端文件如下：
|
|||
|
|
|
|||
|
|
- `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/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`
|
|||
|
|
|
|||
|
|
本轮未提交的临时验证文件：
|
|||
|
|
|
|||
|
|
- `output/playwright/info-maintenance-search-grid-check.js`
|
|||
|
|
|
|||
|
|
## 3. 实施内容
|
|||
|
|
|
|||
|
|
### 3.1 查询区统一为四列栅格
|
|||
|
|
|
|||
|
|
- 将目标页面的头部查询表单从 `:inline="true"` 流式排布改为 `el-row + el-col :span="6"` 栅格排布
|
|||
|
|
- 每个查询项固定占一个字段位
|
|||
|
|
- 超过 4 个字段自动换到下一行
|
|||
|
|
- 最后一行不足 4 项时保留空白字段位，不做横向拉伸
|
|||
|
|
|
|||
|
|
### 3.2 字段内部控件统一铺满字段位
|
|||
|
|
|
|||
|
|
- 将查询区里的输入框、下拉框、日期范围、树选择统一改为 `style="width: 100%"`
|
|||
|
|
- 清理查询区中遗留的固定像素宽度写法，不再依赖 `style="width: Npx"` 控制布局
|
|||
|
|
- 补充查询区专用样式，使 `el-row` 使用换行布局，`el-col` 不再依赖旧浮动行为导致错位
|
|||
|
|
|
|||
|
|
### 3.3 保持原有交互和业务逻辑不变
|
|||
|
|
|
|||
|
|
- 未修改 `queryParams`、`handleQuery`、`resetQuery`
|
|||
|
|
- 未修改搜索、重置、业务按钮、`right-toolbar` 的行为
|
|||
|
|
- 日期范围仍按一个字段位处理，仅在所属字段位内铺满
|
|||
|
|
|
|||
|
|
## 4. TDD / 结构校验
|
|||
|
|
|
|||
|
|
### 4.1 先写临时结构校验脚本
|
|||
|
|
|
|||
|
|
新增临时脚本：
|
|||
|
|
|
|||
|
|
- `output/playwright/info-maintenance-search-grid-check.js`
|
|||
|
|
|
|||
|
|
脚本校验口径：
|
|||
|
|
|
|||
|
|
- 只识别头部查询表单，不误扫弹窗表单
|
|||
|
|
- 查询区是否采用 `el-col :span="6"`
|
|||
|
|
- 查询项数量是否符合预期
|
|||
|
|
- 查询区内是否仍保留 `style="width: Npx"` 固定像素宽度
|
|||
|
|
- 账户库管理页是否仍残留旧的查询区局部覆盖样式
|
|||
|
|
|
|||
|
|
### 4.2 先失败，再通过
|
|||
|
|
|
|||
|
|
首次执行命令：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
source ~/.nvm/nvm.sh && cd ruoyi-ui && nvm use >/dev/null && cd .. && node output/playwright/info-maintenance-search-grid-check.js
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
初次结果：
|
|||
|
|
|
|||
|
|
- 12 个目标页面全部报出“未使用 `span=6`”和“仍存在固定像素宽度”的失败
|
|||
|
|
|
|||
|
|
页面改造完成后再次执行同一命令，结果为：
|
|||
|
|
|
|||
|
|
- `信息维护搜索区四列栅格结构校验通过`
|
|||
|
|
|
|||
|
|
## 5. 构建验证
|
|||
|
|
|
|||
|
|
### 5.1 Node 版本
|
|||
|
|
|
|||
|
|
执行命令：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
source ~/.nvm/nvm.sh && cd ruoyi-ui && nvm use
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
结果：
|
|||
|
|
|
|||
|
|
- 命中项目 `nvm` 配置
|
|||
|
|
- 使用项目要求的 Node 版本完成后续脚本和构建
|
|||
|
|
|
|||
|
|
### 5.2 前端构建
|
|||
|
|
|
|||
|
|
执行命令：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
source ~/.nvm/nvm.sh && cd ruoyi-ui && nvm use >/dev/null && npm run build:prod
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
结果：
|
|||
|
|
|
|||
|
|
- 构建成功
|
|||
|
|
- 无新增模板语法错误
|
|||
|
|
- 仅保留项目原有的体积告警
|
|||
|
|
|
|||
|
|
## 6. 真实页面浏览器验证
|
|||
|
|
|
|||
|
|
### 6.1 启动服务
|
|||
|
|
|
|||
|
|
前端开发服务：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
source ~/.nvm/nvm.sh && cd ruoyi-ui && nvm use >/dev/null && npm_config_port=1025 npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
后端服务：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
sh bin/restart_java_backend.sh start
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
说明：
|
|||
|
|
|
|||
|
|
- 本轮验证时后端原本未运行，因此使用仓库规定脚本启动
|
|||
|
|
- 使用真实登录页进入系统，账号为 `admin / admin123`
|
|||
|
|
|
|||
|
|
### 6.2 布局验证结果
|
|||
|
|
|
|||
|
|
使用 Playwright 进入以下代表页并读取查询区实际列位位置：
|
|||
|
|
|
|||
|
|
- `/maintain/baseStaff`
|
|||
|
|
- `/maintain/enterpriseBaseInfo`
|
|||
|
|
- `/maintain/accountInfo`
|
|||
|
|
- `/maintain/creditInfo`
|
|||
|
|
- `/maintain/intermediary`
|
|||
|
|
- `/maintain/staffTransfer`
|
|||
|
|
- `/maintain/purchaseTransaction`
|
|||
|
|
|
|||
|
|
验证结果：
|
|||
|
|
|
|||
|
|
- 员工信息维护：5 个字段，实际排布为 `4 + 1`
|
|||
|
|
- 实体库管理：8 个字段，实际排布为 `4 + 4`
|
|||
|
|
- 账户库管理：9 个字段，实际排布为 `4 + 4 + 1`
|
|||
|
|
- 征信维护：2 个字段，实际排布为单行 2 项，未拉伸成半屏布局
|
|||
|
|
- 中介库管理：4 个字段，实际排布为单行 4 列
|
|||
|
|
- 员工调动记录：6 个字段，实际排布为 `4 + 2`
|
|||
|
|
- 招投标信息维护：4 个字段，日期范围与其他查询项等宽，占 1 个字段位
|
|||
|
|
|
|||
|
|
浏览器读取到的列位位置表现一致：
|
|||
|
|
|
|||
|
|
- 同一行 4 列的左边界稳定为四等分位置
|
|||
|
|
- 超过 4 个字段的新一行从第一列起始位置重新排列
|
|||
|
|
- 最后一行不足 4 项时未发生拉伸
|
|||
|
|
|
|||
|
|
### 6.3 重置验证
|
|||
|
|
|
|||
|
|
在真实业务页面中使用 Playwright 做了两组输入与重置验证：
|
|||
|
|
|
|||
|
|
1. 员工信息维护
|
|||
|
|
- 向“姓名”输入框填入 `测试姓名`
|
|||
|
|
- 点击页面 `重置`
|
|||
|
|
- 再次读取输入框值，结果为空字符串
|
|||
|
|
|
|||
|
|
2. 账户库管理
|
|||
|
|
- 向“员工姓名”输入框填入 `验证员工`
|
|||
|
|
- 点击页面 `重置`
|
|||
|
|
- 再次读取输入框值，结果为空字符串
|
|||
|
|
|
|||
|
|
结论：
|
|||
|
|
|
|||
|
|
- 搜索区改为四列栅格后，`重置` 交互未受影响
|
|||
|
|
|
|||
|
|
## 7. 进程清理
|
|||
|
|
|
|||
|
|
本轮验证结束后已关闭：
|
|||
|
|
|
|||
|
|
- 前端开发服务 `npm run dev`
|
|||
|
|
- 后端服务 `sh bin/restart_java_backend.sh start` 启动的后端进程，使用 `sh bin/restart_java_backend.sh stop` 停止
|
|||
|
|
- Playwright 浏览器会话
|
|||
|
|
|
|||
|
|
## 8. 风险与说明
|
|||
|
|
|
|||
|
|
- 当前工作区存在其他与本任务无关的未提交改动，本次未回退这些既有改动，仅在搜索区四列栅格范围内继续修改目标页面
|
|||
|
|
- 临时结构校验脚本位于 `output/playwright/`，用于本轮 TDD 校验，不纳入 git 提交
|