mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
liaoxuezhi
GitHub
commit
e77f39b06b
@ -2,22 +2,76 @@
|
||||
|
||||
Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触发事件。
|
||||
|
||||
- `type` 指定为 `button`。
|
||||
- `actionType` 【必填】 选项：`ajax`、`link`、`url`、`dawer`、`dialog`、`confirm`、`cancel`、`prev`、`next`、`copy` 或者 `close`。
|
||||
- `api` 当 `actionType` 为 `ajax` 时，必须指定，参考 [api](./Types.md#Api) 格式说明。
|
||||
- `link` 当 `actionType` 为 `link` 时必须指定，用来指定跳转地址，跟 url 不同的是，这是单页跳转方式，不会渲染浏览器，请指定 AMis 平台内的页面。
|
||||
- `url` 当 `actionType` 为 `url` 时必须指定，按钮点击后，会打开指定页面。
|
||||
- `blank` 当 `actionType` 为 `url` 时可选，如果为 false 将在本页面打开。
|
||||
- `dialog` 当 `actionType` 为 `dialog` 时用来指定弹框内容。
|
||||
- `dawer` 当 `actionType` 为 `drawer` 时用来指定抽出式弹框内容。
|
||||
- `copy` 当 `actionType` 为 `copy` 时用来指定复制的内容。
|
||||
- `nextCondition` 当 `actionType` 为 `dialog` 时可以用来设置下一条数据的条件，默认为 `true`。
|
||||
- `confirmText` 当设置 `confirmText` 后，操作在开始前会询问用户。
|
||||
- `reload` 指定此次操作完后，需要刷新的目标组件名字（组件的 name 指，自己配置的），多个请用 `,` 号隔开。
|
||||
- `feedback` 如果 ajax 类型的，当 ajax 返回正常后，还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。
|
||||
- `messages`，actionType 为 `ajax` 时才有用。
|
||||
- `success` ajax 操作成功后提示，可以不指定，不指定时以 api 返回为准。
|
||||
- `failed` ajax 操作失败提示。
|
||||
#### 通用配置项
|
||||
所有`actionType`都支持的通用配置项
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | --------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| type | `string` | `action` | 指定为 Page 渲染器。 |
|
||||
| actionType | `string` | - | 【必填】这是action最核心的配置，来指定该action的作用类型，支持：`ajax`、`link`、`url`、`dawer`、`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`。 |
|
||||
|
||||
下面会分别介绍每种类型的Action配置项
|
||||
|
||||
#### ajax
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | ----------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| actionType | `string` | `ajax` | 发送请求 |
|
||||
| api | `string` 或 `ApiObject` | - | 请求地址，参考 [api](./Types.md#api) 格式说明。 |
|
||||
| redirect | `string` | - | 指定当前请求结束后跳转的路径，可用 `${xxx}` 取值。 |
|
||||
| feedback | `DialogObject` | - | 如果 ajax 类型的，当 ajax 返回正常后，还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。格式可参考[Dialog](./Dialog.md) |
|
||||
| messages | `object` | - | `success`：ajax 操作成功后提示，可以不指定，不指定时以 api 返回为准。`failed`：ajax 操作失败提示。 |
|
||||
|
||||
#### link
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | -------- | ------ | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| actionType | `string` | `link` | 单页跳转 |
|
||||
| link | `string` | `link` | 用来指定跳转地址，跟 url 不同的是，这是单页跳转方式，不会渲染浏览器，请指定 AMis 平台内的页面。可用 `${xxx}` 取值。 |
|
||||
|
||||
#### url
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | --------- | ------- | ------------------------------------------------ |
|
||||
| actionType | `string` | `url` | 页面跳转 |
|
||||
| url | `string` | - | 按钮点击后，会打开指定页面。可用 `${xxx}` 取值。 |
|
||||
| blank | `boolean` | `false` | 如果为 `true` 将在新tab页面打开。 |
|
||||
|
||||
#### dialog
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------- | -------------------------- | -------- | --------------------------------------------- |
|
||||
| actionType | `string` | `dialog` | 点击后显示一个弹出框 |
|
||||
| dialog | `string` 或 `DialogObject` | - | 指定弹框内容，格式可参考[Dialog](./Dialog.md) |
|
||||
| nextCondition | `boolean` | - | 可以用来设置下一条数据的条件，默认为 `true`。 |
|
||||
|
||||
#### drawer
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | -------------------------- | -------- | --------------------------------------------- |
|
||||
| actionType | `string` | `drawer` | 点击后显示一个侧边栏 |
|
||||
| drawer | `string` 或 `DrawerObject` | - | 指定弹框内容，格式可参考[Drawer](./Drawer.md) |
|
||||
|
||||
#### copy
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | -------- | ------ | ------------------------------------ |
|
||||
| actionType | `string` | `copy` | 复制一段内容到粘贴板 |
|
||||
| content | `string` | - | 指定复制的内容。可用 `${xxx}` 取值。 |
|
||||
|
||||
#### 其他配置项
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| -------- | --------------- | ------- | ----------------------------------------------------------------------------------------------------------- |
|
||||
| close | `boolean` | `false` | 当`action`配置在`dialog`或`drawer`的`actions`中时，配置为`true`指定此次操作完后关闭当前`dialog`或`drawer`。 |
|
||||
| required | `Array<string>` | - | 配置字符串数组，指定在`form`中进行操作之前，需验证必填的表单项字段 |
|
||||
|
||||
示例：
|
||||
|
||||
|
||||
@ -4,36 +4,45 @@
|
||||
|
||||
CRUD 支持三种模式：`table`、`cards`、`list`，默认为 `table`。
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------------- | ------------------------------ | ------------------------------- | ----------------------------------------------------------------------------------------- |
|
||||
| type | `string` | | `"Action.md"` 指定为 CRUD 渲染器 |
|
||||
| mode | `string` | `"table"` | `"table" 、 "cards" 或者 "list"` |
|
||||
| title | `string` | `""` | 可设置成空，当设置成空时，没有标题栏 |
|
||||
| className | `string` | | 表格外层 Dom 的类名 |
|
||||
| api | [Api](./Types.md#Api) | | CRUD 用来获取列表数据的 api。 |
|
||||
| filter | [Form](./Form.md) | | 设置过滤器，当该表单提交后，会把数据带给当前 Action.md 刷新列表。 |
|
||||
| initFetch | `boolean` | `true` | 是否初始化的时候拉取数据, 只针对有 filter 的情况, 没有 filter 初始都会拉取数据 |
|
||||
| interval | `number` | `3000` | 刷新时间(最低 3000) |
|
||||
| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 |
|
||||
| stopAutoRefreshWhen | `string` | `""` | 通过[表达式](./Types.md#表达式)来配置停止刷新的条件 |
|
||||
| syncLocation | `boolean` | `true` | 是否将过滤条件的参数同步到地址栏 |
|
||||
| draggable | `boolean` | `false` | 是否可通过拖拽排序 |
|
||||
| itemDraggableOn | `boolean` | | 用[表达式](./Types.md#表达式)来配置是否可拖拽排序 |
|
||||
| saveOrderApi | [Api](./Types.md#Api) | | 保存排序的 api。 |
|
||||
| quickSaveApi | [Api](./Types.md#Api) | | 快速编辑后用来批量保存的 API。 |
|
||||
| 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 一起使用，请看下面例子。 |
|
||||
| orderField | `string` | | 设置用来确定位置的字段名，设置后新的顺序将被赋值到该字段中。 |
|
||||
| headerToolbar | Array | `['bulkActions', 'pagination']` | 顶部工具栏配置 |
|
||||
| footerToolbar | Array | `['statistics', 'pagination']` | 顶部工具栏配置 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------------------ | ------------------------------ | ------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
||||
| type | `string` | | `"Action.md"` 指定为 CRUD 渲染器 |
|
||||
| mode | `string` | `"table"` | `"table" 、 "cards" 或者 "list"` |
|
||||
| title | `string` | `""` | 可设置成空，当设置成空时，没有标题栏 |
|
||||
| className | `string` | | 表格外层 Dom 的类名 |
|
||||
| api | [Api](./Types.md#Api) | | CRUD 用来获取列表数据的 api。 |
|
||||
| filter | [Form](./Form.md) | | 设置过滤器，当该表单提交后，会把数据带给当前 Action.md 刷新列表。 |
|
||||
| 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 | [Api](./Types.md#Api) | | 保存排序的 api。 |
|
||||
| quickSaveApi | [Api](./Types.md#Api) | | 快速编辑后用来批量保存的 API。 |
|
||||
| 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 | `['bulkActions', 'pagination']` | 顶部工具栏配置 |
|
||||
| footerToolbar | Array | `['statistics', 'pagination']` | 顶部工具栏配置 |
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
- `minLength` 限制最小长度。
|
||||
- `maxLength` 限制最大长度。
|
||||
- `scaffold` 单条初始值。默认为 `{}`。
|
||||
- `canAccessSuperData` 指定是否可以自动获取上层的数据并映射到表单项上，默认是`true`。
|
||||
- 更多配置请参考 [FormItem](./FormItem.md)
|
||||
|
||||
```schema:height="450" scope="form"
|
||||
|
||||
@ -42,6 +42,7 @@
|
||||
| messages.saveFailed | `string` | | 保存成功时提示 |
|
||||
| messages.saveSuccess | `string` | | 保存失败时提示 |
|
||||
| wrapWithPanel | `boolean` | `true` | 是否让 Form 用 panel 包起来，设置为 false 后，actions 将无效。 |
|
||||
| panelClassName | `boolean` | `true` | 是否让 Form 用 panel 包起来，设置为 false 后，actions 将无效。 |
|
||||
| api | [Api](./Types.md#api) | | Form 用来保存数据的 api。 |
|
||||
| initApi | [Api](./Types.md#api) | | Form 用来获取初始数据的 api。 |
|
||||
| interval | `number` | `3000` | 刷新时间(最低 3000) |
|
||||
@ -57,11 +58,14 @@
|
||||
| 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` | 指定是否可以自动获取上层的数据并映射到表单项上 |
|
||||
| name | `string` | | 设置一个名字后，方便其他组件与其通信 |
|
||||
|
||||
表单项都是通过 controls 设置的，类型是数组，成员主要是[FormItem](./FormItem.md)，默认一行一个（当然 form 是 inline 模式时例外），如果想一行多个，可以将多个[FormItem](./FormItem.md)放在一个 [Group](./Group.md) 里面。
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
## Nav
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| -------------- | --------- | -------- | ----------------------------------- |
|
||||
| type | `string` | `"tabs"` | 指定为 Nav 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| stacked | `boolean` | `true` | 设置成 false 可以以 tabs 的形式展示 |
|
||||
| links | `Array` | | 链接集合 |
|
||||
| links[x].label | `string` | | 名称 |
|
||||
| links[x].to | `string` | | 链接地址 |
|
||||
| links[x].icon | `string` | | 图标 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------------- | --------- | -------- | -------------------------------------- |
|
||||
| type | `string` | `"tabs"` | 指定为 Nav 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| stacked | `boolean` | `true` | 设置成 false 可以以 tabs 的形式展示 |
|
||||
| links | `Array` | | 链接集合 |
|
||||
| links[x].label | `string` | | 名称 |
|
||||
| links[x].to | `string` | | 链接地址 |
|
||||
| links[x].icon | `string` | | 图标 |
|
||||
| links[x].active | `boolean` | | 是否高亮 |
|
||||
| links[x].activeOn | `表达式` | | 是否高亮的条件，留空将自动分析链接地址 |
|
||||
|
||||
链接集合。
|
||||
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
| 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"
|
||||
|
||||
@ -35,7 +35,6 @@ const ActionProps = [
|
||||
'mergeData',
|
||||
'index',
|
||||
'copy',
|
||||
'content',
|
||||
];
|
||||
import {filterContents} from './Remark';
|
||||
import {ClassNamesFn, themeable} from '../theme';
|
||||
|
||||
@ -45,7 +45,7 @@ interface CRUDProps extends RendererProps {
|
||||
quickSaveApi?: Api;
|
||||
quickSaveItemApi?: Api;
|
||||
initFetch?: boolean;
|
||||
pagePageAvailable?: Array<number | string>;
|
||||
perPageAvailable?: Array<number | string>;
|
||||
messages: {
|
||||
fetchFailed?: string;
|
||||
fetchSuccess?: string;
|
||||
@ -83,7 +83,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
|
||||
'valueField',
|
||||
'defaultParams',
|
||||
'bodyClassName',
|
||||
'pagePageAvailable',
|
||||
'perPageAvailable',
|
||||
'pageField',
|
||||
'perPageField',
|
||||
'hideQuickSaveBtn',
|
||||
@ -1037,7 +1037,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
|
||||
}
|
||||
|
||||
renderSwitchPerPage(childProps: any) {
|
||||
const {store, pagePageAvailable, classnames: cx, classPrefix: ns} = this.props;
|
||||
const {store, perPageAvailable, classnames: cx, classPrefix: ns} = this.props;
|
||||
|
||||
const items = childProps.items;
|
||||
|
||||
@ -1045,7 +1045,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
|
||||
return null;
|
||||
}
|
||||
|
||||
const perPages = (pagePageAvailable || [5, 10, 20, 50, 100]).map((item: any) => ({
|
||||
const perPages = (perPageAvailable || [5, 10, 20, 50, 100]).map((item: any) => ({
|
||||
label: item,
|
||||
value: item + '',
|
||||
}));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user