mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 10:59:42 +08:00
rm docs-old
This commit is contained in:
RickCole21
parent
ad1354b2eb
commit
5068d27fa2
@ -1,285 +0,0 @@
|
||||
---
|
||||
title: 高级用法
|
||||
shortname: advanced
|
||||
---
|
||||
|
||||
在开始阅读之前，希望你已经阅读 [基本用法](./basic.md) 。
|
||||
|
||||
## 数据作用域
|
||||
|
||||
配置中很多地方都可以用变量如： [tpl](./renderers/Tpl.md) 类型的渲染器、API 中的 Url、FormItem 中的 source 配置、visibleOn、disabledOn 以及 Form 中的 `redirect` 配置等等。
|
||||
|
||||
那么都有哪些数据可以用？这取决于在哪个容器，关于容器中的数据说明如下：
|
||||
|
||||
- `page` 等价于全局变量，因为顶级渲染器就是它，所以下面的所有组件都能用到这个里面的数据。
|
||||
- `amisPage` 当前页面的数据信息，包含标题，id，key 之类的信息。`注意：平台中使用才有此变量。`
|
||||
- `amisUser` 当前用户信息，包含邮箱和用户名信息。`注意：平台中使用才有此变量。`
|
||||
- `params 中的数据` 如果地址栏中也携带了参数，也会 merge 到该层的数据中。
|
||||
- `initApi 返回的数据` 如果 page 设置了 `initApi` 那么初始化的时候会从 API 中拉取数据，拉取到的数据可以用于整个页面。
|
||||
- `crud`
|
||||
|
||||
- 父级 容器中的数据可以直接使用，如 page 容器
|
||||
- `api` 返回的数据，crud 的 api 除了可以返回 `rows` 和 `count` 数据外，其他的数据会被 merge 到数据中，供容器使用。
|
||||
|
||||
- `form`
|
||||
|
||||
- 父级 容器中的数据可以直接使用，如 page 容器
|
||||
- `initApi` 返回的数据。
|
||||
- FormItem 的数据直接会存入到数据中，而且每次修改都会及时更新。通过 FormItem 设置的 `name` 值获取。
|
||||
|
||||
- `formItem` 表单项中，所在的表单中的数据都能用。
|
||||
- `wizard` 同 form
|
||||
- `dialog` dialog 由 button 触发弹出，携带的数据根据按钮所在的位置来决定。
|
||||
- form 中弹出则会把 form 中的数据复制份传给 dialog。
|
||||
- crud 中的批量操作按钮。把整个列表数据复制给 dialog。
|
||||
- crud 中的某一项中的按钮，则只会把对应的那一条数据拷贝给 dialog。
|
||||
- `service`
|
||||
- 父级 容器中的数据可以直接使用，如 page 容器
|
||||
- 如果配置了 `api`, `api` 返回的数据可以用。
|
||||
|
||||
取值过程，也跟 JS 作用域中取值一样，当前作用域中有，则直接返回当前作用域中，如果没有当前作用域没有，会一直往上找，直到找到了为止。如果存在同名变量，则返回就近作用域中数据。
|
||||
|
||||
需要注意的是，要取到值一定是在自己所在的作用域，或者上级作用域里面，同级的是取不到的，如果需要怎么办？可以往下看联动，比如：FormA 的数据发送给 formB, 另外一种方式，可以把接口拉取换到父级组件去操作，没有可拉取数据的组件，就一起包在一个 service 控件里面。
|
||||
|
||||
## 联动
|
||||
|
||||
### 简单的显隐联动
|
||||
|
||||
主要通过 `visibleOn`、`hiddenOn` 和 `disabledOn` 来配置。
|
||||
|
||||
```schema:height="300" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "radios",
|
||||
"name": "foo",
|
||||
"inline": true,
|
||||
"label": " ",
|
||||
"options": [
|
||||
{
|
||||
"label": "类型1",
|
||||
"value": 1
|
||||
},
|
||||
{
|
||||
"label": "类型2",
|
||||
"value": 2
|
||||
},
|
||||
{
|
||||
"label": "类型3",
|
||||
"value": 3
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "text",
|
||||
"name": "text",
|
||||
"placeholder": "类型1 可见",
|
||||
"visibleOn": "data.foo == 1"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "text",
|
||||
"name": "text2",
|
||||
"placeholder": "类型2 不可点",
|
||||
"disabledOn": "data.foo == 2"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "button",
|
||||
"label": "类型三不能提交",
|
||||
"level": "primary",
|
||||
"disabledOn": "data.foo == 3"
|
||||
}
|
||||
|
||||
]
|
||||
```
|
||||
|
||||
### 数据联动
|
||||
|
||||
比如 select 中 options 可能根据某个值不同而不同。
|
||||
|
||||
```schema:height="300" scope="form"
|
||||
[
|
||||
{
|
||||
"label": "选项1",
|
||||
"type": "radios",
|
||||
"labelClassName": "text-muted",
|
||||
"name": "a",
|
||||
"inline": true,
|
||||
"options": [
|
||||
{
|
||||
"label": "选项1",
|
||||
"value": 1
|
||||
},
|
||||
{
|
||||
"label": "选项2",
|
||||
"value": 2
|
||||
},
|
||||
{
|
||||
"label": "选项3",
|
||||
"value": 3
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "选项2",
|
||||
"type": "select",
|
||||
"labelClassName": "text-muted",
|
||||
"name": "b",
|
||||
"inline": true,
|
||||
"source": "/api/mock2/options/level2?a=${a}",
|
||||
"initFetchOn": "data.a"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
他们是怎么关联的呢？注意看 select 的 source 配置 `"/api/mock/getOptions?waitSeconds=1&type=$foo"` 这里用了变量 `$foo` 这个 foo 正好是第一个表单的 name 值。只要这个值发生变化，source 就会重新获取一次。
|
||||
|
||||
这里有个问题就是，数据一旦变化就会出发重新拉取，如果是输入框岂不是拉取得很频繁？没关系，也可以主动拉取如：
|
||||
|
||||
```schema:height="300" scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"name": "lidong",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "foo",
|
||||
"addOn": {
|
||||
"label": "搜索",
|
||||
"className": "btn-info",
|
||||
"type": "button",
|
||||
"actionType": "reload",
|
||||
"disabledOn": "!data.foo",
|
||||
"target": "lidong.select"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"type": "select",
|
||||
"name": "select",
|
||||
"label": "Select",
|
||||
"source": {
|
||||
"method": "get",
|
||||
"url": "/api/mock2/options/level2?waitSeconds=1",
|
||||
"data": {
|
||||
"a": "$foo"
|
||||
}
|
||||
},
|
||||
"desc": "这里只是演示刷新不会真正的过滤。"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
注意，source 中的传参是通过 source 中的 data 关联的，不能写在 source 的 url 中，因为如果写了，就会自动监控值的变化而自动刷新，写在 data 里面关联则不会。如果对 source 中的配置规则不了解，请前往 [API 说明](./renderers/Types.md#API)
|
||||
|
||||
另外注意 button 的 target 值，正好是这个 form 的 name 值 `lidong` 的 formItem 的 name 值 `select`。当按钮的对象是一个 formItem 时，会出发 formItem 的数据重新拉取。
|
||||
|
||||
### 组件间通信
|
||||
|
||||
CRUD 有个 filter 配置项，里面可以配置表单项，当他提交时 CRUD 自动就会携带接受到的表单数据然后重新获取数据。有个限制，就是 CRUD 和 filter 必须放在一起，不能分开，实际上完全可以分开，只要 Form 的 target 是 CRUD 的 name 值即可。
|
||||
|
||||
```schema:height="300"
|
||||
{
|
||||
"type": "page",
|
||||
"aside": {
|
||||
"type": "form",
|
||||
"target": "doc-crud",
|
||||
"wrapWithPanel": false,
|
||||
"className": "wrapper-xs",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "keywords",
|
||||
"placeholder": "请输入关键字",
|
||||
"clearable": true,
|
||||
"addOn": {
|
||||
"label": "搜索",
|
||||
"className": "btn-info",
|
||||
"type": "submit"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"body": {
|
||||
"name": "doc-crud",
|
||||
"type": "crud",
|
||||
"api": "/api/sample",
|
||||
"syncLocation": false,
|
||||
"title": null,
|
||||
"perPageField":"rn",
|
||||
"defaultParams":{
|
||||
"rn": 10
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"width": 20,
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"sortable": true,
|
||||
"toggled": false
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Form 的 target 还可以是另外一个 Form，当 A Form 把自己的数据提交给 B Form 时，A 的数据会被合并到 B Form 中，同时，B Form 会再次初始化，如：拉取 initApi, 重新拉取 formItem 上的 source 等等。 比如用户管理中的加入用户操作就是用这种方式实现的。
|
||||
|
||||
```schema:height="300"
|
||||
{
|
||||
"type": "page",
|
||||
"aside": {
|
||||
"type": "form",
|
||||
"target": "doc-form",
|
||||
"wrapWithPanel": false,
|
||||
"className": "wrapper-xs",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "keywords",
|
||||
"clearable": true,
|
||||
"placeholder": "请输入关键字",
|
||||
"addOn": {
|
||||
"label": "提交",
|
||||
"className": "btn-info",
|
||||
"type": "submit"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"body": {
|
||||
"name": "doc-form",
|
||||
"type": "form",
|
||||
"api": "/api/sample",
|
||||
"submitText": null,
|
||||
"controls": [
|
||||
{
|
||||
"type": "static",
|
||||
"name": "keywords",
|
||||
"label": "你刚刚输入的是："
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
111
docs-old/api.md
111
docs-old/api.md
@ -1,111 +0,0 @@
|
||||
---
|
||||
title: 动态数据
|
||||
---
|
||||
|
||||
除了渲染静态页面及表单，amis 还能渲染动态数据，比如下面这个表格数据是来自 api 这个接口的请求
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "crud",
|
||||
"api": " http://xxx/api/sample",
|
||||
"columns": [
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "引擎"
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "浏览器"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
amis 期望这个 api 接口返回的是如下的格式：
|
||||
|
||||
```json
|
||||
{
|
||||
"status": 0,
|
||||
"msg": "",
|
||||
"data": {
|
||||
"items": [
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "IE 9"
|
||||
},
|
||||
{
|
||||
"engine": "Gecko",
|
||||
"browser": "Firefox 70"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
下面是具体介绍
|
||||
|
||||
### 整体格式
|
||||
|
||||
要求每个接口都返回 `status` 字段用来表示成功还是失败，如果失败了，通过 `msg` 字段来说明失败原因。当然如果成功 `msg` 也可以用来设置提示信息。
|
||||
|
||||
```json
|
||||
{
|
||||
"status": 0, // 0 表示成功，非0 表示失败
|
||||
"msg": "", // 提示信息 包括失败和成功
|
||||
"data": {
|
||||
// ...
|
||||
// 具体的数据
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
如果你的系统有自己的规范，可以在 fetcher 统一进行适配，如：
|
||||
|
||||
```js
|
||||
{
|
||||
renderAmis(
|
||||
{
|
||||
// 这里是 amis 的 Json 配置。
|
||||
type: 'page',
|
||||
title: '简单页面',
|
||||
body: '内容'
|
||||
},
|
||||
{
|
||||
// props
|
||||
},
|
||||
{
|
||||
// 忽略别的设置项
|
||||
fetcher: function (api) {
|
||||
// 适配这种格式 {"code": 0, "message": "", "result": {}}
|
||||
return axios(config).then(response => {
|
||||
let payload = {
|
||||
status: response.data.code,
|
||||
msg: response.data.message,
|
||||
data: response.data.result
|
||||
};
|
||||
|
||||
return {
|
||||
...response,
|
||||
data: payload
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 具体要求
|
||||
|
||||
每个渲染的接口返回都有自己的格式要求，主要体现在 data 字段内部，具体请参考每个渲染的接口说明。
|
||||
|
||||
- [Page](./renderers/Page.md#接口说明)
|
||||
- [CRUD](./renderers/CRUD.md#接口说明)
|
||||
- [Form](./renderers/Form/Form.md#接口说明)
|
||||
- [Select](./renderers/Form/Select.md#接口说明)
|
||||
- [Checkboxes](./renderers/Form/Checkboxes.md#接口说明)
|
||||
- [Radios](./renderers/Form/Radios.md#接口说明)
|
||||
- [List](./renderers/Form/List.md#接口说明)
|
||||
- [Wizard](./renderers/Wizard.md#接口说明)
|
||||
|
||||
`TBD`
|
||||
@ -1,406 +0,0 @@
|
||||
---
|
||||
title: 基本用法
|
||||
---
|
||||
|
||||
先来看个简单的例子。
|
||||
|
||||
```schema:height="300"
|
||||
{
|
||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
"type": "page",
|
||||
"title": "这是标题部分",
|
||||
"subTitle": "这是子标题",
|
||||
"remark": "这是小提示信息",
|
||||
"aside": "这是侧边栏部分",
|
||||
"body": "这是内容区",
|
||||
"toolbar": "这是工具栏部分"
|
||||
}
|
||||
```
|
||||
|
||||
> 可以通过编辑器实时修改预览
|
||||
|
||||
通过使用上面的例子就能配出一个基本页面框架，这是 amis 渲染器配置的入口。从 `page` 渲染器开始出发，通过在容器中放置不同的渲染器来配置不同性质的页面。
|
||||
|
||||
简单说明以上配置信息。
|
||||
|
||||
- `$schema` 这个字段可以忽略，他是指定当前 JSON 配置是符合指定路径 https://houtai.baidu.com/v2/schemas/page.json 的 JSON SCHEMA 文件描述的。PS: 编辑器就是靠这个描述文件提示的，可以 hover 到字段上看效果。
|
||||
- `type` 指定渲染器类型，这里指定的类型为 `page`。 更多渲染器类型可以去[这里面查看](./renderers.md)。
|
||||
- `title` 从 title 开始就是对应的渲染模型上的属性了。这里用来指定标题内容。
|
||||
- `subTitle` 副标题.
|
||||
- `remark` 标题上面的提示信息
|
||||
- `aside` 边栏区域内容
|
||||
- `body` 内容区域的内容
|
||||
- `toolbar` 工具栏部分的内容
|
||||
|
||||
这里有三个配置都是容器类型的。`aside`、`body` 和 `toolbar`。什么是容器类型？容器类型表示，他能够把其他渲染类型放进来。以上的例子为了简单，直接放了个字符串。字符串类型内部是把他当成了 [tpl](./renderers/Tpl.md) 渲染器来处理，在这里也可以通过对象的形式指定，如以下的例子的 body 区域是完全等价的。
|
||||
|
||||
```schema:height="100"
|
||||
{
|
||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json",
|
||||
"type": "page",
|
||||
"body": {
|
||||
"type": "tpl",
|
||||
"tpl": "这是内容区"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
容器内可以直接放一个渲染器，也可以放多个，用数组包起来即可如：
|
||||
|
||||
```schema:height="130"
|
||||
{
|
||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json",
|
||||
"type": "page",
|
||||
"body": [
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "<p>段落1</p>"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "<p>段落2</p>"
|
||||
},
|
||||
|
||||
"<p>段落3</p>"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
再来看一个表单页面的列子
|
||||
|
||||
```schema:height="440"
|
||||
{
|
||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
"type": "page",
|
||||
"body": {
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"type": "form",
|
||||
"title": "联系我们",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"label": "姓名",
|
||||
"name": "name"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "email",
|
||||
"label": "邮箱",
|
||||
"name": "email",
|
||||
"required": true
|
||||
},
|
||||
|
||||
{
|
||||
"type": "textarea",
|
||||
"label": "内容",
|
||||
"name": "content",
|
||||
"required": true
|
||||
}
|
||||
],
|
||||
"actions": [
|
||||
{
|
||||
"label": "发送",
|
||||
"type": "submit",
|
||||
"primary": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
这个例子就是在 body 容器内，放置一个 `form` 类型的渲染器，它就成了一个简单的表单提交页面了，controls 中可以决定放哪些表单项目，actions 中可以放置操作按钮。
|
||||
|
||||
如果 body 区域放置一个 `crud` 渲染器，它就是列表页面了，再来看个栗子：
|
||||
|
||||
```schema:height="600"
|
||||
{
|
||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
"type": "page",
|
||||
"title": "增删改查示例",
|
||||
"toolbar": [
|
||||
{
|
||||
"type": "button",
|
||||
"actionType": "dialog",
|
||||
"label": "新增",
|
||||
"icon": "fa fa-plus pull-left",
|
||||
"primary": true,
|
||||
"dialog": {
|
||||
"title": "新增",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"name": "sample-edit-form",
|
||||
"api": "",
|
||||
"controls": [
|
||||
{
|
||||
"type": "alert",
|
||||
"level": "info",
|
||||
"body": "因为没有配置 api 接口，不能真正的提交哈！"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "text",
|
||||
"label": "文本",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "image",
|
||||
"name": "image",
|
||||
"label": "图片",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "date",
|
||||
"name": "date",
|
||||
"label": "日期",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"name": "type",
|
||||
"label": "选项",
|
||||
"options": [
|
||||
{
|
||||
"label": "漂亮",
|
||||
"value": "1"
|
||||
},
|
||||
{
|
||||
"label": "开心",
|
||||
"value": "2"
|
||||
},
|
||||
{
|
||||
"label": "惊吓",
|
||||
"value": "3"
|
||||
},
|
||||
{
|
||||
"label": "紧张",
|
||||
"value": "4"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"body": [
|
||||
{
|
||||
"type": "crud",
|
||||
"api": "/api/mock2/crud/list",
|
||||
"defaultParams": {
|
||||
"perPage": 5
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"name": "text",
|
||||
"label": "文本",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"type": "image",
|
||||
"label": "图片",
|
||||
"multiple": false,
|
||||
"name": "image",
|
||||
"popOver": {
|
||||
"title": "查看大图",
|
||||
"body": "<div class=\"w-xxl\"><img class=\"w-full\" src=\"${image}\"/></div>"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "date",
|
||||
"type": "date",
|
||||
"label": "日期"
|
||||
},
|
||||
{
|
||||
"name": "type",
|
||||
"label": "映射",
|
||||
"type": "mapping",
|
||||
"map": {
|
||||
"1": "<span class='label label-info'>漂亮</span>",
|
||||
"2": "<span class='label label-success'>开心</span>",
|
||||
"3": "<span class='label label-danger'>惊吓</span>",
|
||||
"4": "<span class='label label-warning'>紧张</span>",
|
||||
"*": "其他：${type}"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "container",
|
||||
"label": "操作",
|
||||
"body": [
|
||||
{
|
||||
"type": "button",
|
||||
"icon": "fa fa-eye",
|
||||
"level": "link",
|
||||
"actionType": "dialog",
|
||||
"tooltip": "查看",
|
||||
"dialog": {
|
||||
"title": "查看",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
{
|
||||
"type": "static",
|
||||
"name": "id",
|
||||
"label": "ID"
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "static",
|
||||
"name": "text",
|
||||
"label": "文本"
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "static-image",
|
||||
"label": "图片",
|
||||
"name": "image",
|
||||
"popOver": {
|
||||
"title": "查看大图",
|
||||
"body": "<div class=\"w-xxl\"><img class=\"w-full\" src=\"${image}\"/></div>"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"name": "date",
|
||||
"type": "static-date",
|
||||
"label": "日期"
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"name": "type",
|
||||
"label": "映射",
|
||||
"type": "static-mapping",
|
||||
"map": {
|
||||
"1": "<span class='label label-info'>漂亮</span>",
|
||||
"2": "<span class='label label-success'>开心</span>",
|
||||
"3": "<span class='label label-danger'>惊吓</span>",
|
||||
"4": "<span class='label label-warning'>紧张</span>",
|
||||
"*": "其他：${type}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"icon": "fa fa-pencil",
|
||||
"tooltip": "编辑",
|
||||
"level": "link",
|
||||
"actionType": "drawer",
|
||||
"drawer": {
|
||||
"position": "left",
|
||||
"size": "lg",
|
||||
"title": "编辑",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"name": "sample-edit-form",
|
||||
"controls": [
|
||||
{
|
||||
"type": "alert",
|
||||
"level": "info",
|
||||
"body": "因为没有配置 api 接口，不能真正的提交哈！"
|
||||
},
|
||||
{
|
||||
"type": "hidden",
|
||||
"name": "id"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "text",
|
||||
"label": "文本",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "image",
|
||||
"name": "image",
|
||||
"multiple": false,
|
||||
"label": "图片",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "date",
|
||||
"name": "date",
|
||||
"label": "日期",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"name": "type",
|
||||
"label": "选项",
|
||||
"options": [
|
||||
{
|
||||
"label": "漂亮",
|
||||
"value": "1"
|
||||
},
|
||||
{
|
||||
"label": "开心",
|
||||
"value": "2"
|
||||
},
|
||||
{
|
||||
"label": "惊吓",
|
||||
"value": "3"
|
||||
},
|
||||
{
|
||||
"label": "漂亮",
|
||||
"value": "紧张"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"level": "link",
|
||||
"icon": "fa fa-times text-danger",
|
||||
"actionType": "ajax",
|
||||
"tooltip": "删除",
|
||||
"confirmText": "您确认要删除? 没有配置 api 确定了也没用，还是不要确定了",
|
||||
"api": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
这个栗子最主要的渲染器就是 CRUD 渲染器了，他的作用是配置了个 API，把数据拉取过来后，根据配置 columns 信息完成列表展示，列类型可以是静态文本、图片、映射或者日期等等。 `columns` 通过 `name` 与行数据关联。除了展示外还可以放置操作按钮。
|
||||
|
||||
这里相对复杂一点配置就是按钮了，按钮主要是通过 `actionType`来决定用户点下的行为。可以配置成 弹框、发送 ajax、页面跳转、复制内容到剪切板、刷新目标组件等等。具体请参考：[Action 渲染器说明](./renderers/Action.md)
|
||||
|
||||
更多用法请参考[渲染器手册](./renderers.md)和示例。
|
||||
@ -1,433 +0,0 @@
|
||||
---
|
||||
title: 定制功能
|
||||
---
|
||||
|
||||
如果默认的组件不能满足需求，可以通过定制组件来进行扩展，在 amis 中有两种方法：
|
||||
|
||||
1. 临时扩展，适合无需复用的组件。
|
||||
2. 注册自定义类型，适合需要在很多地方复用的组件。
|
||||
|
||||
> 注意，扩展只支持使用 React 组件方式引入的 amis，使用 JSSDK 无法支持
|
||||
|
||||
## 临时扩展
|
||||
|
||||
amis 的 JSON 配置最终会转成 React 组件来执行，所以如果只是想在某个配置中加入定制功能，可以直接在这个 JSON 配置里写 React 代码，比如下面这个例子：
|
||||
|
||||
```jsx
|
||||
{
|
||||
"type": "page",
|
||||
"title": "自定义组件示例",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"label": "用户名",
|
||||
"name": "usename"
|
||||
},
|
||||
{
|
||||
"name": "mycustom",
|
||||
"children": ({
|
||||
value,
|
||||
onChange
|
||||
}) => (
|
||||
<div>
|
||||
<p>这个是个自定义组件</p>
|
||||
<p>当前值：{value}</p>
|
||||
<a className="btn btn-default" onClick={
|
||||
() => onChange(Math.round(Math.random() * 10000))
|
||||
}>随机修改</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
其中的 `mycustom` 就是一个临时扩展，它的 `children` 属性是一个函数，它的返回内容和 React 的 Render 方法一样，即 jsx，在这个方法里你可以写任意 JavaScript 来实现自己的定制需求，这个函数有两个参数 `value` 和 `onChange`，`value` 就是组件的值，`onChange` 方法用来改变这个值，比如上面的例子中，点击链接后就会修改 `mycustom` 为一个随机数，在提交表单的时候就变成了这个随机数。
|
||||
|
||||
与之类似的还有个 `component` 属性，这个属性可以传入 React Component，如果想用 React Hooks，请通过 `component` 传递，而不是 `children`。
|
||||
|
||||
这种扩展方式既简单又灵活，但它是写在配置中的，如果需要在很多地方，可以使用下面的「注册自定义类型」方式：
|
||||
|
||||
## 注册自定义类型
|
||||
|
||||
注册自定义类型需要了解 amis 的工作原理。
|
||||
|
||||
### 工作原理
|
||||
|
||||
amis 的渲染过程是将 `json` 转成对应的 React 组件。先通过 `json` 的 type 找到对应的 `Component` 然后，然后把其他属性作为 `props` 传递过去完成渲染。
|
||||
|
||||
拿一个表单页面来说，如果用 React 组件开发一般长这样。
|
||||
|
||||
```jsx
|
||||
<Page title="页面标题" subTitle="副标题">
|
||||
<Form
|
||||
title="用户登录"
|
||||
controls={[
|
||||
{
|
||||
type: 'text',
|
||||
name: 'username',
|
||||
label: '用户名'
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</Page>
|
||||
```
|
||||
|
||||
把以上配置方式换成 amis JSON, 则是：
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "page",
|
||||
"title": "页面标题",
|
||||
"subTitle": "副标题",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"title": "用户登录",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "username",
|
||||
"label": "用户名"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
那么，amis 是如何将 JSON 转成组件的呢？直接根据节点的 type 去跟组件一一对应？这样会重名，比如在表格里面展示的类型 `text` 跟表单里面的 `text` 是完全不一样的，一个负责展示，一个却负责输入。所以说一个节点要被什么组件渲染，还需要携带上下文（context）信息。
|
||||
|
||||
如何携带上下文（context）信息？amis 中是用节点的路径（path）来作为上下文信息。从上面的例子来看，一共有三个节点，path 信息分别是。
|
||||
|
||||
- `page` 页面节点
|
||||
- `page/body/form` 表单节点
|
||||
- `page/body/form/controls/0/text` 文本框节点。
|
||||
|
||||
根据 path 的信息就能很容易注册组件跟节点对应了。
|
||||
|
||||
Page 组件的示例代码
|
||||
|
||||
```jsx
|
||||
@Renderer({
|
||||
test: /^page$/
|
||||
// ... 其他信息隐藏了
|
||||
})
|
||||
export class PageRenderer extends React.Component {
|
||||
// ... 其他信息隐藏了
|
||||
render() {
|
||||
const {
|
||||
title,
|
||||
body,
|
||||
render // 用来渲染孩子节点，如果当前是叶子节点则可以忽略。
|
||||
} = this.props;
|
||||
return (
|
||||
<div className="page">
|
||||
<h1>{title}</h1>
|
||||
<div className="body-container">
|
||||
{render('body', body) /*渲染孩子节点*/}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Form 组件的示例代码
|
||||
|
||||
```jsx
|
||||
@Renderer({
|
||||
test: /(^|\/)form$/
|
||||
// ... 其他信息隐藏了
|
||||
})
|
||||
export class FormRenderer extends React.Component {
|
||||
// ... 其他信息隐藏了
|
||||
render() {
|
||||
const {
|
||||
title,
|
||||
controls,
|
||||
render // 用来渲染孩子节点，如果当前是叶子节点则可以忽略。
|
||||
} = this.props;
|
||||
return (
|
||||
<form className="form">
|
||||
{controls.map((control, index) => (
|
||||
<div className="form-item" key={index}>
|
||||
{render(`${index}/control`, control)}
|
||||
</div>
|
||||
))}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Text 组件的示例代码
|
||||
|
||||
```jsx
|
||||
@Renderer({
|
||||
test: /(^|\/)form(?:\/\d+)?\/control(?\/\d+)?\/text$/
|
||||
// ... 其他信息隐藏了
|
||||
})
|
||||
export class FormItemTextRenderer extends React.Component {
|
||||
// ... 其他信息隐藏了
|
||||
render() {
|
||||
const {
|
||||
label,
|
||||
name,
|
||||
onChange
|
||||
} = this.props;
|
||||
return (
|
||||
<div className="form-group">
|
||||
<label>{label}<label>
|
||||
<input type="text" onChange={(e) => onChange(e.currentTarget.value)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
那么渲染过程就是根据节点 path 信息，跟组件池中的组件 `test` (检测) 信息做匹配，如果命中，则把当前节点转给对应组件渲染，节点中其他属性将作为目标组件的 props。需要注意的是，如果是容器组件，比如以上例子中的 `page` 组件，从 props 中拿到的 `body` 是一个子节点，由于节点类型是不固定，由使用者决定，所以不能直接完成渲染，所以交给属性中下发的 `render` 方法去完成渲染，`{render('body', body)}`，他的工作就是拿子节点的 path 信息去组件池里面找到对应的渲染器，然后交给对应组件去完成渲染。
|
||||
|
||||
### 编写自定义组件
|
||||
|
||||
了解了基本原理后，来看个简单的例子：
|
||||
|
||||
```jsx
|
||||
import * as React from 'react';
|
||||
import {Renderer} from 'amis';
|
||||
|
||||
@Renderer({
|
||||
test: /(^|\/)my\-renderer$/
|
||||
})
|
||||
class CustomRenderer extends React.Component {
|
||||
render() {
|
||||
const {tip} = this.props;
|
||||
return <div>这是自定义组件：{tip}</div>;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
有了以上这段代码后，就可以这样使用了。
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "page",
|
||||
"title": "自定义组件示例",
|
||||
"body": {
|
||||
"type": "my-renderer",
|
||||
"tip": "简单示例"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
看了前面[amis 工作原理](#工作原理)应该不难理解，这里注册一个 React 组件，当节点的 path 信息是 `my-renderer` 结尾时，交给当前组件来完成渲染。
|
||||
|
||||
如果这个组件还能通过 `children` 属性添加子节点，则需要使用下面这种写法：
|
||||
|
||||
```jsx
|
||||
import * as React from 'react';
|
||||
import {Renderer} from 'amis';
|
||||
|
||||
@Renderer({
|
||||
test: /(^|\/)my\-renderer2$/
|
||||
})
|
||||
class CustomRenderer extends React.Component {
|
||||
render() {
|
||||
const {tip, body, render} = this.props;
|
||||
return (
|
||||
<div>
|
||||
<p>这是自定义组件：{tip}</p>
|
||||
{body ? (
|
||||
<div className="container">
|
||||
{render('body', body, {
|
||||
// 这里的信息会作为 props 传递给子组件，一般情况下都不需要这个
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
有了以上这段代码后，就可以这样使用了。
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "page",
|
||||
"title": "自定义组件示例",
|
||||
"body": {
|
||||
"type": "my-renderer2",
|
||||
"tip": "简单示例",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"label": "用户名",
|
||||
"name": "usename"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
跟第一个列子不同的地方是，这里多了个 `render` 方法，这个方法就是专门用来渲染子节点的。来看下参数说明：
|
||||
|
||||
- `region` 区域名称，你有可能有多个区域可以作为容器，请不要重复。
|
||||
- `node` 子节点。
|
||||
- `props` 可选，可以通过此对象跟子节点通信等。
|
||||
|
||||
### 表单项的扩展
|
||||
|
||||
以上是普通渲染器的注册方式，如果是表单项，为了更简单的扩充，请使用 `FormItem` 注解，而不是 `Renderer`。 原因是如果用 `FormItem` 是不用关心：label 怎么摆，表单验证器怎么实现，如何适配表单的 3 中展现方式（水平、上下和内联模式），而只用关心：有了值后如何回显，响应用户交互设置新值。
|
||||
|
||||
```jsx
|
||||
import * as React from 'react';
|
||||
import {FormItem} from 'amis';
|
||||
|
||||
@FormItem({
|
||||
type: 'custom'
|
||||
})
|
||||
class MyFormItem extends React.Component {
|
||||
render() {
|
||||
const {value, onChange} = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>这个是个自定义组件</p>
|
||||
<p>当前值：{value}</p>
|
||||
<a
|
||||
className="btn btn-default"
|
||||
onClick={() => onChange(Math.round(Math.random() * 10000))}
|
||||
>
|
||||
随机修改
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
有了以上这段代码后，就可以这样使用了。
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "page",
|
||||
"title": "自定义组件示例",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"label": "用户名",
|
||||
"name": "usename"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "custom",
|
||||
"label": "随机值",
|
||||
"name": "random"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> 注意: 使用 FormItem 默认是严格模式，即只有必要的属性变化才会重新渲染，有可能满足不了你的需求，如果忽略性能问题，可以传入 `strictMode`: `false` 来关闭。
|
||||
|
||||
表单项开发主要关心两件事。
|
||||
|
||||
1. 呈现当前值。如以上例子，通过 `this.props.value` 判定如果勾选了则显示`已勾选`，否则显示`请勾选`。
|
||||
2. 接收用户交互，通过 `this.props.onChange` 修改表单项值。如以上例子，当用户点击按钮时，切换当前选中的值。
|
||||
|
||||
至于其他功能如：label/description 的展示、表单验证功能、表单布局（常规、左右或者内联）等等，只要是通过 FormItem 注册进去的都无需自己实现。
|
||||
|
||||
需要注意，获取或者修改的是什么值跟配置中 `type` 并列的 `name` 属性有关，也就是说直接关联某个变量，自定义中直接通过 props 下发了某个指定变量的值和修改的方法。如果你想获取其他数据，或者设置其他数据可以看下以下说明：
|
||||
|
||||
- `获取其他数据` 可以通过 `this.props.data` 查看，作用域中所有的数据都在这了。
|
||||
- `设置其他数据` 可以通过 `this.props.onBulkChange`， 比如: `this.props.onBulkChange({a: 1, b: 2})` 等于同时设置了两个值。当做数据填充的时候，这个方法很有用。
|
||||
|
||||
### 其它高级定制
|
||||
|
||||
下面是一些不太常用的 amis 扩展方式及技巧。
|
||||
|
||||
#### 自定义验证器
|
||||
|
||||
如果 amis [自带的验证](./renderers/Form/FormItem.md#)能满足需求了，则不需要关心。组件可以有自己的验证逻辑。
|
||||
|
||||
```jsx
|
||||
import * as React from 'react';
|
||||
import {FormItem} from 'amis';
|
||||
import * as cx from 'classnames';
|
||||
|
||||
@FormItem({
|
||||
type: 'custom-checkbox'
|
||||
})
|
||||
export default class CustomCheckbox extends React.Component {
|
||||
validate() {
|
||||
// 通过 this.props.value 可以知道当前值。
|
||||
|
||||
return isValid ? '' : '不合法，说明不合法原因。';
|
||||
}
|
||||
// ... 其他省略了
|
||||
}
|
||||
```
|
||||
|
||||
上面的栗子只是简单说明，另外可以做`异步验证`，validate 方法可以返回一个 promise。
|
||||
|
||||
#### OptionsControl
|
||||
|
||||
如果你的表单组件性质和 amis 的 Select、Checkboxes、List 差不多，用户配置配置 source 可通过 API 拉取选项，你可以用 OptionsControl 取代 FormItem 这个注解。
|
||||
|
||||
用法是一样，功能方面主要多了以下功能。
|
||||
|
||||
- 可以配置 options，options 支持配置 visibleOn hiddenOn 等表达式
|
||||
- 可以配置 `source` 换成动态拉取 options 的功能，source 中有变量依赖会自动重新拉取。
|
||||
- 下发了这些 props，可以更方便选项。
|
||||
- `options` 不管是用户配置的静态 options 还是配置 source 拉取的，下发到组件已经是最终的选项了。
|
||||
- `selectedOptions` 数组类型，当前用户选中的选项。
|
||||
- `loading` 当前选项是否在加载
|
||||
- `onToggle` 切换一个选项的值
|
||||
- `onToggleAll` 切换所有选项的值，类似于全选。
|
||||
|
||||
#### 组件间通信
|
||||
|
||||
关于组件间通信，amis 中有个机制就是，把需要被引用的组件设置一个 name 值，然后其他组件就可以通过这个 name 与其通信，比如这个[栗子](./advanced.md#组件间通信)。其实内部是依赖于内部的一个 Scoped Context。你的组件希望可以被别的组件引用，你需要把自己注册进去，默认自定义的非表单类组件并没有把自己注册进去，可以参考以下代码做添加。
|
||||
|
||||
```js
|
||||
import * as React from 'react';
|
||||
import {Renderer, ScopedContext} from 'amis';
|
||||
@Renderer({
|
||||
test: /(?:^|\/)my\-renderer$/
|
||||
})
|
||||
export class CustomRenderer extends React.Component {
|
||||
static contextType = ScopedContext;
|
||||
|
||||
componentWillMount() {
|
||||
const scoped = this.context;
|
||||
scoped.registerComponent(this);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
const scoped = this.context;
|
||||
scoped.unRegisterComponent(this);
|
||||
}
|
||||
|
||||
// 其他部分省略了。
|
||||
}
|
||||
```
|
||||
|
||||
把自己注册进去了，其他组件就能引用到了。同时，如果你想找别的组件，也同样是通过 scoped 这个 context，如： `scoped.getComponentByName("xxxName")` 这样就能拿到目标组件的实例了（前提是目标组件已经配置了 name 为 `xxxName`）。
|
||||
|
||||
#### 其他功能方法
|
||||
|
||||
自定义的渲染器 props 会下发一个非常有用的 env 对象。这个 env 有以下功能方法。
|
||||
|
||||
- `env.fetcher` 可以用来做 ajax 请求如： `this.props.env.fetcher('xxxAPi', this.props.data).then((result) => console.log(result))`
|
||||
- `env.confirm` 确认框，返回一个 promise 等待用户确认如： `this.props.env.confirm('你确定要这么做？').then((confirmed) => console.log(confirmed))`
|
||||
- `env.alert` 用 Modal 实现的弹框，个人觉得更美观。
|
||||
- `env.notify` toast 某个消息 如： `this.props.env.notify("error", "出错了")`
|
||||
- `env.jumpTo` 页面跳转。
|
||||
@ -1,282 +0,0 @@
|
||||
---
|
||||
title: 快速开始
|
||||
---
|
||||
|
||||
有两种方式使用 amis：
|
||||
|
||||
1. [React 组件](#React 组件)，可以整合到 React 项目中，适合熟悉 React 的开发者，可以[开发自定义组件进行扩展](../custom)。
|
||||
2. [JSSDK](#JSSDK)，可以放到任意页面中使用，能使用 amis 内置的渲染组件，但无法开发自定义组件，适合不使用 React 的项目或不熟悉前端的开发者。
|
||||
|
||||
## React 组件
|
||||
|
||||
### 安装依赖
|
||||
|
||||
直接通过 npm 安装即可。
|
||||
|
||||
```
|
||||
npm i amis
|
||||
```
|
||||
|
||||
### 整合到 React 组件中
|
||||
|
||||
可以在 React Component 这么使用（TypeScript）。
|
||||
|
||||
```tsx
|
||||
import * as React from 'react';
|
||||
import {
|
||||
render as renderAmis
|
||||
} from 'amis';
|
||||
|
||||
class MyComponent extends React.Component<any, any> {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<p>通过 amis 渲染页面</p>
|
||||
{renderAmis({
|
||||
// schema
|
||||
// 这里是 amis 的 Json 配置。
|
||||
type: 'page',
|
||||
title: '简单页面',
|
||||
body: '内容'
|
||||
}, {
|
||||
// props
|
||||
}, {
|
||||
// env
|
||||
// 这些是 amis 需要的一些接口实现
|
||||
// 可以参考本项目里面的 Demo 部分代码。
|
||||
|
||||
updateLocation: (location:string/*目标地址*/, replace:boolean/*是replace，还是push？*/) => {
|
||||
// 用来更新地址栏
|
||||
},
|
||||
|
||||
jumpTo: (location:string/*目标地址*/) => {
|
||||
// 页面跳转， actionType: link、url 都会进来。
|
||||
},
|
||||
|
||||
fetcher: ({
|
||||
url,
|
||||
method,
|
||||
data,
|
||||
config
|
||||
}:{
|
||||
url:string/*目标地址*/,
|
||||
method:'get' | 'post' | 'put' | 'delete'/*发送方式*/,
|
||||
data: object | void/*数据*/,
|
||||
config: object/*其他配置*/
|
||||
}) => {
|
||||
// 用来发送 Ajax 请求，建议使用 axios
|
||||
},
|
||||
notify: (type:'error'|'success'/**/, msg:string/*提示内容*/) => {
|
||||
// 用来提示用户
|
||||
},
|
||||
alert: (content:string/*提示信息*/) => {
|
||||
// 另外一种提示，可以直接用系统框
|
||||
},
|
||||
confirm: (content:string/*提示信息*/) => {
|
||||
// 确认框。
|
||||
}
|
||||
});}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
`(schema:Schema, props?:any, env?: any) => JSX.Element`
|
||||
|
||||
参数说明：
|
||||
|
||||
- `schema` 即页面配置，请前往[基本用法](./basic.md)了解.
|
||||
- `props` 一般都用不上，如果你想传递一些数据给渲染器内部使用，可以传递 data 数据进去。如：
|
||||
|
||||
```jsx
|
||||
() =>
|
||||
renderAmis(schema, {
|
||||
data: {
|
||||
username: 'amis'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
这样，内部所有组件都能拿到 `username` 这个变量的值。
|
||||
|
||||
- `env` 环境变量，可以理解为这个渲染器工具的配置项，需要调用者实现部分接口。
|
||||
|
||||
- `session: string` 默认为 'global'，决定 store 是否为全局共用的，如果想单占一个 store，请设置不同的值。
|
||||
- `fetcher: (config: fetcherConfig) => Promise<fetcherResult>` 用来实现 ajax 发送。
|
||||
|
||||
示例
|
||||
|
||||
```js
|
||||
fetcher: ({
|
||||
url,
|
||||
method,
|
||||
data,
|
||||
responseType,
|
||||
config,
|
||||
headers
|
||||
}: any) => {
|
||||
config = config || {};
|
||||
config.withCredentials = true;
|
||||
responseType && (config.responseType = responseType);
|
||||
|
||||
if (config.cancelExecutor) {
|
||||
config.cancelToken = new (axios as any).CancelToken(config.cancelExecutor);
|
||||
}
|
||||
|
||||
config.headers = headers || {};
|
||||
|
||||
if (method !== 'post' && method !== 'put' && method !== 'patch') {
|
||||
if (data) {
|
||||
config.params = data;
|
||||
}
|
||||
|
||||
return (axios as any)[method](url, config);
|
||||
} else if (data && data instanceof FormData) {
|
||||
// config.headers = config.headers || {};
|
||||
// config.headers['Content-Type'] = 'multipart/form-data';
|
||||
} else if (data
|
||||
&& typeof data !== 'string'
|
||||
&& !(data instanceof Blob)
|
||||
&& !(data instanceof ArrayBuffer)
|
||||
) {
|
||||
data = JSON.stringify(data);
|
||||
// config.headers = config.headers || {};
|
||||
config.headers['Content-Type'] = 'application/json';
|
||||
}
|
||||
|
||||
return (axios as any)[method](url, data, config);
|
||||
}
|
||||
```
|
||||
|
||||
- `isCancel: (e:error) => boolean` 判断 ajax 异常是否为一个 cancel 请求。
|
||||
|
||||
示例
|
||||
|
||||
```js
|
||||
isCancel: (value: any) => (axios as any).isCancel(value)
|
||||
```
|
||||
|
||||
- `notify: (type:string, msg: string) => void` 用来实现消息提示。
|
||||
- `alert: (msg:string) => void` 用来实现警告提示。
|
||||
- `confirm: (msg:string) => boolean | Promise<boolean>` 用来实现确认框。
|
||||
- `jumpTo: (to:string, action?: Action, ctx?: object) => void` 用来实现页面跳转，因为不清楚所在环境中是否使用了 spa 模式，所以用户自己实现吧。
|
||||
- `updateLocation: (location:any, replace?:boolean) => void` 地址替换，跟 jumpTo 类似。
|
||||
- `isCurrentUrl: (link:string) => boolean` 判断目标地址是否为当前页面。
|
||||
- `theme: 'default' | 'cxd'` 目前支持两种主题。
|
||||
- `copy: (contents:string, options?: {shutup: boolean}) => void` 用来实现，内容复制。
|
||||
- `getModalContainer: () => HTMLElement` 用来决定弹框容器。
|
||||
- `loadRenderer: (chema:any, path:string) => Promise<Function>` 可以通过它懒加载自定义组件，比如： https://github.com/baidu/amis/blob/master/__tests__/factory.test.tsx#L64-L91。
|
||||
- `affixOffsetTop: number` 固顶间距，当你的有其他固顶元素时，需要设置一定的偏移量，否则会重叠。
|
||||
- `affixOffsetBottom: number` 固底间距，当你的有其他固底元素时，需要设置一定的偏移量，否则会重叠。
|
||||
- `richTextToken: string` 内置 rich-text 为 frolaEditor，想要使用，请自行购买，或者自己实现 rich-text 渲染器。
|
||||
|
||||
## JSSDK
|
||||
|
||||
JSSDK 适合对前端或 React 不了解的开发者，它不依赖 npm 及 webpack，直接引入代码就能使用，但需要注意这种方式不支持[定制组件](../sdk)，只能使用 amis 内置的组件。
|
||||
|
||||
JSSDK 的代码从以下地址获取：
|
||||
|
||||
- JS： https://houtai.baidu.com/v2/jssdk
|
||||
- CSS： https://houtai.baidu.com/v2/csssdk
|
||||
|
||||
然后在页面中插入下面的代码就能渲染出来了：
|
||||
|
||||
```js
|
||||
(function () {
|
||||
var amis = amisRequire('amis/embed');
|
||||
amis.embed(
|
||||
'#container',
|
||||
{
|
||||
type: 'page',
|
||||
title: 'AMIS Demo',
|
||||
body: 'This is a simple amis page.'
|
||||
},
|
||||
{
|
||||
// props 一般不用传。
|
||||
},
|
||||
{
|
||||
// env
|
||||
fetcher: () => {
|
||||
// 可以不传，用来实现 ajax 请求
|
||||
},
|
||||
|
||||
jumpTo: () => {
|
||||
// 可以不传，用来实现页面跳转
|
||||
},
|
||||
|
||||
updateLocation: () => {
|
||||
// 可以不传，用来实现地址栏更新
|
||||
},
|
||||
|
||||
isCurrentUrl: () => {
|
||||
// 可以不传，用来判断是否目标地址当前地址。
|
||||
},
|
||||
|
||||
copy: () => {
|
||||
// 可以不传，用来实现复制到剪切板
|
||||
},
|
||||
|
||||
notify: () => {
|
||||
// 可以不传，用来实现通知
|
||||
},
|
||||
|
||||
alert: () => {
|
||||
// 可以不传，用来实现提示
|
||||
},
|
||||
|
||||
confirm: () => {
|
||||
// 可以不传，用来实现确认框。
|
||||
}
|
||||
}
|
||||
);
|
||||
})();
|
||||
```
|
||||
|
||||
注意：以上的 SDK 地址是一个页面跳转，会跳转到一个 CDN 地址，而且每次跳转都是最新的版本，随着 amis 的升级这个地址会一直变动，如果你的页面已经完成功能回归，请直接使用某个固定地址，这样才不会因为 amis 升级而导致你的页面不可用。
|
||||
|
||||
另外，sdk 代码也伴随 npm 一起发布了，不使用 CDN 版本，直接替换成 npm 包里面的 `amis/sdk.js` 和 `amis/sdk.css` 即可。
|
||||
|
||||
完整示例:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>AMIS Demo</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||||
/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
<link rel="stylesheet" href="amis/sdk.css" />
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
.app-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" class="app-wrapper"></div>
|
||||
<script src="amis/sdk.js"></script>
|
||||
<script type="text/javascript">
|
||||
(function () {
|
||||
var amis = amisRequire('amis/embed');
|
||||
amis.embed('#root', {
|
||||
type: 'page',
|
||||
title: 'AMIS Demo',
|
||||
body: 'hello world'
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -1,198 +0,0 @@
|
||||
---
|
||||
title: AMIS 是什么？
|
||||
shortname: intro
|
||||
---
|
||||
|
||||
amis 是一个前端低代码框架，它使用 JSON 配置来生成页面，可以极大节省页面开发工作量，极大提升开发前端界面的效率。
|
||||
|
||||
## 为什么要做 amis？
|
||||
|
||||
在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 UI 组件库，你必须懂 npm、webpack、react/vue，必须熟悉 ES 6 语法，最好还了解状态管理，比如 Redux，如果没接触过函数式编程，一开始入门就很困难，而它还有巨大的[生态](https://github.com/markerikson/redux-ecosystem-links)，相关的库有 2347 个，然而前端技术的发展不会停滞，等学完这些后可能会发现大家都用 Hooks 了、某个打包工具取代 WebPack 了。。。
|
||||
|
||||
而有时候你只是为了做个普通的增删改查界面，用于系统管理，类似下面这种：
|
||||
|
||||
```schema:height="500"
|
||||
{
|
||||
"$schema": "https://houtai.baidu.com/v2/schemas/page.json#",
|
||||
"title": "浏览器内核对 CSS 的支持情况",
|
||||
"remark": "嘿，不保证数据准确性",
|
||||
"type": "page",
|
||||
"body": {
|
||||
"type": "crud",
|
||||
"draggable": true,
|
||||
"api": "/api/sample",
|
||||
"keepItemSelectionOnPageChange": true,
|
||||
"filter": {
|
||||
"title": "筛选",
|
||||
"submitText": "",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "keywords",
|
||||
"placeholder": "关键字",
|
||||
"addOn": {
|
||||
"label": "搜索",
|
||||
"type": "submit"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"bulkActions": [
|
||||
{
|
||||
"label": "批量删除",
|
||||
"actionType": "ajax",
|
||||
"api": "delete:/api/sample/${ids|raw}",
|
||||
"confirmText": "确定要批量删除?"
|
||||
},
|
||||
{
|
||||
"label": "批量修改",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "批量编辑",
|
||||
"name": "sample-bulk-edit",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "/api/sample/bulkUpdate2",
|
||||
"controls": [
|
||||
{
|
||||
"type": "hidden",
|
||||
"name": "ids"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "engine",
|
||||
"label": "Engine"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"quickSaveApi": "/api/sample/bulkUpdate",
|
||||
"quickSaveItemApi": "/api/sample/$id",
|
||||
"filterTogglable": true,
|
||||
"headerToolbar": [
|
||||
"filter-toggler",
|
||||
"bulkActions",
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "一共有 ${count} 行数据。",
|
||||
"className": "v-middle"
|
||||
},
|
||||
{
|
||||
"type": "columns-toggler",
|
||||
"align": "right"
|
||||
},
|
||||
{
|
||||
"type": "drag-toggler",
|
||||
"align": "right"
|
||||
},
|
||||
{
|
||||
"type": "pagination",
|
||||
"align": "right"
|
||||
}
|
||||
],
|
||||
"footerToolbar": [
|
||||
"statistics",
|
||||
"switch-per-page",
|
||||
"pagination"
|
||||
],
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"width": 20,
|
||||
"sortable": true,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"sortable": true,
|
||||
"searchable": true,
|
||||
"type": "text",
|
||||
"remark": "Trident 就是 IE，Gecko 就是 Firefox"
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)",
|
||||
"popOver": {
|
||||
"body": {
|
||||
"type": "tpl",
|
||||
"tpl": "就是为了演示有个叫 popOver 的功能"
|
||||
},
|
||||
"offset": {
|
||||
"y": 50
|
||||
}
|
||||
},
|
||||
"sortable": true,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade",
|
||||
"quickEdit": {
|
||||
"mode": "inline",
|
||||
"type": "select",
|
||||
"options": [
|
||||
"A",
|
||||
"B",
|
||||
"C",
|
||||
"D",
|
||||
"X"
|
||||
]
|
||||
},
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"type": "operation",
|
||||
"label": "操作",
|
||||
"width": 100,
|
||||
"buttons": [
|
||||
{
|
||||
"type": "button",
|
||||
"icon": "fa fa-times text-danger",
|
||||
"actionType": "ajax",
|
||||
"tooltip": "删除",
|
||||
"confirmText": "您确认要删除?",
|
||||
"api": "delete:/api/sample/$id"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
这个界面虽然用 Bootstrap 也能快速搭起来，但要想体验好就需要加很多细节功能，比如数据动态加载、编辑单行数据、批量删除和修改、查询某列、按某列排序、隐藏某列、开启整页内容拖拽排序、表格有分页（页数还会同步到地址栏，刷新页面试试）、如果往下拖动还有首行冻结来方便查看表头等，全部实现这些需要大量的代码。
|
||||
|
||||
然而上面也看到了，在 amis 里只需要 150 行 JSON 配置（嘿，其中 40 多行只有一个括号），你不需要了解 React/Vue、Webpack，甚至不需要了解 JavaScript，即便没学过 amis 也能猜到大部分配置的作用，只需要简单配置就能完成所有页面开发，这正是建立 amis 的初衷，我们认为**对于大部分常用页面，应该使用最简单的方法来实现**，而不是越来越复杂。
|
||||
|
||||
## 用 JSON 写页面有什么好处？
|
||||
|
||||
为了实现用最简单方式来生成大部分页面，amis 的解决方案是基于 JSON 来配置，它的独特好处是：
|
||||
|
||||
- **不需要懂前端**就能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的。在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 JavaScript。
|
||||
- **不受前端技术更新的影响**，同时还能享受 amis 升级带来的界面改进，百度内部最老的 amis 页面是 4 年多前创建的，至今还在使用，而当年的 Angular/Vue/React 版本现在都废弃了，当年流行的 Gulp 也被 Webpack 取代了，如果这些页面不是用 amis，现在的维护成本会很高。
|
||||
- 可以**完全**使用[可视化页面编辑器](https://fex-team.github.io/amis-editor/#/edit/0)来制作页面，一般前端可视化编辑器只能用来做静态原型，而 amis 可视化编辑器做出的页面是可以直接上线的。
|
||||
|
||||
## amis 的其它亮点
|
||||
|
||||
- **提供完整的界面解决方案**，其它 UI 框架必须使用 JavaScript 来组装业务逻辑，而 amis 只需 JSON 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能。
|
||||
- 内置 **92** 种 UI 组件，包括其它 UI 框架都会不提供的富文本编辑器、代码编辑器等，能满足各种页面组件展现的需求，而且对于特殊的展现形式还可以通过[自定义组件](./custom.md)来扩充。
|
||||
- 容器组件支持**无限层级嵌套**，可以通过组合来满足各种布局需求。
|
||||
- 经历了长时间的实战考验，amis 在百度内部得到了广泛使用，在 4 年多的时间里创建了 3w 多页面，从内容审核到机器管理，从数据分析到模型训练，amis 满足了各种各样的页面需求。
|
||||
|
||||
## amis 不适合做什么？
|
||||
|
||||
使用 JSON 有优点但也有明显缺点，在以下场合并不适合 amis：
|
||||
|
||||
- 大量定制 UI，尤其是面向普通客户（toC）的产品页面
|
||||
- JSON 配置使得 amis 更适合做有大量常见 UI 组件的页面，但对于面向普通客户的页面，往往追求个性化的视觉效果，这种情况下用 amis 就不合适，实际上绝大部分前端 UI 组件库也都不适合，只能定制开发。
|
||||
- 有极为复杂的交互，或者对交互有很特殊的要求
|
||||
- 有些复杂的前端功能，比如可视化编辑器，其中有大量定制的拖拽操作，这种需要依赖原生 DOM 实现的功能无法使用 amis。
|
||||
- 但对于某些交互固定的领域，比如图连线，amis 后续会有专门的组件来实现。
|
||||
|
||||
## 接下来
|
||||
|
||||
请阅读[快速开始](./getting-started.md)来学习如何使用 amis。
|
||||
@ -1,101 +0,0 @@
|
||||
---
|
||||
title: 渲染器手册
|
||||
---
|
||||
|
||||
amis 页面是由一个个渲染模型组成的，并且支持无限层级嵌套，掌握他们规则，就能灵活配置出各种页面。
|
||||
|
||||
开始之前，请您一定要先阅读[基本用法](./basic.md)。
|
||||
|
||||
- [Page](./renderers/Page.md): JSON 配置最外层的 Page 渲染器
|
||||
- [Form](./renderers/Form/Form.md): 表单渲染器
|
||||
- [FormItem](./renderers/Form/FormItem.md): 所有表单项都有的通用配置
|
||||
- [Array](./renderers/Form/Array.md): 数组输入框配置
|
||||
- [Button-Group](./renderers/Form/Button-Group.md): 按钮集合
|
||||
- [Button-Toolbar](./renderers/Form/Button-Toolbar.md): 让多个按钮在一起放置
|
||||
- [Button](./renderers/Form/Button.md): 按钮, 包含 button、submit 和 reset
|
||||
- [Chained-Select](./renderers/Form/Chained-Select.md): 无限级别下拉
|
||||
- [Checkbox](./renderers/Form/Checkbox.md): 勾选框
|
||||
- [Checkboxes](./renderers/Form/Checkboxes.md): 复选框
|
||||
- [City](./renderers/Form/City.md): 城市选择
|
||||
- [Color](./renderers/Form/Color.md): 颜色选择器
|
||||
- [Combo](./renderers/Form/Combo.md): 组合模式
|
||||
- [Date-Range](./renderers/Form/Date-Range.md): 日期范围类型
|
||||
- [Date](./renderers/Form/Date.md): 日期类型
|
||||
- [Datetime](./renderers/Form/Datetime.md): 日期时间类型
|
||||
- [Editor](./renderers/Form/Editor.md): 编辑器
|
||||
- [Email](./renderers/Form/Email.md): Email 输入框
|
||||
- [FieldSet](./renderers/Form/FieldSet.md): 多个输入框可以通过 fieldSet 捆绑在一起
|
||||
- [File](./renderers/Form/File.md): 文件输入
|
||||
- [Formula](./renderers/Form/Formula.md): 公式类型
|
||||
- [Grid](./renderers/Form/Grid.md): 支持 form 内部再用 grid 布局
|
||||
- [Group](./renderers/Form/Group.md): 表单项集合
|
||||
- [HBox](./renderers/Form/HBox.md): 支持 form 内部再用 HBox 布局
|
||||
- [Hidden](./renderers/Form/Hidden.md): 隐藏字段类型
|
||||
- [Image](./renderers/Form/Image.md): 图片输入
|
||||
- [List](./renderers/Form/List.md): 简单的列表选择框
|
||||
- [Matrix](./renderers/Form/Matrix.md): 矩阵类型的输入框
|
||||
- [NestedSelect](./renderers/Form/NestedSelect.md): 树形结构选择框
|
||||
- [Number](./renderers/Form/Number.md): 数字输入框
|
||||
- [Panel](./renderers/Form/Panel.md): 还是为了布局，可以把一部分 FormItem 合并到一个 panel 里面单独展示
|
||||
- [Password](./renderers/Form/Password.md): 密码输入框
|
||||
- [Picker](./renderers/Form/Picker.md): 列表选取
|
||||
- [Radios](./renderers/Form/Radios.md): 单选框
|
||||
- [Range](./renderers/Form/Range.md): 范围输入框
|
||||
- [Rating](./renderers/Form/Rating.md): 评分
|
||||
- [Repeat](./renderers/Form/Repeat.md): 可用来设置重复频率
|
||||
- [Rich-Text](./renderers/Form/Rich-Text.md): 富文本编辑器
|
||||
- [Select](./renderers/Form/Select.md): 选项表单
|
||||
- [Service](./renderers/Form/Service.md): 动态配置，配置项由接口决定
|
||||
- [Static](./renderers/Static.md): 纯用来展现数据的
|
||||
- [SubForm](./renderers/Form/SubForm.md): formItem 还可以是子表单类型
|
||||
- [Switch](./renderers/Form/Switch.md): 可选框，和 checkbox 完全等价
|
||||
- [Table](./renderers/Form/Table.md): 可以用来展示数组类型的数据
|
||||
- [Tabs](./renderers/Form/Tabs.md): 多个输入框通过选项卡来分组
|
||||
- [TabsTransfer](./renderers/Form/TabsTransfer.md): 组合穿梭器，用来勾选选项。
|
||||
- [Tag](./renderers/Form/Tag.md): 标签输入框
|
||||
- [Text](./renderers/Form/Text.md): 普通的文本输入框
|
||||
- [Textarea](./renderers/Form/Textarea.md): 多行文本输入框
|
||||
- [Time](./renderers/Form/Time.md): 时间类型
|
||||
- [Transfer](./renderers/Form/Transfer.md): 穿梭器，用来勾选选项。
|
||||
- [Tree](./renderers/Form/Tree.md): 树形结构输入框
|
||||
- [TreeSelect](./renderers/Form/TreeSelect.md): 树形结构选择框
|
||||
- [Url](./renderers/Form/Url.md): URL 输入框
|
||||
- [Action](./renderers/Action.md): 一种特殊的渲染器，它本身是一个按钮，同时它能触发事件
|
||||
- [Alert](./renderers/Alert.md): 提示框
|
||||
- [Audio](./renderers/Audio.md): 音频播放器
|
||||
- [Button-Group](./renderers/Button-Group.md)： 按钮集合
|
||||
- [Card](./renderers/Card.md): 卡片的展示形式
|
||||
- [Cards](./renderers/Cards.md): 卡片集合
|
||||
- [Carousel](./renderers/Carousel.md): 轮播图
|
||||
- [Chart](./renderers/Chart.md): Echarts 图表渲染器
|
||||
- [Collapse](./renderers/Collapse.md): 折叠器
|
||||
- [CRUD](./renderers/CRUD.md): 增删改查模型，主要用来展现列表
|
||||
- [CRUD-Table](./renderers/CRUD-Table.md): 请参考 Table
|
||||
- [CRUD-Cards](./renderers/CRUD-Cards.md): 请参考 Cards
|
||||
- [CRUD-List](./renderers/CRUD-List.md): 请参考 List
|
||||
- [Definitions](./renderers/Definitions.md): 建立当前页面公共的配置项
|
||||
- [Dialog](./renderers/Dialog.md): Dialog 由 Action 触发。他是一个类似于 Page 的容器模型
|
||||
- [Divider](./renderers/Divider.md): 分割线
|
||||
- [Drawer](./renderers/Drawer.md): Drawer 由 Action 触发
|
||||
- [Each](./renderers/Each.md): 基于现有变量循环输出渲染器
|
||||
- [Field](./renderers/Field.md): 主要用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中
|
||||
- [Grid](./renderers/Grid.md): Grid 布局
|
||||
- [HBox](./renderers/HBox.md): HBox 布局
|
||||
- [Html](./renderers/Html.md): html, 当需要用到变量时，请用 Tpl 代替
|
||||
- [iFrame](./renderers/iFrame.md)： 如果需要内嵌外部站点，可用 iframe 来实现
|
||||
- [JSON](./renderers/JSON.md): JSON 数据展现
|
||||
- [List](./renderers/List.md): 列表展示
|
||||
- [Nav](./renderers/Nav.md): 菜单栏
|
||||
- [Panel](./renderers/Panel.md): 可以把相关信息以盒子的形式展示到一块。
|
||||
- [Plain](./renderers/Plain.md): 单纯的文字输出
|
||||
- [QRCode](./renderers/QRCode.md): 二维码显示组件
|
||||
- [Service](./renderers/Service.md): 功能型容器，自身不负责展示内容，主要职责在于通过配置的 api 拉取数据
|
||||
- [Table](./renderers/Table.md): 表格展示
|
||||
- [Column](./renderers/Column.md): 表格中的列配置
|
||||
- [Tabs](./renderers/Tabs.md): 标签页
|
||||
- [Tasks](./renderers/Tasks.md): 任务操作集合，适用于一步步操作
|
||||
- [Tpl](./renderers/Tpl.md): 支持用 JS 模板引擎来组织输出
|
||||
- [Types](./renderers/Types.md): 类型说明文档
|
||||
- [Video](./renderers/Video.md): 视频播放器
|
||||
- [Wizard](./renderers/Wizard.md): 表单向导
|
||||
- [Wrapper](./renderers/Wrapper.md): 简单的一个容器
|
||||
@ -1,204 +0,0 @@
|
||||
## Action
|
||||
|
||||
Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触发事件。
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"label": "弹个框",
|
||||
"type": "action",
|
||||
"level": "dark",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "弹框",
|
||||
"body": "这是个简单的弹框。"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
除了能弹框，它还能设定很多行为比如：提交表单、发送 ajax、页面跳转、关闭弹框、复制文本等等。
|
||||
|
||||
### 通用配置项
|
||||
|
||||
所有`actionType`都支持的通用配置项
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | ------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| type | `string` | `action` | 指定为 Action 渲染器，也可以是 `button`、`submit`、`reset`。 |
|
||||
| actionType | `string` | - | 【必填】这是 action 最核心的配置，来指定该 action 的作用类型，支持：`ajax`、`link`、`url`、`drawer`、`dialog`、`confirm`、`cancel`、`prev`、`next`、`copy`、`close`。 |
|
||||
| label | `string` | - | 按钮文本。可用 `${xxx}` 取值。 |
|
||||
| level | `string` | `default` | 按钮样式，支持：`link`、`primary`、`secondary`、`info`、`success`、`warning`、`danger`、`light`、`dark`、`default`。 |
|
||||
| size | `string` | - | 按钮大小，支持：`xs`、`sm`、`md`、`lg`。 |
|
||||
| icon | `string` | - | 设置图标，例如`fa fa-plus`。 |
|
||||
| iconClassName | `string` | - | 给图标上添加类名。 |
|
||||
| active | `boolean` | - | 按钮是否高亮。 |
|
||||
| activeLevel | `string` | - | 按钮高亮时的样式，配置支持同`level`。 |
|
||||
| activeClassName | `string` | `is-active` | 给按钮高亮添加类名。 |
|
||||
| block | `boolean` | - | 用`display:"block"`来显示按钮。 |
|
||||
| confirmText | `string` | - | 当设置后，操作在开始前会询问用户。可用 `${xxx}` 取值。 |
|
||||
| reload | `string` | - | 指定此次操作完后，需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 |
|
||||
| tooltip | `string` | - | 鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |
|
||||
| disabledTip | `string` | - | 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |
|
||||
| tooltipPlacement | `string` | `top` | 如果配置了`tooltip`或者`disabledTip`，指定提示信息位置，可配置`top`、`bottom`、`left`、`right`。 |
|
||||
| close | `boolean`或`string` | - | 当`action`配置在`dialog`或`drawer`的`actions`中时，配置为`true`指定此次操作完后关闭当前`dialog`或`drawer`。 也可以配置字符串，指定此次操作完后需要关闭的`dialog`或者`drawer`的`name`值(在弹框或抽屉上配置 name 属性)，多个请用`,`号隔开 |
|
||||
| required | `Array<string>` | - | 配置字符串数组，指定在`form`中进行操作之前，需要指定的字段名的表单项通过验证 |
|
||||
|
||||
下面会分别介绍每种类型的 Action 配置项
|
||||
|
||||
### ajax
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------------- | ----------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| actionType | `string` | `ajax` | 发送请求 |
|
||||
| api | `string` 或 `ApiObject` | - | 请求地址，参考 [api](./Types.md#api) 格式说明。 |
|
||||
| redirect | `string` | - | 指定当前请求结束后跳转的路径，可用 `${xxx}` 取值。 |
|
||||
| feedback | `DialogObject` | - | 如果 ajax 类型的，当 ajax 返回正常后，还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。格式可参考[Dialog](./Dialog.md) |
|
||||
| feedback.visibleOn | `string` | - | 可以用来配置 feedback 弹框出现的条件。 |
|
||||
| feedback.skipRestOnCancel | `boolean` | - | 如果配置了，在 feedback 弹窗里面，如果用户点了取消，那么这个按钮的其他动作也不做了。 |
|
||||
| messages | `object` | - | `success`：ajax 操作成功后提示，可以不指定，不指定时以 api 返回为准。`failed`：ajax 操作失败提示。 |
|
||||
|
||||
```schema:height="200"
|
||||
{
|
||||
"data": {
|
||||
"user": "no one"
|
||||
},
|
||||
"body": {
|
||||
"label": "Post",
|
||||
"type": "button",
|
||||
"actionType": "ajax",
|
||||
"confirmText": "确定？",
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"messages": {
|
||||
"success": "发送成功"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### link
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | -------- | ------ | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| actionType | `string` | `link` | 单页跳转 |
|
||||
| link | `string` | `link` | 用来指定跳转地址，跟 url 不同的是，这是单页跳转方式，不会渲染浏览器，请指定 amis 平台内的页面。可用 `${xxx}` 取值。 |
|
||||
|
||||
```schema:height="200"
|
||||
{
|
||||
"body": {
|
||||
"label": "进入简介页面",
|
||||
"type": "button",
|
||||
"level": "info",
|
||||
"actionType": "link",
|
||||
"link": "/docs/index"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### url
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | --------- | ------- | ------------------------------------------------ |
|
||||
| actionType | `string` | `url` | 页面跳转 |
|
||||
| url | `string` | - | 按钮点击后，会打开指定页面。可用 `${xxx}` 取值。 |
|
||||
| blank | `boolean` | `false` | 如果为 `true` 将在新 tab 页面打开。 |
|
||||
|
||||
```schema:height="200"
|
||||
{
|
||||
"body": {
|
||||
"label": "打开 Baidu",
|
||||
"type": "button",
|
||||
"level": "success",
|
||||
"actionType": "url",
|
||||
"url": "raw:http://www.baidu.com"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
`注意：由于 amis 平台内 http 地址会被替换成 proxy 地址，所以在 amis 平台内使用请加上 raw: 作为前缀。 比如：raw:http://www.baidu.com`
|
||||
|
||||
### dialog
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------- | -------------------------- | -------- | --------------------------------------------- |
|
||||
| actionType | `string` | `dialog` | 点击后显示一个弹出框 |
|
||||
| dialog | `string` 或 `DialogObject` | - | 指定弹框内容，格式可参考[Dialog](./Dialog.md) |
|
||||
| nextCondition | `boolean` | - | 可以用来设置下一条数据的条件，默认为 `true`。 |
|
||||
|
||||
```schema:height="200"
|
||||
{
|
||||
"body": {
|
||||
"label": "Dialog Form",
|
||||
"type": "button",
|
||||
"level": "primary",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "表单设置",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "/api/mock2/form/saveForm?waitSeconds=1",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "text",
|
||||
"label": "文本"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### drawer
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | -------------------------- | -------- | --------------------------------------------- |
|
||||
| actionType | `string` | `drawer` | 点击后显示一个侧边栏 |
|
||||
| drawer | `string` 或 `DrawerObject` | - | 指定弹框内容，格式可参考[Drawer](./Drawer.md) |
|
||||
|
||||
```schema:height="200"
|
||||
{
|
||||
"body": {
|
||||
"label": "Drawer Form",
|
||||
"type": "button",
|
||||
"level": "primary",
|
||||
"actionType": "drawer",
|
||||
"drawer": {
|
||||
"title": "表单设置",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "/api/mock2/form/saveForm?waitSeconds=1",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "text",
|
||||
"label": "文本"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### copy
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | -------- | ------ | ------------------------------------ |
|
||||
| actionType | `string` | `copy` | 复制一段内容到粘贴板 |
|
||||
| content | `string` | - | 指定复制的内容。可用 `${xxx}` 取值。 |
|
||||
|
||||
### reload
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | -------- | -------- | --------------------------------------------------------------------------- |
|
||||
| actionType | `string` | `reload` | 刷新目标组件 |
|
||||
| target | `string` | - | 需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 |
|
||||
|
||||
### add
|
||||
|
||||
该 actionType 为[FormItem-Table](./FormItem-Table.md)专用
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | -------- | ------ | ---------------------------------------------------------------------- |
|
||||
| actionType | `string` | `add` | 给指定`FormItem-Table`添加一条数据， |
|
||||
| target | `string` | - | 指定`FormItem-Table`的名字（`Table`的`name`值），多个请用 `,` 号隔开。 |
|
||||
@ -1,37 +0,0 @@
|
||||
## Alert
|
||||
|
||||
用来做文字特殊提示，分为四类：提示类、成功类、警告类和危险类。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------- | --------- | ------------------------------------------------ | ------------------- |
|
||||
| type | `string` | `"alert"` | 指定为 alert 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| level | `string` | `info` | 级别，可以是：`info`、`success`、`warning` 或者 `danger` |
|
||||
| showCloseButton | `boolean` | false | 是否显示关闭按钮 |
|
||||
|
||||
```schema:height="120" scope="body"
|
||||
{
|
||||
"type": "alert",
|
||||
"body": "这是一段提示",
|
||||
"level": "warning"
|
||||
}
|
||||
```
|
||||
|
||||
可结合 `visibleOn` 用来做错误信息提示。
|
||||
|
||||
|
||||
```schema:height="120"
|
||||
{
|
||||
"type": "page",
|
||||
"data": {
|
||||
"errMsg": "这是错误提示详情"
|
||||
},
|
||||
"body": {
|
||||
"type": "alert",
|
||||
"visibleOn": "this.errMsg",
|
||||
"body": "${errMsg}",
|
||||
"level": "danger",
|
||||
"showCloseButton": true
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,22 +0,0 @@
|
||||
## Audio
|
||||
|
||||
音频播放器
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------- | --------- | ------------------------------------------------ | ------------------- |
|
||||
| type | `string` | `"audio"` | 指定为 audio 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| inline | `boolean` | true | 是否是内联模式 |
|
||||
| src | `string` | | 音频地址 |
|
||||
| loop | `boolean` | false | 是否循环播放 |
|
||||
| autoPlay | `boolean` | false | 是否自动播放 |
|
||||
| rates | `array` | `[]` | 可配置音频播放倍速如：`[1.0, 1.5, 2.0]` |
|
||||
| controls | `array` | `['rates', 'play', 'time', 'process', 'volume']` | 内部模块定制化 |
|
||||
|
||||
```schema:height="200" scope="body"
|
||||
{
|
||||
"type": "audio",
|
||||
"autoPlay": false,
|
||||
"src": "https://amis.bj.bcebos.com/amis/2019-7/1562137295708/chicane-poppiholla-original-radio-edit%20(1).mp3"
|
||||
}
|
||||
```
|
||||
@ -1,49 +0,0 @@
|
||||
## ButtonGroup
|
||||
|
||||
按钮集合。
|
||||
|
||||
- `type` 请设置成 `button-group`
|
||||
- `buttons` 配置按钮集合。
|
||||
|
||||
```schema:height="200" scope="body"
|
||||
{
|
||||
"type": "button-toolbar",
|
||||
"buttons": [
|
||||
{
|
||||
"type": "button-group",
|
||||
"buttons": [
|
||||
{
|
||||
"type": "button",
|
||||
"label": "Button",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"confirmMode": false,
|
||||
"title": "提示",
|
||||
"body": "对，你刚点击了！"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"type": "submit",
|
||||
"label": "Submit"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "reset",
|
||||
"label": "Reset"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "submit",
|
||||
"icon": "fa fa-check text-success"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "reset",
|
||||
"icon": "fa fa-times text-danger"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -1,97 +0,0 @@
|
||||
### Cards(CRUD)
|
||||
|
||||
请参考[Cards](./Cards.md)
|
||||
|
||||
```schema:height="800" scope="body"
|
||||
{
|
||||
"type": "crud",
|
||||
"api": "/api/mock2/crud/users",
|
||||
"syncLocation": false,
|
||||
"mode": "cards",
|
||||
"defaultParams": {
|
||||
"perPage": 6
|
||||
},
|
||||
"switchPerPage": false,
|
||||
"placeholder": "没有用户信息",
|
||||
"columnsCount": 2,
|
||||
"card": {
|
||||
"header": {
|
||||
"className": "bg-white",
|
||||
"title": "$name",
|
||||
"subTitle": "$realName",
|
||||
"description": "$email",
|
||||
"avatar": "${avatar | raw}",
|
||||
"highlight": "$isSuperAdmin",
|
||||
"avatarClassName": "pull-left thumb-md avatar b-3x m-r"
|
||||
},
|
||||
"bodyClassName": "padder",
|
||||
"body": "\n <% if (data.roles && data.roles.length) { %>\n <% data.roles.map(function(role) { %>\n <span class=\"label label-default\"><%- role.name %></span>\n <% }) %>\n <% } else { %>\n <p class=\"text-muted\">没有分配角色</p>\n <% } %>\n ",
|
||||
"actions": [
|
||||
{
|
||||
"label": "编辑",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": null,
|
||||
"body": {
|
||||
"api": "",
|
||||
"type": "form",
|
||||
"tabs": [
|
||||
{
|
||||
"title": "基本信息",
|
||||
"controls": [
|
||||
{
|
||||
"type": "hidden",
|
||||
"name": "id"
|
||||
},
|
||||
{
|
||||
"name": "name",
|
||||
"label": "帐号",
|
||||
"disabled": true,
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"label": "邮箱",
|
||||
"type": "text",
|
||||
"disabled": true
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"name": "isAmisOwner",
|
||||
"label": "管理员",
|
||||
"description": "设置是否为超级管理",
|
||||
"type": "switch"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "角色信息",
|
||||
"controls": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "设置权限",
|
||||
"controls": [
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"label": "移除",
|
||||
"confirmText": "您确定要移除该用户?",
|
||||
"actionType": "ajax",
|
||||
"api": "delete:/api/mock2/notFound"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,59 +0,0 @@
|
||||
### List(CRUD)
|
||||
|
||||
请参考[List](./List.md)
|
||||
|
||||
```schema:height="800" scope="body"
|
||||
{
|
||||
"type": "crud",
|
||||
"api": "/api/mock2/crud/permissions",
|
||||
"mode": "list",
|
||||
"placeholder": "当前组内, 还没有配置任何权限.",
|
||||
"syncLocation": false,
|
||||
"title": null,
|
||||
"listItem": {
|
||||
"title": "$name",
|
||||
"subTitle": "$description",
|
||||
"actions": [
|
||||
{
|
||||
"icon": "fa fa-edit",
|
||||
"tooltip": "编辑",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "编辑能力（权限）",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
{
|
||||
"type": "hidden",
|
||||
"name": "id"
|
||||
},
|
||||
{
|
||||
"name": "name",
|
||||
"label": "权限名称",
|
||||
"type": "text",
|
||||
"disabled": true
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"name": "description",
|
||||
"label": "描述",
|
||||
"type": "textarea"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"tooltip": "删除",
|
||||
"disabledOn": "~[\"admin:permission\", \"admin:user\", \"admin:role\", \"admin:acl\", \"admin:page\", \"page:readAll\", \"admin:settings\"].indexOf(name)",
|
||||
"icon": "fa fa-times",
|
||||
"confirmText": "您确定要移除该权限?",
|
||||
"actionType": "ajax",
|
||||
"api": "delete:/api/mock2/notFound"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,46 +0,0 @@
|
||||
### Table(CRUD)
|
||||
|
||||
在 CRUD 中的 Table 主要增加了 Column 里面的以下配置功能，更多参数，请参考[Table](./Table.md)
|
||||
|
||||
- `sortable` 开启后可以根据当前列排序(后端排序)。
|
||||
|
||||
```schema:height="800" scope="body"
|
||||
{
|
||||
"type": "crud",
|
||||
"api": "/api/sample",
|
||||
"syncLocation": false,
|
||||
"title": null,
|
||||
"perPageField":"rn",
|
||||
"defaultParams":{
|
||||
"rn": 10
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"width": 20,
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"sortable": true,
|
||||
"toggled": false
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -1,251 +0,0 @@
|
||||
## CRUD
|
||||
|
||||
增删改查模型，主要用来展现列表，并支持各类【增】【删】【改】【查】的操作。
|
||||
|
||||
CRUD 支持三种模式：`table`、`cards`、`list`，默认为 `table`。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------------------------- | ------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| type | `string` | | `type` 指定为 CRUD 渲染器 |
|
||||
| mode | `string` | `"table"` | `"table" 、 "cards" 或者 "list"` |
|
||||
| title | `string` | `""` | 可设置成空，当设置成空时，没有标题栏 |
|
||||
| className | `string` | | 表格外层 Dom 的类名 |
|
||||
| [api](#api) | [Api](./Types.md#Api) | | CRUD 用来获取列表数据的 api。 |
|
||||
| loadDataOnce | `boolean` | | 是否一次性加载所有数据（前端分页） |
|
||||
| loadDataOnceFetchOnFilter | `boolean` | `true` | 在开启 loadDataOnce 时，filter 时是否去重新请求 api |
|
||||
| source | `string` | | 数据映射接口返回某字段的值，不设置会默认把接口返回的`items`或者`rows`填充进`mode`区域 |
|
||||
| filter | [Form](./Form/Form.md) | | 设置过滤器，当该表单提交后，会把数据带给当前 `mode` 刷新列表。 |
|
||||
| filterTogglable | `boolean` | `false` | 是否可显隐过滤器 |
|
||||
| filterDefaultVisible | `boolean` | `true` | 设置过滤器默认是否可见。 |
|
||||
| initFetch | `boolean` | `true` | 是否初始化的时候拉取数据, 只针对有 filter 的情况, 没有 filter 初始都会拉取数据 |
|
||||
| interval | `number` | `3000` | 刷新时间(最低 3000)，单位是毫秒 |
|
||||
| silentPolling | `boolean` | `false` | 配置刷新时是否隐藏加载动画 |
|
||||
| stopAutoRefreshWhen | `string` | `""` | 通过[表达式](./Types.md#表达式)来配置停止刷新的条件 |
|
||||
| stopAutoRefreshWhenModalIsOpen | `boolean` | `false` | 当有弹框时关闭自动刷新，关闭弹框又恢复 |
|
||||
| syncLocation | `boolean` | `true` | 是否将过滤条件的参数同步到地址栏 |
|
||||
| draggable | `boolean` | `false` | 是否可通过拖拽排序 |
|
||||
| itemDraggableOn | `boolean` | | 用[表达式](./Types.md#表达式)来配置是否可拖拽排序 |
|
||||
| [saveOrderApi](#saveOrderApi) | [Api](./Types.md#Api) | | 保存排序的 api。 |
|
||||
| [quickSaveApi](#quickSaveApi) | [Api](./Types.md#Api) | | 快速编辑后用来批量保存的 API。 |
|
||||
| [quickSaveItemApi](#quickSaveItemApi) | [Api](./Types.md#Api) | | 快速编辑配置成及时保存时使用的 API。 |
|
||||
| bulkActions | Array Of [Action](./Action.md) | | 批量操作列表，配置后，表格可进行选中操作。 |
|
||||
| defaultChecked | `boolean` | `false` | 当可批量操作时，默认是否全部勾选。 |
|
||||
| messages | `Object` | | 覆盖消息提示，如果不指定，将采用 api 返回的 message |
|
||||
| messages.fetchFailed | `string` | | 获取失败时提示 |
|
||||
| messages.saveOrderFailed | `string` | | 保存顺序失败提示 |
|
||||
| messages.saveOrderSuccess | `string` | | 保存顺序成功提示 |
|
||||
| messages.quickSaveFailed | `string` | | 快速保存失败提示 |
|
||||
| messages.quickSaveSuccess | `string` | | 快速保存成功提示 |
|
||||
| primaryField | `string` | `"id"` | 设置 ID 字段名。 |
|
||||
| defaultParams | `Object` | | 设置默认 filter 默认参数，会在查询的时候一起发给后端 |
|
||||
| pageField | `string` | `"page"` | 设置分页页码字段名。 |
|
||||
| perPageField | `string` | `"perPage"` | 设置分页一页显示的多少条数据的字段名。注意：最好与 defaultParams 一起使用，请看下面例子。 |
|
||||
| perPageAvailable | `Array<number>` | `[5, 10, 20, 50, 100]` | 设置一页显示多少条数据下拉框可选条数。 |
|
||||
| orderField | `string` | | 设置用来确定位置的字段名，设置后新的顺序将被赋值到该字段中。 |
|
||||
| hideQuickSaveBtn | `boolean` | `false` | 隐藏顶部快速保存提示 |
|
||||
| autoJumpToTopOnPagerChange | `boolean` | `false` | 当切分页的时候，是否自动跳顶部。 |
|
||||
| syncResponse2Query | `boolean` | `true` | 将返回数据同步到过滤器上。 |
|
||||
| keepItemSelectionOnPageChange | `boolean` | `true` | 保留条目选择，默认分页、搜素后，用户选择条目会被清空，开启此选项后会保留用户选择，可以实现跨页面批量操作。 |
|
||||
| labelTpl | `string` | | 单条描述模板，`keepItemSelectionOnPageChange`设置为`true`后会把所有已选择条目列出来，此选项可以用来定制条目展示文案。 |
|
||||
| headerToolbar | Array | `['bulk-actions', 'pagination']` | 顶部工具栏配置, 可用控件： `bulk-actions`、`paginatnion` 、`statistics`、`switch-per-page`、`filter-toggler` 或者放 tpl 或者 button 之类的渲染器控件。 |
|
||||
| footerToolbar | Array | `['statistics', 'pagination']` | 底部工具栏配置 , 可用控件： `bulk-actions`、`paginatnion` 、`statistics`、`switch-per-page`、`filter-toggler` 或者放 tpl 或者 button 之类的渲染器控件。 |
|
||||
|
||||
### 接口说明
|
||||
|
||||
开始之前请你先阅读[整体要求](../api.md)。
|
||||
|
||||
#### api
|
||||
|
||||
用来返回列表数据。
|
||||
|
||||
**发送：**
|
||||
|
||||
可能会包含以下信息。
|
||||
|
||||
- `page` 页码，从 `1` 开始, 表示当前请求第几页的信息。 字段名对应 `pageField` 如果配成这样 `{pageField: "pn"}` 发送的时候字段名会变成类似 `/api/xxx?pn=1`。
|
||||
- `perPage` 每页多少条数据，默认假定是 10. 如果想修改请配置 `defaultParams: {perPage: 20}`。 另外字段名对应 `perPageField` 的配置。
|
||||
- `orderBy` 用来告知以什么方式排序。字段名对应 `orderField`
|
||||
- `orderDir` 不是 `asc` 就是 `desc`。分别表示正序还是倒序。
|
||||
|
||||
另外如果 CRUD 配置了 Filter，即过滤器表单，表单里面的数据也会自动 merge 到这个请求里面。前提是：你没有干预接口参数。
|
||||
|
||||
什么意思？来个对比 `/api/xxxx` 和 `/api/xxxx?a=${a}`。第二个配置方式就是干预了，如果你配置接口的时候有明确指定要发送什么参数，那么 amis 则不再默认把所有你可能要的参数都发过去了。这个时候如果想要接收原来的那些参数，你需要进一步配置 api，把你需要的参数写上如：`/api/xxxx?a=${a}&page=${page}&perPage=${perPage}`
|
||||
|
||||
**响应：**
|
||||
|
||||
常规返回格式如下：
|
||||
|
||||
```json
|
||||
{
|
||||
"status": 0,
|
||||
"msg": "",
|
||||
"data": {
|
||||
"items": [
|
||||
{
|
||||
// 每个成员的数据。
|
||||
"id": 1,
|
||||
"xxx": "xxxx"
|
||||
}
|
||||
],
|
||||
|
||||
"total": 200 // 注意这里不是当前请求返回的 items 的长度，而是一共有多少条数据，用于生成分页，
|
||||
// 如果你不想要分页，把这个不返回就可以了。
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
如果无法知道数据总条数，只能知道是否有下一页，请返回如下格式，AMIS 会简单生成一个简单版本的分页控件。
|
||||
|
||||
```json
|
||||
{
|
||||
"status": 0,
|
||||
"msg": "",
|
||||
"data": {
|
||||
"items": [
|
||||
{
|
||||
// 每个成员的数据。
|
||||
"id": 1,
|
||||
"xxx": "xxxx"
|
||||
}
|
||||
],
|
||||
|
||||
"hasNext": true // 是否有下一页。
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
如果不需要分页，或者配置了 loadDataOnce 则可以忽略掉 `total` 和 `hasNext` 参数。
|
||||
|
||||
#### saveOrderApi
|
||||
|
||||
用来保存新的顺序，配置了 draggable 后会通过这个接口保存结果。
|
||||
|
||||
**发送：**
|
||||
|
||||
发送方式默认为 `POST` 会包含以下信息。
|
||||
|
||||
- `ids` 字符串如： `2,3,1,4,5,6` 用 id 来记录新的顺序。 前提是你的列表接口返回了 id 字段。另外如果你的 primaryField 不是 `id`，则需要配置如： `primaryField: "order_id"`。注意：无论你配置成什么 primayField，这个字段名始终是 ids。
|
||||
- `rows` `Array<Item>` 数组格式，新的顺序，数组里面包含所有原始信息。
|
||||
- `insertAfter` 或者 `insertBefore` 这是 amis 生成的 diff 信息，对象格式，key 为目标成员的 primaryField 值，即 id，value 为数组，数组中存放成员 primaryField 值。如：
|
||||
|
||||
```json
|
||||
{
|
||||
"insertAfter": {
|
||||
"2": ["1", "3"],
|
||||
"6": ["4", "5"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
表示：成员 1 和成员 3 插入到了成员 2 的后面。成员 4 和 成员 5 插入到了 成员 6 的后面。
|
||||
|
||||
发送数据多了？amis 只能猜你可能需要什么格式化的数据，api 不是可以配置数据映射吗？你可以通过 data 指定只发送什么如：
|
||||
|
||||
```json
|
||||
{
|
||||
"saveOrderApi": {
|
||||
"url": "/api/xxxx",
|
||||
"data": {
|
||||
"ids": "${ids}"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
这样就只会发送 ids 了。
|
||||
|
||||
**响应：**
|
||||
|
||||
响应没有什么特殊要求，只关注 status 状态。data 中返回了数据也不会影响结果集。默认调用完保存顺序接口会自动再调用一次 api 接口用来刷新数据。
|
||||
|
||||
#### quickSaveApi
|
||||
|
||||
用来保存快速编辑结果，当 crud 的列配置快速保存时会调用进来。
|
||||
|
||||
**发送：**
|
||||
|
||||
发送方式默认为 `POST` 会包含以下信息。
|
||||
|
||||
- `ids` `String` 如： `"1,2"` 用来说明这次快速保存涉及了哪些成员。
|
||||
- `indexes` `Array<number>` 通过序号的方式告知更新了哪些成员。
|
||||
- `rows` `Array<Object>` 修改过的成员集合，数组对象是在原有数据的基础上更新后的结果。
|
||||
- `rowsDiff` `Array<Object>` 跟 `rows` 不一样的地方是这里只包含本次修改的数据。
|
||||
- `rowsOrigin` `Array<Object>` 跟 `rows` 不一样的地方是这里是修改前段原始数据。
|
||||
- `unModifiedItems` `Array<Object>` 其他没有修改的成员集合。
|
||||
|
||||
默认发送的数据有点多，不过可以通过 api 的数据映射自己选择需要的部分。
|
||||
|
||||
**响应：**
|
||||
|
||||
响应没有什么特殊要求，只关注 status 状态。
|
||||
|
||||
#### quickSaveItemApi
|
||||
|
||||
跟 quickSaveApi 不一样的地方在于当你配置快速保存为立即保存的时候，优先使用此接口。因为只会保存单条数据，所以发送格式会不一样，直接就是整个更新后的成员数据。
|
||||
|
||||
**发送：**
|
||||
|
||||
`POST` payload 中就是更新后的成员数据。
|
||||
|
||||
**响应：**
|
||||
|
||||
响应没有什么特殊要求，只关注 status 状态。
|
||||
|
||||
### 单条操作
|
||||
|
||||
当操作对象是单条数据时这类操作叫单条操作，比如：编辑、删除、通过、拒绝等等。CRUD 的 table 模式可以在 column 通过放置按钮来完成（其他模式参考 table 模式）。比如编辑就是添加个按钮行为是弹框类型的按钮或者添加一个页面跳转类型的按钮把当前行数据的 id 放在 query 中传过去、删除操作就是配置一个按钮行为是 AJAX 类型的按钮，将数据通过 api 发送给后端完成。
|
||||
|
||||
CRUD 中不限制有多少个单条操作、添加一个操作对应的添加一个按钮就行了。CRUD 在处理按钮行为的时候会把当前行的完整数据传递过去，如果你的按钮行为是弹出时，还会包含一下信息：
|
||||
|
||||
- `hasNext` `boolean` 当按钮行为是弹框时，还会携带这个数据可以用来判断当前页中是否有下一条数据。
|
||||
- `hasPrev` `boolean` 当按钮行为是弹框时，还会携带这个数据可以判断用来当前页中是否有上一条数据。
|
||||
- `index` `number` 当按钮行为是弹框时，还会携带这个数据可以用来获取当前行数据在这一页中的位置。
|
||||
- `prevIndex` `number`
|
||||
- `nextIndex` `number`
|
||||
|
||||
如果你的按钮类型是 AJAX，你也可以限定只发送部分数据比如。
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "button",
|
||||
"label": "删除",
|
||||
"actionType": "ajax",
|
||||
"api": "delete:/api/xxxx/$id",
|
||||
"confirmText": "确定要删除？"
|
||||
}
|
||||
```
|
||||
|
||||
上面这个例子就会发送 id 字段了，如果想要全部发送过去同时还想添加点别的字段就这样：
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "button",
|
||||
"label": "删除",
|
||||
"actionType": "ajax",
|
||||
"api": {
|
||||
"method": "post",
|
||||
"url": "/api/xxxx/$id",
|
||||
"data": {
|
||||
"&": "$$",
|
||||
"op": "delete"
|
||||
}
|
||||
},
|
||||
"confirmText": "确定要删除？"
|
||||
}
|
||||
```
|
||||
|
||||
这取决于 api 怎么配置，关于 api 的配置说明请[前往这](./Types.md#api)。
|
||||
|
||||
### 批量操作
|
||||
|
||||
当操作对象是多条数据时这类操作叫批量操作、跟单条操作类似，将按钮放在 crud 的 `bulkActions` 中即可, 添加 bulkActions 后列表会自动出现选择框。CRUD 会准备以下数据供按钮行为使用。
|
||||
|
||||
- `items` `Array<object>` 选中的行数据。
|
||||
- `rows` items 的别名，推荐用 items。
|
||||
- `unselectedItems` `Array<object>` 没选中的行数据也可获取。
|
||||
- `ids` `Array<number|string>` 前提是行数据中有 id 字段，或者有指定的 `primaryField` 字段。
|
||||
- `...第一行所有行数据` 还有第一行的所有行数据也会包含进去。
|
||||
|
||||
### 快速编辑
|
||||
|
||||
列信息中可以配置 quickEdit 属性来启动快速编辑功能、开启后当鼠标 hover 到对应的行时，会出现一个编辑的小图标，点开后弹出表单项完成编辑。保存的结果不会立即发送 api 完成保存，除非你配置了立即保存，当所有的编辑都完成了，可以点击表格顶部的提交按钮，crud 将通过 quickSaveApi 通知后端完成保存。更多信息请看 quickSaveApi 和 quickSaveItemApi 的说明。
|
||||
@ -1,56 +0,0 @@
|
||||
## Card
|
||||
|
||||
卡片的展示形式。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------------- | -------------------------------- | ----------------------------------- | ------------------------------------------ |
|
||||
| type | `string` | `"card"` | 指定为 Card 渲染器 |
|
||||
| className | `string` | `"panel-default"` | 外层 Dom 的类名 |
|
||||
| header | `Object` | | Card 头部内容设置 |
|
||||
| header.className | `string` | | 头部类名 |
|
||||
| header.title | `string` | | 标题 |
|
||||
| header.subTitle | `string` | | 副标题 |
|
||||
| header.desc | `string` | | 描述 |
|
||||
| header.avatar | `string` | | 图片 |
|
||||
| header.highlight | `boolean` | | 是否点亮 |
|
||||
| header.avatarClassName | `string` | `"pull-left thumb avatar b-3x m-r"` | 图片类名 |
|
||||
| body | `Array` 或者 [Field](./Field.md) | | 内容容器，主要用来放置 [Field](./Field.md) |
|
||||
| bodyClassName | `string` | `"padder m-t-sm m-b-sm"` | 内容区域类名 |
|
||||
| actions | Array Of [Button](./Form/Button.md) | | 按钮区域 |
|
||||
|
||||
```schema:height="300" scope="body"
|
||||
{
|
||||
"type": "card",
|
||||
"header": {
|
||||
"title": "Title",
|
||||
"subTitle": "Sub Title",
|
||||
"description": "description",
|
||||
"avatarClassName": "pull-left thumb-md avatar b-3x m-r",
|
||||
"avatar": "raw:http://hiphotos.baidu.com/fex/%70%69%63/item/c9fcc3cec3fdfc03ccabb38edd3f8794a4c22630.jpg"
|
||||
},
|
||||
"body": "Body",
|
||||
"actions": [
|
||||
{
|
||||
"type": "button",
|
||||
"label": "Action 1",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"confirmMode": false,
|
||||
"title": "提示",
|
||||
"body": "对，你刚点击了！"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"type": "button",
|
||||
"label": "Action 2",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"confirmMode": false,
|
||||
"title": "提示",
|
||||
"body": "对，你刚点击了！"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -1,73 +0,0 @@
|
||||
## Cards
|
||||
|
||||
卡片集合。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | ----------------- | ------------------- | -------------------------- |
|
||||
| type | `string` | | `"cards"` 指定为卡片集合。 |
|
||||
| title | `string` | | 标题 |
|
||||
| source | `string` | `${items}` | 数据源, 绑定当前环境变量 |
|
||||
| placeholder | string | ‘暂无数据’ | 当没数据的时候的文字提示 |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| headerClassName | `string` | `amis-grid-header` | 顶部外层 CSS 类名 |
|
||||
| footerClassName | `string` | `amis-grid-footer` | 底部外层 CSS 类名 |
|
||||
| itemClassName | `string` | `col-sm-4 col-md-3` | 卡片 CSS 类名 |
|
||||
| card | [Card](./Card.md) | | 配置卡片信息 |
|
||||
|
||||
```schema:height="450" scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/sample?perPage=8",
|
||||
"body": [
|
||||
{
|
||||
"type": "panel",
|
||||
"title": "简单 Cards 示例",
|
||||
"body": {
|
||||
"type": "cards",
|
||||
"source": "$rows",
|
||||
"card": {
|
||||
"body": [
|
||||
{
|
||||
"label": "Engine",
|
||||
"name": "engine"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Version"
|
||||
}
|
||||
],
|
||||
|
||||
"actions": [
|
||||
{
|
||||
"type": "button",
|
||||
"level": "link",
|
||||
"icon": "fa fa-eye",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "查看详情",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
{
|
||||
"label": "Engine",
|
||||
"name": "engine",
|
||||
"type": "static"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Version",
|
||||
"type": "static"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -1,44 +0,0 @@
|
||||
## Carousel
|
||||
|
||||
轮播图
|
||||
|
||||
- `type` 请设置成 `carousel`
|
||||
- `className` 外层 Dom 的类名
|
||||
- `options` 轮播面板数据，默认`[]`，支持以下模式
|
||||
- 图片
|
||||
- `image` 图片链接
|
||||
- `imageClassName` 图片类名
|
||||
- `title` 图片标题
|
||||
- `titleClassName` 图片标题类名
|
||||
- `description` 图片描述
|
||||
- `descriptionClassName` 图片描述类名
|
||||
- `html` HTML 自定义，同[Tpl](./Tpl.md)一致
|
||||
- `itemSchema` 自定义`schema`来展示数据
|
||||
- `auto` 是否自动轮播，默认`true`
|
||||
- `interval` 切换动画间隔，默认`5s`
|
||||
- `duration` 切换动画时长，默认`0.5s`
|
||||
- `width` 宽度，默认`auto`
|
||||
- `height` 高度，默认`200px`
|
||||
- `controls` 显示左右箭头、底部圆点索引，默认`['dots', 'arrows']`
|
||||
- `controlsTheme` 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式
|
||||
- `animation` 切换动画效果，默认`fade`，另有`slide`模式
|
||||
|
||||
```schema:height="350" scope="body"
|
||||
{
|
||||
"type": "carousel",
|
||||
"controlTheme": "light",
|
||||
"height": "300",
|
||||
"animation": "slide",
|
||||
"options": [
|
||||
{
|
||||
"image": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
|
||||
},
|
||||
{
|
||||
"html": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
|
||||
},
|
||||
{
|
||||
"image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -1,25 +0,0 @@
|
||||
## Chart
|
||||
|
||||
图表渲染器，采用 echarts 渲染，配置格式跟 echarts 相同，[echarts 配置文档](http://echarts.baidu.com/option.html#title)
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------ | --------------------------------- | --------- | ------------------------------------------------------------------ |
|
||||
| type | `string` | `"chart"` | 指定为 chart 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| body | [Container](./Types.md#container) | | 内容容器 |
|
||||
| api | [api](./Types.md#Api) | | 配置项远程地址 |
|
||||
| initFetch | `boolean` | | 是否默认拉取 |
|
||||
| interval | `number` | | 刷新时间(最低 3000) ，单位是毫秒 |
|
||||
| config | `object/string` | | 设置 eschars 的配置项,当为`string`的时候可以设置 function 等配置项 |
|
||||
| style | `object` | | 设置根元素的 style |
|
||||
| width | `string` | | 设置根元素的宽度 |
|
||||
| height | `string` | | 设置根元素的高度 |
|
||||
| replaceChartOption | `boolean` | `false` | 每次更新是完全覆盖配置项还是追加？ |
|
||||
|
||||
```schema:height="350" scope="body"
|
||||
{
|
||||
"type": "chart",
|
||||
"api": "/api/mock2/chart/chart",
|
||||
"interval": 5000
|
||||
}
|
||||
```
|
||||
@ -1,18 +0,0 @@
|
||||
## Collapse
|
||||
|
||||
折叠器
|
||||
|
||||
- `type` 请设置成 `collapse`
|
||||
- `title` 标题
|
||||
- `collapsed` 默认是否要收起。
|
||||
- `className` CSS 类名，默认：`bg-white wrapper`。
|
||||
- `headingClassName` 标题 CSS 类名，默认：`font-thin b-b b-light text-lg p-b-xs`。
|
||||
- `bodyClassName` 内容 CSS 类名。
|
||||
|
||||
```schema:height="350" scope="body"
|
||||
{
|
||||
"type": "collapse",
|
||||
"title": "标题",
|
||||
"body": "内容。。。"
|
||||
}
|
||||
```
|
||||
@ -1,14 +0,0 @@
|
||||
## Column
|
||||
|
||||
表格中的列配置
|
||||
|
||||
- `type` 默认为 `text`，支持： `text`、`html`、`tpl`、`image`、`progress`、`status`、`date`、`datetime`、`time`、`json`、`mapping`参考 [Field 说明](./Field.md)和[Operation](./Operation.md)。
|
||||
- `name` 用来关联列表数据中的变量 `key`。
|
||||
- `label` 列标题。
|
||||
- `groupName` 如果想要分组，请设置这个！
|
||||
- `copyable` 开启后，会支持内容点击复制。
|
||||
- `width` 列宽度。
|
||||
- `popOver` 是否支持点击查看详情。当内容较长时，可以开启此配置。
|
||||
- `quickEdit` 配置后在内容区增加一个编辑按钮，点击后弹出一个编辑框。
|
||||
- `toggled` 控制默认是展示还是不展示，只有 Table 的 `columnsTogglable` 开启了才有效。
|
||||
- `isHead` 标识当前列是否以表头的样式展示。
|
||||
@ -1,99 +0,0 @@
|
||||
## Definitions
|
||||
|
||||
`Definitions`建立当前页面公共的配置项，在其他组件中可以通过`$ref`来引用当前配置项中的内容。注意 definitions 只能在顶级节点中定义，定义在其他位置，将引用不到。
|
||||
|
||||
```schema:height="200"
|
||||
{
|
||||
"definitions": {
|
||||
"aa": {
|
||||
"type": "text",
|
||||
"name": "jack",
|
||||
"value": "ref value",
|
||||
"labelRemark": "通过<code>\\$ref</code>引入的组件"
|
||||
}
|
||||
},
|
||||
"type": "page",
|
||||
"title": "引用",
|
||||
"body": [
|
||||
{
|
||||
"type": "form",
|
||||
"api": "api/xxx",
|
||||
"actions": [],
|
||||
"controls": [
|
||||
{
|
||||
"$ref": "aa"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
`Definitions` 最大的作用其实是能够实现对数据格式的递归引用。来看这个栗子吧。
|
||||
|
||||
```schema:height="600"
|
||||
{
|
||||
"definitions": {
|
||||
"options": {
|
||||
"type": "combo",
|
||||
"multiple": true,
|
||||
"multiLine": true,
|
||||
"name": "options",
|
||||
"controls": [
|
||||
{
|
||||
"type": "group",
|
||||
"controls": [
|
||||
{
|
||||
"label": "名称",
|
||||
"name": "label",
|
||||
"type": "text",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"label": "值",
|
||||
"name": "value",
|
||||
"type": "text",
|
||||
"required": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "包含子选项",
|
||||
"type": "switch",
|
||||
"name": "hasChildren",
|
||||
"mode": "inline",
|
||||
"className": "block"
|
||||
},
|
||||
{
|
||||
"$ref": "options",
|
||||
"label": "子选项",
|
||||
"name": "children",
|
||||
"visibleOn": "this.hasOwnProperty('hasChildren') && this.hasChildren",
|
||||
"addButtonText": "新增子选项"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"type": "page",
|
||||
"title": "引用",
|
||||
"body": [
|
||||
{
|
||||
"type": "form",
|
||||
"api": "api/xxx",
|
||||
"actions": [],
|
||||
"controls": [
|
||||
{
|
||||
"$ref": "options",
|
||||
"label": "选项"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "static",
|
||||
"label": "当前值",
|
||||
"tpl": "<pre>${options|json}</pre>"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -1,40 +0,0 @@
|
||||
## Dialog
|
||||
|
||||
Dialog 由 [Action](./Action.md) 触发。他是一个类似于 [Page](./Page.md) 的容器模型。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------- | ----------------------------------------------- | ------------ | ------------------------------------------------ |
|
||||
| type | `string` | | `"dialog"` 指定为 Dialog 渲染器 |
|
||||
| title | `string` 或者 [Container](./Types.md#Container) | | 弹出层标题 |
|
||||
| body | [Container](./Types.md#Container) | | 往 Dialog 内容区加内容 |
|
||||
| size | `string` | | 指定 dialog 大小，支持: `xs`、`sm`、`md`、`lg` |
|
||||
| bodyClassName | `string` | `modal-body` | Dialog body 区域的样式类名 |
|
||||
| closeOnEsc | `boolean` | `false` | 是否支持按 `Esc` 关闭 Dialog |
|
||||
| disabled | `boolean` | `false` | 如果设置此属性，则该 Dialog 只读没有提交操作。 |
|
||||
| actions | Array Of [Action](./Action.md) | | 可以不设置，默认只有【确认】和【取消】两个按钮。 |
|
||||
| data | `object` | | 用于数据映射，如果不设定将默认将触发按钮的上下文中继承数据。用法同 api 中的 [data](./Types.md#api) 用法 |
|
||||
|
||||
```schema:height="200"
|
||||
{
|
||||
"body": {
|
||||
"label": "弹出",
|
||||
"type": "button",
|
||||
"level": "primary",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "表单设置",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "/api/mock2/form/saveForm?waitSeconds=1",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "text",
|
||||
"label": "文本"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,11 +0,0 @@
|
||||
## Divider
|
||||
|
||||
分割线
|
||||
|
||||
- `type` 请设置成 `divider`
|
||||
|
||||
```schema:height="200"
|
||||
{
|
||||
"type": "divider"
|
||||
}
|
||||
```
|
||||
@ -1,42 +0,0 @@
|
||||
## Drawer
|
||||
|
||||
Drawer 由 [Action](./Action.md) 触发。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| -------------- | ----------------------------------------------- | ------------ | ------------------------------------------------ |
|
||||
| type | `string` | | `"drawer"` 指定为 Drawer 渲染器 |
|
||||
| title | `string` 或者 [Container](./Types.md#Container) | | 弹出层标题 |
|
||||
| body | [Container](./Types.md#Container) | | 往 Drawer 内容区加内容 |
|
||||
| size | `string` | | 指定 Drawer 大小，支持: `xs`、`sm`、`md`、`lg` |
|
||||
| bodyClassName | `string` | `modal-body` | Drawer body 区域的样式类名 |
|
||||
| closeOnEsc | `boolean` | `false` | 是否支持按 `Esc` 关闭 Drawer |
|
||||
| closeOnOutside | `boolean` | `false` | 点击内容区外是否关闭 Drawer |
|
||||
| overlay | `boolean` | `true` | 是否显示蒙层 |
|
||||
| resizable | `boolean` | `false` | 是否可通过拖拽改变 Drawer 大小 |
|
||||
| actions | Array Of [Action](./Action.md) | | 可以不设置，默认只有【确认】和【取消】两个按钮。 |
|
||||
| data | `object` | | 用于数据映射，如果不设定将默认将触发按钮的上下文中继承数据。用法同 api 中的 [data](./Types.md#api) 用法 |
|
||||
|
||||
```schema:height="200"
|
||||
{
|
||||
"body": {
|
||||
"label": "弹出",
|
||||
"type": "button",
|
||||
"level": "primary",
|
||||
"actionType": "drawer",
|
||||
"drawer": {
|
||||
"title": "表单设置",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "/api/mock2/form/saveForm?waitSeconds=1",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "text",
|
||||
"label": "文本"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,19 +0,0 @@
|
||||
## Each
|
||||
|
||||
基于现有变量循环输出渲染器
|
||||
|
||||
- `type` 请设置 `each`。
|
||||
- `value` 格式为数组。
|
||||
- `items` 使用`value`中的数据，循环输出渲染器。
|
||||
|
||||
|
||||
```schema:height="160" scope="body"
|
||||
{
|
||||
"type": "each",
|
||||
"value": ["A", "B", "C"],
|
||||
"items": {
|
||||
"type": "tpl",
|
||||
"tpl": "<span class='label label-default'><%= data.item %></span> "
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,185 +0,0 @@
|
||||
## Field
|
||||
|
||||
主要用在 [Table](./Table.md) 的列配置 Column、[List](./List.md) 的内容、[Card](./Card.md) 卡片的内容和表单的[Static-XXX](./Static.md#static-xxx) 中。它主要用来展示数据。
|
||||
|
||||
```schema:height="450" scope="body"
|
||||
{
|
||||
"type": "crud",
|
||||
"api": "/api/mock2/crud/list",
|
||||
"affixHeader": false,
|
||||
"syncLocation": false,
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"name": "text",
|
||||
"label": "文本",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"type": "image",
|
||||
"label": "图片",
|
||||
"name": "image",
|
||||
"popOver": {
|
||||
"title": "查看大图",
|
||||
"body": "<div class=\"w-xxl\"><img class=\"w-full\" src=\"${image}\"/></div>"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "date",
|
||||
"type": "date",
|
||||
"label": "日期"
|
||||
},
|
||||
{
|
||||
"name": "progress",
|
||||
"label": "进度",
|
||||
"type": "progress"
|
||||
},
|
||||
{
|
||||
"name": "boolean",
|
||||
"label": "状态",
|
||||
"type": "status"
|
||||
},
|
||||
{
|
||||
"name": "boolean",
|
||||
"label": "开关",
|
||||
"type": "switch"
|
||||
},
|
||||
{
|
||||
"name": "type",
|
||||
"label": "映射",
|
||||
"type": "mapping",
|
||||
"map": {
|
||||
"1": "<span class='label label-info'>漂亮</span>",
|
||||
"2": "<span class='label label-success'>开心</span>",
|
||||
"3": "<span class='label label-danger'>惊吓</span>",
|
||||
"4": "<span class='label label-warning'>紧张</span>",
|
||||
"*": "其他：${type}"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "list",
|
||||
"type": "list",
|
||||
"label": "List",
|
||||
"placeholder": "-",
|
||||
"listItem": {
|
||||
"title": "${title}",
|
||||
"subTitle": "${description}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 通用配置
|
||||
|
||||
- `name` 绑定变量名。
|
||||
- `placeholder` 当没有值时的展示内容。
|
||||
- `popOver` 配置后在内容区增加一个放大按钮，点击后弹出一个详情弹框。
|
||||
`boolean` 简单的开启或者关闭
|
||||
`Object` 弹出的内容配置。请参考 [Dialog](./Dialog.md) 配置说明。
|
||||
- `quickEdit` 配置后在内容区增加一个编辑按钮，点击后弹出一个编辑框。
|
||||
`boolean` 简单的开启或者关闭
|
||||
`Object` 快速编辑详情，请参考 [FormItem](./FormItem.md) 配置。
|
||||
`mode` 模式如果设置为 `inline` 模式，则直接展示输入框，而不需要点击按钮后展示。
|
||||
`saveImmediately` 开启后，直接保存，而不是等全部操作完后批量保存。
|
||||
- `copyable` 配置后会在内容区增加一个复制按钮，点击后把内容复制到剪切板。
|
||||
todo
|
||||
|
||||
### Tpl(Field)
|
||||
|
||||
请参考[tpl](./Tpl.md)
|
||||
|
||||
### Plain(Field)
|
||||
|
||||
请参考[Plain](./Plain.md)
|
||||
|
||||
### Json(Field)
|
||||
|
||||
- `type` 请设置为 `json`。
|
||||
- `levelExpand` 开始展开的层级，默认为 1，如设置不展开，则设置为 0
|
||||
|
||||
### Date(Field)
|
||||
|
||||
用来显示日期。
|
||||
|
||||
- `type` 请设置为 `date`。
|
||||
- `format` 默认为 `YYYY-MM-DD`，时间格式，请参考 [moment](http://momentjs.com/) 中的格式用法。
|
||||
- `valueFormat` 默认为 `X`，时间格式，请参考 [moment](http://momentjs.com/) 中的格式用法。
|
||||
|
||||
### Mapping(Field)
|
||||
|
||||
用来对值做映射显示。
|
||||
|
||||
- `type` 请设置为 `mapping`。
|
||||
- `map` 映射表, 比如
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "mapping",
|
||||
"name": "flag",
|
||||
"map": {
|
||||
"1": "<span class='label label-default'>One</span>",
|
||||
"*": "其他 ${flag}"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
当值为 1 时，显示 One, 当值为其他时会命中 `*` 所以显示 `其他 flag的值`。
|
||||
|
||||
### Image(Field)
|
||||
|
||||
用来展示图片。
|
||||
|
||||
- `type` 请设置为 `image`。
|
||||
- `description` 图片描述。
|
||||
- `defaultImage` 默认图片地址。
|
||||
- `className` CSS 类名。
|
||||
- `src` 图片地址，支持变量。如果想动态显示，请勿配置。
|
||||
|
||||
### Progress(Field)
|
||||
|
||||
用来展示进度条。
|
||||
|
||||
- `type` 请设置为 `progress`。
|
||||
- `showLabel` 是否显示文字
|
||||
- `map` 等级配置
|
||||
默认
|
||||
|
||||
```json
|
||||
["bg-danger", "bg-warning", "bg-info", "bg-success", "bg-success"]
|
||||
```
|
||||
|
||||
展示的样式取决于当前值在什么区间段，比如以上的配置，把 100 切成了 5 分，前 1/5, 即 25 以前显示 `bg-danger` 背景。50 ~ 75 显示 `bg-info` 背景。
|
||||
|
||||
- `progressClassName` 进度外层 CSS 类名 默认为: `progress-xs progress-striped active m-t-xs m-b-none`
|
||||
- `progressBarClassName` 进度条 CSS 类名。
|
||||
|
||||
### Status(Field)
|
||||
|
||||
用来显示状态，用图表展示。
|
||||
|
||||
- `type` 请设置为 `status`。
|
||||
- `map` 图标配置
|
||||
|
||||
默认:
|
||||
|
||||
```json
|
||||
["fa fa-times text-danger", "fa fa-check text-success"]
|
||||
```
|
||||
|
||||
即如果值 `value % map.length` 等于 0 则显示第一个图标。`value % map.length` 等于 1 则显示第二个图标，无限类推。所以说 map 其实不只是支持 2 个，可以任意个。
|
||||
|
||||
这个例子，当值为 0 、2、4 ... 时显示红 `X`， 当值为 1, 3, 5 ... 绿 `√`
|
||||
|
||||
### Switch(Field)
|
||||
|
||||
用来占一个开关。
|
||||
|
||||
- `type` 请设置为 `switch`。
|
||||
- `option` 选项说明
|
||||
- `trueValue` 勾选后的值
|
||||
- `falseValue` 未勾选的值
|
||||
@ -1,37 +0,0 @@
|
||||
### Array
|
||||
|
||||
数组输入框配置
|
||||
|
||||
其实就是 [Combo](./Combo.md) 的一个 flat 用法。
|
||||
|
||||
- `type` 请设置成 `array`
|
||||
- `items` 配置单项表单类型
|
||||
- `addable` 是否可新增。
|
||||
- `removable` 是否可删除
|
||||
- `draggable` 默认为 `false`, 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\$id 字段
|
||||
- `draggableTip` 可拖拽的提示文字，默认为：`"可通过拖动每行中的【交换】按钮进行顺序调整"`
|
||||
- `addButtonText` 新增按钮文字，默认为 `"新增"`。
|
||||
- `minLength` 限制最小长度。
|
||||
- `maxLength` 限制最大长度。
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="450" scope="form"
|
||||
[
|
||||
{
|
||||
"name": "array",
|
||||
"label": "颜色集合",
|
||||
"type": "array",
|
||||
"value": ["red"],
|
||||
"inline": true,
|
||||
"items": {
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"type": "static",
|
||||
"name": "array",
|
||||
"label": "当前值"
|
||||
}
|
||||
]
|
||||
```
|
||||
@ -1,104 +0,0 @@
|
||||
### Button-Group(FormItem)
|
||||
|
||||
按钮集合，直接看示例吧。
|
||||
|
||||
- `type` 请设置成 `button-group`
|
||||
- `buttons` 配置按钮集合。
|
||||
|
||||
```schema:height="200" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "text",
|
||||
"name": "test",
|
||||
"label": "Text"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "button-toolbar",
|
||||
"buttons": [
|
||||
{
|
||||
"type": "button-group",
|
||||
"buttons": [
|
||||
{
|
||||
"type": "button",
|
||||
"label": "Button",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"confirmMode": false,
|
||||
"title": "提示",
|
||||
"body": "对，你刚点击了！"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"type": "submit",
|
||||
"label": "Submit"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "reset",
|
||||
"label": "Reset"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "submit",
|
||||
"icon": "fa fa-check text-success"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "reset",
|
||||
"icon": "fa fa-times text-danger"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
button-group 有两种模式，除了能让按钮组合在一起，还能做类似于单选功能。
|
||||
|
||||
当不配置 buttons 属性时，就可以当复选框用。
|
||||
|
||||
- `options` 选项配置，类型为数组，成员格式如下。
|
||||
- `label` 文字
|
||||
- `value` 值
|
||||
- `source` Api 地址，如果选项不固定，可以通过配置 `source` 动态拉取。
|
||||
- `multiple` 默认为 `false`, 设置成 `true` 表示可多选。
|
||||
- `joinValues` 默认为 `true`
|
||||
- 单选模式：当用户选中某个选项时，选项中的 value 将被作为该表单项的值提交，否则，整个选项对象都会作为该表单项的值提交。
|
||||
- 多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。
|
||||
- `delimiter` 默认为 `,`
|
||||
- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 `value` 的值封装为数组，作为当前表单项的值。
|
||||
- `clearable` 默认为 `true`, 表示可以取消选中。
|
||||
- `size` 按钮大小，从小到大依次为`xs, sm, md, lg`
|
||||
- `disabled` 是否禁用`options` 中选项
|
||||
- `autoFill` 将当前已选中的选项的某个字段的值自动填充到表单中某个表单项中，只在单选时有效
|
||||
- 配置`"autoFill": {"address": "${label}"}`，表示将选中项中的`label`的值，自动填充到当前`name`为`address`的表单项中
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="250" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "button-group",
|
||||
"name": "select",
|
||||
"label": "单选",
|
||||
"options": [
|
||||
{
|
||||
"label": "Option A",
|
||||
"value": "a"
|
||||
},
|
||||
{
|
||||
"label": "Option B",
|
||||
"value": "b"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "static",
|
||||
"name": "select",
|
||||
"label": "当前值"
|
||||
}
|
||||
]
|
||||
```
|
||||
@ -1,42 +0,0 @@
|
||||
### Button-Toolbar
|
||||
|
||||
从上面的例子可以看出，当按钮独立配置的时候，是独占一行的，如果想让多个按钮在一起放置，可以利用 button-toolbar
|
||||
|
||||
- `type` 请设置成 `button-toolbar`
|
||||
- `buttons` 按钮集合。
|
||||
|
||||
```schema:height="200" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "text",
|
||||
"name": "test",
|
||||
"label": "Text"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "button-toolbar",
|
||||
"buttons": [
|
||||
{
|
||||
"type": "button",
|
||||
"label": "Button",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"confirmMode": false,
|
||||
"title": "提示",
|
||||
"body": "对，你刚点击了！"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"type": "submit",
|
||||
"label": "Submit"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "reset",
|
||||
"label": "Reset"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
@ -1,45 +0,0 @@
|
||||
### Button
|
||||
|
||||
按钮, 包含 `button`、`submit` 和 `reset`。 字段说明。
|
||||
|
||||
- `type` 请设置成 `button`
|
||||
- `label` 按钮文字
|
||||
- `icon` 按钮图标。可以使用来自 font-awesome 的图标。
|
||||
- `level` 按钮级别。 包含： `link`、`primary`、`success`、`info`、`warning`和`danger`。
|
||||
- `size` 按钮大小。 包含： `xs`、`sm`、`md`和`lg`
|
||||
- `className` 按钮的类名。
|
||||
|
||||
如果按钮是 `button` 类型，则还需要配置 [Action](../Action.md) 中定义的属性，否则，amis 不知道如何响应当前按钮点击。
|
||||
|
||||
```schema:height="300" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "text",
|
||||
"name": "test",
|
||||
"label": "Text"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "button",
|
||||
"label": "Button",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"confirmMode": false,
|
||||
"title": "提示",
|
||||
"body": "对，你刚点击了！"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"type": "submit",
|
||||
"level": "primary",
|
||||
"label": "Submit"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "reset",
|
||||
"label": "Reset",
|
||||
"level": "danger"
|
||||
}
|
||||
]
|
||||
```
|
||||
@ -1,25 +0,0 @@
|
||||
### Chained-Select
|
||||
|
||||
无限级别下拉，只支持单选，且必须和 `source` 搭配，通过 API 拉取数据，只要 API 有返回结果，就能一直无限级别下拉下去。
|
||||
|
||||
- `type` 请设置成 `chained-select`
|
||||
- `options` 选项配置，类型为数组，成员格式如下。
|
||||
- `label` 文字
|
||||
- `value` 值
|
||||
- `source` Api 地址，如果选项不固定，可以通过配置 `source` 动态拉取。另外也可以用 `$xxxx` 来获取当前作用域中的变量。
|
||||
- `joinValues` 默认为 `true`
|
||||
- 单选模式：当用户选中某个选项时，选项中的 value 将被作为该表单项的值提交，否则，整个选项对象都会作为该表单项的值提交。
|
||||
- 多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。
|
||||
- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 `value` 的值封装为数组，作为当前表单项的值。
|
||||
- `delimiter` 默认为 `,`
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="300" scope="form-item"
|
||||
{
|
||||
"name": "select3",
|
||||
"type": "chained-select",
|
||||
"label": "级联下拉",
|
||||
"source": "/api/mock2/options/chainedOptions?waitSeconds=1&parentId=$parentId&level=$level&maxLevel=4&waiSeconds=1",
|
||||
"value": "a,b"
|
||||
}
|
||||
```
|
||||
@ -1,18 +0,0 @@
|
||||
### Checkbox
|
||||
|
||||
勾选框
|
||||
|
||||
- `type` 请设置成 `checkbox`
|
||||
- `option` 选项说明
|
||||
- `trueValue` 默认 `true`
|
||||
- `falseValue` 默认 `false`
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="200" scope="form-item"
|
||||
{
|
||||
"name": "checkbox",
|
||||
"type": "checkbox",
|
||||
"label": "Checkbox",
|
||||
"option": "选项说明"
|
||||
}
|
||||
```
|
||||
@ -1,87 +0,0 @@
|
||||
### Checkboxes
|
||||
|
||||
复选框
|
||||
|
||||
- `type` 请设置成 `checkboxes`
|
||||
- `options` 选项配置，类型为数组，成员格式如下。
|
||||
- `label` 文字
|
||||
- `value` 值
|
||||
- `source` Api 地址，如果选项不固定，可以通过配置 `source` 动态拉取。
|
||||
- `joinValues` 默认为 `true` 选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。
|
||||
- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。
|
||||
- `delimiter` 默认为 `,`
|
||||
- `columnsCount` 默认为 `1` 可以配置成一行显示多个。
|
||||
- `checkAll` 默认为 `false` 开启后支持全选
|
||||
- `defaultCheckAll` 是否默认全选，默认为`false`
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="330" scope="form"
|
||||
[
|
||||
{
|
||||
"name": "checkboxes",
|
||||
"type": "checkboxes",
|
||||
"label": "Checkboxes",
|
||||
"options": [
|
||||
{
|
||||
"label": "OptionA",
|
||||
"value": "a"
|
||||
},
|
||||
{
|
||||
"label": "OptionB",
|
||||
"value": "b"
|
||||
},
|
||||
{
|
||||
"label": "OptionC",
|
||||
"value": "c"
|
||||
},
|
||||
{
|
||||
"label": "OptionD",
|
||||
"value": "d"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "static",
|
||||
"name": "checkboxes",
|
||||
"label": "当前值"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
|
||||
### 接口说明
|
||||
|
||||
开始之前请你先阅读[整体要求](../api.md)。
|
||||
|
||||
#### source
|
||||
|
||||
**发送**
|
||||
|
||||
默认 GET，不携带数据，可从上下文中取数据设置进去。
|
||||
|
||||
**响应**
|
||||
|
||||
格式要求如下：
|
||||
|
||||
```json
|
||||
{
|
||||
"status": 0,
|
||||
"msg": "",
|
||||
"data": {
|
||||
"options": [
|
||||
{
|
||||
"label": "描述",
|
||||
"value": "值"
|
||||
},
|
||||
|
||||
{
|
||||
"label": "描述2",
|
||||
"value": "值2"
|
||||
}
|
||||
],
|
||||
|
||||
"value": "值" // 默认值，可以获取列表的同时设置默认值。
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,64 +0,0 @@
|
||||
### City
|
||||
|
||||
城市选择器，可用于让用户输入城市。
|
||||
|
||||
- `type` 请设置成 `city`
|
||||
- `allowDistrict` 默认 `true` 允许输入区域
|
||||
- `allowCity` 默认 `true` 允许输入城市
|
||||
- `extractValue` 默认 `true` 是否抽取值，如果设置成 `false` 值格式会变成对象，包含 `code`、`province`、`city` 和 `district` 文字信息。
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="200" scope="form"
|
||||
[
|
||||
{
|
||||
"name": "city",
|
||||
"type": "city",
|
||||
"label": "城市选择"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "static",
|
||||
"name": "city",
|
||||
"label": "当前值"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
从配置项可以看出来，通过设置 `allowDistrict` 和 `allowCity` 是可以限制用户输入级别的，比如只选择省份。
|
||||
|
||||
```schema:height="200" scope="form"
|
||||
[
|
||||
{
|
||||
"name": "city",
|
||||
"type": "city",
|
||||
"label": "城市选择",
|
||||
"allowDistrict": false,
|
||||
"allowCity": false
|
||||
},
|
||||
|
||||
{
|
||||
"type": "static",
|
||||
"name": "city",
|
||||
"label": "当前值"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
从上面的例子可以看出来，值默认格式是编码（即 `code`），如果你想要详细点的信息，可以把 `extractValue` 设置成 `false`。
|
||||
|
||||
```schema:height="200" scope="form"
|
||||
[
|
||||
{
|
||||
"name": "city",
|
||||
"type": "city",
|
||||
"label": "城市选择",
|
||||
"extractValue": false
|
||||
},
|
||||
|
||||
{
|
||||
"type": "static",
|
||||
"name": "city",
|
||||
"label": "当前值"
|
||||
}
|
||||
]
|
||||
```
|
||||
@ -1,26 +0,0 @@
|
||||
### Color
|
||||
|
||||
颜色选择器。
|
||||
|
||||
- `type` 请设置成 `color`
|
||||
- `format` 请选择 `hex`、`hls`、`rgb`或者`rgba`。默认为 `hex`。
|
||||
- `presetColors` 选择器底部的默认颜色
|
||||
- 默认为`['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']`，数组内为空则不显示默认颜色
|
||||
- `allowCustomColor` 是否允许自定义颜色，默认为`true`，为`false`时只能选择颜色，使用 `presetColors` 设定颜色选择范围
|
||||
- `clearable` 是否显示清除按钮。
|
||||
- `resetValue` 默认为 `""`, 删除后设置此配置项给定的值。
|
||||
|
||||
```schema:height="400" scope="form-item"
|
||||
{
|
||||
"type": "color",
|
||||
"name": "color",
|
||||
"label": "颜色"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "color",
|
||||
"name": "customColor",
|
||||
"label": "自定义颜色",
|
||||
"allowCustomColor": false
|
||||
}
|
||||
```
|
||||
@ -1,280 +0,0 @@
|
||||
### Combo
|
||||
|
||||
组合模式，支持自由组合多个表单项。当设置成单选时数据格式为对象，当设置成多选时数据格式为数组，数组成员是对象（flat 模式可以直接是某个表单单项的数值）。
|
||||
|
||||
- `type` 请设置成 `combo`
|
||||
- `multiple` 默认为 `false` 配置是否为多选模式
|
||||
- `controls` 配置组合成员，所有成员都是横向展示，可以是任意 [FormItem](./FormItem.md)
|
||||
- `controls[x].columnClassName` 列的类名，可以用它配置列宽度。默认平均分配。
|
||||
- `controls[x].unique` 设置当前列值是否唯一，即不允许重复选择。
|
||||
- `maxLength` 当 multiple 为 true 的时候启用，设置可以最大项数。
|
||||
- `flat` 默认为 `false`, 是否将结果扁平化(去掉 name),只有当 controls 的 length 为 1 且 multiple 为 true 的时候才有效。
|
||||
- `joinValues` 默认为 `true` 当扁平化开启的时候，是否用分隔符的形式发送给后端，否则采用 array 的方式。
|
||||
- `delimiter` 当扁平化开启并且 joinValues 为 true 时，用什么分隔符。
|
||||
- `multiLine` 默认是横着展示一排，设置以后竖着展示
|
||||
- `addable` 是否可新增。
|
||||
- `removable` 是否可删除
|
||||
- `itemRemovableOn` 判断单条是否可删除，类型为表达式
|
||||
- `deleteApi` 如果配置了，则删除前会发送一个 api，请求成功才完成删除！
|
||||
- `deleteConfirmText` 默认为 `确认要删除？`，当配置 `deleteApi` 才生效！删除时用来做用户确认！
|
||||
- `draggable` 默认为 `false`, 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\$id 字段
|
||||
- `draggableTip` 可拖拽的提示文字，默认为：`"可通过拖动每行中的【交换】按钮进行顺序调整"`
|
||||
- `addButtonText` 新增按钮文字，默认为 `"新增"`。
|
||||
- `minLength` 限制最小长度。
|
||||
- `maxLength` 限制最大长度。
|
||||
- `scaffold` 单组表单项初始值。默认为 `{}`。
|
||||
- `canAccessSuperData` 指定是否可以自动获取上层的数据并映射到表单项上，默认是`false`。
|
||||
- `conditions` 数组的形式包含所有条件的渲染类型，单个数组内的`test` 为判断条件，数组内的`controls`为符合该条件后渲染的`schema`
|
||||
- `typeSwitchable` 是否可切换条件，配合`conditions`使用
|
||||
- `formClassName` 单组表单项的类名
|
||||
- `noBorder` 单组表单项是否有边框
|
||||
- `strictMode` 默认为严格模式，设置为 false 时，当其他表单项更新是，里面的表单项也可以及时获取，否则不会。
|
||||
- `syncFields` 配置同步字段。只有 strictMode 为 false 时有效。如果 combo 层级比较深，底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。输入格式：`["os"]`
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
#### 单行模式
|
||||
|
||||
```schema:height="450" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "combo",
|
||||
"name": "combo",
|
||||
"label": "单选组合项",
|
||||
"controls": [
|
||||
{
|
||||
"name": "a",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"name": "b",
|
||||
"type": "select",
|
||||
"options": ["a", "b", "c"]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "static",
|
||||
"name": "combo",
|
||||
"label": "当前值"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "combo",
|
||||
"name": "combo2",
|
||||
"label": "多选组合项",
|
||||
"multiple": true,
|
||||
"draggable": true,
|
||||
"controls": [
|
||||
{
|
||||
"label": "字段1",
|
||||
"name": "a",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"label": "字段2",
|
||||
"name": "b",
|
||||
"type": "select",
|
||||
"options": ["a", "b", "c"],
|
||||
"unique": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "static",
|
||||
"name": "combo2",
|
||||
"label": "当前值"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
#### 多行模式。
|
||||
|
||||
```schema:height="450" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "combo",
|
||||
"name": "combo",
|
||||
"label": "多选组合form",
|
||||
"multiple": true,
|
||||
"multiLine": true,
|
||||
"controls": [
|
||||
{
|
||||
"label": "字段1",
|
||||
"name": "a",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"label": "字段2",
|
||||
"name": "b",
|
||||
"type": "select",
|
||||
"options": ["a", "b", "c"]
|
||||
}
|
||||
]
|
||||
|
||||
},
|
||||
{
|
||||
"type": "static",
|
||||
"name": "combo",
|
||||
"label": "当前值"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "combo",
|
||||
"name": "xxx",
|
||||
"label": "单选组合form",
|
||||
"multiLine": true,
|
||||
"controls": [
|
||||
{
|
||||
"name": "a",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"name": "b",
|
||||
"type": "select",
|
||||
"options": ["a", "b", "c"]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "static",
|
||||
"name": "xxx",
|
||||
"label": "当前值"
|
||||
}
|
||||
|
||||
]
|
||||
```
|
||||
|
||||
#### 条件分支
|
||||
|
||||
默认 Combo 渲染的成员是固定表单项的，成员的类型时一致，如果不一致怎么办？这里可以设置条件分支来给不同的成员设置不同的表单项。
|
||||
|
||||
如下面的栗子，定义了两种类型：文本和数字，用户新增的时候可以选择是新增文本还是数字。区分是文字和数字的方式是根据成员数据中的 type 字段来决定。
|
||||
|
||||
```schema:height="450" scope="form-item"
|
||||
{
|
||||
"type": "combo",
|
||||
"name": "combo-conditions2",
|
||||
"label": "多选",
|
||||
"value": [
|
||||
{
|
||||
"type": "text"
|
||||
}
|
||||
],
|
||||
"multiLine": true,
|
||||
"multiple": true,
|
||||
"typeSwitchable": false,
|
||||
"conditions": [
|
||||
{
|
||||
"label": "文本",
|
||||
"test": "this.type === \"text\"",
|
||||
"scaffold": {
|
||||
"type": "text",
|
||||
"label": "文本",
|
||||
"name": ""
|
||||
},
|
||||
"controls": [
|
||||
{
|
||||
"label": "名称",
|
||||
"name": "label",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"label": "字段名",
|
||||
"name": "name",
|
||||
"type": "text"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "数字",
|
||||
"test": "this.type === \"number\"",
|
||||
"scaffold": {
|
||||
"type": "number",
|
||||
"label": "数字",
|
||||
"name": ""
|
||||
},
|
||||
"controls": [
|
||||
{
|
||||
"label": "名称",
|
||||
"name": "label",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"label": "字段名",
|
||||
"name": "name",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"label": "最小值",
|
||||
"name": "min",
|
||||
"type": "number"
|
||||
},
|
||||
{
|
||||
"label": "最大值",
|
||||
"name": "max",
|
||||
"type": "number"
|
||||
},
|
||||
{
|
||||
"label": "步长",
|
||||
"name": "step",
|
||||
"type": "number"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
- `conditions` Array<Condition> 数组，每个成员是一种类型
|
||||
- `conditions[x].label` 类型名称
|
||||
- `conditions[x].test` 表达式，目标成员数据是否属于这个类型？
|
||||
- `conditions[x].scaffold` 初始数据，当新增的时候直接使用此数据。
|
||||
- `conditions[x].controls` 该类型的表单设置。
|
||||
- `typeSwitchable` 类型是否允许切换，如果设置成 true 会多一个类型切换的按钮。
|
||||
|
||||
#### Tabs 模式
|
||||
|
||||
默认成员是一个一个排列的，如果数据比较多优点让人眼花缭乱。所以 Combo 支持了 tabs 的排列方式。
|
||||
|
||||
```schema:height="350" scope="form-item"
|
||||
{
|
||||
"type": "combo",
|
||||
"name": "combo101",
|
||||
"label": "组合多条多行",
|
||||
"multiple": true,
|
||||
"multiLine": true,
|
||||
"value": [
|
||||
{}
|
||||
],
|
||||
"tabsMode": true,
|
||||
"tabsStyle": "card",
|
||||
"maxLength": 3,
|
||||
"controls": [
|
||||
{
|
||||
"name": "a",
|
||||
"label": "文本",
|
||||
"type": "text",
|
||||
"placeholder": "文本",
|
||||
"value": "",
|
||||
"size": "full"
|
||||
},
|
||||
{
|
||||
"name": "b",
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
"options": [
|
||||
"a",
|
||||
"b",
|
||||
"c"
|
||||
],
|
||||
"size": "full"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
- `tabsMode` boolean 用来开启此模式
|
||||
- `tabsStyle` string 样式，可选：`line`、`card` 或者 `radio`.
|
||||
- `tabsLabelTpl` 用来生成标题的模板，默认为：`成员 ${index|plus}`
|
||||
|
||||
注意：这是新引入的功能，目前还不支持拖拽组合使用。且此模式只有多选时才能生效。
|
||||
@ -1,56 +0,0 @@
|
||||
### Date-Range
|
||||
|
||||
日期范围类型。
|
||||
|
||||
- `type` 请设置成 `date-range`
|
||||
- `format` 默认 `X` 即时间戳格式，用来提交的时间格式。更多格式类型请参考 [moment](http://momentjs.com/).
|
||||
- `inputFormat` 默认 `HH:mm` 用来配置显示的时间格式。
|
||||
- `minDate` 限制最小日期，可用 `${xxx}` 取值，或者输入相对时间，或者时间戳。如：`${start}`、`+3days`、`+3days+2hours`或者 `${start|default:-2days}+3days`
|
||||
- `maxDate` 限制最大日期，可用 `${xxx}` 取值，或者输入相对时间，或者时间戳。如：`${start}`、`+3days`、`+3days+2hours`或者 `${start|default:-2days}+3days`
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="250" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "date-range",
|
||||
"name": "select",
|
||||
"label": "日期范围"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "static",
|
||||
"name": "select",
|
||||
"label": "当前值"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
考虑到大家都习惯用两个字段来存储，那么就用 date 来代替吧。
|
||||
|
||||
```schema:height="250" scope="form"
|
||||
[
|
||||
[
|
||||
{
|
||||
"type": "date",
|
||||
"name": "start",
|
||||
"label": "开始日期",
|
||||
"maxDate": "$end"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "date",
|
||||
"name": "end",
|
||||
"label": "结束日期",
|
||||
"minDate": "$start"
|
||||
}
|
||||
],
|
||||
|
||||
{
|
||||
"type": "static",
|
||||
"name": "select",
|
||||
"label": "当前值",
|
||||
"description": "包含开始日期和结束日期",
|
||||
"tpl": "$start - $end"
|
||||
}
|
||||
]
|
||||
```
|
||||
@ -1,36 +0,0 @@
|
||||
### Date
|
||||
|
||||
日期类型。
|
||||
|
||||
- `type` 请设置成 `date`
|
||||
- `format` 默认 `X` 即时间戳格式，用来提交的时间格式。更多格式类型请参考 [moment](http://momentjs.com/).
|
||||
- `inputFormat` 默认 `YYYY-MM-DD` 用来配置显示的时间格式。
|
||||
- `placeholder` 默认 `请选择日期`
|
||||
- `shortcuts` 日期快捷键，如： `"today,3dayslater"` 可用关键字: `today`、 `yesterday`、 `thisweek`、 `thismonth`、 `prevmonth`、 `prevquarter`、 `thisquarter`、 `tomorrow`、 `endofthisweek`、 `endofthismonth`、 `{n}daysago` 、 `{n}dayslater`、 `{n}weeksago`、 `{n}weekslater`、 `{n}monthsago`、 `{n}monthslater`、 `{n}quartersago`、 `{n}quarterslater`
|
||||
- `value` 这里面 value 需要特殊说明一下，因为支持相对值。如：
|
||||
- `-2mins` 2 分钟前
|
||||
- `+2days` 2 天后
|
||||
- `-10week` 十周前
|
||||
- `minDate` 限制最小日期，可用 `${xxx}` 取值，或者输入相对时间，或者时间戳。如：`${start}`、`+3days`、`+3days+2hours`或者 `${start|default:-2days}+3days`
|
||||
- `maxDate` 限制最大日期，可用 `${xxx}` 取值，或者输入相对时间，或者时间戳。如：`${start}`、`+3days`、`+3days+2hours`或者 `${start|default:-2days}+3days`
|
||||
|
||||
可用单位： `min`、`hour`、`day`、`week`、`month`、`year`。所有单位支持复数形式。
|
||||
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="250" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "date",
|
||||
"name": "select",
|
||||
"label": "日期",
|
||||
"shortcuts": "today,3dayslater,3quarterslater"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "static",
|
||||
"name": "select",
|
||||
"label": "当前值"
|
||||
}
|
||||
]
|
||||
```
|
||||
@ -1,35 +0,0 @@
|
||||
### Datetime
|
||||
|
||||
日期时间类型。
|
||||
|
||||
- `type` 请设置成 `datetime`
|
||||
- `format` 默认 `X` 即时间戳格式，用来提交的时间格式。更多格式类型请参考 [moment](http://momentjs.com/).
|
||||
- `inputFormat` 默认 `YYYY-MM-DD HH:mm:ss` 用来配置显示的时间格式。
|
||||
- `placeholder` 默认 `请选择日期`
|
||||
- `timeConstraints` 请参考： [react-datetime](https://github.com/YouCanBookMe/react-datetime)
|
||||
- `value` 这里面 `value` 需要特殊说明一下，因为支持相对值。如：
|
||||
- `-2mins` 2 分钟前
|
||||
- `+2days` 2 天后
|
||||
- `-10week` 十周前
|
||||
- `minDate` 限制最小日期，可用 `${xxx}` 取值，或者输入相对时间，或者时间戳。如：`${start}`、`+3days`、`+3days+2hours`或者 `${start|default:-2days}+3days`
|
||||
- `maxDate` 限制最大日期，可用 `${xxx}` 取值，或者输入相对时间，或者时间戳。如：`${start}`、`+3days`、`+3days+2hours`或者 `${start|default:-2days}+3days`
|
||||
|
||||
可用单位： `min`、`hour`、`day`、`week`、`month`、`year`。所有单位支持复数形式。
|
||||
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="250" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "datetime",
|
||||
"name": "select",
|
||||
"label": "日期"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "static",
|
||||
"name": "select",
|
||||
"label": "当前值"
|
||||
}
|
||||
]
|
||||
```
|
||||
@ -1,36 +0,0 @@
|
||||
### Editor
|
||||
|
||||
### XXX-Editor
|
||||
|
||||
- `type` 请设置成 `editor` 或者 `bat-editor`、`c-editor`、`coffeescript-editor`、`cpp-editor`、`csharp-editor`、`css-editor`、`dockerfile-editor`、`fsharp-editor`、`go-editor`、`handlebars-editor`、`html-editor`、`ini-editor`、`java-editor`、`javascript-editor`、`json-editor`、`less-editor`、`lua-editor`、`markdown-editor`、`msdax-editor`、`objective-c-editor`、`php-editor`、`plaintext-editor`、`postiats-editor`、`powershell-editor`、`pug-editor`、`python-editor`、`r-editor`、`razor-editor`、`ruby-editor`、`sb-editor`、`scss-editor`、`sol-editor`、`sql-editor`、`swift-editor`、`typescript-editor`、`vb-editor`、`xml-editor`、`yaml-editor`。
|
||||
- `language` 默认为 `javascript` 当 `type` 为 `editor` 的时候有用。
|
||||
- `size` 编辑器高度，取值可以是 `sm`、`md`、`lg`、`xl`、`xxl`。
|
||||
- `options` monaco 编辑器的其它配置，比如是否显示行号等，请参考[这里](https://microsoft.github.io/monaco-editor/api/enums/monaco.editor.editoroption.html)。
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="350" scope="form-item"
|
||||
{
|
||||
"type": "json-editor",
|
||||
"name": "json",
|
||||
"label": "Json Editor"
|
||||
}
|
||||
```
|
||||
|
||||
### Diff-Editor
|
||||
|
||||
- `type` 请设置成 `diff-editor`
|
||||
- `language` 默认为 `javascript` 当 `type` 为 `diff-editor` 的时候有用
|
||||
- `diffValue` 设置左侧编辑器的值，支持`${xxx}`获取变量
|
||||
- `disabled` 配置 **右侧编辑器** 是否可编辑，**左侧编辑器**始终不可编辑
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
PS: 当用作纯展示时，可以通过`value`配置项，设置右侧编辑器的值
|
||||
|
||||
```schema:height="350" scope="form-item"
|
||||
{
|
||||
"type": "diff-editor",
|
||||
"name": "diff",
|
||||
"diffValue": "hello world",
|
||||
"label": "Diff-Editor"
|
||||
}
|
||||
```
|
||||
@ -1,29 +0,0 @@
|
||||
### Email
|
||||
|
||||
Email 输入框。
|
||||
|
||||
- `type` 请设置成 `email`
|
||||
- `addOn` 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。
|
||||
- `addOn.type` 请选择 `text` 、`button` 或者 `submit`。
|
||||
- `addOn.label` 文字说明
|
||||
- `addOn.xxx` 其他参数请参考按钮配置部分。
|
||||
- `hint` 当输入框获得焦点的时候显示，用来提示用户输入内容。
|
||||
- `trimContents` 是否去除首尾空白。
|
||||
- `clearable` 在有值的时候是否显示一个删除图标在右侧。
|
||||
- `resetValue` 默认为 `""`, 删除后设置此配置项给定的值。
|
||||
- `options` 可选，选项配置，类型为数组，成员格式如下，配置后用户输入内容时会作为选项提示辅助输入。
|
||||
- `label` 文字
|
||||
- `value` 值
|
||||
- `source` 通过 `options` 只能配置静态数据，如果设置了 `source` 则会从接口拉取，实现动态效果。
|
||||
- `autoComplete` 跟 `source` 不同的是，每次用户输入都会去接口获取提示。
|
||||
- `multiple` 默认为 `false`, 设置成 `true` 表示可多选。
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="200" scope="form-item"
|
||||
{
|
||||
"type": "email",
|
||||
"name": "text",
|
||||
"validateOnChange": true,
|
||||
"label": "Email"
|
||||
}
|
||||
```
|
||||
@ -1,59 +0,0 @@
|
||||
### FieldSet
|
||||
|
||||
多个输入框可以通过 fieldSet 捆绑在一起。
|
||||
|
||||
- `type` 请设置成 `fieldSet`
|
||||
- `title` 标题
|
||||
- `controls` 表单项集合。
|
||||
- `mode` 展示默认，跟 [Form](./Form.md) 中的模式一样，选择： `normal`、`horizontal`或者`inline`。
|
||||
- `horizontal` 当为水平模式时，用来控制左右占比。
|
||||
- `horizontal.label` 左边 label 的宽度占比。
|
||||
- `horizontal.right` 右边控制器的宽度占比。
|
||||
- `horizontal.offset` 当没有设置 label 时，右边控制器的偏移量。
|
||||
- `collapsable` 配置是否可折叠，默认为 `false`。
|
||||
- `collapsed` 默认是否折叠。
|
||||
- `className` CSS 类名
|
||||
- `headingClassName` 标题 CSS 类名
|
||||
- `bodyClassName` 内容区域 CSS 类名
|
||||
|
||||
```schema:height="500" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "fieldSet",
|
||||
"title": "基本配置",
|
||||
"controls": [
|
||||
{
|
||||
"name": "a",
|
||||
"type": "text",
|
||||
"label": "文本1"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "a",
|
||||
"type": "text",
|
||||
"label": "文本2"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "fieldSet",
|
||||
"title": "其他配置",
|
||||
"collapsable": true,
|
||||
"collapsed": true,
|
||||
"controls": [
|
||||
{
|
||||
"name": "c",
|
||||
"type": "text",
|
||||
"label": "文本3"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "d",
|
||||
"type": "text",
|
||||
"label": "文本4"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
@ -1,63 +0,0 @@
|
||||
### File
|
||||
|
||||
用来负责文件上传，文件上传成功后会返回文件地址，这个文件地址会作为这个表单项的值，整个表单提交的时候，其实提交的是文件地址，文件上传已经在这个控件中完成了。
|
||||
|
||||
- `type` 请设置成 `file`
|
||||
- `reciever` 默认 `/api/upload/file` 如果想自己存储，请设置此选项。(PS: 如果想存自己的 bos, 系统配置中可以直接填写自己的 bos 配置。)
|
||||
- `accept` 默认支持所有类型，如果限制只能选某些类型的文件，请配置此属性为文件后缀名`.xxx`
|
||||
- 例如：`.png`；
|
||||
- 也可以配置多个，用逗号分隔：`.mp3,.mp4`。
|
||||
- `maxSize` 默认没有限制，当设置后，文件大小大于此值将不允许上传。
|
||||
- `multiple` 是否多选。
|
||||
- `maxLength` 默认没有限制，当设置后，一次只允许上传指定数量文件。
|
||||
- `joinValues` 多选时是否将多个值用 `delimiter` 连接起来。
|
||||
- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。
|
||||
- `delimiter` 链接符
|
||||
- `autoUpload` 是否选择完就自动开始上传，默认为 `true`
|
||||
- `fileField` 默认 `file`, 如果你不想自己存储，则可以忽略此属性。
|
||||
- `downloadUrl` 默认显示文件路径的时候会支持直接下载，可以支持加前缀如：`http://xx.dom/filename=` ，如果不希望这样，可以把当前配置项设置为 `false`。
|
||||
- `useChunk` 默认为 `auto`，amis 所在服务器，限制了文件上传大小不得超出 10M，所以 amis 在用户选择大文件的时候，自动会改成分块上传模式。
|
||||
- `chunkSize` 分块大小，默认为 5M.
|
||||
- `startChunkApi` 默认 `/api/upload/startChunk` 想自己存储时才需要关注。
|
||||
- `chunkApi` 默认 `/api/upload/chunk` 想自己存储时才需要关注。
|
||||
- `finishChunkApi` 默认 `/api/upload/finishChunk` 想自己存储时才需要关注。
|
||||
- `autoFill` 将上传成功后接口返回值的某个字段，自动填充到表单中某个表单项中，只在单选时有效
|
||||
- 配置`"autoFill": {"filename": "${filename}"}`，表示将选中项中的`filename`的值，自动填充到当前`name`为`filename`的表单项中
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="250" scope="form-item"
|
||||
{
|
||||
"type": "file",
|
||||
"name": "file",
|
||||
"label": "File",
|
||||
"maxSize": 1048576
|
||||
}
|
||||
```
|
||||
|
||||
如果不希望 File 控件接管上传，可以配置 `asBlob` 或者 `asBase64` 这两个属性（二选一），采用这种方式后，File 控件不再自己上传了，而是直接把文件数据作为表单项的值，文件内容会在 Form 表单提交的接口里面一起带上。
|
||||
|
||||
### 接口说明
|
||||
|
||||
开始之前请你先阅读[整体要求](../api.md)。
|
||||
|
||||
#### reciever
|
||||
|
||||
用来自己实现文件接收
|
||||
|
||||
**发送：**
|
||||
|
||||
POST 方式，内容体为 form-data/multipart 格式。文件的字段名为 file。
|
||||
|
||||
**响应：**
|
||||
|
||||
常规返回格式如下：
|
||||
|
||||
```json
|
||||
{
|
||||
"status": 0,
|
||||
"msg": "",
|
||||
"data": {
|
||||
"value": "一般为文件的下载地址"
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,271 +0,0 @@
|
||||
## Form
|
||||
|
||||
表单渲染器，主要用来展示或者接收用户输入后将数据提交给后端或者其他组件。
|
||||
|
||||
```schema:height="360"
|
||||
{
|
||||
"type": "page",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"name": "sample1",
|
||||
"api": "/api/mock2/form/saveForm?waitSeconds=1",
|
||||
"controls": [
|
||||
{
|
||||
"name": "email",
|
||||
"label": "Email",
|
||||
"type": "email",
|
||||
"description": "描述文字"
|
||||
},
|
||||
{
|
||||
"name": "text",
|
||||
"type": "text",
|
||||
"label": "Text"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------------------------- | ------------------------------------ | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| type | `string` | | `"form"` 指定为 Form 渲染器 |
|
||||
| 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` of [FormItem](./FormItem.md) | | Form 表单项集合 |
|
||||
| actions | `Array` of [Action](../Action.md) | | 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 | `boolean` | `true` | panel 的类名。 |
|
||||
| [api](#api) | [Api](../Types.md#api) | | Form 用来保存数据的 api。 |
|
||||
| [initApi](#initApi) | [Api](../Types.md#api) | | Form 用来获取初始数据的 api。 |
|
||||
| interval | `number` | `3000` | 刷新时间(最低 3000)，单位是毫秒 |
|
||||
| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 |
|
||||
| stopAutoRefreshWhen | `string` | `""` | 通过[表达式](./Types.md#表达式) 来配置停止刷新的条件 |
|
||||
| [initAsyncApi](#initAsyncApi) | [Api](../Types.md#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 以后，默认拉取的时间间隔 |
|
||||
| schemaApi | [Api](../Types.md#api) | | `已不支持`，请改用 controls 里面放置 Service 渲染器实现 |
|
||||
| [asyncApi](#asyncApi) | [Api](../Types.md#api) | | 设置此属性后，表单提交发送保存接口后，还会继续轮训请求该接口，直到返回 `finished` 属性为 `true` 才 结束。 |
|
||||
| checkInterval | `number` | 3000 | 轮训请求的时间间隔，默认为 3000 毫秒。设置 `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 | `boolean` | `true` | 指定表单是否开启本地缓存 |
|
||||
| clearPersistDataAfterSubmit | `boolean` | `true` | 指定表单提交成功后是否清除本地缓存 |
|
||||
| name | `string` | | 设置一个名字后，方便其他组件与其通信 |
|
||||
|
||||
表单项都是通过 controls 设置的，类型是数组，成员主要是[FormItem](./FormItem.md)，默认一行一个（当然 form 是 inline 模式时例外），如果想一行多个，可以将多个[FormItem](./FormItem.md)放在一个 [Group](./Group.md) 里面。
|
||||
|
||||
```schema:height="360" scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"name": "sample2",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "test",
|
||||
"label": "Label",
|
||||
"placeholder": "Placeholder"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "group",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "test1",
|
||||
"label": "Label",
|
||||
"placeholder": "Placeholder"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "text",
|
||||
"name": "test2",
|
||||
"label": "Label",
|
||||
"placeholder": "Placeholder"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
水平模式的 Form 也支持 [Group](./Group.md) 展现。
|
||||
|
||||
```schema:height="430" scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"mode": "horizontal",
|
||||
"name": "sample3",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "test",
|
||||
"label": "Label",
|
||||
"placeholder": "Placeholder"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "group",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "test1",
|
||||
"label": "Label",
|
||||
"placeholder": "Placeholder"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "text",
|
||||
"name": "test2",
|
||||
"label": "Label",
|
||||
"placeholder": "Placeholder"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "group",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "test3",
|
||||
"label": "Label",
|
||||
"placeholder": "Placeholder"
|
||||
},
|
||||
|
||||
{
|
||||
"inline": true,
|
||||
"type": "text",
|
||||
"name": "test4",
|
||||
"label": "Label",
|
||||
"placeholder": "Placeholder"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "group",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "test3",
|
||||
"label": "Label",
|
||||
"inline": true,
|
||||
"labelClassName": "col-sm-2",
|
||||
"placeholder": "Placeholder"
|
||||
},
|
||||
|
||||
{
|
||||
"inline": true,
|
||||
"type": "text",
|
||||
"name": "test4",
|
||||
"label": "Label",
|
||||
"placeholder": "Placeholder"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 接口说明
|
||||
|
||||
开始之前请你先阅读[整体要求](../api.md)。
|
||||
|
||||
#### initApi
|
||||
|
||||
可以用来初始化表单数据。
|
||||
|
||||
**发送**
|
||||
|
||||
默认不携带任何参数，可以在上下文中取变量设置进去。
|
||||
|
||||
**响应**
|
||||
|
||||
要求返回的数据 data 是对象，不要返回其他格式，且注意层级问题，data 中返回的数据正好跟 form 中的变量一一对应。
|
||||
|
||||
```
|
||||
{
|
||||
status: 0,
|
||||
msg: '',
|
||||
data: {
|
||||
a: '123'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
如果有个表单项的 name 配置成 a，initApi 返回后会自动填充 '123'。
|
||||
|
||||
#### api
|
||||
|
||||
用来保存表单结果。
|
||||
|
||||
**发送**
|
||||
|
||||
默认为 `POST` 方式，会将所有表单项整理成一个对象发送过过去。除此之外你开可以主动的获取以下信息。
|
||||
|
||||
- `diff` 只会包含 diff 结果
|
||||
- `prinstine` 原始数据。
|
||||
|
||||
如:
|
||||
|
||||
```json
|
||||
{
|
||||
"api": {
|
||||
"method": "post",
|
||||
"url": "/api/xxx/save",
|
||||
"data": {
|
||||
"modified": "$$",
|
||||
"diff": "${diff}",
|
||||
"origin": "${prinstine}"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**响应**
|
||||
|
||||
如果 返回了 data 对象，且是对象，会把结果 merge 到表单数据里面。
|
||||
|
||||
#### initAsyncApi
|
||||
|
||||
这个接口的作用在于解决接口耗时比较长导致超时问题的情况，当配置此接口后，初始化接口的时候先请求 initApi 如果 initApi 接口返回了 data.finished 为 true，则初始化完成。如果返回为 false 则之后每隔 3s 请求 initAsyncApi，直到接口返回了 data.finished 为 true 才结束。 用这种机制的话，业务 api 不需要完全等待操作完成才输出结果，而是直接检测状态，没完成也直接返回，后续还会发起请求检测。
|
||||
|
||||
格式要求就是 data 是对象，且 有 finished 这个字段。返回的其他字段会被 merge 到表单数据里面。
|
||||
|
||||
##### asyncApi
|
||||
|
||||
保存同样也可以采用异步模式，具体请参考 initAsyncApi。
|
||||
@ -1,90 +0,0 @@
|
||||
### FormItem
|
||||
|
||||
Form 中主要是由各种 FormItem 组成。FormItem 中主要包含这些字段。
|
||||
|
||||
- `name` 字段名，表单提交时的 key。
|
||||
- `value` 值，可以通过它设置默认值。
|
||||
- `label` 描述标题，当表单为水平布局时，左边即便是不设置 label 为了保持对齐也会留空，如果想要去掉空白，请设置成 `false`。
|
||||
- `description` 描述内容。
|
||||
- `placeholder` 占位内容。
|
||||
- `type` 指定表单类型，如： `text`、`textarea`、`date`、`email`等等
|
||||
- `inline` 是否为 inline 模式。
|
||||
- `submitOnChange` 是否该表单项值发生变化时就提交当前表单。
|
||||
- `className` 表单最外层类名。
|
||||
- `disabled` 当前表单项是否是禁用状态。
|
||||
- `disabledOn` 通过[表达式](../Types.md#表达式)来配置当前表单项的禁用状态。
|
||||
- `visible` 是否可见。
|
||||
- `visibleOn` 通过[表达式](../Types.md#表达式)来配置当前表单项是否显示。
|
||||
- `hidden` 是否隐藏，不要跟 `visible` `visibleOn` 同时配置
|
||||
- `hiddenOn` 通过[表达式](../Types.md#表达式)来配置当前表单项是否隐藏。
|
||||
- `inputClassName` 表单控制器类名。
|
||||
- `labelClassName` label 的类名。
|
||||
- `required` 是否为必填。
|
||||
- `requiredOn` 通过[表达式](../Types.md#表达式)来配置当前表单项是否为必填。
|
||||
- `validations` 格式验证，支持设置多个，多个规则用英文逗号隔开。
|
||||
|
||||
- `isEmptyString` 必须是空白字符。
|
||||
- `isEmail` 必须是 Email。
|
||||
- `isUrl` 必须是 Url。
|
||||
- `isNumeric` 必须是 数值。
|
||||
- `isAlpha` 必须是 字母。
|
||||
- `isAlphanumeric` 必须是 字母或者数字。
|
||||
- `isInt` 必须是 整形。
|
||||
- `isFloat` 必须是 浮点形。
|
||||
- `isLength:length` 是否长度正好等于设定值。
|
||||
- `minLength:length` 最小长度。
|
||||
- `maxLength:length` 最大长度。
|
||||
- `maximum:number` 最大值。
|
||||
- `minimum:number` 最小值。
|
||||
- `equals:xxx` 当前值必须完全等于 xxx。
|
||||
- `equalsField:xxx` 当前值必须与 xxx 变量值一致。
|
||||
- `isJson` 是否是合法的 Json 字符串。
|
||||
- `notEmptyString` 要求输入内容不是空白。
|
||||
- `isUrlPath` 是 url 路径。
|
||||
- `matchRegexp:/foo/` 必须命中某个正则。
|
||||
- `matchRegexp1:/foo/` 必须命中某个正则。
|
||||
- `matchRegexp2:/foo/` 必须命中某个正则。
|
||||
- `matchRegexp3:/foo/` 必须命中某个正则。
|
||||
- `matchRegexp4:/foo/` 必须命中某个正则。
|
||||
如：
|
||||
|
||||
```js
|
||||
{
|
||||
"validations": "isNumeric,minimum:10",
|
||||
|
||||
// 或者对象配置方式, 推荐
|
||||
"validations": {
|
||||
"isNumeric": true,
|
||||
"minimum": 10
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- `validationErrors` 自定义错误提示, 配置为对象, key 为规则名, value 为错误提示字符串(提示:其中`$1`表示输入)
|
||||
如：
|
||||
```json
|
||||
{
|
||||
"validationErrors": {
|
||||
"isEmail": "请输入正确的邮箱地址"
|
||||
}
|
||||
}
|
||||
```
|
||||
- `validateOnChange` 是否修改就验证数值，默认当表单提交过就会每次修改验证，如果要关闭请设置为 `false`，即便是关了，表单提交前还是会验证的。
|
||||
|
||||
```schema:height="200" scope="form-item"
|
||||
{
|
||||
"type": "text",
|
||||
"name": "test1",
|
||||
"label": "Label",
|
||||
"description": "Description...",
|
||||
"placeholder": "Placeholder",
|
||||
"validateOnChange": true,
|
||||
"validations": "matchRegexp: /^a/, minLength:3,maxLength:5",
|
||||
"validationErrors": {
|
||||
"matchRegexp": "必须为a开头",
|
||||
"minLength": "小伙伴，最低为$1个字符!"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
不同类型的表单，可配置项还有更多，具体请看下面对应的类型。
|
||||
@ -1,77 +0,0 @@
|
||||
### Formula
|
||||
|
||||
公式类型，可以设置公式，并将结果设置给目标值。
|
||||
|
||||
- `type` 请设置成 `formula`
|
||||
- `name` 这是变量名，公式结果将作用到此处指定的变量中去。
|
||||
- `formula` 公式。如： `data.var_a + 2`，其实就是 JS 表达式。
|
||||
- `condition` 作用条件。有两种写法
|
||||
- 用 tpl 语法，把关联的字段写上如： `${xxx} ${yyy}` 意思是当 xxx 和 yyy 的取值结果变化了就再应用一次公式结果。
|
||||
- 自己写判断如: `data.xxx == "a" && data.xxx !== data.__prev.xxx` 当 xxx 变化了，且新的值是字符 "a" 时应用，可以写更加复杂的判断。
|
||||
- `initSet` 初始化时是否设置。默认是 `true`
|
||||
- `autoSet` 观察公式结果，如果计算结果有变化，则自动应用到变量上。默认为 `true`。
|
||||
- `id` 定义个名字，当某个按钮的目标指定为此值后，会触发一次公式应用。这个机制可以在 `autoSet` 为 false 时用来手动触发。
|
||||
> 为什么不是设置 `name`?
|
||||
> 因为 name 值已经用来设置目标变量名了，这个表单项肯定已经存在了，所以不是唯一了，不能够被按钮指定。
|
||||
|
||||
```schema:height="300" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "number",
|
||||
"name": "a",
|
||||
"label": "A"
|
||||
},
|
||||
{
|
||||
"type": "number",
|
||||
"name": "b",
|
||||
"label": "B"
|
||||
},
|
||||
{
|
||||
"type": "number",
|
||||
"name": "sum",
|
||||
"label": "和",
|
||||
"disabled": true,
|
||||
"description": "自动计算 A + B"
|
||||
},
|
||||
{
|
||||
"type": "formula",
|
||||
"name": "sum",
|
||||
"value": 0,
|
||||
"formula": "a + b"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
公式最常见的用法，就是用来实现，当某个值发生变化时，将另外一个值置空如：
|
||||
|
||||
```schema:height="300" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "radios",
|
||||
"options": ["1", "2"],
|
||||
"name": "a",
|
||||
"label": "A",
|
||||
"description": "当 A 发生变化时，原来选择的 B 可能已经失效，所以利用公式把 B 值清空。"
|
||||
},
|
||||
{
|
||||
"type": "radios",
|
||||
"name": "b",
|
||||
"options": ["3", "4"],
|
||||
"label": "B",
|
||||
"visibleOn": "this.a != 2"
|
||||
},
|
||||
{
|
||||
"type": "radios",
|
||||
"name": "b",
|
||||
"options": ["5", "6"],
|
||||
"label": "B",
|
||||
"visibleOn": "this.a == 2"
|
||||
},
|
||||
{
|
||||
"type": "formula",
|
||||
"name": "b",
|
||||
"condition": "${a}",
|
||||
"formula": "''"
|
||||
}
|
||||
]
|
||||
```
|
||||
@ -1,53 +0,0 @@
|
||||
### Grid(FormItem)
|
||||
|
||||
支持 form 内部再用 grid 布局。
|
||||
|
||||
- `type` 请设置成 `grid`
|
||||
- `columns` 数据，用来配置列内容。每个 column 又一个独立的渲染器。
|
||||
- `columns[x].columnClassName` 配置列的 `className`。
|
||||
- `columns[x].controls` 如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合。
|
||||
- `columns[x].xs` 设置极小屏幕宽度占比 1 - 12。
|
||||
- `columns[x].xsHidden` 设置极小屏幕是否隐藏。
|
||||
- `columns[x].xsOffset` 设置极小屏幕偏移量 1 - 12。
|
||||
- `columns[x].xsPull` 设置极小屏幕靠左的距离占比：1 - 12 。
|
||||
- `columns[x].xsPush` 设置极小屏幕靠右的距离占比：1 - 12 。
|
||||
- `columns[x].sm` 设置小屏幕宽度占比 1 - 12。
|
||||
- `columns[x].smHidden` 设置小屏幕是否隐藏。
|
||||
- `columns[x].smOffset` 设置小屏幕偏移量 1 - 12。
|
||||
- `columns[x].smPull` 设置小屏幕靠左的距离占比：1 - 12 。
|
||||
- `columns[x].smPush` 设置小屏幕靠右的距离占比：1 - 12 。
|
||||
- `columns[x].md` 设置平板屏幕宽度占比 1 - 12。
|
||||
- `columns[x].mdHidden` 设置平板屏幕是否隐藏。
|
||||
- `columns[x].mdOffset` 设置平板屏幕偏移量 1 - 12。
|
||||
- `columns[x].mdPull` 设置平板屏幕靠左的距离占比：1 - 12 。
|
||||
- `columns[x].mdPush` 设置平板屏幕靠右的距离占比：1 - 12 。
|
||||
- `columns[x].lg` 设置 PC 屏幕宽度占比 1 - 12。
|
||||
- `columns[x].lgHidden` 设置 PC 屏幕是否隐藏。
|
||||
- `columns[x].lgOffset` 设置 PC 屏幕偏移量 1 - 12。
|
||||
- `columns[x].lgPull` 设置 PC 屏幕靠左的距离占比：1 - 12 。
|
||||
- `columns[x].lgPush` 设置 PC 屏幕靠右的距离占比：1 - 12 。
|
||||
|
||||
```schema:height="200" scope="form-item"
|
||||
{
|
||||
"type": "grid",
|
||||
"columns": [
|
||||
{
|
||||
"md": 3,
|
||||
"controls": [
|
||||
{
|
||||
"name": "text",
|
||||
"type": "text",
|
||||
"label": false,
|
||||
"placeholder": "Text"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"md": 9,
|
||||
"type": "tpl",
|
||||
"tpl": "其他渲染器类型"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -1,52 +0,0 @@
|
||||
### Group
|
||||
|
||||
表单项集合中，默认都是一行一个，如果想要一行多个，请用 Group 包裹起来。
|
||||
|
||||
- `type` 请设置成 `group`
|
||||
- `controls` 表单项集合。
|
||||
- `mode` 展示默认，跟 [Form](./Form.md) 中的模式一样，选择： `normal`、`horizontal`或者`inline`。
|
||||
- `direction` 可以配置水平展示还是垂直展示。对应的配置项分别是：`vertical`、`horizontal`
|
||||
- `horizontal` 当为水平模式时，用来控制左右占比。
|
||||
- `horizontal.label` 左边 label 的宽度占比。
|
||||
- `horizontal.right` 右边控制器的宽度占比。
|
||||
- `horizontal.offset` 当没有设置 label 时，右边控制器的偏移量。
|
||||
- `className` CSS 类名。
|
||||
- `label` Group 也可以配置个 label 来展示标题。
|
||||
|
||||
```schema:height="360" scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"name": "sample2",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "test",
|
||||
"label": "Label",
|
||||
"placeholder": "Placeholder"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "group",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "test1",
|
||||
"label": "Label",
|
||||
"placeholder": "Placeholder"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "text",
|
||||
"name": "test2",
|
||||
"label": "Label",
|
||||
"placeholder": "Placeholder"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -1,32 +0,0 @@
|
||||
### HBox(FormItem)
|
||||
|
||||
支持 form 内部再用 HBox 布局，实现左右排列。没错用 [Group](./Group.md) 也能实现，所以还是推荐用 [Group](./Group.md)。
|
||||
|
||||
- `type` 请设置成 `hbox`
|
||||
- `columns` 数据，用来配置列内容。每个 column 又一个独立的渲染器。
|
||||
- `columns[x].columnClassName` 配置列的 `className`。
|
||||
- `columns[x].controls` 如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合。
|
||||
|
||||
```schema:height="200" scope="form-item"
|
||||
{
|
||||
"type": "hbox",
|
||||
"columns": [
|
||||
{
|
||||
"columnClassName": "w-sm",
|
||||
"controls": [
|
||||
{
|
||||
"name": "text",
|
||||
"type": "text",
|
||||
"label": false,
|
||||
"placeholder": "Text"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "其他类型的渲染器"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -1,5 +0,0 @@
|
||||
### Hidden
|
||||
|
||||
隐藏字段类型，默认表单提交，只会发送 controls 里面的这些成员，对于隐藏的字段同时又希望提交表单的时候带过去，请把表单项配置成 `hidden` 类型。
|
||||
|
||||
- `type` 请设置成 `hidden`
|
||||
@ -1,37 +0,0 @@
|
||||
### Image
|
||||
|
||||
用于上传图片的控件。
|
||||
|
||||
- `type` 请设置成 `image`
|
||||
- `reciever` 默认 `/api/upload` 如果想自己存储，请设置此选项。
|
||||
- `multiple` 是否多选。
|
||||
- `maxLength` 默认没有限制，当设置后，一次只允许上传指定数量文件。
|
||||
- `joinValues` 多选时是否将多个值用 `delimiter` 连接起来。
|
||||
- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。
|
||||
- `delimiter` 连接符，默认是 `,`, 多选时且 `joinValues` 为 `true` 时用来连接值。
|
||||
- `autoUpload` 是否选择完就自动开始上传？默认为 `true`
|
||||
- `maxSize` 默认没有限制，当设置后，文件大小大于此值将不允许上传。
|
||||
- `crop` 用来设置是否支持裁剪。
|
||||
- `aspectRatio` 浮点型，默认 `1` 即 `1:1`，如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。
|
||||
- `accept` 默认是 png/jpg/gif 图片，可以通过修改这个来扩充或缩小支持的图片格式，比如 `.png, .gif` 就只支持 png 和 gif。
|
||||
- `limit` 限制图片大小，超出不让上传。
|
||||
- `width` 限制图片宽度。
|
||||
- `height` 限制图片高度。
|
||||
- `minWidth` 限制图片最小宽度。
|
||||
- `minHeight` 限制图片最小高度。
|
||||
- `maxWidth` 限制图片最大宽度。
|
||||
- `maxHeight` 限制图片最大高度。
|
||||
- `aspectRatio` 限制图片宽高比，格式为浮点型数字，默认 `1` 即 `1:1`，如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。 如果不想限制比率，请设置空字符串。
|
||||
- `autoFill` 将上传成功后接口返回值的某个字段，自动填充到表单中某个表单项中，只在单选时有效
|
||||
- 配置`"autoFill": {"filename": "${filename}"}`，表示将选中项中的`filename`的值，自动填充到当前`name`为`filename`的表单项中
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
> 由于 github pages 只能是静态页面，下面的示例暂未实现上传功能
|
||||
|
||||
```schema:height="250" scope="form-item"
|
||||
{
|
||||
"type": "image",
|
||||
"name": "image",
|
||||
"label": "Images"
|
||||
}
|
||||
```
|
||||
@ -1,84 +0,0 @@
|
||||
### Input-Group
|
||||
|
||||
输入框组合选择器，可用于输入框与其他多个组件组合。
|
||||
|
||||
- `type` 请设置成 `input-group`
|
||||
- `controls` 表单项集合
|
||||
- 更多配置请参考 [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="250" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "input-group",
|
||||
"name": "input-group",
|
||||
"inline": true,
|
||||
"label": "input 组合",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"placeholder": "搜索作业ID/名称",
|
||||
"inputClassName": "b-r-none p-r-none",
|
||||
"name": "input-group"
|
||||
},
|
||||
{
|
||||
"type": "submit",
|
||||
"label": "搜索",
|
||||
"level": "primary"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "input-group",
|
||||
"label": "各种组合",
|
||||
"inline": true,
|
||||
"controls": [
|
||||
{
|
||||
"type": "select",
|
||||
"name": "memoryUnits",
|
||||
"options": [
|
||||
{
|
||||
"label": "Gi",
|
||||
"value": "Gi"
|
||||
},
|
||||
{
|
||||
"label": "Mi",
|
||||
"value": "Mi"
|
||||
},
|
||||
{
|
||||
"label": "Ki",
|
||||
"value": "Ki"
|
||||
}
|
||||
],
|
||||
"value": "Gi"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "memory"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"name": "memoryUnits2",
|
||||
"options": [
|
||||
{
|
||||
"label": "Gi",
|
||||
"value": "Gi"
|
||||
},
|
||||
{
|
||||
"label": "Mi",
|
||||
"value": "Mi"
|
||||
},
|
||||
{
|
||||
"label": "Ki",
|
||||
"value": "Ki"
|
||||
}
|
||||
],
|
||||
"value": "Gi"
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"label": "Go"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
@ -1,163 +0,0 @@
|
||||
### List(FormItem)
|
||||
|
||||
简单的列表选择框。
|
||||
|
||||
- `type` 请设置成 `list`
|
||||
- `options` 选项配置，类型为数组，成员格式如下。
|
||||
- `label` 文字
|
||||
- `value` 值
|
||||
- `image` 图片的 http 地址。
|
||||
- `source` Api 地址，如果选项不固定，可以通过配置 `source` 动态拉取。
|
||||
- `multiple` 默认为 `false`, 设置成 `true` 表示可多选。
|
||||
- `joinValues` 默认为 `true`
|
||||
- 单选模式：当用户选中某个选项时，选项中的 value 将被作为该表单项的值提交，否则，整个选项对象都会作为该表单项的值提交。
|
||||
- 多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。
|
||||
- `delimiter` 默认为 `,`
|
||||
- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。
|
||||
- `autoFill` 将当前已选中的选项的某个字段的值自动填充到表单中某个表单项中，只在单选时有效
|
||||
- 配置`"autoFill": {"address": "${label}"}`，表示将选中项中的`label`的值，自动填充到当前`name`为`address`的表单项中
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
单选
|
||||
|
||||
```schema:height="250" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "list",
|
||||
"name": "select",
|
||||
"label": "单选",
|
||||
"clearable": true,
|
||||
"options": [
|
||||
{
|
||||
"label": "Option A",
|
||||
"value": "a"
|
||||
},
|
||||
{
|
||||
"label": "Option B",
|
||||
"value": "b"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "static",
|
||||
"name": "select",
|
||||
"label": "当前值"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
多选
|
||||
|
||||
```schema:height="280" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "list",
|
||||
"name": "select",
|
||||
"label": "多选",
|
||||
"clearable": true,
|
||||
"multiple": true,
|
||||
"options": [
|
||||
{
|
||||
"label": "OptionA",
|
||||
"value": "a"
|
||||
},
|
||||
{
|
||||
"label": "OptionB",
|
||||
"value": "b"
|
||||
},
|
||||
{
|
||||
"label": "OptionC",
|
||||
"value": "c"
|
||||
},
|
||||
{
|
||||
"label": "OptionD",
|
||||
"value": "d"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "static",
|
||||
"name": "select",
|
||||
"label": "当前值"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
选项带图片
|
||||
|
||||
```schema:height="280" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "list",
|
||||
"name": "select",
|
||||
"label": "图片",
|
||||
"clearable": true,
|
||||
"options": [
|
||||
{
|
||||
"label": "OptionA",
|
||||
"value": "a",
|
||||
"image": "raw:https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
|
||||
},
|
||||
{
|
||||
"label": "OptionB",
|
||||
"value": "b",
|
||||
"image": "raw:https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
|
||||
},
|
||||
{
|
||||
"label": "OptionC",
|
||||
"value": "c",
|
||||
"image": "raw:https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
|
||||
},
|
||||
{
|
||||
"label": "OptionD",
|
||||
"value": "d",
|
||||
"image": "raw:https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "static",
|
||||
"name": "select",
|
||||
"label": "当前值"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### 接口说明
|
||||
|
||||
开始之前请你先阅读[整体要求](../api.md)。
|
||||
|
||||
#### source
|
||||
|
||||
**发送**
|
||||
|
||||
默认 GET，不携带数据，可从上下文中取数据设置进去。
|
||||
|
||||
**响应**
|
||||
|
||||
格式要求如下：
|
||||
|
||||
```json
|
||||
{
|
||||
"status": 0,
|
||||
"msg": "",
|
||||
"data": {
|
||||
"options": [
|
||||
{
|
||||
"label": "描述",
|
||||
"value": "值"
|
||||
},
|
||||
|
||||
{
|
||||
"label": "描述2",
|
||||
"value": "值2"
|
||||
}
|
||||
],
|
||||
|
||||
"value": "值" // 默认值，可以获取列表的同时设置默认值。
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,37 +0,0 @@
|
||||
### Matrix
|
||||
|
||||
矩阵类型的输入框。
|
||||
|
||||
- `type` 请设置成 `matrix`
|
||||
- `columns` 列信息， 数组中 `label` 字段是必须给出的
|
||||
- `rows` 行信息， 数组中 `label` 字段是必须给出的
|
||||
- `rowLabel` 行标题说明
|
||||
- `source` Api 地址，如果选项不固定，可以通过配置 `source` 动态拉取。
|
||||
- `multiple` 多选，默认为 `true`
|
||||
- `singleSelectMode` 设置单选模式，`multiple`为`false`时有效，可设置为`cell`, `row`, `column` 分别为全部选项中只能单选某个单元格、每行只能单选某个单元格，每列只能单选某个单元格
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="250" scope="form-item"
|
||||
{
|
||||
"type": "matrix",
|
||||
"name": "matrix",
|
||||
"label": "Matrix",
|
||||
"rowLabel": "行标题说明",
|
||||
"columns": [
|
||||
{
|
||||
"label": "列1"
|
||||
},
|
||||
{
|
||||
"label": "列2"
|
||||
}
|
||||
],
|
||||
"rows": [
|
||||
{
|
||||
"label": "行1"
|
||||
},
|
||||
{
|
||||
"label": "行2"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -1,54 +0,0 @@
|
||||
### NestedSelect
|
||||
|
||||
嵌套选择框。
|
||||
|
||||
- `type` 请设置成 `nested-select`
|
||||
- `options` 类似于 [select](./Select.md) 中 `options`, 并且支持通过 `children` 无限嵌套。
|
||||
- `source` Api 地址，如果选项不固定，可以通过配置 `source` 动态拉取。
|
||||
- `multiple` 默认为 `false`, 设置成 `true` 表示可多选。
|
||||
- `searchable` 默认为 `false`, 表示是否可搜索
|
||||
- `joinValues` 默认为 `true`
|
||||
- 单选模式：当用户选中某个选项时，选项中的 value 将被作为该表单项的值提交，否则，整个选项对象都会作为该表单项的值提交。
|
||||
- 多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。
|
||||
- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。
|
||||
- `delimiter` 默认为 `,`
|
||||
- `cascade` 设置成 `true` 时当选中父节点时不自动选择子节点。
|
||||
- `withChildren` 是指成 `true`，选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="300" scope="form-item"
|
||||
{
|
||||
"type": "nested-select",
|
||||
"name": "nestedSelect",
|
||||
"label": "级联选择器",
|
||||
"size": "sm",
|
||||
"options": [
|
||||
{
|
||||
"label": "A",
|
||||
"value": "a"
|
||||
},
|
||||
{
|
||||
"label": "B",
|
||||
"value": "b",
|
||||
"children": [
|
||||
{
|
||||
"label": "B-1",
|
||||
"value": "b-1"
|
||||
},
|
||||
{
|
||||
"label": "B-2",
|
||||
"value": "b-2"
|
||||
},
|
||||
{
|
||||
"label": "B-3",
|
||||
"value": "b-3"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "C",
|
||||
"value": "c"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -1,21 +0,0 @@
|
||||
### Number
|
||||
|
||||
数字输入框。
|
||||
|
||||
- `type` 请设置成 `number`
|
||||
- `min` 最小值，支持用`${xxx}`获取变量
|
||||
- `max` 最大值，支持用`${xxx}`获取变量
|
||||
- `step` 步长
|
||||
- `precision` 精度
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="200" scope="form-item"
|
||||
{
|
||||
"type": "number",
|
||||
"name": "text",
|
||||
"label": "数字",
|
||||
"min": 1,
|
||||
"max": 10,
|
||||
"step": 1
|
||||
}
|
||||
```
|
||||
@ -1,54 +0,0 @@
|
||||
### Panel(FormItem)
|
||||
|
||||
还是为了布局，可以把一部分 [FormItem](./FormItem.md) 合并到一个 panel 里面单独展示。
|
||||
|
||||
- `title` panel 标题
|
||||
- `body` [Container](../Types.md#container) 可以是其他渲染模型。
|
||||
- `bodyClassName` body 的 className.
|
||||
- `footer` [Container](../Types.md#container) 可以是其他渲染模型。
|
||||
- `footerClassName` footer 的 className.
|
||||
- `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。
|
||||
|
||||
```schema:height="400" scope="form-item"
|
||||
{
|
||||
"type": "hbox",
|
||||
"columns": [
|
||||
{
|
||||
"controls": [
|
||||
{
|
||||
"name": "text",
|
||||
"type": "text",
|
||||
"label": false,
|
||||
"placeholder": "Text"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"columnClassName": "w-xl",
|
||||
"controls": [
|
||||
{
|
||||
"type": "panel",
|
||||
"title": "bla bla",
|
||||
"controls": [
|
||||
{
|
||||
"name": "text",
|
||||
"type": "text",
|
||||
"label": false,
|
||||
"placeholder": "Text 1"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "text2",
|
||||
"type": "text",
|
||||
"label": false,
|
||||
"placeholder": "Text 2"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
```
|
||||
@ -1,13 +0,0 @@
|
||||
### Password
|
||||
|
||||
密码输入框。
|
||||
|
||||
- `type` 请设置成 `password`
|
||||
- `addOn` 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。
|
||||
- `addOn.type` 请选择 `text` 、`button` 或者 `submit`。
|
||||
- `addOn.label` 文字说明
|
||||
- `addOn.xxx` 其他参数请参考按钮配置部分。
|
||||
- `hint` 当输入框获得焦点的时候显示，用来提示用户输入内容。
|
||||
- `clearable` 在有值的时候是否显示一个删除图标在右侧。
|
||||
- `resetValue` 默认为 `""`, 删除后设置此配置项给定的值。
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
@ -1,246 +0,0 @@
|
||||
### Picker
|
||||
|
||||
列表选取。可以静态数据，或者通过接口拉取动态数据。
|
||||
|
||||
- `type` 请设置成 `picker`
|
||||
- `multiple` 是否为多选。
|
||||
- `options` 选项配置，类型为数组，成员格式如下。
|
||||
- `label` 文字
|
||||
- `value` 值
|
||||
- `source` Api 地址，如果选项不固定，可以通过配置 `source` 动态拉取。 另外也可以用 `$xxxx` 来获取当前作用域中的变量。
|
||||
- `joinValues` 默认为 `true`
|
||||
- 单选模式：当用户选中某个选项时，选项中的 value 将被作为该表单项的值提交，否则，整个选项对象都会作为该表单项的值提交。
|
||||
- 多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。
|
||||
- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。
|
||||
- `delimiter` 默认为 `,`
|
||||
- `modalMode` 设置 `dialog` 或者 `drawer`，用来配置弹出方式。
|
||||
- `pickerSchema` 默认为 `{mode: 'list', listItem: {title: '${label}'}}`, 即用 List 类型的渲染，来展示列表信息。更多的玩法请参考 [CRUD](../CRUD.md) 的配置。
|
||||
- `autoFill` 将当前已选中的选项的某个字段的值自动填充到表单中某个表单项中，只在单选时有效
|
||||
- 配置`"autoFill": {"address": "${label}"}`，表示将选中项中的`label`的值，自动填充到当前`name`为`address`的表单项中
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="300" scope="form-item"
|
||||
{
|
||||
"type": "picker",
|
||||
"name": "type4",
|
||||
"joinValues": true,
|
||||
"valueField": "id",
|
||||
"labelField": "engine",
|
||||
"label": "多选",
|
||||
"source": "/api/sample",
|
||||
"size": "lg",
|
||||
"value": "4,5",
|
||||
"multiple": true,
|
||||
"pickerSchema": {
|
||||
"mode": "table",
|
||||
"name": "thelist",
|
||||
"quickSaveApi": "/api/sample/bulkUpdate",
|
||||
"quickSaveItemApi": "/api/sample/$id",
|
||||
"draggable": true,
|
||||
"headerToolbar": {
|
||||
"wrapWithPanel": false,
|
||||
"type": "form",
|
||||
"className": "text-right",
|
||||
"target": "thelist",
|
||||
"mode": "inline",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "keywords",
|
||||
"addOn": {
|
||||
"type": "submit",
|
||||
"label": "搜索",
|
||||
"level": "primary",
|
||||
"icon": "fa fa-search pull-left"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"sortable": true,
|
||||
"searchable": true,
|
||||
"type": "text",
|
||||
"toggled": true
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true,
|
||||
"type": "text",
|
||||
"toggled": true
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)",
|
||||
"sortable": true,
|
||||
"type": "text",
|
||||
"toggled": true
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version",
|
||||
"quickEdit": true,
|
||||
"type": "text",
|
||||
"toggled": true
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade",
|
||||
"quickEdit": {
|
||||
"mode": "inline",
|
||||
"type": "select",
|
||||
"options": [
|
||||
"A",
|
||||
"B",
|
||||
"C",
|
||||
"D",
|
||||
"X"
|
||||
],
|
||||
"saveImmediately": true
|
||||
},
|
||||
"type": "text",
|
||||
"toggled": true
|
||||
},
|
||||
{
|
||||
"type": "operation",
|
||||
"label": "操作",
|
||||
"width": 100,
|
||||
"buttons": [
|
||||
{
|
||||
"type": "button",
|
||||
"icon": "fa fa-eye",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "查看",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
{
|
||||
"type": "static",
|
||||
"name": "engine",
|
||||
"label": "Engine"
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "static",
|
||||
"name": "browser",
|
||||
"label": "Browser"
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "static",
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "static",
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "static",
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "html",
|
||||
"html": "<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"icon": "fa fa-pencil",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"position": "left",
|
||||
"size": "lg",
|
||||
"title": "编辑",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"name": "sample-edit-form",
|
||||
"api": "/api/sample/$id",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "engine",
|
||||
"label": "Engine",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "platform",
|
||||
"label": "Platform(s)",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"name": "grade",
|
||||
"label": "CSS grade",
|
||||
"options": [
|
||||
"A",
|
||||
"B",
|
||||
"C",
|
||||
"D",
|
||||
"X"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"icon": "fa fa-times text-danger",
|
||||
"actionType": "ajax",
|
||||
"confirmText": "您确认要删除?",
|
||||
"api": "delete:/api/sample/$id"
|
||||
}
|
||||
],
|
||||
"toggled": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,83 +0,0 @@
|
||||
### Radios
|
||||
|
||||
单选框
|
||||
|
||||
- `type` 请设置成 `radios`
|
||||
- `options` 选项配置，类型为数组，成员格式如下。
|
||||
- `label` 文字
|
||||
- `value` 值
|
||||
- `source` Api 地址，如果选项不固定，可以通过配置 `source` 动态拉取。
|
||||
- `columnsCount` 默认为 `1` 可以配置成一行显示多个。
|
||||
- `autoFill` 将当前已选中的选项的某个字段的值自动填充到表单中某个表单项中。
|
||||
- 配置`"autoFill": {"address": "${label}"}`，表示将选中项中的`label`的值，自动填充到当前`name`为`address`的表单项中
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="330" scope="form"
|
||||
[
|
||||
{
|
||||
"name": "radios",
|
||||
"type": "radios",
|
||||
"label": "Radios",
|
||||
"options": [
|
||||
{
|
||||
"label": "OptionA",
|
||||
"value": "a"
|
||||
},
|
||||
{
|
||||
"label": "OptionB",
|
||||
"value": "b"
|
||||
},
|
||||
{
|
||||
"label": "OptionC",
|
||||
"value": "c"
|
||||
},
|
||||
{
|
||||
"label": "OptionD",
|
||||
"value": "d"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "static",
|
||||
"name": "radios",
|
||||
"label": "当前值"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### 接口说明
|
||||
|
||||
开始之前请你先阅读[整体要求](../api.md)。
|
||||
|
||||
#### source
|
||||
|
||||
**发送**
|
||||
|
||||
默认 GET，不携带数据，可从上下文中取数据设置进去。
|
||||
|
||||
**响应**
|
||||
|
||||
格式要求如下：
|
||||
|
||||
```json
|
||||
{
|
||||
"status": 0,
|
||||
"msg": "",
|
||||
"data": {
|
||||
"options": [
|
||||
{
|
||||
"label": "描述",
|
||||
"value": "值"
|
||||
},
|
||||
|
||||
{
|
||||
"label": "描述2",
|
||||
"value": "值2"
|
||||
}
|
||||
],
|
||||
|
||||
"value": "值" // 默认值，可以获取列表的同时设置默认值。
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,23 +0,0 @@
|
||||
### Range
|
||||
|
||||
范围输入框。
|
||||
|
||||
- `type` 请设置成 `range`
|
||||
- `min` 最小值
|
||||
- `max` 最大值
|
||||
- `step` 步长
|
||||
- `multiple` 支持选择范围，默认为`false`
|
||||
- `joinValuse` 默认为 `true`，选择的 `value` 会通过 `delimiter` 连接起来，否则直接将以`{min: 1, max: 100}`的形式提交，开启`multiple`时有效
|
||||
- `delimiter` 默认为 `,`
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="400" scope="form-item"
|
||||
{
|
||||
"type": "range",
|
||||
"name": "range",
|
||||
"label": "数字范围",
|
||||
"min": 0,
|
||||
"max": 20,
|
||||
"step": 2
|
||||
}
|
||||
```
|
||||
@ -1,18 +0,0 @@
|
||||
### Rating
|
||||
|
||||
评分
|
||||
|
||||
- `type` 请设置成 `rating`
|
||||
- `half` 是否使用半星选择
|
||||
- `count` 共有多少星可供选择
|
||||
- `readOnly` 只读
|
||||
|
||||
```schema:height="200" scope="form-item"
|
||||
{
|
||||
"type": "rating",
|
||||
"name": "rating",
|
||||
"label": "评分",
|
||||
"count": 5,
|
||||
"half": true
|
||||
}
|
||||
```
|
||||
@ -1,16 +0,0 @@
|
||||
### Repeat
|
||||
|
||||
可用来设置重复频率
|
||||
|
||||
- `type` 请设置成 `repeat`
|
||||
- `options` 默认: `hourly,daily,weekly,monthly`， 可用配置 `secondly,minutely,hourly,daily,weekdays,weekly,monthly,yearly`
|
||||
- `placeholder` 默认为 `不重复`, 当不指定值时的说明。
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="300" scope="form-item"
|
||||
{
|
||||
"type": "repeat",
|
||||
"name": "repeat",
|
||||
"label": "重复频率"
|
||||
}
|
||||
```
|
||||
@ -1,52 +0,0 @@
|
||||
### Rich-Text
|
||||
|
||||
富文本编辑器
|
||||
|
||||
- `type` 请设置成 `rich-text`
|
||||
- `vendor` 默认为 `tinymce`，amis 平台中默认为 `froala`。
|
||||
- `reciever` 默认的图片保存 API `/api/upload/image`
|
||||
- `videoReciever` 默认的视频保存 API `/api/upload/video`。 当为 tinymce 时无效
|
||||
- `size` 框的大小，可以设置成 `md` 或者 `lg` 来增大输入框。 当为 tinymce 时无效
|
||||
- `buttons` 默认为
|
||||
|
||||
```js
|
||||
[
|
||||
'paragraphFormat',
|
||||
'quote',
|
||||
'color',
|
||||
'|',
|
||||
'bold',
|
||||
'italic',
|
||||
'underline',
|
||||
'strikeThrough',
|
||||
'|',
|
||||
'formatOL',
|
||||
'formatUL',
|
||||
'align',
|
||||
'|',
|
||||
'insertLink',
|
||||
'insertImage',
|
||||
'insertTable',
|
||||
'|',
|
||||
'undo',
|
||||
'redo',
|
||||
'html'
|
||||
];
|
||||
```
|
||||
|
||||
当为 tinymce 时无效
|
||||
|
||||
- `options` Object 类型，给富文本的配置信息。请参考 https://www.froala.com/wysiwyg-editor/docs/options 或者 https://www.tiny.cloud/docs/configure/integration-and-setup/
|
||||
|
||||
tinymce 你可能需要指定样式表才能达到更好的展示效果，这个默认配置是关闭的，具体请参考 tinymce 文档。
|
||||
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="350" scope="form-item"
|
||||
{
|
||||
"type": "rich-text",
|
||||
"name": "html",
|
||||
"label": "Rich Text"
|
||||
}
|
||||
|
||||
```
|
||||
@ -1,128 +0,0 @@
|
||||
### Select
|
||||
|
||||
选项表单。
|
||||
|
||||
- `type` 请设置成 `select`
|
||||
- `options` 选项配置，类型为数组，成员格式如下。
|
||||
- `label` 文字
|
||||
- `value` 值
|
||||
- `value` 设置默认值，如果想要默认选中某个，请设置默认值。
|
||||
- `source` Api 地址，如果选项不固定，可以通过配置 `source` 动态拉取。另外也可以用 `$xxxx` 来获取当前作用域中的变量。
|
||||
- `autoComplete` 跟 source 不同的是，每次用户输入都会去接口获取提示。
|
||||
- `multiple` 默认为 `false`, 设置成 `true` 表示可多选。
|
||||
- `joinValues` 默认为 `true`
|
||||
- 单选模式：当用户选中某个选项时，选项中的 value 将被作为该表单项的值提交，否则，整个选项对象都会作为该表单项的值提交。
|
||||
- 多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。
|
||||
- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 `value` 的值封装为数组，作为当前表单项的值。
|
||||
- `delimiter` 默认为 `,`
|
||||
- `clearable` 默认为 `false`, 当设置为 `true` 时，已选中的选项右侧会有个小 `X` 用来取消设置。
|
||||
- `searchable` 默认为 `false`，当设置为 `true` 时表示可以通过输入部分内容检索出选项。
|
||||
- `checkAll` 默认为 `false` 开启后支持全选
|
||||
- `checkAllLabel` 默认为 `全选`, 全选的文字
|
||||
- `defaultCheckAll` 是否默认全选，默认为`false`
|
||||
- `autoFill` 将当前已选中的选项的某个字段的值自动填充到表单中某个表单项中，只在单选时有效
|
||||
- 配置`"autoFill": {"address": "${label}"}`，表示将选中项中的`label`的值，自动填充到当前`name`为`address`的表单项中
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
单选
|
||||
|
||||
```schema:height="250" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "select",
|
||||
"name": "select",
|
||||
"label": "单选",
|
||||
"clearable": true,
|
||||
"options": [
|
||||
{
|
||||
"label": "Option A",
|
||||
"value": "a"
|
||||
},
|
||||
{
|
||||
"label": "Option B",
|
||||
"value": "b"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "static",
|
||||
"name": "select",
|
||||
"label": "当前值"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
多选
|
||||
|
||||
```schema:height="280" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "select",
|
||||
"name": "select",
|
||||
"label": "多选",
|
||||
"clearable": true,
|
||||
"multiple": true,
|
||||
"options": [
|
||||
{
|
||||
"label": "OptionA",
|
||||
"value": "a"
|
||||
},
|
||||
{
|
||||
"label": "OptionB",
|
||||
"value": "b"
|
||||
},
|
||||
{
|
||||
"label": "OptionC",
|
||||
"value": "c"
|
||||
},
|
||||
{
|
||||
"label": "OptionD",
|
||||
"value": "d"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "static",
|
||||
"name": "select",
|
||||
"label": "当前值"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### 接口说明
|
||||
|
||||
开始之前请你先阅读[整体要求](../api.md)。
|
||||
|
||||
#### source
|
||||
|
||||
**发送**
|
||||
|
||||
默认 GET，不携带数据，可从上下文中取数据设置进去。
|
||||
|
||||
**响应**
|
||||
|
||||
格式要求如下：
|
||||
|
||||
```json
|
||||
{
|
||||
"status": 0,
|
||||
"msg": "",
|
||||
"data": {
|
||||
"options": [
|
||||
{
|
||||
"label": "描述",
|
||||
"value": "值"
|
||||
},
|
||||
|
||||
{
|
||||
"label": "描述2",
|
||||
"value": "值2"
|
||||
}
|
||||
],
|
||||
|
||||
"value": "值" // 默认值，可以获取列表的同时设置默认值。
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,209 +0,0 @@
|
||||
### Service(FormItem)
|
||||
|
||||
请先参考Form外的[Service](../Service.md)用法。作为 FormItem 使用时最大的不同在于作为容器渲染器，他的孩子是优先用表单项还是非表单项。比如放置一个 `{type: 'text'}`，是渲染一个文本输入框、还是一个文本展示？
|
||||
|
||||
两种都存在可能，所以作为表单项的 Service, 有两种用法，当把孩子节点放在 `controls` 里面时输出表单项，如果放在 `body` 底下时输出非表单项。
|
||||
|
||||
```schema:height="200" scope="form-item"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/page/initData",
|
||||
"body": {
|
||||
"type": "text",
|
||||
"text": "现在是：${date}"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
如果把子节点放在 `controls` 就输出表单项如：
|
||||
|
||||
```schema:height="500" scope="form-item"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/page/initData",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"label": "文本输入",
|
||||
"name": "a"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "date",
|
||||
"label": "日期",
|
||||
"name": "date",
|
||||
"format": "YYYY-MM-DD"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
从上面的栗子还可以发现，表单项的值是由 service 的 api 拉取过来的，也就是说，你可以利用 service 实现动态拉取部分表单项数据。
|
||||
|
||||
比如：
|
||||
|
||||
```schema:height="500" scope="form"
|
||||
[
|
||||
{
|
||||
"label": "数据模板",
|
||||
"type": "select",
|
||||
"labelClassName": "text-muted",
|
||||
"name": "tpl",
|
||||
"value": "tpl1",
|
||||
"inline": true,
|
||||
"options": [
|
||||
{
|
||||
"label": "模板1",
|
||||
"value": "tpl1"
|
||||
},
|
||||
{
|
||||
"label": "模板2",
|
||||
"value": "tpl2"
|
||||
},
|
||||
{
|
||||
"label": "模板3",
|
||||
"value": "tpl3"
|
||||
}
|
||||
],
|
||||
"description": "<span class=\"text-danger\">请修改这里看效果</span>"
|
||||
},
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/form/initData?tpl=${tpl}",
|
||||
"controls": [
|
||||
{
|
||||
"label": "名称",
|
||||
"type": "text",
|
||||
"labelClassName": "text-muted",
|
||||
"name": "name"
|
||||
},
|
||||
{
|
||||
"label": "作者",
|
||||
"type": "text",
|
||||
"labelClassName": "text-muted",
|
||||
"name": "author"
|
||||
},
|
||||
{
|
||||
"label": "请求时间",
|
||||
"type": "datetime",
|
||||
"labelClassName": "text-muted",
|
||||
"name": "date"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
注意：为什么修改数据模板的时候会自动让下面的 service 重新拉取数据？因为 service 的 api 是 `/api/mock2/form/initData?tpl=${tpl}`，amis 有个机制就是，当 api 地址值发生变化时就会重新拉取，当修改数据模板的时候，form 底下 tpl 变量会发生改变，然后会导致 api 的计算结果发生变化，然后会让 service 重新拉取。 那怎样不自动拉取？换种写法就行，比如把上面的 api 换成 `{method: "get", url: "/api/mock2/form/initData", data: {tpl: "${tpl}"}}` 这种写法就不会自动刷新了，因为 `/api/mock2/form/initData` 是一个不会发生变化的值了。更多内容请查看[联动说明](../../advanced.md#数据联动)
|
||||
|
||||
有时候自动拉取触发会比较频繁，所以有时候需要用到手动刷新，注意看以下的配置。
|
||||
|
||||
```schema:height="500" scope="form"
|
||||
[
|
||||
{
|
||||
"label": "数据模板",
|
||||
"type": "group",
|
||||
"labelClassName": "text-muted",
|
||||
"controls": [
|
||||
{
|
||||
"type": "select",
|
||||
"name": "tpl",
|
||||
"value": "tpl1",
|
||||
"mode": "inline",
|
||||
"options": [
|
||||
{
|
||||
"label": "模板1",
|
||||
"value": "tpl1"
|
||||
},
|
||||
{
|
||||
"label": "模板2",
|
||||
"value": "tpl2"
|
||||
},
|
||||
{
|
||||
"label": "模板3",
|
||||
"value": "tpl3"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"label": "获取",
|
||||
"mode": "inline",
|
||||
"className": "p-l-none",
|
||||
"actionType": "reload",
|
||||
"target": "servcieName"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "service",
|
||||
"name": "servcieName",
|
||||
"api": {
|
||||
"method": "get",
|
||||
"url": "/api/mock2/form/initData",
|
||||
"data": {
|
||||
"tpl": "${tpl}"
|
||||
}
|
||||
},
|
||||
"controls": [
|
||||
{
|
||||
"label": "名称",
|
||||
"type": "text",
|
||||
"labelClassName": "text-muted",
|
||||
"name": "name"
|
||||
},
|
||||
{
|
||||
"label": "作者",
|
||||
"type": "text",
|
||||
"labelClassName": "text-muted",
|
||||
"name": "author"
|
||||
},
|
||||
{
|
||||
"label": "请求时间",
|
||||
"type": "datetime",
|
||||
"labelClassName": "text-muted",
|
||||
"name": "date"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
以上的栗子都是数据拉取，接下来要介绍 service 的另外一个重要功能，就是用它来拉取动态配置项。
|
||||
|
||||
```schema:height="200" scope="form-item"
|
||||
{
|
||||
"type": "service",
|
||||
"schemaApi": "/api/mock2/service/schema?type=tabs"
|
||||
}
|
||||
```
|
||||
|
||||
你会发现上面的栗子其实并不是拉取的表单项，如果想直接渲染表单项，请返回这种格式
|
||||
|
||||
```js
|
||||
{
|
||||
status: 0,
|
||||
msg: '',
|
||||
data: {
|
||||
controls: [
|
||||
{
|
||||
type: "text",
|
||||
name: "a",
|
||||
label: "文本输入"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
比如
|
||||
|
||||
|
||||
```schema:height="400" scope="form-item"
|
||||
{
|
||||
"type": "service",
|
||||
"schemaApi": "/api/mock2/service/schema?type=controls"
|
||||
}
|
||||
```
|
||||
|
||||
`schemaApi` 同样支持上面的联动用法。
|
||||
@ -1,77 +0,0 @@
|
||||
### SubForm
|
||||
|
||||
formItem 还可以是子表单类型。
|
||||
|
||||
- `type` 请设置成 `form`
|
||||
- `multiple` 默认为 `false` 配置是否为多选模式
|
||||
- `labelField` 当值中存在这个字段，则按钮名称将使用此字段的值来展示。
|
||||
- `btnLabel` 按钮默认名称
|
||||
- `minLength` 限制最小长度。
|
||||
- `maxLength` 限制最大长度。
|
||||
- `addButtonClassName` 新增按钮 CSS 类名 默认：`btn-success btn-sm`。
|
||||
- `editButtonClassName` 修改按钮 CSS 类名 默认：`btn-info btn-addon btn-sm`。
|
||||
- `form` 字表单的配置
|
||||
`title` 标题
|
||||
`controls` 请参考 [Form](./Form.md) 中的配置说明。
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="400" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "form",
|
||||
"name": "form",
|
||||
"label": "子Form",
|
||||
"btnLabel": "设置子表单",
|
||||
"form": {
|
||||
"title": "配置子表单",
|
||||
"controls": [
|
||||
{
|
||||
"name": "a",
|
||||
"label": "A",
|
||||
"type": "text"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "b",
|
||||
"label": "B",
|
||||
"type": "text"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "static",
|
||||
"name": "form",
|
||||
"label": "当前值"
|
||||
},
|
||||
{
|
||||
"type": "form",
|
||||
"name": "form2",
|
||||
"label": "多选",
|
||||
"multiple": true,
|
||||
"maxLength":3,
|
||||
"btnLabel": "设置子表单",
|
||||
"form": {
|
||||
"title": "配置子表单",
|
||||
"controls": [
|
||||
{
|
||||
"name": "a",
|
||||
"label": "A",
|
||||
"type": "text"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "b",
|
||||
"label": "B",
|
||||
"type": "text"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "static",
|
||||
"name": "form2",
|
||||
"label": "当前值"
|
||||
}
|
||||
]
|
||||
```
|
||||
@ -1,18 +0,0 @@
|
||||
### Switch
|
||||
|
||||
可选框，和 checkbox 完全等价。
|
||||
|
||||
- `type` 请设置成 `switch`
|
||||
- `option` 选项说明
|
||||
- `trueValue` 默认 `true`
|
||||
- `falseValue` 默认 `false`
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="200" scope="form-item"
|
||||
{
|
||||
"name": "switch",
|
||||
"type": "switch",
|
||||
"label": "Switch",
|
||||
"option": "开关说明"
|
||||
}
|
||||
```
|
||||
@ -1,110 +0,0 @@
|
||||
### Table(FormItem)
|
||||
|
||||
可以用来展现数据的,可以用来展示数组类型的数据，比如 multiple 的[子 form](./SubForm.md)。
|
||||
|
||||
- `type` 请设置成 `table`
|
||||
- `columns` 数组类型，用来定义列信息。
|
||||
|
||||
```schema:height="250" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "form",
|
||||
"name": "form",
|
||||
"label": "子Form",
|
||||
"btnLabel": "设置子表单",
|
||||
"multiple": true,
|
||||
"form": {
|
||||
"title": "配置子表单",
|
||||
"controls": [
|
||||
{
|
||||
"name": "a",
|
||||
"label": "A",
|
||||
"type": "text"
|
||||
},
|
||||
{
|
||||
"name": "b",
|
||||
"label": "B",
|
||||
"type": "text"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"type":"table",
|
||||
"name":"form",
|
||||
"columns":[
|
||||
{
|
||||
"name": "a",
|
||||
"label": "A"
|
||||
},
|
||||
{
|
||||
"name": "b",
|
||||
"label": "B"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
当然也可以用来作为表单输入。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------------------- | ----------------------- | ---------------- | ---------------------------------------- |
|
||||
| type | `string` | `"table"` | 指定为 Table 渲染器 |
|
||||
| addable | `boolean` | false | 是否可增加一行 |
|
||||
| editable | `boolean` | false | 是否可编辑 |
|
||||
| removable | `boolean` | false | 是否可删除 |
|
||||
| showAddBtn | `boolean` | true | 是否显示添加按钮 |
|
||||
| addApi | [api](../Types.md#Api) | - | 新增时提交的 API |
|
||||
| updateApi | [api](../Types.md#Api) | - | 修改时提交的 API |
|
||||
| deleteApi | [api](../Types.md#Api) | - | 删除时提交的 API |
|
||||
| addBtnLabel | `string` | | 增加按钮名称 |
|
||||
| addBtnIcon | `string` | `"fa fa-plus"` | 增加按钮图标 |
|
||||
| updateBtnLabel | `string` | `""` | 更新按钮名称 |
|
||||
| updateBtnIcon | `string` | `"fa fa-pencil"` | 更新按钮图标 |
|
||||
| deleteBtnLabel | `string` | `""` | 删除按钮名称 |
|
||||
| deleteBtnIcon | `string` | `"fa fa-minus"` | 删除按钮图标 |
|
||||
| confirmBtnLabel | `string` | `""` | 确认编辑按钮名称 |
|
||||
| confirmBtnIcon | `string` | `"fa fa-check"` | 确认编辑按钮图标 |
|
||||
| cancelBtnLabel | `string` | `""` | 取消编辑按钮名称 |
|
||||
| cancelBtnIcon | `string` | `"fa fa-times"` | 取消编辑按钮图标 |
|
||||
| columns | `array` | [] | 列信息 |
|
||||
| columns[x].quickEdit | `boolean` 或者 `object` | - | 配合 editable 为 true 一起使用 |
|
||||
| columns[x].quickEditOnUpdate | `boolean` 或者 `object` | - | 可以用来区分新建模式和更新模式的编辑配置 |
|
||||
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
- 更多 Demo 详情请参考 [表格编辑](/amis/#/form/table)
|
||||
|
||||
```schema:height="250" scope="form-item"
|
||||
{
|
||||
"type":"table",
|
||||
"name":"form",
|
||||
"editable": true,
|
||||
"addable": true,
|
||||
"removable": true,
|
||||
"label": "表格输入",
|
||||
"columns":[
|
||||
{
|
||||
"name": "a",
|
||||
"label": "A"
|
||||
},
|
||||
{
|
||||
"name": "b",
|
||||
"label": "B",
|
||||
"quickEdit": {
|
||||
"type": "select",
|
||||
"options": [
|
||||
{
|
||||
"label": "A",
|
||||
"value": "a"
|
||||
},
|
||||
{
|
||||
"label": "B",
|
||||
"value": "b"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -1,53 +0,0 @@
|
||||
### Tabs(FormItem)
|
||||
|
||||
多个输入框也可以通过选项卡来分组。
|
||||
|
||||
- `type` 请设置成 `tabs`
|
||||
- `tabs` 选项卡数组
|
||||
- `toolbar` 选项卡右上角工具栏，参考 [Tabs](../Tabs.md)
|
||||
- `toolbarClassName` 选项卡右上角工具栏 CSS 类名
|
||||
- `tabs[x].title` 标题
|
||||
- `tabs[x].controls` 表单项集合。
|
||||
- `tabs[x].body` 内容容器，跟 `controls` 二选一。
|
||||
- `tabClassName` 选项卡 CSS 类名。
|
||||
|
||||
```schema:height="500" scope="form-item"
|
||||
{
|
||||
"type": "tabs",
|
||||
"tabs": [
|
||||
{
|
||||
"title": "基本配置",
|
||||
"controls": [
|
||||
{
|
||||
"name": "a",
|
||||
"type": "text",
|
||||
"label": "文本1"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "a",
|
||||
"type": "text",
|
||||
"label": "文本2"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"title": "其他配置",
|
||||
"controls": [
|
||||
{
|
||||
"name": "c",
|
||||
"type": "text",
|
||||
"label": "文本3"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "d",
|
||||
"type": "text",
|
||||
"label": "文本4"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -1,118 +0,0 @@
|
||||
### 组合穿梭器（TabsTransfer）
|
||||
|
||||
在[穿梭器（Transfer）](./Transfer.md)的基础上扩充了左边的展示形式，支持 Tabs 的形式展示。对应的 options 的顶级数据，顶层 options 的成员支持 selectMode 配置这个 tab 下面的选项怎么展示。title 可以配置 tab 的标题。
|
||||
|
||||
比如：
|
||||
|
||||
```schema:height="450" scope="form"
|
||||
[
|
||||
{
|
||||
"label": "组合穿梭器",
|
||||
"type": "tabs-transfer",
|
||||
"name": "a",
|
||||
"sortable": true,
|
||||
"selectMode": "tree",
|
||||
"searchable": true,
|
||||
"options": [
|
||||
{
|
||||
"label": "成员",
|
||||
"selectMode": "tree",
|
||||
"children": [
|
||||
{
|
||||
"label": "法师",
|
||||
"children": [
|
||||
{
|
||||
"label": "诸葛亮",
|
||||
"value": "zhugeliang"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "战士",
|
||||
"children": [
|
||||
{
|
||||
"label": "曹操",
|
||||
"value": "caocao"
|
||||
},
|
||||
{
|
||||
"label": "钟无艳",
|
||||
"value": "zhongwuyan"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "打野",
|
||||
"children": [
|
||||
{
|
||||
"label": "李白",
|
||||
"value": "libai"
|
||||
},
|
||||
{
|
||||
"label": "韩信",
|
||||
"value": "hanxin"
|
||||
},
|
||||
{
|
||||
"label": "云中君",
|
||||
"value": "yunzhongjun"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "用户",
|
||||
"selectMode": "chained",
|
||||
"children": [
|
||||
{
|
||||
"label": "法师",
|
||||
"children": [
|
||||
{
|
||||
"label": "诸葛亮",
|
||||
"value": "zhugeliang2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "战士",
|
||||
"children": [
|
||||
{
|
||||
"label": "曹操",
|
||||
"value": "caocao2"
|
||||
},
|
||||
{
|
||||
"label": "钟无艳",
|
||||
"value": "zhongwuyan2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "打野",
|
||||
"children": [
|
||||
{
|
||||
"label": "李白",
|
||||
"value": "libai2"
|
||||
},
|
||||
{
|
||||
"label": "韩信",
|
||||
"value": "hanxin2"
|
||||
},
|
||||
{
|
||||
"label": "云中君",
|
||||
"value": "yunzhongjun2"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "static",
|
||||
"name": "transfer",
|
||||
"label": "当前值"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
更多配置请参考[穿梭器（Transfer）](./Transfer.md)。
|
||||
@ -1,38 +0,0 @@
|
||||
### Tag
|
||||
|
||||
标签输入框。
|
||||
|
||||
- `type` 请设置成 `tag`
|
||||
- `clearable` 在有值的时候是否显示一个删除图标在右侧。
|
||||
- `options` 选项配置，类型为数组，成员格式如下，或者直接为字符串，配置后用户输入内容时会作为选项提示辅助输入，可以不指定，当不指定时完全由用户手动输入。
|
||||
- `label` 文字
|
||||
- `value` 值
|
||||
- `children` 如果需要简单分组，可以考虑把选项包在某个选项的 children 里面。
|
||||
- `delimiter` 默认为 `,`，当标签在输入中，输入了这个字符时，也能自动创建一个新标签。
|
||||
- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="200" scope="form-item"
|
||||
{
|
||||
"type": "tag",
|
||||
"name": "tag",
|
||||
"label": "标签"
|
||||
}
|
||||
```
|
||||
|
||||
待选项的标签输入。
|
||||
|
||||
```schema:height="240" scope="form-item"
|
||||
{
|
||||
"type": "tag",
|
||||
"name": "tag",
|
||||
"label": "标签",
|
||||
"clearable": true,
|
||||
"options": [
|
||||
"wangzhaojun",
|
||||
"libai",
|
||||
"luna",
|
||||
"zhongkui"
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -1,55 +0,0 @@
|
||||
### Text
|
||||
|
||||
普通的文本输入框。
|
||||
|
||||
- `type` 请设置成 `text`
|
||||
- `addOn` 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。
|
||||
- `addOn.type` 请选择 `text` 、`button` 或者 `submit`。
|
||||
- `addOn.label` 文字说明
|
||||
- `addOn.xxx` 其他参数请参考按钮配置部分。
|
||||
- `hint` 当输入框获得焦点的时候显示，用来提示用户输入内容。
|
||||
- `trimContents` 是否去除首尾空白。
|
||||
- `clearable` 在有值的时候是否显示一个删除图标在右侧。
|
||||
- `resetValue` 默认为 `""`, 删除后设置此配置项给定的值。
|
||||
- `options` 可选，选项配置，类型为数组，成员格式如下，配置后用户输入内容时会作为选项提示辅助输入。
|
||||
- `label` 文字
|
||||
- `value` 值
|
||||
- `source` 通过 `options` 只能配置静态数据，如果设置了 `source` 则会从接口拉取，实现动态效果。
|
||||
- `autoComplete` 跟 `source` 不同的是，每次用户输入都会去接口获取提示。
|
||||
- `multiple` 默认为 `false`, 设置成 `true` 表示可多选。
|
||||
- `joinValues` 默认为 `true`
|
||||
- 单选模式：当用户选中某个选项时，选项中的 value 将被作为该表单项的值提交，否则，整个选项对象都会作为该表单项的值提交。
|
||||
- 多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。
|
||||
- `delimiter` 默认为 `,`
|
||||
- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="200" scope="form-item"
|
||||
{
|
||||
"type": "text",
|
||||
"name": "text",
|
||||
"label": "文本"
|
||||
}
|
||||
```
|
||||
|
||||
带提示功能
|
||||
|
||||
```schema:height="240" scope="form-item"
|
||||
{
|
||||
"type": "text",
|
||||
"name": "text",
|
||||
"label": "文本",
|
||||
"clearable": true,
|
||||
"addOn": {
|
||||
"type": "submit",
|
||||
"icon": "fa fa-search",
|
||||
"level": "primary"
|
||||
},
|
||||
"options": [
|
||||
"wangzhaojun",
|
||||
"libai",
|
||||
"luna",
|
||||
"zhongkui"
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -1,18 +0,0 @@
|
||||
### Textarea
|
||||
|
||||
多行文本输入框。
|
||||
|
||||
- `type` 请设置成 `textarea`
|
||||
- `minRows` 最小行数
|
||||
- `maxRows` 最大行数
|
||||
- `hint` 当输入框获得焦点的时候显示，用来提示用户输入内容。
|
||||
- `trimContents` 是否去除首尾空白。
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="200" scope="form-item"
|
||||
{
|
||||
"type": "textarea",
|
||||
"name": "text",
|
||||
"label": "多行文本"
|
||||
}
|
||||
```
|
||||
@ -1,31 +0,0 @@
|
||||
### Time
|
||||
|
||||
时间类型。
|
||||
|
||||
- `type` 请设置成 `time`
|
||||
- `format` 默认 `X` 即时间戳格式，用来提交的时间格式。更多格式类型请参考 [moment](http://momentjs.com/).
|
||||
- `inputFormat` 默认 `HH:mm` 用来配置显示的时间格式。
|
||||
- `timeFormat` 默认 `HH:mm` 用来配置选择的时间格式。
|
||||
- `placeholder` 默认 `请选择日期`
|
||||
- `timeConstraints` 请参考： [react-datetime](https://github.com/YouCanBookMe/react-datetime)
|
||||
- `value` 这里面 value 需要特殊说明一下，因为支持相对值。如：
|
||||
- `-2mins` 2 分钟前
|
||||
- `+2days` 2 天后
|
||||
- `-10week` 十周前
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="250" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "time",
|
||||
"name": "select",
|
||||
"label": "日期"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "static",
|
||||
"name": "select",
|
||||
"label": "当前值"
|
||||
}
|
||||
]
|
||||
```
|
||||
@ -1,126 +0,0 @@
|
||||
### 穿梭器（Transfer）
|
||||
|
||||
适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景，一般左侧框为数据/信息源，右侧为已选数据/信息，被选中信息同时存在于 2 个框内。
|
||||
|
||||
- `type` 请设置成 `transfer`
|
||||
- `options` 选项配置，类型为数组，成员格式如下。
|
||||
- `label` 文字
|
||||
- `value` 值
|
||||
- `children` 说明可以嵌套。
|
||||
- `value` 设置默认值，如果想要默认选中某个，请设置默认值。
|
||||
- `source` Api 地址，如果选项不固定，可以通过配置 `source` 动态拉取。另外也可以用 `${xxxx}` 来获取当前作用域中的变量。
|
||||
- `joinValues` 默认为 `true`
|
||||
- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 `value` 的值封装为数组，作为当前表单项的值。
|
||||
- `delimiter` 默认为 `,`
|
||||
- `searchable` 默认为 `false`，当设置为 `true` 时表示可以通过输入部分内容检索出选项。
|
||||
- `searchApi` 可选，如果想通过接口检索，可以设置个 api。
|
||||
- `statistics` 是否显示统计数据，设置为 `false` 不显示，默认为显示。
|
||||
- `selectTitle` 默认为 `请选择`，左侧的标题文字。
|
||||
- `resultTitle` 默认为 `当前选择`，右侧结果的标题文字。
|
||||
- `sortable` 默认为 `false`，开启后，结果可以进行拖拽排序。
|
||||
- `selectMode` 默认为 `list`， 可选：`list`、`table`、`tree`、`chained`、`associated`。分表为：列表形式、表格形式、树形选择形式、级联选择形式，关联选择形式（与级联选择的区别在于，级联是无限极，而关联只有一级，关联左边可以是个 tree）。
|
||||
- `searchResultMode` 如果不设置将采用 `selectMode` 的值，可以单独配置，参考 `selectMode`，决定搜索结果的展示形式。
|
||||
- `columns` 当展示形式为 `table` 可以用来配置展示哪些列，跟 table 中的 columns 配置相似，只是只有展示功能。
|
||||
- `leftOptions` 当展示形式为 `associated` 时用来配置左边的选项集。
|
||||
- `leftMode` 当展示形式为 `associated` 时用来配置左边的选择形式，支持 `list` 或者 `tree`。默认为 `list`。
|
||||
- `rightMode`当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。
|
||||
|
||||
* **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="450" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "transfer",
|
||||
"name": "transfer",
|
||||
"label": "穿梭器",
|
||||
"options": [
|
||||
{
|
||||
"label": "Option A",
|
||||
"value": "a"
|
||||
},
|
||||
{
|
||||
"label": "Option B",
|
||||
"value": "b"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "static",
|
||||
"name": "transfer",
|
||||
"label": "当前值"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
[更多示例](/examples/form/transfer)
|
||||
|
||||
### 接口说明
|
||||
|
||||
开始之前请你先阅读[整体要求](../api.md)。
|
||||
|
||||
#### source
|
||||
|
||||
**发送**
|
||||
|
||||
默认 GET，不携带数据，可从上下文中取数据设置进去。
|
||||
|
||||
**响应**
|
||||
|
||||
格式要求如下：
|
||||
|
||||
```json
|
||||
{
|
||||
"status": 0,
|
||||
"msg": "",
|
||||
"data": {
|
||||
"options": [
|
||||
{
|
||||
"label": "描述",
|
||||
"value": "值" // ,
|
||||
// "children": [] // 可以嵌套
|
||||
},
|
||||
|
||||
{
|
||||
"label": "描述2",
|
||||
"value": "值2"
|
||||
}
|
||||
],
|
||||
|
||||
"value": "值" // 默认值，可以获取列表的同时设置默认值。
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### searchApi
|
||||
|
||||
**发送**
|
||||
|
||||
默认 GET，携带 term 变量，值为搜索框输入的文字，可从上下文中取数据设置进去。
|
||||
|
||||
**响应**
|
||||
|
||||
格式要求如下：
|
||||
|
||||
```json
|
||||
{
|
||||
"status": 0,
|
||||
"msg": "",
|
||||
"data": {
|
||||
"options": [
|
||||
{
|
||||
"label": "描述",
|
||||
"value": "值" // ,
|
||||
// "children": [] // 可以嵌套
|
||||
},
|
||||
|
||||
{
|
||||
"label": "描述2",
|
||||
"value": "值2"
|
||||
}
|
||||
],
|
||||
|
||||
"value": "值" // 默认值，可以获取列表的同时设置默认值。
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,66 +0,0 @@
|
||||
### Tree
|
||||
|
||||
树形结构输入框。
|
||||
|
||||
- `type` 请设置成 `tree`
|
||||
- `options` 类似于 [select](./Select.md) 中 `options`, 并且支持通过 `children` 无限嵌套。
|
||||
- `source` Api 地址，如果选项不固定，可以通过配置 `source` 动态拉取。
|
||||
- `hideRoot` 默认为 `true`, 如果想要显示个顶级节点，请设置为 `false`
|
||||
- `rootLabel` 默认为 `顶级`，当 `hideRoot` 不为 `false` 时有用，用来设置顶级节点的文字。
|
||||
- `showIcon` 是否显示投标，默认为 `true`。
|
||||
- `showRadio` 是否显示单选按钮，`multiple` 为 `false` 是有效。
|
||||
- `initiallyOpen` 默认为`true`，设置是否默认展开所有层级。
|
||||
- `unfoldedLevel` 默认为`0`，设置默认展开的级数，只有`initiallyOpen`不是`true`时生效。
|
||||
- `cascade` 设置成 `true` 时当选中父节点时不自动选择子节点。
|
||||
- `withChildren` 是指成 `true`，选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。
|
||||
- `multiple` 默认为 `false`, 设置成 `true` 表示可多选。
|
||||
- `joinValues` 默认为 `true`
|
||||
- 单选模式：当用户选中某个选项时，选项中的 value 将被作为该表单项的值提交，否则，整个选项对象都会作为该表单项的值提交。
|
||||
- 多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。
|
||||
- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。
|
||||
- `delimiter` 默认为 `,`
|
||||
- `selfDisabledAffectChildren` 默认为 `true`，当前节点禁用是否会禁用子节点
|
||||
- `rootCreatable` 默认为 `false`， 是否可以创建顶级节点
|
||||
- `rootCreateTip` 默认为 `"添加一级节点"`， 创建顶级节点的悬浮提示
|
||||
- `creatable` 默认为 `false`，是否可以创建子节点
|
||||
- `addApi` 创建节点接口，格式参考 [api](../Types.md#api)
|
||||
- `createTip` 默认为 `"添加孩子节点"`，添加节点按钮的鼠标悬浮提示
|
||||
- `editable` 默认为 `false`，是否可以编辑节点
|
||||
- `editApi` 编辑节点接口，格式参考 [api](../Types.md#api)
|
||||
- `editTip` 默认为 `"编辑该节点"`，编辑节点按钮的鼠标悬浮提示
|
||||
- `removable` 默认为 `false`，是否可以删除节点
|
||||
- `deleteApi` 删除节点接口，格式参考 [api](../Types.md#api)
|
||||
- `removeTip` 默认为 `"移除该节点"`，删除节点按钮的鼠标悬浮提示
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="300" scope="form-item"
|
||||
{
|
||||
"type": "tree",
|
||||
"name": "tree",
|
||||
"label": "Tree",
|
||||
"options": [
|
||||
{
|
||||
"label": "Folder A",
|
||||
"value": 1,
|
||||
"children": [
|
||||
{
|
||||
"label": "file A",
|
||||
"value": 2
|
||||
},
|
||||
{
|
||||
"label": "file B",
|
||||
"value": 3
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "file C",
|
||||
"value": 4
|
||||
},
|
||||
{
|
||||
"label": "file D",
|
||||
"value": 5
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -1,52 +0,0 @@
|
||||
### TreeSelect
|
||||
|
||||
树形结构选择框。
|
||||
|
||||
- `type` 请设置成 `tree-select`
|
||||
- `options` 类似于 [select](./Select.md) 中 `options`, 并且支持通过 `children` 无限嵌套。
|
||||
- `source` Api 地址，如果选项不固定，可以通过配置 `source` 动态拉取。
|
||||
- `hideRoot` 默认是会显示一个顶级，如果不想显示，请设置 `false`
|
||||
- `rootLabel` 默认为 `顶级`，当 hideRoot 不为 `false` 时有用，用来设置顶级节点的文字。
|
||||
- `showIcon` 是否显示投标，默认为 `true`。
|
||||
- `showRadio` 是否显示单选按钮，multiple 为 `false` 是有效。
|
||||
- `cascade` 设置成 `true` 时当选中父节点时不自动选择子节点。
|
||||
- `withChildren` 是指成 `true`，选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。
|
||||
- `multiple` 默认为 `false`, 设置成 `true` 表示可多选。
|
||||
- `joinValues` 默认为 `true`
|
||||
- 单选模式：当用户选中某个选项时，选项中的 value 将被作为该表单项的值提交，否则，整个选项对象都会作为该表单项的值提交。
|
||||
- 多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。
|
||||
- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。
|
||||
- `delimiter` 默认为 `,`
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="300" scope="form-item"
|
||||
{
|
||||
"type": "tree-select",
|
||||
"name": "tree",
|
||||
"label": "Tree",
|
||||
"options": [
|
||||
{
|
||||
"label": "Folder A",
|
||||
"value": 1,
|
||||
"children": [
|
||||
{
|
||||
"label": "file A",
|
||||
"value": 2
|
||||
},
|
||||
{
|
||||
"label": "file B",
|
||||
"value": 3
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"label": "file C",
|
||||
"value": 4
|
||||
},
|
||||
{
|
||||
"label": "file D",
|
||||
"value": 5
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -1,29 +0,0 @@
|
||||
### Url
|
||||
|
||||
URL 输入框。
|
||||
|
||||
- `type` 请设置成 `url`
|
||||
- `addOn` 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。
|
||||
- `addOn.type` 请选择 `text` 、`button` 或者 `submit`。
|
||||
- `addOn.label` 文字说明
|
||||
- `addOn.xxx` 其他参数请参考按钮配置部分。
|
||||
- `hint` 当输入框获得焦点的时候显示，用来提示用户输入内容。
|
||||
- `trimContents` 是否去除首尾空白。
|
||||
- `clearable` 在有值的时候是否显示一个删除图标在右侧。
|
||||
- `resetValue` 默认为 `""`, 删除后设置此配置项给定的值。
|
||||
- `options` 可选，选项配置，类型为数组，成员格式如下，配置后用户输入内容时会作为选项提示辅助输入。
|
||||
- `label` 文字
|
||||
- `value` 值
|
||||
- `source` 通过 `options` 只能配置静态数据，如果设置了 `source` 则会从接口拉取，实现动态效果。
|
||||
- `autoComplete` 跟 `source` 不同的是，每次用户输入都会去接口获取提示。
|
||||
- `multiple` 默认为 `false`, 设置成 `true` 表示可多选。
|
||||
- **还有更多通用配置请参考** [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="200" scope="form-item"
|
||||
{
|
||||
"type": "url",
|
||||
"name": "text",
|
||||
"validateOnChange": true,
|
||||
"label": "Url"
|
||||
}
|
||||
```
|
||||
@ -1,65 +0,0 @@
|
||||
## Grid
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------- | --------------------------------- | -------- | ----------------------- |
|
||||
| type | `string` | `"grid"` | 指定为 Grid 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| columns | `Array` | | 列集合 |
|
||||
| columns[x] | [Container](./Types.md#Container) | | 成员可以是其他渲染器 |
|
||||
| columns[x].xs | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].xsHidden | `boolean` | | 是否隐藏 |
|
||||
| columns[x].xsOffset | `int` | | 偏移量 1 - 12 |
|
||||
| columns[x].xsPull | `int` | | 靠左的距离占比：1 - 12 |
|
||||
| columns[x].xsPush | `int` | | 靠右的距离占比： 1 - 12 |
|
||||
| columns[x].sm | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].smHidden | `boolean` | | 是否隐藏 |
|
||||
| columns[x].smOffset | `int` | | 偏移量 1 - 12 |
|
||||
| columns[x].smPull | `int` | | 靠左的距离占比：1 - 12 |
|
||||
| columns[x].smPush | `int` | | 靠右的距离占比： 1 - 12 |
|
||||
| columns[x].md | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].mdHidden | `boolean` | | 是否隐藏 |
|
||||
| columns[x].mdOffset | `int` | | 偏移量 1 - 12 |
|
||||
| columns[x].mdPull | `int` | | 靠左的距离占比：1 - 12 |
|
||||
| columns[x].mdPush | `int` | | 靠右的距离占比： 1 - 12 |
|
||||
| columns[x].lg | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].lgHidden | `boolean` | | 是否隐藏 |
|
||||
| columns[x].lgOffset | `int` | | 偏移量 1 - 12 |
|
||||
| columns[x].lgPull | `int` | | 靠左的距离占比：1 - 12 |
|
||||
| columns[x].lgPush | `int` | | 靠右的距离占比： 1 - 12 |
|
||||
|
||||
更多使用说明，请参看 [Grid Props](https://react-bootstrap.github.io/layout/grid/#col-props)
|
||||
|
||||
```schema:height="300" scope="body"
|
||||
[
|
||||
{
|
||||
"type": "grid",
|
||||
"className": "b-a bg-dark lter",
|
||||
"columns": [
|
||||
{
|
||||
"type": "plain",
|
||||
"text": "md: 3",
|
||||
"md": 3,
|
||||
"className": "b-r"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "plain",
|
||||
"text": "md: 9",
|
||||
"md": 9
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "grid",
|
||||
"className": "b-a m-t bg-dark lter",
|
||||
"columns": [
|
||||
{
|
||||
"type": "plain",
|
||||
"text": "mdOffset: 3",
|
||||
"mdOffset": 3
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
@ -1,40 +0,0 @@
|
||||
## HBox
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| -------------------------- | --------------------------------- | -------------- | -------------------- |
|
||||
| type | `string` | `"hbox"` | 指定为 HBox 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| columns | `Array` | | 列集合 |
|
||||
| columns[x] | [Container](./Types.md#Container) | | 成员可以是其他渲染器 |
|
||||
| columns[x].columnClassName | `string` | `"wrapper-xs"` | 列上类名 |
|
||||
|
||||
```schema:height="300" scope="body"
|
||||
[
|
||||
{
|
||||
"type": "hbox",
|
||||
"className": "b-a bg-dark lter",
|
||||
"columns": [
|
||||
{
|
||||
"type": "plain",
|
||||
"text": "Col A",
|
||||
"columnClassName": "wrapper-xs b-r"
|
||||
},
|
||||
|
||||
"Col B"
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "hbox",
|
||||
"className": "b-a m-t bg-dark lter",
|
||||
"columns": [
|
||||
{
|
||||
"type": "plain",
|
||||
"text": "w-md",
|
||||
"columnClassName": "w-md wrapper-xs bg-primary b-r"
|
||||
},
|
||||
"..."
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
@ -1,14 +0,0 @@
|
||||
|
||||
HTML
|
||||
=================
|
||||
|
||||
当需要用到变量时，请用 [Tpl](./Tpl.md) 代替。
|
||||
|
||||
```schema:height="200"
|
||||
{
|
||||
"body": {
|
||||
"type": "html",
|
||||
"html": "支持 Html <code>Html</code>"
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,24 +0,0 @@
|
||||
## JSON
|
||||
|
||||
可以用来显示深层嵌套的 JSON 内容。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------- | -------- | ------------ | ---------------------------------------------- |
|
||||
| type | `string` | `"json"` | 指定为 JSON 渲染器 |
|
||||
| name | `string` | | 用于 CRUD 或 Form 中，通过这个 name 来获取数值 |
|
||||
| jsonTheme | `string` | `"twilight"` | 颜色主题，还有一个是 `"eighties"` |
|
||||
| levelExpand | `number` | 1 | 默认展开的层级 |
|
||||
|
||||
```schema:height="150" scope="body"
|
||||
{
|
||||
"type": "json",
|
||||
"levelExpand": 2,
|
||||
"value": {
|
||||
"name": "amis",
|
||||
"source": {
|
||||
"github": "https://github.com/baidu/amis"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
@ -1,85 +0,0 @@
|
||||
## List
|
||||
|
||||
列表展示。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------------ | -------------------------------- | --------------------- | ------------------------------------------ |
|
||||
| type | `string` | | `"list"` 指定为列表展示。 |
|
||||
| title | `string` | | 标题 |
|
||||
| source | `string` | `${items}` | 数据源, 绑定当前环境变量 |
|
||||
| placeholder | string | ‘暂无数据’ | 当没数据的时候的文字提示 |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| headerClassName | `string` | `amis-list-header` | 顶部外层 CSS 类名 |
|
||||
| footerClassName | `string` | `amis-list-footer` | 底部外层 CSS 类名 |
|
||||
| listItem | `Array` | | 配置单条信息 |
|
||||
| listItem.title | `string` | | 标题，支持模板语法如： \${xxx} |
|
||||
| listItem.titleClassName | `string` | `h5` | 标题 CSS 类名 |
|
||||
| listItem.subTitle | `string` | | 副标题，支持模板语法如： \${xxx} |
|
||||
| listItem.avatar | `string` | | 图片地址，支持模板语法如： \${xxx} |
|
||||
| listItem.avatarClassName | `string` | `thumb-sm avatar m-r` | 图片 CSS 类名 |
|
||||
| listItem.desc | `string` | | 描述，支持模板语法如： \${xxx} |
|
||||
| listItem.body | `Array` 或者 [Field](./Field.md) | | 内容容器，主要用来放置 [Field](./Field.md) |
|
||||
| listItem.actions | Array Of [Button](./Form/Button.md) | | 按钮区域 |
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/sample?perPage=5",
|
||||
"body": [
|
||||
{
|
||||
"type": "panel",
|
||||
"title": "简单 List 示例",
|
||||
"body": {
|
||||
"type": "list",
|
||||
"source": "$rows",
|
||||
"listItem": {
|
||||
"body": [
|
||||
{
|
||||
"type": "hbox",
|
||||
"columns": [
|
||||
{
|
||||
"label": "Engine",
|
||||
"name": "engine"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Version"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
"actions": [
|
||||
{
|
||||
"type": "button",
|
||||
"level": "link",
|
||||
"icon": "fa fa-eye",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "查看详情",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
{
|
||||
"label": "Engine",
|
||||
"name": "engine",
|
||||
"type": "static"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Version",
|
||||
"type": "static"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -1,120 +0,0 @@
|
||||
## Nav
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------------- | ----------------- | -------- | ------------------------------------------- |
|
||||
| type | `string` | `"tabs"` | 指定为 Nav 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| stacked | `boolean` | `true` | 设置成 false 可以以 tabs 的形式展示 |
|
||||
| source | `Api` 或 `string` | | 动态拉取的 api 地址，也支持`${xxx}`获取变量 |
|
||||
| links | `Array` | | 链接集合 |
|
||||
| links[x].label | `string` | | 名称 |
|
||||
| links[x].to | `string` | | 链接地址 |
|
||||
| links[x].icon | `string` | | 图标 |
|
||||
| links[x].active | `boolean` | | 是否高亮 |
|
||||
| links[x].activeOn | `表达式` | | 是否高亮的条件，留空将自动分析链接地址 |
|
||||
|
||||
链接集合。
|
||||
|
||||
```schema:height="300" scope="body"
|
||||
{
|
||||
"type": "nav",
|
||||
"stacked": true,
|
||||
"className": "w-md",
|
||||
"links": [
|
||||
{
|
||||
"label": "Nav 1",
|
||||
"to": "/docs/index",
|
||||
"icon": "fa fa-user",
|
||||
"active": true
|
||||
},
|
||||
|
||||
{
|
||||
"label": "Nav 2",
|
||||
"to": "/docs/api"
|
||||
},
|
||||
|
||||
{
|
||||
"label": "Nav 3",
|
||||
"to": "/docs/renderers"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
```schema:height="300" scope="body"
|
||||
{
|
||||
"type": "nav",
|
||||
"stacked": false,
|
||||
"links": [
|
||||
{
|
||||
"label": "Nav 1",
|
||||
"to": "/docs/index",
|
||||
"icon": "fa fa-user"
|
||||
},
|
||||
|
||||
{
|
||||
"label": "Nav 2",
|
||||
"to": "/docs/api"
|
||||
},
|
||||
|
||||
{
|
||||
"label": "Nav 3",
|
||||
"to": "/docs/renderers"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## source 返回格式
|
||||
|
||||
```json
|
||||
{
|
||||
"status": 0,
|
||||
"msg": "",
|
||||
"data": [
|
||||
{
|
||||
"label": "Nav 1",
|
||||
"to": "/docs/index",
|
||||
"icon": "fa fa-user"
|
||||
},
|
||||
|
||||
{
|
||||
"label": "Nav 2",
|
||||
"to": "/docs/api"
|
||||
},
|
||||
|
||||
{
|
||||
"label": "Nav 3",
|
||||
"to": "/docs/renderers"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
或者
|
||||
|
||||
```json
|
||||
{
|
||||
"status": 0,
|
||||
"msg": "",
|
||||
"data": {
|
||||
"links": [ // 可选字段值：options, items, rows
|
||||
{
|
||||
"label": "Nav 1",
|
||||
"to": "/docs/index",
|
||||
"icon": "fa fa-user"
|
||||
},
|
||||
|
||||
{
|
||||
"label": "Nav 2",
|
||||
"to": "/docs/api"
|
||||
},
|
||||
|
||||
{
|
||||
"label": "Nav 3",
|
||||
"to": "/docs/renderers"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,7 +0,0 @@
|
||||
### Operation
|
||||
|
||||
表格列中的操作栏，用来放置按钮集合，只能放在 table 的列配置中。
|
||||
|
||||
- `type` 请设置成 `operation`。
|
||||
- `label` 列标题。
|
||||
- `buttons` 按钮集合，请参考[Button](./Form/Button.md) 按钮配置说明。
|
||||
@ -1,83 +0,0 @@
|
||||
## Page
|
||||
|
||||
页面渲染器，他主要包含标题，副标题，提示信息等设置，需要注意的是，他有三个容器区域分别是：内容区、边栏区和工具条区，在容器里面放不同的渲染器，就能配置出不同的页面来。
|
||||
|
||||
可以配置 `initApi` 从远端拉取数据，拉取的数据可以在整个页面级别使用。
|
||||
|
||||
```schema:height="200"
|
||||
{
|
||||
"type": "page",
|
||||
"title": "Title",
|
||||
"subTitle": "SubTitle",
|
||||
"remark": "Remark",
|
||||
"aside": "Aside",
|
||||
"body": "时间: ${date | date}",
|
||||
"toolbar": "Toolbar",
|
||||
"initApi": "/api/mock2/service/data"
|
||||
}
|
||||
```
|
||||
|
||||
> PS: 代码支持及时编辑预览
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------- | --------------------------------- | ------------------------------------------ | ----------------------------------------------------------------------------------- |
|
||||
| type | `string` | `"page"` | 指定为 Page 渲染器。 |
|
||||
| title | `string` | | 页面标题 |
|
||||
| subTitle | `string` | | 页面副标题 |
|
||||
| remark | `string` | | 标题附近会出现一个提示图标，鼠标放上去会提示该内容。 |
|
||||
| aside | [Container](./Types.md#Container) | | 往页面的边栏区域加内容 |
|
||||
| toolbar | [Container](./Types.md#Container) | | 往页面的右上角加内容，需要注意的是，当有 Title 是，区域在右上角，没有时区域就在顶部 |
|
||||
| body | [Container](./Types.md#Container) | | 往页面的内容区域加内容 |
|
||||
| className | `string` | | 外层 dom 类名 |
|
||||
| toolbarClassName | `string` | `v-middle wrapper text-right bg-light b-b` | Toolbar dom 类名 |
|
||||
| bodyClassName | `string` | `wrapper` | Body dom 类名 |
|
||||
| asideClassName | `string` | `w page-aside-region bg-auto` | Aside dom 类名 |
|
||||
| headerClassName | `string` | `bg-light b-b wrapper` | Header 区域 dom 类名 |
|
||||
| initApi | [Api](./Types.md#Api) | | Page 用来获取初始数据的 api。返回的数据可以整个 page 级别使用。 |
|
||||
| initFetch | `boolean` | `true` | 是否起始拉取 initApi |
|
||||
| initFetchOn | `string` | | 是否起始拉取 initApi, 通过表达式配置 |
|
||||
| interval | `number` | `3000` | 刷新时间(最低 3000)，单位是毫秒 |
|
||||
| silentPolling | `boolean` | `false` | 配置刷新时是否隐藏加载动画 |
|
||||
| stopAutoRefreshWhen | `string` | `""` | 通过[表达式](./Types.md#表达式)来配置停止刷新的条件 |
|
||||
|
||||
### 接口说明
|
||||
|
||||
开始之前请你先阅读[整体要求](../api.md)。
|
||||
|
||||
#### initApi
|
||||
|
||||
Page 渲染器可以配置 initApi 来拉取后端数据。
|
||||
|
||||
**发送：**
|
||||
|
||||
默认不发送任何参数，如果有需要，在这可以取地址栏上的参数，假如地址栏携带了 id=1 这个参数, 那么接口这么配置就能把 id 作为 query 参数发送给后端。
|
||||
|
||||
```json
|
||||
{
|
||||
"initApi": "/api/xxx?id=${id}"
|
||||
}
|
||||
```
|
||||
|
||||
**响应：**
|
||||
|
||||
data 返回是对象即可。
|
||||
|
||||
```json
|
||||
{
|
||||
"status": 0,
|
||||
"msg": "",
|
||||
"data": {
|
||||
"a": 1
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
当配置了 initApi 且返回如上数据后，当前 page 渲染器，以及所有孩子渲染器都能取到这个这个变量了如：
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "page",
|
||||
"initApi": "/api/xxx",
|
||||
"body": "${a}"
|
||||
}
|
||||
```
|
||||
@ -1,49 +0,0 @@
|
||||
## Panel
|
||||
|
||||
可以把相关信息以盒子的形式展示到一块。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | --------------------------------- | -------------------------------------- | ------------------- |
|
||||
| type | `string` | `"panel"` | 指定为 Panel 渲染器 |
|
||||
| className | `string` | `"panel-default"` | 外层 Dom 的类名 |
|
||||
| headerClassName | `string` | `"panel-heading"` | header 区域的类名 |
|
||||
| footerClassName | `string` | `"panel-footer bg-light lter wrapper"` | footer 区域的类名 |
|
||||
| actionsClassName | `string` | `"panel-footer"` | actions 区域的类名 |
|
||||
| bodyClassName | `string` | `"panel-body"` | body 区域的类名 |
|
||||
| title | `string` | | 标题 |
|
||||
| header | [Container](./Types.md#container) | | 顶部容器 |
|
||||
| body | [Container](./Types.md#container) | | 内容容器 |
|
||||
| footer | [Container](./Types.md#container) | | 底部容器 |
|
||||
| affixFooter | `boolean` | | 是否固定底部容器 |
|
||||
| actions | Array Of [Button](./Button.md) | | 按钮区域 |
|
||||
|
||||
```schema:height="300" scope="body"
|
||||
{
|
||||
"type": "panel",
|
||||
"title": "Panel Heading",
|
||||
"body": "Panel Body",
|
||||
"actions": [
|
||||
{
|
||||
"type": "button",
|
||||
"label": "Action 1",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"confirmMode": false,
|
||||
"title": "提示",
|
||||
"body": "对，你刚点击了！"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"type": "button",
|
||||
"label": "Action 2",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"confirmMode": false,
|
||||
"title": "提示",
|
||||
"body": "对，你刚点击了！"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -1,12 +0,0 @@
|
||||
## Plain
|
||||
|
||||
plain, 单纯的文字输出来，像 [tpl](./Tpl.md) 一样支持变量，区别在于内容不支持 html 标签。
|
||||
|
||||
```schema:height="200"
|
||||
{
|
||||
"body": {
|
||||
"type": "plain",
|
||||
"text": "Pure Text <html>"
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,24 +0,0 @@
|
||||
## QRCode
|
||||
|
||||
二维码显示组件
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | -------- | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
|
||||
| type | `string` | `"qr-code"` | 指定为 QRCode 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| codeSize | `number` | `128` | 二维码的宽高大小 |
|
||||
| backgroundColor | `string` | `"#fff"` | 二维码背景色 |
|
||||
| foregroundColor | `string` | `"#000"` | 二维码前景色 |
|
||||
| level | `string` | `"L"` | 二维码复杂级别，有（'L' 'M' 'Q' 'H'）四种 |
|
||||
| value | `string` | `"https://www.baidu.com"` | 扫描二维码后显示的文本，如果要显示某个页面请输入完整 url（`"http://..."`或`"https://..."`开头），支持使用 `${xxx}` 来获取变量 |
|
||||
|
||||
```schema:height="300" scope="body"
|
||||
{
|
||||
"type": "qr-code",
|
||||
"codeSize": 128,
|
||||
"backgroundColor": "#fff",
|
||||
"foregroundColor": "#000",
|
||||
"level": "L",
|
||||
"value": "https://www.baidu.com"
|
||||
}
|
||||
```
|
||||
@ -1,46 +0,0 @@
|
||||
## Service
|
||||
|
||||
功能型容器，自身不负责展示内容，主要职责在于通过配置的 api 拉取数据，数据可用于子组件。
|
||||
该组件初始化时就会自动拉取一次数据，后续如果需要刷新，请结合 Action 实现，可以把 Action 的 actionType 设置为 reload, target 为该组件的 name 值。
|
||||
同时该组件，还支持 api 数值自动监听，比如 `getData?type=$type` 只要当前环境 type 值发生变化，就会自动重新拉取。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------------- | --------------------------------- | -------------- | ------------------------------------------------------------------- |
|
||||
| type | `string` | `"service"` | 指定为 service 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| body | [Container](./Types.md#container) | | 内容容器 |
|
||||
| api | [api](./Types.md#Api) | | 数据源 API 地址 |
|
||||
| initFetch | `boolean` | | 是否默认拉取 |
|
||||
| schemaApi | [api](./Types.md#Api) | | 用来获取远程 Schema 的 api |
|
||||
| initFetchSchema | `boolean` | | 是否默认拉取 Schema |
|
||||
| messages | `Object` | | 消息提示覆写，默认消息读取的是 API 返回的消息，但是在此可以覆写它。 |
|
||||
| messages.fetchSuccess | `string` | | 获取成功时提示 |
|
||||
| messages.fetchFailed | `string` | `"初始化失败"` | 获取失败时提示 |
|
||||
| interval | `number` | `3000` | 刷新时间(最低 3000)，单位是毫秒 |
|
||||
| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 |
|
||||
| stopAutoRefreshWhen | `string` | `""` | 通过[表达式](./Types.md#表达式)来配置停止刷新的条件 |
|
||||
|
||||
```schema:height="200" scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/page/initData",
|
||||
"body": {
|
||||
"type": "panel",
|
||||
"title": "$title",
|
||||
"body": "现在是：${date}"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 动态配置
|
||||
|
||||
Service 还有个重要的功能就是支持配置 `schemaApi`，通过它可以实现动态渲染。
|
||||
|
||||
```schema:height="200" scope="body"
|
||||
{
|
||||
"name": "service1",
|
||||
"type": "service",
|
||||
"className": "m-t",
|
||||
"schemaApi": "/api/mock2/service/schema?type=tabs"
|
||||
}
|
||||
```
|
||||
@ -1,46 +0,0 @@
|
||||
### Static
|
||||
|
||||
纯用来展现数据的。
|
||||
|
||||
- `type` 请设置成 `static`
|
||||
- `name` 变量名。
|
||||
- `value` 值，可以通过它设置默认值。
|
||||
- `label` 描述标题，当表单为水平布局时，左边即便是不设置 label 为了保持对齐也会留空，如果想要去掉空白，请设置成 `false`。
|
||||
- `description` 描述内容。
|
||||
- `placeholder` 占位内容，默认 `-`。
|
||||
- `inline` 是否为 inline 模式。
|
||||
- `className` 表单最外层类名。
|
||||
- `visible` 是否可见。
|
||||
- `visibleOn` 通过[表达式](./Types.md#表达式)来配置当前表单项是否显示。
|
||||
- `hidden` 是否隐藏，不要跟 `visible` `visibleOn` 同时配置
|
||||
- `hiddenOn` 通过[表达式](./Types.md#表达式)来配置当前表单项是否隐藏。
|
||||
- `inputClassName` 表单控制器类名。
|
||||
- `labelClassName` label 的类名。
|
||||
- `tpl` 如果想一次展示多条数据，可以考虑用 `tpl`，模板引擎是 lodash template，同时你还可以简单用 `$` 取值。 具体请查看 [tpl](./Tpl.md)
|
||||
|
||||
```schema:height="250" scope="form-item"
|
||||
{
|
||||
"type": "static",
|
||||
"name": "select",
|
||||
"label": "Label",
|
||||
"value": "A"
|
||||
}
|
||||
```
|
||||
|
||||
### Static-XXX
|
||||
|
||||
- `type` 请设置成 `static-tpl`、`static-plain`、`static-json`、`static-date`、`static-datetime`、`static-time`、`static-mapping`、`static-image`、`static-progress`、`static-status`或者`static-switch`
|
||||
|
||||
纯用来展示数据的，用法跟 crud 里面的[Column](./Column.md)一样, 且支持 quickEdit 和 popOver 功能。
|
||||
|
||||
```schema:height="250" scope="form-item"
|
||||
{
|
||||
"type": "static-json",
|
||||
"name": "json",
|
||||
"label": "Label",
|
||||
"value": {
|
||||
"a":"dd",
|
||||
"b":"asdasd"
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,593 +0,0 @@
|
||||
## Table
|
||||
|
||||
表格展示，不负责拉取数据，所以你需要配置 source 用来关联数据，一般需要搭配其他具备获取接口数据能力的渲染器一起使用，比如: Page 的 initApi 或者 Service 的 api。有了数据后，配置 columns 就能完成渲染了。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | ----------------------------- | ------------------------- | ------------------------------------------------------- |
|
||||
| type | `string` | | `"type"` 指定为 table 渲染器 |
|
||||
| title | `string` | | 标题 |
|
||||
| source | `string` | `${items}` | 数据源, 绑定当前环境变量 |
|
||||
| affixHeader | `boolean` | `true` | 是否固定表头 |
|
||||
| columnsTogglable | `auto` 或者 `boolean` | `auto` | 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启 |
|
||||
| placeholder | string | `暂无数据` | 当没数据的时候的文字提示 |
|
||||
| className | `string` | `panel-default` | 外层 CSS 类名 |
|
||||
| tableClassName | `string` | `table-db table-striped` | 表格 CSS 类名 |
|
||||
| headerClassName | `string` | `Action.md-table-header` | 顶部外层 CSS 类名 |
|
||||
| footerClassName | `string` | `Action.md-table-footer` | 底部外层 CSS 类名 |
|
||||
| toolbarClassName | `string` | `Action.md-table-toolbar` | 工具栏 CSS 类名 |
|
||||
| columns | Array of [Column](./Column.md)| | 用来设置列信息 |
|
||||
| combineNum | `number` | | 自动合并单元格 |
|
||||
|
||||
```schema:height="700" scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/sample?perPage=5",
|
||||
"body": [
|
||||
{
|
||||
"type": "table",
|
||||
"title": "表格1",
|
||||
"source": "$rows",
|
||||
"columns": [
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Engine"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Version"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "table",
|
||||
"source": "$rows",
|
||||
"columns": [
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Engine"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Version"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 列开关
|
||||
|
||||
默认 `columnsTogglable` 配置为 `auto`，当列超过 5 列后，就会在工具栏多渲染出来一个列展示与否的开关。你可以设置成 `true` 或者 `false` 来强制开或者关。在列配置中可以通过配置 `toggled` 为 `false` 默认不展示这列，比如下面这个栗子中 ID 这一栏。
|
||||
|
||||
```schema:height="330" scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/sample?perPage=5",
|
||||
"body": [
|
||||
{
|
||||
"type": "table",
|
||||
"source": "$rows",
|
||||
"className": "m-b-none",
|
||||
"columns": [
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Engine"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "Grade"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Version"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"toggled": false
|
||||
},
|
||||
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 嵌套
|
||||
|
||||
当行数据中存在 children 属性时，可以自动嵌套显示下去。示例：https://baidu.github.io/amis/crud/nested?page=1
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"data": {
|
||||
"rows": [
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "Internet Explorer 4.0",
|
||||
"platform": "Win 95+",
|
||||
"version": "4",
|
||||
"grade": "X",
|
||||
"id": 1,
|
||||
"children": [
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "Internet Explorer 4.0",
|
||||
"platform": "Win 95+",
|
||||
"version": "4",
|
||||
"grade": "X",
|
||||
"id": 1001
|
||||
},
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "Internet Explorer 5.0",
|
||||
"platform": "Win 95+",
|
||||
"version": "5",
|
||||
"grade": "C",
|
||||
"id": 1002
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "Internet Explorer 5.0",
|
||||
"platform": "Win 95+",
|
||||
"version": "5",
|
||||
"grade": "C",
|
||||
"id": 2,
|
||||
"children": [
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "Internet Explorer 4.0",
|
||||
"platform": "Win 95+",
|
||||
"version": "4",
|
||||
"grade": "X",
|
||||
"id": 2001
|
||||
},
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "Internet Explorer 5.0",
|
||||
"platform": "Win 95+",
|
||||
"version": "5",
|
||||
"grade": "C",
|
||||
"id": 2002
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "Internet Explorer 5.5",
|
||||
"platform": "Win 95+",
|
||||
"version": "5.5",
|
||||
"grade": "A",
|
||||
"id": 3,
|
||||
"children": [
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "Internet Explorer 4.0",
|
||||
"platform": "Win 95+",
|
||||
"version": "4",
|
||||
"grade": "X",
|
||||
"id": 3001
|
||||
},
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "Internet Explorer 5.0",
|
||||
"platform": "Win 95+",
|
||||
"version": "5",
|
||||
"grade": "C",
|
||||
"id": 3002
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "Internet Explorer 6",
|
||||
"platform": "Win 98+",
|
||||
"version": "6",
|
||||
"grade": "A",
|
||||
"id": 4,
|
||||
"children": [
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "Internet Explorer 4.0",
|
||||
"platform": "Win 95+",
|
||||
"version": "4",
|
||||
"grade": "X",
|
||||
"id": 4001
|
||||
},
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "Internet Explorer 5.0",
|
||||
"platform": "Win 95+",
|
||||
"version": "5",
|
||||
"grade": "C",
|
||||
"id": 4002
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "Internet Explorer 7",
|
||||
"platform": "Win XP SP2+",
|
||||
"version": "7",
|
||||
"grade": "A",
|
||||
"id": 5,
|
||||
"children": [
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "Internet Explorer 4.0",
|
||||
"platform": "Win 95+",
|
||||
"version": "4",
|
||||
"grade": "X",
|
||||
"id": 5001
|
||||
},
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "Internet Explorer 5.0",
|
||||
"platform": "Win 95+",
|
||||
"version": "5",
|
||||
"grade": "C",
|
||||
"id": 5002
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"body": [
|
||||
{
|
||||
"type": "table",
|
||||
"source": "$rows",
|
||||
"className": "m-b-none",
|
||||
"columnsTogglable": false,
|
||||
"columns": [
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Engine"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "Grade"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Version"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 底部展示 (Footable)
|
||||
|
||||
列太多时，内容没办法全部显示完，可以让部分信息在底部显示，可以让用户展开查看详情。配置很简单，只需要开启 `footable` 属性，同时将想在底部展示的列加个 `breakpoint` 属性为 `*` 即可。
|
||||
|
||||
示例：https://baidu.github.io/amis/crud/footable?page=1
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/sample?perPage=5",
|
||||
"body": [
|
||||
{
|
||||
"type": "table",
|
||||
"source": "$rows",
|
||||
"className": "m-b-none",
|
||||
"columnsTogglable": false,
|
||||
"footable": true,
|
||||
"columns": [
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Engine"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "Grade"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Version",
|
||||
"breakpoint": "*"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"breakpoint": "*"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"breakpoint": "*"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform",
|
||||
"breakpoint": "*"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
默认都不会展开，如果你想默认展开第一个就把 footable 配置成这样。
|
||||
|
||||
```json
|
||||
{
|
||||
"footable": {
|
||||
"expand": "first"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
当配置成 `all` 时表示全部展开。
|
||||
|
||||
|
||||
### 合并单元格
|
||||
|
||||
只需要配置 `combineNum` 属性即可，他表示从左到右多少列内启动自动合并单元格，只要多行的同一个属性值是一样的，就会自动合并。
|
||||
|
||||
示例：https://baidu.github.io/amis/crud/merge-cell
|
||||
|
||||
```schema:height="500" scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"data": {
|
||||
"rows": [
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "Internet Explorer 4.2",
|
||||
"platform": "Win 95+",
|
||||
"version": "4",
|
||||
"grade": "A"
|
||||
},
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "Internet Explorer 4.2",
|
||||
"platform": "Win 95+",
|
||||
"version": "4",
|
||||
"grade": "B"
|
||||
},
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "AOL browser (AOL desktop)",
|
||||
"platform": "Win 95+",
|
||||
"version": "4",
|
||||
"grade": "C"
|
||||
},
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "AOL browser (AOL desktop)",
|
||||
"platform": "Win 98",
|
||||
"version": "3",
|
||||
"grade": "A"
|
||||
},
|
||||
{
|
||||
"engine": "Trident",
|
||||
"browser": "AOL browser (AOL desktop)",
|
||||
"platform": "Win 98",
|
||||
"version": "4",
|
||||
"grade": "A"
|
||||
},
|
||||
{
|
||||
"engine": "Gecko",
|
||||
"browser": "Firefox 1.0",
|
||||
"platform": "Win 98+ / OSX.2+",
|
||||
"version": "4",
|
||||
"grade": "A"
|
||||
},
|
||||
{
|
||||
"engine": "Gecko",
|
||||
"browser": "Firefox 1.0",
|
||||
"platform": "Win 98+ / OSX.2+",
|
||||
"version": "5",
|
||||
"grade": "A"
|
||||
},
|
||||
{
|
||||
"engine": "Gecko",
|
||||
"browser": "Firefox 2.0",
|
||||
"platform": "Win 98+ / OSX.2+",
|
||||
"version": "5",
|
||||
"grade": "B"
|
||||
},
|
||||
{
|
||||
"engine": "Gecko",
|
||||
"browser": "Firefox 2.0",
|
||||
"platform": "Win 98+ / OSX.2+",
|
||||
"version": "5",
|
||||
"grade": "C"
|
||||
},
|
||||
{
|
||||
"engine": "Gecko",
|
||||
"browser": "Firefox 2.0",
|
||||
"platform": "Win 98+ / OSX.2+",
|
||||
"version": "5",
|
||||
"grade": "D"
|
||||
}
|
||||
]
|
||||
},
|
||||
"body": [
|
||||
{
|
||||
"type": "table",
|
||||
"source": "$rows",
|
||||
"className": "m-b-none",
|
||||
"combineNum": 3,
|
||||
"columnsTogglable": false,
|
||||
"columns": [
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine"
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser"
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 超级表头
|
||||
|
||||
超级表头意思是，表头还可以再一次进行分组。额外添加个 `groupName` 属性即可。
|
||||
|
||||
示例：https://baidu.github.io/amis/crud/header-group
|
||||
|
||||
```schema:height="430" scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/sample?perPage=5",
|
||||
"body": [
|
||||
{
|
||||
"type": "table",
|
||||
"source": "$rows",
|
||||
"className": "m-b-none",
|
||||
"columns": [
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Engine",
|
||||
"groupName": "分组1"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "Grade",
|
||||
"groupName": "分组1"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Version",
|
||||
"groupName": "分组2"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"groupName": "分组2"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"toggled": false,
|
||||
"groupName": "分组2"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform",
|
||||
"groupName": "分组2"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 固定列
|
||||
|
||||
列太多可以让重要的几列固定，可以配置固定在左侧还是右侧，只需要给需要固定的列上配置 `fixed` 属性，配置 `left` 或者 `right`。
|
||||
|
||||
示例：https://baidu.github.io/amis/crud/fixed
|
||||
|
||||
```schema:height="530" scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/sample?perPage=5",
|
||||
"className": "w-xxl",
|
||||
"body": [
|
||||
{
|
||||
"type": "table",
|
||||
"source": "$rows",
|
||||
"className": "m-b-none",
|
||||
"columnsTogglable": false,
|
||||
"columns": [
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Engine",
|
||||
"fixed": "left"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "Grade"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Version"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform",
|
||||
"fixed": "right"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -1,62 +0,0 @@
|
||||
## Tabs
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------------- | --------------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------- |
|
||||
| type | `string` | `"tabs"` | 指定为 Tabs 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| tabsClassName | `string` | | Tabs Dom 的类名 |
|
||||
| activeKey | `number`或`string` | | 配置默认展示的 tab。配置`tabs`中`tab` 的`hash`值，或者配置需要展示第`n`个 `tab`，`0` 是第一个 |
|
||||
| tabs | `Array` | | tabs 内容 |
|
||||
| toolbar | [Container](./Types.md#container) | | tabs 中的工具栏 |
|
||||
| toolbarClassName | `string` | | tabs 中工具栏的类名 |
|
||||
| tabs[x].title | `string` | | Tab 标题 |
|
||||
| tabs[x].icon | `icon` | | Tab 的图标 |
|
||||
| tabs[x].tab | [Container](./Types.md#container) | | 内容区 |
|
||||
| tabs[x].hash | `string` | | 设置以后将跟 url 的 hash 对应 |
|
||||
| tabs[x].reload | `boolean` | | 设置以后内容每次都会重新渲染，对于 crud 的重新拉取很有用 |
|
||||
| tabs[x].unmountOnExit | `boolean` | | 每次退出都会销毁当前 tab 栏内容 |
|
||||
| tabs[x].className | `string` | `"bg-white b-l b-r b-b wrapper-md"` | Tab 区域样式 |
|
||||
|
||||
```schema:height="500" scope="body"
|
||||
[
|
||||
{
|
||||
"type": "tabs",
|
||||
"tabs": [
|
||||
{
|
||||
"title": "Tab 1",
|
||||
"tab": "Content 1"
|
||||
},
|
||||
|
||||
{
|
||||
"title": "Tab 2",
|
||||
"tab": "Content 2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "tabs",
|
||||
"toolbar": [
|
||||
{
|
||||
"type": "button",
|
||||
"label": "按钮",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "弹窗标题",
|
||||
"body": "你点击了"
|
||||
}
|
||||
}
|
||||
],
|
||||
"tabs": [
|
||||
{
|
||||
"title": "Tab 1",
|
||||
"tab": "Content 1"
|
||||
},
|
||||
|
||||
{
|
||||
"title": "Tab 2",
|
||||
"tab": "Content 2"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
@ -1,64 +0,0 @@
|
||||
## Tasks
|
||||
|
||||
任务操作集合，类似于 orp 上线。
|
||||
|
||||
```schema:height="300" scope="body"
|
||||
{
|
||||
"type": "tasks",
|
||||
"name": "tasks",
|
||||
"items": [
|
||||
{
|
||||
"label": "hive 任务",
|
||||
"key": "hive",
|
||||
"status": 4,
|
||||
"remark": "查看详情<a target=\"_blank\" href=\"http://www.baidu.com\">日志</a>。"
|
||||
},
|
||||
{
|
||||
"label": "小流量",
|
||||
"key": "partial",
|
||||
"status": 4
|
||||
},
|
||||
{
|
||||
"label": "全量",
|
||||
"key": "full",
|
||||
"status": 4
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------------- | --------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| type | `string` | `"tasks"` | 指定为 Tasks 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| tableClassName | `string` | | table Dom 的类名 |
|
||||
| items | `Array` | | 任务列表 |
|
||||
| items[x].label | `string` | | 任务名称 |
|
||||
| items[x].key | `string` | | 任务键值，请唯一区分 |
|
||||
| items[x].remark | `string` | | 当前任务状态，支持 html |
|
||||
| items[x].status | `string` | | 任务状态： 0: 初始状态，不可操作。1: 就绪，可操作状态。2: 进行中，还没有结束。3：有错误，不可重试。4: 已正常结束。5：有错误，且可以重试。 |
|
||||
| checkApi | [api](./Types.md#api) | | 返回任务列表，返回的数据请参考 items。 |
|
||||
| submitApi | [api](./Types.md#api) | | 提交任务使用的 API |
|
||||
| reSubmitApi | [api](./Types.md#api) | | 如果任务失败，且可以重试，提交的时候会使用此 API |
|
||||
| interval | `number` | `3000` | 当有任务进行中，会每隔一段时间再次检测，而时间间隔就是通过此项配置，默认 3000，单位是毫秒 |
|
||||
| taskNameLabel | `string` | 任务名称 | 任务名称列说明 |
|
||||
| operationLabel | `string` | 操作 | 操作列说明 |
|
||||
| statusLabel | `string` | 状态 | 状态列说明 |
|
||||
| remarkLabel | `string` | 备注 | 备注列说明 |
|
||||
| btnText | `string` | 上线 | 操作按钮文字 |
|
||||
| retryBtnText | `string` | 重试 | 重试操作按钮文字 |
|
||||
| btnClassName | `string` | `btn-sm btn-default` | 配置容器按钮 className |
|
||||
| retryBtnClassName | `string` | `btn-sm btn-danger` | 配置容器重试按钮 className |
|
||||
| statusLabelMap | `array` | `["label-warning", "label-info", "label-success", "label-danger", "label-default", "label-danger"]` | 状态显示对应的类名配置 |
|
||||
| statusTextMap | `array` | `["未开始", "就绪", "进行中", "出错", "已完成", "出错"]` | 状态显示对应的文字显示配置 |
|
||||
|
||||
```schema:height="300" scope="body"
|
||||
[
|
||||
{
|
||||
"type": "tasks",
|
||||
"name": "tasks",
|
||||
"checkApi": "/api/mock2/task"
|
||||
},
|
||||
|
||||
"为了演示，目前获取的状态都是随机出现的。"]
|
||||
```
|
||||
@ -1,134 +0,0 @@
|
||||
## Tpl
|
||||
|
||||
tpl 类型的渲染器支持用 JS 模板引擎来组织输出，采用的 lodash 的 [template](https://lodash.com/docs/4.15.0#template)，关于语法部分，请前往 lodash 文档页面。
|
||||
|
||||
```schema:height="200"
|
||||
{
|
||||
"data": {
|
||||
"user": "no one",
|
||||
"items": [
|
||||
"A",
|
||||
"B",
|
||||
"C"
|
||||
]
|
||||
},
|
||||
"body": [
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "User: <%= data.user%>"
|
||||
},
|
||||
{
|
||||
"type": "tpl",
|
||||
"inline": false,
|
||||
"tpl": "<% if (data.items && data.items.length) { %>Array: <% data.items.forEach(function(item) { %> <span class='label label-default'><%= item %></span> <% }); %><% } %>"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
仔细看示例不难发现，语法跟 ejs 很像，`<% 这里面是 js 语句 %>`，所以只要会写 js，做页面渲染没有什么问题。另外以下是一些可用 js 方法。
|
||||
|
||||
- `formatDate(value, format='LLL', inputFormat='')` 格式化时间格式，关于 format 请前往 [moment](http://momentjs.com/) 文档页面。
|
||||
- `formatTimeStamp(value, format='LLL')` 格式化时间戳为字符串。
|
||||
- `formatNumber(number)` 格式化数字格式，加上千分位。
|
||||
- `countDown(value)` 倒计时，显示离指定时间还剩下多少天，只支持时间戳。
|
||||
- 下面 filters 中的方法也可以使用如： `<%= date(data.xxx, 'YYYY-MM-DD')%>`
|
||||
- 可以联系我们添加更多公用方法。
|
||||
|
||||
如：
|
||||
|
||||
```json
|
||||
{
|
||||
"data": {
|
||||
"user": "no one"
|
||||
},
|
||||
"body": {
|
||||
"type": "tpl",
|
||||
"tpl": "User: <%= formatDate(data.time, 'YYYY-MM-DD') %>"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
如果只想简单取下变量，可以用 `$xxx` 或者 `${xxx}`。同时如果不指定渲染器类型，默认就是 `tpl`, 所以以上示例可以简化为。
|
||||
|
||||
> 取值支持多级，如果层级比较深可以用 `.` 来分割如： `${xx.xxx.xx}`
|
||||
> 另外 `$&` 表示直接获取当前的 `data`。
|
||||
|
||||
```schema:height="200"
|
||||
{
|
||||
"data": {
|
||||
"user": "no one"
|
||||
},
|
||||
"body": "User: $user"
|
||||
}
|
||||
```
|
||||
|
||||
`注意：$xxx 与 <%= data.xxx %> 这两种语法不能同时使用，只有一种有效，所以不要交叉使用。`
|
||||
|
||||
通过 `$xxx` 取到的值，默认是会做 html 转义的，也就是说 `$xxx` 完全等价于 `${xxx | html}`, 如果你想什么都不做，那么请这么写 `${xxx | raw}`。
|
||||
|
||||
从上面的语法可以看出来，取值时是支持指定 filter 的，那么有哪些 filter 呢？
|
||||
|
||||
- `html` 转义 html 如：`${xxx|html}`。
|
||||
- `json` json stringify。将目标变量转成 json 字符串。
|
||||
- `toJson` 反过来处理，如果目标字段是字符串，尝试把它解析成 js 数据。
|
||||
- `raw` 表示不转换, 原样输出。
|
||||
- `date` 做日期转换如： `${xxx | date:YYYY-MM-DD}`
|
||||
- `number` 自动给数字加千分位。`${xxx | number}` `9999` => `9,999`
|
||||
- `trim` 把前后多余的空格去掉。
|
||||
- `percent` 格式化成百分比。`${xxx | percent}` `0.8232343` => `82.32%`
|
||||
- `round` 四舍五入取整。
|
||||
- `truncate` 切除， 当超出 200 个字符时，后面的部分直接显示 ...。 `${desc | truncate:500:...}`
|
||||
- `url_encode` 做 url encode 转换。
|
||||
- `url_decode` 做 url decode 转换。
|
||||
- `default` 当值为空时，显示其他值代替。 `${xxx | default:-}` 当为空时显示 `-`
|
||||
- `join` 当值是 array 时，可以把内容连起来。\${xxx | join:,}
|
||||
- `first` 获取数组的第一个成员。
|
||||
- `last` 获取数组的最后一个成员。
|
||||
- `pick` 如果是对象则从当前值中再次查找值如： `${xxx|pick:yyy}` 等价于 `${xxx.yyy}`。如果是数组，则做 map 操作，操作完后还是数组，不过成员已经变成了你选择的东西。如: `${xxx|pick:bbb}` 如果 xxx 的值为 `[{aaa: 1, bbb: 2}]` 经过处理后就是 `[2]`。更复杂的用法： `${xxx|pick:a~aaa,b~bbb}` 经过处理就是 `[{a:1, b: 2}]`
|
||||
- `split` 可以将字符传通过分隔符分离成数组，默认分隔符为 `,` 如： `${ids|split|last}` 即取一段用逗号分割的数值中的最后一个。
|
||||
- `nth` 取数组中的第 n 个成员。如：`${ids|split|nth:0}` 是取第一个成员
|
||||
- `str2date` 请参考 [date](./Date.md) 中日期默认值的设置格式。
|
||||
- `duration` 格式化成时间端如：`2` -=> `2秒` `67` => `1分7秒` `1111111` => `13天21时39分31秒`
|
||||
- `asArray` 将数据包成数组如： `a` => `[a]`
|
||||
- `lowerCase` 转小写
|
||||
- `upperCase` 转大写
|
||||
- `base64Encode` base64 转码
|
||||
- `base64Decode` base64 解码
|
||||
- `isTrue` 类三元过滤器，用法：`${xxx|isTrue:'foo':bar}`，如果`xxx`变量为真，则返回字符串`'foo'`，否则返回当前数据作用域中的变量`bar`值。
|
||||
- `isFalse` 判断逻辑与`isTrue`相反。
|
||||
- `isMatch` 类三元过滤器，用法：
|
||||
- 匹配字符串，第一个参数加引号：用法：`${xxx|isMatch:'somestring':'foo':bar}`，如果变量模糊匹配字符`'somestring'`，则返回字符串`'foo'`，否则返回当前数据作用域中的变量`bar`值。
|
||||
- 匹配变量，第一个参数不加引号：用法：`${xxx|isMatch:variable:'foo':bar}`，如果`xxx`变量模糊匹配`variable`变量的值，则返回字符串`'foo'`，否则返回当前数据作用域中的变量`bar`值。
|
||||
- `notMatch` 判断逻辑与`isMatch`相反。
|
||||
- `isEquals` 类三元过滤器，用法：
|
||||
- 对比字符串，第一个参数加引号：`${xxx|isEquals:'somestring':'foo':bar}`，如果变量等于字符串`'somestring'`，则返回字符串`'foo'`，否则返回当前数据作用域中的变量`bar`值。
|
||||
- 对比变量，第一个参数不加引号：`${xxx|isEquals:variable:'foo':bar}`，如果变量等于`variable`变量的值，则返回字符串`'foo'`，否则返回当前数据作用域中的变量`bar`值。
|
||||
- `notEquals` 判断逻辑与`isEquals`相反。
|
||||
- `filter` 过滤数组，操作对象为数组，当目标对象不是数组时将无效。使用语法 \${xxx | filter: 参与过滤的字段集合:指令:取值变量名}。
|
||||
|
||||
比如: `${xxx|filter:readonly:isTrue}` 将 xxx 数组中 readonly 为 true 的成员提取出来。
|
||||
再来个栗子：`${xxx|filter:a,b:match:keywords}` 将 xxx 数组中成员变量 a 或者 b 的值与环境中 keywords 的值相匹配的提取出来。如果不需要取变量，也可以写固定值如：`${xxx|filter:a,b:match:'123'}`
|
||||
|
||||
指令类型:
|
||||
|
||||
- `isTrue` 目标值为真通过筛选。
|
||||
- `isFalse` 目标值为假时通过筛选。
|
||||
- `match` 模糊匹配后面的参数。`${xxx|filter:a,b:match:keywords}` 表示 xxx 里面的成员，如果字段 a 或者 字段 b 模糊匹配 keywords 变量的值，则通过筛选。
|
||||
- `equals` 相对于模糊匹配，这个就相对精确匹配了，用法跟 `match` 一样。
|
||||
|
||||
组合使用。
|
||||
|
||||
- `${&|json|html}` 把当前可用的数据全部打印出来。`$&` 取当前值，json 做 json stringify，然后 html 转义。
|
||||
- `${rows|first|pick:id}` 把 rows 中的第一条数据中的 id 取到。
|
||||
- `${rows|pick:id|join:,}`
|
||||
|
||||
没有找到合适的？可以自定义 filter。如果是 AMIS 平台用户，可以将以下代码加入到自定义组件中，如果不是请想办法插入以下代码。
|
||||
|
||||
```js
|
||||
import {registerFilter} from 'amis';
|
||||
|
||||
registerFilter('myfilter', (input: string) => `${input}Boom`);
|
||||
```
|
||||
|
||||
加入成功后就可以这样使用了 `${xxx | myfilter}`。 如果 `xxx` 的值是 `abc` 那么输出将会是 `abcBoom`。
|
||||
@ -1,213 +0,0 @@
|
||||
## 类型说明
|
||||
|
||||
### Container
|
||||
|
||||
Container 不是一个特定的渲染器，而是 amis 中一个特殊类型，它是以下类型的任何一种。
|
||||
|
||||
- `String` 字符串，可以包含 `html` 片段。
|
||||
- `Object` 指定一个渲染器如： `{"type": "button", "label": "按钮"}`
|
||||
- `Array` 还可以是一个数组，数组的成员可以就是一个 `Container`.
|
||||
|
||||
示例:
|
||||
|
||||
```json
|
||||
{
|
||||
"container": "普通一段字符串"
|
||||
}
|
||||
```
|
||||
|
||||
```json
|
||||
{
|
||||
"container": {
|
||||
"type": "button",
|
||||
"label": "按钮"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```json
|
||||
{
|
||||
"container": [
|
||||
"普通一段字符串",
|
||||
|
||||
{
|
||||
"type": "button",
|
||||
"label": "按钮"
|
||||
},
|
||||
|
||||
["普通一段字符串", "普通一段字符串"]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
Api 类型可以是字符串或者对象。API 中可以直接设置数据发送结构，注意看示例。
|
||||
|
||||
- `String` `[<type>:]<url>`
|
||||
|
||||
- `<type>` 可以是： `get`、`post`、`put`、`delete`或者`raw`
|
||||
- `<url>` 即 api 地址，支持通过 `$key` 取变量。
|
||||
|
||||
如：
|
||||
|
||||
* `get:http://imis.tieba.baidu.com/yule/list?start=$startTime&end=$endTime`
|
||||
* `get:http://imis.tieba.baidu.com/yule/list?$$` 拿所有可用数据。
|
||||
* `get:http://imis.tieba.baidu.com/yule/list?data=$$` 拿所有可用数据。
|
||||
|
||||
- `Object`
|
||||
|
||||
- `url` api 地址
|
||||
- `method` 可以是：`get`、`post`、`put`或者`delete`
|
||||
- `data` 数据体, 数据对象。
|
||||
- `dataType` 数据体格式，默认为 `json` 可以配置成 `form` 或者 `form-data`。当 data 中包含文件时，自动会采用 `form-data`（multipart/form-data） 格式。当配置为 `form` 时为 `application/x-www-form-urlencoded` 格式。
|
||||
- `qsOptions` 当 dataType 为 `form` 或者 `form-data` 的时候有用。具体参数请参考这： https://github.com/ljharb/qs 默认设置为 `{arrayFormat: 'indices', encodeValuesOnly: true}`
|
||||
- `headers` 头部，配置方式和 data 配置一样，下面不详讲。如果要使用，请前往群组系统配置中，添加允许。
|
||||
- `sendOn` 可以配置发送条件比如： `this.id` 表示当存在 id 值时才发送这个请求。
|
||||
- `cache` 通过配置此属性开启缓存，单位是 ms，比如设置 3000 的话，当前接口在 3s 内请求，只要传参一致就会走缓存。
|
||||
- `replaceData` boolean; 返回的数据是否替换掉当前的数据，默认为 false，即：追加，设置成 true 就是完全替换。
|
||||
- `requestAdaptor` (api) => api; 发送适配器，支持字符串串格式，或者直接就是函数如：
|
||||
|
||||
```
|
||||
{
|
||||
"type": "crud",
|
||||
"api": {
|
||||
"url": "/api/xxx",
|
||||
"method": "get",
|
||||
"requestAdaptor": "api.url += '?arg1=1&arg2=2'; console.log(api); return api;"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- `adaptor` (data, response, api) => data 返回适配器，如果接口返回不符合要求，可以通过配置一个适配器来处理成 amis 需要的。同样支持 Function 或者 字符串函数体格式。PS: Function 类型，只有采用非 json 方式配置才能配置出来。
|
||||
|
||||
`data` 数据体，如果默认不指定，amis 会猜一些你可能需要点数据发送过去，如果不符合你预期，可以通过指定 data 数据来满足，额外还可以做一些数据映射 如：
|
||||
|
||||
取某个变量。
|
||||
|
||||
```json
|
||||
{
|
||||
"url": "http://imis.tieba.baidu.com/yule/list",
|
||||
"method": "post",
|
||||
"data": {
|
||||
"start": "$startTime"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
直接将所有可用数据映射给 all 变量。
|
||||
|
||||
```json
|
||||
{
|
||||
"url": "http://imis.tieba.baidu.com/yule/list",
|
||||
"method": "post",
|
||||
"data": {
|
||||
"all": "$$"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
正常如果指定了 data，则只会发送 data 指定的数据了，如果想要保留原有数据，只定制修改一部分。
|
||||
|
||||
```json
|
||||
{
|
||||
"url": "http://imis.tieba.baidu.com/yule/list",
|
||||
"method": "post",
|
||||
"data": {
|
||||
"&": "$$", // 原来的数据先 copy 过来。
|
||||
"a": "123",
|
||||
"b": "${b}"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
如果目标变量是数组，而发送的数据，又不希望把成员全部发送过去，可以这样配置。
|
||||
|
||||
```json
|
||||
{
|
||||
"url": "http://imis.tieba.baidu.com/yule/list",
|
||||
"method": "post",
|
||||
"data": {
|
||||
"all": {
|
||||
"$rows": {
|
||||
"a": "$a",
|
||||
"b": "$b"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
如果 `$rows` 的结构为 `[{a: 1, b: 2, c: 3, d: 4}, {a: 1, b: 2, c: 3, d: 4}]`, 经过上述映射后，实际发送的数据为 `{all: [{a: 1, b:2}, {a: 1, b: 2}]}`
|
||||
|
||||
如果你觉得上面的这种写法比较诡异，建议你用以下写法。
|
||||
|
||||
```json
|
||||
{
|
||||
"url": "http://imis.tieba.baidu.com/yule/list",
|
||||
"method": "post",
|
||||
"data": {
|
||||
"all": "${rows|pick:a,b}"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
** 注意 **
|
||||
|
||||
amis 平台中使用所有的 http 地址 url 的如： `"http://www.baidu.com"` 都会被替换成 proxy 代理，如果不希望这么做，请明确指示如： `"raw:http://www.baidu.com"`。还有为了安全，amis 默认只能转发公司内部 API 接口，如果您的接口在外网环境，也请明确指示如：`"external:http://www.baidu.com"`
|
||||
|
||||
### 表达式
|
||||
|
||||
配置项中，所有 `boolean` 类型的配置，都可以用 JS 表达式来配置。所有`boolean` 配置项，后面加个 `On` 则是表达式配置方式，可以用 js 语法来根据当前模型中的数据来决定是否启用。
|
||||
如：[FormItem](./Form/FormItem.md) 中的 `disabledOn`、`hiddenOn`、`visibleOn`、[CRUD](./CRUD.md) 中的 `itemDraggableOn` 等等。
|
||||
|
||||
```schema:height="300" scope="form"
|
||||
[
|
||||
{
|
||||
"type": "radios",
|
||||
"name": "foo",
|
||||
"inline": true,
|
||||
"label": " ",
|
||||
"options": [
|
||||
{
|
||||
"label": "类型1",
|
||||
"value": 1
|
||||
},
|
||||
{
|
||||
"label": "类型2",
|
||||
"value": 2
|
||||
},
|
||||
{
|
||||
"label": "类型3",
|
||||
"value": 3
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "text",
|
||||
"name": "text",
|
||||
"placeholder": "类型1 可见",
|
||||
"visibleOn": "data.foo == 1"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "text",
|
||||
"name": "text2",
|
||||
"placeholder": "类型2 不可点",
|
||||
"disabledOn": "data.foo == 2"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "button",
|
||||
"label": "类型三不能提交",
|
||||
"level": "primary",
|
||||
"disabledOn": "data.foo == 3"
|
||||
}
|
||||
|
||||
]
|
||||
```
|
||||
|
||||
为了能加入权限控制，表达是中允许可以用 `acl.can` 方法来检测当前用户是否拥有某个权限。
|
||||
如： `{"disabledOn": "!acl.can('some-resource')"}`。权限能力部分，请前往[能力管理](/docs/manual#%E8%83%BD%E5%8A%9B%E7%AE%A1%E7%90%86)，
|
||||
权限配置请前往[权限配置](/docs/manual#%E6%9D%83%E9%99%90%E9%85%8D%E7%BD%AE)管理。
|
||||
@ -1,23 +0,0 @@
|
||||
## Video
|
||||
|
||||
视频播放器。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------- | --------- | --------- | ---------------------------------- |
|
||||
| type | `string` | `"video"` | 指定为 video 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| src | `string` | | 视频地址 |
|
||||
| isLive | `boolean` | false | 是否为直播，视频为直播时需要添加上 |
|
||||
| poster | `string` | | 视频封面地址 |
|
||||
| muted | `boolean` | | 是否静音 |
|
||||
| autoPlay | `boolean` | | 是否自动播放 |
|
||||
| rates | `array` | | 倍数，格式为`[1.0, 1.5, 2.0]` |
|
||||
|
||||
```schema:height="500" scope="body"
|
||||
{
|
||||
"type": "video",
|
||||
"autoPlay": false,
|
||||
"src": "raw:https://amis.bj.bcebos.com/amis/2019-12/1577157317579/trailer_hd.mp4",
|
||||
"poster": "raw:https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
|
||||
}
|
||||
```
|
||||
@ -1,126 +0,0 @@
|
||||
## Wizard
|
||||
|
||||
表单向导，能够配置多个步骤引导用户一步一步完成表单提交。
|
||||
|
||||
- `type` 请设置 `wizard`。
|
||||
- `mode` 展示模式，请选择：`horizontal` 或者 `vertical`，默认为 `horizontal`。
|
||||
- `api` 最后一步保存的接口。
|
||||
- `initApi` 初始化数据接口。
|
||||
- `initFetch` 初始是否拉取数据。
|
||||
- `initFetchOn` 初始是否拉取数据，通过表达式来配置。
|
||||
- `actionPrevLabel` 上一步按钮名称，默认：`上一步`。
|
||||
- `actionNextLabel` 下一步按钮名称`下一步`。
|
||||
- `actionNextSaveLabel` 保存并下一步按钮名称，默认：`保存并下一步`。
|
||||
- `actionFinishLabel` 完成按钮名称，默认：`完成`。
|
||||
- `className` 外层 CSS 类名。
|
||||
- `actionClassName` 按钮 CSS 类名，默认：`btn-sm btn-default`。
|
||||
- `reload` 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。
|
||||
- `redirect` 操作完后跳转。
|
||||
- `target` 可以把数据提交给别的组件而不是自己保存。请填写目标组件设置的 name 值，如果填写为 `window` 则把数据同步到地址栏上，同时依赖这些数据的组件会自动重新刷新。
|
||||
- `steps` 数组，配置步骤信息。
|
||||
- `steps[x].title` 步骤标题。
|
||||
- `steps[x].mode` 展示默认，跟 [Form](./Form/Form.md) 中的模式一样，选择： `normal`、`horizontal`或者`inline`。
|
||||
- `steps[x].horizontal` 当为水平模式时，用来控制左右占比。
|
||||
- `steps[x].horizontal.label` 左边 label 的宽度占比。
|
||||
- `steps[x].horizontal.right` 右边控制器的宽度占比。
|
||||
- `steps[x].horizontal.offset` 当没有设置 label 时，右边控制器的偏移量。
|
||||
- `steps[x].api` 当前步骤保存接口，可以不配置。
|
||||
- `steps[x].initApi` 当前步骤数据初始化接口。
|
||||
- `steps[x].initFetch` 当前步骤数据初始化接口是否初始拉取。
|
||||
- `steps[x].initFetchOn` 当前步骤数据初始化接口是否初始拉取，用表达式来决定。
|
||||
- `steps[x].controls` 当前步骤的表单项集合，请参考 [FormItem](./Form/FormItem.md)。
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
{
|
||||
"type": "wizard",
|
||||
"api": "/api/mock2/form/saveForm?waitSeconds=2",
|
||||
"mode": "vertical",
|
||||
"steps": [
|
||||
{
|
||||
"title": "第一步",
|
||||
"controls": [
|
||||
{
|
||||
"name": "website",
|
||||
"label": "网址",
|
||||
"type": "url",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"label": "邮箱",
|
||||
"type": "email",
|
||||
"required": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Step 2",
|
||||
"controls": [
|
||||
{
|
||||
"name": "email2",
|
||||
"label": "邮箱",
|
||||
"type": "email",
|
||||
"required": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Step 3",
|
||||
"controls": [
|
||||
"这是最后一步了"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 接口说明
|
||||
|
||||
开始之前请你先阅读[整体要求](../api.md)。
|
||||
|
||||
|
||||
#### initApi
|
||||
|
||||
可以用来初始化表单数据。
|
||||
|
||||
**发送**
|
||||
|
||||
默认不携带任何参数，可以在上下文中取变量设置进去。
|
||||
|
||||
**响应**
|
||||
|
||||
要求返回的数据 data 是对象，不要返回其他格式，且注意层级问题，data 中返回的数据正好跟 form 中的变量一一对应。
|
||||
|
||||
```
|
||||
{
|
||||
status: 0,
|
||||
msg: '',
|
||||
data: {
|
||||
a: '123'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
如果有个表单项的 name 配置成 a，initApi 返回后会自动填充 '123'。
|
||||
|
||||
#### api
|
||||
|
||||
用来保存表单结果。
|
||||
|
||||
**发送**
|
||||
|
||||
默认为 `POST` 方式，会将所有表单项整理成一个对象发送过过去。
|
||||
|
||||
**响应**
|
||||
|
||||
如果 返回了 data 对象，且是对象，会把结果 merge 到表单数据里面。
|
||||
|
||||
#### initAsyncApi
|
||||
|
||||
这个接口的作用在于解决接口耗时比较长导致超时问题的情况，当配置此接口后，初始化接口的时候先请求 initApi 如果 initApi 接口返回了 data.finished 为 true，则初始化完成。如果返回为 false 则之后每隔 3s 请求 initAsyncApi，直到接口返回了 data.finished 为 true 才结束。 用这种机制的话，业务 api 不需要完全等待操作完成才输出结果，而是直接检测状态，没完成也直接返回，后续还会发起请求检测。
|
||||
|
||||
格式要求就是 data 是对象，且 有 finished 这个字段。返回的其他字段会被 merge 到表单数据里面。
|
||||
|
||||
##### asyncApi
|
||||
|
||||
保存同样也可以采用异步模式，具体请参考 initAsyncApi。
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user