ngskcloud
/
flow-playform-react
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(flowEditor): 新增两个事件节点编辑功能

Browse Source 
- 为 EventListenEditor 和 EventSendEditor 添加事件选择功能
- 实现 EventSelect 组件用于事件选择和新增
- 更新 nodeContent 组件以显示事件名称
- 添加测试用的事件列表数据
master
钟良源 5 months ago
parent e189ffeb4d
commit 7234b0af5b
5 changed files with 599 additions and 46 deletions
Show Stats Download Patch File Download Diff File

4
src/pages/flowEditor/components/nodeContent.tsx
Unescape Escape View File

@ -190,6 +190,10 @@ const formatFooter = (data: any) => {
case 'CYCLE':
const { intervalSeconds } = data.customDef;
return cronstrue.toString(intervalSeconds, { locale: 'zh_CN' });
case 'EVENTSEND':
case 'EVENTLISTENE':
const { name } = data.customDef;
return `事件: ${name}`;
default:
return '这个类型还没开发';
}

22
src/pages/flowEditor/nodeEditors/components/EventListenEditor.tsx
Unescape Escape View File

@ -1,22 +1,24 @@
import React from 'react';
import React, { useState } from 'react';
import { NodeEditorProps } from '@/pages/flowEditor/nodeEditors';
import { Typography } from '@arco-design/web-react';
import { IconUnorderedList } from '@arco-design/web-react/icon';
import ParamsTable from './ParamsTable';
import EventSelect from './EventSelect';
import { tempEventList } from '@/pages/flowEditor/test/exampleFlowData';
const EventListenEditor: React.FC<NodeEditorProps> = ({ nodeData, updateNodeData }) => {
const [eventList, setEventList] = useState<any[]>(tempEventList);
return (
<>
<Typography.Title heading={5}><IconUnorderedList style={{ marginRight: 5 }} />输入参数</Typography.Title>
<ParamsTable
initialData={nodeData.parameters.dataIns || []}
<Typography.Title heading={5}><IconUnorderedList style={{ marginRight: 5 }} />事件选择</Typography.Title>
<EventSelect
eventList={eventList}
type="send"
onUpdateData={(data) => {
updateNodeData('parameters', {
...nodeData.parameters,
dataIns: data
updateNodeData('component', {
...data
});
}}
/>
}}></EventSelect>
</>
);
};

153
src/pages/flowEditor/nodeEditors/components/EventSelect.tsx
Unescape Escape View File

