JSONForms项目中基于值的枚举过滤器实现方案

在JSONForms表单生成器的实际应用中，开发者经常会遇到需要根据前置字段值动态过滤后续字段枚举选项的场景。本文将以一个典型的会计系统结构为例，深入探讨如何优雅地实现这种动态过滤功能。

业务场景分析

考虑一个常见的公司成本中心管理场景，不同公司拥有不同的成本中心集合：

公司1 -> 成本中心A/B/C
公司2 -> 成本中心B/C/D

这种层级关系要求在前端表单中，当用户选择"公司1"时，成本中心下拉框只能显示A/B/C三个选项；选择"公司2"时则显示B/C/D。

JSON Schema实现方案

最直观的实现方式是使用JSON Schema的if-then条件语句：

{
  "if": {
    "properties": {
      "company": { "const": "Company1" }
    }
  },
  "then": {
    "properties": {
      "cost-centers": {
        "items": {
          "properties": {
            "cost-center": {
              "enum": ["cost-center-a", "cost-center-b", "cost-center-c"]
            }
          }
        }
      }
    }
  }
}

虽然这种方案在技术上可行，但存在两个主要问题：

1. 所有成本中心选项仍然会出现在所有公司的下拉框中
2. 需要为每个公司编写重复的条件判断逻辑

更优解决方案：自定义渲染器

JSONForms核心团队成员建议采用自定义渲染器方案，这被认为是更清晰、更易维护的解决方案。其优势在于：

1. 关注点分离：业务逻辑与UI表现分离
2. 灵活性：可以自由定义过滤规则
3. 可维护性：不需要同步维护JSON Schema和UI Schema

实现思路是创建一个专门处理枚举过滤的自定义渲染器，它会：

1. 监听前置字段（如公司选择）的变化
2. 根据当前值查询JSON Schema中的约束条件
3. 动态过滤后续字段（如成本中心）的可用选项

技术实现建议

对于React技术栈的实现，可以：

const DynamicEnumRenderer = ({ schema, uischema, path, data }) => {
  // 1. 解析schema中的条件约束
  const constraints = extractConstraints(schema);
  
  // 2. 监听依赖字段变化
  const [filteredOptions, setFilteredOptions] = useState([]);
  useEffect(() => {
    const activeConstraints = findActiveConstraints(data, constraints);
    setFilteredOptions(activeConstraints.enum || []);
  }, [data.company]);
  
  // 3. 渲染过滤后的下拉框
  return <Select options={filteredOptions} />;
};

最佳实践

1. 约定优于配置：在团队内部约定条件约束的表示方式
2. 性能优化：对于大型枚举集合考虑虚拟滚动
3. 错误处理：提供有意义的空状态提示
4. 可测试性：确保过滤逻辑有完善的单元测试

总结

在JSONForms项目中实现动态枚举过滤时，相比复杂的条件JSON Schema，采用自定义渲染器是更优雅的解决方案。这种方法不仅解决了业务需求，还保持了代码的清晰性和可维护性，是处理此类动态表单场景的推荐实践。