React-CRON表达式生成器

最新推荐文章于 2024-06-25 09:32:31 发布
最新推荐文章于 2024-06-25 09:32:31 发布
阅读量4.8k 收藏 10
点赞数 6
分类专栏： react 文章标签： react cron
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JIA_CHENG/article/details/88553117
版权

自己写的一个CRON生成器，写的时候没有考虑组件化，所以比较繁杂，也没什么时间去优化，有需要的自己优化结构哈~

使用的是react+Ant+mobx，虽然加入了国际化组件但是并没有使用到，就被砍了，因为用户也不会用。

代码比较长，也比较笨，写的时候仅仅是想先完成功能再去优化，可惜没等我优化就凉了，后续有时间再改，代码下面有运行截图。

另外这里面的逻辑不能保证是正确的，因为我没有进行很多的测试，要使用请多测试，要是有bug，一定要说出来！我改还不行吗！！

附上全部代码

import React from 'react'
import { Input,Tabs,Radio,Checkbox, Row,Col } from 'antd';
import { observer, inject } from 'mobx-react'
import { injectIntl, intlShape } from 'react-intl'
const TabPane = Tabs.TabPane;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;
const options =[];
const hourOptions =[];
const daysForMonOptions =[];
const monthOptions =[];
const weekOptions =[];
for(let i = 0;i < 60;i++){ options.push(i.toString()) };
for(let i = 0;i < 24;i++){ hourOptions.push(i.toString()) };
for(let i = 1;i < 32;i++){ daysForMonOptions.push(i.toString()) };
for(let i = 1;i < 13;i++){ monthOptions.push(i.toString()) };
for(let i = 1;i < 7;i++){ weekOptions.push(i.toString()) };

