修了一些链接问题

This commit is contained in:
rickcole 2020-07-29 17:33:14 +08:00
parent ceee677c65
commit 83ce65c4dc
22 changed files with 348 additions and 272 deletions

View File

@ -79,12 +79,7 @@ order: 17
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置 除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置
| 属性名 | 类型 | 默认值 | 说明 | | 属性名 | 类型 | 默认值 | 说明 |
| --------- | -------------------- | ------------ | ------------------------------------------------------------------------------------------- | | --------- | ------------- | ------------ | ------------------------------------------------------------------------------------------- |
| language | `string` | `javascript` | 编辑器高亮的语言,可选 [支持的语言](./editor#%E6%94%AF%E6%8C%81%E7%9A%84%E8%AF%AD%E8%A8%80) | | language | `string` | `javascript` | 编辑器高亮的语言,可选 [支持的语言](./editor#%E6%94%AF%E6%8C%81%E7%9A%84%E8%AF%AD%E8%A8%80) |
| diffValue | [模板](./..template) | | 日期选择器值格式,更多格式类型请参考 [moment](http://momentjs.com/) | | diffValue | [Tpl](../tpl) | | 左侧值 |

View File

@ -81,25 +81,25 @@ order: 21
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置 除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置
| 属性名 | 类型 | 默认值 | 说明 | | 属性名 | 类型 | 默认值 | 说明 |
| ---------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | ---------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| reciever | [API](../../types/api) | | 上传文件接口 | | reciever | [API](../../types/api) | | 上传文件接口 |
| accept | `string` | `text/plain` | 默认只支持纯文本,要支持其他类型,请配置此属性为文件后缀`.xxx` | | accept | `string` | `text/plain` | 默认只支持纯文本,要支持其他类型,请配置此属性为文件后缀`.xxx` |
| asBase64 | `boolean` | `false` | 将文件以`base64`的形式,赋值给当前组件 | | asBase64 | `boolean` | `false` | 将文件以`base64`的形式,赋值给当前组件 |
| asBlob | `boolean` | `false` | 将文件以二进制的形式,赋值给当前组件 | | asBlob | `boolean` | `false` | 将文件以二进制的形式,赋值给当前组件 |
| maxSize | `string` | | 默认没有限制,当设置后,文件大小大于此值将不允许上传。单位为`KB` | | maxSize | `string` | | 默认没有限制,当设置后,文件大小大于此值将不允许上传。单位为`KB` |
| maxLength | `number` | | 默认没有限制,当设置后,一次只允许上传指定数量文件。 | | maxLength | `number` | | 默认没有限制,当设置后,一次只允许上传指定数量文件。 |
| multiple | `boolean` | `false` | 是否多选。 | | multiple | `boolean` | `false` | 是否多选。 |
| joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) | | joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) |
| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) | | extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) |
| delimeter | `string` | `,` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) | | delimeter | `string` | `,` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
| autoUpload | `boolean` | `true` | 否选择完就自动开始上传 | | autoUpload | `boolean` | `true` | 否选择完就自动开始上传 |
| hideUploadButton | `boolean` | `false` | 隐藏上传按钮 | | hideUploadButton | `boolean` | `false` | 隐藏上传按钮 |
| stateTextMap | [stateTextMap](./stateTextMap) | `{ init: '', pending: '等待上传', uploading: '上传中', error: '上传出错', uploaded: '已上传', ready: '' }` | 上传状态文案 | | stateTextMap | object | `{ init: '', pending: '等待上传', uploading: '上传中', error: '上传出错', uploaded: '已上传', ready: '' }` | 上传状态文案 |
| fileField | `string` | `file` | 如果你不想自己存储,则可以忽略此属性。 | | fileField | `string` | `file` | 如果你不想自己存储,则可以忽略此属性。 |
| downloadUrl | `boolean`或`string` | `""` | 默认显示文件路径的时候会支持直接下载,可以支持加前缀如:`http://xx.dom/filename=` ,如果不希望这样,可以把当前配置项设置为 `false`。 | | downloadUrl | `boolean`或`string` | `""` | 默认显示文件路径的时候会支持直接下载,可以支持加前缀如:`http://xx.dom/filename=` ,如果不希望这样,可以把当前配置项设置为 `false`。 |
| useChunk | `boolean`或`"auto"` | `"auto"` | amis 所在服务器,限制了文件上传大小不得超出 10M所以 amis 在用户选择大文件的时候,自动会改成分块上传模式。 | | useChunk | `boolean`或`"auto"` | `"auto"` | amis 所在服务器,限制了文件上传大小不得超出 10M所以 amis 在用户选择大文件的时候,自动会改成分块上传模式。 |
| chunkSize | `number` | `5 * 1024 * 1024` | 分块大小 | | chunkSize | `number` | `5 * 1024 * 1024` | 分块大小 |
| startChunkApi | [API](../../types/api) | | startChunkApi | | startChunkApi | [API](../../types/api) | | startChunkApi |
| chunkApi | [API](../../types/api) | | chunkApi | | chunkApi | [API](../../types/api) | | chunkApi |
| finishChunkApi | [API](../../types/api) | | finishChunkApi | | finishChunkApi | [API](../../types/api) | | finishChunkApi |

View File

