diff --git a/docs/reports/implementation/2026-04-23-info-maintenance-toolbar-unification-implementation.md b/docs/reports/implementation/2026-04-23-info-maintenance-toolbar-unification-implementation.md new file mode 100644 index 00000000..84b06de1 --- /dev/null +++ b/docs/reports/implementation/2026-04-23-info-maintenance-toolbar-unification-implementation.md @@ -0,0 +1,173 @@ +# 信息维护页面头部按钮统一实施记录 + +## 1. 实施目标 + +将“信息维护”菜单下各前端页面的 `搜索 / 重置` 按钮统一移动到业务按钮所在操作行,并放在业务按钮左侧,覆盖常规页、征信维护页和中介库管理页。 + +## 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/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` + +页面口径分为三类: + +1. 常规页 + 员工信息维护、招聘信息维护、员工调动记录、员工亲属关系维护、员工实体关系维护、实体库管理、账户库管理、信贷客户家庭关系、信贷客户实体关联、招投标信息维护。 + +2. 特殊业务按钮页 + 征信维护,保留 `批量上传征信HTML` 语义,只统一按钮所在行。 + +3. 组件拆分页 + 中介库管理,保留 `SearchForm` 查询字段组件,但把 `搜索 / 重置` 的展示职责收回父页面。 + +## 3. 实施内容 + +### 3.1 常规页 + +- 删除查询表单末尾用于展示 `搜索 / 重置` 的 `el-form-item` +- 在原有 `el-row.mb8` 操作行最左侧新增 `搜索`、`重置` +- 保留原有业务按钮顺序、权限和显示逻辑 + +统一后的顺序为: + +`搜索 -> 重置 -> 页面原有业务按钮 -> right-toolbar` + +### 3.2 征信维护 + +- 删除查询表单末尾的 `搜索 / 重置` +- 在操作行最左侧新增 `搜索 / 重置` +- 保持 `批量上传征信HTML` 按钮文案和上传链路不变 + +统一后的顺序为: + +`搜索 -> 重置 -> 批量上传征信HTML -> right-toolbar` + +### 3.3 中介库管理 + +- `SearchForm.vue` 移除 `搜索 / 重置` 的展示代码 +- 父页面 `index.vue` 在操作行最左侧新增 `搜索 / 重置` +- 父页面补充 `resetQuery`,用于清空查询参数并刷新列表 +- 保持两类导入按钮、两类失败记录按钮和详情维护链路不变 + +统一后的顺序为: + +`搜索 -> 重置 -> 新增 -> 导入中介和亲属信息 -> 导入中介实体关联关系 -> 失败记录按钮 -> right-toolbar` + +## 4. TDD / 结构校验 + +为避免直接改模板后再“凭感觉确认”,本次先编写了临时结构校验脚本,先跑出失败,再修改页面: + +```bash +node output/playwright/info-maintenance-toolbar-check.js +``` + +初次运行结果: + +- 当前各页面查询表单内仍然包含 `搜索 / 重置` +- 中介库 `SearchForm` 仍然包含 `搜索 / 重置` +- 各页面操作行中缺少统一放置在左侧的 `搜索 / 重置` + +页面改造完成后再次运行,同一脚本返回: + +- `信息维护头部按钮结构校验通过` + +## 5. 构建验证 + +### 5.1 Node 版本 + +执行命令: + +```bash +source ~/.nvm/nvm.sh && cd ruoyi-ui && nvm use +``` + +结果: + +- 命中 `ruoyi-ui/.nvmrc` +- 使用 `node v14.21.3` + +### 5.2 前端构建 + +执行命令: + +```bash +source ~/.nvm/nvm.sh && cd ruoyi-ui && nvm use >/dev/null && npm run build:prod +``` + +结果: + +- 构建成功 +- 无新增 Vue 模板语法错误 +- 仅保留项目原有的打包体积告警 + +## 6. 真实页面浏览器验证 + +### 6.1 验证方式 + +- 使用真实前端开发服务,不打开 prototype 页面 +- 使用 Playwright 打开真实业务路由 +- 先登录系统,再进入代表页验证 + +启动前端: + +```bash +source ~/.nvm/nvm.sh && cd ruoyi-ui && nvm use >/dev/null && npm run dev +``` + +登录与页面验证覆盖以下三类代表页: + +- `http://localhost:1025/maintain/baseStaff` +- `http://localhost:1025/maintain/creditInfo` +- `http://localhost:1025/maintain/intermediary` + +### 6.2 员工信息维护 + +验证结果: + +- 查询条件区不再展示 `搜索 / 重置` +- 操作行顺序为 `搜索 -> 重置 -> 新增 -> 导入 -> right-toolbar` +- 在页面内输入姓名后点击 `重置`,输入框成功清空 + +### 6.3 征信维护 + +验证结果: + +- 查询条件区不再展示 `搜索 / 重置` +- 操作行顺序为 `搜索 -> 重置 -> 批量上传征信HTML -> right-toolbar` +- 在页面内输入姓名后点击 `重置`,输入框成功清空 +- `批量上传征信HTML` 按钮仍正常显示 + +### 6.4 中介库管理 + +验证结果: + +- `SearchForm` 仅保留查询字段,不再展示 `搜索 / 重置` +- 父页面操作行顺序为 `搜索 -> 重置 -> 新增 -> 导入中介和亲属信息 -> 导入中介实体关联关系 -> right-toolbar` +- 在页面内输入名称后点击 `重置`,输入框成功清空 + +## 7. 进程清理 + +测试完成后已主动关闭: + +- Playwright 浏览器会话 +- 前端开发进程 `npm run dev` + +未保留测试进程占用端口。 + +## 8. 风险说明 + +- 当前工作区中部分前端页面和后端文件本身已存在其他未提交改动,本次实现没有回退这些既有改动,只在头部按钮结构范围内继续追加修改。 +- 因同名文件中存在先前改动,本轮未直接执行代码提交,避免误把无关改动一起纳入提交。 diff --git a/ruoyi-ui/src/views/ccdiAccountInfo/index.vue b/ruoyi-ui/src/views/ccdiAccountInfo/index.vue index 3602b839..30a39634 100644 --- a/ruoyi-ui/src/views/ccdiAccountInfo/index.vue +++ b/ruoyi-ui/src/views/ccdiAccountInfo/index.vue @@ -62,13 +62,15 @@ - - 搜索 - 重置 - + + 搜索 + + + 重置 + - - 搜索 - 重置 - + + 搜索 + + + 重置 + - - 搜索 - 重置 - + + 搜索 + + + 重置 + 批量上传征信HTML diff --git a/ruoyi-ui/src/views/ccdiCustEnterpriseRelation/index.vue b/ruoyi-ui/src/views/ccdiCustEnterpriseRelation/index.vue index accd9b1f..06d981f3 100644 --- a/ruoyi-ui/src/views/ccdiCustEnterpriseRelation/index.vue +++ b/ruoyi-ui/src/views/ccdiCustEnterpriseRelation/index.vue @@ -34,13 +34,15 @@ - - 搜索 - 重置 - + + 搜索 + + + 重置 + - - 搜索 - 重置 - + + 搜索 + + + 重置 + - - 搜索 - 重置 - + + 搜索 + + + 重置 + - - 搜索 - 重置 - @@ -57,10 +53,6 @@ export default { methods: { handleQuery() { this.$emit("query"); - }, - resetQuery() { - this.$refs.queryForm.resetFields(); - this.$emit("query"); } } }; diff --git a/ruoyi-ui/src/views/ccdiIntermediary/index.vue b/ruoyi-ui/src/views/ccdiIntermediary/index.vue index b38a7442..e1a029bd 100644 --- a/ruoyi-ui/src/views/ccdiIntermediary/index.vue +++ b/ruoyi-ui/src/views/ccdiIntermediary/index.vue @@ -7,6 +7,12 @@ /> + + 搜索 + + + 重置 + item.recordId); }, diff --git a/ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue b/ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue index 195070d1..6c4b5434 100644 --- a/ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue +++ b/ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue @@ -39,13 +39,15 @@ end-placeholder="结束日期" /> - - 搜索 - 重置 - + + 搜索 + + + 重置 + - - 搜索 - 重置 - + + 搜索 + + + 重置 + - - 搜索 - 重置 - + + 搜索 + + + 重置 + - - 搜索 - 重置 - + + 搜索 + + + 重置 + - - 搜索 - 重置 - + + 搜索 + + + 重置 +