From 94c709614f82fb81cc6dfb2316213b504335207c Mon Sep 17 00:00:00 2001 From: lvxiaojiao Date: Sun, 21 May 2023 17:42:06 +0800 Subject: [PATCH] =?UTF-8?q?feat:form=E5=88=B7=E6=96=B0=E6=94=AF=E6=8C=81in?= =?UTF-8?q?ited=E4=BA=8B=E4=BB=B6&=E5=A2=9E=E5=8A=A0asyncApiFinished?= =?UTF-8?q?=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/form/index.md | 3 +- packages/amis-core/src/renderers/Form.tsx | 59 ++++++++++++++++------- 2 files changed, 43 insertions(+), 19 deletions(-) diff --git a/docs/zh-CN/components/form/index.md b/docs/zh-CN/components/form/index.md index f54cde2bc..fb695f39e 100755 --- a/docs/zh-CN/components/form/index.md +++ b/docs/zh-CN/components/form/index.md @@ -989,7 +989,7 @@ Form 支持轮询初始化接口，步骤如下： ```schema: scope="body" { "type": "form", - "initApi": "/api/mock2/page/initData", + "api": "/api/mock2/form/saveForm", "asyncApi": "/api/mock2/page/initData", "title": "用户信息", "body": [ @@ -1462,6 +1462,7 @@ Form 支持轮询初始化接口，步骤如下： | submit | `event.data: object` 当前表单数据 | 点击提交按钮或者触发表单提交动作的时候触发，配置了该事件后将不会触发表单提交时的校验、提交到 api 或者 target 等行为，所有行为需要自己配置 | | submitSucc | `event.data.result: object` api 远程请求成功后返回的结果数据 | 提交成功时触发 | | submitFail | `event.data.error: object` api 远程请求失败后返回的错误信息 | 提交失败时触发 | +| asyncApiFinished | `[name]: any` 当前数据域中指定字段的值 | asyncApi 远程请求轮训结束 | ## 动作表 diff --git a/packages/amis-core/src/renderers/Form.tsx b/packages/amis-core/src/renderers/Form.tsx index c57ea3e4c..f979866cb 100644 --- a/packages/amis-core/src/renderers/Form.tsx +++ b/packages/amis-core/src/renderers/Form.tsx @@ -491,6 +491,7 @@ export default class Form extends React.Component { this.reload = this.reload.bind(this); this.silentReload = this.silentReload.bind(this); this.initInterval = this.initInterval.bind(this); + this.dispatchInited = this.dispatchInited.bind(this); this.blockRouting = this.blockRouting.bind(this); this.beforePageUnload = this.beforePageUnload.bind(this); @@ -604,6 +605,7 @@ export default class Form extends React.Component { ); } }) + .then(this.dispatchInited) .then(this.initInterval) .then(this.onInit); } else { @@ -637,7 +639,9 @@ export default class Form extends React.Component { successMessage: fetchSuccess, errorMessage: fetchFailed } - ).then(this.initInterval); + ) + .then(this.dispatchInited) + .then(this.initInterval); } } @@ -653,6 +657,27 @@ export default class Form extends React.Component { 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 { const store = this.props.store; const {promptPageLeaveMessage, promptPageLeave} = this.props; @@ -708,19 +733,7 @@ export default class Form extends React.Component { data = cloneObject(store.data); } - // 派发init事件，参数为初始化数据 - 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); - } + onInit && onInit(data, this.props); submitOnInit && this.handleAction( undefined, @@ -770,7 +783,10 @@ export default class Form extends React.Component { ); } }) - .then((result: Payload) => { + .then(async (result: Payload) => { + // 派发初始化接口请求完成事件 + await this.dispatchInited(result); + if (result?.ok) { this.initInterval(result); store.reset(undefined, false); @@ -1112,7 +1128,6 @@ export default class Form extends React.Component { store.openDrawer(data); } else if (isEffectiveApi(action.api || api, values)) { let finnalAsyncApi = action.asyncApi || asyncApi; - isEffectiveApi(finnalAsyncApi, store.data) && store.updateData({ [finishedField || 'finished']: false @@ -1139,10 +1154,18 @@ export default class Form extends React.Component { } const cbResult = until( () => store.checkRemote(finnalAsyncApi as Api, store.data), - (ret: any) => ret && ret[finishedField || 'finished'], + (ret: any) => { + return ret && ret[finishedField || 'finished']; + }, cancel => (this.asyncCancel = cancel), checkInterval - ); + ).then((value: any) => { + // 派发asyncApiFinished事件 + dispatchEvent( + 'asyncApiFinished', + createObject(data, store.data) + ); + }); return { cbResult, dispatcher