Atoms生成代码二次修改列表查询条件实现方式

需在Atoms平台二次修改代码：统一查询字段命名与后端一致，声明data变量；用QueryPlanSelect或API动态加载字典；实现部门-员工等联动逻辑；用el-collapse折叠高级搜索；规范分页参数格式。

需要在Atoms平台中对已生成的代码进行二次修改，重点调整列表查询条件的逻辑和呈现方式，确保筛选项能准确反映业务规则且支持动态扩展。

确认查询条件字段来源与绑定关系

打开对应模块的页面配置文件（如list.vue或query-form.vue），定位到el-form内所有el-form-item包裹的表单项。检查每个v-model绑定的变量名是否与后端接口文档中定义的查询参数名完全一致，包括大小写和下划线风格——例如后端要求user_status，但前端误写为userStatus会导致该条件始终不生效。

查看data()中是否已声明该变量并赋予初始值（通常为空字符串、null或特定默认值）。若未声明，运行时会触发Vue警告且表单无法双向绑定。

替换静态字典为动态加载下拉选项

方法一：使用已封装的查询方案组件

用自定义组件QueryPlanSelect取代原生的el-select，通过传入code属性来指定字典编码，例如:code="'user_status'"。该组件会在mounted阶段自动调用loadData()方法从后台获取字典项，然后利用v-for指令来渲染el-option。

方法二：手动集成API调用

在mounted()钩子中，通过调用this.$api.dict.getByCode('user_status')来获取数据，并将返回的结果赋值给this.dictionaryItemList。这里需要注意的是，必须确保$api实例已经成功注入，并且接口地址是正确的。如果这两个条件不满足，当控制台报404错误时，下拉框将不会显示任何选项。

添加复合条件联动逻辑

第一步：识别依赖关系

确定哪些条件之间存在约束，例如“部门”选择后，“员工”下拉应仅显示该部门下的人员；“开始时间”填写后，“结束时间”应禁用早于它的日期。

第二步：监听关键字段变化

在watch中配置form.departmentId，当其值改变时，清空form.employeeId并重置员工列表数据源为[]，防止残留旧选项。

第三步：触发子条件刷新

调用this.loadEmployeeList(this.form.departmentId)获取新数据，该方法内部应发起带departmentId参数的GET请求，响应成功后再赋值给this.employeeOptions。

启用高级搜索区域折叠功能

在查询表单外层容器添加el-collapse组件，设置v-model="activeNames"控制展开状态。将非核心条件（如“创建人”“更新时间范围”）放入el-collapse-item中，标题设为“高级搜索”。

默认只展开基础条件区域，避免首次加载时表单过长影响操作效率。用户点击“展开”后才加载高级字段的校验规则和初始值，减少首屏渲染压力。

这一步操作起来很简单，直接把el-collapse标签包住对应区块即可。

对接后端分页查询参数规范

检查getList()方法中拼接的请求参数对象，确认是否包含page、size、orderBy等标准分页字段。若后端采用Spring Data JPA风格，需额外传入sort字段，格式为"createTime,desc"而非{ field: 'createTime', order: 'desc' }。

若当前使用axios.get('/api/users', { params: this.form })方式提交，需确保this.form中不混入非查询字段（如dialogVisible），否则会被透传至后端引发解析异常。