Skip to main content

属性扩展

什么是json schema？​

Json Schema定义了一套词汇和规则，这套词汇和规则用来定义Json元数据，且元数据也是通过Json数据形式表达的。Json元数据定义了Json数据需要满足的规范，规范包括成员、结构、类型、约束等

相关文档链接: JSON Schema官方文档

根据数据结构生成简单schema工具: 在线JSON转Schema工具

schema的扩展配置​

const CustomField = props => {
  const { input:{ onChange, value } } = props
  retun '我是一个自定义表单项'
}

const mydriver = {
  type: 'object',
  properties: {  
    ip: {
      type: 'string',
      format: 'ipv4',
      title: '设备IP',
      fieldType: 'ip',  
      field:{
        effect: ({ value }, form) => {
            setTimeout(() => {
              form.setFieldData('port', { display: value === '1' })
            })
          }
      }
    },
    port: {
      type: 'number',
      title: '端口',
    },
    unit: {
      type: 'number',
      title: '站号',
      field:{ component: CustomField },
      description:'生产站的序号',
      field:{
       validate:(value) => {
        if (value < 0 || value > 1) {
          return '超出取值范围'
        } else {
          return ''
        }
      }
     }
    },
  },
  formEffect: form =>{
      form.useField('port', state => {
      let value = state.value
      //port控制unit站号显示和隐藏
      if (value) {
        form.setFieldData('unit', { display: true })
      } else {
        form.setFieldData('unit', { display: false })
      }
    })
  },
  required:['ip'],     
  form:['ip','port'], 
}
属性说明
required必填项
form显示的表单项
fieldType使用内置自定义表单项组件
formEffect表单钩子
description字段说明

内置的表单项组件可以通过fieldType指定​

组件配置其他配置 ｜
文字输入框type: 'string',
title: '文字'
文字输入框（高级）type: 'string',
title: '文字',
fieldType: 'input'		textType: 'input'(单行), 'textArea'(多行)
textContent: 'text', 'password', 'email', 'tel', 'id'
文字输入框（带ip校验）type: 'string',
title: 'IP',
fieldType: 'ip'
数字输入框type: 'number',
title: '数字'
数字输入框（高级）type: 'number',
title: '数字',
fieldType:'inputNumber'		max: 100,
min:10,
unit: '天', (单位)
dbType: 'Int32', 'Int64', 'Double'
decimal: 3 (小数位数)
布尔输入type: 'boolean',
title: '布尔值'
选择器type: 'string',
title: '选择器',
enum: ['1', '2', '3'],
enum_title:['A','B','C']
时间选择器type: 'string',
title: '时间',
fieldType: 'datePicker'		format: 'date'(年月日), 'datetime'(年月日-时分秒)

field​

参数描述类型 ｜
suffix显示单位string
attrs当type为’string‘时示例 attrs：{
type: 'number', //输入框的类型
type: 'textarea' //文本地域
placeholder：'请输入' // 默认提示
style: { width: '120px' }
...更多属性请参考ant desig组件Input
}object
validate校验规则可以是正则，return 出的就是错误信息 默认返回nullfunction
effecteffect表单联动与formEffect类似，effect能直接取到当前输入的值 例如
effect: ({ value }, form) => {
setTimeout(() => {
form.setFieldData('unid', { display: value === '1' })
})
}		function
component自定义输入组件， 在组件本身内props里可取到字段所有信息 （组件输入值必须与字段的type对应）ReactNode

formEffect​

该属性为函数，传入form参数，常用来处理表单联动，schema 加载时执行 form参数常用方法

  • useField 监听表单字段修改 

    const fieldKey = 'name'
    form.useField(fieldKey, state => {
      console.log('表单字段修改了'，state.value)
    })

  • setFieldData 设置某字段状态

    // 隐藏fieldKey
    const fieldKey = 'name'
    form.setFieldData(fieldKey, { display: false })

  • change 设置某字段值 

    // 修改值
    const fieldKey = 'name'
    form.change('test', 'abc')

  • getState 获取整个表单状态

    const formState = form.getState()

  • getFieldState 获取某字段值 

    const fieldKey = 'name'
    const formFieldState = form.getFieldState(fieldKey)