动态高可配置表单设计
demo:
表单配置
校验配置
属性流flow配置
生成表单交互 .gif
技术栈:
vue+elementui+springboot+mybatis+mysql
特性:
- 支持自定义属性
- 支持基于async-validator的值校验
- 支持父子属性
- 支持属性流程设置
- 支持多值
数据库设计:
关键数据结构:
属性对象
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
}
期望:
- 校验支持flow属性
- 自动填表 表单项联动监听
- 减少递归函数
- 性能优化,懒加载可行性
- 移动端支持
值得探讨的问题:
- 为什么子属性(childrenAttr)不和流程属性(flowAttr)合并?
理论上childrenAttr属于元属性,作为主体的基本属性必须存在,即便值为空,而flowAttr是动态的,不一定会存在 - flowAttr为什么要通过json string 类型存储?
前期的设想是想按照id->value的方式存储,但这样很难找到原有的对应关系,因为数据库读取是批量的,数据结构的构建都是在内存完成的 - 是否支持组件化?
目前该模块在公司项目中尚未抽离出来,但这并不复杂.前端计划脱离elementui减少依赖,组件化和一些功能优化会在后期逐步完成