Epage

# schema规范

完整schema由rootSchema及其子孙schema组成的schema树 epage基于24栅格布局，其rootSchema根据grid的schema扩展，logics字段用于维护wiget间逻辑关系，style用于定义整体样式

# schema示例

提示

由于不同widget功能不同，因此schema也不近相同。介绍schema示例以前，先看下Epage导出的内置Schema及关系：

const { BaseSchema, FormSchema, RootSchema } = Epage.schema
const { input, grid } = Epage.widget

FormSchema instanceof BaseSchema   // true
RootSchema instanceof grid.Schema  // true
GridSchema instanceof BaseSchema   // true
input.Schema instanceof FormSchema // true
1
2
3
4
5
6
7

以下介绍以上基础Schema属性：

# BaseSchema实例

基础Schema类。所有Schema都应继承此类。是schema所必须的字段，以下为示例：

{
  "key": "k0CyR0gyT",      // 动态生成唯一key
  "widget": "basewidget",  // 渲染的widget类型，这里仅示例
  "hidden": false,         // 是否隐藏
  "option": {}             // 当前widget特有属性，所有特有属性都应放在此对象内
}
1
2
3
4
5
6

# FormSchema实例

作为表单的Schema基础类，继承至BaseSchema。推荐所有表单widget的Schema都应继承此类。以下以input为示例：

