From bbd0b570019a0bfd992ef986e352f194197689cb Mon Sep 17 00:00:00 2001 From: liaoxuezhi <2betop.cn@gmail.com> Date: Thu, 11 May 2023 21:55:41 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=20scaffoldForm=20?= =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E7=BB=9F=E4=B8=80=E7=94=A8=20store=20?= =?UTF-8?q?=E6=9D=A5=E6=8E=A7=E5=88=B6=20(#6860)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-core/src/renderers/Options.tsx | 18 ++++--- .../src/component/ScaffoldModal.tsx | 49 +++++-------------- packages/amis-editor-core/src/store/editor.ts | 15 +++++- packages/amis/src/renderers/CRUD.tsx | 5 ++ 4 files changed, 42 insertions(+), 45 deletions(-) diff --git a/packages/amis-core/src/renderers/Options.tsx b/packages/amis-core/src/renderers/Options.tsx index 4b3862531..4d86c694a 100644 --- a/packages/amis-core/src/renderers/Options.tsx +++ b/packages/amis-core/src/renderers/Options.tsx @@ -803,14 +803,16 @@ export function registerOptionsControl(config: OptionsConfig) { return; } - return formItem.loadOptions( - source, - data, - undefined, - false, - isInit ? setPrinstineValue : onChange, - setError - ); + return isAlive(formItem) + ? formItem.loadOptions( + source, + data, + undefined, + false, + isInit ? setPrinstineValue : onChange, + setError + ) + : undefined; } @autobind diff --git a/packages/amis-editor-core/src/component/ScaffoldModal.tsx b/packages/amis-editor-core/src/component/ScaffoldModal.tsx index f30f40854..88c286a3a 100644 --- a/packages/amis-editor-core/src/component/ScaffoldModal.tsx +++ b/packages/amis-editor-core/src/component/ScaffoldModal.tsx @@ -4,7 +4,6 @@ import {EditorStoreType} from '../store/editor'; import {render, Modal, getTheme, Icon, Spinner, Button} from 'amis'; import {observer} from 'mobx-react'; import {autobind, isObject} from '../util'; -import {createObject} from 'amis-core'; export interface SubEditorProps { store: EditorStoreType; @@ -12,23 +11,8 @@ export interface SubEditorProps { theme?: string; } -interface ScaffoldState { - step: number; -} - @observer -export class ScaffoldModal extends React.Component< - SubEditorProps, - ScaffoldState -> { - constructor(props: SubEditorProps) { - super(props); - - this.state = { - step: 0 - }; - } - +export class ScaffoldModal extends React.Component { @autobind handleConfirm([values]: any) { const store = this.props.store; @@ -47,7 +31,7 @@ export class ScaffoldModal extends React.Component< store.scaffoldForm?.callback(values); store.closeScaffoldForm(); - this.setState({step: 0}); + store.scaffoldForm?.stepsBody && store.setScaffoldStep(0); } buildSchema() { @@ -91,9 +75,6 @@ export class ScaffoldModal extends React.Component< api: scaffoldFormContext.api, ...layout, wrapperComponent: 'div', - data: { - __step: 0 - }, [scaffoldFormContext.controls ? 'controls' : 'body']: body }; // const {store} = this.props; @@ -151,27 +132,25 @@ export class ScaffoldModal extends React.Component< @autobind goToNextStep() { // 不能更新props的data，控制amis不重新渲染，否则数据会重新初始化 + const store = this.props.store; const form = this.amisScope?.getComponents()[0].props.store; - const step = this.state.step + 1; + const step = store.scaffoldFormStep + 1; form.setValueByName('__step', step); // 控制按钮 - this.setState({ - step - }); + store.setScaffoldStep(step); } @autobind goToPrevStep() { // 不能更新props的data，控制amis不重新渲染，否则数据会重新初始化 + const store = this.props.store; const form = this.amisScope?.getComponents()[0].props.store; - const step = this.state.step - 1; + const step = store.scaffoldFormStep - 1; form.setValueByName('__step', step); // 控制按钮 - this.setState({ - step - }); + store.setScaffoldStep(step); } @autobind @@ -206,7 +185,7 @@ export class ScaffoldModal extends React.Component< @autobind handleCancelClick() { this.props.store.closeScaffoldForm(); - this.setState({step: 0}); + this.props.store.setScaffoldStep(0); } render() { @@ -216,8 +195,9 @@ export class ScaffoldModal extends React.Component< const isStepBody = !!scaffoldFormContext?.stepsBody; const isLastStep = - isStepBody && this.state.step === scaffoldFormContext!.body.length - 1; - const isFirstStep = isStepBody && this.state.step === 0; + isStepBody && + store.scaffoldFormStep === scaffoldFormContext!.body.length - 1; + const isFirstStep = isStepBody && store.scaffoldFormStep === 0; return ( ()), + scaffoldFormStep: 0, scaffoldFormBuzy: false, scaffoldError: '', @@ -997,6 +999,13 @@ export const MainStore = types 1, true ); + }, + + get scaffoldData() { + return createObject(self.ctx, { + ...(self.scaffoldForm?.value || {}), + __step: self.scaffoldFormStep + }); } }; }) @@ -1671,6 +1680,10 @@ export const MainStore = types self.scaffoldFormBuzy = !!value; }, + setScaffoldStep(value: number) { + self.scaffoldFormStep = value; + }, + setScaffoldError(msg: string = '') { self.scaffoldError = msg; }, diff --git a/packages/amis/src/renderers/CRUD.tsx b/packages/amis/src/renderers/CRUD.tsx index 5c58d7e7e..10c137dda 100644 --- a/packages/amis/src/renderers/CRUD.tsx +++ b/packages/amis/src/renderers/CRUD.tsx @@ -50,6 +50,7 @@ import type {CardsRendererEvent} from './Cards'; import {isPureVariable, resolveVariableAndFilter, parseQuery} from 'amis-core'; import type {PaginationProps} from './Pagination'; +import {isAlive} from 'mobx-state-tree'; export type CRUDBultinToolbarType = | 'columns-toggler' @@ -1186,6 +1187,10 @@ export default class CRUD extends React.Component { columns: store.columns ?? columns }) .then(async value => { + if (!isAlive(store)) { + return value; + } + const {page, lastPage, data, msg, error} = store; if (isInit) {