diff --git a/packages/core/src/App.ts b/packages/core/src/App.ts index 904422705..92b1ee0ae 100644 --- a/packages/core/src/App.ts +++ b/packages/core/src/App.ts @@ -26,6 +26,7 @@ import type { CodeBlockDSL, Id, JsEngine, MApp, RequestFunction } from '@tmagic/ import Env from './Env'; import EventHelper from './EventHelper'; import Flexible from './Flexible'; +import FlowState from './FlowState'; import Node from './Node'; import Page from './Page'; import { transformStyle as defaultTransformStyle } from './utils'; @@ -227,15 +228,21 @@ class App extends EventEmitter { * @param eventConfig 代码动作的配置 * @returns void */ - public async runCode(codeId: Id, params: Record, args: any[]) { + public async runCode(codeId: Id, params: Record, args: any[], flowState: FlowState) { if (!codeId || isEmpty(this.codeDsl)) return; const content = this.codeDsl?.[codeId]?.content; if (typeof content === 'function') { - await content({ app: this, params, eventParams: args }); + await content({ app: this, params, eventParams: args, flowState }); } } - public async runDataSourceMethod(dsId: string, methodName: string, params: Record, args: any[]) { + public async runDataSourceMethod( + dsId: string, + methodName: string, + params: Record, + args: any[], + flowState: FlowState, + ) { if (!dsId || !methodName) return; const dataSource = this.dataSourceManager?.get(dsId); @@ -249,7 +256,7 @@ class App extends EventEmitter { if (!method) return; if (typeof method.content === 'function') { - await method.content({ app: this, params, dataSource, eventParams: args }); + await method.content({ app: this, params, dataSource, eventParams: args, flowState }); } } diff --git a/packages/core/src/EventHelper.ts b/packages/core/src/EventHelper.ts index 5ab43c7d6..2e045bf65 100644 --- a/packages/core/src/EventHelper.ts +++ b/packages/core/src/EventHelper.ts @@ -35,6 +35,7 @@ import { import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, getIdFromEl } from '@tmagic/utils'; import type { default as TMagicApp } from './App'; +import FlowState from './FlowState'; import type { default as TMagicNode } from './Node'; import { COMMON_EVENT_PREFIX, isCommonMethod, triggerCommonMethod } from './utils'; @@ -176,26 +177,35 @@ export default class EventHelper extends EventEmitter { * @param args 事件参数 */ private async eventHandler(config: EventConfig | number, fromCpt: TMagicNode | DataSource | undefined, args: any[]) { + console.log('eventHandler', config, fromCpt); const eventConfig = typeof config === 'number' ? (fromCpt as TMagicNode).events[config] : config; if (has(eventConfig, 'actions')) { // EventConfig类型 + const flowState = new FlowState(); const { actions } = eventConfig as EventConfig; for (let i = 0; i < actions.length; i++) { + if (flowState?.isAbort) break; if (typeof config === 'number') { // 事件响应中可能会有修改数据源数据的,会更新dsl,所以这里需要重新获取 const actionItem = ((fromCpt as TMagicNode).events[config] as EventConfig).actions[i]; - this.actionHandler(actionItem, fromCpt as TMagicNode, args); + this.actionHandler(actionItem, fromCpt as TMagicNode, args, flowState); } else { - this.actionHandler(actions[i], fromCpt as DataSource, args); + this.actionHandler(actions[i], fromCpt as DataSource, args, flowState); } } + flowState.reset(); } else { // 兼容DeprecatedEventConfig类型 组件动作 await this.compActionHandler(eventConfig as unknown as CompItemConfig, fromCpt as TMagicNode, args); } } - private async actionHandler(actionItem: EventActionItem, fromCpt: TMagicNode | DataSource, args: any[]) { + private async actionHandler( + actionItem: EventActionItem, + fromCpt: TMagicNode | DataSource, + args: any[], + flowState: FlowState, + ) { if (actionItem.actionType === ActionType.COMP) { const compActionItem = actionItem as CompItemConfig; // 组件动作 @@ -203,13 +213,13 @@ export default class EventHelper extends EventEmitter { } else if (actionItem.actionType === ActionType.CODE) { const codeActionItem = actionItem as CodeItemConfig; // 执行代码块 - await this.app.runCode(codeActionItem.codeId, codeActionItem.params || {}, args); + await this.app.runCode(codeActionItem.codeId, codeActionItem.params || {}, args, flowState); } else if (actionItem.actionType === ActionType.DATA_SOURCE) { const dataSourceActionItem = actionItem as DataSourceItemConfig; const [dsId, methodName] = dataSourceActionItem.dataSourceMethod; - await this.app.runDataSourceMethod(dsId, methodName, dataSourceActionItem.params || {}, args); + await this.app.runDataSourceMethod(dsId, methodName, dataSourceActionItem.params || {}, args, flowState); } } diff --git a/packages/core/src/FlowState.ts b/packages/core/src/FlowState.ts new file mode 100644 index 000000000..18c01af25 --- /dev/null +++ b/packages/core/src/FlowState.ts @@ -0,0 +1,12 @@ +export default class FlowState { + public isAbort: boolean; + constructor() { + this.isAbort = false; + } + public abort() { + this.isAbort = true; + } + public reset() { + this.isAbort = false; + } +} diff --git a/packages/editor/src/hooks/use-code-block-edit.ts b/packages/editor/src/hooks/use-code-block-edit.ts index 5ad0f0db2..f7ce077d7 100644 --- a/packages/editor/src/hooks/use-code-block-edit.ts +++ b/packages/editor/src/hooks/use-code-block-edit.ts @@ -21,7 +21,7 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => { codeConfig.value = { name: '', - content: `({app, params}) => {\n // place your code here\n}`, + content: `({app, params, flowState}) => {\n // place your code here\n}`, params: [], }; diff --git a/packages/editor/src/hooks/use-data-source-method.ts b/packages/editor/src/hooks/use-data-source-method.ts index c2424ddad..2a2eb830f 100644 --- a/packages/editor/src/hooks/use-data-source-method.ts +++ b/packages/editor/src/hooks/use-data-source-method.ts @@ -21,7 +21,7 @@ export const useDataSourceMethod = () => { createCode: async (model: DataSourceSchema) => { codeConfig.value = { name: '', - content: `({ params, dataSource, app }) => {\n // place your code here\n}`, + content: `({ params, dataSource, app, flowState }) => {\n // place your code here\n}`, params: [], }; diff --git a/playground/src/configs/dsl.ts b/playground/src/configs/dsl.ts index a831945ce..b66c36115 100644 --- a/playground/src/configs/dsl.ts +++ b/playground/src/configs/dsl.ts @@ -48,6 +48,22 @@ const dsl: MApp = { }, params: [], }, + code_5317: { + name: 'code1', + content: ({ flowState }) => { + console.log('code1: set flowState.name=lisa'); + flowState.name = 'lisa'; + }, + params: [], + }, + code_5318: { + name: 'code2', + content: ({ flowState }) => { + console.log('print flowState.name', flowState.name); + flowState.abort(); + }, + params: [], + }, }, items: [ {