Form支持本地缓存，以及补充完善文档
This commit is contained in:
rickcole
catchonme
parent
1a1474e6ee
commit
840a6396e1
|
|
@ -12,17 +12,17 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
|
|||
| 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`。 |
|
||||
| icon | `string` | - | 设置图标，例如`fa fa-plus`。 |
|
||||
| iconClassName | `string` | - | 给图标上添加类名。 |
|
||||
| active | `boolean` | - | 按钮是否高亮。 |
|
||||
| activeLevel | `string` | - | 按钮高亮时的样式，配置支持同`level`。 |
|
||||
| activeClassName | `string` | `is-active` | 给按钮高亮添加类名。 |
|
||||
| block | `boolean` | - | 用`display:"block"`来显示按钮。 |
|
||||
| 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`。 |
|
||||
| reload | `string` | - | 指定此次操作完后，需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 |
|
||||
| tooltip | `string` | - | 鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |
|
||||
| disabledTip | `string` | - | 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |
|
||||
| tooltipPlacement | `string` | `top` | 如果配置了`tooltip`或者`disabledTip`，指定提示信息位置，可配置`top`、`bottom`、`left`、`right`。 |
|
||||
|
||||
下面会分别介绍每种类型的Action配置项
|
||||
|
||||
|
|
@ -67,6 +67,20 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
|
|||
| actionType | `string` | `copy` | 复制一段内容到粘贴板 |
|
||||
| content | `string` | - | 指定复制的内容。可用 `${xxx}` 取值。 |
|
||||
|
||||
### reload
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | -------- | -------- | --------------------------------------------------------------------------- |
|
||||
| actionType | `string` | `reload` | 刷新目标组件 |
|
||||
| target | `string` | - | 需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 |
|
||||
|
||||
#### add
|
||||
该actionType为[FormItem-Table](./FormItem-Table.md)专用
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | -------- | ------ | ---------------------------------------------------------------------- |
|
||||
| actionType | `string` | `add` | 给指定`FormItem-Table`添加一条数据， |
|
||||
| target | `string` | - | 指定`FormItem-Table`的名字（`Table`的`name`值），多个请用 `,` 号隔开。 |
|
||||
|
||||
#### 其他配置项
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| -------- | --------------- | ------- | ----------------------------------------------------------------------------------------------------------- |
|
||||
|
|
|
|||
|
|
@ -26,47 +26,49 @@
|
|||
}
|
||||
```
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------------- | ------------------------------------ | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| 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.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) |
|
||||
| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 |
|
||||
| stopAutoRefreshWhen | `string` | `""` | 通过[表达式](./Types.md#表达式) 来配置停止刷新的条件 |
|
||||
| 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 以后，默认拉取的时间间隔 |
|
||||
| schemaApi | [Api](./Types.md#api) | | `已不支持`，请改用 controls 里面放置 Service 渲染器实现 |
|
||||
| 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` | 指定是否可以自动获取上层的数据并映射到表单项上 |
|
||||
| name | `string` | | 设置一个名字后，方便其他组件与其通信 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------------------- | ------------------------------------ | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| 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` of [FormItem](./FormItem.md) | | Form 表单项集合 |
|
||||
| actions | `Array` of [Action](./Action.md) | | Form 提交按钮，成员为 Action |
|
||||
| messages | `Object` | | 消息提示覆写，默认消息读取的是 API 返回的消息，但是在此可以覆写它。 |
|
||||
| messages.fetchSuccess | `string` | | 获取成功时提示 |
|
||||
| messages.fetchFailed | `string` | | 获取失败时提示 |
|
||||
| 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) |
|
||||
| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 |
|
||||
| stopAutoRefreshWhen | `string` | `""` | 通过[表达式](./Types.md#表达式) 来配置停止刷新的条件 |
|
||||
| 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 以后，默认拉取的时间间隔 |
|
||||
| schemaApi | [Api](./Types.md#api) | | `已不支持`，请改用 controls 里面放置 Service 渲染器实现 |
|
||||
| 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` | 指定表单是否提交成功后清空本地缓存 |
|
||||
|
||||
表单项都是通过 controls 设置的，类型是数组，成员主要是[FormItem](./FormItem.md)，默认一行一个（当然 form 是 inline 模式时例外），如果想一行多个，可以将多个[FormItem](./FormItem.md)放在一个 [Group](./Group.md) 里面。
|
||||
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@
|
|||
| addable | `boolean` | false | 是否可增加一行 |
|
||||
| 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 |
|
||||
|
|
|
|||
|
|
@ -86,6 +86,8 @@ export interface FormProps extends RendererProps, FormSchema {
|
|||
autoFocus?: boolean;
|
||||
horizontal: FormHorizontal;
|
||||
canAccessSuperData: boolean;
|
||||
persistData: boolean; // 开启本地缓存
|
||||
clearPersistDataAfterSubmit: boolean; // 提交成功后清空本地缓存
|
||||
onInit?: (values:object) => any;
|
||||
onReset?: (values:object) => void;
|
||||
onSubmit?: (values:object, action:any) => any;
|
||||
|
|
@ -183,11 +185,11 @@ export default class Form extends React.Component<FormProps, object> {
|
|||
const {
|
||||
store,
|
||||
canAccessSuperData,
|
||||
initApi,
|
||||
initFetch,
|
||||
persistData,
|
||||
} = this.props;
|
||||
|
||||
store.setCanAccessSuperData(canAccessSuperData !== false);
|
||||
persistData && store.getPersistData();
|
||||
|
||||
if (store && store.parentStore && store.parentStore.storeType === 'ComboStore') {
|
||||
const combo = store.parentStore as IComboStore;
|
||||
|
|
@ -468,7 +470,8 @@ export default class Form extends React.Component<FormProps, object> {
|
|||
reload,
|
||||
target,
|
||||
env,
|
||||
onChange
|
||||
onChange,
|
||||
clearPersistDataAfterSubmit
|
||||
} = this.props;
|
||||
|
||||
if (Array.isArray(action.required) && action.required.length) {
|
||||
|
|
@ -547,6 +550,8 @@ export default class Form extends React.Component<FormProps, object> {
|
|||
|
||||
resetAfterSubmit && store.reset(onReset);
|
||||
|
||||
clearPersistDataAfterSubmit && store.clearPersistData();
|
||||
|
||||
return values;
|
||||
})
|
||||
.catch(reason => {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import {
|
|||
getRoot,
|
||||
detach
|
||||
} from "mobx-state-tree";
|
||||
import debounce = require('lodash/debounce');
|
||||
import {
|
||||
ServiceStore,
|
||||
} from './service';
|
||||
|
|
@ -44,7 +45,8 @@ export const FormStore = ServiceStore
|
|||
submiting: false,
|
||||
validating: false,
|
||||
items: types.optional(types.array(types.late(() => FormItemStore)), []),
|
||||
canAccessSuperData: true
|
||||
canAccessSuperData: true,
|
||||
persistData: false
|
||||
})
|
||||
.views(self => ({
|
||||
get loading() {
|
||||
|
|
@ -141,6 +143,10 @@ export const FormStore = ServiceStore
|
|||
self.pristine = pristine;
|
||||
}
|
||||
|
||||
if(self.persistData){
|
||||
setPersistData();
|
||||
}
|
||||
|
||||
// 同步 options
|
||||
syncOptions();
|
||||
}
|
||||
|
|
@ -372,6 +378,22 @@ export const FormStore = ServiceStore
|
|||
self.inited = value;
|
||||
}
|
||||
|
||||
const setPersistData = debounce(() => {
|
||||
localStorage.setItem(location.pathname + self.path, JSON.stringify(self.data));
|
||||
}, 250);
|
||||
|
||||
function getPersistData() {
|
||||
self.persistData = true;
|
||||
let data = localStorage.getItem(location.pathname + self.path);
|
||||
|
||||
if (data) {
|
||||
self.updateData(JSON.parse(data));
|
||||
}
|
||||
}
|
||||
|
||||
function clearPersistData() {
|
||||
localStorage.removeItem(location.pathname + self.path);
|
||||
}
|
||||
|
||||
return ({
|
||||
setInited,
|
||||
|
|
@ -387,7 +409,10 @@ export const FormStore = ServiceStore
|
|||
beforeDetach,
|
||||
syncOptions,
|
||||
setCanAccessSuperData,
|
||||
deleteValueByName
|
||||
deleteValueByName,
|
||||
getPersistData,
|
||||
setPersistData,
|
||||
clearPersistData,
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue