diff --git a/src/pages/flowEditor/components/nodeContent.tsx b/src/pages/flowEditor/components/nodeContent.tsx index 5c2b7ac..93a2ac1 100644 --- a/src/pages/flowEditor/components/nodeContent.tsx +++ b/src/pages/flowEditor/components/nodeContent.tsx @@ -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 '这个类型还没开发'; } diff --git a/src/pages/flowEditor/nodeEditors/components/EventListenEditor.tsx b/src/pages/flowEditor/nodeEditors/components/EventListenEditor.tsx index 4c907a4..9d6b4ce 100644 --- a/src/pages/flowEditor/nodeEditors/components/EventListenEditor.tsx +++ b/src/pages/flowEditor/nodeEditors/components/EventListenEditor.tsx @@ -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 = ({ nodeData, updateNodeData }) => { + const [eventList, setEventList] = useState(tempEventList); + return ( <> - 输入参数 - 事件选择 + { - updateNodeData('parameters', { - ...nodeData.parameters, - dataIns: data + updateNodeData('component', { + ...data }); - }} - /> + }}> ); }; diff --git a/src/pages/flowEditor/nodeEditors/components/EventSelect.tsx b/src/pages/flowEditor/nodeEditors/components/EventSelect.tsx new file mode 100644 index 0000000..873bfe1 --- /dev/null +++ b/src/pages/flowEditor/nodeEditors/components/EventSelect.tsx @@ -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 = ({ eventList, type, onUpdateData }) => { + const [options, setOptions] = useState([]); + 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 ( + <> + + {showModal && ( setShowModal(false)} + autoFocus={false} + focusLock={true} + > +
+ + + + + + + +