amis/docs/zh-CN/components/form/service.md

197 lines
4.5 KiB
Markdown
Raw Normal View History

2020-07-28 10:03:53 +08:00
---
title: Service 功能容器
2020-07-29 16:20:21 +08:00
description:
2020-07-28 10:03:53 +08:00
type: 0
group: null
menuName: Service
2020-07-29 16:20:21 +08:00
icon:
2020-07-28 10:03:53 +08:00
order: 49
---
## 基本用法
```schema:height="300" scope="body"
{
"type": "form",
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
"controls": [
{
"type": "service",
"api": "https://houtai.baidu.com/api/mock2/page/initData",
"controls": [
{
"type": "text",
"label": "时间",
"name": "date"
}
]
}
]
}
```
2020-07-29 16:20:21 +08:00
上例中我们在`text`表单项外,嵌套一层 service用于初始化该表单项
2020-07-28 10:03:53 +08:00
> 一般初始化表单项是使用 form 的`initApi`配置,当你需要多个接口来初始化一个表单中的表单项时,可以考虑使用 service
## 作为 FormItem 的不同点
除了支持非表单项时的[Service](../service)的功能以外。作为 FormItem 使用时最大的不同在于作为容器渲染器,他的孩子是优先用表单项还是非表单项。
比如放置一个 `{type: 'text'}`,是渲染一个文本输入框、还是一个文本展示?
两种应该都存在可能,所以作为表单项的 Service, 有两种用法,当把孩子节点放在 `controls` 里面时输出表单项,如果放在 `body` 底下时输出非表单项。
### 放在 body 属性下,输出纯展示类组件
```schema:height="200" scope="form-item"
{
"type": "service",
"api": "https://houtai.baidu.com/api/mock2/page/initData",
"body": {
"type": "text",
"text": "现在是:${date}"
}
}
```
### 放在 controls 属性下,输出表单项
```schema:height="500" scope="form-item"
{
"type": "service",
"api": "https://houtai.baidu.com/api/mock2/page/initData",
"controls": [
{
"type": "text",
"label": "文本输入",
"name": "a"
},
{
"type": "date",
"label": "日期",
"name": "date",
"format": "YYYY-MM-DD"
}
]
}
```
2020-08-25 18:14:07 +08:00
2020-07-28 10:03:53 +08:00
## 接口联动
Service 中的`api`和`schemaApi`都支持**接口联动**。
2020-07-29 17:33:14 +08:00
下面例子中,`数据模板`下拉框的值变化后,会触发 service 重新拉取 api 接口,从而更新数据源,变化表单项的值,更多用法查看 [接口联动](../../concepts/linkage#%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8)。
2020-07-28 10:03:53 +08:00
```schema:height="300" scope="body"
{
"title": "",
"type": "form",
"api": "https://houtai.baidu.com/api/mock/saveForm?waitSeconds=1",
"mode": "horizontal",
"controls": [
{
"label": "数据模板",
"type": "select",
"name": "tpl",
"value": "tpl1",
"size": "sm",
"options": [
{
"label": "模板1",
"value": "tpl1"
},
{
"label": "模板2",
"value": "tpl2"
},
{
"label": "模板3",
"value": "tpl3"
}
],
"description": "<span class=\"text-danger\">修改下拉选择器查看效果</span>"
},
{
"type": "service",
"api": "https://houtai.baidu.com/api/mock2/form/initData?tpl=${tpl}",
"controls": [
{
"label": "名称",
"type": "text",
"name": "name"
},
{
"label": "作者",
"type": "text",
"name": "author"
},
{
"label": "请求时间",
"type": "datetime",
"name": "date"
}
]
}
],
"actions": []
}
```
## 动态渲染表单项
默认 Service 可以通过配置`schemaApi` [动态渲染页面内容](../service#%E5%8A%A8%E6%80%81%E6%B8%B2%E6%9F%93%E9%A1%B5%E9%9D%A2),但是如果想渲染表单项,请返回下面这种格式:
```json
{
"status": 0,
"msg": "",
"data": {
"controls": [
{
"type": "text",
"name": "text",
"label": "文本输入"
}
]
}
}
```
例如下例:
```schema:height="400" scope="form-item"
{
"type": "service",
"schemaApi": "https://houtai.baidu.com/api/mock2/service/schema?type=controls"
}
```
2020-08-25 18:14:07 +08:00
`schemaApi` 除了能返回表单项之外,还能同时返回表单数据,如果你这样返回接口
```json
{
"status": 0,
"msg": "",
"data": {
"data": {
"a": "b" // 这样返回的选项会选中第二个选项B
},
"controls": [
{
"type": "select",
"name": "a",
"label": "选项",
"options": [
{"label": "A", "value": "a"},
{"label": "B", "value": "b"}
]
}
]
}
}
```