forked from p96170835/amis
Merge remote-tracking branch 'baidu/master'
This commit is contained in:
liaoxuezhi
commit
5cad14c60b
|
|
@ -0,0 +1,27 @@
|
|||
---
|
||||
name: Bug report
|
||||
about: 报告问题，帮助我们做的更好
|
||||
title: ''
|
||||
labels: need confirm
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
#### 描述问题：
|
||||
请用一段清晰简洁的文字描述问题是什么...
|
||||
|
||||
#### 截图或视频：
|
||||
可以的话，尽可能提供截图或视频来补充描述你的问题...
|
||||
|
||||
#### 如何复现（请务必完整填写下面内容）：
|
||||
|
||||
1. 你是如何使用 amis 的？
|
||||
`sdk`、`npm` 或`其他`...
|
||||
|
||||
2. 粘贴有问题的完整 `amis schema` 代码：
|
||||
```
|
||||
code here...
|
||||
```
|
||||
|
||||
3. 操作步骤
|
||||
请简单描述一下复现的操作步骤...
|
||||
|
|
@ -0,0 +1 @@
|
|||
blank_issues_enabled: false
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
---
|
||||
name: Feature request
|
||||
about: 为我们提出一个新的想法
|
||||
title: ''
|
||||
labels: enhancement
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
#### 是否关联于某个问题吗：
|
||||
请用一段简单清晰的文字描述你的想法是关联于某个问题，例如：因为我没办法实现xxx...
|
||||
|
||||
#### 预期的解决方案：
|
||||
请简单描述你想达到的效果...
|
||||
|
||||
#### 其他可接受方案：
|
||||
请简单描述其他你可以接受的效果...
|
||||
|
||||
#### 任何附加信息：
|
||||
请添加任何可以补充说明上述问题的材料，例如图片或视频等...
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
---
|
||||
name: Usage question
|
||||
about: amis 使用方法问题
|
||||
title: ''
|
||||
labels: document
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
#### 实现场景：
|
||||
请简单描述你想要实现的原始场景，例如：我想要实现xxx的功能...
|
||||
|
||||
#### 存在的问题：
|
||||
请简单描述你现在遇到的不符合预期的问题...
|
||||
|
||||
#### 当前方案：
|
||||
请粘贴你当前方案的完整 amis schema 代码...
|
||||
|
||||
```
|
||||
code here...
|
||||
```
|
||||
|
|
@ -1,12 +1,13 @@
|
|||
---
|
||||
title: Editor 编辑器
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Editor
|
||||
icon:
|
||||
icon:
|
||||
order: 19
|
||||
---
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
|
|
@ -64,11 +65,8 @@ order: 19
|
|||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| -------- | -------- | ------------ | ---------------- |
|
||||
| language | `string` | `javascript` | 编辑器高亮的语言 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| -------- | -------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| language | `string` | `javascript` | 编辑器高亮的语言 |
|
||||
| size | `string` | `md` | 编辑器高度，取值可以是 `md`、`lg`、`xl`、`xxl` |
|
||||
| options | `object` | | monaco 编辑器的其它配置，比如是否显示行号等，请参考[这里](https://microsoft.github.io/monaco-editor/api/enums/monaco.editor.editoroption.html)。 |
|
||||
|
|
|
|||
|
|
@ -1274,12 +1274,12 @@ order: 2
|
|||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|--------------|-----------------------------------|-----------|---------------------------------------------------------------------|
|
||||
| options | `Array<object>`或`Array<string>` | | 选项组，供用户选择 |
|
||||
| source | `string`或 [API](../../types/api) | | 选项组源，可通过数据映射获取当前数据域变量、或者配置 API 对象 |
|
||||
| multiple | `boolean` | `false` | 是否支持多选 |
|
||||
| labelField | `boolean` | `"label"` | 标识选项中哪个字段是`label`值 |
|
||||
| valueField | `boolean` | `"value"` | 标识选项中哪个字段是`value`值 |
|
||||
| joinValues | `boolean` | `true` | 是否拼接`value`值 |
|
||||
| extractValue | `boolean` | `false` | 是否将`value`值抽取出来组成新的数组，只有在`joinValues`是`false`是生效 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------ | ----------------------------------------------------------------- | --------- | ---------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | 选项组，供用户选择 |
|
||||
| source | [API](../../types/api) 或 [数据映射](../../concepts/data-mapping) | | 选项组源，可通过数据映射获取当前数据域变量、或者配置 API 对象 |
|
||||
| multiple | `boolean` | `false` | 是否支持多选 |
|
||||
| labelField | `boolean` | `"label"` | 标识选项中哪个字段是`label`值 |
|
||||
| valueField | `boolean` | `"value"` | 标识选项中哪个字段是`value`值 |
|
||||
| joinValues | `boolean` | `true` | 是否拼接`value`值 |
|
||||
| extractValue | `boolean` | `false` | 是否将`value`值抽取出来组成新的数组，只有在`joinValues`是`false`是生效 |
|
||||
|
|
|
|||
|
|
@ -48,28 +48,28 @@ order: 48
|
|||
|
||||
除了支持 [普通表单项属性表](./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) |
|
||||
| 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) |
|
||||
| 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) |
|
||||
| checkAll | `boolean` | `false` | 是否支持全选 |
|
||||
| checkAllLabel | `string` | `全选` | 全选的文字 |
|
||||
| defaultCheckAll | `boolean` | `false` | 默认是否全选 |
|
||||
| creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) |
|
||||
| multiple | `boolean` | `false` | [多选](./options#多选-multiple) |
|
||||
| searchable | `boolean` | `false` | [检索](./options#检索-searchable) |
|
||||
| createBtnLabel | `string` | `"新增选项"` | [新增选项](./options#%E6%96%B0%E5%A2%9E%E9%80%89%E9%A1%B9) |
|
||||
| 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) |
|
||||
| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | ----------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | [API](../../types/api) 或 [数据映射](../../concepts/data-mapping) | | [动态选项组](./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) |
|
||||
| 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) |
|
||||
| checkAll | `boolean` | `false` | 是否支持全选 |
|
||||
| checkAllLabel | `string` | `全选` | 全选的文字 |
|
||||
| defaultCheckAll | `boolean` | `false` | 默认是否全选 |
|
||||
| creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) |
|
||||
| multiple | `boolean` | `false` | [多选](./options#多选-multiple) |
|
||||
| searchable | `boolean` | `false` | [检索](./options#检索-searchable) |
|
||||
| createBtnLabel | `string` | `"新增选项"` | [新增选项](./options#%E6%96%B0%E5%A2%9E%E9%80%89%E9%A1%B9) |
|
||||
| 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) |
|
||||
| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) |
|
||||
|
|
|
|||
|
|
@ -342,6 +342,91 @@ order: 14
|
|||
|
||||
> 当然，`crud`组件内置已经支持此功能，你只需要配置`crud`中的`filter`属性，就可以实现上面的效果，更多内容查看 [crud -> filter](../components/crud) 文档。
|
||||
|
||||
我们再来一个例子，这次我们实现两个`form`之间的联动：
|
||||
我们再来一个例子，这次我们实现 [两个 form 之间的联动](../components/form/index#%E5%B0%86%E6%95%B0%E6%8D%AE%E5%9F%9F%E5%8F%91%E9%80%81%E7%BB%99%E7%9B%AE%E6%A0%87%E7%BB%84%E4%BB%B6)
|
||||
|
||||
### 发送指定数据
|
||||
|
||||
`target`属性支持通过配置参数来发送指定数据，例如：`"target" :"xxx?a=${a}&b=${b}"`，这样就会把当前数据域中的`a`变量和`b`变量发送给目标组件
|
||||
|
||||
```schema:height="800" scope="body"
|
||||
[
|
||||
{
|
||||
"type": "form",
|
||||
"title": "form1",
|
||||
"mode": "horizontal",
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"controls": [
|
||||
{
|
||||
"label": "Name",
|
||||
"type": "text",
|
||||
"name": "name"
|
||||
},
|
||||
|
||||
{
|
||||
"label": "Email",
|
||||
"type": "text",
|
||||
"name": "email"
|
||||
},
|
||||
|
||||
{
|
||||
"label": "Company",
|
||||
"type": "text",
|
||||
"name": "company"
|
||||
}
|
||||
],
|
||||
"actions": [
|
||||
{
|
||||
"type": "action",
|
||||
"actionType": "reload",
|
||||
"label": "发送到 form2",
|
||||
"target": "form2?name=${name}&email=${email}"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "form",
|
||||
"title": "form2",
|
||||
"name": "form2",
|
||||
"mode": "horizontal",
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"controls": [
|
||||
{
|
||||
"label": "MyName",
|
||||
"type": "text",
|
||||
"name": "name"
|
||||
},
|
||||
|
||||
{
|
||||
"label": "MyEmail",
|
||||
"type": "text",
|
||||
"name": "email"
|
||||
},
|
||||
|
||||
{
|
||||
"label": "Company",
|
||||
"type": "text",
|
||||
"name": "company"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
上例中我们给按钮上配置了`"target": "form2?name=${name}&email=${email}"`,可以把当前数据链中的`name`变量和`email`变量发送给`form2`
|
||||
|
||||
### 配置多个目标
|
||||
|
||||
`target`支持配置多个目标组件 name，用逗号隔开，例如：
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "action",
|
||||
"actionType": "reload",
|
||||
"label": "刷新目标组件",
|
||||
"target": "target1,target2"
|
||||
}
|
||||
```
|
||||
|
||||
上例中点击按钮会刷新`target1`和`target2`组件。
|
||||
|
||||
事实上，**组件间联动也可以实现上述任意的 [基本联动效果](./linkage#%E5%9F%BA%E6%9C%AC%E8%81%94%E5%8A%A8)（显隐联动、接口联动等其他联动）。**
|
||||
|
|
|
|||
|
|
@ -82,6 +82,13 @@ amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可
|
|||
"headerToolbar": [
|
||||
"filter-toggler",
|
||||
"bulkActions",
|
||||
{
|
||||
"type": "action",
|
||||
"label": "重置测试数据",
|
||||
"actionType": "ajax",
|
||||
"size": "sm",
|
||||
"api": "https://houtai.baidu.com/api/sample/reset"
|
||||
},
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "一共有 ${count} 行数据。",
|
||||
|
|
|
|||
|
|
@ -61,13 +61,28 @@ renderAmis(
|
|||
);
|
||||
```
|
||||
|
||||
### 使用
|
||||
### 使用指南
|
||||
|
||||
可以在 React Component 这么使用（TypeScript）。
|
||||
|
||||
1. 安装部分示例需要的插件库
|
||||
|
||||
```
|
||||
npm i axios copy-to-clipboard
|
||||
```
|
||||
|
||||
> 为了方便示例，上面选用了我们常用几个插件库，你完全可以选择自己喜欢的插件并重新实现
|
||||
|
||||
2. 代码实现
|
||||
|
||||
```tsx
|
||||
import * as React from 'react';
|
||||
import axios from 'axios';
|
||||
import copy from 'copy-to-clipboard';
|
||||
|
||||
import {render as renderAmis} from 'amis';
|
||||
import {alert, confirm} from 'amis/lib/components/Alert';
|
||||
import {toast} from 'amis/lib/components/Toast';
|
||||
|
||||
class MyComponent extends React.Component<any, any> {
|
||||
render() {
|
||||
|
|
@ -76,55 +91,87 @@ class MyComponent extends React.Component<any, any> {
|
|||
<p>通过 amis 渲染页面</p>
|
||||
{renderAmis(
|
||||
{
|
||||
// schema
|
||||
// 这里是 amis 的 Json 配置。
|
||||
type: 'page',
|
||||
title: '简单页面',
|
||||
body: '内容'
|
||||
},
|
||||
{
|
||||
// props
|
||||
// props...
|
||||
},
|
||||
{
|
||||
// env
|
||||
// 这些是 amis 需要的一些接口实现
|
||||
// 可以参考后面的参数介绍。
|
||||
|
||||
jumpTo: (location: string /*目标地址*/) => {
|
||||
// 用来实现页面跳转, actionType:link、url 都会进来。
|
||||
// 因为不清楚所在环境中是否使用了 spa 模式，所以自己实现这个方法吧。
|
||||
},
|
||||
|
||||
updateLocation: (
|
||||
location: string /*目标地址*/,
|
||||
replace: boolean /*是replace，还是push？*/
|
||||
) => {
|
||||
// 用来更新地址栏
|
||||
},
|
||||
|
||||
jumpTo: (location: string /*目标地址*/) => {
|
||||
// 页面跳转， actionType: link、url 都会进来。
|
||||
// 地址替换，跟 jumpTo 类似
|
||||
},
|
||||
|
||||
fetcher: ({
|
||||
url,
|
||||
method,
|
||||
data,
|
||||
config
|
||||
}: {
|
||||
url: string /*目标地址*/;
|
||||
method: 'get' | 'post' | 'put' | 'delete' /*发送方式*/;
|
||||
data: object | void /*数据*/;
|
||||
config: object /*其他配置*/;
|
||||
}) => {
|
||||
// 用来发送 Ajax 请求，建议使用 axios
|
||||
url, // 接口地址
|
||||
method, // 请求方法 get、post、put、delete
|
||||
data, // 请求数据
|
||||
responseType,
|
||||
config, // 其他配置
|
||||
headers // 请求头
|
||||
}: any) => {
|
||||
config = config || {};
|
||||
config.withCredentials = true;
|
||||
responseType && (config.responseType = responseType);
|
||||
|
||||
if (config.cancelExecutor) {
|
||||
config.cancelToken = new (axios as any).CancelToken(
|
||||
config.cancelExecutor
|
||||
);
|
||||
}
|
||||
|
||||
config.headers = headers || {};
|
||||
|
||||
if (method !== 'post' && method !== 'put' && method !== 'patch') {
|
||||
if (data) {
|
||||
config.params = data;
|
||||
}
|
||||
|
||||
return (axios as any)[method](url, config);
|
||||
} else if (data && data instanceof FormData) {
|
||||
config.headers = config.headers || {};
|
||||
config.headers['Content-Type'] = 'multipart/form-data';
|
||||
} else if (
|
||||
data &&
|
||||
typeof data !== 'string' &&
|
||||
!(data instanceof Blob) &&
|
||||
!(data instanceof ArrayBuffer)
|
||||
) {
|
||||
data = JSON.stringify(data);
|
||||
config.headers = config.headers || {};
|
||||
config.headers['Content-Type'] = 'application/json';
|
||||
}
|
||||
|
||||
return (axios as any)[method](url, data, config);
|
||||
},
|
||||
isCancel: (value: any) => (axios as any).isCancel(value),
|
||||
notify: (
|
||||
type: 'error' | 'success' /**/,
|
||||
msg: string /*提示内容*/
|
||||
) => {
|
||||
// 用来提示用户
|
||||
toast[type]
|
||||
? toast[type](msg, type === 'error' ? '系统错误' : '系统消息')
|
||||
: console.warn('[Notify]', type, msg);
|
||||
},
|
||||
alert: (content: string /*提示信息*/) => {
|
||||
// 另外一种提示，可以直接用系统框
|
||||
},
|
||||
confirm: (content: string /*提示信息*/) => {
|
||||
// 确认框。
|
||||
alert,
|
||||
confirm,
|
||||
copy: content => {
|
||||
copy(content);
|
||||
toast.success('内容已复制到粘贴板');
|
||||
}
|
||||
}
|
||||
)}
|
||||
|
|
@ -134,109 +181,158 @@ class MyComponent extends React.Component<any, any> {
|
|||
}
|
||||
```
|
||||
|
||||
`(schema:Schema, props?:any, env?: any) => JSX.Element`
|
||||
### render 函数介绍
|
||||
|
||||
参数说明：
|
||||
```js
|
||||
(schema, props, env) => JSX.Element;
|
||||
```
|
||||
|
||||
- `schema` 即页面配置，请前往 [配置与组件](../concepts/schema) 了解.
|
||||
- `props` 一般都用不上，如果你想传递一些数据给渲染器内部使用，可以传递 data 数据进去。如：
|
||||
#### schema
|
||||
|
||||
```jsx
|
||||
() =>
|
||||
renderAmis(schema, {
|
||||
data: {
|
||||
即页面配置，请前往 [配置与组件](../concepts/schema) 了解
|
||||
|
||||
#### props
|
||||
|
||||
一般都用不上，如果你想传递一些数据给渲染器内部使用，可以传递 data 数据进去。如：
|
||||
|
||||
```jsx
|
||||
() =>
|
||||
renderAmis(schema, {
|
||||
data: {
|
||||
username: 'amis'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
这样，内部所有组件都能拿到 `username` 这个变量的值。当然，这里的 key 并不一定必须是 data , 你也可以是其它 key，但必须配合 schema 中的 `detectField` 属性一起使用。 如：
|
||||
|
||||
```jsx
|
||||
() =>
|
||||
renderAmis(
|
||||
{
|
||||
//其它配置
|
||||
detectField: 'somekey'
|
||||
},
|
||||
{
|
||||
somekey: {
|
||||
username: 'amis'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
这样，内部所有组件都能拿到 `username` 这个变量的值。当然，这里的 key 并不一定必须是 data , 你也可以是其它 key，但必须配合 schema 中的 `detectField` 属性一起使用。 如：
|
||||
|
||||
```jsx
|
||||
() =>
|
||||
renderAmis(
|
||||
{
|
||||
//其它配置
|
||||
detectField: 'somekey'
|
||||
},
|
||||
{
|
||||
somekey: {
|
||||
username: 'amis'
|
||||
}
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
- `env` 环境变量，可以理解为这个渲染器工具的配置项，需要调用者实现部分接口。
|
||||
|
||||
- `session: string` 默认为 'global'，决定 store 是否为全局共用的，如果想单占一个 store，请设置不同的值。
|
||||
- `fetcher: (config: fetcherConfig) => Promise<fetcherResult>` 用来实现 ajax 发送。
|
||||
|
||||
示例
|
||||
|
||||
```js
|
||||
fetcher: ({
|
||||
url,
|
||||
method,
|
||||
data,
|
||||
responseType,
|
||||
config,
|
||||
headers
|
||||
}: any) => {
|
||||
config = config || {};
|
||||
config.withCredentials = true;
|
||||
responseType && (config.responseType = responseType);
|
||||
|
||||
if (config.cancelExecutor) {
|
||||
config.cancelToken = new (axios as any).CancelToken(config.cancelExecutor);
|
||||
}
|
||||
|
||||
config.headers = headers || {};
|
||||
|
||||
if (method !== 'post' && method !== 'put' && method !== 'patch') {
|
||||
if (data) {
|
||||
config.params = data;
|
||||
}
|
||||
|
||||
return (axios as any)[method](url, config);
|
||||
} else if (data && data instanceof FormData) {
|
||||
// config.headers = config.headers || {};
|
||||
// config.headers['Content-Type'] = 'multipart/form-data';
|
||||
} else if (data
|
||||
&& typeof data !== 'string'
|
||||
&& !(data instanceof Blob)
|
||||
&& !(data instanceof ArrayBuffer)
|
||||
) {
|
||||
data = JSON.stringify(data);
|
||||
// config.headers = config.headers || {};
|
||||
config.headers['Content-Type'] = 'application/json';
|
||||
}
|
||||
|
||||
return (axios as any)[method](url, data, config);
|
||||
}
|
||||
```
|
||||
);
|
||||
```
|
||||
|
||||
- `isCancel: (e:error) => boolean` 判断 ajax 异常是否为一个 cancel 请求。
|
||||
#### env
|
||||
|
||||
示例
|
||||
环境变量，可以理解为这个渲染器工具的配置项，需要使用 amis 用户实现部分接口。他有下面若干参数：
|
||||
|
||||
```js
|
||||
isCancel: (value: any) => (axios as any).isCancel(value)
|
||||
```
|
||||
##### fetcher（必须实现）
|
||||
|
||||
- `notify: (type:string, msg: string) => void` 用来实现消息提示。
|
||||
- `alert: (msg:string) => void` 用来实现警告提示。
|
||||
- `confirm: (msg:string) => boolean | Promise<boolean>` 用来实现确认框。
|
||||
- `jumpTo: (to:string, action?: Action, ctx?: object) => void` 用来实现页面跳转，因为不清楚所在环境中是否使用了 spa 模式，所以用户自己实现吧。
|
||||
- `updateLocation: (location:any, replace?:boolean) => void` 地址替换，跟 jumpTo 类似。
|
||||
- `isCurrentUrl: (link:string) => boolean` 判断目标地址是否为当前页面。
|
||||
- `theme: 'default' | 'cxd'` 目前支持两种主题。
|
||||
- `copy: (contents:string, options?: {shutup: boolean}) => void` 用来实现，内容复制。
|
||||
- `getModalContainer: () => HTMLElement` 用来决定弹框容器。
|
||||
- `loadRenderer: (chema:any, path:string) => Promise<Function>` 可以通过它懒加载自定义组件，比如： https://github.com/baidu/amis/blob/master/__tests__/factory.test.tsx#L64-L91。
|
||||
- `affixOffsetTop: number` 固顶间距，当你的有其他固顶元素时，需要设置一定的偏移量，否则会重叠。
|
||||
- `affixOffsetBottom: number` 固底间距，当你的有其他固底元素时，需要设置一定的偏移量，否则会重叠。
|
||||
- `richTextToken: string` 内置 rich-text 为 frolaEditor，想要使用，请自行购买，或者自己实现 rich-text 渲染器。
|
||||
接口请求器，实现该函数才可以实现 ajax 发送，函数签名如下：
|
||||
|
||||
```ts
|
||||
(config: {
|
||||
url; // 接口地址
|
||||
method; // 请求方法 get、post、put、delete
|
||||
data; // 请求数据
|
||||
responseType;
|
||||
config; // 其他配置
|
||||
headers; // 请求头
|
||||
}) => Promise<fetcherResult>;
|
||||
```
|
||||
|
||||
> 你可以使用任何你喜欢的 ajax 请求库来实现这个接口
|
||||
|
||||
##### notify
|
||||
|
||||
```ts
|
||||
(type: string, msg: string) => void
|
||||
```
|
||||
|
||||
用来实现消息提示。
|
||||
|
||||
##### alert
|
||||
|
||||
```ts
|
||||
(msg: string) => void
|
||||
```
|
||||
|
||||
用来实现警告提示。
|
||||
|
||||
##### confirm
|
||||
|
||||
```ts
|
||||
(msg: string) => boolean | Promise<boolean>
|
||||
```
|
||||
|
||||
用来实现确认框。返回 boolean 值
|
||||
|
||||
##### jumpTo
|
||||
|
||||
```ts
|
||||
(to: string, action?: Action, ctx?: object) => void
|
||||
```
|
||||
|
||||
用来实现页面跳转，因为不清楚所在环境中是否使用了 spa 模式，所以用户自己实现吧。
|
||||
|
||||
##### updateLocation
|
||||
|
||||
```ts
|
||||
(location: any, replace?: boolean) => void
|
||||
```
|
||||
|
||||
地址替换，跟 jumpTo 类似。
|
||||
|
||||
##### theme: string
|
||||
|
||||
目前支持是三种主题：`default`、`cxd` 和 `dark`
|
||||
|
||||
##### isCurrentUrl
|
||||
|
||||
```ts
|
||||
(link: string) => boolean;
|
||||
```
|
||||
|
||||
判断目标地址是否为当前页面。
|
||||
|
||||
##### copy
|
||||
|
||||
```ts
|
||||
(contents: string, options?: {shutup: boolean})
|
||||
```
|
||||
|
||||
用来实现内容复制。
|
||||
|
||||
##### session
|
||||
|
||||
默认为 'global'，决定 store 是否为全局共用的，如果想单占一个 store，请设置不同的值。
|
||||
|
||||
##### getModalContainer
|
||||
|
||||
```ts
|
||||
() => HTMLElement;
|
||||
```
|
||||
|
||||
用来决定弹框容器。
|
||||
|
||||
##### loadRenderer
|
||||
|
||||
```ts
|
||||
(schema: any, path: string) => Promise<Function>
|
||||
```
|
||||
|
||||
可以通过它懒加载自定义组件，比如： https://github.com/baidu/amis/blob/master/__tests__/factory.test.tsx#L64-L91。
|
||||
|
||||
##### affixOffsetTop: number
|
||||
|
||||
固顶间距，当你的有其他固顶元素时，需要设置一定的偏移量，否则会重叠。
|
||||
|
||||
##### affixOffsetBottom: number
|
||||
|
||||
固底间距，当你的有其他固底元素时，需要设置一定的偏移量，否则会重叠。
|
||||
|
||||
##### richTextToken: string
|
||||
|
||||
内置 rich-text 为 frolaEditor，想要使用，请自行购买，或者自己实现 rich-text 渲染器。
|
||||
|
||||
## SDK
|
||||
|
||||
|
|
@ -277,8 +373,8 @@ JSSDK 的代码从以下地址获取：
|
|||
<script src="amis/sdk.js"></script>
|
||||
<script type="text/javascript">
|
||||
(function () {
|
||||
var amis = amisRequire('amis/embed');
|
||||
amis.embed('#root', {
|
||||
let amis = amisRequire('amis/embed');
|
||||
let amisScoped = amis.embed('#root', {
|
||||
type: 'page',
|
||||
title: 'AMIS Demo',
|
||||
body: 'hello world'
|
||||
|
|
@ -289,10 +385,12 @@ JSSDK 的代码从以下地址获取：
|
|||
</html>
|
||||
```
|
||||
|
||||
### 控制 amis 的行为
|
||||
|
||||
`amis.embed` 函数还支持以下配置项来控制 amis 的行为，比如在 fetcher 的时候加入自己的处理逻辑，这些函数参数的说明在前面也有介绍。
|
||||
|
||||
```js
|
||||
amis.embed(
|
||||
let amisScoped = amis.embed(
|
||||
'#root',
|
||||
{
|
||||
type: 'page',
|
||||
|
|
@ -307,7 +405,7 @@ amis.embed(
|
|||
// 可以不传，用来实现 ajax 请求
|
||||
},
|
||||
|
||||
jumpTo: (location) => {
|
||||
jumpTo: location => {
|
||||
// 可以不传，用来实现页面跳转
|
||||
},
|
||||
|
||||
|
|
@ -315,11 +413,11 @@ amis.embed(
|
|||
// 可以不传，用来实现地址栏更新
|
||||
},
|
||||
|
||||
isCurrentUrl: (url) => {
|
||||
isCurrentUrl: url => {
|
||||
// 可以不传，用来判断是否目标地址当前地址。
|
||||
},
|
||||
|
||||
copy: (content) => {
|
||||
copy: content => {
|
||||
// 可以不传，用来实现复制到剪切板
|
||||
},
|
||||
|
||||
|
|
@ -327,13 +425,38 @@ amis.embed(
|
|||
// 可以不传，用来实现通知
|
||||
},
|
||||
|
||||
alert: (content) => {
|
||||
alert: content => {
|
||||
// 可以不传，用来实现提示
|
||||
},
|
||||
|
||||
confirm: (content) => {
|
||||
confirm: content => {
|
||||
// 可以不传，用来实现确认框。
|
||||
}
|
||||
}
|
||||
);
|
||||
```
|
||||
```
|
||||
|
||||
同时返回的 `amisScoped` 对象可以获取到 amis 渲染的内部信息，它有如下方法：
|
||||
|
||||
`getComponentByName(name)` 用于获取渲染出来的组件，比如下面的示例
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "page",
|
||||
"name": "page1",
|
||||
"title": "表单页面",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"name": "form1",
|
||||
"controls": [
|
||||
{
|
||||
"label": "Name",
|
||||
"type": "text",
|
||||
"name": "name1"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
可以通过 `amisScoped.getComponentByName('page1.form1').getValues()` 来获取到所有表单的值，需要注意 page 和 form 都需要有 name 属性。
|
||||
|
|
|
|||
|
|
@ -413,11 +413,31 @@ API 还支持配置对象类型
|
|||
|
||||
amis 的 API 配置，如果无法配置出你想要的请求结构，那么可以配置`requestAdaptor`发送适配器
|
||||
|
||||
**发送适配器**是指在接口请求前，对请求进行一些自定义处理，例如修改发送数据体、添加请求头、等等，基本用法是，获取暴露的`api`参数，并且对该参数进行一些修改，并`return`出去：
|
||||
**发送适配器** 是指在接口请求前，对请求进行一些自定义处理，例如修改发送数据体、添加请求头、等等，基本用法是，获取暴露的`api`参数，并且对该参数进行一些修改，并`return`出去：
|
||||
|
||||
#### 字符串形式
|
||||
##### 暴露的参数
|
||||
|
||||
如果在 JSON 文件中配置的话，`requestAdaptor`只支持字符串形式，如下：
|
||||
发送适配器暴露以下参数以供用户进行操作:
|
||||
|
||||
- **api**：当前请求的 api 对象，一般包含下面几个属性：
|
||||
- url：当前接口 Api 地址
|
||||
- method：当前请求的方式
|
||||
- data：请求的数据体
|
||||
- headers：请求的头部信息
|
||||
|
||||
##### 字符串形式
|
||||
|
||||
如果在 JSON 文件中配置的话，`requestAdaptor`只支持字符串形式。
|
||||
|
||||
字符串形式实际上可以认为是外层包裹了一层函数，你需要补充内部的函数实现，并将修改好的 `api` 对象 `return` 出去：
|
||||
|
||||
```js
|
||||
function (api) {
|
||||
// 你的适配器代码
|
||||
}
|
||||
```
|
||||
|
||||
用法示例：
|
||||
|
||||
```schema:height="330" scope="body"
|
||||
{
|
||||
|
|
@ -445,6 +465,9 @@ amis 的 API 配置，如果无法配置出你想要的请求结构，那么可
|
|||
上例中的适配器实际上是如下代码的字符串形式：
|
||||
|
||||
```js
|
||||
// 进行一些操作
|
||||
|
||||
// 一定要将调整后的 api 对象 return 出去
|
||||
return {
|
||||
...api,
|
||||
data: {
|
||||
|
|
@ -454,7 +477,7 @@ return {
|
|||
};
|
||||
```
|
||||
|
||||
#### 函数形式
|
||||
##### 函数形式
|
||||
|
||||
如果你的使用环境为 js 文件，则可以直接传入函数，如下：
|
||||
|
||||
|
|
@ -491,26 +514,36 @@ const schema = {
|
|||
|
||||
上面例子中，我们获取暴露的`api`对象中的`data`变量，并且为其添加了一个新的字段`foo`，并且一起返回出去就可以了，这样我们的请求数据体中就会加上我们这个新的字段。
|
||||
|
||||
`api`变量中一般会包含下面几个属性：
|
||||
|
||||
- **url**：当前接口 Api 地址
|
||||
- **method**：当前请求的方式
|
||||
- **data**：请求的数据体
|
||||
- **headers**：请求的头部信息
|
||||
|
||||
你也可以使用`debugger`自行进行调试。
|
||||
|
||||
### 配置接收适配器
|
||||
|
||||
同样的，如果后端返回的响应结构不符合 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`实现接收适配器
|
||||
|
||||
**接受欧适配器**是指在接口请求后，对响应进行一些自定义处理，例如修改响应的数据结构、修改响应的数据等等。
|
||||
**接收适配器** 是指在接口请求后，对响应进行一些自定义处理，例如修改响应的数据结构、修改响应的数据等等。
|
||||
|
||||
例如：接口正确返回的格式中，会返回`"code": 200`，而 amis 中，接口返回格式需要`"status": 0`，这时候就需要接收适配器进行调整结构。
|
||||
|
||||
#### 字符串形式
|
||||
##### 暴露的参数
|
||||
|
||||
如果在 JSON 文件中配置的话，`adaptor`只支持字符串形式，如下：
|
||||
接收适配器器暴露以下参数以供用户进行操作:
|
||||
|
||||
- **payload**：当前请求的响应 payload，即 response.data
|
||||
- **response**：当前请求的原始响应
|
||||
|
||||
##### 字符串形式
|
||||
|
||||
如果在 JSON 文件中配置的话，`adaptor`只支持字符串形式。
|
||||
|
||||
字符串形式实际上可以认为是外层包裹了一层函数，你需要补充内部的函数实现，并将修改好的 `payload` 对象 `return` 出去：
|
||||
|
||||
```js
|
||||
function (payload, responsee) {
|
||||
// 你的适配器代码
|
||||
}
|
||||
```
|
||||
|
||||
用法示例：
|
||||
|
||||
```json
|
||||
{
|
||||
|
|
@ -539,13 +572,16 @@ const schema = {
|
|||
上例中的适配器实际上是如下代码的字符串形式：
|
||||
|
||||
```js
|
||||
// 进行一些操作
|
||||
|
||||
// 一定要将调整后的 payload 对象 return 出去
|
||||
return {
|
||||
...payload,
|
||||
status: payload.code === 200 ? 0 : payload.code
|
||||
};
|
||||
```
|
||||
|
||||
#### 函数形式
|
||||
##### 函数形式
|
||||
|
||||
如果你的使用环境为 js 文件，则可以直接传入函数，如下：
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import {flattenTree, filterTree, mapTree} from '../../src/utils/helper';
|
|||
export const docs = [
|
||||
{
|
||||
// prefix: ({classnames: cx}) => <li className={cx('AsideNav-divider')} />,
|
||||
label: '📌 开始',
|
||||
label: '📌 开始',
|
||||
children: [
|
||||
{
|
||||
label: '介绍',
|
||||
|
|
@ -57,7 +57,7 @@ export const docs = [
|
|||
},
|
||||
|
||||
{
|
||||
label: '💡 概念',
|
||||
label: '💡 概念',
|
||||
children: [
|
||||
{
|
||||
label: '配置与组件',
|
||||
|
|
@ -127,7 +127,7 @@ export const docs = [
|
|||
},
|
||||
|
||||
{
|
||||
label: '🎼 类型',
|
||||
label: '🎼 类型',
|
||||
children: [
|
||||
{
|
||||
label: 'SchemaNode',
|
||||
|
|
@ -149,7 +149,7 @@ export const docs = [
|
|||
},
|
||||
|
||||
{
|
||||
label: '⚙ 组件',
|
||||
label: '⚙ 组件',
|
||||
children: [
|
||||
{
|
||||
label: '组件介绍',
|
||||
|
|
|
|||
|
|
@ -378,6 +378,7 @@ a {
|
|||
color: #999;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -919,7 +919,7 @@ const defaultOptions: RenderOptions = {
|
|||
},
|
||||
isCancel() {
|
||||
console.error(
|
||||
'Please implements this. see https://baidu.github.io/amis/docs/getting-started#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8'
|
||||
'Please implements this. see https://baidu.gitee.io/amis/docs/start/getting-started#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97'
|
||||
);
|
||||
return false;
|
||||
},
|
||||
|
|
@ -928,7 +928,7 @@ const defaultOptions: RenderOptions = {
|
|||
},
|
||||
updateLocation() {
|
||||
console.error(
|
||||
'Please implements this. see https://baidu.github.io/amis/docs/getting-started#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8'
|
||||
'Please implements this. see https://baidu.gitee.io/amis/docs/start/getting-started#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97'
|
||||
);
|
||||
},
|
||||
confirm(msg: string) {
|
||||
|
|
@ -939,7 +939,7 @@ const defaultOptions: RenderOptions = {
|
|||
},
|
||||
jumpTo() {
|
||||
console.error(
|
||||
'Please implements this. see https://baidu.github.io/amis/docs/getting-started#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8'
|
||||
'Please implements this. see https://baidu.gitee.io/amis/docs/start/getting-started#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97'
|
||||
);
|
||||
},
|
||||
isCurrentUrl() {
|
||||
|
|
|
|||
|
|
@ -38,7 +38,9 @@ export default class NestedSelectControl extends React.Component<
|
|||
static defaultProps: Partial<NestedSelectProps> = {
|
||||
cascade: false,
|
||||
withChildren: false,
|
||||
searchPromptText: '输入内容进行检索'
|
||||
searchPromptText: '输入内容进行检索',
|
||||
checkAll: true,
|
||||
checkAllLabel: '全选',
|
||||
};
|
||||
target: any;
|
||||
input: HTMLInputElement;
|
||||
|
|
@ -395,6 +397,8 @@ export default class NestedSelectControl extends React.Component<
|
|||
options,
|
||||
disabled,
|
||||
searchable,
|
||||
checkAll,
|
||||
checkAllLabel,
|
||||
searchPromptText,
|
||||
translate: __,
|
||||
labelField
|
||||
|
|
@ -430,7 +434,7 @@ export default class NestedSelectControl extends React.Component<
|
|||
{stack.map((options, index) => (
|
||||
<div key={index} className={cx('NestedSelect-menu')}>
|
||||
{index === 0 ? searchInput : null}
|
||||
{multiple && index === 0 ? (
|
||||
{multiple && checkAll && index === 0 ? (
|
||||
<div
|
||||
className={cx('NestedSelect-option', 'checkall')}
|
||||
onMouseEnter={this.onMouseEnterAll}
|
||||
|
|
@ -440,7 +444,7 @@ export default class NestedSelectControl extends React.Component<
|
|||
checked={partialChecked}
|
||||
partial={partialChecked && !allChecked}
|
||||
>
|
||||
全选
|
||||
{__(checkAllLabel)}
|
||||
</Checkbox>
|
||||
</div>
|
||||
) : null}
|
||||
|
|
|
|||
Loading…
Reference in New Issue