mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 02:58:05 +08:00
Merge remote-tracking branch 'baidu/master'
This commit is contained in:
liaoxuezhi
commit
3f9ffa6ee1
@ -1074,6 +1074,8 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
|
||||
|
||||
在`headerToolbar`或者`footerToolbar`数组中添加`bulkActions`字符串，并且在 crud 上配置`bulkActions`行为按钮数组，可以实现选中表格项并批量操作的功能。
|
||||
|
||||
> 需要设置`primaryField`用于标识选中状态，配置当前行数据中的某一**唯一标识字段**，例如`id`，否则可能会出现无法选中的问题
|
||||
|
||||
```schema:height="600" scope="body"
|
||||
{
|
||||
"type": "crud",
|
||||
|
||||
@ -134,6 +134,36 @@ Dialog 弹框 主要由 [Action](./action) 触发，主要展示一个对话框
|
||||
}
|
||||
```
|
||||
|
||||
## 行为后关闭弹框
|
||||
|
||||
在弹框中配置行为按钮，可以在按钮上配置`"close": true`，在行为完成后，关闭当前弹框。
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"type": "button",
|
||||
"label": "弹个框",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "弹框",
|
||||
"body": [
|
||||
{
|
||||
"type": "action",
|
||||
"label": "默认的 ajax 请求",
|
||||
"actionType": "ajax",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=1"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "ajax 请求成功后关闭弹框",
|
||||
"actionType": "ajax",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=1",
|
||||
"close": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 弹框中配置表单
|
||||
|
||||
### 基本使用
|
||||
|
||||
@ -803,46 +803,46 @@ Form 支持轮训初始化接口，步骤如下：
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------------------- | --------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| type | `string` | | `"form"` 指定为 Form 渲染器 |
|
||||
| name | `string` | | 设置一个名字后，方便其他组件与其通信 |
|
||||
| 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` | 指定表单提交成功后是否清除本地缓存 |
|
||||
| trimValues | `boolean` | `false` | trim 当前表单项的每一个值 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------------------- | ---------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| type | `string` | | `"form"` 指定为 Form 渲染器 |
|
||||
| name | `string` | | 设置一个名字后，方便其他组件与其通信 |
|
||||
| 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` | 指定表单提交成功后是否清除本地缓存 |
|
||||
| trimValues | `boolean` | `false` | trim 当前表单项的每一个值 |
|
||||
|
||||
@ -78,6 +78,8 @@ order: 49
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 接口联动
|
||||
|
||||
Service 中的`api`和`schemaApi`都支持**接口联动**。
|
||||
@ -168,4 +170,27 @@ Service 中的`api`和`schemaApi`都支持**接口联动**。
|
||||
}
|
||||
```
|
||||
|
||||
`schemaApi` 同样支持 []()
|
||||
`schemaApi` 除了能返回表单项之外，还能同时返回表单数据，如果你这样返回接口
|
||||
|
||||
```json
|
||||
{
|
||||
"status": 0,
|
||||
"msg": "",
|
||||
"data": {
|
||||
"data": {
|
||||
"a": "b" // 这样返回的选项会选中第二个选项B
|
||||
},
|
||||
"controls": [
|
||||
{
|
||||
"type": "select",
|
||||
"name": "a",
|
||||
"label": "选项",
|
||||
"options": [
|
||||
{"label": "A", "value": "a"},
|
||||
{"label": "B", "value": "b"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -14,9 +14,9 @@ amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可
|
||||
|
||||
## 为什么要做 amis？🤔
|
||||
|
||||
在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 UI 组件库，你必须懂 npm、webpack、react/vue，必须熟悉 ES 6 语法，最好还了解状态管理（比如 Redux），如果没接触过函数式编程，一开始入门就很困难，而它还有巨大的 [生态](https://github.com/markerikson/redux-ecosystem-links)，相关的库有 2347 个。
|
||||
在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 UI 组件库，你必须懂 `npm`、`webpack`、`react/vue`，必须熟悉 `ES6` 语法，最好还了解状态管理（比如 `Redux`），如果没接触过函数式编程，一开始入门就很困难，而它还有巨大的 [生态](https://github.com/markerikson/redux-ecosystem-links)，相关的库有 **2347** 个。
|
||||
|
||||
然而前端技术的发展不会停滞，等学完这些后可能会发现大家都用 Hooks 了、某个打包工具取代 Webpack 了。。。
|
||||
然而前端技术的发展不会停滞，等学完这些后可能会发现大家都用 `Hooks` 了、某个打包工具取代 `Webpack` 了。。。
|
||||
|
||||
而有时候你只是为了做个普通的增删改查界面，用于系统管理，类似下面这种：
|
||||
|
||||
@ -167,20 +167,21 @@ amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可
|
||||
}
|
||||
```
|
||||
|
||||
这个界面虽然用 Bootstrap 也能快速搭起来，但要想体验好就需要加很多细节功能，比如：
|
||||
这个界面虽然用 `Bootstrap` 也能快速搭起来，但要想体验好就需要加很多细节功能，比如：
|
||||
|
||||
- 数据动态加载
|
||||
- 编辑单行数据
|
||||
- 批量删除和修改
|
||||
- 批量修改和删除
|
||||
- 查询某列
|
||||
- 按某列排序
|
||||
- 隐藏某列
|
||||
- 开启整页内容拖拽排序
|
||||
- 表格有分页（页数还会同步到地址栏，刷新页面试试）
|
||||
- 表格有分页（页数还会同步到地址栏）
|
||||
- 如果往下拖动还有首行冻结来方便查看表头等
|
||||
全部实现这些需要大量的代码。
|
||||
|
||||
然而上面也看到了，在 amis 里只需要 150 行 JSON 配置（嘿，其中 40 多行只有一个括号），你不需要了解 React/Vue、Webpack，甚至不需要了解 JavaScript，即便没学过 amis 也能猜到大部分配置的作用，只需要简单配置就能完成所有页面开发
|
||||
全部实现这些需要大量的代码。
|
||||
|
||||
然而上面也看到了，在 amis 里只需要 **150** 行 JSON 配置（嘿，其中 40 多行只有一个括号），你不需要了解 `React/Vue`、`Webpack`，甚至不需要很了解 `JavaScript`，即便没学过 amis 也能猜到大部分配置的作用，只需要简单配置就能完成所有页面开发
|
||||
|
||||
这正是建立 amis 的初衷，我们认为：**对于大部分常用页面，应该使用最简单的方法来实现**，而不是越来越复杂。
|
||||
|
||||
@ -194,23 +195,22 @@ amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可
|
||||
|
||||
> JSON 是一种轻量级的数据交换格式，简洁和清晰的层次结构使得它成为理想的数据交换语言。它易于人阅读和编写，同时也易于机器解析和生成，能够有效地提升网络传输效率。
|
||||
>
|
||||
> 更多关于 JSON 的知识，可以阅读[百度百科](https://baike.baidu.com/item/JSON)
|
||||
> 更多关于 JSON 的知识，可以阅读 [百度百科](https://baike.baidu.com/item/JSON)
|
||||
|
||||
## amis 的其它亮点 ✨
|
||||
|
||||
- **提供完整的界面解决方案**：其它 UI 框架必须使用 JavaScript 来组装业务逻辑，而 amis 只需 JSON 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能；
|
||||
- **内置 100+ 种 UI 组件**：包括其它 UI 框架都会不提供的富文本编辑器、代码编辑器等，能满足各种页面组件展现的需求，而且对于特殊的展现形式还可以通过 [自定义组件](./start/custom.md) 来扩充；
|
||||
- **容器支持无限级嵌套**：可以通过组合来满足各种布局需求；
|
||||
- **经历了长时间的实战考验**：amis 在百度内部得到了广泛使用，在 4 年多的时间里创建了 **3w** 多页面，从内容审核到机器管理，从数据分析到模型训练，amis 满足了各种各样的页面需求。
|
||||
- **经历了长时间的实战考验**：amis 在百度内部得到了广泛使用，**在 4 年多的时间里创建了 3 万+ 页面**，从内容审核到机器管理，从数据分析到模型训练，amis 满足了各种各样的页面需求。
|
||||
|
||||
## amis 不适合做什么？😶
|
||||
|
||||
使用 JSON 有优点但也有明显缺点，在以下场合并不适合 amis：
|
||||
|
||||
- 大量定制 UI，尤其是面向普通客户（toC）的产品页面
|
||||
- JSON 配置使得 amis 更适合做有大量常见 UI 组件的页面，但对于面向普通客户的页面，往往追求个性化的视觉效果，这种情况下用 amis 就不合适，实际上绝大部分前端 UI 组件库也都不适合，只能定制开发。
|
||||
- 有极为复杂的交互，或者对交互有很特殊的要求
|
||||
- 有些复杂的前端功能，比如可视化编辑器，其中有大量定制的拖拽操作，这种需要依赖原生 DOM 实现的功能无法使用 amis。
|
||||
- **大量定制 UI**：JSON 配置使得 amis 更适合做有大量常见 UI 组件的页面，但对于面向普通客户（toC）的页面，往往追求个性化的视觉效果，这种情况下用 amis 就不合适，实际上绝大部分前端 UI 组件库也都不适合，只能定制开发。
|
||||
- **极为复杂或特殊的交互**：
|
||||
- 有些复杂的前端功能，比如 可视化编辑器，其中有大量定制的拖拽操作，这种需要依赖原生 DOM 实现的功能无法使用 amis。
|
||||
- 但对于某些交互固定的领域，比如图连线，amis 后续会有专门的组件来实现。
|
||||
|
||||
## 阅读建议 👆
|
||||
@ -220,4 +220,4 @@ amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可
|
||||
|
||||
## 让我们马上开始吧！
|
||||
|
||||
点击页面底部的下一篇，继续后续部分的阅读。
|
||||
点击页面底部的下一篇，继续阅读文档。
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
cursor: pointer;
|
||||
|
||||
> a {
|
||||
float: right;
|
||||
// float: right;
|
||||
margin-left: px2rem(5px);
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -125,6 +125,7 @@ export default class CheckboxesControl extends React.Component<
|
||||
labelClassName={labelClassName}
|
||||
description={option.description}
|
||||
>
|
||||
{option[labelField || 'label']}
|
||||
{removable ? (
|
||||
<a data-tooltip="移除" data-position="left">
|
||||
<Icon
|
||||
@ -143,7 +144,6 @@ export default class CheckboxesControl extends React.Component<
|
||||
/>
|
||||
</a>
|
||||
) : null}
|
||||
{option[labelField || 'label']}
|
||||
</Checkbox>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user