test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 12:08:13 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #50 from RickCole21/master

Browse Source 
Form支持本地缓存，以及完善文档
This commit is contained in:
liaoxuezhi 2019-05-23 20:24:15 +08:00 committed by GitHub
commit e97c894053
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 61 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
docs/renderers/Action.md
View File

@ -12,17 +12,17 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
| label | `string` | - | 按钮文本。可用 `${xxx}` 取值。 | | label | `string` | - | 按钮文本。可用 `${xxx}` 取值。 |
| level | `string` | `default` | 按钮样式，支持：`link`、`primary`、`secondary`、`info`、`success`、`warning`、`danger`、`light`、`dark`、`default`。 | | level | `string` | `default` | 按钮样式，支持：`link`、`primary`、`secondary`、`info`、`success`、`warning`、`danger`、`light`、`dark`、`default`。 |
| size | `string` | - | 按钮大小，支持：`xs`、`sm`、`md`、`lg`。 | | size | `string` | - | 按钮大小，支持：`xs`、`sm`、`md`、`lg`。 |
| icon | `string` | - | 设置图标，例如`fa fa-plus`。 | | icon | `string` | - | 设置图标，例如`fa fa-plus`。 |
| iconClassName | `string` | - | 给图标上添加类名。 | | iconClassName | `string` | - | 给图标上添加类名。 |
| active | `boolean` | - | 按钮是否高亮。 | | active | `boolean` | - | 按钮是否高亮。 |
| activeLevel | `string` | - | 按钮高亮时的样式，配置支持同`level`。 | | activeLevel | `string` | - | 按钮高亮时的样式，配置支持同`level`。 |
| activeClassName | `string` | `is-active` | 给按钮高亮添加类名。 | | activeClassName | `string` | `is-active` | 给按钮高亮添加类名。 |
| block | `boolean` | - | 用`display:"block"`来显示按钮。 | | block | `boolean` | - | 用`display:"block"`来显示按钮。 |
| confirmText | `string` | - | 当设置后，操作在开始前会询问用户。可用 `${xxx}` 取值。 | | confirmText | `string` | - | 当设置后，操作在开始前会询问用户。可用 `${xxx}` 取值。 |
| reload | `string` | - | 指定此次操作完后，需要刷新的目标组件名字（组件的 name 指，自己配置的），多个请用 `,` 号隔开。 | | reload | `string` | - | 指定此次操作完后，需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 |
| tooltip | `string` | - | 鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 | | tooltip | `string` | - | 鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |
| disabledTip | `string` | - | 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 | | disabledTip | `string` | - | 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |
| tooltipPlacement | `string` | `top` | 如果配置了`tooltip`或者`disabledTip`，指定提示信息位置，可配置`top`、`bottom`、`left`、`right`。 | | tooltipPlacement | `string` | `top` | 如果配置了`tooltip`或者`disabledTip`，指定提示信息位置，可配置`top`、`bottom`、`left`、`right`。 |
下面会分别介绍每种类型的Action配置项 下面会分别介绍每种类型的Action配置项
@ -67,6 +67,20 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
| actionType | `string` | `copy` | 复制一段内容到粘贴板 | | actionType | `string` | `copy` | 复制一段内容到粘贴板 |
| content | `string` | - | 指定复制的内容。可用 `${xxx}` 取值。 | | 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`值），多个请用 `,` 号隔开。 |
#### 其他配置项 #### 其他配置项
| 属性名 | 类型 | 默认值 | 说明 | | 属性名 | 类型 | 默认值 | 说明 |
| -------- | --------------- | ------- | ----------------------------------------------------------------------------------------------------------- | | -------- | --------------- | ------- | ----------------------------------------------------------------------------------------------------------- |

2
docs/renderers/Form.md
View File

@ -66,6 +66,8 @@
| reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 | | reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 |
| autoFocus | `boolean` | `false` | 是否自动聚焦。 | | autoFocus | `boolean` | `false` | 是否自动聚焦。 |
| canAccessSuperData | `boolean` | `true` | 指定是否可以自动获取上层的数据并映射到表单项上 | | canAccessSuperData | `boolean` | `true` | 指定是否可以自动获取上层的数据并映射到表单项上 |
| persistData | `boolean` | `true` | 指定表单是否开启本地缓存 |
| clearPersistDataAfterSubmit | `boolean` | `true` | 指定表单提交成功后是否清除本地缓存 |
| name | `string` | | 设置一个名字后，方便其他组件与其通信 | | name | `string` | | 设置一个名字后，方便其他组件与其通信 |
表单项都是通过 controls 设置的，类型是数组，成员主要是[FormItem](./FormItem.md)，默认一行一个（当然 form 是 inline 模式时例外），如果想一行多个，可以将多个[FormItem](./FormItem.md)放在一个 [Group](./Group.md) 里面。 表单项都是通过 controls 设置的，类型是数组，成员主要是[FormItem](./FormItem.md)，默认一行一个（当然 form 是 inline 模式时例外），如果想一行多个，可以将多个[FormItem](./FormItem.md)放在一个 [Group](./Group.md) 里面。

1
docs/renderers/FormItem-Table.md
View File

@ -54,6 +54,7 @@
| addable | `boolean` | false | 是否可增加一行 | | addable | `boolean` | false | 是否可增加一行 |
| editable | `boolean` | false | 是否可编辑 | | editable | `boolean` | false | 是否可编辑 |
| removable | `boolean` | false | 是否可删除 | | removable | `boolean` | false | 是否可删除 |
| showAddBtn | `boolean` | true | 是否显示添加按钮 |
| addApi | [api](./Types.md#Api) | - | 新增时提交的 API | | addApi | [api](./Types.md#Api) | - | 新增时提交的 API |
| updateApi | [api](./Types.md#Api) | - | 修改时提交的 API | | updateApi | [api](./Types.md#Api) | - | 修改时提交的 API |
| deleteApi | [api](./Types.md#Api) | - | 删除时提交的 API | | deleteApi | [api](./Types.md#Api) | - | 删除时提交的 API |

11
src/renderers/Form/index.tsx
View File

@ -86,6 +86,8 @@ export interface FormProps extends RendererProps, FormSchema {
autoFocus?: boolean; autoFocus?: boolean;
horizontal: FormHorizontal; horizontal: FormHorizontal;
canAccessSuperData: boolean; canAccessSuperData: boolean;
persistData: boolean; // 开启本地缓存
clearPersistDataAfterSubmit: boolean; // 提交成功后清空本地缓存
onInit?: (values:object) => any; onInit?: (values:object) => any;
onReset?: (values:object) => void; onReset?: (values:object) => void;
onSubmit?: (values:object, action:any) => any; onSubmit?: (values:object, action:any) => any;
@ -183,11 +185,11 @@ export default class Form extends React.Component<FormProps, object> {
const { const {
store, store,
canAccessSuperData, canAccessSuperData,
initApi, persistData,
initFetch,
} = this.props; } = this.props;
store.setCanAccessSuperData(canAccessSuperData !== false); store.setCanAccessSuperData(canAccessSuperData !== false);
persistData && store.getPersistData();
if (store && store.parentStore && store.parentStore.storeType === 'ComboStore') { if (store && store.parentStore && store.parentStore.storeType === 'ComboStore') {
const combo = store.parentStore as IComboStore; const combo = store.parentStore as IComboStore;
@ -468,7 +470,8 @@ export default class Form extends React.Component<FormProps, object> {
reload, reload,
target, target,
env, env,
onChange onChange,
clearPersistDataAfterSubmit
} = this.props; } = this.props;
if (Array.isArray(action.required) && action.required.length) { 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); resetAfterSubmit && store.reset(onReset);
clearPersistDataAfterSubmit && store.clearPersistData();
return values; return values;
}) })
.catch(reason => { .catch(reason => {

29
src/store/form.ts
View File

@ -5,6 +5,7 @@ import {
getRoot, getRoot,
detach detach
} from "mobx-state-tree"; } from "mobx-state-tree";
import debounce = require('lodash/debounce');
import { import {
ServiceStore, ServiceStore,
} from './service'; } from './service';
@ -44,7 +45,8 @@ export const FormStore = ServiceStore
submiting: false, submiting: false,
validating: false, validating: false,
items: types.optional(types.array(types.late(() => FormItemStore)), []), items: types.optional(types.array(types.late(() => FormItemStore)), []),
canAccessSuperData: true canAccessSuperData: true,
persistData: false
}) })
.views(self => ({ .views(self => ({
get loading() { get loading() {
@ -141,6 +143,10 @@ export const FormStore = ServiceStore
self.pristine = pristine; self.pristine = pristine;
} }
if(self.persistData){
setPersistData();
}
// 同步 options // 同步 options
syncOptions(); syncOptions();
} }
@ -372,6 +378,22 @@ export const FormStore = ServiceStore
self.inited = value; 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 ({ return ({
setInited, setInited,
@ -387,7 +409,10 @@ export const FormStore = ServiceStore
beforeDetach, beforeDetach,
syncOptions, syncOptions,
setCanAccessSuperData, setCanAccessSuperData,
deleteValueByName deleteValueByName,
getPersistData,
setPersistData,
clearPersistData,
}); });
}); });