当前位置: 首页 > Web前端 > HTML5

动态和高度可配置的表单设计

时间:2023-04-05 15:02:07 HTML5

demo:表单配置验证配置属性流流程配置生成表单交互.gif技术栈:vue+elementui+springboot+mybatis+mysql特性:支持自定义属性支持基于async-validator的值验证支持父子属性支持属性流设置支持多值数据库设计:关键数据结构:属性对象publicclassEntityAttrInfoVO{privateStringid;私有字符串parentId;/***中文名称*/privateStringcname;/***英文名称*/privateStringename;/***简称*/privateStringshortName;/***是否复合对象*/privateBooleancompounded;/***数据类型*/privateIntegerdataType;/***描述*/private字符串注释;/***排序*/privateintsort;/***是否有效*/privateBooleanvalid;/***验证规则*/privateStringrule;/***是否支持流属性*/privateBooleanflow;/***是否是流属性*/privateBooleanforFlow;/***是否支持多个*/privateBooleanmulti;/***显示定位码*/privateStringpointCode;私有列表childrenAtrr;优先级vateListattrFlowList;/***枚举类型数据*/privateListenumOptions;//获取设置}属性流对象publicclassRdEntityAttrFlowInfoVO{privateStringid;私有字符串attrId;/***触发器类型*/privateIntegertriggerType;/***监听值*/privateStringcheckKey;/***流属性ID*/privateSetnextAttrIds;/***流属性对象集合*/privateListnextAttrInfo;//getset}预期:check支持流属性自动填写表单项联动监听减少递归函数性能优化,懒加载可行性移动端支持值得探讨的问题:为什么子属性(childrenAttr)与流程属性(flowAttr)不一致))合并?理论上childrenAttr是元属性,subject的基本属性必须存在,即使值为空,而flowAttr是动态的,不一定存在。为什么flowAttr要存储成json字符串类型?>value以value的形式存储,但是很难找到原来的对应关系,因为数据库是批量读取的,数据结构的构建是在内存中完成的。支持组件化吗?目前这个模块还没有从公司的项目中分离出来,不过这个并不复杂。前端方案与elementui分离,减少依赖,组件化,部分功能优化后期会逐步完成