feat(flowEditor): 新增两个事件节点编辑功能
- 为 EventListenEditor 和 EventSendEditor 添加事件选择功能 - 实现 EventSelect 组件用于事件选择和新增 - 更新 nodeContent 组件以显示事件名称 - 添加测试用的事件列表数据master
parent
e189ffeb4d
commit
7234b0af5b
@ -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;
|
||||||
Loading…
Reference in New Issue