diff --git a/src/components/CronPicker/index.tsx b/src/components/CronPicker/index.tsx index 91eca42..339c774 100644 --- a/src/components/CronPicker/index.tsx +++ b/src/components/CronPicker/index.tsx @@ -44,8 +44,8 @@ const dayMap = { }; const CronPicker: React.FC = ({ value, onChange, style, className, onUpdateData }) => { - const [mode, setMode] = useState<'visual' | 'expression'>('visual'); - const [cron, setCron] = useState(value || '0 0 0 * * ?'); + const [mode, setMode] = useState<'visual' | 'expression'>('expression'); + const [cron, setCron] = useState(value); const [error, setError] = useState(''); // 图形化配置的状态 @@ -62,7 +62,12 @@ const CronPicker: React.FC = ({ value, onChange, style, classNa // 初始化 useEffect(() => { - if (value !== undefined && value !== cron) { + console.log('CronPicker value changed:', value); + console.log('Current cron state:', cron); + + // 当 value 有值且与当前 cron 不同时,更新 cron 状态 + if (value && value !== cron) { + console.log('Updating cron to:', value); setCron(value); // 当外部value变化时,解析并更新图形化配置的状态 parseCronExpression(value); @@ -125,14 +130,31 @@ const CronPicker: React.FC = ({ value, onChange, style, classNa if (mode === 'visual') { return generateCron(); } - return cron; + // 如果 cron 为空,返回空字符串而不是默认值 + return cron || ''; }, [mode, minuteType, minutesInterval, hourType, hourlyAt, dailyType, specificDay, selectedWeekdays, selectedMonths, monthlyType, specificMonths, cron]); + // 使用 ref 来追踪是否是初始化阶段 + const isInitializedRef = React.useRef(false); + useEffect(() => { - onUpdateData({ - customDef: { intervalSeconds: currentCron }, - type: 'CYCLE' - }); + console.log('currentCron changed:', currentCron); + console.log('isInitializedRef.current:', isInitializedRef.current); + + // 跳过初始化时的调用 + if (!isInitializedRef.current) { + isInitializedRef.current = true; + return; + } + + // 只有当 currentCron 有值时才更新 + if (currentCron) { + console.log('Calling onUpdateData with:', currentCron); + onUpdateData({ + customDef: { intervalSeconds: currentCron }, + type: 'CYCLE' + }); + } }, [currentCron]); // 解析Cron表达式并更新图形化配置的状态 @@ -309,10 +331,26 @@ const CronPicker: React.FC = ({ value, onChange, style, classNa return (
- + + {mode === 'expression' && ( +
+ + + {error &&
{error}
} +
+ )} + {mode === 'visual' && (
@@ -446,22 +484,6 @@ const CronPicker: React.FC = ({ value, onChange, style, classNa
)} - {mode === 'expression' && ( -
- - - {error &&
{error}
} -
- )} -
说明:{getHumanReadable()} diff --git a/src/components/FlowEditor/nodeEditors/components/CycleEditor.tsx b/src/components/FlowEditor/nodeEditors/components/CycleEditor.tsx index fc73d5a..dfad220 100644 --- a/src/components/FlowEditor/nodeEditors/components/CycleEditor.tsx +++ b/src/components/FlowEditor/nodeEditors/components/CycleEditor.tsx @@ -1,4 +1,4 @@ -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'; @@ -6,16 +6,22 @@ import ParamsTable from './ParamsTable'; import CronPicker from '@/components/CronPicker'; const CycleEditor: React.FC = ({ nodeData, updateNodeData }) => { - const [cron, setCron] = useState('0 0 9 * * ?'); + // 从 nodeData 中获取初始值,如果没有则使用默认值 + let initialCron = ''; + try { + initialCron = JSON.parse(nodeData.component.customDef).intervalSeconds; + } catch (e) { + } + return ( <> 周期参数 { updateNodeData('component', { + ...nodeData.component, ...data }); }} />