{
  "key": "k0CyR0gyT",   // 动态生成唯一key
  "widget": "input",    // 渲染的widget类型，这里为单行输入框
  "name": "username",   // 提交表单的字段名
  "type": "string",     // 表单数据值类型
  "label": "姓名",       // 表单label显示名
  "description": "",    // 表单字段详细描述
  "help": "",           // description不方便描述时，用于更多信息的描述
  "hidden": false,      // 是否隐藏，常用于表单级联显隐
  "disabled": false,    // 是否禁用，常用于表单级联编辑禁用
  "placeholder": "请输入...", // 输入框占位符提示信息
  "rules": [             // 表单字段规则，支持多个规则组合，约定第一条规则用于控制是否必填
    {
      "required": false, // 是否必填，为true时，label旁边会有红色*
      "message": "必填",  // 规则不满足时提示条件，受required, type字段影响
      "type": "string",  // 可选 string || email || url || pattern
      "trigger": "blur"  // 校验时机，这里为失去焦点时触发。根据不同widget会不同，取决于渲染器依赖的组件库是否支持
    }
  ],
  "option": {},          // 当前widget特有属性，所有特有属性都应放在此处
  "list": []             // 用于是否允许用户动态添加widget，备用字段，暂时无用
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# RootSchema实例

schema作为树状结构的对象，是支持嵌套的，根节点schema由RootSchema实例化而来。因为Epage采用24栅格布局，所以根节点直接继承至GridSchema(grid为布局widget)，并定义部分特有属性，如logics、label等，用于管理全局配置。继承关系如下：

以下为示例：

{
  "key": "k0CyR0gyT",   // 动态生成唯一key
  "widget": "grid",     // 以grid widget渲染
  "title": "",          // schema示例标题
  "description": "",    // schema示例描述
  "size": "default",    // 目前针对表单有效，widget显示尺寸
  "hidden": false,      // 是否隐藏
  "label": {            // 目前针对表单定制属性，用于控制全局label属性
    "width": 80,
    "position": "right",
    "colon": false
  },
  "option": {           // 当前widget特有属性，所有特有属性都应放在此处
    "gutter": 0,
    "align": "top",
    "justify": "start"
  },
  "logics": {}          // 维护widget之间的逻辑关系
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 字段详解

提示

  • 核心字段：为所有schema都应包含的字段名
  • 表单字段：为表单场景的widget应该包含的字段
  • 容器字段：为容器widget应该包含的字段
  • rootSchema字段：为rootSchema特有字段

# key

全局唯一标识。系统自动生成，不可修改，通过此字段可以找到对应widget对象

字段类型 值类型 必填 只读 示例
核心字段 string 是 是 key: "k0CyR0gyT"

# widget

该字段确定UI用哪类widget来渲染，如用下拉框渲染：widget: "select"。

字段类型 值类型 必填 只读 示例
核心字段 string 是 是 key: "input"

WARNING

注意: 该字段必须为实例化Epage或Render时，widgets参数中包含的widget名。否则可能无法渲染。

# type

表单字段值类型。配置规则校验时有用。会校验值类型及生成默认值等。

字段类型 值类型 必填 只读 示例
表单字段 string 是 是 type: "number"

可选值请查看 Epage.TypeBuilder

# name

表单字段名。默认或不填将与key字段相同，可修改。用于提交表单的字段名

字段类型 值类型 必填 只读 示例
表单字段 string 是 否 name: "city"

# label

widget标题。表单场景用于label文案

字段类型 值类型 必填 只读 示例
表单字段 string 否 否 label: "城市"

# description

widget描述。在表单界面上体现在widget底部

字段类型 值类型 必填 只读 示例
表单字段 string 否 否 description: "文件格式支持 jpg、png、gif，大小4M

# help

widget帮助信息。与description功能相似，针对表单场景，会以label右侧鼠标悬停的图标提示。对应复杂字段增加一些帮助说明很有用

字段类型 值类型 必填 只读 示例
表单字段 string 否 否 help: "示例代码：\n return data.list"

# hidden

是否隐藏

字段类型 值类型 必填 只读 示例
核心字段 boolean 否 否 hidden: false

# disabled

是否禁用

字段类型 值类型 必填 只读 示例
表单字段 boolean 否 否 disabled: false

# placeholder

表单占位符

字段类型 值类型 必填 只读 示例
表单字段 string 否 否 placeholder: "请输入..."

# rules

widget规则存储的地方，规则使用async-validator (opens new window)，对于正则必须为字符串形式，设计器内部会自动转换为正则对象，对自定义validator，目前暂不支持。默认值：[{ required: false, message: '必填', trigger: 'blur', type: 'string' }]

字段类型 值类型 必填 只读 示例
表单字段 array 否 否 rules: [{ required: false, message: '必填', trigger: 'blur', type: 'string' }]

# size

widget大小，对应尺寸参考iview，可选 small、default、large。

字段类型 值类型 必填 只读 示例
表单字段 string 否 否 size: "small"

# container

是否为容器widget，容器widget可以参考 grid

字段类型 值类型 必填 只读 示例
容器字段 boolean 否 否 container: true

注意

  • 如果配置 container: true ，schema中需要定义 children 值为数组
  • 内置 widget: 'grid' 为容器widget，暂不支持自定义容器widget，未来计划做自定义容器widget功能

# children

容器widget用于保存子孙widget的schema的字段，container: true 时生效。容器widget可以参考 grid

字段类型 值类型 必填 只读 示例
容器字段 array<object> 否 否 children: []

注意

  • 请与container配饰使用

# option

特有的属性配置。开发者开发widget时定义特有属性

字段类型 值类型 必填 只读 示例
核心字段 object 否 否 option: { format: "YYYY-MM-DD" }

# logics

rootSchema特有字段，用于储存各widget逻辑关系，分为 值逻辑 和 事件逻辑 的关系

字段类型 值类型 必填 只读 示例
rootSchema字段 array<LogicObject> 否 否 logics: []

# 逻辑对象(LogicObject)

逻辑对象(LogicObject)说明:

属性 类型 必填 默认 说明
type string 是 value 可选值：value、event
值逻辑(value): 当widget值满足条件时触发
事件逻辑(event): 由widget响应自身指定事件时触发的逻辑
key string 是 '' 主控widget的schema.key
action string 是 '' 可选值：可参考下方值逻辑与事件逻辑关系
逻辑关系，针对type的不同，逻辑关系也会不同
value any 是 -- key对应widget的表单值，type为value时有效
effects array<EffectObject> 是 [] 由key对应widget的属性值改变或事件响应时，
产生的其他widget的属性值或事件(暂不支持)响应的效果列表

逻辑对象(LogicObject)示例:

{
  "type": "event",
  "key": "kpi1CDJXZ",
  "action": "click",
  "effects": [
    {
      "key": "ktJuXWBRI",
      "properties": [
        { "key": "hidden", "value": true },
        { "key": "disabled", "value": false }
      ]
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 效果对象(EffectObject)

效果对象(EffectObject)说明：

属性 类型 必填 默认 说明
key string 是 '' 受控widget的schema.key
properties array<object{key, value}> 是 [] 受控widget变更属性列表，以{key, value}表示
key: 受控widget的schema字段名
value: 受控widget的schema字段值

效果对象(EffectObject)示例：

{
  "key": "ktJuXWBRI",
  "properties": [
    { "key": "hidden", "value": true },
    { "key": "disabled", "value": false }
  ]
}
1
2
3
4
5
6
7

注意

  • logics为rootSchema特有字段
  • 受控widget目前仅支持disabled及hidden字段的逻辑关系
  • 受控widget暂不支持事件的响应

# 值逻辑与事件逻辑关系

{
  value: [
    { key: '=', value: '等于', },
    { key: '>', value: '大于', },
    { key: '<', value: '小于', },
    { key: '!=', value: '不等于', },
    { key: '<>', value: '包含', },
    { key: '><', value: '不包含', }
  ],
  event: [
    { key: 'click', value: '点击' },
    { key: 'focus', value: '聚焦' },
    { key: 'blur', value: '失焦' },
    { key: 'change', value: '改变' }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

提示

  • widget如何暴露参与逻辑关系的值及事件由定义Schema的静态方法logic决定
  • 值逻辑及事件逻辑目前仅支持以上 值逻辑与事件逻辑关系

如：button的Schema.logic：

{
  value: null,
  event: ['click']
}
1
2
3
4

如：input的Schema.logic：

{
  value: ['=', '!=', '<>', '><'],
  event: []
}
1
2
3
4

# 完整逻辑关系示例

{
  // ...
  // other schema fields
  "logics": [
    {
      // 点击事件逻辑
      "type": "event",
      "key": "kpi1CDJXZ",
      "action": "click",
      "effects": [
        {
          "key": "ktJuXWBRI",
          "properties": [
            { "key": "hidden", "value": true },
            { "key": "disabled", "value": false }
          ]
        }
      ]
    },
    {
      // 值相等逻辑
      "type": "value",
      "key": "ktJuXWBRI",
      "action": "=",
      "value": "1",
      "effects": [
        {
          "key": "kpi1CDJXZ",
          "properties": [
            { "key": "hidden", "value": true },
            { "key": "disabled", "value": false }
          ]
        }
      ]
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
更新: 4/6/2021, 11:10:45 PM

←