refactor(flow):重构事件选择器逻辑并优化节点内容显示

- 移除未使用的 specialOptions 状态- 修改事件匹配逻辑,使用 topic 替代 eventId 进行查找
- 更新事件选择下拉框的选项键值为 topicId
- 修正事件描述字段名称从 desc 到 description
- 在节点内容组件中引入 Redux 状态以获取事件列表- 调整事件显示逻辑,确保能正确展示事件名称
-优化 footer 格式化函数以兼容旧版事件数据结构
master
钟良源 3 months ago
parent be71426433
commit f856a0db4f

@ -24,7 +24,6 @@ const typeMap = {
const EventSelect: React.FC<EventSelectProps> = ({ nodeData, eventList, type, onRefresh, onUpdateData }) => {
const [options, setOptions] = useState<any[]>([]);
const [specialOptions, setSpecialOptions] = useState<any>({});
const [form] = Form.useForm();
const [showModal, setShowModal] = useState(false);
const [currentEvent, setCurrentEvent] = useState<any>(null);
@ -32,7 +31,6 @@ const EventSelect: React.FC<EventSelectProps> = ({ nodeData, eventList, type, on
useEffect(() => {
if (nodeData && eventList && eventList.length > 0) {
setSpecialOptions(eventList.find(item => item.topic.includes('**empty**')));
setOptions(eventList.filter(item => !item.topic.includes('**empty**')));
try {
const customDef = JSON.parse(nodeData.component?.customDef);
@ -41,7 +39,7 @@ const EventSelect: React.FC<EventSelectProps> = ({ nodeData, eventList, type, on
setCurrentEvent(null);
}
else {
setCurrentEvent(eventList.find(item => customDef.eventId === item.eventId));
setCurrentEvent(eventList.find(item => customDef.topic === item.topic));
}
} catch (e) {
// 先判断topic是不是**empty**是就不设置currentevent
@ -49,7 +47,7 @@ const EventSelect: React.FC<EventSelectProps> = ({ nodeData, eventList, type, on
setCurrentEvent(null);
}
else {
setCurrentEvent(eventList.find(item => nodeData.component?.customDef.eventId === item.eventId));
setCurrentEvent(eventList.find(item => nodeData.component?.customDef.topic === item.topic));
}
}
}
@ -85,7 +83,7 @@ const EventSelect: React.FC<EventSelectProps> = ({ nodeData, eventList, type, on
const data = {
type: typeMap[type],
customDef: {
eventId: e.eventId,
eventId: null,
name: e.name,
topic: e.topic
}
@ -126,7 +124,7 @@ const EventSelect: React.FC<EventSelectProps> = ({ nodeData, eventList, type, on
dropdownMenuStyle={{ maxHeight: 300 }}
>
{options.map((option) => (
<Option key={option.eventId} value={option}>
<Option key={option.topicId} value={option}>
{option.name}
</Option>
))}

@ -3,6 +3,7 @@ import styles from '@/components/FlowEditor/node/style/baseOther.module.less';
import { Handle, Position, useStore } from '@xyflow/react';
import { deserializeValue, isJSON } from '@/utils/common';
import cronstrue from 'cronstrue/i18n';
import { useSelector } from 'react-redux';
interface NodeContentData {
parameters?: {
@ -178,7 +179,7 @@ const renderRegularNodeHandles = (dataIns: any[], dataOuts: any[], apiIns: any[]
);
};
const formatFooter = (data: any) => {
const formatFooter = (data: any, eventListOld = []) => {
try {
switch (data?.type) {
case 'WAIT':
@ -192,9 +193,10 @@ const formatFooter = (data: any) => {
return cronstrue.toString(intervalSeconds, { locale: 'zh_CN' });
case 'EVENTSEND':
case 'EVENTLISTENE':
const { name, topic } = isJSON(data.customDef) ? JSON.parse(data.customDef) : data.customDef;
const { eventId, topic, name } = isJSON(data.customDef) ? JSON.parse(data.customDef) : data.customDef;
if (topic.includes('**empty**')) return '';
return `事件: ${name}`;
const currentEvent = eventListOld.length > 0 ? eventListOld.find(item => item.eventId === eventId) : { name: '无' };
return `事件: ${name || currentEvent.name}`;
case 'BASIC':
return data.compIdentifier ? `当前实例:${data.compIdentifier}` : '';
default:
@ -206,6 +208,7 @@ const formatFooter = (data: any) => {
};
const NodeContent = ({ data }: { data: NodeContentData }) => {
const { eventListOld } = useSelector((state) => state.ideContainer);
const apiIns = data.parameters?.apiIns || [];
const apiOuts = data.parameters?.apiOuts || [];
const dataIns = data.parameters?.dataIns || [];
@ -284,7 +287,7 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
{/*footer栏*/}
{showFooter && (
<div className={styles['node-footer']}>
{formatFooter(footerData)}
{formatFooter(footerData, eventListOld)}
</div>
)}

@ -106,7 +106,7 @@ const HandleModal = ({ visible, onChangeVisible, onRefresh }) => {
<Input placeholder="请输入事件标识" />
</FormItem>
<FormItem
field="desc"
field="description"
label="事件描述"
required
rules={[
@ -142,13 +142,13 @@ const EventContainer = () => {
return eventData.filter(item => {
const name = item.name || '';
const topic = item.topic || '';
const desc = item.description || '';
const description = item.description || '';
const searchLower = searchValue.toLowerCase();
return (
name.toLowerCase().includes(searchLower) ||
topic.toLowerCase().includes(searchLower) ||
desc.toLowerCase().includes(searchLower)
description.toLowerCase().includes(searchLower)
);
});
}, [eventData, searchValue]);

Loading…
Cancel
Save