mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-06 05:49:32 +08:00
commit
e97c894053
@ -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`值),多个请用 `,` 号隔开。 |
|
||||||
|
|
||||||
#### 其他配置项
|
#### 其他配置项
|
||||||
| 属性名 | 类型 | 默认值 | 说明 |
|
| 属性名 | 类型 | 默认值 | 说明 |
|
||||||
| -------- | --------------- | ------- | ----------------------------------------------------------------------------------------------------------- |
|
| -------- | --------------- | ------- | ----------------------------------------------------------------------------------------------------------- |
|
||||||
|
@ -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) 里面。
|
||||||
|
@ -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 |
|
||||||
|
@ -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 => {
|
||||||
|
@ -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,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user