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

feat: 表单扩充 inheritData 配置支持不需要隐藏域或者显式映射就能发送所有上层数据的场景了 (#3866)

Browse Source
This commit is contained in:
liaoxuezhi 2022-03-28 10:21:10 +08:00 committed by GitHub
parent e93fce39f2
commit 9de1be13b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 55 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/zh-CN/components/form/index.md
View File

@ -1176,11 +1176,12 @@ Form 支持轮询初始化接口，步骤如下：
| trimValues | `boolean` | `false` | trim 当前表单项的每一个值 |
| promptPageLeave | `boolean` | `false` | form 还没保存，即将离开页面前是否弹框确认。 |
| columnCount | `number` | 0 | 表单项显示为几列 |
| inheritData | `booelan` | `true` | 默认表单是采用数据链的形式创建个自己的数据域，表单提交的时候只会发送自己这个数据域的数据，如果希望共用上层数据域可以设置这个属性为 false，这样上层数据域的数据不需要在表单中用隐藏域或者显式映射才能发送了。 |
## 事件表
| 事件名称 | 事件参数 | 说明 |
|-------------------|------------------------------------------------|----------------------|
| --------------------- | ----------------------------- | -------------- |
| inited | `formData: object` 表单值 | 初始化完成 |
| change | `formData: object` 表单值 | 值变化 |
| formItemValidateSucc | - | 表单项校验成功 |
@ -1190,12 +1191,10 @@ Form 支持轮询初始化接口，步骤如下：
| submitSucc | `result: object` 接口返回内容 | 提交成功 |
| submitFail | `error: object` 接口返回内容 | 提交失败 |
## 动作表
| 动作名称 | 动作配置 | 说明 |
|-------------------|-------------------------|------------------------|
| -------- | -------- | -------- |
| submit | - | 提交表单 |
| reset | - | 重置表单 |
| clear | - | 清空表单 |

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

@ -626,7 +626,8 @@ export default class Form extends React.Component<FormProps, object> {
}
async onInit() {
const {onInit, store, persistData, submitOnInit, dispatchEvent} = this.props;
const {onInit, store, persistData, submitOnInit, dispatchEvent} =
this.props;
if (!isAlive(store)) {
return;
}
@ -659,7 +660,10 @@ export default class Form extends React.Component<FormProps, object> {
persistData && store.getLocalPersistData();
// 派发init事件，参数为初始化数据
const dispatcher = dispatchEvent('inited', createObject(this.props.data, {formData: data}));
const dispatcher = dispatchEvent(
'inited',
createObject(this.props.data, {formData: data})
);
if (!dispatcher?.prevented) {
onInit && onInit(data, this.props);
}
@ -754,7 +758,9 @@ export default class Form extends React.Component<FormProps, object> {
const {store, dispatchEvent, data} = this.props;
this.flush();
return store.validate(this.hooks['validate'] || [], forceValidate).then((result: boolean) => {
return store
.validate(this.hooks['validate'] || [], forceValidate)
.then((result: boolean) => {
if (result) {
dispatchEvent('validateSucc', data);
} else {
@ -792,7 +798,7 @@ export default class Form extends React.Component<FormProps, object> {
fn,
this.hooks['validate'] || [],
__(messages && messages.validateFailed),
validateErrCb,
validateErrCb
);
}
@ -859,7 +865,7 @@ export default class Form extends React.Component<FormProps, object> {
formItemDispatchEvent(dispatchEvent: any) {
return (type: string, data: any) => {
dispatchEvent(type, data);
}
};
}
emitChange(submit: boolean) {
@ -868,9 +874,17 @@ export default class Form extends React.Component<FormProps, object> {
if (!isAlive(store)) {
return;
}
const dispatcher = dispatchEvent('change', createObject(data, {formData: store.data}));
const dispatcher = dispatchEvent(
'change',
createObject(data, {formData: store.data})
);
if (!dispatcher?.prevented) {
onChange && onChange(store.data, difference(store.data, store.pristine), this.props);
onChange &&
onChange(
store.data,
difference(store.data, store.pristine),
this.props
);
}
store.clearRestError();
@ -1026,7 +1040,10 @@ export default class Form extends React.Component<FormProps, object> {
errorMessage: saveFailed,
onSuccess: (result: Payload) => {
// result为提交接口返回的内容
dispatchEvent('submitSucc', createObject(this.props.data, {result}));
dispatchEvent(
'submitSucc',
createObject(this.props.data, {result})
);
if (
!isEffectiveApi(finnalAsyncApi, store.data) ||
store.data[finishedField || 'finished']
@ -1041,7 +1058,10 @@ export default class Form extends React.Component<FormProps, object> {
);
},
onFailed: (result: Payload) => {
dispatchEvent('submitFail', createObject(this.props.data, {error: result}));
dispatchEvent(
'submitFail',
createObject(this.props.data, {error: result})
);
}
})
.then(async response => {
@ -1634,6 +1654,7 @@ export default class Form extends React.Component<FormProps, object> {
type: 'form',
storeType: FormStore.name,
isolateScope: true,
storeExtendsData: (props: any) => props.inheritData,
shouldSyncSuperStore: (store, props, prevProps) => {
// 如果是 QuickEdit，让 store 同步 __super 数据。
if (