mirror of
https://gitee.com/nocobase/nocobase.git
synced 2025-05-08 06:59:26 +08:00
chore: add eventflow demos[skip ci]
This commit is contained in:
parent
b254f445e6
commit
0a74b0c7cf
@ -32,7 +32,7 @@ export const openFormDialogAction: EventFlowActionOptions = {
|
|||||||
const { title = '请填写表单', width = 600 } = params;
|
const { title = '请填写表单', width = 600 } = params;
|
||||||
|
|
||||||
// 创建初始值,使用context中传入的数据
|
// 创建初始值,使用context中传入的数据
|
||||||
const initialValues = context || {};
|
const initialValues = context?.payload || {};
|
||||||
|
|
||||||
const formData = await new Promise<Record<string, any>>((resolve) => {
|
const formData = await new Promise<Record<string, any>>((resolve) => {
|
||||||
// 保存表单数据的状态
|
// 保存表单数据的状态
|
||||||
|
@ -0,0 +1,121 @@
|
|||||||
|
import { Button } from 'antd';
|
||||||
|
import React from 'react';
|
||||||
|
import { EventFlowManager } from '../libs/eventflow-manager';
|
||||||
|
import { openSimpleDialogAction } from '../actions/open-simple-dialog';
|
||||||
|
import { openNotificationAction } from '../actions/open-notification';
|
||||||
|
import { openFormDialogAction } from '../actions/open-form-dialog';
|
||||||
|
import { EventManager } from '../libs/event-manager';
|
||||||
|
|
||||||
|
// 创建事件管理器
|
||||||
|
const eventManager = new EventManager();
|
||||||
|
|
||||||
|
// 创建事件流管理器实例
|
||||||
|
const eventFlowManager = new EventFlowManager();
|
||||||
|
|
||||||
|
// 注册事件组
|
||||||
|
eventFlowManager.addEventGroup({
|
||||||
|
name: 'component',
|
||||||
|
title: '组件事件',
|
||||||
|
sort: 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 注册按钮点击事件
|
||||||
|
eventFlowManager.addEvent({
|
||||||
|
name: 'eventflow:button:click',
|
||||||
|
title: '按钮点击',
|
||||||
|
description: '用户点击按钮时触发',
|
||||||
|
group: 'component',
|
||||||
|
sort: 1,
|
||||||
|
uiSchema: {},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 注册动作组
|
||||||
|
eventFlowManager.addActionGroup({
|
||||||
|
name: 'ui',
|
||||||
|
title: 'UI操作',
|
||||||
|
sort: 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 注册三个动作
|
||||||
|
eventFlowManager.addAction(openSimpleDialogAction);
|
||||||
|
eventFlowManager.addAction(openNotificationAction);
|
||||||
|
eventFlowManager.addAction(openFormDialogAction);
|
||||||
|
|
||||||
|
// 创建事件流:按钮点击后依次执行三个动作
|
||||||
|
eventFlowManager.addFlow({
|
||||||
|
key: 'demo-button-click-flow',
|
||||||
|
title: '按钮点击演示流程',
|
||||||
|
on: {
|
||||||
|
event: 'eventflow:button:click',
|
||||||
|
title: '当按钮被点击时',
|
||||||
|
},
|
||||||
|
steps: [
|
||||||
|
{
|
||||||
|
key: 'step1',
|
||||||
|
title: '打开简单对话框',
|
||||||
|
action: 'openSimpleDialog',
|
||||||
|
params: {
|
||||||
|
title: '第一步:简单对话框',
|
||||||
|
width: 600,
|
||||||
|
},
|
||||||
|
isAwait: true, // 等待对话框关闭后再继续
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'step2',
|
||||||
|
title: '显示通知',
|
||||||
|
action: 'openNotification',
|
||||||
|
params: {
|
||||||
|
title: '第二步:通知',
|
||||||
|
description: '这是事件流的第二步,显示通知消息',
|
||||||
|
duration: 3,
|
||||||
|
},
|
||||||
|
isAwait: true, // 等待通知操作完成后再继续
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'step3',
|
||||||
|
title: '打开表单对话框',
|
||||||
|
action: 'openFormDialog',
|
||||||
|
params: {
|
||||||
|
title: '第三步:表单对话框',
|
||||||
|
width: 500,
|
||||||
|
},
|
||||||
|
isAwait: true, // 等待表单对话框关闭后再继续
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
eventManager.on('button:click', (ctx) => {
|
||||||
|
// eventFlowManager的内部事件
|
||||||
|
eventFlowManager.dispatchEvent('eventflow:button:click', ctx);
|
||||||
|
});
|
||||||
|
|
||||||
|
const BasicEventFlow = () => {
|
||||||
|
const handleClick = () => {
|
||||||
|
// 准备事件上下文
|
||||||
|
const ctx = {
|
||||||
|
payload: {
|
||||||
|
name: 'eventflow-demo',
|
||||||
|
time: new Date().toLocaleString(),
|
||||||
|
},
|
||||||
|
source: {
|
||||||
|
type: 'user-interaction',
|
||||||
|
component: 'Button',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// 触发事件
|
||||||
|
eventManager.dispatchEvent('button:click', ctx);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ padding: 24, background: '#f0f2f5', borderRadius: 8 }}>
|
||||||
|
<h3>事件流演示</h3>
|
||||||
|
<p>点击按钮将依次触发三个动作:简单对话框 → 通知 → 表单对话框</p>
|
||||||
|
<Button type="primary" onClick={handleClick}>
|
||||||
|
点击触发事件流
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BasicEventFlow;
|
@ -16,7 +16,7 @@ async function showFormResult(formData: Record<string, string>) {
|
|||||||
const eventManager = new EventManager();
|
const eventManager = new EventManager();
|
||||||
// 监听表单提交事件
|
// 监听表单提交事件
|
||||||
eventManager.on('form:submit', async (ctx) => {
|
eventManager.on('form:submit', async (ctx) => {
|
||||||
const formData = await openFormDialogAction.handler({}, ctx.payload);
|
const formData = await openFormDialogAction.handler({}, ctx);
|
||||||
await showFormResult(formData);
|
await showFormResult(formData);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -22,4 +22,7 @@
|
|||||||
|
|
||||||
<code src="./demos/events/multiple-async-events.tsx"></code>
|
<code src="./demos/events/multiple-async-events.tsx"></code>
|
||||||
|
|
||||||
<!-- <code src="./event-demos/eventflow-demo.tsx"></code> -->
|
# 事件流顺序执行多个action
|
||||||
|
通过EventFlowManager注册事件与多个action,依次执行
|
||||||
|
|
||||||
|
<code src="./demos/events/basic-eventflow.tsx"></code>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user