feat(event): 实现事件管理功能

- 新增事件列表展示页面
- 实现事件的增删查功能- 添加事件名称、标识、描述字段校验
- 集成事件相关的API接口调用
- 使用场景ID查询事件列表
- 实现事件删除确认弹窗提示

src/api/event.ts

@@ -0,0 +1,41 @@
+import axios from 'axios';
+import { AddEventParams, DeleteEventParams, DeleteEventForAppParams } from '@/api/interface';
+
+// 公共路径
+const urlPrefix = '/api/v1/bpms-workbench';
+
+// 事件管理-获取事件列表
+export function getEventList() {
+  return axios.get(`${urlPrefix}/event/list`);
+}
+
+// 事件管理-添加事件
+export function addEventItem(params: AddEventParams) {
+  return axios.post(`${urlPrefix}/event/addSub`, params);
+}
+
+// 事件管理-删除事件
+export function deleteEventItem(id: DeleteEventParams) {
+  return axios.delete(`${urlPrefix}/event/${id}/del`);
+}
+
+// 事件管理-删除应用发布(事件发送)
+export function deleteEventPub(params: DeleteEventForAppParams) {
+  return axios.delete(`${urlPrefix}/event/pub`, { data: params });
+}
+
+// 事件管理-删除应用定远(事件接收)
+export function deleteEventSub(params: DeleteEventForAppParams) {
+  return axios.delete(`${urlPrefix}/event/sub`, { data: params });
+}
+
+// 事件管理-查询事件
+export function queryEventItem(name: string) {
+  return axios.post(`${urlPrefix}/event/get`, { name });
+}
+
+// 事件管理-使用场景ID查询事件
+export function queryEventItemBySceneId(sceneId: string) {
+  return axios.get(`${urlPrefix}/event/${sceneId}/get`);
+}
+

src/pages/orchestration/event/index.tsx

