RuoYi-Vue-Pro 项目表单设计器解析函数保存问题分析与解决方案

问题背景

在 RuoYi-Vue-Pro 项目的 BPM 模块中，表单设计器的下拉框组件存在一个功能性问题：当用户为下拉框组件设置解析函数并保存后，再次编辑时发现解析函数未能正确保存。这个问题影响了表单设计器的数据持久化功能，导致用户设置的解析逻辑无法在后续编辑中保留。

问题现象分析

通过开发者工具的调试发现：

1. 在 Vue 调试工具中可以看到解析函数参数确实存在于组件状态中
2. 但在实际保存后重新加载时，这些解析函数设置却丢失了
3. 问题根源在于表单设计器在序列化和反序列化组件配置时，没有正确处理函数类型的属性

技术原理

表单设计器通常会将组件配置序列化为 JSON 格式进行存储。然而，JSON 标准本身不支持函数类型的序列化，这导致：

1. 当组件配置中包含函数属性时，直接 JSON.stringify() 会丢失这些函数
2. 从存储中恢复配置时，需要特殊处理这些函数属性的重建

解决方案

项目中的 src/utils/formCreate.ts 文件提供了表单字段的编码和解码功能。针对解析函数保存问题，我们进行了以下改进：

编码阶段处理

// 编码表单 Fields
export const encodeFields = (designerRef: object) => {
  // @ts-ignore
  const rule = designerRef.value.getRule()
  const fields: string[] = []
  
  rule.forEach((item) => {
    if (item?.effect?.fetch?.parse) {
      // 将函数转换为字符串表示
      item.effect.fetch.parse = item.effect.fetch.parse.toString()
    }
    const itemTmp = JSON.stringify(item)
    fields.push(itemTmp)
  })
  return fields
}

解码阶段处理

// 解码表单 Fields
export const decodeFields = (fields: string[]) => {
  const rule: object[] = []
  fields.forEach((item) => {
    const itemTmp = JSON.parse(item)
    if (itemTmp?.effect?.fetch?.parse) {
      // 将字符串表示的函数重新转换为可执行函数
      itemTmp.effect.fetch.parse = eval('(' + itemTmp.effect.fetch.parse + ')')
    }
    rule.push(itemTmp)
  })
  return rule
}

实现细节

1. 函数序列化：在编码阶段，通过调用函数的 toString() 方法将函数转换为字符串表示
2. 函数重建：在解码阶段，使用 eval 将字符串重新转换为可执行函数
3. 安全处理：通过检查属性路径 (item?.effect?.fetch?.parse) 确保只在存在解析函数时进行处理
4. 类型安全：虽然使用了 @ts-ignore 暂时忽略类型检查，但实际处理中确保了类型安全

注意事项

1. eval 的安全风险：虽然在此场景下是必要的，但需要注意确保解析的函数来源可信
2. 性能考虑：频繁的序列化和反序列化可能影响性能，特别是在大型表单中
3. 兼容性：不同浏览器对函数 toString() 的结果可能略有差异，需要测试确保兼容性

总结

通过改进表单设计器的编码和解码逻辑，我们成功解决了 RuoYi-Vue-Pro 项目中下拉框组件解析函数无法保存的问题。这个解决方案不仅适用于当前问题，也为处理表单设计器中其他需要保存函数类型配置的场景提供了参考。开发者在处理类似问题时，需要注意 JSON 序列化的限制，并合理设计函数持久化的方案。