资讯专栏INFORMATION COLUMN

动态高可配置表单设计

Labradors / 3331人阅读

摘要:表单配置校验配置属性流配置生成表单交互技术栈特性支持自定义属性支持基于的值校验支持父子属性支持属性流程设置支持多值数据库设计关键数据结构属性对象中文名英文名短名是否复合对象数据类型描述排序是否有效校验规则是否支持流属性是否为流属性是否支持

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 childrenAtrr;
    private List attrFlowList;
    /**
     * 枚举类型数据
     */
    private List enumOptions;
    // get set
}

属性流对象

public class RdEntityAttrFlowInfoVO {

    private String id;

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

校验支持flow属性

自动填表 表单项联动监听

减少递归函数

性能优化,懒加载可行性

移动端支持

值得探讨的问题:

为什么子属性(childrenAttr)不和流程属性(flowAttr)合并?
理论上childrenAttr属于元属性,作为主体的基本属性必须存在,即便值为空,而flowAttr是动态的,不一定会存在

flowAttr为什么要通过json string 类型存储?
前期的设想是想按照id->value的方式存储,但这样很难找到原有的对应关系,因为数据库读取是批量的,数据结构的构建都是在内存完成的

是否支持组件化?
目前该模块在公司项目中尚未抽离出来,但这并不复杂.前端计划脱离elementui减少依赖,组件化和一些功能优化会在后期逐步完成

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/71191.html

相关文章

  • 动态高可配置表单设计

    摘要:表单配置校验配置属性流配置生成表单交互技术栈特性支持自定义属性支持基于的值校验支持父子属性支持属性流程设置支持多值数据库设计关键数据结构属性对象中文名英文名短名是否复合对象数据类型描述排序是否有效校验规则是否支持流属性是否为流属性是否支持 demo: 表单配置showImg(https://segmentfault.com/img/bVbci1F?w=1730&h=406);校验配置s...

    stackvoid 评论0 收藏0
  • @blankapp/ui,高可定制和主题化的 React Native 组件库

    摘要:简介高可定制和主题化组件库浏览上的文档,或者在我们的中试用。特性轻依赖,非常少的依赖全局主题化,多种样式选择器的实现丰富的基础组件友好的设计如果服务不显示,点击这里查看。 从今年3月开始,经过一段时间的思考,我抛弃了我之前一直挂在口上的全栈的自称,希望可以将我的 100% 的精力都集中在一个方向的技术栈上,从而开始了我的 React Native 路。 在项目初期,我像拼积木一样不断的...

    Mike617 评论0 收藏0
  • 如何构建高可读性和高可重用的 TensorFlow 模型

    摘要:最值得注意的一点是,整个图都是在一个函数中定义和构造的,那么这即不可读也不可重复使用。 在 TensorFlow 中定义你的模型,可能会导致一个巨大的代码量。那么,如何去组织代码,使得它是一个高可读性和高可重用的呢?如果你刚刚开始学习代码架构,那么这里有一个例子,不妨学习一下。定义计算图当你设计一个模型的时候,从类出发是一个非常好的开始。那么如何来设计一个类的接口呢?通常,我们会为模型设计一...

    wemall 评论0 收藏0
  • 使用 "5W1H" 写出高可读的 Git Commit Message

    摘要:共字,读完需分钟。下面提出一种可以帮你写出高可读的实践方法,这个方法并非原创,最早的实践来自于这篇文章。本文作者王仕军,商业转载请联系作者获得授权,非商业转载请注明出处。 showImg(https://segmentfault.com/img/remote/1460000009341335?w=1240&h=403); 共 1926 字,读完需 4 分钟。所有工程师都知道,代码是编写...

    DevYK 评论0 收藏0

发表评论

0条评论

Labradors

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<