schema技术方案

专业点表单Schema

 

一、Schema 概述

 

1.概述

一个dform表单可以由jsonSchema、uiSchema、layoutSchema、formData、bizData五个json来描述。jsonSchema中描述了表单的数据类型、数据源、数据项等配置；uiSchema描述了表单字段的渲染方法、渲染参数等；formData描述了表单初始填充的各个字段的初始值；bizData中是对表单字段的业务属性（bizData不会影响DForm的渲染）；其中的每一个配置json的基本配置项可以参看 Schema文档

 

2. 支持的组件

组件名称	支持的返回值
==== 原子组件
Input	string, number
TextArea	string
RadioGroup	string
Select	string
DatePicker	date, datetime
FileUpload	string, array[string]
TagSelect	string, array[string]
==== 复合组件
RangePicker	object{start, end}
AttritubeGroup	array
==== 业务组件
UserSelect 选人组件	string, array[string]	（暂未实现）
MobileVarify 手机验证码组件	string
AddressWithMap 地址组件	object
BusinessTime 营业时间	object
XPicker 长宽选择组件	object
==== UI组件
Label	无，只用作展示	（暂未实现）

 

3. 涉及的字段类型

• String

• Number

• Boolean

• Object

• Array

• Date

• DateTime

• Time

 

4. 字段校验规则

todo：多字段联合校验如何解决？

 

// validate模板
[
    {
        "type": "minLength",
        "message": "不能超过10个字",
        "value": 10        
    },
    {
        "type": "phone",
        "message": "请填写正确的手机号码",
    }, {...}
]

 

校验规则类型	可校验的字段类型	其他属性	规则
required	ALL		必填校验
maxLength	string, array	value	最大长度不能超过value
minLength	string, array	value	最小长度不能低于value
maxValue	number	value	最大的数值不能超过value
minValue	number	value	最小的数值不能低于value
number	ALL		数值类型，可以是小数
integer	ALL		数值类型，只能是整数
afterNowTime	date, datetime	value(小时为单位)	校验时间必须晚于当前(填写表单的)时间 + value小时
express	object, array	value	用于复合组件的关联校验
mobile	string		手机号码正则校验：/^1[345789][0-9]{9}$/

 

 

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

属性	说明	填写的值
type	数据格式类型	string, number
title	字段label	xxxxxx

 

ui schema

属性	说明	填写的值
widget	组件名称	Input
widgetOptions
└-- placeholder	输入框提示
└-- pc:size	输入框预设大小，仅针对pc版本，无线端无效	small, medium, large

 

配置样例

 

// json schema
{
    field_name : {
        type: "string",   // 支持 string, number
        title: "我是字段中文Label",
    }
}

// ui schema
{
    field_name: {
        widget: "Input",  // 组件名称
        widgetOptions: {   // 组件的选项，每个组件会不一样
            placeholder: "请输入xxx",
        },
    }
}

 

2. TextArea

json schema

属性	说明	填写的值
type	数据格式类型	string
title	字段label	xxxxxx

 

ui schema

 

属性	说明	填写的值
widget	组件名称	TextArea
widgetOptions
└-- placeholder	输入框提示
└-- style	样式	inline（行内展示，默认）, block（换行展示）
└-- rows（可选）	输入框行数	1-9 (default: 6)

 

配置样例

 

// 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

属性	说明	填写的值
type	数据格式类型	string
title	字段label	xxxxxx

 

ui schema

 

属性	说明	填写的值
widget	组件名称	RadioGroup
widgetOptions
└-- dataSource	选项数据源	详见 Schema结构
└-- pc:direction（可选）	PC端选项排列方式	horizontal（水平-default） vertical（垂直）
└-- h5:direction（可选）	H5端选项排列方式	horizontal（水平） vertical（垂直-default）

 

4. Select

json schema

属性	说明	填写的值
type	数据格式类型	string
title	字段label	xxxxxx

 

ui schema

属性	说明	填写的值
widget	组件名称	Select
widgetOptions
└-- placeholder（可选）	输入框提示
└-- dataSource	选项数据源	详见 Schema结构

 

5. DatePicker

json schema

属性	说明	填写的值
type	数据格式类型	date, datetime
title	字段label	xxxxxx

 

ui schema

属性	说明	填写的值
widget	组件名称	DatePicker
widgetOptions
└-- placeholder	输入框提示
└-- format	日期选择格式	date, datetime

 

6. FileUpload

json schema

属性	说明	填写的值
type	数据格式类型	string, array[string]
title	字段label	xxxxxx
itemType（可选）	当格式为array时，描述array的item的数据格式	string

 

