低代码数据渲染

浏览器访问某个低代码页面

以http://172.16.0.80:9004/#/kform/form/1111949130042703872为例，通过route找到对应的组件进行渲染。

我们知道，系统的所有菜单都保存在 mai2pro.sys_router表中，页面加载会获取路由，就是从接口中获取对应的路由配置。

跟一下代码可知，最终渲染低代码页面的vue组件是FormView.vue

JSON结构分析

1. 根对象:

   • list : 包含主要的表单组件列表
   • attribute : 表单的基本属性
   • dataEvent : 数据事件定义
   • logic : 业务逻辑定义
   • loadDataVersion : 数据加载版本

2. 主要组件:

   • 一个卡片组件 ( type: "card" )，包含一个动态表格(type: "batch" )
   • 动态表格中包含多个输入框、选择框等子组件

渲染流程

1. KFormBuild 组件:

   • 作为根组件加载JSON配置

   • 解析list 数组，为每个子组件创建对应的Vue组件实例

2. BuildBlocks 组件:

   • 根据type字段决定渲染哪种类型的组件

   • 例如："type": "card"会渲染为卡片组件， "type": "batch"会渲染为动态表格

3. KFormItem 组件:

   • 处理表单项的布局、标签、验证等

   • 根据model字段绑定数据

getSaveInfo 方法调用链，以页面容器为例

1. KPageContainer.getSaveInfo():

   getSaveInfo() {
      if (this.$refs.KFormBuild && this.$refs.KFormBuild.getSaveInfo) {
        return this.$refs.KFormBuild.getSaveInfo()
      } else {
        return {
          expandParam: [],
          kformParam: []
        }
      }
    },
   

2. KFormBuild.getSaveInfo():

   • 遍历所有子组件（通过 this.$refs.buildBlocks）
   • 调用每个子组件的 getSaveInfo() 方法
   • 收集所有子组件的保存信息

3. BuildBlocks.getSaveInfo():

   • 如果当前组件是pageContainer类型，调用其 getSaveInfo() 方法
   • 否则返回undefined

4. 数据收集:

   • 收集所有表单项的值（通过this.getFormData()）
   • 处理动态组件数据
   • 合并参数数据源
   • 处理数据事件

5. 最终返回:

 {   
     expandParam: [...],  // 扩展参数   
     kformParam: [...]    // 表单参数 
 }

具体到 test.json

1. 最外层是一个卡片组件，包含一个动态表格
2. 动态表格中有多个输入框和选择框
3. 当调用 getSaveInfo() 时，会收集所有这些表单项的值
4. 同时会处理dataEvent中定义的数据事件

关键点

1. 数据绑定:

   • 每个表单项通过model字段与数据模型绑定
   • 例如："model": "input_QAAzIK48lN8PY30YaqzR"

2. 验证规则:

   • 在rules中定义表单项的验证规则
   • 例如：必填项验证、自定义验证等

3. 数据源:

   • 可以通过dataSourceInfo配置数据源
   • 支持静态数据或动态加载

4. 事件处理:

   • 在dataEvent中定义数据事件
   • 例如：保存事件、删除事件等

5. 业务逻辑:

   • 在logic中定义业务逻辑
   • 支持条件判断、循环等复杂逻辑

这样，通过JSON配置就能动态生成复杂的表单界面，并通过 getSaveInfo 方法收集表单数据。