動態高可配置表單設計

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