统一信息维护页面头部按钮布局

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. 风险说明
+
+- 当前工作区中部分前端页面和后端文件本身已存在其他未提交改动，本次实现没有回退这些既有改动，只在头部按钮结构范围内继续追加修改。
+- 因同名文件中存在先前改动，本轮未直接执行代码提交，避免误把无关改动一起纳入提交。

ruoyi-ui/src/views/ccdiAccountInfo/index.vue

@@ -62,13 +62,15 @@
             <el-option label="已销户" :value="2" />
           </el-select>
         </el-form-item>
-        <el-form-item class="query-actions">
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-        </el-form-item>
       </el-form>
 
       <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-col>
         <el-col :span="1.5">
           <el-button
             type="primary"

ruoyi-ui/src/views/ccdiBaseStaff/index.vue

@@ -40,13 +40,15 @@
           <el-option label="离职" value="1" />
         </el-select>
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-col>
       <el-col :span="1.5">
         <el-button
           type="primary"

ruoyi-ui/src/views/ccdiCreditInfo/index.vue

@@ -21,13 +21,15 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-col>
       <el-col :span="1.5">
         <el-button type="primary" plain icon="el-icon-upload2" size="mini" @click="openUploadDialog">批量上传征信HTML</el-button>
       </el-col>

ruoyi-ui/src/views/ccdiCustEnterpriseRelation/index.vue

@@ -34,13 +34,15 @@
           <el-option label="无效" :value="0" />
         </el-select>
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-col>
       <el-col :span="1.5">
         <el-button
           type="primary"

ruoyi-ui/src/views/ccdiCustFmyRelation/index.vue

@@ -35,13 +35,15 @@
           <el-option label="无效" :value="0" />
         </el-select>
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-col>
       <el-col :span="1.5">
         <el-button
           type="primary"

ruoyi-ui/src/views/ccdiEnterpriseBaseInfo/index.vue

@@ -79,13 +79,15 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-col>
       <el-col :span="1.5">
         <el-button
           type="primary"

ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue

@@ -34,10 +34,6 @@
         @keyup.enter.native="handleQuery"
       />
     </el-form-item>
-    <el-form-item>
-      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-      <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-    </el-form-item>
   </el-form>
 </template>
 
@@ -57,10 +53,6 @@ export default {
   methods: {
     handleQuery() {
       this.$emit("query");
-    },
-    resetQuery() {
-      this.$refs.queryForm.resetFields();
-      this.$emit("query");
     }
   }
 };

ruoyi-ui/src/views/ccdiIntermediary/index.vue

@@ -7,6 +7,12 @@
     />
 
     <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-col>
       <el-col :span="1.5">
         <el-button
           type="primary"
@@ -356,6 +362,17 @@ export default {
       this.queryParams.pageNum = 1;
       this.getList();
     },
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        certificateNo: null,
+        recordType: null,
+        relatedIntermediaryKeyword: null
+      };
+      this.getList();
+    },
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.recordId);
     },

ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue

@@ -39,13 +39,15 @@
           end-placeholder="结束日期"
         />
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-col>
       <el-col :span="1.5">
         <el-button
           type="primary"

ruoyi-ui/src/views/ccdiStaffEnterpriseRelation/index.vue

@@ -34,13 +34,15 @@
           <el-option label="无效" :value="0" />
         </el-select>
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-col>
       <el-col :span="1.5">
         <el-button
           type="primary"

ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue

@@ -35,13 +35,15 @@
           <el-option label="无效" :value="0" />
         </el-select>
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-col>
       <el-col :span="1.5">
         <el-button
           type="primary"

ruoyi-ui/src/views/ccdiStaffRecruitment/index.vue

@@ -54,13 +54,15 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-col>
       <el-col :span="1.5">
         <el-button
           v-if="isPreviewMode()"

ruoyi-ui/src/views/ccdiStaffTransfer/index.vue

@@ -59,13 +59,15 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-col>
       <el-col :span="1.5">
         <el-button
           type="primary"