diff --git a/docs/components/form/diff-editor.md b/docs/components/form/diff-editor.md index d2df9f356..38d157769 100755 --- a/docs/components/form/diff-editor.md +++ b/docs/components/form/diff-editor.md @@ -1,10 +1,10 @@ --- title: DiffEditor 对比编辑器 -description: +description: type: 0 group: null menuName: DiffEditor 对比编辑器 -icon: +icon: order: 17 --- @@ -79,12 +79,7 @@ order: 17 除了支持 [普通表单项属性表](./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) | -| diffValue | [模板](./..template) | | 日期选择器值格式，更多格式类型请参考 [moment](http://momentjs.com/) | - - - - - +| 属性名 | 类型 | 默认值 | 说明 | +| --------- | ------------- | ------------ | ------------------------------------------------------------------------------------------- | +| language | `string` | `javascript` | 编辑器高亮的语言，可选 [支持的语言](./editor#%E6%94%AF%E6%8C%81%E7%9A%84%E8%AF%AD%E8%A8%80) | +| diffValue | [Tpl](../tpl) | | 左侧值 | diff --git a/docs/components/form/file.md b/docs/components/form/file.md index 649b53e2a..da63dc21b 100755 --- a/docs/components/form/file.md +++ b/docs/components/form/file.md @@ -81,25 +81,25 @@ order: 21 除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 -| 属性名 | 类型 | 默认值 | 说明 | -| ---------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -| reciever | [API](../../types/api) | | 上传文件接口 | -| accept | `string` | `text/plain` | 默认只支持纯文本，要支持其他类型，请配置此属性为文件后缀`.xxx` | -| asBase64 | `boolean` | `false` | 将文件以`base64`的形式，赋值给当前组件 | -| asBlob | `boolean` | `false` | 将文件以二进制的形式，赋值给当前组件 | -| maxSize | `string` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`KB` | -| maxLength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 | -| multiple | `boolean` | `false` | 是否多选。 | -| 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) | -| delimeter | `string` | `,` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) | -| autoUpload | `boolean` | `true` | 否选择完就自动开始上传 | -| hideUploadButton | `boolean` | `false` | 隐藏上传按钮 | -| stateTextMap | [stateTextMap](./stateTextMap) | `{ init: '', pending: '等待上传', uploading: '上传中', error: '上传出错', uploaded: '已上传', ready: '' }` | 上传状态文案 | -| fileField | `string` | `file` | 如果你不想自己存储，则可以忽略此属性。 | -| downloadUrl | `boolean`或`string` | `""` | 默认显示文件路径的时候会支持直接下载，可以支持加前缀如：`http://xx.dom/filename=` ，如果不希望这样，可以把当前配置项设置为 `false`。 | -| useChunk | `boolean`或`"auto"` | `"auto"` | amis 所在服务器，限制了文件上传大小不得超出 10M，所以 amis 在用户选择大文件的时候，自动会改成分块上传模式。 | -| chunkSize | `number` | `5 * 1024 * 1024` | 分块大小 | -| startChunkApi | [API](../../types/api) | | startChunkApi | -| chunkApi | [API](../../types/api) | | chunkApi | -| finishChunkApi | [API](../../types/api) | | finishChunkApi | +| 属性名 | 类型 | 默认值 | 说明 | +| ---------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | +| reciever | [API](../../types/api) | | 上传文件接口 | +| accept | `string` | `text/plain` | 默认只支持纯文本，要支持其他类型，请配置此属性为文件后缀`.xxx` | +| asBase64 | `boolean` | `false` | 将文件以`base64`的形式，赋值给当前组件 | +| asBlob | `boolean` | `false` | 将文件以二进制的形式，赋值给当前组件 | +| maxSize | `string` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`KB` | +| maxLength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 | +| multiple | `boolean` | `false` | 是否多选。 | +| 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) | +| delimeter | `string` | `,` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) | +| autoUpload | `boolean` | `true` | 否选择完就自动开始上传 | +| hideUploadButton | `boolean` | `false` | 隐藏上传按钮 | +| stateTextMap | object | `{ init: '', pending: '等待上传', uploading: '上传中', error: '上传出错', uploaded: '已上传', ready: '' }` | 上传状态文案 | +| fileField | `string` | `file` | 如果你不想自己存储，则可以忽略此属性。 | +| downloadUrl | `boolean`或`string` | `""` | 默认显示文件路径的时候会支持直接下载，可以支持加前缀如：`http://xx.dom/filename=` ，如果不希望这样，可以把当前配置项设置为 `false`。 | +| useChunk | `boolean`或`"auto"` | `"auto"` | amis 所在服务器，限制了文件上传大小不得超出 10M，所以 amis 在用户选择大文件的时候，自动会改成分块上传模式。 | +| chunkSize | `number` | `5 * 1024 * 1024` | 分块大小 | +| startChunkApi | [API](../../types/api) | | startChunkApi | +| chunkApi | [API](../../types/api) | | chunkApi | +| finishChunkApi | [API](../../types/api) | | finishChunkApi | diff --git a/docs/components/form/formitem.md b/docs/components/form/formitem.md index abcb61188..e4c9a6ccd 100755 --- a/docs/components/form/formitem.md +++ b/docs/components/form/formitem.md @@ -327,7 +327,7 @@ order: 1 ### 满足条件校验必填 -你也通过[表达式](/docs/expression)配置`requiredOn`，来实现在某个条件下使当前表单项必填。 +你也通过[表达式](../../concepts/expression)配置`requiredOn`，来实现在某个条件下使当前表单项必填。 ```schema:height="400" scope="body" { @@ -551,22 +551,22 @@ amis 会有默认的报错信息，如果你想自定义校验信息，配置`va ## 属性表 -| 属性名 | 类型 | 默认值 | 说明 | -| -------------- | ----------------------------------- | ------ | ---------------------------------------------------------- | -| type | `string` | | 指定表单项类型 | -| className | `string` | | 表单最外层类名 | -| inputClassName | `string` | | 表单控制器类名 | -| labelClassName | `string` | | label 的类名 | -| name | `string` | | 字段名，指定该表单项提交时的 key | -| label | [模板](../template) 或 `false` | | 表单项标签 | -| description | [模板](../template) | | 表单项描述 | -| placeholder | `string` | | 表单项描述 | -| inline | `boolean` | | 是否为 内联 模式 | -| submitOnChange | `boolean` | | 是否该表单项值发生变化时就提交当前表单。 | -| disabled | `boolean` | | 当前表单项是否是禁用状态 | -| disabledOn | [表达式](../../concepts/expression) | | 当前表单项是否禁用的条件 | -| visible | [表达式](../../concepts/expression) | | 当前表单项是否禁用的条件 | -| visibleOn | [表达式](../../concepts/expression) | | 当前表单项是否禁用的条件 | -| required | `boolean` | | 是否为必填。 | -| requiredOn | [表达式](../../concepts/expression) | | 过[表达式](../Types.md#表达式)来配置当前表单项是否为必填。 | -| validations | [表达式](../../concepts/expression) | | 表单项值格式验证，支持设置多个，多个规则用英文逗号隔开。 | +| 属性名 | 类型 | 默认值 | 说明 | +| -------------- | ------------------------------------------ | ------ | ---------------------------------------------------------- | +| type | `string` | | 指定表单项类型 | +| className | `string` | | 表单最外层类名 | +| inputClassName | `string` | | 表单控制器类名 | +| labelClassName | `string` | | label 的类名 | +| name | `string` | | 字段名，指定该表单项提交时的 key | +| label | [模板](../../concepts/template) 或 `false` | | 表单项标签 | +| description | [模板](../../concepts/template) | | 表单项描述 | +| placeholder | `string` | | 表单项描述 | +| inline | `boolean` | | 是否为 内联 模式 | +| submitOnChange | `boolean` | | 是否该表单项值发生变化时就提交当前表单。 | +| disabled | `boolean` | | 当前表单项是否是禁用状态 | +| disabledOn | [表达式](../../concepts/expression) | | 当前表单项是否禁用的条件 | +| visible | [表达式](../../concepts/expression) | | 当前表单项是否禁用的条件 | +| visibleOn | [表达式](../../concepts/expression) | | 当前表单项是否禁用的条件 | +| required | `boolean` | | 是否为必填。 | +| requiredOn | [表达式](../../concepts/expression) | | 过[表达式](../Types.md#表达式)来配置当前表单项是否为必填。 | +| validations | [表达式](../../concepts/expression) | | 表单项值格式验证，支持设置多个，多个规则用英文逗号隔开。 | diff --git a/docs/components/form/index.md b/docs/components/form/index.md index c8df536c3..dbdbe3930 100755 --- a/docs/components/form/index.md +++ b/docs/components/form/index.md @@ -739,45 +739,45 @@ Form 支持轮训初始化接口，步骤如下： ## 属性表 -| 属性名 | 类型 | 默认值 | 说明 | -| ----------------------------- | ------------------------------------ | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| 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` | 是否让 Form 用 panel 包起来，设置为 false 后，actions 将无效。 | -| [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 以后，默认拉取的时间间隔 | -| [asyncApi](#asyncApi) | [Api](../Types.md#api) | | 设置此属性后，表单提交发送保存接口后，还会继续轮训请求该接口，直到返回 `finished` 属性为 `true` 才 结束。 | -| checkInterval | `number` | 3000 | 轮训请求的时间间隔，默认为 3 秒。设置 `asyncApi` 才有效 | -| finishedField | `string` | `"finished"` | 如果决定结束的字段名不是 `finished` 请设置此属性，比如 `is_success` | -| submitOnChange | `boolean` | `false` | 表单修改即提交 | -| submitOnInit | `boolean` | `false` | 初始就提交一次 | -| resetAfterSubmit | `boolean` | `false` | 提交后是否重置表单 | -| primaryField | `string` | `"id"` | 设置主键 id, 当设置后，检测表单是否完成时（asyncApi），只会携带此数据。 | -| target | `string` | | 默认表单提交自己会通过发送 api 保存数据，但是也可以设定另外一个 form 的 name 值，或者另外一个 `CRUD` 模型的 name 值。 如果 target 目标是一个 `Form` ，则目标 `Form` 会重新触发 `initApi`，api 可以拿到当前 form 数据。如果目标是一个 `CRUD` 模型，则目标模型会重新触发搜索，参数为当前 Form 数据。当目标是 `window` 时，会把当前表单的数据附带到页面地址上。 | -| redirect | `string` | | 设置此属性后，Form 保存成功后，自动跳转到指定页面。支持相对地址，和绝对地址（相对于组内的）。 | -| reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 | -| autoFocus | `boolean` | `false` | 是否自动聚焦。 | -| canAccessSuperData | `boolean` | `true` | 指定是否可以自动获取上层的数据并映射到表单项上 | -| persistData | `boolean` | `true` | 指定表单是否开启本地缓存 | -| clearPersistDataAfterSubmit | `boolean` | `true` | 指定表单提交成功后是否清除本地缓存 | -| name | `string` | | 设置一个名字后，方便其他组件与其通信 | +| 属性名 | 类型 | 默认值 | 说明 | +| --------------------------- | --------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| 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<[表单项](./formItem)> | | Form 表单项集合 | +| actions | Array<[表单项](../action)> | | Form 提交按钮，成员为 Action | +| messages | `Object` | | 消息提示覆写，默认消息读取的是 API 返回的消息，但是在此可以覆写它。 | +| messages.fetchSuccess | `string` | | 获取成功时提示 | +| messages.fetchFailed | `string` | | 获取失败时提示 | +| messages.saveSuccess | `string` | | 保存成功时提示 | +| messages.saveFailed | `string` | | 保存失败时提示 | +| wrapWithPanel | `boolean` | `true` | 是否让 Form 用 panel 包起来，设置为 false 后，actions 将无效。 | +| panelClassName | `boolean` | `true` | 是否让 Form 用 panel 包起来，设置为 false 后，actions 将无效。 | +| api | [API](../../types/api) | | Form 用来保存数据的 api。 | +| initApi | [API](../../types/api) | | Form 用来获取初始数据的 api。 | +| interval | `number` | `3000` | 刷新时间(最低 3000) | +| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 | +| stopAutoRefreshWhen | `string` | `""` | 通过[表达式](./Types.md#表达式) 来配置停止刷新的条件 | +| initAsyncApi | [API](../../types/api) | | Form 用来获取初始数据的 api,与 initApi 不同的是，会一直轮训请求该接口，直到返回 finished 属性为 true 才 结束。 | +| initFetch | `boolean` | `true` | 设置了 initApi 或者 initAsyncApi 后，默认会开始就发请求，设置为 false 后就不会起始就请求接口 | +| initFetchOn | `string` | | 用表达式来配置 | +| initFinishedField | `string` | `finished` | 设置了 initAsyncApi 后，默认会从返回数据的 data.finished 来判断是否完成，也可以设置成其他的 xxx，就会从 data.xxx 中获取 | +| initCheckInterval | `number` | `3000` | 设置了 initAsyncApi 以后，默认拉取的时间间隔 | +| asyncApi | [API](../../types/api) | | 设置此属性后，表单提交发送保存接口后，还会继续轮训请求该接口，直到返回 `finished` 属性为 `true` 才 结束。 | +| checkInterval | `number` | 3000 | 轮训请求的时间间隔，默认为 3 秒。设置 `asyncApi` 才有效 | +| finishedField | `string` | `"finished"` | 如果决定结束的字段名不是 `finished` 请设置此属性，比如 `is_success` | +| submitOnChange | `boolean` | `false` | 表单修改即提交 | +| submitOnInit | `boolean` | `false` | 初始就提交一次 | +| resetAfterSubmit | `boolean` | `false` | 提交后是否重置表单 | +| primaryField | `string` | `"id"` | 设置主键 id, 当设置后，检测表单是否完成时（asyncApi），只会携带此数据。 | +| target | `string` | | 默认表单提交自己会通过发送 api 保存数据，但是也可以设定另外一个 form 的 name 值，或者另外一个 `CRUD` 模型的 name 值。 如果 target 目标是一个 `Form` ，则目标 `Form` 会重新触发 `initApi`，api 可以拿到当前 form 数据。如果目标是一个 `CRUD` 模型，则目标模型会重新触发搜索，参数为当前 Form 数据。当目标是 `window` 时，会把当前表单的数据附带到页面地址上。 | +| redirect | `string` | | 设置此属性后，Form 保存成功后，自动跳转到指定页面。支持相对地址，和绝对地址（相对于组内的）。 | +| reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 | +| autoFocus | `boolean` | `false` | 是否自动聚焦。 | +| canAccessSuperData | `boolean` | `true` | 指定是否可以自动获取上层的数据并映射到表单项上 | +| persistData | `boolean` | `true` | 指定表单是否开启本地缓存 | +| clearPersistDataAfterSubmit | `boolean` | `true` | 指定表单提交成功后是否清除本地缓存 | +| name | `string` | | 设置一个名字后，方便其他组件与其通信 | diff --git a/docs/components/form/input-group.md b/docs/components/form/input-group.md index 1c1a21588..4ed2ca8a2 100755 --- a/docs/components/form/input-group.md +++ b/docs/components/form/input-group.md @@ -1,12 +1,13 @@ --- title: Input-Group 输入框组合 -description: +description: type: 0 group: null menuName: Input-Group -icon: +icon: order: 28 --- + **输入框组合选择器** 可用于输入框与其他组件进行组合。 ## 基本用法 @@ -91,15 +92,16 @@ order: 28 ``` +## 校验 + +input-group 配置校验方法较为特殊，需要配置下面步骤： + +1. input-group 上配置任意`name`值 +2. input-group 的 controls 内配置的表单项上配置校验规则 + ## 属性表 | 属性名 | 类型 | 默认值 | 说明 | | --------- | --------------------------- | ------ | ---------- | | className | `string` | | CSS 类名 | | controls | Array<[表单项](./formitem)> | | 表单项集合 | - - - - - - diff --git a/docs/components/form/number.md b/docs/components/form/number.md index 009297c2b..75966f256 100755 --- a/docs/components/form/number.md +++ b/docs/components/form/number.md @@ -1,12 +1,13 @@ --- title: Number 数字输入框 -description: +description: type: 0 group: null menuName: Number -icon: +icon: order: 32 --- + ## 基本用法 ```schema:height="300" scope="body" @@ -27,14 +28,9 @@ order: 32 当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 -| 属性名 | 类型 | 默认值 | 说明 | -| --------- | ------------------- | ------ | -------------------- | -| min | [模板](../template) | | 最小值 | -| max | [模板](../template) | | 最大值 | -| step | `number` | | 步长 | -| precision | `number` | | 精度，即小数点后几位 | - - - - - +| 属性名 | 类型 | 默认值 | 说明 | +| --------- | ------------------------------- | ------ | -------------------- | +| min | [模板](../../concepts/template) | | 最小值 | +| max | [模板](../../concepts/template) | | 最大值 | +| step | `number` | | 步长 | +| precision | `number` | | 精度，即小数点后几位 | diff --git a/docs/components/form/options.md b/docs/components/form/options.md index 9f7aae8bf..5fda97a0d 100755 --- a/docs/components/form/options.md +++ b/docs/components/form/options.md @@ -124,7 +124,7 @@ order: 2 ### 通过数据域中变量配置 -你也可以配置`source`属性，利用 [数据映射](.../concepts/data-mapping)，获取当前数据链中的变量 +你也可以配置`source`属性，利用 [数据映射](../../concepts/data-mapping)，获取当前数据链中的变量 ```schema:height="260" scope="body" { @@ -1124,7 +1124,7 @@ order: 2 ## 自动填充 autoFill -一些选择器组件，支持配置`autoFill`，将当前已选中的选项的某个字段的值，自动填充到表单中某个表单项中，**只在单选时有效**，支持[数据映射](.../concepts/data-mapping) +一些选择器组件，支持配置`autoFill`，将当前已选中的选项的某个字段的值，自动填充到表单中某个表单项中，**只在单选时有效**，支持[数据映射](../../concepts/data-mapping) ```schema:height="400" scope="body" { diff --git a/docs/components/form/panel.md b/docs/components/form/panel.md index 6b109b00d..4c2ded153 100755 --- a/docs/components/form/panel.md +++ b/docs/components/form/panel.md @@ -8,7 +8,7 @@ icon: order: 34 --- -还是为了布局，可以把一部分 [FormItem](./FormItem.md) 合并到一个 panel 里面单独展示。 +还是为了布局，可以把一部分 [FormItem](./formItem) 合并到一个 panel 里面单独展示。 ## 基本用法 @@ -49,8 +49,8 @@ order: 34 | controls | Array<表单项> | | `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。 | - `title` panel 标题 -- `body` [Container](../Types.md#container) 可以是其他渲染模型。 +- `body` [SchemaNode](../../types/schemanode) 可以是其他渲染模型。 - `bodyClassName` body 的 className. -- `footer` [Container](../Types.md#container) 可以是其他渲染模型。 +- `footer` [SchemaNode](../../types/schemanode) 可以是其他渲染模型。 - `footerClassName` footer 的 className. - `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。 diff --git a/docs/components/form/service.md b/docs/components/form/service.md index 4bd1d5159..9981870fa 100755 --- a/docs/components/form/service.md +++ b/docs/components/form/service.md @@ -82,7 +82,7 @@ order: 49 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" { diff --git a/docs/components/form/table.md b/docs/components/form/table.md index b89a0b176..b792418c9 100755 --- a/docs/components/form/table.md +++ b/docs/components/form/table.md @@ -1,12 +1,13 @@ --- title: Table 表格 -description: +description: type: 0 group: null menuName: Table 表格 -icon: +icon: order: 54 --- + ## 基本用法 可以用来展示数组类型的数据。配置`columns` 数组，来定义列信息。 @@ -85,7 +86,6 @@ order: 54 ### 按钮触发新增行 按钮上配置`"actionType": "add"`和`target`指定表格`name`，可以实现点击按钮添加一行的效果。 - ```schema:height="400" scope="body" { @@ -233,9 +233,9 @@ order: 54 | 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 | +| addApi | [API](../../types/api) | - | 新增时提交的 API | +| updateApi | [API](../../types/api) | - | 修改时提交的 API | +| deleteApi | [API](../../types/api) | - | 删除时提交的 API | | addBtnLabel | `string` | | 增加按钮名称 | | addBtnIcon | `string` | `"fa fa-plus"` | 增加按钮图标 | | updateBtnLabel | `string` | `""` | 更新按钮名称 | @@ -249,8 +249,3 @@ order: 54 | columns | `array` | [] | 列信息 | | columns[x].quickEdit | `boolean` 或者 `object` | - | 配合 editable 为 true 一起使用 | | columns[x].quickEditOnUpdate | `boolean` 或者 `object` | - | 可以用来区分新建模式和更新模式的编辑配置 | - - - - - diff --git a/docs/components/form/tree.md b/docs/components/form/tree.md index ee98a0b6d..123e27ace 100755 --- a/docs/components/form/tree.md +++ b/docs/components/form/tree.md @@ -463,35 +463,35 @@ order: 59 当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 -| 属性名 | 类型 | 默认值 | 说明 | -| ------------- | --------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------- | -| options | `Array`或`Array` | | [选项组](./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) | -| autoComplete | [API](../../types/api) | | [自动提示补全](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete) | -| multiple | `boolean` | `false` | 是否多选 | -| 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) | -| 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) | -| 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) | -| 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) | -| 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) | -| 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) | -| 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` | -| rootLabel | `boolean` | `"顶级"` | 当 `hideRoot` 不为 `false` 时有用，用来设置顶级节点的文字。 | -| showIcon | `boolean` | `true` | 是否显示图标 | -| showRadio | `boolean` | `false` | 是否显示单选按钮，`multiple` 为 `false` 是有效。 | -| initiallyOpen | `boolean` | `true` | 设置是否默认展开所有层级。 | -| unfoldedLevel | `number` | `0` | 设置默认展开的级数，只有`initiallyOpen`不是`true`时生效。 | -| cascade | `boolean` | `false` | 当选中父节点时不自动选择子节点。 | -| withChildren | `boolean` | `false` | 选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。 | -| onlyChildren | `boolean` | `false` | 多选时，选中父节点时，是否只将其子节点加入到值中。 | -| rootCreatable | `boolean` | `false` | 是否可以创建顶级节点 | -| rootCreateTip | `string` | `"添加一级节点"` | 创建顶级节点的悬浮提示 | -| minLength | `number` | | 最少选中的节点数 | -| maxLength | `number` | | 最多选中的节点数 | +| 属性名 | 类型 | 默认值 | 说明 | +| ------------- | ------------------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------- | +| options | `Array`或`Array` | | [选项组](./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) | +| autoComplete | [API](../../../types/api) | | [自动提示补全](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete) | +| multiple | `boolean` | `false` | 是否多选 | +| 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) | +| 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) | +| 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) | +| 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) | +| 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) | +| 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) | +| 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` | +| rootLabel | `boolean` | `"顶级"` | 当 `hideRoot` 不为 `false` 时有用，用来设置顶级节点的文字。 | +| showIcon | `boolean` | `true` | 是否显示图标 | +| showRadio | `boolean` | `false` | 是否显示单选按钮，`multiple` 为 `false` 是有效。 | +| initiallyOpen | `boolean` | `true` | 设置是否默认展开所有层级。 | +| unfoldedLevel | `number` | `0` | 设置默认展开的级数，只有`initiallyOpen`不是`true`时生效。 | +| cascade | `boolean` | `false` | 当选中父节点时不自动选择子节点。 | +| withChildren | `boolean` | `false` | 选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。 | +| onlyChildren | `boolean` | `false` | 多选时，选中父节点时，是否只将其子节点加入到值中。 | +| rootCreatable | `boolean` | `false` | 是否可以创建顶级节点 | +| rootCreateTip | `string` | `"添加一级节点"` | 创建顶级节点的悬浮提示 | +| minLength | `number` | | 最少选中的节点数 | +| maxLength | `number` | | 最多选中的节点数 | diff --git a/docs/components/service.md b/docs/components/service.md index bee73b43f..276cb7e6c 100755 --- a/docs/components/service.md +++ b/docs/components/service.md @@ -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" { @@ -277,7 +277,7 @@ amis 中部分组件，作为展示组件，自身没有**使用接口初始化 上例可看到，变更**数据模板**的值，会触发 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) ## 属性表 diff --git a/docs/components/table.md b/docs/components/table.md index 1fc614740..8d6d55864 100755 --- a/docs/components/table.md +++ b/docs/components/table.md @@ -1,12 +1,13 @@ --- title: Table 表格 -description: +description: type: 0 group: ⚙ 组件 menuName: Table 表格 -icon: +icon: order: 67 --- + 表格展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。 ## 基本用法 @@ -510,7 +511,6 @@ order: 67 } ``` - 还可以配置"offset"，实现弹出框位置调整自定义 ```schema:height="600" scope="body" @@ -539,7 +539,6 @@ order: 67 } ``` - ## 嵌套 当行数据中存在 children 属性时，可以自动嵌套显示下去。 @@ -782,15 +781,14 @@ order: 67 ```json { - "footable": { - "expand": "first" - } + "footable": { + "expand": "first" + } } ``` 当配置成 `all` 时表示全部展开。 - ## 合并单元格 只需要配置 `combineNum` 属性即可，他表示从左到右多少列内启动自动合并单元格，只要多行的同一个属性值是一样的，就会自动合并。 @@ -1017,24 +1015,18 @@ order: 67 ## 属性表 -| 属性名 | 类型 | 默认值 | 说明 | -| ---------------- | ------------------------------ | ------------------------- | ------------------------------------------------------- | -| 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` | | 自动合并单元格 | - - - - - - +| 属性名 | 类型 | 默认值 | 说明 | +| ---------------- | --------------------------------------------- | ------------------------- | ------------------------------------------------------- | +| 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<[Column](#%E5%88%97%E9%85%8D%E7%BD%AE)> | | 用来设置列信息 | +| combineNum | `number` | | 自动合并单元格 | diff --git a/docs/components/tabs.md b/docs/components/tabs.md index 73b6774a2..94d48cbdf 100755 --- a/docs/components/tabs.md +++ b/docs/components/tabs.md @@ -1,12 +1,13 @@ --- title: Tabs 选项卡 -description: +description: type: 0 group: ⚙ 组件 menuName: Tabs -icon: +icon: order: 68 --- + ## 基本用法 ```schema:height="300" scope="body" @@ -129,7 +130,7 @@ order: 68 } ``` -## 配置hash +## 配置 hash 可以在单个`tab`下，配置`hash`属性，支持地址栏`#xxx`。 @@ -156,7 +157,7 @@ order: 68 主要配置`activeKey`属性来实现该效果，共有下面两种方法： -#### 配置hash值 +#### 配置 hash 值 ```schema:height="300" scope="body" { @@ -202,7 +203,7 @@ order: 68 ## unmountOnExit -如果你想在切换tab时，自动销毁掉隐藏的tab，请配置`"unmountOnExit": true` +如果你想在切换 tab 时，自动销毁掉隐藏的 tab，请配置`"unmountOnExit": true` ## 属性表 @@ -212,18 +213,12 @@ order: 68 | className | `string` | | 外层 Dom 的类名 | | tabsClassName | `string` | | Tabs Dom 的类名 | | tabs | `Array` | | tabs 内容 | -| toolbar | [Container](./Types.md#container) | | tabs 中的工具栏 | +| toolbar | [SchemaNode](../types/schemanode) | | tabs 中的工具栏 | | toolbarClassName | `string` | | tabs 中工具栏的类名 | | tabs[x].title | `string` | | 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].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 区域样式 | - - - - - - diff --git a/docs/components/tasks.md b/docs/components/tasks.md index 9fb9e7b92..856a71e62 100755 --- a/docs/components/tasks.md +++ b/docs/components/tasks.md @@ -1,12 +1,13 @@ --- title: Tasks 任务操作集合 -description: +description: type: 0 group: ⚙ 组件 menuName: Tasks -icon: +icon: order: 69 --- + 任务操作集合，类似于 orp 上线。 ## 基本用法 @@ -38,30 +39,30 @@ order: 69 ## 属性表 -| 属性名 | 类型 | 默认值 | 说明 | -| ----------------- | --------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -| 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` | 当有任务进行中，会每隔一段时间再次检测，而时间间隔就是通过此项配置，默认 3s。 | -| 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` | `["未开始", "就绪", "进行中", "出错", "已完成", "出错"]` | 状态显示对应的文字显示配置 | +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------- | ------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | +| 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/api) | | 返回任务列表，返回的数据请参考 items。 | +| submitApi | [API](../types/api) | | 提交任务使用的 API | +| reSubmitApi | [API](../types/api) | | 如果任务失败，且可以重试，提交的时候会使用此 API | +| interval | `number` | `3000` | 当有任务进行中，会每隔一段时间再次检测，而时间间隔就是通过此项配置，默认 3s。 | +| 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" [ @@ -73,9 +74,3 @@ order: 69 "为了演示，目前获取的状态都是随机出现的。"] ``` - - - - - - diff --git a/docs/components/tpl.md b/docs/components/tpl.md index 798977287..21739a2a3 100755 --- a/docs/components/tpl.md +++ b/docs/components/tpl.md @@ -8,7 +8,7 @@ icon: order: 70 --- -输出 [模板](./concepts/template) 的常用组件 +输出 [模板](../concepts/template) 的常用组件 ## 基本用法 diff --git a/docs/concepts/action.md b/docs/concepts/action.md index c2f4608fb..e64e0e821 100644 --- a/docs/concepts/action.md +++ b/docs/concepts/action.md @@ -53,7 +53,7 @@ order: 12 > `dialog`是容器，也就意味着可以在`body`属性中配置其他组件 -完整的行为列表可以查看 [action](./action-button)组件 +完整的行为列表可以查看 [action](../components/action)组件 ### 组件所支持的行为 diff --git a/docs/concepts/data-mapping.md b/docs/concepts/data-mapping.md index 1956c10be..c20d548f9 100755 --- a/docs/concepts/data-mapping.md +++ b/docs/concepts/data-mapping.md @@ -1,10 +1,10 @@ --- title: 数据映射 -description: +description: type: 0 group: 💡 概念 menuName: 数据映射 -icon: +icon: order: 12 --- @@ -56,7 +56,7 @@ order: 12 }, "body": { "type": "tpl", - "tpl": "my name is ${name}, I work for ${company.name}" // 输出 my name is rick, I work for baidu + "tpl": "my name is ${name}, I work for ${company.name}" // 输出 my name is rick, I work for baidu } } ``` @@ -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 { - "&": "$$" + "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" } ``` @@ -306,9 +414,9 @@ ${xxx | raw} ``` > **注意！！！** -> +> > `raw`过滤器虽然支持显示原始文本，也就意味着可以输出 HTML 片段，但是动态渲染 HTML 是非常危险的，容易导致 **XSS** 攻击。 -> +> > 因此在 使用`raw`过滤器的时候，请确保变量的内容可信，且永远不要渲染用户填写的内容。 ### json @@ -364,7 +472,7 @@ ${xxx | toJson} } ``` -对`Javascript`的直接输出会显示`[object Object]`，你可以使用 [json过滤器](./data-mapping#json) 来格式化显示`json`文本。 +对`Javascript`的直接输出会显示`[object Object]`，你可以使用 [json 过滤器](./data-mapping#json) 来格式化显示`json`文本。 ### date @@ -504,6 +612,7 @@ ${xxx | percent[:decimals]} ### round 四舍五入取整 + ``` ${xxx | round[:decimals]} ``` @@ -548,6 +657,7 @@ ${xxx | round[:decimals]} ``` ${xxx | truncate[:length][:mask]} ``` + - **length**：指定多长的字符后省略，默认为`200` - **mask**：省略时显示的字符，默认为`"..."` @@ -809,7 +919,7 @@ ${xxx | pick[:path]} } ``` -##### 遍历数组对象，并自定义key +##### 遍历数组对象，并自定义 key ```schema:height="200" { @@ -1015,7 +1125,7 @@ ${xxx | isTrue[:trueValue][:falseValue] - **falseValue**: 如果变量为 [假](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)，则返回该值。 > 配置`trueValue`和`falseValue`时，如果想要返回当前数据域中某个变量的值，那么参数可以直接配置变量名而不需要在两边添加引号；如果想返回某字符串，那么需要给参数两边添加单引号或双引号， -> +> > 例如 `${xxx|isTrue:'foo':bar}`，当 `xxx` 变量为真，那么会返回 **字符串`'foo'`**，如果不为真，那么返回数据域中 **变量`bar`** 的值。 ```schema:height="200" @@ -1080,7 +1190,7 @@ ${xxx | isTrue[:trueValue][:falseValue] ${xxx | isFalse[:falseValue][:trueValue] ``` -用法与 [isTrue过滤器](#istrue) 相同，判断逻辑相反 +用法与 [isTrue 过滤器](#istrue) 相同，判断逻辑相反 ### isMatch @@ -1091,9 +1201,10 @@ ${xxx | isFalse[:falseValue][:trueValue] ``` ${xxx | isMatch[:matchParam][:trueValue][:falseValue] ``` + - **matchParam**: 匹配关键字参数 - - 如果想模糊匹配特定字符串，那么参数需要在两边添加单引号或者双引号； - - 如果想模糊匹配某个变量值，那么参数不需要添加引号。 + - 如果想模糊匹配特定字符串，那么参数需要在两边添加单引号或者双引号； + - 如果想模糊匹配某个变量值，那么参数不需要添加引号。 - **trueValue**: 如果模糊匹配成功，即返回该值； - **falseValue**: 如果模糊匹配失败，则返回该值。 @@ -1170,8 +1281,8 @@ ${xxx | isEquals[:equalsValue][:trueValue][:falseValue] ``` - **equalsValue**: 全等匹配关键字参数 - - 如果想判断等于特定字符串，那么参数需要在两边添加单引号或者双引号； - - 如果想判断等于某个变量值，那么参数不需要添加引号。 + - 如果想判断等于特定字符串，那么参数需要在两边添加单引号或者双引号； + - 如果想判断等于某个变量值，那么参数不需要添加引号。 - **trueValue**: 如果模糊匹配成功，即返回该值； - **falseValue**: 如果模糊匹配失败，则返回该值。 @@ -1248,6 +1359,7 @@ ${xxx | notEquals[:equalsValue][:trueValue][:falseValue] ``` ${xxx | filter[:keys][:directive][:arg1]} ``` + - **keys**: 参与过滤的字段集合 - **directive**: 用于过滤数组的指令，包含下面这几种 - `isTrue` 目标值为真通过筛选。 @@ -1287,9 +1399,3 @@ ${xxx|filter1|filter2|...} 1. 会先执行`split`过滤器，将字符串`a,b,c`，拆分成数组`["a", "b", "c"]`； 2. 然后将该数据传给下一个过滤器`first`，执行该过滤器，获取数组第一个元素，为`"a"` 3. 输出`"a"` - - - - - - diff --git a/docs/concepts/datascope-and-datachain.md b/docs/concepts/datascope-and-datachain.md index 3e9e03248..dee034968 100755 --- a/docs/concepts/datascope-and-datachain.md +++ b/docs/concepts/datascope-and-datachain.md @@ -191,7 +191,7 @@ page 很明显在`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 属性值 diff --git a/docs/concepts/linkage.md b/docs/concepts/linkage.md index 174884c0f..f5ceb69d8 100755 --- a/docs/concepts/linkage.md +++ b/docs/concepts/linkage.md @@ -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 组件来说，刷新即重新拉取数据接口。 -> 当然，`crud`组件内置已经支持此功能，你只需要配置`crud`中的`filter`属性，就可以实现上面的效果，更多内容查看 [crud -> filter](./crud) 文档。 +> 当然，`crud`组件内置已经支持此功能，你只需要配置`crud`中的`filter`属性，就可以实现上面的效果，更多内容查看 [crud -> filter](../components/crud) 文档。 我们再来一个例子，这次我们实现两个`form`之间的联动： diff --git a/docs/start/custom.md b/docs/start/custom.md index 25729ba12..442ef584e 100644 --- a/docs/start/custom.md +++ b/docs/start/custom.md @@ -356,7 +356,7 @@ class MyFormItem extends React.Component { #### 自定义验证器 -如果 amis [自带的验证](./renderers/Form/FormItem.md#)能满足需求了，则不需要关心。组件可以有自己的验证逻辑。 +如果 amis [自带的验证](../components/form/formitem.md)能满足需求了，则不需要关心。组件可以有自己的验证逻辑。 ```jsx import * as React from 'react'; diff --git a/docs/types/api.md b/docs/types/api.md index 829343004..14e0ec954 100755 --- a/docs/types/api.md +++ b/docs/types/api.md @@ -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`实现接收适配器 **接受欧适配器**是指在接口请求后，对响应进行一些自定义处理，例如修改响应的数据结构、修改响应的数据等等。