schema技术方案
一、Schema 概述
1.概述
一个dform表单可以由jsonSchema、uiSchema、layoutSchema、formData、bizData五个json来描述。jsonSchema中描述了表单的数据类型、数据源、数据项等配置;uiSchema描述了表单字段的渲染方法、渲染参数等;formData描述了表单初始填充的各个字段的初始值;bizData中是对表单字段的业务属性(bizData不会影响DForm的渲染);其中的每一个配置json的基本配置项可以参看 Schema文档
2. 支持的组件
3. 涉及的字段类型
-
String
-
Number
-
Boolean
-
Object
-
Array
-
Date
-
DateTime
-
Time
4. 字段校验规则
todo:多字段联合校验如何解决?
// validate模板 [ { "type": "minLength", "message": "不能超过10个字", "value": 10 }, { "type": "phone", "message": "请填写正确的手机号码", }, {...} ]
5. Schema结构
{ // 用于描述表单的数据结构,对于同一个表单是静态不会变的 jsonSchema: { field_name: { // 数据格式类型,有string, number, array等等等 type: "...", // 数据字段的label title: "我是字段中文Label", }, { type: "array", itemType: "object", itemAttributes: { field_1: { type: "string", title: "" }, field_2: { type: "string", title: "" } } }, {...} }, // 用于描述表单的ui结构,对于同一个表单是静态不会变的 uiSchema: { field_name: { // [必选] 组件名称 widget: "...", // [可选] 是否禁用 disable: true/false, // [可选] 组件展示的条件 showCondition: [ { "field": xxx, // 表单域名称 "operator": "==", // 操作符 "value": "xxx" // 值 }, {...} ] // [可选] 组件的选项,每个组件会不一样 widgetOptions: { // input类的组件,会有placeholder这种属性 placeholder: "请输入xxx", // 单选、多选类的组件,会有dataSource dataSource: { // enumKey会拼接上bizData._enumApiBasePath进行请求 enumKey: "mdrc_biz_type", // 若存在enumUrl,则忽略enumKey enumUrl: "//xxx.com/xx/xxx.do", // url请求参数,若存在级联的情况则会更新数据, 请求url会生成为 url?ruleData={"cityCode":"300100"} requstParams: [ { "key": "cityCode", "value": "xxxFiled.cityCode" }, {...} ] } }, // [可选] 数据校验规则 validate: [{...}, {...}], // [可选] 级联规则, 若没有 cascade: { // 设置当前控件更新后,需要级联更新的字段 updateFields: ['field_name1', 'field_name2'] } }, {...}, {...} }, layoutSchema: { // 必选 "pc": { type: "group", // none, group分组表单, (step分步表单, 暂不支持) isSimple: true, // 是否简单表单,决定了详情页是否需要展示表单详情 pageLayout: [ { name: "第一步干嘛干嘛", arrange: [ ['field1', 'field2'], ['atttibuteGroup1'], ['field3'] ] } , {...}, {...} ], widgetLayout: { "atttibuteGroup1": [ ['field4', 'field5'], ['field6'], ['field7'] ] } }, // type是none的 示例 "pc": { type: "none", // none, group分组表单, (step分步表单, 暂不支持) pageLayout: [ ['field1', 'field2'], ['atttibuteGroup1'], ['field3'] ], widgetLayout: { "atttibuteGroup1": [ ['field4', 'field5'], ['field6'], ['field7'] ] } } // 可选,若没有h5,则使用pc schema "h5": { // 格式同pc } } // 表单的数据,对于同一个表单,不同份的数据会不一样 formData: { field_name: data, field_name2: data2, atttibuteGroup1: [ { field_name4: data4, field_name5: data5 }, {...}, {...} ] }, // 业务数据,对于同一个表单,不同份的数据会不一样 bizData: { _baseOApiPath: "//xxx.com", _disableAll: true, process_instance_id: 362478134 // 业务数据信息,以备业务组件进行使用 } }
表单formData在提交的时候,增加 _v 比如说community_type这个字段 { community_type: 1, _v_community_type: "专业" }
6. 枚举数据源
接口:(支持jsonp callback) _baseOApiPath + '/oapi/enum/show/' + 'enumKey1,enumKey2,enumKey3' 可选url参数: tLabel: 文字描述的label vLabel: 值的label 请求示例: 标准:http://se.cainiao.test/oapi/enum/show/scene_id_key,net_dev_reason_pro 自定义:http://se.cainiao.test/oapi/enum/show/scene_id_key,net_dev_reason_pro?tLabel=customText&vLabel=customValue 标准返回值: { "success": true, "data": { "net_dev_reason_pro": [ { "text": "系统推荐不准", "value": "tuijian" },{...} ], "scene_id_key": [ { "text": "通用场景", "value": "comm" }, {...} ] } } 自定义返回值: { "success": true, "data": { "net_dev_reason_pro": [ { "customText": "系统推荐不准", "customValue": "tuijian" },{...} ], "scene_id_key": [ { "customText": "通用场景", "customValue": "comm" }, {...} ] } }
二、原子组件
1. Input
json schema
ui schema
配置样例
// json schema { field_name : { type: "string", // 支持 string, number title: "我是字段中文Label", } } // ui schema { field_name: { widget: "Input", // 组件名称 widgetOptions: { // 组件的选项,每个组件会不一样 placeholder: "请输入xxx", }, } }
2. TextArea
json schema
ui schema
配置样例
// json schema { field_name : { "type": "string", // 支持 string, number "title": "我是字段中文Label", } } // ui schema { field_name: { "widget": "TextArea", // 组件名称 "widgetOptions": { // 组件的选项,每个组件会不一样 "placeholder": "请输入xxx", "rows": 5 }, } }
3. RadioGroup
json schema
ui schema
4. Select
json schema
ui schema
5. DatePicker
json schema
ui schema
6. FileUpload
json schema
ui schema
获取OSS写入Token预签名接口: {_baseOApiPath}/oapi/form/upload/token?fileName=xxx 参数: fileName:【需要urlEncode一下】 文件名,必填,带上后缀名。前端无需通过添加timestamp去重。 返回: { "success": true, "data": { "accessKeyId": "x1lz50IryjFW9soM", "policy": "xxxxxxxxxxxxxxxxx", "signature": "d8/kQwjgPDVz6SstHLtrfhqEuk8=", "host": "http://station-img.oss-cn-hangzhou.aliyuncs.com", "uri": "bpm/file/b5ca37ac-7b44-4ccc-ab8d-09a2d680dc81/你好.xls", "expire": "1513567609" } } 上传至OSS接口文档 Header中签名方式: https://help.aliyun.com/document_detail/31951.html PUT上传: https://help.aliyun.com/document_detail/31978.html
7. TagSelect
json schema
ui schema
三、复合组件
1. RangePicker
json schema
ui schema
2. AttributeGroup
json schema
ui schema
四、业务组件
1. MobileVarify 手机验证码
json schema
ui schema
获取短信验证码接口: POST {host}{url} 请求BODY: json格式 { "mobile": "1xxxxxxxxxx" } 返回: { "success": true, "errorMsg": "", // 例如验证码已经发了5次了,success=false需要弹errorMsg "data": { "retry": "60", // 以秒为单位,可再次重试的时间 } }
2. AddressWithMap 地址地图选择
json schema
ui schema
地址联想接口: GET {_baseOApiPath}/oapi/form/addressGuess URL QUERY: provCode 省code cityCode 市code areaCode 区code townCode 街道code addressPart 当前输入的文本 limit 联想条数 返回: { "success": true, "errorMsg": "", "data": [ { "fullAddress": "北京北京市朝阳区望京街道望京街10号望京SOHOT3", "guessAddress": "望京街10号望京SOHO" } ] } ============ 组件value ============ { provCode: 省code, cityCode: 市code, areaCode: 区code, townCode: 街道code, detailAddress: 详细地址, lng: 经度, lat: 纬度 }
3. BusinessTime 营业时间
json schema
ui schema
============ 组件value ============ { "officeTimeDay": "周一至周五", "officeTimeHourStart": "08", "officeTimeMinuteStart": "30", "officeTimeHourEnd": "22", "officeTimeMinuteEnd": "00" }
4. XPicker 若干选择器
json schema
ui schema
============ 组件value ============ ["22.3", "33.4"]
若有收获,就赏束稻2018-05-17 17:28
相关推荐
赠送jar包:springfox-schema-3.0.0.jar; 赠送原API文档:springfox-schema-3.0.0-javadoc.jar; 赠送源代码:springfox-schema-3.0.0-sources.jar; 赠送Maven依赖信息文件:...双语对照,边学技术、边学英语。
赠送jar包:springfox-schema-2.2.2.jar; 赠送原API文档:springfox-schema-2.2.2-javadoc.jar; 赠送源代码:springfox-schema-2.2.2-sources.jar; 赠送Maven依赖信息文件:...双语对照,边学技术、边学英语。
赠送jar包:springfox-schema-2.9.2.jar; 赠送原API文档:springfox-schema-2.9.2-javadoc.jar; 赠送源代码:springfox-schema-2.9.2-sources.jar; 赠送Maven依赖信息文件:...双语对照,边学技术、边学英语。
赠送jar包:springfox-schema-2.7.0.jar; 赠送原API文档:springfox-schema-2.7.0-javadoc.jar; 赠送源代码:springfox-schema-2.7.0-sources.jar; 赠送Maven依赖信息文件:...双语对照,边学技术、边学英语。
首先给出整体方案,然后阐述了如何运用XMLSchema等技术表示编译器的前端,以及后端的目标机体系结构。生成的编译器符号表能通过XML工具统一管理和验证,从而使生成的编译中间代码有较高的可移植性,能被不同环境中的...
1、资源内容:详细描述和解析说明S1000D4.0版本下各类数据中元素和属性标签的使用场景和使用原则方法 2、使用/学习目标:通过学习,可以有效加深和理解各类元素属性标签的使用情况,有助于手册数据编制过程和相关...
XML_StuGradeExam_domXML解析技术之dom、Sax、dom4j技术演习以及Schema XML文档约束##XML解析开发包Jaxp(sun)Jdomdom4j####ExamExam是一个使用Xml持久化保存数据的xml数据库,该项目是演练dom解析XML技术很好的一个...
Horner方案是一种在给定值下计算多项式函数值的快速简便的方法。 该项目包括有关该主题的Pascal和Java技术工作和编程示例。
JAXB(Java Architecture for XML Binding) 是一个业界的标准,是一项可以根据XML Schema产生Java类的技术。JAXB与xml相互转换实例。
技术和用户文档位于此处: : 作者 该插件由以下机构提供资金: -BRGM长期参与互操作性标准的定义,尤其是与OGC和欧洲INSPIRE指令倡议相关的标准。 ,作为委派给欧洲环境局的任务的一部分 该插件已经开发出 , 并...
它是一种开源的服务器端技术,现在由世界各地的公司和个人组成的大型社区维护。它也是一个执行引擎,作为数据查询语言,用于获取声明性数据。 它的开发是为了优化RESTful API调用,并提供了一种灵活、健壮和更有效的...
Entity and Relation Extraction Based on TensorFlow and BERT. 基于TensorFlow和BERT的管道式实体及关系抽取,2019语言与智能技术竞赛信息抽取任务解决方案。Schema based Knowledge Extraction, SKE 2019
电子商业汇票系统报文格式标准 电子商业汇票系统采用以XML技术为基础的报文格式,并且使用Schema技术来对报文格式进行定义和约束。
Schema XForms SOAP WSDL RDF RSS WAP Web Services 浏览器脚本 JavaScript HTML DOM jQuery AJAX JSON DHTML VBScript E4X WMLScript 服务器脚本 SQL ASP ADO PHP .NET(dotnet) .NET Microsoft .NET ASP .NET ...
iD标记架构这是使用的OpenStreetMap标记数据的目录。 它包括预设,字段,弃用等。...做出改变数据格式的文档位于schema-builder软件包中,这是该项目的技术基础。 要进行更改,请更新data文件夹中的文
目前Web服务的相关标准是WSDL【Web服务描述语言】,一种标准的类似XML Schema的语言,用它来详细说明Web服务和SOAP【简单对象访问协议】。两份报告:研究报告,实验报告 研究报告包含内容: (1)概述 (2)问题...
摘要: XML 解决了数据表示的问题,将数据显示与数据表示分离开,W3C 制定的 XML Schema(XSD)定义了一 套标准的数据类型,并给出了一种语言来扩展这套数据类型。Web 服务平台利用 XSD 来作为其数据类型系统, Web ...
使用开放架构(Open Schema)的XML 作为存储过程参数的XML数据类型 Xquery修改语句 1.7 结论 第2章 临时表和表变量 2.1 临时表 局部临时表 全局临时表 2.2 表变量 限制条件 tempdb 范围和可见...
最新的前端技术栈,支持 Vue2 / Vue3,内置了 i18n 国际化解决方案,方便二次开发。 多终端适配 支持 pc、pad、mobile 多终端布局适配,并可查看展示效果。 丰富的布局 提供了栅格、标签页、表格等复杂的表单布局,...