@@ -0,0 +1,233 @@
+import React, { useEffect, useState } from 'react';
+import styles from './style/index.module.less';
+import {
+  Button,
+  Input,
+  Space,
+  Divider,
+  Table,
+  TableColumnProps,
+  Modal,
+  Form,
+  Message,
+  Popconfirm
+} from '@arco-design/web-react';
+import { IconSearch } from '@arco-design/web-react/icon';
+import { useSelector } from 'react-redux';
+import { addEventItem, deleteEventItem, queryEventItemBySceneId } from '@/api/event';
+
+const FormItem = Form.Item;
+const TextArea = Input.TextArea;
+
+const HandleModal = ({ visible, onChangeVisible, onRefresh }) => {
+  const [form] = Form.useForm();
+  const { info } = useSelector((state: any) => state.ideContainer);
+
+  const onOk = async () => {
+    await form.validate();
+    const formData = form.getFields();
+
+    const params = {
+      name: formData.name,
+      topic: `${formData.topic}/${info.identity}`,
+      description: formData.description,
+      sceneId: info.id
+    };
+
+    const res: any = await addEventItem(params);
+
+    if (res && res.code === 200) {
+      Message.success('添加成功');
+      onChangeVisible(false);
+      onRefresh();
+    }
+    else {
+      Message.error(res.message);
+    }
+
+    // 清空表单数据和其他变量数据
+    form.resetFields();
+
+  };
+
+  return (
+    <Modal
+      title="新增事件"
+      visible={visible}
+      onOk={() => onOk()}
+      onCancel={() => onChangeVisible(false)}
+      autoFocus={false}
+      focusLock={true}
+      maskClosable={false}
+    >
+      <Form form={form} autoComplete="off">
+        <FormItem
+          field="name"
+          label="事件名称"
+          required
+          rules={[
+            {
+              validator(value, cb) {
+                if (!value) {
+                  return cb('请填写事件名称');
+                }
+                // 检查是否只包含汉字
+                const chineseOnlyRegex = /^[\u4e00-\u9fa5]+$/;
+                if (!chineseOnlyRegex.test(value)) {
+                  return cb('事件名称只能输入汉字');
+                }
+
+                return cb();
+              }
+            }
+          ]}
+        >
+          <Input placeholder="请输入事件名称" />
+        </FormItem>
+        <FormItem
+          field="topic"
+          label="事件标识"
+          required
+          rules={[
+            {
+              validator(value, cb) {
+                if (!value) {
+                  return cb('请填写事件标识');
+                }
+
+                return cb();
+              }
+            }
+          ]}
+        >
+          <Input placeholder="请输入事件标识" />
+        </FormItem>
+        <FormItem
+          field="description"
+          label="事件描述"
+          required
+          rules={[
+            {
+              validator(value, cb) {
+                if (!value) {
+                  return cb('请填写事件描述');
+                }
+
+                return cb();
+              }
+            }
+          ]}
+        >
+          <TextArea placeholder="请输入事件描述" />
+        </FormItem>
+      </Form>
+    </Modal>
+  );
+};
+
+
+const EventContainer = () => {
+  const [eventData, setEventData] = useState<any[]>([]);
+  const [visible, setVisible] = useState(false);
+  const { info } = useSelector((state: any) => state.ideContainer);
+
+  const columns: TableColumnProps[] = [
+    {
+      title: '序号',
+      dataIndex: 'index',
+      render: (_, record, index) => (
+        <div>{index + 1}</div>
+      )
+    },
+    {
+      title: '事件名称',
+      dataIndex: 'name'
+    },
+    {
+      title: '事件标识',
+      dataIndex: 'topic',
+      render: (_, record) => (
+        <div>{record.topic.includes('/') ? record.topic.split('/')[0] : record.topic}</div>
+      )
+    },
+    {
+      title: '事件描述',
+      dataIndex: 'description',
+      width: '80%'
+    },
+    {
+      title: '操作',
+      dataIndex: 'actions',
+      render: (_, record) => (
+        <Popconfirm
+          focusLock
+          title="删除事件"
+          content="事件删除后无法恢复，请谨慎删除！"
+          onOk={async () => {
+            const res: any = await deleteEventItem(record.id);
+            if (res && res.code === 200) {
+              Message.success('删除成功');
+              fetchEventData();
+            }
+            else {
+              Message.error(res.message);
+            }
+          }}
+
+        >
+          <Button style={{ padding: 0 }} type="text" status="danger" size="small">删除</Button>
+        </Popconfirm>
+      )
+    }
+  ];
+
+  const fetchEventData = async () => {
+    const res: any = await queryEventItemBySceneId(info.id);
+    if (res && res.code === 200) setEventData(res.data);
+  };
+
+  useEffect(() => {
+    if (info.id) {
+      fetchEventData();
+    }
+  }, [info.id]);
+
+  return (
+    <div className={styles['event-container']}>
+      {/*头部*/}
+      <div className={styles['event-header']}>
+        <div className={styles['event-title']}>事件列表</div>
+        <div className={styles['event-handle']}>
+          <Space split={<Divider type="vertical" />}>
+            <Input
+              prefix={<IconSearch />}
+              placeholder={'搜索'}
+              style={{ width: 236 }}
+            />
+            <Button
+              type="primary"
+              style={{ marginLeft: 5, borderRadius: 4 }}
+              onClick={() => setVisible(true)}
+            >
+              + 添加事件
+            </Button>
+          </Space>
+        </div>
+      </div>
+      {/*数据列表*/}
+      <div className={styles['event-list']}>
+        <Table columns={columns} data={eventData} pagination={false} />
+      </div>
+
+      {visible &&
+        <HandleModal
+          visible={visible}
+          onChangeVisible={(value => setVisible(value))}
+          onRefresh={() => fetchEventData()}
+        />
+      }
+    </div>
+  );
+};
+
+export default EventContainer;

src/pages/orchestration/event/style/index.module.less

@@ -0,0 +1,22 @@
+.event-container {
+  background-color: #ffffff;
+  padding: 17px 19px 0 24px;
+  height: 98%;
+
+  .event-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 15px;
+
+    .event-title {
+      font-size: 18px;
+      font-weight: 700;
+    }
+
+    .event-handle{}
+  }
+
+  .event-list {
+
+  }
+}