feat:form刷新支持inited事件&增加asyncApiFinished事件

This commit is contained in:
lvxiaojiao 2023-05-21 17:42:06 +08:00
parent 11d6c6e1de
commit 94c709614f
2 changed files with 43 additions and 19 deletions

View File

@ -989,7 +989,7 @@ Form 支持轮询初始化接口,步骤如下:
```schema: scope="body" ```schema: scope="body"
{ {
"type": "form", "type": "form",
"initApi": "/api/mock2/page/initData", "api": "/api/mock2/form/saveForm",
"asyncApi": "/api/mock2/page/initData", "asyncApi": "/api/mock2/page/initData",
"title": "用户信息", "title": "用户信息",
"body": [ "body": [
@ -1462,6 +1462,7 @@ Form 支持轮询初始化接口,步骤如下:
| submit | `event.data: object` 当前表单数据 | 点击提交按钮或者触发表单提交动作的时候触发,配置了该事件后将不会触发表单提交时的校验、提交到 api 或者 target 等行为,所有行为需要自己配置 | | submit | `event.data: object` 当前表单数据 | 点击提交按钮或者触发表单提交动作的时候触发,配置了该事件后将不会触发表单提交时的校验、提交到 api 或者 target 等行为,所有行为需要自己配置 |
| submitSucc | `event.data.result: object` api 远程请求成功后返回的结果数据 | 提交成功时触发 | | submitSucc | `event.data.result: object` api 远程请求成功后返回的结果数据 | 提交成功时触发 |
| submitFail | `event.data.error: object` api 远程请求失败后返回的错误信息 | 提交失败时触发 | | submitFail | `event.data.error: object` api 远程请求失败后返回的错误信息 | 提交失败时触发 |
| asyncApiFinished | `[name]: any` 当前数据域中指定字段的值 | asyncApi 远程请求轮训结束 |
## 动作表 ## 动作表

View File

@ -491,6 +491,7 @@ export default class Form extends React.Component<FormProps, object> {
this.reload = this.reload.bind(this); this.reload = this.reload.bind(this);
this.silentReload = this.silentReload.bind(this); this.silentReload = this.silentReload.bind(this);
this.initInterval = this.initInterval.bind(this); this.initInterval = this.initInterval.bind(this);
this.dispatchInited = this.dispatchInited.bind(this);
this.blockRouting = this.blockRouting.bind(this); this.blockRouting = this.blockRouting.bind(this);
this.beforePageUnload = this.beforePageUnload.bind(this); this.beforePageUnload = this.beforePageUnload.bind(this);
@ -604,6 +605,7 @@ export default class Form extends React.Component<FormProps, object> {
); );
} }
}) })
.then(this.dispatchInited)
.then(this.initInterval) .then(this.initInterval)
.then(this.onInit); .then(this.onInit);
} else { } else {
@ -637,7 +639,9 @@ export default class Form extends React.Component<FormProps, object> {
successMessage: fetchSuccess, successMessage: fetchSuccess,
errorMessage: fetchFailed errorMessage: fetchFailed
} }
).then(this.initInterval); )
.then(this.dispatchInited)
.then(this.initInterval);
} }
} }
@ -653,6 +657,27 @@ export default class Form extends React.Component<FormProps, object> {
this.unBlockRouting?.(); this.unBlockRouting?.();
} }
async dispatchInited(value: any) {
const {data, store, dispatchEvent} = this.props;
if (store.fetching) {
return;
}
// 派发init事件参数为初始化数据
await dispatchEvent(
'inited',
createObject(data, {
...value?.data, // 保留,兼容历史
responseData: value?.data ?? {},
responseStatus: store.error ? 1 : 0,
responseMsg: store.msg
})
);
return value;
}
blockRouting(): any { blockRouting(): any {
const store = this.props.store; const store = this.props.store;
const {promptPageLeaveMessage, promptPageLeave} = this.props; const {promptPageLeaveMessage, promptPageLeave} = this.props;
@ -708,19 +733,7 @@ export default class Form extends React.Component<FormProps, object> {
data = cloneObject(store.data); data = cloneObject(store.data);
} }
// 派发init事件参数为初始化数据 onInit && onInit(data, this.props);
const dispatcher = await dispatchEvent(
'inited',
createObject(this.props.data, {
...data, // 保留,兼容历史
responseData: data ?? {},
responseStatus: store.error ? 1 : 0,
responseMsg: store.msg
})
);
if (!dispatcher?.prevented) {
onInit && onInit(data, this.props);
}
submitOnInit && submitOnInit &&
this.handleAction( this.handleAction(
undefined, undefined,
@ -770,7 +783,10 @@ export default class Form extends React.Component<FormProps, object> {
); );
} }
}) })
.then((result: Payload) => { .then(async (result: Payload) => {
// 派发初始化接口请求完成事件
await this.dispatchInited(result);
if (result?.ok) { if (result?.ok) {
this.initInterval(result); this.initInterval(result);
store.reset(undefined, false); store.reset(undefined, false);
@ -1112,7 +1128,6 @@ export default class Form extends React.Component<FormProps, object> {
store.openDrawer(data); store.openDrawer(data);
} else if (isEffectiveApi(action.api || api, values)) { } else if (isEffectiveApi(action.api || api, values)) {
let finnalAsyncApi = action.asyncApi || asyncApi; let finnalAsyncApi = action.asyncApi || asyncApi;
isEffectiveApi(finnalAsyncApi, store.data) && isEffectiveApi(finnalAsyncApi, store.data) &&
store.updateData({ store.updateData({
[finishedField || 'finished']: false [finishedField || 'finished']: false
@ -1139,10 +1154,18 @@ export default class Form extends React.Component<FormProps, object> {
} }
const cbResult = until( const cbResult = until(
() => store.checkRemote(finnalAsyncApi as Api, store.data), () => store.checkRemote(finnalAsyncApi as Api, store.data),
(ret: any) => ret && ret[finishedField || 'finished'], (ret: any) => {
return ret && ret[finishedField || 'finished'];
},
cancel => (this.asyncCancel = cancel), cancel => (this.asyncCancel = cancel),
checkInterval checkInterval
); ).then((value: any) => {
// 派发asyncApiFinished事件
dispatchEvent(
'asyncApiFinished',
createObject(data, store.data)
);
});
return { return {
cbResult, cbResult,
dispatcher dispatcher