1- import React , { useState , useCallback } from "react" ;
1+ import React , { useState , useCallback , useEffect } from "react" ;
22import {
3- Card ,
4- Radio ,
53 Select ,
64 Space ,
7- Typography ,
85 TimePicker ,
96 Button ,
10- Input ,
117 Form ,
128} from "antd" ;
13- import type { RadioChangeEvent } from "antd" ;
149import type { Dayjs } from "dayjs" ;
1510import dayjs from "dayjs" ;
1611
17- const { Text } = Typography ;
18- const { Option } = Select ;
19-
2012export interface SimpleCronConfig {
21- type : "once" | " daily" | "weekly" | "monthly" ;
13+ type : "daily" | "weekly" | "monthly" ;
2214 time ?: string ; // HH:mm 格式
2315 weekDay ?: number ; // 0-6, 0 表示周日
2416 monthDay ?: number ; // 1-31
@@ -32,9 +24,9 @@ interface SimpleCronSchedulerProps {
3224}
3325
3426const defaultConfig : SimpleCronConfig = {
35- type : "once " ,
27+ type : "daily " ,
3628 time : "00:00" ,
37- cronExpression : "0 0 0 * * ? " ,
29+ cronExpression : "0 0 * * * " ,
3830} ;
3931
4032// 生成周几选项
@@ -71,26 +63,33 @@ const SimpleCronScheduler: React.FC<SimpleCronSchedulerProps> = ({
7163} ) => {
7264 const [ config , setConfig ] = useState < SimpleCronConfig > ( value ) ;
7365
66+ useEffect ( ( ) => {
67+ setConfig ( value || defaultConfig ) ;
68+ } , [ value ] ) ;
69+
7470 // 更新配置并生成 cron 表达式
7571 const updateConfig = useCallback (
7672 ( updates : Partial < SimpleCronConfig > ) => {
7773 const newConfig = { ...config , ...updates } ;
7874 const [ hour , minute ] = ( newConfig . time || "00:00" ) . split ( ":" ) ;
75+ if ( newConfig . type === "weekly" && ( newConfig . weekDay === undefined || newConfig . weekDay === null ) ) {
76+ newConfig . weekDay = 1 ;
77+ }
78+ if ( newConfig . type === "monthly" && ( newConfig . monthDay === undefined || newConfig . monthDay === null ) ) {
79+ newConfig . monthDay = 1 ;
80+ }
7981
8082 // 根据不同类型生成 cron 表达式
8183 let cronExpression = "" ;
8284 switch ( newConfig . type ) {
83- case "once" :
84- cronExpression = `0 ${ minute } ${ hour } * * ?` ;
85- break ;
8685 case "daily" :
87- cronExpression = `0 ${ minute } ${ hour } * * ? ` ;
86+ cronExpression = `${ minute } ${ hour } * * * ` ;
8887 break ;
8988 case "weekly" :
90- cronExpression = `0 ${ minute } ${ hour } ? * ${ newConfig . weekDay } ` ;
89+ cronExpression = `${ minute } ${ hour } * * ${ newConfig . weekDay } ` ;
9190 break ;
9291 case "monthly" :
93- cronExpression = `0 ${ minute } ${ hour } ${ newConfig . monthDay } * ? ` ;
92+ cronExpression = `${ minute } ${ hour } ${ newConfig . monthDay } * * ` ;
9493 break ;
9594 }
9695
@@ -106,9 +105,9 @@ const SimpleCronScheduler: React.FC<SimpleCronSchedulerProps> = ({
106105 const updates : Partial < SimpleCronConfig > = { type } ;
107106
108107 // 设置默认值
109- if ( type === "weekly" && ! config . weekDay ) {
108+ if ( type === "weekly" && ( config . weekDay === undefined || config . weekDay === null ) ) {
110109 updates . weekDay = 1 ; // 默认周一
111- } else if ( type === "monthly" && ! config . monthDay ) {
110+ } else if ( type === "monthly" && ( config . monthDay === undefined || config . monthDay === null ) ) {
112111 updates . monthDay = 1 ; // 默认每月1号
113112 }
114113
@@ -133,7 +132,6 @@ const SimpleCronScheduler: React.FC<SimpleCronSchedulerProps> = ({
133132 < div className = "grid grid-cols-2 gap-4" >
134133 < Form . Item label = "执行周期" required >
135134 < Select value = { config . type } onChange = { handleTypeChange } >
136- < Select . Option value = "once" > 仅执行一次</ Select . Option >
137135 < Select . Option value = "daily" > 每天执行</ Select . Option >
138136 < Select . Option value = "weekly" > 每周执行</ Select . Option >
139137 < Select . Option value = "monthly" > 每月执行</ Select . Option >
0 commit comments