@inject('UI','List')
@observer
class CRONExpression extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      searchValue:'',
      CRONExpression:'',
      CRONVal:'',
      secondVal:'*',
      minVal:'*',
      hourVal:'*',
      dayOfMonVal:'*',
      MonVal:'*',
      dayOfWekVal:'?',
      yearVal:'',
      secondCycleStart:'',
      secondCycleEnd:'',
      secondStart:'',
      secondEvery:'',
      secondChecked:'',
      SecondRadiochecked:1,
      minuteCycleStart:'',
      minuteCycleEnd:'',
      minuteStart:'',
      minuteEvery:'',
      minuteChecked:'',
      minuteRadiochecked:1,
      hourCycleStart:'',
      hourCycleEnd:'',
      hourStart:'',
      hourEvery:'',
      hourChecked:'',
      hourRadiochecked:1,
      daysCycleStart:'',
      daysCycleEnd:'',
      daysStart:'',
      daysEvery:'',
      daysChecked:'',
      daysForWorking:'',
      daysRadiochecked:1,
      monthCycleStart:'',
      monthCycleEnd:'',
      monthStart:'',
      monthEvery:'',
      monthChecked:'',
      monthRadiochecked:1,
      weekCycleStart:'',
      weekCycleEnd:'',
      weekStart:'',
      weekEvery:'',
      weekChecked:'',
      weekRadiochecked:1,
      yearCycleStart:'',
      yearCycleEnd:'',
      yearRadiochecked:1,
    }
  }
  //生成复选框
  createChecks = (data) => {
    return data.map(index => {
      return( <Col key={index} span={4}><Checkbox  value={index.toString()}>{index}</Checkbox></Col>)
    })
  }
  //CRONtabs页切换回调
  callback = (key) => {
    console.log(key);
  }

  //CRON-秒-radio选择回调
  onSecondRadioChange = (e) =>{
    // console.log('Second radio checked',e.target.value)
    let SecondRadiochecked = e.target.value;
    this.setState({SecondRadiochecked});
    switch(SecondRadiochecked){
      case 1 : this.setState({ secondVal:'*' ,minVal:'*',hourVal:'*',dayOfMonVal:'*',MonVal:'*',dayOfWekVal:'?',yearVal:'',}); break;
      case 2 : this.setState({ secondVal:this.state.secondCycleStart+'-'+this.state.secondCycleEnd }); break;
      case 3 : this.setState({ secondVal:this.state.secondStart+'/'+this.state.secondEvery }); break;
      case 4 : this.setState({ secondVal:this.state.secondChecked }); break;
    }
    // this.CRONExpression();
  }
  //CRON-秒-指定选择复选框
  onSecndcheckChange=(checkedValues)=> { 
    let secondChecked = checkedValues.join(',');;
    if(this.state.SecondRadiochecked==4){
      this.setState({ secondVal:secondChecked }) 
    }
    this.setState({secondChecked:secondChecked});
  };
  //CRON-秒-指定周期-周期开始值输入框的回调
  secondCycleStart = (e) =>{ 
    if(this.state.SecondRadiochecked==2){
      this.setState({ 
        secondVal:e.target.value+'-'+this.state.secondCycleEnd
       }) 
    }
    this.setState({secondCycleStart:e.target.value});
  };
  //CRON-秒-指定周期-周期结束值输入框的回调
  secondCycleEnd = (e) =>{ 
    if(this.state.SecondRadiochecked==2){
      this.setState({ 
        secondVal:this.state.secondCycleStart+'-'+e.target.value
       }) 
    }
    this.setState({secondCycleEnd:e.target.value});
  };
  //CRON-秒-指定从几秒开始
  secondStart = (e) =>{ 
    if(this.state.SecondRadiochecked==3){
      this.setState({ 
        secondVal:e.target.value+'/'+this.state.secondEvery 
      });
    }
    this.setState({secondStart:e.target.value});
  };
  //CRON-秒-指定每几秒执行一次
  secondEvery = (e) =>{ 
    if(this.state.SecondRadiochecked==3){
      this.setState({ 
        secondVal:this.state.secondStart+'/'+e.target.value 
      });
    }
    this.setState({secondEvery:e.target.value});
  };
  //CRON-分钟-radio选择回调
  onMinuteRadioChange = (e) =>{
    // console.log('Second radio checked',e.target.value)
    let minuteRadiochecked = e.target.value;
    this.setState({minuteRadiochecked});
    switch(minuteRadiochecked){
      case 1 : this.setState({ minVal:'*',hourVal:'*',dayOfMonVal:'*',MonVal:'*',dayOfWekVal:'?',yearVal:'' }); break;
      case 2 : this.setState({ minVal:this.state.minuteCycleStart+'-'+this.state.minuteCycleEnd }); break;
      case 3 : this.setState({ minVal:this.state.minuteStart+'/'+this.state.minuteEvery }); break;
      case 4 : this.setState({ minVal:this.state.minuteChecked }); break;
    }
    if(minuteRadiochecked != 1){
      const {secondVal}=this.state
      if(secondVal=='*'){ this.setState({secondVal:'0'}) };
    }
    // this.CRONExpression();
  }
  //CRON-分钟-指定选择复选框
  onMinuteCheckChange=(checkedValues)=> { 
    let minuteChecked = checkedValues.join(',');;
    if(this.state.minuteRadiochecked==4){ this.setState({ minVal:minuteChecked }) }
    this.setState({minuteChecked:minuteChecked});
  };
  //CRON-分钟-指定周期-周期开始值输入框的回调
  minuteCycleStart = (e) =>{ 
    if(this.state.minuteRadiochecked==2){
      this.setState({ minVal:e.target.value+'-'+this.state.minuteCycleEnd }) 
    }
    this.setState({minuteCycleStart:e.target.value});
  };
  //CRON-分钟-指定周期-周期结束值输入框的回调
  minuteCycleEnd = (e) =>{ 
    if(this.state.minuteRadiochecked==2){
      this.setState({ minVal:this.state.minuteCycleStart+'-'+e.target.value }) 
    }
    this.setState({minuteCycleEnd:e.target.value});
  };
  //CRON-分钟-指定从几秒开始
  minuteStart = (e) =>{ 
    if(this.state.minuteRadiochecked==3){
      this.setState({ minVal:e.target.value+'/'+this.state.minuteEvery });
    }
    this.setState({minuteStart:e.target.value});
  };
  //CRON-分钟-指定每几秒执行一次
  minuteEvery = (e) =>{ 
    if(this.state.minuteRadiochecked==3){
      this.setState({ minVal:this.state.minuteStart+'/'+e.target.value });
    }
    this.setState({minuteEvery:e.target.value});
  };
  //CRON-小时-radio选择回调
  onHourRadioChange = (e) =>{
    // console.log('Second radio checked',e.target.value)
    let hourRadiochecked = e.target.value;
    this.setState({hourRadiochecked});
    switch(hourRadiochecked){
      case 1 : this.setState({ hourVal:'*',dayOfMonVal:'*',MonVal:'*',dayOfWekVal:'?',yearVal:'' }); break;
      case 2 : this.setState({ hourVal:this.state.hourCycleStart+'-'+this.state.hourCycleEnd }); break;
      case 3 : this.setState({ hourVal:this.state.hourStart+'/'+this.state.hourEvery }); break;
      case 4 : this.setState({ hourVal:this.state.hourChecked }); break;
    }
    if(hourRadiochecked != 1){
      const {secondVal,minVal}=this.state
      if(secondVal=='*'){ this.setState({secondVal:'0'}) };
      if(minVal=='*'){ this.setState({minVal:'0'}) };
    }
    // this.CRONExpression();
  }
  //CRON-小时-指定选择复选框
  onHourCheckChange=(checkedValues)=> { 
    let hourChecked = checkedValues.join(',');;
    if(this.state.hourRadiochecked==4){ this.setState({ hourVal:hourChecked }) }
    this.setState({hourChecked:hourChecked});
  };
  //CRON-小时-指定周期-周期开始值输入框的回调
  hourCycleStart = (e) =>{ 
    if(this.state.hourRadiochecked==2){
      this.setState({ hourVal:e.target.value+'-'+this.state.hourCycleEnd }) 
    }
    this.setState({hourCycleStart:e.target.value});
  };
  //CRON-小时-指定周期-周期结束值输入框的回调
  hourCycleEnd = (e) =>{ 
    if(this.state.hourRadiochecked==2){
      this.setState({ hourVal:this.state.hourCycleStart+'-'+e.target.value }) 
    }
    this.setState({hourCycleEnd:e.target.value});
  };
  //CRON-小时-指定从几秒开始
  hourStart = (e) =>{ 
    if(this.state.hourRadiochecked==3){
      this.setState({ hourVal:e.target.value+'/'+this.state.hourEvery });
    }
    this.setState({hourStart:e.target.value});
  };
  //CRON-小时-指定每几秒执行一次
  hourEvery = (e) =>{ 
    if(this.state.hourRadiochecked==3){
      this.setState({ hourVal:this.state.hourStart+'/'+e.target.value });
    }
    this.setState({hourEvery:e.target.value});
  };
  //CRON-日-radio选择回调
  onDaysRadioChange = (e) =>{
    // console.log('Second radio checked',e.target.value)
    let daysRadiochecked = e.target.value;
    this.setState({daysRadiochecked});
    switch(daysRadiochecked){
      case 1 : this.setState({ dayOfMonVal:'*',MonVal:'*',dayOfWekVal:'?',yearVal:'' }); break;
      case 2 : this.setState({ dayOfMonVal:'?' }); break;
      case 3 : this.setState({ dayOfMonVal:this.state.daysCycleStart+'-'+this.state.daysCycleEnd }); break;
      case 4 : this.setState({ dayOfMonVal:this.state.daysStart+'/'+this.state.daysEvery }); break;
      case 5 : this.setState({ dayOfMonVal:this.state.daysForWorking }); break;
      case 6 : this.setState({ dayOfMonVal:'L'}); break;
      case 7 : this.setState({ dayOfMonVal:this.state.daysChecked }); break;
    }
    if(daysRadiochecked != 1){
      const {secondVal,minVal,hourVal}=this.state
      if(secondVal=='*'){ this.setState({secondVal:'0'}) };
      if(minVal=='*'){ this.setState({minVal:'0'}) };
      if(hourVal=='*'){ this.setState({hourVal:'0'}) };
    }
    // this.CRONExpression();
  }
  //CRON-日-指定选择复选框
  onDaysCheckChange=(checkedValues)=> { 
    let daysChecked = checkedValues.join(',');;
    if(this.state.daysRadiochecked==7){ this.setState({ dayOfMonVal:daysChecked }) }
    this.setState({daysChecked:daysChecked});
  };
  //CRON-日-指定周期-周期开始值输入框的回调
  daysCycleStart = (e) =>{ 
    if(this.state.daysRadiochecked==3){
      this.setState({ dayOfMonVal:e.target.value+'-'+this.state.daysCycleEnd }) 
    }
    this.setState({daysCycleStart:e.target.value});
  };
  //CRON-日-指定周期-周期结束值输入框的回调
  daysCycleEnd = (e) =>{ 
    if(this.state.daysRadiochecked==3){
      this.setState({ dayOfMonVal:this.state.daysCycleStart+'-'+e.target.value }) 
    }
    this.setState({daysCycleEnd:e.target.value});
  };
  //CRON-日-指定从多少开始
  daysStart = (e) =>{ 
    if(this.state.daysRadiochecked==4){
      this.setState({ dayOfMonVal:e.target.value+'/'+this.state.daysEvery });
    }
    this.setState({daysStart:e.target.value});
  };
  //CRON-日-指定每多久执行一次
  daysEvery = (e) =>{ 
    if(this.state.daysRadiochecked==4){
      this.setState({ dayOfMonVal:this.state.daysStart+'/'+e.target.value });
    }
    this.setState({daysEvery:e.target.value});
  };
  //CRON-日-指定最近日期的工作日执行
  daysForWorking = (e) =>{ 
    if(this.state.daysRadiochecked==5){
      this.setState({ dayOfMonVal:e.target.value+'W' });
    }
    this.setState({daysForWorking:e.target.value+'W' });
  };
  //CRON-月-radio选择回调
  onMonthRadioChange = (e) =>{
    // console.log('Second radio checked',e.target.value)
    let monthRadiochecked = e.target.value;
    this.setState({monthRadiochecked});
    switch(monthRadiochecked){
      case 1 : this.setState({ MonVal:'*',dayOfWekVal:'?',yearVal:'' }); break;
      case 2 : this.setState({ MonVal:'?' }); break;
      case 3 : this.setState({ MonVal:this.state.monthCycleStart+'-'+this.state.monthCycleEnd }); break;
      case 4 : this.setState({ MonVal:this.state.monthStart+'/'+this.state.monthEvery }); break;
      case 5 : this.setState({ MonVal:this.state.monthChecked }); break;
    }
    if(monthRadiochecked != 1){
      const {secondVal,minVal,hourVal,dayOfMonVal}=this.state
      if(secondVal=='*'){ this.setState({secondVal:'0'}) };
      if(minVal=='*'){ this.setState({minVal:'0'}) };
      if(hourVal=='*'){ this.setState({hourVal:'0'}) };
      if(dayOfMonVal=='*'){ this.setState({dayOfMonVal:'0'}) };
    }
    // this.CRONExpression();
  }
  //CRON-月-指定选择复选框
  onMonthCheckChange=(checkedValues)=> { 
    let monthChecked = checkedValues.join(',');;
    if(this.state.monthRadiochecked==5){ this.setState({ MonVal:monthChecked }) }
    this.setState({monthChecked:monthChecked});
  };
  //CRON-月-指定周期-周期开始值输入框的回调
  monthCycleStart = (e) =>{ 
    if(this.state.monthRadiochecked==3){
      this.setState({ MonVal:e.target.value+'-'+this.state.monthCycleEnd }) 
    }
    this.setState({monthCycleStart:e.target.value});
  };
  //CRON-月-指定周期-周期结束值输入框的回调
  monthCycleEnd = (e) =>{ 
    if(this.state.monthRadiochecked==3){
      this.setState({ MonVal:this.state.monthCycleStart+'-'+e.target.value }) 
    }
    this.setState({monthCycleEnd:e.target.value});
  };
  //CRON-月-指定从多久开始
  monthStart = (e) =>{ 
    if(this.state.monthRadiochecked==4){
      this.setState({ MonVal:e.target.value+'/'+this.state.monthEvery });
    }
    this.setState({monthStart:e.target.value});
  };
  //CRON-月-指定每多久执行一次
  monthEvery = (e) =>{ 
    if(this.state.monthRadiochecked==4){
      this.setState({ MonVal:this.state.monthStart+'/'+e.target.value });
    }
    this.setState({monthEvery:e.target.value});
  };
  //CRON-周-radio选择回调
  onWeekRadioChange = (e) =>{
    // console.log('Second radio checked',e.target.value)
    let weekRadiochecked = e.target.value;
    this.setState({weekRadiochecked});
    switch(weekRadiochecked){
      case 1 : this.setState({ dayOfWekVal:'*',yearVal:'' }); break;
      case 2 : this.setState({ dayOfWekVal:'?' }); break;
      case 3 : this.setState({ dayOfWekVal:this.state.weekCycleStart+'-'+this.state.weekCycleEnd }); break;
      case 4 : this.setState({ dayOfWekVal:this.state.weekStart+'#'+this.state.weekEvery }); break;
      case 5 : this.setState({ dayOfWekVal:'L' }); break;
      case 6 : this.setState({ dayOfWekVal:this.state.weekChecked }); break;
    }
    if(weekRadiochecked != 1){
      const {secondVal,minVal,hourVal,dayOfMonVal,MonVal}=this.state
      if(secondVal=='*'){ this.setState({secondVal:'0'}) };
      if(minVal=='*'){ this.setState({minVal:'0'}) };
      if(hourVal=='*'){ this.setState({hourVal:'0'}) };
      if(dayOfMonVal=='*'){ this.setState({dayOfMonVal:'0'}) };
      if(MonVal=='*'){ this.setState({MonVal:'0'}) };
    }
    // this.CRONExpression();
  }
  //CRON-周-指定选择复选框
  onWeekCheckChange=(checkedValues)=> { 
    let weekChecked = checkedValues.join(',');;
    if(this.state.weekRadiochecked==6){ this.setState({ dayOfWekVal:weekChecked }) }
    this.setState({weekChecked:weekChecked});
  };
  //CRON-周-指定周期-周期开始值输入框的回调
  weekCycleStart = (e) =>{ 
    if(this.state.weekRadiochecked==3){
      this.setState({ dayOfWekVal:e.target.value+'-'+this.state.weekCycleEnd }) 
    }
    this.setState({weekCycleStart:e.target.value});
  };
  //CRON-周-指定周期-周期结束值输入框的回调
  weekCycleEnd = (e) =>{ 
    if(this.state.weekRadiochecked==3){
      this.setState({ dayOfWekVal:this.state.weekCycleStart+'-'+e.target.value }) 
    }
    this.setState({weekCycleEnd:e.target.value});
  };
  //CRON-周-指定从多久开始
  weekStart = (e) =>{ 
    if(this.state.weekRadiochecked==4){
      this.setState({ dayOfWekVal:e.target.value+'#'+this.state.weekEvery });
    }
    this.setState({weekStart:e.target.value});
  };
  //CRON-周-指定每多久执行一次
  weekEvery = (e) =>{ 
    if(this.state.weekRadiochecked==4){
      this.setState({ dayOfWekVal:this.state.weekStart+'#'+e.target.value });
    }
    this.setState({weekEvery:e.target.value});
  };
  //CRON-年-radio选择回调
  onYearRadioChange = (e) =>{
    // console.log('Second radio checked',e.target.value)
    let yearRadiochecked = e.target.value;
    this.setState({yearRadiochecked});
    switch(yearRadiochecked){
      case 1 : this.setState({ yearVal:'' }); break;
      case 2 : this.setState({ yearVal:'*' }); break;
      case 3 : this.setState({ yearVal:this.state.yearCycleStart+'-'+this.state.yearCycleEnd }); break;
    }
    if(yearRadiochecked != 2){
      const {secondVal,minVal,hourVal,dayOfMonVal,MonVal,dayOfWekVal}=this.state
      if(secondVal=='*'){ this.setState({secondVal:'0'}) };
      if(minVal=='*'){ this.setState({minVal:'0'}) };
      if(hourVal=='*'){ this.setState({hourVal:'0'}) };
      if(dayOfMonVal=='*'){ this.setState({dayOfMonVal:'0'}) };
      if(MonVal=='*'){ this.setState({MonVal:'0'}) };
      if(dayOfWekVal=='*'){ this.setState({dayOfWekVal:'?'}) };
    }
    // this.CRONExpression();
  }
  //CRON-年-指定周期-周期开始值输入框的回调
  yearCycleStart = (e) =>{ 
    if(this.state.yearRadiochecked==3){
      this.setState({ yearVal:e.target.value+'-'+this.state.yearCycleEnd }) 
    }
    this.setState({yearCycleStart:e.target.value});
  };
  //CRON-年-指定周期-周期结束值输入框的回调
  yearCycleEnd = (e) =>{ 
    if(this.state.yearRadiochecked==3){
      this.setState({ yearVal:this.state.yearCycleStart+'-'+e.target.value }) 
    }
    this.setState({yearCycleEnd:e.target.value});
  };
  componentWillUpdate (nextProps,nextState) {
    // console.log(nextState,'next')
    this.props.UI.changeCRONExpression(
      nextState.secondVal+' '+
      nextState.minVal+' '+
      nextState.hourVal+' '+
      nextState.dayOfMonVal+' '+
      nextState.MonVal+' '+
      nextState.dayOfWekVal+' '+
      nextState.yearVal
    )
  }
  render () {

    const radioStyle = {
      display: 'block',
      height: '30px',
      lineHeight: '30px',
    };
    return (
        <div className='too'>
          <Tabs defaultActiveKey="1" onChange={this.callback}>
            <TabPane tab="秒" key="1"style={{
                    margin: '24px 0px', background: '#fff', minHeight: 280,
                }}>
            <RadioGroup name="radiogroup"  onChange={this.onSecondRadioChange}>
              <Radio style={radioStyle} value={1}>每秒 允许的通配符[, - * /] </Radio>
              <Radio style={radioStyle} value={2}>按周期
                周期从 <Input type='number' size='small' onChange={this.secondCycleStart} style={{ width: 100 }}/>
                - <Input size='small' type='number' onChange={this.secondCycleEnd} style={{ width: 100 }}/> 秒
              </Radio> 
              <Radio style={radioStyle} value={3}>
                从 <Input type='number' size='small' onChange={this.secondStart} style={{ width: 100 }}/> 秒开始，
                每 <Input type='number' size='small' onChange={this.secondEvery} style={{ width: 100 }}/> 秒执行一次
              </Radio> 
              <Radio style={radioStyle} value={4}>指定<br/>
                <CheckboxGroup style={{ width: '100%' }} onChange={this.onSecndcheckChange} >
                  <Row> {this.createChecks(options)} </Row>
                </CheckboxGroup>
              </Radio>
            </RadioGroup>
            </TabPane>
            <TabPane tab="分钟" key="2">
              <RadioGroup name="radiogroup"  onChange={this.onMinuteRadioChange}>
                <Radio style={radioStyle} value={1}>分钟 允许的通配符[, - * /] </Radio>
                <Radio style={radioStyle} value={2}>按周期
                  周期从 <Input type='number' size='small' onChange={this.minuteCycleStart} style={{ width: 100 }}/>
                  - <Input size='small' type='number' onChange={this.minuteCycleEnd} style={{ width: 100 }}/> 分钟
                </Radio> 
                <Radio style={radioStyle} value={3}>
                  从 <Input type='number' size='small' onChange={this.minuteStart} style={{ width: 100 }}/> 分钟开始，
                  每 <Input type='number' size='small' onChange={this.minuteEvery} style={{ width: 100 }}/> 分钟执行一次
                </Radio> 
                <Radio style={radioStyle} value={4}>指定<br/>
                  <CheckboxGroup style={{ width: '100%' }} onChange={this.onMinuteCheckChange} >
                    <Row> {this.createChecks(options)} </Row>
                  </CheckboxGroup>
                </Radio>
              </RadioGroup>
            </TabPane>
            <TabPane tab="小时" key="3">
              <RadioGroup name="radiogroup"  onChange={this.onHourRadioChange}>
                <Radio style={radioStyle} value={1}>小时 允许的通配符[, - * /] </Radio>
                <Radio style={radioStyle} value={2}>按周期
                  周期从 <Input type='number' size='small' onChange={this.hourCycleStart} style={{ width: 100 }}/>
                  - <Input size='small' type='number' onChange={this.hourCycleEnd} style={{ width: 100 }}/> 小时
                </Radio> 
                <Radio style={radioStyle} value={3}>
                  从 <Input type='number' size='small' onChange={this.hourStart} style={{ width: 100 }}/> 小时开始，
                  每 <Input type='number' size='small' onChange={this.hourEvery} style={{ width: 100 }}/> 小时执行一次
                </Radio> 
                <Radio style={radioStyle} value={4}>指定<br/>
                  <CheckboxGroup style={{ width: '100%' }} onChange={this.onHourCheckChange} >
                    <Row> {this.createChecks(hourOptions)} </Row>
                  </CheckboxGroup>
                </Radio>
              </RadioGroup>
            </TabPane>
            <TabPane tab="日" key="4">
              <RadioGroup name="radiogroup"  onChange={this.onDaysRadioChange}>
                <Radio style={radioStyle} value={1}>日 允许的通配符[, - * / L W] </Radio>
                <Radio style={radioStyle} value={2}>不指定 </Radio>
                <Radio style={radioStyle} value={3}>按周期
                  周期从 <Input type='number' size='small' onChange={this.daysCycleStart} style={{ width: 100 }}/>
                  - <Input size='small' type='number' onChange={this.daysCycleEnd} style={{ width: 100 }}/> 日
                </Radio> 
                <Radio style={radioStyle} value={4}>
                  从 <Input type='number' size='small' onChange={this.daysStart} style={{ width: 100 }}/> 日开始，
                  每 <Input type='number' size='small' onChange={this.daysEvery} style={{ width: 100 }}/> 日执行一次
                </Radio> 
                <Radio style={radioStyle} value={5}>
                每月 <Input type='number' size='small' onChange={this.daysForWorking} style={{ width: 100 }}/> 号最近的工作日
                </Radio>
                <Radio style={radioStyle} value={6}>每月的最后一天 </Radio>
                <Radio style={radioStyle} value={7}>指定<br/>
                  <CheckboxGroup style={{ width: '100%' }} onChange={this.onDaysCheckChange} >
                    <Row> {this.createChecks(daysForMonOptions)} </Row>
                  </CheckboxGroup>
                </Radio>
              </RadioGroup>
            </TabPane>
            <TabPane tab="月" key="5">
              <RadioGroup name="radiogroup"  onChange={this.onMonthRadioChange}>
                <Radio style={radioStyle} value={1}>月 允许的通配符[, - * /] </Radio>
                <Radio style={radioStyle} value={2}>不指定 </Radio>
                <Radio style={radioStyle} value={3}>按周期
                  周期从 <Input type='number' size='small' onChange={this.monthCycleStart} style={{ width: 100 }}/>
                  - <Input size='small' type='number' onChange={this.monthCycleEnd} style={{ width: 100 }}/> 月
                </Radio> 
                <Radio style={radioStyle} value={4}>
                  从 <Input type='number' size='small' onChange={this.monthStart} style={{ width: 100 }}/> 月开始，
                  每 <Input type='number' size='small' onChange={this.monthEvery} style={{ width: 100 }}/> 月执行一次
                </Radio> 
                <Radio style={radioStyle} value={5}>指定<br/>
                  <CheckboxGroup style={{ width: '100%' }} onChange={this.onMonthCheckChange} >
                    <Row> {this.createChecks(monthOptions)} </Row>
                  </CheckboxGroup>
                </Radio>
              </RadioGroup>
            </TabPane>
            <TabPane tab="周" key="6">
              <RadioGroup name="radiogroup"  onChange={this.onWeekRadioChange}>
                <Radio style={radioStyle} value={1}>周 允许的通配符[, - * L #] </Radio>
                <Radio style={radioStyle} value={2}>不指定 </Radio>
                <Radio style={radioStyle} value={3}>按周期
                  周期从 星期<Input type='number' size='small' onChange={this.weekCycleStart} style={{ width: 100 }}/>
                  - <Input size='small' type='number' onChange={this.weekCycleEnd} style={{ width: 100 }}/> 
                </Radio> 
                <Radio style={radioStyle} value={4}>
                  第 <Input type='number' size='small' onChange={this.weekStart} style={{ width: 100 }}/> 周
                  的星期 <Input type='number' size='small' onChange={this.weekEvery} style={{ width: 100 }}/>
                </Radio> 
                <Radio style={radioStyle} value={5}>每月的最后一周 </Radio>
                <Radio style={radioStyle} value={6}>指定<br/>
                  <CheckboxGroup style={{ width: '100%' }} onChange={this.onWeekCheckChange} >
                    <Row> {this.createChecks(weekOptions)} </Row>
                  </CheckboxGroup>
                </Radio>
              </RadioGroup>
            </TabPane>
            <TabPane tab="年" key="7">
              <RadioGroup name="radiogroup"  onChange={this.onYearRadioChange}>
                <Radio style={radioStyle} value={1}>不指定 允许的通配符[, - * /] 非必填 </Radio>
                <Radio style={radioStyle} value={2}>每年 </Radio>
                <Radio style={radioStyle} value={3}>按周期
                  周期从 <Input type='number' size='small' onChange={this.yearCycleStart} style={{ width: 100 }}/>
                  - <Input size='small' type='number' onChange={this.yearCycleEnd} style={{ width: 100 }}/>
                </Radio> 
              </RadioGroup>
            </TabPane>
          </Tabs>
          CRON表达式：
          <Input 
            type='text' 
            size='small'  
            style={{ width: 200 }}  
            value={this.props.UI.CRONExpression}
            />
            <p style={{color:'red'}}>注意：若点击确定生成，原属任务的CRON表达式将覆盖。</p>
        </div>
    )
  }
}

