cron 解析与反解析 + element

参考了 easy-cron-input 插件
官网
出来的效果图：

封装成一个组件,代码如下：

<template>
  <div>
    <el-form-item label="cron频率：" required>
      <div class="flexStart cron-style">
        <el-select v-model="period" @change="periodChange" class="cron-period-select">
          <el-option :value="item" v-for="(item, index) of periodOpts" :key="index">
            {{ item }}
          </el-option>
        </el-select>
        <div v-show="period == '秒'" class="cron-input cron-seconds">
          <p>
            每
            <el-select v-model="nsec" @change="onChange" class="cron-seconds-select">
              <el-option v-for="(item, index) of 60" :key="index" :value="item">
                {{ item }}
              </el-option>
            </el-select>
            秒
          </p>
        </div>
        <div v-show="period == '分'" class="cron-input cron-minutes">
          <p>
            每
            <el-select v-model="nmin" @change="onChange" class="cron-minutes-select">
              <el-option v-for="(item, index) of 60" :key="index" :value="item">
                {{ item }}
              </el-option>
            </el-select>
            分钟
          </p>
        </div>
        <div v-show="period == '时'" class="cron-input cron-hourly">
          <p>
            每
            <el-select v-model="nhour" @change="onChange" class="cron-hourly-select">
              <el-option v-for="(item, index) of 24" :key="index" :value="item">
                {{ item }}
              </el-option>
            </el-select>
            小时
          </p>
        </div>
        <div v-show="period == '天'" class="cron-input cron-daily">
          <p>
            每
            <el-select v-model="nday" @change="onChange" class="cron-daily-select">
              <el-option v-for="(item, index) of 100" :key="index" :value="item">
                {{ item }}
              </el-option>
            </el-select>
            天
          </p>
        </div>
        <div v-show="period == '月'" class="cron-input cron-monthly">
          <p>
            每
            <el-select v-model="nmonth" @change="onChange" class="cron-monthly-month">
              <el-option v-for="(item, index) of 12" :key="index" :value="item">
                {{ item }}
              </el-option>
            </el-select>
            月
            <el-select v-model="dom" @change="onChange" class="cron-monthly-day">
              <el-option v-for="(item, index) of 31" :key="index" :value="item">
                {{ item }}
              </el-option>
            </el-select>
            日
          </p>
        </div>
        <div v-show="period == '年'" class="cron-input cron-yearly">
          <p>
            每年
            <el-select v-model="moy" @change="onChange" class="cron-yearly-month">
              <el-option v-for="(item, index) of 12" :key="index" :value="item">
                {{ item }}
              </el-option>
            </el-select>
            月
            <el-select v-model="dom" @change="onChange" class="cron-yearly-day">
              <el-option v-for="(item, index) of 31" :key="index" :value="item">
                {{ item }}
              </el-option>
            </el-select>
            日
          </p>
        </div>
        <div v-show="period == '天' || period == '月' || period == '年'" class="cron-input cron-start-time">
          <el-select v-model="hour" @change="onChange" class="cron-clock-hour">
            <el-option v-for="(item, index) of 24" :key="index" :value="item - 1">
              {{ ('00' + (item - 1)).slice(-2) }}
            </el-option>
          </el-select>
          时
          <el-select v-model="min" @change="onChange" class="cron-clock-minute">
            <el-option v-for="(item, index) of 60" :key="index" :value="item - 1">
              {{ ('00' + (item - 1)).slice(-2) }}
            </el-option>
          </el-select>
          分
        </div>
      </div>
      <p class="cron-style">
        解析的cron：{{ frequencyData }}
      </p>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: 'EasyCronInput',
  props: {
    value: { // 传入的值
      type: String,
      default: '* * * * * *'
    }
  },
  data () {
    return {
      periodOpts: ['秒', '分', '时', '天', '月', '年'],
      nthWeekOpts: ['第一个', '第二个', '第三个', '第四个'],
      dayOfWeekOpts: ['一', '二', '三', '四', '五', '六', '日'],
      period: '秒',
      // dow: [],
      dom: 1,
      moy: 1,
      min: 0,
      hour: 0,
      nsec: 1,
      nmin: 1,
      nhour: 1,
      nday: 1,
      nmonth: 1,
      frequencyData: ''
    }
  },
  mounted () {
    this.setExpress(this.value)
    this.onChange()
  },
  methods: {
    periodChange () {
      // this.dow = []
      this.dom = 1
      this.moy = 1
      this.min = 0
      this.hour = 0
      this.nsec = 1
      this.nmin = 1
      this.nhour = 1
      this.nday = 1
      this.nmonth = 1
      this.onChange()
    },
    onChange () {
      this.$emit('update:input', this.getExpress(), this.getText()) 
    },
    getExpress () { // 
      let sec = 0 // ignoring seconds by default
      // const year = '*' // every year by default
      let dow = '*'
      let dom = '*'
      let moy = '*'
      let hour = this.hour
      let min = this.min
      switch (this.period) {
        case '秒':
          if (this.nsec > 1) {
            sec = '*/' + this.nsec
          } else {
            sec = '*'
          }
          hour = '*'
          min = '*'
          break
        case '分':
          if (this.nmin > 1) {
            min = '*/' + this.nmin
          } else {
            min = '*'
          }
          hour = '*'
          break
        case '时':
          if (this.nhour > 1) {
            hour = '*/' + this.nhour
          } else {
            hour = '*'
          }
          min = 0
          break
        case '天':
          if (this.nday > 1) {
            dom = '*/' + this.nday
          }
          break
        case '周':
          if (this.dow.length > 0 && this.dow.length < 7) {
            dow = this.dow.sort().join(',')
          }
          break
        case '月':
          if (this.nmonth > 1) {
            moy = '*/' + this.nmonth
          }
          dom = this.dom
          break
        case '年':
          moy = this.moy
          dom = this.dom
          break
        default:
          break
      }
      this.frequencyData = [sec, min, hour, dom, moy, dow].join(' ')
      return [sec, min, hour, dom, moy, dow].join(' ')
    },
    setExpress (express) {
      express = express || '* * * * * *'
      const crons = express.split(/\s+/)
      if (crons.length === 6) {
        if (crons[0] === '*') {
          this.period = '秒'
          this.nsec = 1
          return
        }
        if (crons[0].split('/').length === 2) {
          this.period = '秒'
          this.nsec = crons[0].split('/')[1]
          return
        }
        if (crons[1] === '*') {
          this.period = '分'
          this.nmin = 1
          return
        }
        if (crons[1].split('/').length === 2) {
          this.period = '分'
          this.nmin = crons[1].split('/')[1]
          return
        }
        if (crons[2] === '*') {
          this.period = '时'
          this.nhour = 1
          return
        }
        if (crons[2].split('/').length === 2) {
          this.period = '时'
          this.nhour = crons[2].split('/')[1]
          return
        }
        if (crons[3] === '*' && crons[5] === '*') {
          this.period = '天'
          this.nday = 1
          this.hour = crons[2]
          this.min = crons[1]
          return
        }
        if (crons[3].split('/').length === 2) {
          this.period = '天'
          this.nday = crons[3].split('/')[1]
          this.hour = crons[2]
          this.min = crons[1]
          return
        }
        if (crons[4] === '*') {
          this.period = '月'
          this.nmonth = 1
          this.dom = crons[3]
          this.hour = crons[2]
          this.min = crons[1]
          return
        }
        if (crons[4].split('/').length === 2) {
          this.period = '月'
          this.moy = crons[4].split('/')[1]
          this.dom = crons[3]
          this.hour = crons[2]
          this.min = crons[1]
          return
        }
        if (/\d+/.test(crons[4])) {
          this.period = '年'
          this.moy = crons[4]
          this.dom = crons[3]
          this.hour = crons[2]
          this.min = crons[1]
        }
      }
    },
    getText () {
      let text = ''
      switch (this.period) {
        case '秒':
          text += '每'
          text += this.nsec
          text += '秒'
          break
        case '分':
          text += '每'
          text += this.nmin
          text += '分钟'
          break
        case '时':
          text += '每'
          text += this.nhour
          text += '分钟'
          break
        case '天':
          text += '每'
          text += this.nday
          text += '天'
          text += ('00' + this.hour).slice(-2)
          text += '时'
          text += ('00' + this.min).slice(-2)
          text += '分'
          break
        case '月':
          text += '每'
          text += this.nmonth
          text += '月'
          text += this.dom
          text += '日'
          text += ('00' + this.hour).slice(-2)
          text += '时'
          text += ('00' + this.min).slice(-2)
          text += '分'
          break
        case '年':
          text += '每年'
          text += this.moy
          text += '月'
          text += this.dom
          text += '日'
          text += ('00' + this.hour).slice(-2)
          text += '时'
          text += ('00' + this.min).slice(-2)
          text += '分'
          break
        default:
          break
      }
      return text
    }
  }
}
</style>