Schema 开发，核心的就是 Schema协议规范
formily Schema 字段文档 https://v1.formilyjs.org/#/0yTeT0/jAU8UVSYI8
Schema 是一份递归协议，主要用于描述数据结构，Formily做了扩展，可以支持描述 UI
schema 最终还是要转义为 jsx渲染到页面

  1. {
  2.   "form": { // form属性
  3.     "labelCol": 6,
  4.     "wrapperCol": 12
  5.   },
  6.   "schema": {
  7.     "type": "object", // 提交的数据类型是对象
  8.     "properties": {}
  9.   },
  10.   "x-designable-id": "sg4mgvcj7a8"
  11. }

schema

formily schema协议参考formily/packages/json-schema/src/schema.ts

type 字段类型

‘string’ | ‘object’ | ‘array’ | ‘number’ | string | ‘void’

  • void 字段不提交数据，比如是 Button按钮，Row, Col列

type.object

type 指定为 object 或者 array 的时候，可以指定它的 properties 或者 items，继续向下递归描述
递归结构，其实也就是 object 和 array

  1. {
  2.   "schema": {
  3.     "type": "object", // 提交的数据类型是对象
  4.     "properties": {} // 对象属性
  5. }

type.array

  1. {
  2.   "schema": {
  3.     "type": "array", // 提交的数据类型是 Array
  4.     "items": {} // 数组描述
  5. }
  7. {
  8.   "schema": {
  9.     "type": "object", // 提交的数据类型是对象
  10.     "properties": {
  11.       "users": {
  12.         "type": "array",
  13.         "x-decorator": "FormItem",
  14.         "x-component": "ArrayCards",
  15.         "x-component-props": {
  16.           "title": "Title"
  17.         },
  18.         "items": {
  19.           "type": "object",
  20.           "properties": {
  21.             "name": {
  22.               "type": "void",
  23.               "x-component": "ArrayCards.Index",
  24.               "x-designable-id": "sg4mgvcj7a8",
  25.               "x-index": 0
  26.             },
  27.             "phone": {
  28.               "type": "string",
  29.               "title": "Input",
  30.               "x-decorator": "FormItem",
  31.               "x-component": "Input",
  32.               "x-validator": [],
  33.               "x-component-props": {},
  34.               "x-decorator-props": {},
  35.               "name": "phone",
  36.               "x-designable-id": "sg4mgvcj7a8",
  37.               "x-index": 1
  38.             },
  39.           }
  40.         }
  41.       }
  42.     }
  43.   },
  44.   "x-designable-id": "sg4mgvcj7a8"
  45. }

x-* 属性

对 JSON数据描述，增加了x-*属性，兼容数据描述与UI描述

  • x-decorator-props 代表 FormItem 属性
  • x-component 注册的 UI表单组件
  • x-component-props UI表单组件的 props属性，参考 antd组件 API
  • x-decorator，字段 UI 包装器组件，值一般都是FormItem
  • x-reactions，代表字段联动
  • x-editable，字段是否可编辑
  • x-visible，字段是否显示
  • x-display，代表字段展示模式，值为”none” | “visible” | “hidden”
  • x-validator: [{triggerType:”onBlur”,validator:()=>…}] 字段校验时机
    • x-validator 字段校验规则描述，代替 v1的 x-rules
      1. const item = {
      2. "type": "void",
      3. "x-component": "Card",
      4. "x-component-props": {
      5. "title": "员工信息"
      6. },
      7. "x-designable-id": "m0dueq9kf8a",
      8. "x-index": 0,
      9. "name": "job",
      10. "properties": {
      11. "username": {
      12.  "type": "string",
      13.  "title": "姓名", // FormItem的 label
      14.  "required": true, // 必填
      15.  "x-decorator": "FormItem",
      16.  "x-component": "Input",
      17.  "x-component-props": {
      18.    "maxLength": 20,
      19.    "showCount": true,
      20.    "placeholder": "请输入姓名",
      21.    "prefix": "{{icon('UserOutlined')}}", // icon
      22.  },
      23.  "x-validator": [],
      24.  "x-decorator-props": {},
      25.  "x-designable-id": "cwr3pezmfio",
      26.  "x-index": 0,
      27.  "name": "username",
      28.  "x-reactions": {
      29.    "dependencies": [
      30.      {
      31.        "property": "value",
      32.        "type": "any"
      33.      }
      34.    ],
      35.    "fulfill": {
      36.      "state": {
      37.        "decoratorProps": "{{{\n  labelCol:6,\n  offset: 4\n}}}"
      38.      }
      39.    }
      40.  }
      41. }