手写一个简易cron表达式功能

懒豆
1,224 阅读3分钟

cron表达式

结构

cron表达式，从左到右分别代表：{秒} {分} {小时} {日期} {月份} {星期} {年份(可为空)}

image.png

示例

  • 6点到18点59分每隔15分钟执行一次：0 */15 6-18 * * ?

  • 6点到18点59分每隔6小时执行一次：00 00 6-18/6 * * ?

  • 6点和18点执行一次：00 00 6,18 * * ?

  • 每天12点执行一次：00 00 12 * * ?

  • 每周的周五，周天的12点执行一次： 00 00 12 ? * 1,6

  • 每月6号，18号的12点执行一次：00 00 12 6,18 * ?

  • 每年3月，6月分别在6号,18号的12点执行一次：00 00 12 6,18 3,6 ?

实现结果

2.gif

关键代码

HTML

el-row
        el-col.rowLine(:span="24")
          el-col(:span="5")
            .label
              i *
              span 调度周期：
          el-col(:span="19")
            el-select.inner(v-model="cycle",  placeholder="请选择")
              el-option(
                v-for="item in cycleList",
                :key="item.name",
                :label="item.name",
                :value="item.value"
              )
        el-col.rowLine(
          :span="24",
          v-if="cycle === 'WEEK' || cycle === 'MONTH' || cycle === 'YEAR'"
        )
          el-col.mb10(:span="24", v-if="cycle === 'YEAR'")
            el-col(:span="5")
              .label
                i *
                span 指定月份：
            el-col(:span="19")
              el-select.inner(v-model="month",multiple, placeholder="请选择")
                el-option(
                  v-for="item in monthList",
                  :key="item.name",
                  :label="item.name",
                  :value="item.value"
                )
          el-col.mb10(:span="24", v-if="cycle === 'MONTH' || cycle === 'YEAR'")
            el-col(:span="5")
              .label
                i *
                span 指定时间：
            el-col(:span="19")
              el-select.inner(v-model="date", multiple, placeholder="请选择")
                el-option(
                  v-for="item in dateList",
                  :key="item.name",
                  :label="item.name",
                  :value="item.value"
                )
          el-col.mb10(:span="24", v-if="cycle === 'WEEK'")
            el-col(:span="5")
              .label
                i *
                span 指定日期：
            el-col(:span="19")
              el-select.inner(v-model="week", multiple, placeholder="请选择")
                el-option(
                  v-for="item in weekList",
                  :key="item.name",
                  :label="item.name",
                  :value="item.value"
                )
          el-col(:span="24")
            el-col(:span="5")
              .label
                i *
                span 定时调度时间：
            el-col(:span="19")
              el-select.inner(v-model="hour",placeholder="请选择")
                el-option(
                  v-for="item in timeList",
                  :key="item.name",
                  :label="item.name",
                  :value="item.value"
                )
        el-col.rowLine(:span="24", v-if="cycle === 'DAY'")
          el-col(:span="24")
            el-col(:span="5")
              .label
                i *
                span 定时调度时间：
            el-col(:span="19")
              el-select.inner(v-model="hour",placeholder="请选择")
                el-option(
                  v-for="item in timeList",
                  :key="item.name",
                  :label="item.name",
                  :value="item.value"
                )
        el-col.rowLine(
          :span="24",
          v-if="cycle === 'HOUR'"
        )
          el-radio-group(v-model="orType")
            el-col.mb10(:span="24")
              el-radio(label="0") 指定频率
              el-radio.ml10(label="1") 指定时间
          el-col.mb10(:span="24" v-if='orType === "0"')
            el-col.mb10(:span="24")
              el-col(:span="5")
                .label
                  i *
                  span 开始时间：
              el-col(:span="19")
                el-select.inner(v-model="starTime", placeholder="请选择")
                  el-option(
                    v-for="(item,index) in timeList",
                    :key="item.name",
                    :label="item.name",
                    :value="item.value"
                    :disabled="index > endTime"
                  )
            el-col.mb10(:span="24")
              el-col(:span="5")
                .label
                  i *
                  span 时间间隔：
              el-col(:span="19")
                el-input-number.inner(
                  v-model="timeNum",
                  :min="1" :max="12"
                  :disabled='state === 2 || type==="view"'
                  placeholder="请选择",
                )
                span  小时
            el-col.mb10(:span="24")
              el-col(:span="5")
                .label
                  i *
                  span 结束时间：
              el-col(:span="19")
                el-select.inner(v-model="endTime",placeholder="请选择")
                  el-option(
                    v-for="(item,index) in timeList",
                    :key="item.name",
                    :label="item.label",
                    :value="item.value"
                    :disabled="index < starTime"
                  )
          el-col(:span="24" v-if='orType === "1"')
            el-col(:span="5")
              .label
                i *
                span 定时调度时间：
            el-col(:span="19")
              el-select.inner(
                v-model="hourArr",
                multiple,
                placeholder="请选择",
                style="width: 99%; margin-left: 1%"
              )
                el-option(
                  v-for="item in hourList",
                  :key="item.name",
                  :label="item.name",
                  :value="item.value"
                )
        el-col.rowLine(:span="24", v-if="cycle === 'MINUTE'")
          el-col.mb10(:span="24")
            el-col(:span="5")
              .label
                i *
                span 开始时间：
            el-col(:span="19")
              el-select.inner(v-model="starTime",placeholder="请选择")
                el-option(
                  v-for="(item,index) in timeList",
                  :key="item.name",
                  :label="item.name",
                  :value="item.value"
                  :disabled="index > endTime"
                )
          el-col.mb10(:span="24")
            el-col(:span="5")
              .label
                i *
                span 时间间隔：
            el-col(:span="19")
              el-select.inner(
                v-model="timeIn",
                placeholder="请选择"
              )
                el-option(
                  v-for="item in timeInList",
                  :key="item.name",
                  :label="item.name",
                  :value="item.value"
                )
              span &nbsp;分钟
          el-col(:span="24")
            el-col(:span="5")
              .label
                i *
                span 结束时间：
            el-col(:span="19")
              el-select.inner(v-model="endTime", placeholder="请选择")
                el-option(
                  v-for="(item,index) in timeList",
                  :key="item.name",
                  :label="item.label",
                  :value="item.value"
                  :disabled="index < starTime"
                )

JS代码

methods: {
    cronFun () {
      if (this.cycle === 'MINUTE') {
        this.cron = '00 ' + '*/' + this.timeIn + ' ' + this.starTime + '-' + this.endTime + ' * * ?'
      } else if (this.cycle === 'HOUR') {
        if (this.orType === '0') {
          this.cron = '00 ' + '00 ' + this.starTime + '-' + this.endTime + '/' + this.timeNum + ' * * ?'
        } else {
          this.cron = '00 ' + '00 ' + this.hourArr + ' * * ?'
        }
      } else if (this.cycle === 'DAY') {
        this.cron = '00 00 ' + this.hour + ' * * ?'
      } else if (this.cycle === 'WEEK') {
        this.cron = '00 00 ' + this.hour + ' ? * ' + this.week
      } else if (this.cycle === 'MONTH') {
        this.cron = '00 00 ' + this.hour + ' ' + this.date + ' * ?'
      } else if (this.cycle === 'YEAR') {
        this.cron = '00 00 ' + this.hour + ' ' + this.date + ' ' + this.month + ' ?'
      }
    }
}
avatar
文章
阅读
粉丝