mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 02:48:55 +08:00
文档更新 (#2051)
This commit is contained in:
liaoxuezhi
GitHub
parent
b5c854a8ad
commit
1ae8c9130b
@ -19,14 +19,14 @@ order: 1
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本框",
|
||||
"name": "text"
|
||||
},
|
||||
{
|
||||
"type": "password",
|
||||
"type": "input-password",
|
||||
"label": "<a href='./password'>密码</a>",
|
||||
"name": "password"
|
||||
}
|
||||
@ -49,14 +49,14 @@ order: 1
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "常规",
|
||||
"name": "text1"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "内联",
|
||||
"name": "text2",
|
||||
"mode": "inline"
|
||||
@ -72,33 +72,33 @@ order: 1
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "极小",
|
||||
"name": "text-xs",
|
||||
"size": "xs"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "小",
|
||||
"name": "text-sm",
|
||||
"size": "sm"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "中",
|
||||
"name": "text-md",
|
||||
"size": "md"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "大",
|
||||
"name": "text-lg",
|
||||
"size": "lg"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "占满",
|
||||
"name": "text-lg",
|
||||
"size": "full"
|
||||
@ -119,21 +119,21 @@ order: 1
|
||||
{
|
||||
"type": "form",
|
||||
"mode": "horizontal",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "常规",
|
||||
"name": "text1",
|
||||
"placeholder": "常规标签"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "",
|
||||
"name": "text1",
|
||||
"placeholder": "不显示标签"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": false,
|
||||
"name": "text1",
|
||||
"placeholder": "不显示标签且清除空间"
|
||||
@ -150,20 +150,20 @@ order: 1
|
||||
{
|
||||
"type": "form",
|
||||
"mode": "horizontal",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "无标签提示",
|
||||
"name": "text1"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "有标签提示",
|
||||
"labelRemark": "这是一段提示",
|
||||
"name": "text2"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "更复杂的标签提示",
|
||||
"labelRemark": {
|
||||
"type": "remark", "title": "提示", "content": "<pre>first \nsecond\n${text1}</pre>"
|
||||
@ -183,14 +183,14 @@ order: 1
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "常规",
|
||||
"name": "text1"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "禁用",
|
||||
"name": "text2",
|
||||
"disabled": true
|
||||
@ -206,16 +206,16 @@ order: 1
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "number",
|
||||
"type": "input-number",
|
||||
"label": "数量",
|
||||
"name": "number",
|
||||
"value": 0,
|
||||
"description": "调整数量大小查看效果吧！"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本",
|
||||
"name": "text",
|
||||
"disabledOn": "this.number > 1",
|
||||
@ -234,14 +234,14 @@ order: 1
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "常规",
|
||||
"name": "text1"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "隐藏",
|
||||
"name": "text2",
|
||||
"hidden": true
|
||||
@ -260,16 +260,16 @@ order: 1
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "number",
|
||||
"type": "input-number",
|
||||
"label": "数量",
|
||||
"name": "number",
|
||||
"value": 0,
|
||||
"description": "调整数量大小查看效果吧！"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本",
|
||||
"name": "text",
|
||||
"hiddenOn": "this.number > 1",
|
||||
@ -289,9 +289,9 @@ order: 1
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "姓名",
|
||||
"name": "name"
|
||||
}
|
||||
@ -307,9 +307,9 @@ order: 1
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "姓名",
|
||||
"name": "person.name"
|
||||
}
|
||||
@ -334,9 +334,9 @@ order: 1
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "text",
|
||||
"name": "text",
|
||||
"value": "hello world!",
|
||||
@ -354,9 +354,9 @@ order: 1
|
||||
"data":{
|
||||
"text": "hello world!"
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "text",
|
||||
"name": "text",
|
||||
"description": "拥有默认值的 text"
|
||||
@ -375,16 +375,16 @@ order: 1
|
||||
{
|
||||
"type": "form",
|
||||
"debug":"true",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "number",
|
||||
"type": "input-number",
|
||||
"label": "数量",
|
||||
"name": "number",
|
||||
"value": 0,
|
||||
"description": "调整数量大小查看效果吧！"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本",
|
||||
"value":"这是一段文本",
|
||||
"name": "text",
|
||||
@ -403,16 +403,16 @@ order: 1
|
||||
{
|
||||
"type": "form",
|
||||
"debug":"true",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "number",
|
||||
"type": "input-number",
|
||||
"label": "数量",
|
||||
"name": "number",
|
||||
"value": 0,
|
||||
"description": "调整数量大小查看效果吧！"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本",
|
||||
"value":"这是一段文本",
|
||||
"name": "text",
|
||||
@ -438,9 +438,9 @@ order: 1
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "常规",
|
||||
"name": "text",
|
||||
"required": true
|
||||
@ -457,16 +457,16 @@ order: 1
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "number",
|
||||
"type": "input-number",
|
||||
"label": "数量",
|
||||
"name": "number",
|
||||
"value": 0,
|
||||
"description": "调整数量大小查看效果吧！"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本",
|
||||
"name": "text",
|
||||
"requiredOn": "this.number > 1",
|
||||
@ -486,9 +486,9 @@ order: 1
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本",
|
||||
"name": "text",
|
||||
"validations": {
|
||||
@ -506,9 +506,9 @@ order: 1
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本",
|
||||
"name": "text",
|
||||
"validations": {
|
||||
@ -529,9 +529,9 @@ order: 1
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本",
|
||||
"name": "text",
|
||||
"validations": "isNumeric",
|
||||
@ -547,9 +547,9 @@ order: 1
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本",
|
||||
"name": "text",
|
||||
"validations": "isNumeric,minimum:10",
|
||||
@ -569,9 +569,9 @@ amis 会有默认的报错信息，如果你想自定义校验信息，配置`va
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本",
|
||||
"name": "text",
|
||||
"validations": {
|
||||
@ -592,9 +592,9 @@ amis 会有默认的报错信息，如果你想自定义校验信息，配置`va
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本",
|
||||
"name": "text",
|
||||
"validations": {
|
||||
@ -654,10 +654,10 @@ amis 会有默认的报错信息，如果你想自定义校验信息，配置`va
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveFormFailed?waitSeconds=1",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "test2",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "服务端验证"
|
||||
}
|
||||
]
|
||||
@ -691,7 +691,7 @@ Combo 类型的表单项，要实现服务端校验，可以使用 `路径key`
|
||||
"debug": true,
|
||||
"mode": "horizontal",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveFormFailedCombo?waitSeconds=1",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "combo",
|
||||
"name": "combo1",
|
||||
@ -707,10 +707,10 @@ Combo 类型的表单项，要实现服务端校验，可以使用 `路径key`
|
||||
"b": "c"
|
||||
}
|
||||
],
|
||||
"controls": [
|
||||
"items": [
|
||||
{
|
||||
"name": "a",
|
||||
"type": "text"
|
||||
"type": "input-text"
|
||||
},
|
||||
{
|
||||
"name": "b",
|
||||
@ -727,10 +727,10 @@ Combo 类型的表单项，要实现服务端校验，可以使用 `路径key`
|
||||
"a": "a",
|
||||
"b": "b"
|
||||
},
|
||||
"controls": [
|
||||
"items": [
|
||||
{
|
||||
"name": "a",
|
||||
"type": "text"
|
||||
"type": "input-text"
|
||||
},
|
||||
{
|
||||
"name": "b",
|
||||
@ -771,10 +771,10 @@ Table 类型的表单项，要实现服务端校验，可以使用 `路径key`
|
||||
"debug": true,
|
||||
"mode": "horizontal",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveFormFailedTable?waitSeconds=1",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "Table 服务端校验",
|
||||
"type": "table",
|
||||
"type": "input-table",
|
||||
"name": "table",
|
||||
"multiple": true,
|
||||
"value": [
|
||||
@ -811,7 +811,7 @@ Table 类型的表单项，要实现服务端校验，可以使用 `路径key`
|
||||
"label": "Combo 内 Table 服务端校验",
|
||||
"type": "combo",
|
||||
"name": "combo",
|
||||
"controls": [
|
||||
"items": [
|
||||
{
|
||||
"name": "a",
|
||||
"type": "text",
|
||||
@ -819,7 +819,7 @@ Table 类型的表单项，要实现服务端校验，可以使用 `路径key`
|
||||
},
|
||||
{
|
||||
"label": "Table",
|
||||
"type": "table",
|
||||
"type": "input-table",
|
||||
"name": "table",
|
||||
"multiple": true,
|
||||
"value": [
|
||||
|
||||
@ -53,7 +53,7 @@ order: 24
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"type": "email",
|
||||
"type": "input-email",
|
||||
"label": "邮箱："
|
||||
}
|
||||
]
|
||||
@ -705,14 +705,14 @@ Form 支持轮询初始化接口，步骤如下：
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名"
|
||||
},
|
||||
{
|
||||
"type": "email",
|
||||
"type": "input-email",
|
||||
"name": "email",
|
||||
"label": "邮箱"
|
||||
}
|
||||
@ -741,14 +741,14 @@ Form 支持轮询初始化接口，步骤如下：
|
||||
"type": "form",
|
||||
"title": "用户信息",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名"
|
||||
},
|
||||
{
|
||||
"type": "email",
|
||||
"type": "input-email",
|
||||
"name": "email",
|
||||
"label": "邮箱"
|
||||
}
|
||||
@ -777,15 +777,15 @@ Form 支持轮询初始化接口，步骤如下：
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"resetAfterSubmit": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"type": "email",
|
||||
"type": "input-email",
|
||||
"label": "邮箱："
|
||||
}
|
||||
]
|
||||
@ -806,14 +806,14 @@ Form 支持轮询初始化接口，步骤如下：
|
||||
"initApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/page/initData",
|
||||
"redirect": "/user/list",
|
||||
"title": "用户信息",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名"
|
||||
},
|
||||
{
|
||||
"type": "email",
|
||||
"type": "input-email",
|
||||
"name": "email",
|
||||
"label": "邮箱"
|
||||
}
|
||||
@ -832,14 +832,14 @@ Form 支持轮询初始化接口，步骤如下：
|
||||
"initApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/page/initData",
|
||||
"title": "用户信息",
|
||||
"reload": "my_service",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名"
|
||||
},
|
||||
{
|
||||
"type": "email",
|
||||
"type": "input-email",
|
||||
"name": "email",
|
||||
"label": "邮箱"
|
||||
}
|
||||
@ -867,9 +867,9 @@ Form 支持轮询初始化接口，步骤如下：
|
||||
{
|
||||
"type": "form",
|
||||
"target": "detailForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"placeholder": "关键字",
|
||||
"name": "keywords"
|
||||
}
|
||||
@ -879,7 +879,7 @@ Form 支持轮询初始化接口，步骤如下：
|
||||
"type": "form",
|
||||
"name": "detailForm",
|
||||
"initApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/page/initData?keywords=${keywords}",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "名称",
|
||||
"type": "static",
|
||||
@ -927,15 +927,15 @@ Form 支持轮询初始化接口，步骤如下：
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"preventEnterSubmit": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"type": "email",
|
||||
"type": "input-email",
|
||||
"label": "邮箱："
|
||||
}
|
||||
]
|
||||
@ -944,49 +944,49 @@ Form 支持轮询初始化接口，步骤如下：
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------------------- | ----------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| type | `string` | | `"form"` 指定为 Form 渲染器 |
|
||||
| name | `string` | | 设置一个名字后，方便其他组件与其通信 |
|
||||
| mode | `string` | `normal` | 表单展示方式，可以是：`normal`、`horizontal` 或者 `inline` |
|
||||
| horizontal | `Object` | `{"left":"col-sm-2", "right":"col-sm-10", "offset":"col-sm-offset-2"}` | 当 mode 为 `horizontal` 时有用，用来控制 label |
|
||||
| title | `string` | `"表单"` | Form 的标题 |
|
||||
| submitText | `String` | `"提交"` | 默认的提交按钮名称，如果设置成空，则可以把默认按钮去掉。 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| controls | Array<[表单项](./formitem)> | | Form 表单项集合 |
|
||||
| actions | Array<[行为按钮](../action)> | | Form 提交按钮，成员为 Action |
|
||||
| messages | `Object` | | 消息提示覆写，默认消息读取的是 API 返回的消息，但是在此可以覆写它。 |
|
||||
| messages.fetchSuccess | `string` | | 获取成功时提示 |
|
||||
| messages.fetchFailed | `string` | | 获取失败时提示 |
|
||||
| messages.saveSuccess | `string` | | 保存成功时提示 |
|
||||
| messages.saveFailed | `string` | | 保存失败时提示 |
|
||||
| wrapWithPanel | `boolean` | `true` | 是否让 Form 用 panel 包起来，设置为 false 后，actions 将无效。 |
|
||||
| panelClassName | `string` | | 外层 panel 的类名 |
|
||||
| api | [API](../../../docs/types/api) | | Form 用来保存数据的 api。 |
|
||||
| initApi | [API](../../../docs/types/api) | | Form 用来获取初始数据的 api。 |
|
||||
| rules | Array<{rule:string;message:string}> | | 表单组合校验规则 |
|
||||
| interval | `number` | `3000` | 刷新时间(最低 3000) |
|
||||
| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 |
|
||||
| stopAutoRefreshWhen | `string` | `""` | 通过[表达式](./Types.md#表达式) 来配置停止刷新的条件 |
|
||||
| initAsyncApi | [API](../../../docs/types/api) | | Form 用来获取初始数据的 api,与 initApi 不同的是，会一直轮询请求该接口，直到返回 finished 属性为 true 才 结束。 |
|
||||
| initFetch | `boolean` | `true` | 设置了 initApi 或者 initAsyncApi 后，默认会开始就发请求，设置为 false 后就不会起始就请求接口 |
|
||||
| initFetchOn | `string` | | 用表达式来配置 |
|
||||
| initFinishedField | `string` | `finished` | 设置了 initAsyncApi 后，默认会从返回数据的 data.finished 来判断是否完成，也可以设置成其他的 xxx，就会从 data.xxx 中获取 |
|
||||
| initCheckInterval | `number` | `3000` | 设置了 initAsyncApi 以后，默认拉取的时间间隔 |
|
||||
| asyncApi | [API](../../../docs/types/api) | | 设置此属性后，表单提交发送保存接口后，还会继续轮询请求该接口，直到返回 `finished` 属性为 `true` 才 结束。 |
|
||||
| checkInterval | `number` | 3000 | 轮询请求的时间间隔，默认为 3 秒。设置 `asyncApi` 才有效 |
|
||||
| finishedField | `string` | `"finished"` | 如果决定结束的字段名不是 `finished` 请设置此属性，比如 `is_success` |
|
||||
| submitOnChange | `boolean` | `false` | 表单修改即提交 |
|
||||
| submitOnInit | `boolean` | `false` | 初始就提交一次 |
|
||||
| resetAfterSubmit | `boolean` | `false` | 提交后是否重置表单 |
|
||||
| primaryField | `string` | `"id"` | 设置主键 id, 当设置后，检测表单是否完成时（asyncApi），只会携带此数据。 |
|
||||
| target | `string` | | 默认表单提交自己会通过发送 api 保存数据，但是也可以设定另外一个 form 的 name 值，或者另外一个 `CRUD` 模型的 name 值。 如果 target 目标是一个 `Form` ，则目标 `Form` 会重新触发 `initApi`，api 可以拿到当前 form 数据。如果目标是一个 `CRUD` 模型，则目标模型会重新触发搜索，参数为当前 Form 数据。当目标是 `window` 时，会把当前表单的数据附带到页面地址上。 |
|
||||
| redirect | `string` | | 设置此属性后，Form 保存成功后，自动跳转到指定页面。支持相对地址，和绝对地址（相对于组内的）。 |
|
||||
| reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 |
|
||||
| autoFocus | `boolean` | `false` | 是否自动聚焦。 |
|
||||
| canAccessSuperData | `boolean` | `true` | 指定是否可以自动获取上层的数据并映射到表单项上 |
|
||||
| persistData | `string` | `""` | 指定一个唯一的 key，来配置当前表单是否开启本地缓存 |
|
||||
| clearPersistDataAfterSubmit | `boolean` | `true` | 指定表单提交成功后是否清除本地缓存 |
|
||||
| preventEnterSubmit | `boolean` | `false` | 禁用回车提交表单 |
|
||||
| trimValues | `boolean` | `false` | trim 当前表单项的每一个值 |
|
||||
| promptPageLeave | `boolean` | `false` | form 还没保存，即将离开页面前是否弹框确认。 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------------------- | ------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| type | `string` | | `"form"` 指定为 Form 渲染器 |
|
||||
| name | `string` | | 设置一个名字后，方便其他组件与其通信 |
|
||||
| mode | `string` | `normal` | 表单展示方式，可以是：`normal`、`horizontal` 或者 `inline` |
|
||||
| horizontal | `Object` | `{"left":"col-sm-2", "right":"col-sm-10", "offset":"col-sm-offset-2"}` | 当 mode 为 `horizontal` 时有用，用来控制 label |
|
||||
| title | `string` | `"表单"` | Form 的标题 |
|
||||
| submitText | `String` | `"提交"` | 默认的提交按钮名称，如果设置成空，则可以把默认按钮去掉。 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| body | Array<[表单项](./formitem) or [SchemaNode](../../docs/types/schemanode) > | | Form 表单项集合 |
|
||||
| actions | Array<[行为按钮](../action)> | | Form 提交按钮，成员为 Action |
|
||||
| messages | `Object` | | 消息提示覆写，默认消息读取的是 API 返回的消息，但是在此可以覆写它。 |
|
||||
| messages.fetchSuccess | `string` | | 获取成功时提示 |
|
||||
| messages.fetchFailed | `string` | | 获取失败时提示 |
|
||||
| messages.saveSuccess | `string` | | 保存成功时提示 |
|
||||
| messages.saveFailed | `string` | | 保存失败时提示 |
|
||||
| wrapWithPanel | `boolean` | `true` | 是否让 Form 用 panel 包起来，设置为 false 后，actions 将无效。 |
|
||||
| panelClassName | `string` | | 外层 panel 的类名 |
|
||||
| api | [API](../../../docs/types/api) | | Form 用来保存数据的 api。 |
|
||||
| initApi | [API](../../../docs/types/api) | | Form 用来获取初始数据的 api。 |
|
||||
| rules | Array<{rule:string;message:string}> | | 表单组合校验规则 |
|
||||
| interval | `number` | `3000` | 刷新时间(最低 3000) |
|
||||
| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 |
|
||||
| stopAutoRefreshWhen | `string` | `""` | 通过[表达式](./Types.md#表达式) 来配置停止刷新的条件 |
|
||||
| initAsyncApi | [API](../../../docs/types/api) | | Form 用来获取初始数据的 api,与 initApi 不同的是，会一直轮询请求该接口，直到返回 finished 属性为 true 才 结束。 |
|
||||
| initFetch | `boolean` | `true` | 设置了 initApi 或者 initAsyncApi 后，默认会开始就发请求，设置为 false 后就不会起始就请求接口 |
|
||||
| initFetchOn | `string` | | 用表达式来配置 |
|
||||
| initFinishedField | `string` | `finished` | 设置了 initAsyncApi 后，默认会从返回数据的 data.finished 来判断是否完成，也可以设置成其他的 xxx，就会从 data.xxx 中获取 |
|
||||
| initCheckInterval | `number` | `3000` | 设置了 initAsyncApi 以后，默认拉取的时间间隔 |
|
||||
| asyncApi | [API](../../../docs/types/api) | | 设置此属性后，表单提交发送保存接口后，还会继续轮询请求该接口，直到返回 `finished` 属性为 `true` 才 结束。 |
|
||||
| checkInterval | `number` | 3000 | 轮询请求的时间间隔，默认为 3 秒。设置 `asyncApi` 才有效 |
|
||||
| finishedField | `string` | `"finished"` | 如果决定结束的字段名不是 `finished` 请设置此属性，比如 `is_success` |
|
||||
| submitOnChange | `boolean` | `false` | 表单修改即提交 |
|
||||
| submitOnInit | `boolean` | `false` | 初始就提交一次 |
|
||||
| resetAfterSubmit | `boolean` | `false` | 提交后是否重置表单 |
|
||||
| primaryField | `string` | `"id"` | 设置主键 id, 当设置后，检测表单是否完成时（asyncApi），只会携带此数据。 |
|
||||
| target | `string` | | 默认表单提交自己会通过发送 api 保存数据，但是也可以设定另外一个 form 的 name 值，或者另外一个 `CRUD` 模型的 name 值。 如果 target 目标是一个 `Form` ，则目标 `Form` 会重新触发 `initApi`，api 可以拿到当前 form 数据。如果目标是一个 `CRUD` 模型，则目标模型会重新触发搜索，参数为当前 Form 数据。当目标是 `window` 时，会把当前表单的数据附带到页面地址上。 |
|
||||
| redirect | `string` | | 设置此属性后，Form 保存成功后，自动跳转到指定页面。支持相对地址，和绝对地址（相对于组内的）。 |
|
||||
| reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 |
|
||||
| autoFocus | `boolean` | `false` | 是否自动聚焦。 |
|
||||
| canAccessSuperData | `boolean` | `true` | 指定是否可以自动获取上层的数据并映射到表单项上 |
|
||||
| persistData | `string` | `""` | 指定一个唯一的 key，来配置当前表单是否开启本地缓存 |
|
||||
| clearPersistDataAfterSubmit | `boolean` | `true` | 指定表单提交成功后是否清除本地缓存 |
|
||||
| preventEnterSubmit | `boolean` | `false` | 禁用回车提交表单 |
|
||||
| trimValues | `boolean` | `false` | trim 当前表单项的每一个值 |
|
||||
| promptPageLeave | `boolean` | `false` | form 还没保存，即将离开页面前是否弹框确认。 |
|
||||
|
||||
@ -16,14 +16,14 @@ order: 28
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "input-group",
|
||||
"name": "input-group",
|
||||
"label": "input 组合",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"placeholder": "搜索作业ID/名称",
|
||||
"inputClassName": "b-r-none p-r-none",
|
||||
"name": "input-group"
|
||||
@ -38,7 +38,7 @@ order: 28
|
||||
{
|
||||
"type": "input-group",
|
||||
"label": "各种组合",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "select",
|
||||
"name": "memoryUnits",
|
||||
@ -59,7 +59,7 @@ order: 28
|
||||
"value": "Gi"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "memory"
|
||||
},
|
||||
{
|
||||
@ -97,11 +97,11 @@ order: 28
|
||||
input-group 配置校验方法较为特殊，需要配置下面步骤：
|
||||
|
||||
1. input-group 上配置任意`name`值
|
||||
2. input-group 的 controls 内配置的表单项上配置校验规则
|
||||
2. input-group 的 body 内配置的表单项上配置校验规则
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------- | --------------------------- | ------ | ---------- |
|
||||
| className | `string` | | CSS 类名 |
|
||||
| controls | Array<[表单项](./formitem)> | | 表单项集合 |
|
||||
| body | Array<[表单项](./formitem)> | | 表单项集合 |
|
||||
|
||||
@ -19,7 +19,7 @@ order: 2
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -78,7 +78,7 @@ order: 2
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -110,7 +110,7 @@ order: 2
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -128,7 +128,7 @@ order: 2
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -177,7 +177,7 @@ order: 2
|
||||
}
|
||||
]
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -197,7 +197,7 @@ order: 2
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -247,7 +247,7 @@ order: 2
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -279,7 +279,7 @@ order: 2
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -341,7 +341,7 @@ order: 2
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -400,7 +400,7 @@ order: 2
|
||||
}
|
||||
]
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "单选",
|
||||
"type": "select",
|
||||
@ -431,7 +431,7 @@ order: 2
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -464,7 +464,7 @@ order: 2
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -505,7 +505,7 @@ order: 2
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "单选",
|
||||
"type": "select",
|
||||
@ -562,7 +562,7 @@ order: 2
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -595,7 +595,7 @@ order: 2
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -631,7 +631,7 @@ order: 2
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -668,7 +668,7 @@ order: 2
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -707,7 +707,7 @@ order: 2
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -742,7 +742,7 @@ order: 2
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -772,7 +772,7 @@ order: 2
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "select",
|
||||
"type": "select",
|
||||
@ -798,7 +798,7 @@ order: 2
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -828,7 +828,7 @@ order: 2
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -865,7 +865,7 @@ order: 2
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -895,7 +895,7 @@ order: 2
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -935,7 +935,7 @@ order: 2
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -970,7 +970,7 @@ order: 2
|
||||
"title": "新增选项",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "label",
|
||||
@ -994,7 +994,7 @@ order: 2
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -1044,7 +1044,7 @@ order: 2
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -1087,7 +1087,7 @@ order: 2
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -1122,7 +1122,7 @@ order: 2
|
||||
"title": "新增选项",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "label",
|
||||
@ -1145,7 +1145,7 @@ order: 2
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -1191,7 +1191,7 @@ order: 2
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -1236,7 +1236,7 @@ order: 2
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
@ -1272,7 +1272,7 @@ order: 2
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "select",
|
||||
"label": "选项",
|
||||
@ -1312,7 +1312,7 @@ order: 2
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "select",
|
||||
"label": "选项",
|
||||
|
||||
@ -301,7 +301,7 @@ export class App extends React.PureComponent<{
|
||||
</a> */}
|
||||
</ul>
|
||||
|
||||
<div className="hidden-xs ml-2">
|
||||
<div className="hidden-xs ml-auto">
|
||||
<Select
|
||||
overlayPlacement="right-bottom-right-top"
|
||||
clearable={false}
|
||||
|
||||
@ -29,11 +29,11 @@ export interface InputGroupControlSchema extends FormBaseControl {
|
||||
/**
|
||||
* FormItem 集合
|
||||
*/
|
||||
controls: Array<FormControlSchema>;
|
||||
body: Array<FormControlSchema>;
|
||||
}
|
||||
|
||||
export interface InputGroupProps extends FormControlProps {
|
||||
controls: Array<any>;
|
||||
body: Array<any>;
|
||||
formStore: IFormStore;
|
||||
}
|
||||
|
||||
|
||||
@ -360,7 +360,7 @@ export function wrapControl<
|
||||
if (control && control.validate && this.model) {
|
||||
const formItem = this.model as IFormItemStore;
|
||||
let validate = promisify(control.validate.bind(control));
|
||||
this.hook = function () {
|
||||
this.hook = () => {
|
||||
formItem.clearError('component:valdiate');
|
||||
|
||||
return validate(this.props.data, this.getValue(), name).then(
|
||||
|
||||
Loading…
Reference in New Issue
Block a user