Skip to content

Commit

Permalink
Merge pull request #556 from 2betop/master
Browse files Browse the repository at this point in the history 
feedback 添加 skipRestOnCancel 配置
  • Loading branch information
@RickCole21
RickCole21 committed Apr 20, 2020
2 parents e8cc5a5 + 70f09bf commit 0e2e897
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 35 deletions.
75 changes: 42 additions & 33 deletions docs/renderers/Action.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,42 +17,44 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触

除了能弹框，它还能设定很多行为比如：提交表单、发送 ajax、页面跳转、关闭弹框、复制文本等等。


### 通用配置项

所有`actionType`都支持的通用配置项

| 属性名 | 类型 | 默认值 | 说明 |
| ---------------- | --------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| type | `string` | `action` | 指定为 Page 渲染器。 |
| actionType | `string` | - | 【必填】这是action最核心的配置，来指定该action的作用类型，支持：`ajax`、`link`、`url`、`drawer`、`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`。 |
| close | `boolean` | - | 当`action`配置在`dialog`或`drawer`的`actions`中时，配置为`true`指定此次操作完后关闭当前`dialog`或`drawer`。 |
| required | `Array<string>` | - | 配置字符串数组，指定在`form`中进行操作之前，需要指定的字段名的表单项通过验证 |


下面会分别介绍每种类型的Action配置项
| 属性名 | 类型 | 默认值 | 说明 |
| ---------------- | --------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| type | `string` | `action` | 指定为 Page 渲染器。 |
| actionType | `string` | - | 【必填】这是 action 最核心的配置，来指定该 action 的作用类型，支持：`ajax`、`link`、`url`、`drawer`、`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`。 |
| close | `boolean` | - | 当`action`配置在`dialog`或`drawer`的`actions`中时，配置为`true`指定此次操作完后关闭当前`dialog`或`drawer`。 |
| required | `Array<string>` | - | 配置字符串数组，指定在`form`中进行操作之前，需要指定的字段名的表单项通过验证 |

下面会分别介绍每种类型的 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 操作失败提示。 |

| 属性名 | 类型 | 默认值 | 说明 |
| ------------------------- | ----------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
| actionType | `string` | `ajax` | 发送请求 |
| api | `string` 或 `ApiObject` | - | 请求地址，参考 [api](./Types.md#api) 格式说明。 |
| redirect | `string` | - | 指定当前请求结束后跳转的路径，可用 `${xxx}` 取值。 |
| feedback | `DialogObject` | - | 如果 ajax 类型的，当 ajax 返回正常后，还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。格式可参考[Dialog](./Dialog.md) |
| feedback.visibleOn | `string` | - | 可以用来配置 feedback 弹框出现的条件。 |
| feedback.skipRestOnCancel | `boolean` | - | 如果配置了，在 feedback 弹窗里面，如果用户点了取消，那么这个按钮的其他动作也不做了。 |
| messages | `object` | - | `success`：ajax 操作成功后提示，可以不指定，不指定时以 api 返回为准。`failed`：ajax 操作失败提示。 |

```schema:height="200"
{
Expand All @@ -73,6 +75,7 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
```

### link

| 属性名 | 类型 | 默认值 | 说明 |
| ---------- | -------- | ------ | ------------------------------------------------------------------------------------------------------------------- |
| actionType | `string` | `link` | 单页跳转 |
Expand All @@ -91,11 +94,12 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
```

### url

| 属性名 | 类型 | 默认值 | 说明 |
| ---------- | --------- | ------- | ------------------------------------------------ |
| actionType | `string` | `url` | 页面跳转 |
| url | `string` | - | 按钮点击后，会打开指定页面。可用 `${xxx}` 取值。 |
| blank | `boolean` | `false` | 如果为 `true` 将在新tab页面打开。 |
| blank | `boolean` | `false` | 如果为 `true` 将在新 tab 页面打开。 |

```schema:height="200"
{
Expand All @@ -112,6 +116,7 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
`注意：由于 amis 平台内 http 地址会被替换成 proxy 地址，所以在 amis 平台内使用请加上 raw: 作为前缀。 比如：raw:http://www.baidu.com`

### dialog

| 属性名 | 类型 | 默认值 | 说明 |
| ------------- | -------------------------- | -------- | --------------------------------------------- |
| actionType | `string` | `dialog` | 点击后显示一个弹出框 |
Expand Down Expand Up @@ -144,6 +149,7 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
```

### drawer

| 属性名 | 类型 | 默认值 | 说明 |
| ---------- | -------------------------- | -------- | --------------------------------------------- |
| actionType | `string` | `drawer` | 点击后显示一个侧边栏 |
Expand Down Expand Up @@ -175,19 +181,22 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
```

### copy

| 属性名 | 类型 | 默认值 | 说明 |
| ---------- | -------- | ------ | ------------------------------------ |
| actionType | `string` | `copy` | 复制一段内容到粘贴板 |
| content | `string` | - | 指定复制的内容。可用 `${xxx}` 取值。 |

### reload

| 属性名 | 类型 | 默认值 | 说明 |
| ---------- | -------- | -------- | --------------------------------------------------------------------------- |
| actionType | `string` | `reload` | 刷新目标组件 |
| target | `string` | - | 需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 |

### add
该actionType为[FormItem-Table](./FormItem-Table.md)专用

该 actionType 为[FormItem-Table](./FormItem-Table.md)专用

| 属性名 | 类型 | 默认值 | 说明 |
| ---------- | -------- | ------ | ---------------------------------------------------------------------- |
Expand Down
12 changes: 11 additions & 1 deletion src/renderers/Form/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ import {
noop,
isObject,
isVisible,
cloneObject
cloneObject,
SkipOperation
} from '../../utils/helper';
import debouce from 'lodash/debounce';
import flatten from 'lodash/flatten';
Expand Down Expand Up @@ -644,6 +645,11 @@ export default class Form extends React.Component<FormProps, object> {
// submit 也支持 feedback
if (action.feedback && isVisible(action.feedback, store.data)) {
await this.openFeedback(action.feedback, store.data);

// 如果 feedback 配置了，取消就跳过原有逻辑。
if (action.feedback.skipRestOnCancel) {
throw new SkipOperation();
}
}

return values;
Expand All @@ -670,6 +676,10 @@ export default class Form extends React.Component<FormProps, object> {
return values;
})
.catch(reason => {
if (reason instanceof SkipOperation) {
return;
}

onFailed && onFailed(reason, store.errors);

if (throwErrors) {
Expand Down
2 changes: 1 addition & 1 deletion src/store/formItem.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -406,7 +406,7 @@ export const FormItemStore = types
self.validated = false; // 拉完数据应该需要再校验一下

let options: Array<IOption> =
json.data.options ||
json.data?.options ||
json.data.items ||
json.data.rows ||
json.data ||
Expand Down
2 changes: 2 additions & 0 deletions src/utils/helper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1174,3 +1174,5 @@ export function loadScript(src: string) {
document.head.appendChild(script);
});
}

export class SkipOperation extends Error {}

0 comments on commit 0e2e897

Please sign in to comment.