Form支持本地缓存，以及补充完善文档
This commit is contained in:
rickcole
catchonme
parent
1a1474e6ee
commit
840a6396e1
|
|
@ -19,7 +19,7 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
|
|||
| activeClassName | `string` | `is-active` | 给按钮高亮添加类名。 |
|
||||
| block | `boolean` | - | 用`display:"block"`来显示按钮。 |
|
||||
| confirmText | `string` | - | 当设置后，操作在开始前会询问用户。可用 `${xxx}` 取值。 |
|
||||
| reload | `string` | - | 指定此次操作完后，需要刷新的目标组件名字（组件的 name 指，自己配置的），多个请用 `,` 号隔开。 |
|
||||
| reload | `string` | - | 指定此次操作完后，需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 |
|
||||
| tooltip | `string` | - | 鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |
|
||||
| disabledTip | `string` | - | 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |
|
||||
| tooltipPlacement | `string` | `top` | 如果配置了`tooltip`或者`disabledTip`，指定提示信息位置，可配置`top`、`bottom`、`left`、`right`。 |
|
||||
|
|
@ -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`值），多个请用 `,` 号隔开。 |
|
||||
|
||||
#### 其他配置项
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| -------- | --------------- | ------- | ----------------------------------------------------------------------------------------------------------- |
|
||||
|
|
|
|||
|
|
@ -27,8 +27,9 @@
|
|||
```
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------------- | ------------------------------------ | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| --------------------------- | ------------------------------------ | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| 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 的标题 |
|
||||
|
|
@ -66,7 +67,8 @@
|
|||
| reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 |
|
||||
| autoFocus | `boolean` | `false` | 是否自动聚焦。 |
|
||||
| canAccessSuperData | `boolean` | `true` | 指定是否可以自动获取上层的数据并映射到表单项上 |
|
||||
| name | `string` | | 设置一个名字后，方便其他组件与其通信 |
|
||||
| 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