CRONExpression.propTypes = {
  intl: intlShape.isRequired
}
export default injectIntl(CRONExpression)

以下是运行截图：

JIA_CHENG
关注
专栏目录
react-cron:react的cron表达式生成器，定时
05-31
react-crons Usage demo:https://chensongtao.github.io/react-cron/src-index 组件依赖 "react": "16.x", "antd": "^3.20.1", "classnames": "^2.2.6", style依赖 less 引入 @import '~antd/dist/antd.less' 或者 js 引入 import 'antd/dist/antd.less' yarn add react-crons npm install react-crons --save import {Cron, InputCron} from 'react-crons' Cron onChange value style // 内容的style clas
【实战】React 必会第三方插件 —— Cron 表达式生成器（qnn-react-cron）
程序边界
03-22 9627
qnn-react-cron 可以看做 react-cron-antd 的升级版（具体“渊源”可见文档），现有功能如下： - 🎉 全面支持 cron：秒、分、时、日、月、周、年 - 🎉 日及周条件互斥，自动改变响应值 - 🎉 支持反解析 cron 表达式到 UI - 🎉 可结合此组件与 Antd 的下拉及输入组件封装成下拉输入框 - 🎉 国际化支持 - 🎉 TypeScript 支持
推荐使用ReactJS Cron：一款强大且灵活的定时任务编辑器
最新发布
gitblog_00038的博客
06-25 423
推荐使用ReactJS Cron：一款强大且灵活的定时任务编辑器 项目地址:https://gitcode.com/xrutayisire/react-js-cron 项目简介 ReactJS Cron 是一个基于React和Ant Design构建的高效能定时任务编辑组件。它提供了友好的用户界面，帮助开发者轻松创建和管理cron表达式，支持所有标准的cron表达式，并兼容多种功能特性。 技术剖析...
React Antd 前端生成cron表达式
hongyanwang
11-22 3960
不知道你在玩游戏的时候是否发现过以下情况： （1）玩某些游戏的时候，发现他的排行榜并不是时时更新的，而是每半个小时，或者一个小时更新一次。 （2）又比如很火的王者荣耀手游，它的日常任务，都是每天5点进行更新。 那么，这些时间控制，到底是由谁控制得如此精准呢？原来，这些都是corn表达式的功劳。 【1】什么是cron表达式 ？ 在了解之前，我们先举几个例子，看看corn表达式长什么样子 cron="0 */5 *** ?" cron="0 30 8,10,12,14,16* * ?" cr...
react-cron-generator
05-12
React时间发生器 简单的react组件生成cron表达式 入门 软件包有助于构建Linux Scheduler cron表达式。 确保您的项目中包含引导程序 data = '* * * * * * *' npm install react-cron-generator 演示 import React, { Component } from 'react' import Cron from 'react-cron-generator' import 'react-cron-generator/dist/cron-builder.css' class App extends Component { constructor(props) { super(props); this.state = { }; } render()
React开发的Cron组件-在线生成表达式
qq_31644543的博客
03-02 1078
react中封装的cron组件，可以直接打开网页，在线生成cron表达式
react-cron-generator:简单的react组件以生成cron表达式（材料UI）
05-06
React时间发生器简单的react组件以生成cron表达式（Material-UI）入门软件包有助于构建Linux Scheduler cron表达式。 该项目使用material-ui data = '* * * * * * *'npm i --save @dealmeddevs/react-cron-generator...
react-js-cron:使用antd构建的React cron编辑器
05-18
ReactJS Cron 使用构建的React cron编辑器 在实时演示和用法特征零依赖，除了React和antd 支持所有标准cron表达式支持几个月和一周的cron名称支持cron快捷方式周日支持“ 7” 支持带输入的双向同步绑定支持语言环境...
react+ts+antd cron表达式组件
11-16
在这个"react+ts+antd cron表达式组件"项目中，开发者整合了这些技术来实现一个特定功能——Cron表达式编辑器。 Cron表达式是一种用于配置定时任务的格式，常见于Unix和Linux系统。它由七个字段组成，从左到右分别...
React 第三方插件 —— Cron 表达式生成器（qnn-react-cron）
GL666的专栏
05-06 1585
此时效果： 实时同步 到，中变化在点击生成按钮时同步到，默认值是：* * * * *?*，因此在隐藏某个面板时，要做好对该部分隐藏值的处理。按钮即可赋值到 input 框中，在 input 框中修改也能同步到组件中。🎉 可结合此组件与 Antd 的下拉及输入组件封装成下拉输入框。🎉 全面支持 cron：秒、分、时、日、月、周、年。🎉 支持反解析 cron 表达式到 UI。🎉 日及周条件互斥，自动改变响应值。（2）赋值到表单（Form）（3）自定义功能按钮。
react+ts手写cron表达式转换组件
Azbtt的博客
10-17 782
最近在写的一个分布式调度系统，后端同学需要让我传入cron表达式，给调度接口传参。react+typescript+moment+semi-ui实现cron表达式，0 11 20 * * ?，时间转换函数，日期转换函数，组件完整代码，使用方法，实现效果，环境配置
react-cron:基于react和antd完成的一个生成cron表达式的插件
03-26
React时间 概述 基于react和antd完成的一个创建cron的插件。核心代码在src/cron/index.js。 本地安装引用 import ReactCron from '@/cron/index.js' require ( "@/cron/index.css) class App extends React.Component { return <div> <ReactCron presetCRONExp={" * * * * * ? * "} // 初始cron 默认 " * * * * * ? * " onCRONExpChanged={onCRONExpChanged} // 修改时的回调 i18
Cron表达式生成器html源码
08-11
在线Cron表达式生成器html源码 quartz任务调度 Cron表达式 在线生成
react cron表达式生成器
柠檬草的博客
05-18 239
cron表达式
前端cron相关功能插件组件使用总结
weixin_42466536的博客
03-11 1425
cron又名七子表达式，用于选择周期性的时间。
react-intl API
github_37519401的博客
01-02 3789
react-intl是一个Yahoo公司出品的用于react app国际化的组件，提供了用于格式化日期、数字和字符串的API、复数和处理翻译。使用示例 首先新建语言包，en-US.json文件用于书写英文名词、zh-CN用于书写中文简体名词。 en-US.json文件示例： { "HELLO_WORLD": "Hello World!" }zh-CN.json文件示例:{ "HEL
React-intl
weixin_34198881的博客
01-25 390
React-intl Internationaliztion API API应用环境 React-intl的应用依赖于Internationaliztion API，这些APIs现代浏览器和NodeJS（>0.12）内涵； 对于老版浏览器需要搭建一些环境； React-intl简要介绍 React-intl是FormatJS...
spring定时任务小结
程序猿劝退师的博客
09-17 466
目录 一、结构 二、各字段的含义 三、常用表达式例子 四、代码应用 一、结构 　Cron表达式是一个字符串，字符串以5或6个空格隔开，分为6或7个域，每一个域代表一个含义，Cron有如下两种语法格式： （1）Seconds Minutes Hours DayofMonth Month DayofWeek Year （2）Seconds Minutes Hours DayofMon...
react + antd cron表达式组件封装（qnn-react-cron）
柠檬草的博客
07-26 957
我们的项目中要求不展示秒，实际组件里面是有的，接下来就讲解一下如何实现Cron表达式哦！全面支持cron表达式：秒、分、时、日、月、周、年日及周条件互斥，自动改变响应值支持反解析cron表达式到UI可结合此组件与Antd的下拉及输入组件封装成下拉输入框。
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值