@ -0,0 +1,153 @@
import React, { useEffect, useState } from 'react';
import { Select, Divider, Modal, Button, Form, Input } from '@arco-design/web-react';
import { IconPlus } from '@arco-design/web-react/icon';
const FormItem = Form.Item;
const TextArea = Input.TextArea;
const Option = Select.Option;
interface EventSelectProps {
eventList: any[];
type: 'send' | 'listen';
onUpdateData: (data) => void;
}
const typeMap = {
send: 'EVENTSEND',
listen: 'EVENTLISTENE'
};
const EventSelect: React.FC<EventSelectProps> = ({ eventList, type, onUpdateData }) => {
const [options, setOptions] = useState<any[]>([]);
const [form] = Form.useForm();
const [showModal, setShowModal] = useState(false);
useEffect(() => {
setOptions(eventList);
}, [eventList]);
const addItem = () => {
setShowModal(true);
};
const saveForm = async () => {
try {
// TODO 需要对接事件新增的接口
await form.validate();
console.log('form:', form.getFields());
setShowModal(false);
} catch (e) {
}
};
const handelSelect = (e) => {
const data = {
type: typeMap[type],
customDef: {
eventId: e.id,
name: e.name,
topic: e.topic
}
};
onUpdateData(data);
};
return (
<>
<Select
placeholder="请选择事件"
onChange={(e) => handelSelect(e)}
dropdownRender={(menu) => (
<div>
{menu}
<Divider style={{ margin: 0 }} />
<div
style={{
display: 'flex',
alignItems: 'center',
padding: '10px 12px',
justifyContent: 'center'
}}
>
<Button
style={{ fontSize: 14, padding: '0 6px' }}
type="text"
size="mini"
onClick={addItem}
>
<IconPlus />
新增事件
</Button>
</div>
</div>
)}
dropdownMenuStyle={{ maxHeight: 300 }}
>
{options.map((option) => (
<Option key={option.id} value={option}>
{option.name}
</Option>
))}
</Select>
{showModal && (<Modal
title="新增事件"
visible={showModal}
onOk={saveForm}
onCancel={() => setShowModal(false)}
autoFocus={false}
focusLock={true}
>
<Form
form={form}
autoComplete="off"
>
<FormItem
label="事件名称"
field="name"
required
rules={[
{
validator(value, cb) {
if (!value) {
return cb('请填写事件名称');
}
return cb();
}
}
]}
>
<Input placeholder="请输入事件名称" />
</FormItem>
<FormItem
label="事件标识"
field="topic"
required
rules={[
{
validator(value, cb) {
if (!value) {
return cb('请填写事件标识');
}
return cb();
}
}
]}
>
<Input placeholder="请输入事件标识" />
</FormItem>
<FormItem
label="事件描述"
field="description"
>
<TextArea placeholder="请输入事件描述" />
</FormItem>
</Form>
</Modal>)}
</>
);
};
export default EventSelect;

19
src/pages/flowEditor/nodeEditors/components/EventSendEditor.tsx
Unescape Escape View File

@ -1,22 +1,23 @@
import React from 'react';
import React, { useState } from 'react';
import { NodeEditorProps } from '@/pages/flowEditor/nodeEditors';
import { Typography } from '@arco-design/web-react';
import { IconUnorderedList } from '@arco-design/web-react/icon';
import ParamsTable from './ParamsTable';
import EventSelect from '@/pages/flowEditor/nodeEditors/components/EventSelect';
import { tempEventList } from '@/pages/flowEditor/test/exampleFlowData';
const EventSendEditor: React.FC<NodeEditorProps> = ({ nodeData, updateNodeData }) => {
const [eventList, setEventList] = useState<any[]>(tempEventList);
return (
<>
<Typography.Title heading={5}><IconUnorderedList style={{ marginRight: 5 }} />输入参数</Typography.Title>
<ParamsTable
initialData={nodeData.parameters.dataIns || []}
<EventSelect
eventList={eventList}
type="send"
onUpdateData={(data) => {
updateNodeData('parameters', {
...nodeData.parameters,
dataIns: data
updateNodeData('component', {
...data
});
}}
/>
}}></EventSelect>
</>
);
};

447
src/pages/flowEditor/test/exampleFlowData.ts
Unescape Escape View File