ui schema

 

属性	说明	填写的值
widget	组件名称	FileUpload
widgetOptions
└-- type	单一上传还是多个上传	single, multiple
└-- accept	允许上传的格式	["image/*", ".csv", ".xls", ".doc", ".docx", ".xlsx", ".ppt", ".pptx"]
└-- maxSize	最大的文件大小，MB为单位	5
└-- maxFiles （当type=multiple时填写）	最多上传几个文件	5

 

获取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

属性	说明	填写的值
type	数据格式类型	string, array
title	字段label	xxxxxx

ui schema

属性	说明	填写的值
widget	组件名称	TagSelect
widgetOptions
└-- dataSource	选项数据源	详见 Schema结构
└-- multiple	是否可以多选，默认false	true/false
└-- defaultText	不做任何选择的文案，默认“全部”
└-- style	样式	inline（行内展示，默认）, block（换行展示）

 

三、复合组件

 

1. RangePicker

json schema

属性	说明	填写的值
type	数据格式类型	object
title	字段label	xxxxxx
attributes	描述object的数据格式	{…}
└-- start	起始值	{type:“number”,  title:""}
└-- end	结束值	{type:“number”, title:""}

 

ui schema

属性	说明	填写的值
widget	组件名称	RangePicker
widgetOptions
└-- type	类型	number, date, datetime
└-- unit	单位，居右展示单位	例如： 元，平米，立方

 

2. AttributeGroup

json schema

属性	说明	填写的值
type	数据格式类型	array
title	字段label	xxxxxx
itemAttributes	描述object的数据格式	{…}
└-- xxx1	xxx	原子组件json schema
└-- xxx2	xx	原子组件json schema

 

ui schema

属性	说明	填写的值
widget	组件名称	AttributeGroup
widgetOptions
└-- itemSchema
└-- xxx1	xxx	原子组件ui schema
└-- xxx2	xxx	原子组件ui schema

四、业务组件

1. MobileVarify 手机验证码

json schema

属性	说明	填写的值
type	数据格式类型	string
title	字段label	xxxxxx

 

ui schema

属性	说明	填写的值
widget	组件名称	MobileVarify
widgetOptions
└-- url	短信验证码接口

 

获取短信验证码接口：
POST {host}{url}
请求BODY： json格式
{
    "mobile": "1xxxxxxxxxx"
}

返回：
{
  "success": true,
  "errorMsg": "", // 例如验证码已经发了5次了，success=false需要弹errorMsg
  "data": {
    "retry": "60", // 以秒为单位，可再次重试的时间
  }
}

 

2. AddressWithMap 地址地图选择

json schema

属性	说明	填写的值
type	数据格式类型	object
title	字段label	xxxxxx

ui schema

属性	说明	填写的值
widget	组件名称	AddressWithMap
widgetOptions
└-- limit	地址联想条数，如果是0则不需要联想

地址联想接口：
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

属性	说明	填写的值
type	数据格式类型	object
title	字段label	xxxxxx

ui schema

属性	说明	填写的值
widget	组件名称	FileUpload
widgetOptions

============ 组件value ============
{
  "officeTimeDay": "周一至周五",
  "officeTimeHourStart": "08",
  "officeTimeMinuteStart": "30",
  "officeTimeHourEnd": "22",
  "officeTimeMinuteEnd": "00"
}

 

4. XPicker 若干选择器

json schema

属性	说明	填写的值
type	数据格式类型	array
title	字段label	xxxxxx

ui schema

属性	说明	填写的值
widget	组件名称	XPicker
widgetOptions
└-- count	有几个框	默认2个
└-- unit	单位
└-- connector	框与框的连接符	默认*

============ 组件value ============
["22.3", "33.4"]

 

 

 

 

若有收获，就赏束稻2018-05-17 17:28

• 一、Schema 概述
• 1.概述
• 2. 支持的组件
• 3. 涉及的字段类型
• 4. 字段校验规则
• todo：多字段联合校验如何解决？
• 5. Schema结构
• 6.  枚举数据源
• 二、原子组件
• 1. Input
• 2. TextArea
• 3. RadioGroup
• 4. Select
• 5. DatePicker
• 6. FileUpload
• 7. TagSelect
• 三、复合组件
• 1. RangePicker
• 2. AttributeGroup
• 四、业务组件
• 1. MobileVarify 手机验证码
• 2. AddressWithMap 地址地图选择
• 3. BusinessTime 营业时间
• 4. XPicker 若干选择器