动态高可配置表单设计

demo:

表单配置

校验配置

属性流flow配置

生成表单交互 .gif

技术栈:

vue+elementui+springboot+mybatis+mysql

特性:

1. 支持自定义属性
2. 支持基于async-validator的值校验
3. 支持父子属性
4. 支持属性流程设置
5. 支持多值

数据库设计:

关键数据结构:

属性对象

public class EntityAttrInfoVO {
    private String id;
    private String parentId;
    /**
     * 中文名
     */
    private String cname;
    /**
     * 英文名
     */
    private String ename;
    /**
     * 短名
     */
    private String shortName;
    /**
     * 是否复合对象
     */
    private Boolean compounded;
    /**
     * 数据类型
     */
    private Integer dataType;
    /**
     * 描述
     */
    private String comment;
    /**
     * 排序
     */
    private int sort;
    /**
     * 是否有效
     */
    private Boolean valid;
    /**
     * 校验规则
     */
    private String rule;
    /**
     * 是否支持流属性
     */
    private Boolean flow;
    /**
     * 是否为流属性
     */
    private Boolean forFlow;
    /**
     * 是否支持多个
     */
    private Boolean multi;
    /**
     * 显示定位code
     */
    private String pointCode;

    private List<EntityAttrInfoVO> childrenAtrr;
    private List<RdEntityAttrFlowInfoVO> attrFlowList;
    /**
     * 枚举类型数据
     */
    private List<RdEnumDicInfoVO> enumOptions;
    // get set
}

属性流对象

public class RdEntityAttrFlowInfoVO {

    private String id;

    private String attrId;
    /**
     * 触发类型
     */
    private Integer triggerType;
   /**
     * 监听值
     */
    private String checkKey;
    /**
     * 流属性ids
     */
    private Set<String> nextAttrIds;
    /**
     * 流属性对象集合
     */
    private List<EntityAttrInfoVO> nextAttrInfo;
    
    //get set
}   

期望:

1. 校验支持flow属性
2. 自动填表 表单项联动监听
3. 减少递归函数
4. 性能优化,懒加载可行性
5. 移动端支持

值得探讨的问题:

1. 为什么子属性(childrenAttr)不和流程属性(flowAttr)合并?
   理论上childrenAttr属于元属性,作为主体的基本属性必须存在,即便值为空,而flowAttr是动态的,不一定会存在
2. flowAttr为什么要通过json string 类型存储?
   前期的设想是想按照id->value的方式存储,但这样很难找到原有的对应关系,因为数据库读取是批量的,数据结构的构建都是在内存完成的
3. 是否支持组件化?
   目前该模块在公司项目中尚未抽离出来,但这并不复杂.前端计划脱离elementui减少依赖,组件化和一些功能优化会在后期逐步完成