@ -327,7 +327,7 @@ order: 1
### 满足条件校验必填 ### 满足条件校验必填
你也通过[表达式](/docs/expression)配置`requiredOn`,来实现在某个条件下使当前表单项必填。 你也通过[表达式](../../concepts/expression)配置`requiredOn`,来实现在某个条件下使当前表单项必填。
```schema:height="400" scope="body" ```schema:height="400" scope="body"
{ {
@ -551,22 +551,22 @@ amis 会有默认的报错信息,如果你想自定义校验信息,配置`va
## 属性表 ## 属性表
| 属性名 | 类型 | 默认值 | 说明 | | 属性名 | 类型 | 默认值 | 说明 |
| -------------- | ----------------------------------- | ------ | ---------------------------------------------------------- | | -------------- | ------------------------------------------ | ------ | ---------------------------------------------------------- |
| type | `string` | | 指定表单项类型 | | type | `string` | | 指定表单项类型 |
| className | `string` | | 表单最外层类名 | | className | `string` | | 表单最外层类名 |
| inputClassName | `string` | | 表单控制器类名 | | inputClassName | `string` | | 表单控制器类名 |
| labelClassName | `string` | | label 的类名 | | labelClassName | `string` | | label 的类名 |
| name | `string` | | 字段名,指定该表单项提交时的 key | | name | `string` | | 字段名,指定该表单项提交时的 key |
| label | [模板](../template) 或 `false` | | 表单项标签 | | label | [模板](../../concepts/template) 或 `false` | | 表单项标签 |
| description | [模板](../template) | | 表单项描述 | | description | [模板](../../concepts/template) | | 表单项描述 |
| placeholder | `string` | | 表单项描述 | | placeholder | `string` | | 表单项描述 |
| inline | `boolean` | | 是否为 内联 模式 | | inline | `boolean` | | 是否为 内联 模式 |
| submitOnChange | `boolean` | | 是否该表单项值发生变化时就提交当前表单。 | | submitOnChange | `boolean` | | 是否该表单项值发生变化时就提交当前表单。 |
| disabled | `boolean` | | 当前表单项是否是禁用状态 | | disabled | `boolean` | | 当前表单项是否是禁用状态 |
| disabledOn | [表达式](../../concepts/expression) | | 当前表单项是否禁用的条件 | | disabledOn | [表达式](../../concepts/expression) | | 当前表单项是否禁用的条件 |
| visible | [表达式](../../concepts/expression) | | 当前表单项是否禁用的条件 | | visible | [表达式](../../concepts/expression) | | 当前表单项是否禁用的条件 |
| visibleOn | [表达式](../../concepts/expression) | | 当前表单项是否禁用的条件 | | visibleOn | [表达式](../../concepts/expression) | | 当前表单项是否禁用的条件 |
| required | `boolean` | | 是否为必填。 | | required | `boolean` | | 是否为必填。 |
| requiredOn | [表达式](../../concepts/expression) | | 过[表达式](../Types.md#表达式)来配置当前表单项是否为必填。 | | requiredOn | [表达式](../../concepts/expression) | | 过[表达式](../Types.md#表达式)来配置当前表单项是否为必填。 |
| validations | [表达式](../../concepts/expression) | | 表单项值格式验证,支持设置多个,多个规则用英文逗号隔开。 | | validations | [表达式](../../concepts/expression) | | 表单项值格式验证,支持设置多个,多个规则用英文逗号隔开。 |

View File

@ -739,45 +739,45 @@ Form 支持轮训初始化接口,步骤如下:
## 属性表 ## 属性表
| 属性名 | 类型 | 默认值 | 说明 | | 属性名 | 类型 | 默认值 | 说明 |
| ----------------------------- | ------------------------------------ | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | --------------------------- | --------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| type | `string` | | `"form"` 指定为 Form 渲染器 | | type | `string` | | `"form"` 指定为 Form 渲染器 |
| mode | `string` | `normal` | 表单展示方式,可以是:`normal`、`horizontal` 或者 `inline` | | mode | `string` | `normal` | 表单展示方式,可以是:`normal`、`horizontal` 或者 `inline` |
| horizontal | `Object` | `{"left":"col-sm-2", "right":"col-sm-10", "offset":"col-sm-offset-2"}` | 当 mode 为 `horizontal` 时有用,用来控制 label | | horizontal | `Object` | `{"left":"col-sm-2", "right":"col-sm-10", "offset":"col-sm-offset-2"}` | 当 mode 为 `horizontal` 时有用,用来控制 label |
| title | `string` | `"表单"` | Form 的标题 | | title | `string` | `"表单"` | Form 的标题 |
| submitText | `String` | `"提交"` | 默认的提交按钮名称,如果设置成空,则可以把默认按钮去掉。 | | submitText | `String` | `"提交"` | 默认的提交按钮名称,如果设置成空,则可以把默认按钮去掉。 |
| className | `string` | | 外层 Dom 的类名 | | className | `string` | | 外层 Dom 的类名 |
| controls | `Array` of [FormItem](./FormItem.md) | | Form 表单项集合 | | controls | Array<[表单项](./formItem)> | | Form 表单项集合 |
| actions | `Array` of [Action](../Action.md) | | Form 提交按钮,成员为 Action | | actions | Array<[表单项](../action)> | | Form 提交按钮,成员为 Action |
| messages | `Object` | | 消息提示覆写,默认消息读取的是 API 返回的消息,但是在此可以覆写它。 | | messages | `Object` | | 消息提示覆写,默认消息读取的是 API 返回的消息,但是在此可以覆写它。 |
| messages.fetchSuccess | `string` | | 获取成功时提示 | | messages.fetchSuccess | `string` | | 获取成功时提示 |
| messages.fetchFailed | `string` | | 获取失败时提示 | | messages.fetchFailed | `string` | | 获取失败时提示 |
| messages.saveSuccess | `string` | | 保存成功时提示 | | messages.saveSuccess | `string` | | 保存成功时提示 |
| messages.saveFailed | `string` | | 保存失败时提示 | | messages.saveFailed | `string` | | 保存失败时提示 |
| wrapWithPanel | `boolean` | `true` | 是否让 Form 用 panel 包起来,设置为 false 后actions 将无效。 | | wrapWithPanel | `boolean` | `true` | 是否让 Form 用 panel 包起来,设置为 false 后actions 将无效。 |
| panelClassName | `boolean` | `true` | 是否让 Form 用 panel 包起来,设置为 false 后actions 将无效。 | | panelClassName | `boolean` | `true` | 是否让 Form 用 panel 包起来,设置为 false 后actions 将无效。 |
| [api](#api) | [Api](../Types.md#api) | | Form 用来保存数据的 api。 | | api | [API](../../types/api) | | Form 用来保存数据的 api。 |
| [initApi](#initApi) | [Api](../Types.md#api) | | Form 用来获取初始数据的 api。 | | initApi | [API](../../types/api) | | Form 用来获取初始数据的 api。 |
| interval | `number` | `3000` | 刷新时间(最低 3000) | | interval | `number` | `3000` | 刷新时间(最低 3000) |
| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 | | silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 |
| stopAutoRefreshWhen | `string` | `""` | 通过[表达式](./Types.md#表达式) 来配置停止刷新的条件 | | stopAutoRefreshWhen | `string` | `""` | 通过[表达式](./Types.md#表达式) 来配置停止刷新的条件 |
| [initAsyncApi](#initAsyncApi) | [Api](../Types.md#api) | | Form 用来获取初始数据的 api,与 initApi 不同的是,会一直轮训请求该接口,直到返回 finished 属性为 true 才 结束。 | | initAsyncApi | [API](../../types/api) | | Form 用来获取初始数据的 api,与 initApi 不同的是,会一直轮训请求该接口,直到返回 finished 属性为 true 才 结束。 |
| initFetch | `boolean` | `true` | 设置了 initApi 或者 initAsyncApi 后,默认会开始就发请求,设置为 false 后就不会起始就请求接口 | | initFetch | `boolean` | `true` | 设置了 initApi 或者 initAsyncApi 后,默认会开始就发请求,设置为 false 后就不会起始就请求接口 |
| initFetchOn | `string` | | 用表达式来配置 | | initFetchOn | `string` | | 用表达式来配置 |
| initFinishedField | `string` | `finished` | 设置了 initAsyncApi 后,默认会从返回数据的 data.finished 来判断是否完成,也可以设置成其他的 xxx就会从 data.xxx 中获取 | | initFinishedField | `string` | `finished` | 设置了 initAsyncApi 后,默认会从返回数据的 data.finished 来判断是否完成,也可以设置成其他的 xxx就会从 data.xxx 中获取 |
| initCheckInterval | `number` | `3000` | 设置了 initAsyncApi 以后,默认拉取的时间间隔 | | initCheckInterval | `number` | `3000` | 设置了 initAsyncApi 以后,默认拉取的时间间隔 |
| [asyncApi](#asyncApi) | [Api](../Types.md#api) | | 设置此属性后,表单提交发送保存接口后,还会继续轮训请求该接口,直到返回 `finished` 属性为 `true` 才 结束。 | | asyncApi | [API](../../types/api) | | 设置此属性后,表单提交发送保存接口后,还会继续轮训请求该接口,直到返回 `finished` 属性为 `true` 才 结束。 |
| checkInterval | `number` | 3000 | 轮训请求的时间间隔,默认为 3 秒。设置 `asyncApi` 才有效 | | checkInterval | `number` | 3000 | 轮训请求的时间间隔,默认为 3 秒。设置 `asyncApi` 才有效 |
| finishedField | `string` | `"finished"` | 如果决定结束的字段名不是 `finished` 请设置此属性,比如 `is_success` | | finishedField | `string` | `"finished"` | 如果决定结束的字段名不是 `finished` 请设置此属性,比如 `is_success` |
| submitOnChange | `boolean` | `false` | 表单修改即提交 | | submitOnChange | `boolean` | `false` | 表单修改即提交 |
| submitOnInit | `boolean` | `false` | 初始就提交一次 | | submitOnInit | `boolean` | `false` | 初始就提交一次 |
| resetAfterSubmit | `boolean` | `false` | 提交后是否重置表单 | | resetAfterSubmit | `boolean` | `false` | 提交后是否重置表单 |
| primaryField | `string` | `"id"` | 设置主键 id, 当设置后检测表单是否完成时asyncApi只会携带此数据。 | | primaryField | `string` | `"id"` | 设置主键 id, 当设置后检测表单是否完成时asyncApi只会携带此数据。 |
| target | `string` | | 默认表单提交自己会通过发送 api 保存数据,但是也可以设定另外一个 form 的 name 值,或者另外一个 `CRUD` 模型的 name 值。 如果 target 目标是一个 `Form` ,则目标 `Form` 会重新触发 `initApi`api 可以拿到当前 form 数据。如果目标是一个 `CRUD` 模型,则目标模型会重新触发搜索,参数为当前 Form 数据。当目标是 `window` 时,会把当前表单的数据附带到页面地址上。 | | target | `string` | | 默认表单提交自己会通过发送 api 保存数据,但是也可以设定另外一个 form 的 name 值,或者另外一个 `CRUD` 模型的 name 值。 如果 target 目标是一个 `Form` ,则目标 `Form` 会重新触发 `initApi`api 可以拿到当前 form 数据。如果目标是一个 `CRUD` 模型,则目标模型会重新触发搜索,参数为当前 Form 数据。当目标是 `window` 时,会把当前表单的数据附带到页面地址上。 |
| redirect | `string` | | 设置此属性后Form 保存成功后,自动跳转到指定页面。支持相对地址,和绝对地址(相对于组内的)。 | | redirect | `string` | | 设置此属性后Form 保存成功后,自动跳转到指定页面。支持相对地址,和绝对地址(相对于组内的)。 |
| reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值,如果填写为 `window` 则让当前页面整体刷新。 | | reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值,如果填写为 `window` 则让当前页面整体刷新。 |
| autoFocus | `boolean` | `false` | 是否自动聚焦。 | | autoFocus | `boolean` | `false` | 是否自动聚焦。 |
| canAccessSuperData | `boolean` | `true` | 指定是否可以自动获取上层的数据并映射到表单项上 | | canAccessSuperData | `boolean` | `true` | 指定是否可以自动获取上层的数据并映射到表单项上 |
| persistData | `boolean` | `true` | 指定表单是否开启本地缓存 | | persistData | `boolean` | `true` | 指定表单是否开启本地缓存 |
| clearPersistDataAfterSubmit | `boolean` | `true` | 指定表单提交成功后是否清除本地缓存 | | clearPersistDataAfterSubmit | `boolean` | `true` | 指定表单提交成功后是否清除本地缓存 |
| name | `string` | | 设置一个名字后,方便其他组件与其通信 | | name | `string` | | 设置一个名字后,方便其他组件与其通信 |

View File

@ -7,6 +7,7 @@ menuName: Input-Group
icon: icon:
order: 28 order: 28
--- ---
**输入框组合选择器** 可用于输入框与其他组件进行组合。 **输入框组合选择器** 可用于输入框与其他组件进行组合。
## 基本用法 ## 基本用法
@ -91,15 +92,16 @@ order: 28
``` ```
## 校验
input-group 配置校验方法较为特殊,需要配置下面步骤:
1. input-group 上配置任意`name`值
2. input-group 的 controls 内配置的表单项上配置校验规则
## 属性表 ## 属性表
| 属性名 | 类型 | 默认值 | 说明 | | 属性名 | 类型 | 默认值 | 说明 |
| --------- | --------------------------- | ------ | ---------- | | --------- | --------------------------- | ------ | ---------- |
| className | `string` | | CSS 类名 | | className | `string` | | CSS 类名 |
| controls | Array<[表单项](./formitem)> | | 表单项集合 | | controls | Array<[表单项](./formitem)> | | 表单项集合 |

View File

@ -7,6 +7,7 @@ menuName: Number
icon: icon:
order: 32 order: 32
--- ---
## 基本用法 ## 基本用法
```schema:height="300" scope="body" ```schema:height="300" scope="body"
@ -27,14 +28,9 @@ order: 32
当做选择器表单项使用时,除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置 当做选择器表单项使用时,除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置
| 属性名 | 类型 | 默认值 | 说明 | | 属性名 | 类型 | 默认值 | 说明 |
| --------- | ------------------- | ------ | -------------------- | | --------- | ------------------------------- | ------ | -------------------- |
| min | [模板](../template) | | 最小值 | | min | [模板](../../concepts/template) | | 最小值 |
| max | [模板](../template) | | 最大值 | | max | [模板](../../concepts/template) | | 最大值 |
| step | `number` | | 步长 | | step | `number` | | 步长 |
| precision | `number` | | 精度,即小数点后几位 | | precision | `number` | | 精度,即小数点后几位 |

View File

@ -124,7 +124,7 @@ order: 2
### 通过数据域中变量配置 ### 通过数据域中变量配置
你也可以配置`source`属性,利用 [数据映射](.../concepts/data-mapping),获取当前数据链中的变量 你也可以配置`source`属性,利用 [数据映射](../../concepts/data-mapping),获取当前数据链中的变量
```schema:height="260" scope="body" ```schema:height="260" scope="body"
{ {
@ -1124,7 +1124,7 @@ order: 2
## 自动填充 autoFill ## 自动填充 autoFill
一些选择器组件,支持配置`autoFill`,将当前已选中的选项的某个字段的值,自动填充到表单中某个表单项中,**只在单选时有效**,支持[数据映射](.../concepts/data-mapping) 一些选择器组件,支持配置`autoFill`,将当前已选中的选项的某个字段的值,自动填充到表单中某个表单项中,**只在单选时有效**,支持[数据映射](../../concepts/data-mapping)
```schema:height="400" scope="body" ```schema:height="400" scope="body"
{ {

View File

@ -8,7 +8,7 @@ icon:
order: 34 order: 34
--- ---
还是为了布局,可以把一部分 [FormItem](./FormItem.md) 合并到一个 panel 里面单独展示。 还是为了布局,可以把一部分 [FormItem](./formItem) 合并到一个 panel 里面单独展示。
## 基本用法 ## 基本用法
@ -49,8 +49,8 @@ order: 34
| controls | Array<表单项> | | `controls``body` 二选一,如果设置了 controls 优先显示表单集合。 | | controls | Array<表单项> | | `controls``body` 二选一,如果设置了 controls 优先显示表单集合。 |
- `title` panel 标题 - `title` panel 标题
- `body` [Container](../Types.md#container) 可以是其他渲染模型。 - `body` [SchemaNode](../../types/schemanode) 可以是其他渲染模型。
- `bodyClassName` body 的 className. - `bodyClassName` body 的 className.
- `footer` [Container](../Types.md#container) 可以是其他渲染模型。 - `footer` [SchemaNode](../../types/schemanode) 可以是其他渲染模型。
- `footerClassName` footer 的 className. - `footerClassName` footer 的 className.
- `controls``body` 二选一,如果设置了 controls 优先显示表单集合。 - `controls``body` 二选一,如果设置了 controls 优先显示表单集合。

View File

@ -82,7 +82,7 @@ order: 49
Service 中的`api`和`schemaApi`都支持**接口联动**。 Service 中的`api`和`schemaApi`都支持**接口联动**。
下面例子中,`数据模板`下拉框的值变化后,会触发 service 重新拉取 api 接口,从而更新数据源,变化表单项的值,更多用法查看 [接口联动](../concepts/linkage#%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8)。 下面例子中,`数据模板`下拉框的值变化后,会触发 service 重新拉取 api 接口,从而更新数据源,变化表单项的值,更多用法查看 [接口联动](../../concepts/linkage#%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8)。
```schema:height="300" scope="body" ```schema:height="300" scope="body"
{ {

View File

@ -7,6 +7,7 @@ menuName: Table 表格
icon: icon:
order: 54 order: 54
--- ---
## 基本用法 ## 基本用法
可以用来展示数组类型的数据。配置`columns` 数组,来定义列信息。 可以用来展示数组类型的数据。配置`columns` 数组,来定义列信息。
@ -86,7 +87,6 @@ order: 54
按钮上配置`"actionType": "add"`和`target`指定表格`name`,可以实现点击按钮添加一行的效果。 按钮上配置`"actionType": "add"`和`target`指定表格`name`,可以实现点击按钮添加一行的效果。
```schema:height="400" scope="body" ```schema:height="400" scope="body"
{ {
"type": "form", "type": "form",
@ -233,9 +233,9 @@ order: 54
| editable | `boolean` | `false` | 是否可编辑 | | editable | `boolean` | `false` | 是否可编辑 |
| removable | `boolean` | `false` | 是否可删除 | | removable | `boolean` | `false` | 是否可删除 |
| showAddBtn | `boolean` | `true` | 是否显示添加按钮 | | showAddBtn | `boolean` | `true` | 是否显示添加按钮 |
| addApi | [api](../Types.md#Api) | - | 新增时提交的 API | | addApi | [API](../../types/api) | - | 新增时提交的 API |
| updateApi | [api](../Types.md#Api) | - | 修改时提交的 API | | updateApi | [API](../../types/api) | - | 修改时提交的 API |
| deleteApi | [api](../Types.md#Api) | - | 删除时提交的 API | | deleteApi | [API](../../types/api) | - | 删除时提交的 API |
| addBtnLabel | `string` | | 增加按钮名称 | | addBtnLabel | `string` | | 增加按钮名称 |
| addBtnIcon | `string` | `"fa fa-plus"` | 增加按钮图标 | | addBtnIcon | `string` | `"fa fa-plus"` | 增加按钮图标 |
| updateBtnLabel | `string` | `""` | 更新按钮名称 | | updateBtnLabel | `string` | `""` | 更新按钮名称 |
@ -249,8 +249,3 @@ order: 54
| columns | `array` | [] | 列信息 | | columns | `array` | [] | 列信息 |
| columns[x].quickEdit | `boolean` 或者 `object` | - | 配合 editable 为 true 一起使用 | | columns[x].quickEdit | `boolean` 或者 `object` | - | 配合 editable 为 true 一起使用 |
| columns[x].quickEditOnUpdate | `boolean` 或者 `object` | - | 可以用来区分新建模式和更新模式的编辑配置 | | columns[x].quickEditOnUpdate | `boolean` 或者 `object` | - | 可以用来区分新建模式和更新模式的编辑配置 |

View File

@ -463,35 +463,35 @@ order: 59
当做选择器表单项使用时,除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置 当做选择器表单项使用时,除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置
| 属性名 | 类型 | 默认值 | 说明 | | 属性名 | 类型 | 默认值 | 说明 |
| ------------- | --------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------- | | ------------- | ------------------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------- |
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) | | options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
| source | `string`或 [API](../../types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) | | source | `string`或 [API](../../../types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
| autoComplete | [API](../../types/api) | | [自动提示补全](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete) | | autoComplete | [API](../../../types/api) | | [自动提示补全](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete) |
| multiple | `boolean` | `false` | 是否多选 | | multiple | `boolean` | `false` | 是否多选 |
| delimeter | `string` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) | | delimeter | `string` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) | | labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) | | valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
| joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) | | joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) |
| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) | | extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) |
| creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) | | creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) |
| addControls | Array<[表单项](./formitem)> | | [自定义新增表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E9%A1%B9-addcontrols) | | addControls | Array<[表单项](./formitem)> | | [自定义新增表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E9%A1%B9-addcontrols) |
| addApi | [API](../types/api) | | [配置新增选项接口](./options#%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi) | | addApi | [API](../../types/api) | | [配置新增选项接口](./options#%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi) |
| editable | `boolean` | `false` | [编辑选项](./options#%E5%89%8D%E7%AB%AF%E7%BC%96%E8%BE%91-editable) | | editable | `boolean` | `false` | [编辑选项](./options#%E5%89%8D%E7%AB%AF%E7%BC%96%E8%BE%91-editable) |
| editControls | Array<[表单项](./formitem)> | | [自定义编辑表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BC%96%E8%BE%91%E8%A1%A8%E5%8D%95%E9%A1%B9-editcontrols) | | editControls | Array<[表单项](./formitem)> | | [自定义编辑表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BC%96%E8%BE%91%E8%A1%A8%E5%8D%95%E9%A1%B9-editcontrols) |
| editApi | [API](../types/api) | | [配置编辑选项接口](./options#%E9%85%8D%E7%BD%AE%E7%BC%96%E8%BE%91%E6%8E%A5%E5%8F%A3-editapi) | | editApi | [API](../../types/api) | | [配置编辑选项接口](./options#%E9%85%8D%E7%BD%AE%E7%BC%96%E8%BE%91%E6%8E%A5%E5%8F%A3-editapi) |
| removable | `boolean` | `false` | [删除选项](./options#%E5%88%A0%E9%99%A4%E9%80%89%E9%A1%B9) | | removable | `boolean` | `false` | [删除选项](./options#%E5%88%A0%E9%99%A4%E9%80%89%E9%A1%B9) |
| deleteApi | [API](../types/api) | | [配置删除选项接口](./options#%E9%85%8D%E7%BD%AE%E5%88%A0%E9%99%A4%E6%8E%A5%E5%8F%A3-deleteapi) | | deleteApi | [API](../../types/api) | | [配置删除选项接口](./options#%E9%85%8D%E7%BD%AE%E5%88%A0%E9%99%A4%E6%8E%A5%E5%8F%A3-deleteapi) |
| hideRoot | `boolean` | `true` | 如果想要显示个顶级节点,请设置为 `false` | | hideRoot | `boolean` | `true` | 如果想要显示个顶级节点,请设置为 `false` |
| rootLabel | `boolean` | `"顶级"` | 当 `hideRoot` 不为 `false` 时有用,用来设置顶级节点的文字。 | | rootLabel | `boolean` | `"顶级"` | 当 `hideRoot` 不为 `false` 时有用,用来设置顶级节点的文字。 |
| showIcon | `boolean` | `true` | 是否显示图标 | | showIcon | `boolean` | `true` | 是否显示图标 |
| showRadio | `boolean` | `false` | 是否显示单选按钮,`multiple` 为 `false` 是有效。 | | showRadio | `boolean` | `false` | 是否显示单选按钮,`multiple` 为 `false` 是有效。 |
| initiallyOpen | `boolean` | `true` | 设置是否默认展开所有层级。 | | initiallyOpen | `boolean` | `true` | 设置是否默认展开所有层级。 |
| unfoldedLevel | `number` | `0` | 设置默认展开的级数,只有`initiallyOpen`不是`true`时生效。 | | unfoldedLevel | `number` | `0` | 设置默认展开的级数,只有`initiallyOpen`不是`true`时生效。 |
| cascade | `boolean` | `false` | 当选中父节点时不自动选择子节点。 | | cascade | `boolean` | `false` | 当选中父节点时不自动选择子节点。 |
| withChildren | `boolean` | `false` | 选中父节点时,值里面将包含子节点的值,否则只会保留父节点的值。 | | withChildren | `boolean` | `false` | 选中父节点时,值里面将包含子节点的值,否则只会保留父节点的值。 |
| onlyChildren | `boolean` | `false` | 多选时,选中父节点时,是否只将其子节点加入到值中。 | | onlyChildren | `boolean` | `false` | 多选时,选中父节点时,是否只将其子节点加入到值中。 |
| rootCreatable | `boolean` | `false` | 是否可以创建顶级节点 | | rootCreatable | `boolean` | `false` | 是否可以创建顶级节点 |
| rootCreateTip | `string` | `"添加一级节点"` | 创建顶级节点的悬浮提示 | | rootCreateTip | `string` | `"添加一级节点"` | 创建顶级节点的悬浮提示 |
| minLength | `number` | | 最少选中的节点数 | | minLength | `number` | | 最少选中的节点数 |
| maxLength | `number` | | 最多选中的节点数 | | maxLength | `number` | | 最多选中的节点数 |

View File

@ -14,7 +14,7 @@ amis 中部分组件,作为展示组件,自身没有**使用接口初始化
## 基本使用 ## 基本使用
最基本的使用,是配置初始化接口`api`,将接口返回的数据添加到自身的数据域中,以供子组件通过[数据链](./datascope-and-datachain#%E6%95%B0%E6%8D%AE%E9%93%BE)进行获取使用。 最基本的使用,是配置初始化接口`api`,将接口返回的数据添加到自身的数据域中,以供子组件通过[数据链](../concepts/datascope-and-datachain#%E6%95%B0%E6%8D%AE%E9%93%BE)进行获取使用。
```schema:height="200" scope="body" ```schema:height="200" scope="body"
{ {
@ -277,7 +277,7 @@ amis 中部分组件,作为展示组件,自身没有**使用接口初始化
上例可看到,变更**数据模板**的值,会触发 service 重新请求,并更新当前数据域中的数据 上例可看到,变更**数据模板**的值,会触发 service 重新请求,并更新当前数据域中的数据
更多相关见[接口联动](./linkage#%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8) 更多相关见[接口联动](../concepts/linkage#%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8)
## 属性表 ## 属性表

View File

@ -7,6 +7,7 @@ menuName: Table 表格
icon: icon:
order: 67 order: 67
--- ---
表格展示,不支持配置初始化接口初始化数据域,所以需要搭配类似像`Service`这样的,具有配置接口初始化数据域功能的组件,或者手动进行数据域初始化,然后通过`source`属性,获取数据链中的数据,完成数据展示。 表格展示,不支持配置初始化接口初始化数据域,所以需要搭配类似像`Service`这样的,具有配置接口初始化数据域功能的组件,或者手动进行数据域初始化,然后通过`source`属性,获取数据链中的数据,完成数据展示。
## 基本用法 ## 基本用法
@ -510,7 +511,6 @@ order: 67
} }
``` ```
还可以配置"offset",实现弹出框位置调整自定义 还可以配置"offset",实现弹出框位置调整自定义
```schema:height="600" scope="body" ```schema:height="600" scope="body"
@ -539,7 +539,6 @@ order: 67
} }
``` ```
## 嵌套 ## 嵌套
当行数据中存在 children 属性时,可以自动嵌套显示下去。 当行数据中存在 children 属性时,可以自动嵌套显示下去。
@ -782,15 +781,14 @@ order: 67
```json ```json
{ {
"footable": { "footable": {
"expand": "first" "expand": "first"
} }
} }
``` ```
当配置成 `all` 时表示全部展开。 当配置成 `all` 时表示全部展开。
## 合并单元格 ## 合并单元格
只需要配置 `combineNum` 属性即可,他表示从左到右多少列内启动自动合并单元格,只要多行的同一个属性值是一样的,就会自动合并。 只需要配置 `combineNum` 属性即可,他表示从左到右多少列内启动自动合并单元格,只要多行的同一个属性值是一样的,就会自动合并。
@ -1017,24 +1015,18 @@ order: 67
## 属性表 ## 属性表
| 属性名 | 类型 | 默认值 | 说明 | | 属性名 | 类型 | 默认值 | 说明 |
| ---------------- | ------------------------------ | ------------------------- | ------------------------------------------------------- | | ---------------- | --------------------------------------------- | ------------------------- | ------------------------------------------------------- |
| type | `string` | | `"type"` 指定为 table 渲染器 | | type | `string` | | `"type"` 指定为 table 渲染器 |
| title | `string` | | 标题 | | title | `string` | | 标题 |
| source | `string` | `${items}` | 数据源, 绑定当前环境变量 | | source | `string` | `${items}` | 数据源, 绑定当前环境变量 |
| affixHeader | `boolean` | `true` | 是否固定表头 | | affixHeader | `boolean` | `true` | 是否固定表头 |
| columnsTogglable | `auto` 或者 `boolean` | `auto` | 展示列显示开关, 自动即:列数量大于或等于 5 个时自动开启 | | columnsTogglable | `auto` 或者 `boolean` | `auto` | 展示列显示开关, 自动即:列数量大于或等于 5 个时自动开启 |
| placeholder | string | `暂无数据` | 当没数据的时候的文字提示 | | placeholder | string | `暂无数据` | 当没数据的时候的文字提示 |
| className | `string` | `panel-default` | 外层 CSS 类名 | | className | `string` | `panel-default` | 外层 CSS 类名 |
| tableClassName | `string` | `table-db table-striped` | 表格 CSS 类名 | | tableClassName | `string` | `table-db table-striped` | 表格 CSS 类名 |
| headerClassName | `string` | `Action.md-table-header` | 顶部外层 CSS 类名 | | headerClassName | `string` | `Action.md-table-header` | 顶部外层 CSS 类名 |
| footerClassName | `string` | `Action.md-table-footer` | 底部外层 CSS 类名 | | footerClassName | `string` | `Action.md-table-footer` | 底部外层 CSS 类名 |
| toolbarClassName | `string` | `Action.md-table-toolbar` | 工具栏 CSS 类名 | | toolbarClassName | `string` | `Action.md-table-toolbar` | 工具栏 CSS 类名 |
| columns | Array of [Column](./Column.md) | | 用来设置列信息 | | columns | Array<[Column](#%E5%88%97%E9%85%8D%E7%BD%AE)> | | 用来设置列信息 |
| combineNum | `number` | | 自动合并单元格 | | combineNum | `number` | | 自动合并单元格 |

View File

@ -7,6 +7,7 @@ menuName: Tabs
icon: icon:
order: 68 order: 68
--- ---
## 基本用法 ## 基本用法
```schema:height="300" scope="body" ```schema:height="300" scope="body"
@ -129,7 +130,7 @@ order: 68
} }
``` ```
## 配置hash ## 配置 hash
可以在单个`tab`下,配置`hash`属性,支持地址栏`#xxx`。 可以在单个`tab`下,配置`hash`属性,支持地址栏`#xxx`。
@ -156,7 +157,7 @@ order: 68
主要配置`activeKey`属性来实现该效果,共有下面两种方法: 主要配置`activeKey`属性来实现该效果,共有下面两种方法:
#### 配置hash值 #### 配置 hash
```schema:height="300" scope="body" ```schema:height="300" scope="body"
{ {
@ -202,7 +203,7 @@ order: 68
## unmountOnExit ## unmountOnExit
如果你想在切换tab时自动销毁掉隐藏的tab请配置`"unmountOnExit": true` 如果你想在切换 tab 时,自动销毁掉隐藏的 tab请配置`"unmountOnExit": true`
## 属性表 ## 属性表
@ -212,18 +213,12 @@ order: 68
| className | `string` | | 外层 Dom 的类名 | | className | `string` | | 外层 Dom 的类名 |
| tabsClassName | `string` | | Tabs Dom 的类名 | | tabsClassName | `string` | | Tabs Dom 的类名 |
| tabs | `Array` | | tabs 内容 | | tabs | `Array` | | tabs 内容 |
| toolbar | [Container](./Types.md#container) | | tabs 中的工具栏 | | toolbar | [SchemaNode](../types/schemanode) | | tabs 中的工具栏 |
| toolbarClassName | `string` | | tabs 中工具栏的类名 | | toolbarClassName | `string` | | tabs 中工具栏的类名 |
| tabs[x].title | `string` | | Tab 标题 | | tabs[x].title | `string` | | Tab 标题 |
| tabs[x].icon | `icon` | | Tab 的图标 | | tabs[x].icon | `icon` | | Tab 的图标 |
| tabs[x].tab | [Container](./Types.md#container) | | 内容区 | | tabs[x].tab | [SchemaNode](../types/schemanode) | | 内容区 |
| tabs[x].hash | `string` | | 设置以后将跟 url 的 hash 对应 | | tabs[x].hash | `string` | | 设置以后将跟 url 的 hash 对应 |
| tabs[x].reload | `boolean` | | 设置以后内容每次都会重新渲染,对于 crud 的重新拉取很有用 | | tabs[x].reload | `boolean` | | 设置以后内容每次都会重新渲染,对于 crud 的重新拉取很有用 |
| tabs[x].unmountOnExit | `boolean` | | 每次退出都会销毁当前tab栏内容 | | tabs[x].unmountOnExit | `boolean` | | 每次退出都会销毁当前 tab 栏内容 |
| tabs[x].className | `string` | `"bg-white b-l b-r b-b wrapper-md"` | Tab 区域样式 | | tabs[x].className | `string` | `"bg-white b-l b-r b-b wrapper-md"` | Tab 区域样式 |

View File

@ -7,6 +7,7 @@ menuName: Tasks
icon: icon:
order: 69 order: 69
--- ---
任务操作集合,类似于 orp 上线。 任务操作集合,类似于 orp 上线。
## 基本用法 ## 基本用法
@ -38,30 +39,30 @@ order: 69
## 属性表 ## 属性表
| 属性名 | 类型 | 默认值 | 说明 | | 属性名 | 类型 | 默认值 | 说明 |
| ----------------- | --------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | ----------------- | ------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| type | `string` | `"tasks"` | 指定为 Tasks 渲染器 | | type | `string` | `"tasks"` | 指定为 Tasks 渲染器 |
| className | `string` | | 外层 Dom 的类名 | | className | `string` | | 外层 Dom 的类名 |
| tableClassName | `string` | | table Dom 的类名 | | tableClassName | `string` | | table Dom 的类名 |
| items | `Array` | | 任务列表 | | items | `Array` | | 任务列表 |
| items[x].label | `string` | | 任务名称 | | items[x].label | `string` | | 任务名称 |
| items[x].key | `string` | | 任务键值,请唯一区分 | | items[x].key | `string` | | 任务键值,请唯一区分 |
| items[x].remark | `string` | | 当前任务状态,支持 html | | items[x].remark | `string` | | 当前任务状态,支持 html |
| items[x].status | `string` | | 任务状态: 0: 初始状态不可操作。1: 就绪可操作状态。2: 进行中还没有结束。3有错误不可重试。4: 已正常结束。5有错误且可以重试。 | | items[x].status | `string` | | 任务状态: 0: 初始状态不可操作。1: 就绪可操作状态。2: 进行中还没有结束。3有错误不可重试。4: 已正常结束。5有错误且可以重试。 |
| checkApi | [api](./Types.md#api) | | 返回任务列表,返回的数据请参考 items。 | | checkApi | [API](../types/api) | | 返回任务列表,返回的数据请参考 items。 |
| submitApi | [api](./Types.md#api) | | 提交任务使用的 API | | submitApi | [API](../types/api) | | 提交任务使用的 API |
| reSubmitApi | [api](./Types.md#api) | | 如果任务失败,且可以重试,提交的时候会使用此 API | | reSubmitApi | [API](../types/api) | | 如果任务失败,且可以重试,提交的时候会使用此 API |
| interval | `number` | `3000` | 当有任务进行中,会每隔一段时间再次检测,而时间间隔就是通过此项配置,默认 3s。 | | interval | `number` | `3000` | 当有任务进行中,会每隔一段时间再次检测,而时间间隔就是通过此项配置,默认 3s。 |
| taskNameLabel | `string` | 任务名称 | 任务名称列说明 | | taskNameLabel | `string` | 任务名称 | 任务名称列说明 |
| operationLabel | `string` | 操作 | 操作列说明 | | operationLabel | `string` | 操作 | 操作列说明 |
| statusLabel | `string` | 状态 | 状态列说明 | | statusLabel | `string` | 状态 | 状态列说明 |
| remarkLabel | `string` | 备注 | 备注列说明 | | remarkLabel | `string` | 备注 | 备注列说明 |
| btnText | `string` | 上线 | 操作按钮文字 | | btnText | `string` | 上线 | 操作按钮文字 |
| retryBtnText | `string` | 重试 | 重试操作按钮文字 | | retryBtnText | `string` | 重试 | 重试操作按钮文字 |
| btnClassName | `string` | `btn-sm btn-default` | 配置容器按钮 className | | btnClassName | `string` | `btn-sm btn-default` | 配置容器按钮 className |
| retryBtnClassName | `string` | `btn-sm btn-danger` | 配置容器重试按钮 className | | retryBtnClassName | `string` | `btn-sm btn-danger` | 配置容器重试按钮 className |
| statusLabelMap | `array` | `["label-warning", "label-info", "label-success", "label-danger", "label-default", "label-danger"]` | 状态显示对应的类名配置 | | statusLabelMap | `array` | `["label-warning", "label-info", "label-success", "label-danger", "label-default", "label-danger"]` | 状态显示对应的类名配置 |
| statusTextMap | `array` | `["未开始", "就绪", "进行中", "出错", "已完成", "出错"]` | 状态显示对应的文字显示配置 | | statusTextMap | `array` | `["未开始", "就绪", "进行中", "出错", "已完成", "出错"]` | 状态显示对应的文字显示配置 |
```schema:height="300" scope="body" ```schema:height="300" scope="body"
[ [
@ -73,9 +74,3 @@ order: 69
"为了演示,目前获取的状态都是随机出现的。"] "为了演示,目前获取的状态都是随机出现的。"]
``` ```

View File

@ -8,7 +8,7 @@ icon:
order: 70 order: 70
--- ---
输出 [模板](./concepts/template) 的常用组件 输出 [模板](../concepts/template) 的常用组件
## 基本用法 ## 基本用法

View File

@ -53,7 +53,7 @@ order: 12
> `dialog`是容器,也就意味着可以在`body`属性中配置其他组件 > `dialog`是容器,也就意味着可以在`body`属性中配置其他组件
完整的行为列表可以查看 [action](./action-button)组件 完整的行为列表可以查看 [action](../components/action)组件
### 组件所支持的行为 ### 组件所支持的行为

View File

@ -143,11 +143,119 @@ order: 12
## 复杂配置 ## 复杂配置
### 获取数据域中所有值 ### 展开所配置的数据
可以使用`"&"`,作为数据映射 key展开所配置的变量例如
下面例子中,我们想在提交的时候,除了提交 `name``email` 变量以外,还想添加 `c` 下面的所有变量 `e`,`f`,`g`,但是按照之前所讲的, api 应该这么配置:
```schema:height="350" scope="body"
{
"type": "form",
"data": {
"a": "1",
"b": "2",
"c": {
"e": "3",
"f": "4",
"g": "5"
}
},
"api": {
"url": "https://houtai.baidu.com/api/mock2/form/saveForm",
"method": "post",
"data": {
"name": "${name}",
"email": "${email}",
"e": "${c.e}",
"f": "${c.f}",
"g": "${c.g}"
}
},
"controls": [
{
"type": "text",
"name": "name",
"label": "姓名:"
},
{
"name": "email",
"type": "text",
"label": "邮箱:"
}
]
}
```
点击提交查看网络面板数据,你会发现数据是符合预期的:
```json ```json
{ {
"&": "$$" "name": "rick",
"email": "rick@gmail.comn",
"e": "3",
"f": "4",
"g": "5"
}
```
但是当变量字段过多的时候,你需要一一映射配置,也许有点麻烦,所以可以使用`"&"`标识符,来展开所配置变量:
```schema:height="350" scope="body"
{
"type": "form",
"data": {
"a": "1",
"b": "2",
"c": {
"e": "3",
"f": "4",
"g": "5"
}
},
"api": {
"url": "https://houtai.baidu.com/api/mock2/form/saveForm",
"method": "post",
"data": {
"name": "${name}",
"email": "${email}",
"&": "${c}"
}
},
"controls": [
{
"type": "text",
"name": "name",
"label": "姓名:"
},
{
"name": "email",
"type": "text",
"label": "邮箱:"
}
]
}
```
上例中我们 api.data 配置如下:
```json
"data": {
"name": "${name}",
"email": "${email}",
"&": "${c}"
}
```
`"&"`标识符会将所配置的`c`变量的`value`值,展开并拼接在`data`中。查看网络面板可以看到数据如下:
```json
{
"name": "rick",
"email": "rick@gmail.comn",
"e": "3",
"f": "4",
"g": "5"
} }
``` ```
@ -364,7 +472,7 @@ ${xxx | toJson}
} }
``` ```
对`Javascript`的直接输出会显示`[object Object]`,你可以使用 [json过滤器](./data-mapping#json) 来格式化显示`json`文本。 对`Javascript`的直接输出会显示`[object Object]`,你可以使用 [json 过滤器](./data-mapping#json) 来格式化显示`json`文本。
### date ### date
@ -504,6 +612,7 @@ ${xxx | percent[:decimals]}
### round ### round
四舍五入取整 四舍五入取整
``` ```
${xxx | round[:decimals]} ${xxx | round[:decimals]}
``` ```
@ -548,6 +657,7 @@ ${xxx | round[:decimals]}
``` ```
${xxx | truncate[:length][:mask]} ${xxx | truncate[:length][:mask]}
``` ```
- **length**:指定多长的字符后省略,默认为`200` - **length**:指定多长的字符后省略,默认为`200`
- **mask**:省略时显示的字符,默认为`"..."` - **mask**:省略时显示的字符,默认为`"..."`
@ -809,7 +919,7 @@ ${xxx | pick[:path]}
} }
``` ```
##### 遍历数组对象并自定义key ##### 遍历数组对象,并自定义 key
```schema:height="200" ```schema:height="200"
{ {
@ -1080,7 +1190,7 @@ ${xxx | isTrue[:trueValue][:falseValue]
${xxx | isFalse[:falseValue][:trueValue] ${xxx | isFalse[:falseValue][:trueValue]
``` ```
用法与 [isTrue过滤器](#istrue) 相同,判断逻辑相反 用法与 [isTrue 过滤器](#istrue) 相同,判断逻辑相反
### isMatch ### isMatch
@ -1091,9 +1201,10 @@ ${xxx | isFalse[:falseValue][:trueValue]
``` ```
${xxx | isMatch[:matchParam][:trueValue][:falseValue] ${xxx | isMatch[:matchParam][:trueValue][:falseValue]
``` ```
- **matchParam**: 匹配关键字参数 - **matchParam**: 匹配关键字参数
- 如果想模糊匹配特定字符串,那么参数需要在两边添加单引号或者双引号; - 如果想模糊匹配特定字符串,那么参数需要在两边添加单引号或者双引号;
- 如果想模糊匹配某个变量值,那么参数不需要添加引号。 - 如果想模糊匹配某个变量值,那么参数不需要添加引号。
- **trueValue**: 如果模糊匹配成功,即返回该值; - **trueValue**: 如果模糊匹配成功,即返回该值;
- **falseValue**: 如果模糊匹配失败,则返回该值。 - **falseValue**: 如果模糊匹配失败,则返回该值。
@ -1170,8 +1281,8 @@ ${xxx | isEquals[:equalsValue][:trueValue][:falseValue]
``` ```
- **equalsValue**: 全等匹配关键字参数 - **equalsValue**: 全等匹配关键字参数
- 如果想判断等于特定字符串,那么参数需要在两边添加单引号或者双引号; - 如果想判断等于特定字符串,那么参数需要在两边添加单引号或者双引号;
- 如果想判断等于某个变量值,那么参数不需要添加引号。 - 如果想判断等于某个变量值,那么参数不需要添加引号。
- **trueValue**: 如果模糊匹配成功,即返回该值; - **trueValue**: 如果模糊匹配成功,即返回该值;
- **falseValue**: 如果模糊匹配失败,则返回该值。 - **falseValue**: 如果模糊匹配失败,则返回该值。
@ -1248,6 +1359,7 @@ ${xxx | notEquals[:equalsValue][:trueValue][:falseValue]
``` ```
${xxx | filter[:keys][:directive][:arg1]} ${xxx | filter[:keys][:directive][:arg1]}
``` ```
- **keys**: 参与过滤的字段集合 - **keys**: 参与过滤的字段集合
- **directive**: 用于过滤数组的指令,包含下面这几种 - **directive**: 用于过滤数组的指令,包含下面这几种
- `isTrue` 目标值为真通过筛选。 - `isTrue` 目标值为真通过筛选。
@ -1287,9 +1399,3 @@ ${xxx|filter1|filter2|...}
1. 会先执行`split`过滤器,将字符串`a,b,c`,拆分成数组`["a", "b", "c"]` 1. 会先执行`split`过滤器,将字符串`a,b,c`,拆分成数组`["a", "b", "c"]`
2. 然后将该数据传给下一个过滤器`first`,执行该过滤器,获取数组第一个元素,为`"a"` 2. 然后将该数据传给下一个过滤器`first`,执行该过滤器,获取数组第一个元素,为`"a"`
3. 输出`"a"` 3. 输出`"a"`

View File

@ -191,7 +191,7 @@ page
很明显在`service`数据域中寻找`age`变量会失败,因此向上查找,尝试在`page`数据域中寻找`age`变量,找到为`20`,寻找变量结束,通过数据映射渲染,输出:`my name is lisi, I'm 20 years old`,渲染结束。 很明显在`service`数据域中寻找`age`变量会失败,因此向上查找,尝试在`page`数据域中寻找`age`变量,找到为`20`,寻找变量结束,通过数据映射渲染,输出:`my name is lisi, I'm 20 years old`,渲染结束。
> **注意:** 当前例子中,对数据域中数据的获取使用的是 **\${xxx}** 模板语法,但是在不同的组件配置项中,获取数据的语法会有差异,我们会在后续的[模板](../concepts/template)和[表达式章节](../concepts/expression)中一一介绍。 > **注意:** 当前例子中,对数据域中数据的获取使用的是 **\${xxx}** 模板语法,但是在不同的组件配置项中,获取数据的语法会有差异,我们会在后续的[模板](./template)和[表达式章节](./expression)中一一介绍。
## 初始化数据域 ## 初始化数据域
@ -250,7 +250,7 @@ page
} }
``` ```
> `api` 除了配置字符串格式以外,还可以配置复杂对象结构,更多详情查看[API 文档](./api) > `api` 除了配置字符串格式以外,还可以配置复杂对象结构,更多详情查看[API 文档](../types/api)
### 2. 显式配置 data 属性值 ### 2. 显式配置 data 属性值

View File

@ -19,7 +19,7 @@ order: 14
- 某个条件下轮训接口停止轮训 - 某个条件下轮训接口停止轮训
- 等等... - 等等...
> 联动配置项一般都是 [表达式](../concepts/expression) > 联动配置项一般都是 [表达式](./expression)
### 组件配置联动 ### 组件配置联动
@ -192,7 +192,7 @@ order: 14
} }
``` ```
更多用法,见:[Api-配置请求条件](./types-api#%E9%85%8D%E7%BD%AE%E8%AF%B7%E6%B1%82%E6%9D%A1%E4%BB%B6) 更多用法,见:[Api-配置请求条件](../types/api#%E9%85%8D%E7%BD%AE%E8%AF%B7%E6%B1%82%E6%9D%A1%E4%BB%B6)
#### 主动触发 #### 主动触发
@ -340,7 +340,7 @@ order: 14
更改配置后,提交表单时,如果有配置提交接口,会先请求提交,之后 amis 会寻找`target`所配置的目标组件,把`form`中所提交的数据,发送给该目标组件中,并将该数据**合并**到目标组件的数据域中,并触发目标组件的刷新操作,对于 CRUD 组件来说,刷新即重新拉取数据接口。 更改配置后,提交表单时,如果有配置提交接口,会先请求提交,之后 amis 会寻找`target`所配置的目标组件,把`form`中所提交的数据,发送给该目标组件中,并将该数据**合并**到目标组件的数据域中,并触发目标组件的刷新操作,对于 CRUD 组件来说,刷新即重新拉取数据接口。
> 当然,`crud`组件内置已经支持此功能,你只需要配置`crud`中的`filter`属性,就可以实现上面的效果,更多内容查看 [crud -> filter](./crud) 文档。 > 当然,`crud`组件内置已经支持此功能,你只需要配置`crud`中的`filter`属性,就可以实现上面的效果,更多内容查看 [crud -> filter](../components/crud) 文档。
我们再来一个例子,这次我们实现两个`form`之间的联动: 我们再来一个例子,这次我们实现两个`form`之间的联动:

View File

@ -356,7 +356,7 @@ class MyFormItem extends React.Component {
#### 自定义验证器 #### 自定义验证器
如果 amis [自带的验证](./renderers/Form/FormItem.md#)能满足需求了,则不需要关心。组件可以有自己的验证逻辑。 如果 amis [自带的验证](../components/form/formitem.md)能满足需求了,则不需要关心。组件可以有自己的验证逻辑。
```jsx ```jsx
import * as React from 'react'; import * as React from 'react';

View File

@ -502,7 +502,7 @@ const schema = {
### 配置接收适配器 ### 配置接收适配器
同样的,如果后端返回的响应结构不符合 amis 的[接口格式要求](./types-api#%E6%8E%A5%E5%8F%A3%E8%BF%94%E5%9B%9E%E6%A0%BC%E5%BC%8F-%E9%87%8D%E8%A6%81-),而后端不方便调整时,可以配置`adaptor`实现接收适配器 同样的,如果后端返回的响应结构不符合 amis 的[接口格式要求](#%E6%8E%A5%E5%8F%A3%E8%BF%94%E5%9B%9E%E6%A0%BC%E5%BC%8F-%E9%87%8D%E8%A6%81-),而后端不方便调整时,可以配置`adaptor`实现接收适配器
**接受欧适配器**是指在接口请求后,对响应进行一些自定义处理,例如修改响应的数据结构、修改响应的数据等等。 **接受欧适配器**是指在接口请求后,对响应进行一些自定义处理,例如修改响应的数据结构、修改响应的数据等等。