feat(flow): 实现事件监听与发送编辑器的数据刷新功能

src/components/FlowEditor/nodeEditors/components/EventListenEditor.tsx

@@ -1,11 +1,23 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { NodeEditorProps } from '@/components/FlowEditor/nodeEditors';
 import { Typography } from '@arco-design/web-react';
 import { IconUnorderedList } from '@arco-design/web-react/icon';
 import EventSelect from './EventSelect';
+import { useDispatch, useSelector } from 'react-redux';
+import { queryEventItemBySceneId } from '@/api/event';
 
 const EventListenEditor: React.FC<NodeEditorProps> = ({ nodeData, updateNodeData }) => {
   const [eventList, setEventList] = useState<any[]>();
+  const { currentAppData } = useSelector(state => state.ideContainer);
+
+  const getEventList = async () => {
+    const res = await queryEventItemBySceneId(currentAppData.sceneId);
+    setEventList(res.data);
+  };
+
+  useEffect(() => {
+    getEventList();
+  }, []);
 
   return (
     <>
@@ -13,6 +25,7 @@ const EventListenEditor: React.FC<NodeEditorProps> = ({ nodeData, updateNodeData
       <EventSelect
         eventList={eventList}
         type="send"
+        onRefresh={getEventList}
         onUpdateData={(data) => {
           updateNodeData('component', {
             ...data

src/components/FlowEditor/nodeEditors/components/EventSelect.tsx

@@ -1,6 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { Select, Divider, Modal, Button, Form, Input } from '@arco-design/web-react';
+import { Select, Divider, Modal, Button, Form, Input, Message } from '@arco-design/web-react';
 import { IconPlus } from '@arco-design/web-react/icon';
+import { useDispatch, useSelector } from 'react-redux';
+import { addEventItem } from '@/api/event';
+import { AddEventParams } from '@/api/interface';
 
 const FormItem = Form.Item;
 const TextArea = Input.TextArea;
@@ -9,6 +12,7 @@ const Option = Select.Option;
 interface EventSelectProps {
   eventList: any[];
   type: 'send' | 'listen';
+  onRefresh: () => void;
   onUpdateData: (data) => void;
 }
 
@@ -17,10 +21,11 @@ const typeMap = {
   listen: 'EVENTLISTENE'
 };
 
-const EventSelect: React.FC<EventSelectProps> = ({ eventList, type, onUpdateData }) => {
+const EventSelect: React.FC<EventSelectProps> = ({ eventList, type, onRefresh, onUpdateData }) => {
   const [options, setOptions] = useState<any[]>([]);
   const [form] = Form.useForm();
   const [showModal, setShowModal] = useState(false);
+  const { currentAppData } = useSelector(state => state.ideContainer);
 
   useEffect(() => {
     eventList && setOptions(eventList);
@@ -32,9 +37,22 @@ const EventSelect: React.FC<EventSelectProps> = ({ eventList, type, onUpdateData
 
   const saveForm = async () => {
     try {
-      // TODO 需要对接事件新增的接口
       await form.validate();
-      console.log('form:', form.getFields());
+      const formData = form.getFields();
+      const params = {
+        ...formData,
+        sceneId: currentAppData.sceneId,
+        topic: formData.topic += `/${currentAppData.identify}`
+      };
+      const res: any = await addEventItem(params as AddEventParams);
+
+      if (res && res.code === 200) {
+        Message.success('添加成功');
+        onRefresh();
+      }
+      else {
+        Message.error(res.message);
+      }
       setShowModal(false);
     } catch (e) {
     }
@@ -140,6 +158,18 @@ const EventSelect: React.FC<EventSelectProps> = ({ eventList, type, onUpdateData
           <FormItem
             label="事件描述"
             field="description"
+            required
+            rules={[
+              {
+                validator(value, cb) {
+                  if (!value) {
+                    return cb('请填写事件描述');
+                  }
+
+                  return cb();
+                }
+              }
+            ]}
           >
             <TextArea placeholder="请输入事件描述" />
           </FormItem>

src/components/FlowEditor/nodeEditors/components/EventSendEditor.tsx

@@ -1,17 +1,31 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { NodeEditorProps } from '@/components/FlowEditor/nodeEditors';
 import { Typography } from '@arco-design/web-react';
 import { IconUnorderedList } from '@arco-design/web-react/icon';
+import { useDispatch, useSelector } from 'react-redux';
 import EventSelect from '@/components/FlowEditor/nodeEditors/components/EventSelect';
+import { queryEventItemBySceneId } from '@/api/event';
 
 const EventSendEditor: React.FC<NodeEditorProps> = ({ nodeData, updateNodeData }) => {
   const [eventList, setEventList] = useState<any[]>();
+  const { currentAppData } = useSelector(state => state.ideContainer);
+
+  const getEventList = async () => {
+    const res = await queryEventItemBySceneId(currentAppData.sceneId);
+    setEventList(res.data);
+  };
+
+  useEffect(() => {
+    getEventList();
+  }, []);
+
   return (
     <>
-      <Typography.Title heading={5}><IconUnorderedList style={{ marginRight: 5 }} />输入参数</Typography.Title>
+      <Typography.Title heading={5}><IconUnorderedList style={{ marginRight: 5 }} />事件选择</Typography.Title>
       <EventSelect
         eventList={eventList}
         type="send"
+        onRefresh={getEventList}
         onUpdateData={(data) => {
           updateNodeData('component', {
             ...data