動態高可配置表單設計

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減少依賴,組件化和一些功能優化會在后期逐步完成