字段（fields）

对于 field 的配置可以配置在 resource 的 fields 属性内，也可以配置在 block的 fields属性内。而配置在 block 内都 fields 将覆盖合并该区块引用的资源内的字段

resource内声明field

  1. ams.resource('resource-name', {
  2.   demo: {
  3.     fields: {
  4.       id: {
  5.         type: 'text',
  6.         label: 'id',
  7.         ctx: 'view'
  8.       },
  9.       title: {
  10.         type: 'text',
  11.         label: '标题'
  12.       },
  13.       content: {
  14.         type: 'textarea',
  15.         label: '内容'
  16.       },
  17.       create_time: {
  18.         type: 'datetime',
  19.         label: '创建时间',
  20.         ctx: 'view'
  21.       },
  22.       update_time: {
  23.         type: 'datetime',
  24.         label: '更新时间',
  25.         ctx: 'view'
  26.       }
  27.     }
  28.   }
  29. })

props 属性、style 样式、rules表单校验的定制

可以通过配置 props 透传至field根元素

可以通过配置 style 控制field样式

可以通过配置 rules 配置field在表单内的校验规则，校验规则参见 https://github.com/yiminghe/async-validator

  1. {
  2.   testText: {
  3.       type: 'text',
  4.       label: '文本',
  5.       rules: [
  6.           { required: true, message: '请输入活动名称', trigger: 'blur' },
  7.           {
  8.               min: 3,
  9.               max: 5,
  10.               message: '长度在 3 到 5 个字符',
  11.               trigger: 'blur'
  12.           }
  13.       ],
  14.       style: {
  15.           width: '100px'
  16.       },
  17.       props: {
  18.           'suffix-icon': 'el-icon-service'
  19.       }
  20.   }
  21. }

get、set与view配置

每一种field类型都会有默认的get、set、view配置，用于进行字段的服务器数据与本地数据之前的转换

字段（fields） - 图1

如图，当ctx为edit在编辑状态下时，发生作用的get与set，get与set要一一对应；当ctx为view在显示状态时，发生作用的是view

一般情况下，是不需要关心和配置get、set、view的，当遇到以下场景，可以通过配置get、set、view来实现

场景一：默认的数据格式不满足需求，需要进行格式转换

比如 datetime field，其默认的数据格式是时间戳（ 13位 int ）,我们想把他修改成为字符串并加上标记、同时对展示输出进行自定义格式化，可以这样配置

  1. fields: {
  2.     datetime: {
  3.         label: 'datetime',
  4.         type: 'datetime',
  5.         get(value) {
  6.             // 格式化成13位时间戳（datetime组件）
  7.             return Number(value.slice(5))
  8.         },
  9.         set(value) {
  10.             // localValue可能为Date或者是时间戳
  11.             return 'date:' + (value instanceof Date ? value.getTime() : value)
  12.         },
  13.         view(value) {
  14.             // 格式化13位时间戳
  15.             return value.slice(5) / 1000
  16.         }
  17.     }
  18. }

得到如下结果:

字段（fields） - 图2

未配置get、set、view的对比结果:

字段（fields） - 图3