@ -2,32 +2,32 @@ export const exampleFlowData = {
'main': {
'id': 'main',
'lineConfigs': [
{
'id': '606f71c3-2051-4775-92a0-835d75b9ab91',
'lineType': 'API',
'next': {
'endpointId': 'start',
'nodeId': 'node_49'
},
'prev': {
'endpointId': 'start',
'nodeId': 'start'
},
'x6': '{"vertices":[]}'
},
{
'id': '480b362e-45c6-4d9f-b55c-532703ff64ec',
'lineType': 'API',
'next': {
'endpointId': 'end',
'nodeId': 'end'
},
'prev': {
'endpointId': 'done',
'nodeId': 'node_49'
},
'x6': '{"vertices":[]}'
}
// {
// 'id': '606f71c3-2051-4775-92a0-835d75b9ab91',
// 'lineType': 'API',
// 'next': {
// 'endpointId': 'start',
// 'nodeId': 'node_49'
// },
// 'prev': {
// 'endpointId': 'start',
// 'nodeId': 'start'
// },
// 'x6': '{"vertices":[]}'
// },
// {
// 'id': '480b362e-45c6-4d9f-b55c-532703ff64ec',
// 'lineType': 'API',
// 'next': {
// 'endpointId': 'end',
// 'nodeId': 'end'
// },
// 'prev': {
// 'endpointId': 'done',
// 'nodeId': 'node_49'
// },
// 'x6': '{"vertices":[]}'
// }
],
'name': '',
'nodeConfigs': [
@ -19612,4 +19612,397 @@ export const mineList = [
],
'label': '网络通信组件'
}
];
];
export const tempEventList = [
{
"createBy": "1123598821738675201",
"createTime": 1752197919000,
"data": "{\"pubApps\": [], \"subApps\": [\"1943601642177236993\", \"1950799849741271042\", \"1948213415817437185\", \"1943213909198553090\"]}",
"description": "测试",
"id": "1943485051785117697",
"name": "事件测试",
"sceneId": "1943133286851096577",
"tenantId": "000000",
"topic": "testTopic01/scene_14",
"updateBy": "1123598821738675201",
"updateTime": 1754900639000
},
{
"createBy": "1123598821738675201",
"createTime": 1752199434000,
"data": "{\"pubApps\": [\"1943484061488971778\"], \"subApps\": [\"1943484061488971778\"]}",
"description": "测试1",
"id": "1943491404054331393",
"name": "测试1",
"sceneId": "1930187368673484802",
"tenantId": "000000",
"topic": "test1/app_16",
"updateBy": "1123598821738675201",
"updateTime": 1752225281000
},
{
"createBy": "1123598821738675201",
"createTime": 1752199546000,
"data": "{\"pubApps\": [], \"subApps\": []}",
"description": "测试2",
"id": "1943491874374221825",
"name": "测试2",
"sceneId": "1930187368673484802",
"tenantId": "000000",
"topic": "test2/app_16",
"updateBy": "1123598821738675201",
"updateTime": 1752202125000
},
{
"createBy": "1123598821738675201",
"createTime": 1752393670000,
"data": "",
"description": "111",
"id": "1944306088012091393",
"name": "事件测试",
"sceneId": "1926533046308691969",
"tenantId": "000000",
"topic": "testopic1/scene_4",
"updateBy": "1123598821738675201",
"updateTime": 1752393670000
},
{
"createBy": "1123598821738675201",
"createTime": 1752393815000,
"data": "{\"subApps\": [\"1926500839217160194\"]}",
"description": "111",
"id": "1944306697620623361",
"name": "testTopie",
"sceneId": "1922135918419456002",
"tenantId": "000000",
"topic": "testtopic1/app_1",
"updateBy": "1123598821738675201",
"updateTime": 1752393901000
},
{
"createBy": "1123598821738675201",
"createTime": 1752393873000,
"data": "",
"description": "qwe",
"id": "1944306940089143298",
"name": "t1",
"sceneId": "1926533046308691969",
"tenantId": "000000",
"topic": "testtopic1/scene_4",
"updateBy": "1123598821738675201",
"updateTime": 1752393873000
},
{
"createBy": "1123598821738675201",
"createTime": 1753068411000,
"data": "{\"pubApps\": [\"1947167301642137602\", \"1947173582788538370\", \"1950438244205387777\"]}",
"description": "螺丝装配完毕事件",
"id": "1947136156904894466",
"name": "螺丝装配完毕",
"sceneId": "1947111285680418818",
"tenantId": "000000",
"topic": "screwAssembly/scene_15",
"updateBy": "1123598821738675201",
"updateTime": 1753864830000
},
{
"createBy": "1123598821738675201",
"createTime": 1753068459000,
"data": "{\"pubApps\": [\"1947167301642137602\"], \"subApps\": [\"1947284188103356417\", \"1947243578403237889\", \"1947206991200038913\"]}",
"description": "轮胎装配完毕",
"id": "1947136358973878273",
"name": "轮胎装配完毕事件",
"sceneId": "1947111285680418818",
"tenantId": "000000",
"topic": "tireAssembly/scene_15",
"updateBy": "1123598821738675201",
"updateTime": 1753345428000
},
{
"createBy": "1123598821738675201",
"createTime": 1753076894000,
"data": "{\"pubApps\": [\"1947167301642137602\", \"1950008134922854402\", \"1950438244205387777\"], \"subApps\": [\"1947172396249296898\", \"1947173582788538370\"]}",
"description": "底盘车身放置完毕",
"id": "1947171738729230337",
"name": "底盘车身放置完毕",
"sceneId": "1947111285680418818",
"tenantId": "000000",
"topic": "chassisCompleted/scene_15",
"updateBy": "1123598821738675201",
"updateTime": 1755684500000
},
{
"createBy": "1123598821738675201",
"createTime": 1753094533000,
"data": "{\"pubApps\": [\"1947206991200038913\"]}",
"description": "",
"id": "1947245721264762881",
"name": "换夹爪完毕",
"sceneId": "1947111285680418818",
"tenantId": "000000",
"topic": "jiazhuaok/app_4",
"updateBy": "1123598821738675201",
"updateTime": 1753094578000
},
{
"createBy": "1123598821738675201",
"createTime": 1753094565000,
"data": "{\"pubApps\": [\"1947247574085971970\", \"1947206991200038913\"], \"subApps\": [\"1947206991200038913\"]}",
"description": "",
"id": "1947245855201472514",
"name": "夹爪放置完毕",
"sceneId": "1947111285680418818",
"tenantId": "000000",
"topic": "fangzhiOK/app_4",
"updateBy": "1123598821738675201",
"updateTime": 1753095384000
},
{
"createBy": "1123598821738675201",
"createTime": 1753094611000,
"data": "{\"subApps\": [\"1947247574085971970\", \"1947206991200038913\"]}",
"description": "",
"id": "1947246051025137665",
"name": "开始夹爪更换",
"sceneId": "1947111285680418818",
"tenantId": "000000",
"topic": "beginjiazhua/app_4",
"updateBy": "1123598821738675201",
"updateTime": 1753095384000
},
{
"createBy": "1123598821738675201",
"createTime": 1753108889000,
"data": "{\"pubApps\": [\"1947284188103356417\", \"1951085958320037889\"], \"subApps\": [\"1947218433047441409\"]}",
"description": "",
"id": "1947305934328082434",
"name": "车辆装配完毕",
"sceneId": "1947111285680418818",
"tenantId": "000000",
"topic": "sendCar/app_4",
"updateBy": "1123598821738675201",
"updateTime": 1756190905000
},
{
"createBy": "1123598821738675201",
"createTime": 1753109223000,
"data": "{\"pubApps\": [\"1947218433047441409\"], \"subApps\": [\"1947840123565682689\", \"1960181129977057282\", \"1947841090445029378\", \"1947228684962410498\", \"1947861173212983298\", \"1947226560178335745\"]}",
"description": "",
"id": "1947307336429383681",
"name": "打标完毕",
"sceneId": "1947111285680418818",
"tenantId": "000000",
"topic": "senddabiao/app_5",
"updateBy": "1123598821738675201",
"updateTime": 1756187298000
},
{
"createBy": "1123598821738675201",
"createTime": 1753345580000,
"data": "{\"pubApps\": [\"1947167301642137602\"], \"subApps\": [\"1947284188103356417\"]}",
"description": "lytai2",
"id": "1948298690581159937",
"name": "轮胎装配完毕2",
"sceneId": "1947111285680418818",
"tenantId": "000000",
"topic": "lytai2/scene_15",
"updateBy": "1123598821738675201",
"updateTime": 1753345648000
},
{
"createBy": "1123598821738675201",
"createTime": 1753347971000,
"data": "{\"pubApps\": [\"1947167301642137602\", \"1950008134922854402\"], \"subApps\": [\"1947284188103356417\", \"1951085958320037889\", \"1950832440820572161\"]}",
"description": "",
"id": "1948308718289608705",
"name": "轮胎3",
"sceneId": "1947111285680418818",
"tenantId": "000000",
"topic": "luntai3/scene_15",
"updateBy": "1123598821738675201",
"updateTime": 1756190905000
},
{
"createBy": "1123598821738675201",
"createTime": 1753862108000,
"data": "{\"pubApps\": [\"1950438244205387777\"], \"subApps\": [\"1950465070467252225\"]}",
"description": "ttt",
"id": "1950465166609088513",
"name": "测试接收",
"sceneId": "1947111285680418818",
"tenantId": "000000",
"topic": "testLister/app_11",
"updateBy": "1123598821738675201",
"updateTime": 1753863106000
},
{
"createBy": "1123598821738675201",
"createTime": 1754027176000,
"data": "{\"pubApps\": [\"1950832440820572161\"], \"subApps\": [\"1950832440820572161\"]}",
"description": "",
"id": "1951157510460862466",
"name": "测试事件4",
"sceneId": "1947111285680418818",
"tenantId": "000000",
"topic": "test_Common/scene_15",
"updateBy": "1123598821738675201",
"updateTime": 1755674220000
},
{
"createBy": "1123598821738675201",
"createTime": 1754556951000,
"data": "",
"description": "string",
"id": "1953379549169266690",
"name": "string",
"sceneId": "string",
"tenantId": "000000",
"topic": "string",
"updateBy": "1123598821738675201",
"updateTime": 1754556951000
},
{
"createBy": "1123598821738675201",
"createTime": 1754557667000,
"data": "{\"pubApps\": [\"1950832440820572161\"], \"subApps\": [\"1950832440820572161\"], \"inputDataTypes\": [{\"id\": \"\", \"desc\": \"\", \"dataType\": \"INTEGER\", \"arrayType\": null, \"defaultValue\": null}], \"outputDataTypes\": [{\"id\": \"\", \"desc\": \"\", \"dataType\": \"INTEGER\", \"arrayType\": null, \"defaultValue\": null}]}",
"description": "string",
"id": "1953382553134157826",
"name": "string",
"sceneId": "1947111285680418818",
"tenantId": "000000",
"topic": "string",
"updateBy": "1123598821738675201",
"updateTime": 1754640513000
},
{
"createBy": "1123598821738675201",
"createTime": 1754620337000,
"data": "{\"inputDataTypes\": [{\"id\": \"dataInput\", \"desc\": \"dataInput\", \"dataType\": \"STRING\", \"arrayType\": null, \"defaultValue\": \"1\"}], \"outputDataTypes\": [{\"id\": \"dataOut\", \"desc\": \"dataOut\", \"dataType\": \"STRING\", \"arrayType\": null, \"defaultValue\": \"2\"}]}",
"description": "事件体测试",
"id": "1953645409743732737",
"name": "事件体测试",
"sceneId": "1943133286851096577",
"tenantId": "000000",
"topic": "事件体测试/scene_14",
"updateBy": "1123598821738675201",
"updateTime": 1754620337000
},
{
"createBy": "1123598821738675201",
"createTime": 1754620788000,
"data": "{\"pubApps\": [\"1950832440820572161\"], \"subApps\": [\"1950832440820572161\"], \"inputDataTypes\": [{\"id\": \"aa\", \"desc\": \"aa\", \"dataType\": \"BOOLEAN\", \"arrayType\": null, \"defaultValue\": \"\"}], \"outputDataTypes\": [{\"id\": \"bb\", \"desc\": \"bb\", \"dataType\": \"ARRAY\", \"arrayType\": null, \"defaultValue\": \"\"}]}",
"description": "1",
"id": "1953647299357376513",
"name": "事件体测试",
"sceneId": "1947111285680418818",
"tenantId": "000000",
"topic": "eventBodyTest/scene_15",
"updateBy": "1123598821738675201",
"updateTime": 1754640513000
},
{
"createBy": "1123598821738675201",
"createTime": 1755692859000,
"data": "{\"pubApps\": [\"1947226560178335745\"], \"subApps\": [\"1947228684962410498\"]}",
"description": "",
"id": "1958143890057121794",
"name": "小车质检通过",
"sceneId": "1947111285680418818",
"tenantId": "000000",
"topic": "passCar/app_6",
"updateBy": "1123598821738675201",
"updateTime": 1755692901000
},
{
"createBy": "1123598821738675201",
"createTime": 1755740447000,
"data": "{\"pubApps\": [\"1947226560178335745\"], \"subApps\": [\"1947228684962410498\"]}",
"description": "",
"id": "1958343492081340418",
"name": "小车质检通过新",
"sceneId": "1947111285680418818",
"tenantId": "000000",
"topic": "pscar/app_6",
"updateBy": "1123598821738675201",
"updateTime": 1755740472000
},
{
"createBy": "1123598821738675201",
"createTime": 1755757721000,
"data": "{\"pubApps\": [\"1947226560178335745\"], \"subApps\": [\"1947228684962410498\"]}",
"description": "",
"id": "1958415943196790785",
"name": "小车质检6",
"sceneId": "1947111285680418818",
"tenantId": "000000",
"topic": "passCar666/app_6",
"updateBy": "1123598821738675201",
"updateTime": 1755757736000
},
{
"createBy": "1123598821738675201",
"createTime": 1755759103000,
"data": "{\"pubApps\": [\"1947226560178335745\"], \"subApps\": []}",
"description": "",
"id": "1958421737145421825",
"name": "小车质检7",
"sceneId": "1947111285680418818",
"tenantId": "000000",
"topic": "passCar777/app_6",
"updateBy": "1123598821738675201",
"updateTime": 1755759159000
},
{
"createBy": "1123598821738675201",
"createTime": 1755760052000,
"data": "{\"pubApps\": [\"1947226560178335745\"], \"subApps\": [\"1947228684962410498\"]}",
"description": "",
"id": "1958425718273921025",
"name": "小车质检8",
"sceneId": "1947111285680418818",
"tenantId": "000000",
"topic": "zhijian8/app_6",
"updateBy": "1123598821738675201",
"updateTime": 1756172825000
},
{
"createBy": "1123598821738675201",
"createTime": 1756171874000,
"data": "",
"description": "",
"id": "1960153024373772289",
"name": "事件后缀测试",
"sceneId": "1958050905957126145",
"tenantId": "000000",
"topic": "topicTest1/app_1",
"updateBy": "1123598821738675201",
"updateTime": 1756171874000
},
{
"createBy": "1123598821738675201",
"createTime": 1756174123000,
"data": "{\"pubApps\": [\"1960181129977057282\", \"1947226560178335745\"], \"subApps\": [\"1960176336869052417\", \"1947228684962410498\"]}",
"description": "",
"id": "1960162457703206914",
"name": "小车质检pass",
"sceneId": "1947111285680418818",
"tenantId": "000000",
"topic": "carPass0826/scene_15",
"updateBy": "1123598821738675201",
"updateTime": 1756187298000
},
{
"createBy": "1123598821738675201",
"createTime": 1756794662000,
"data": "{\"subApps\": []}",
"description": "",
"id": "1962765190136659970",
"name": "test",
"sceneId": "1931196258454605825",
"tenantId": "000000",
"topic": "test/app_6",
"updateBy": "1123598821738675201",
"updateTime": 1756794736000
}
]
Write Preview
Loading…
Cancel
Save