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

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

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

Loading…
Cancel
Save