使用element-ui开发cron表达式公共组件

>需求描述

后台需要前端开发一个用户习惯的，简单的选择，前端处理成后台识别的cron表达式，去执行定时任务。

关于cron表达式，可以查看https://qqe2.com/cron 这类在线网址查看。

我们最后实现的成果如下：
用户选择 天、周、月 以及 时间 前端转化出cron表达式。

> 组件代码：

<template>
  <div style="display:inline-block;">
    <el-popover v-model="visible" placement="bottom" width="400" trigger="click">
      <div class="form">
        <el-row>
          <el-col :span="8">
            <el-select v-model="type" placeholder="请选择类型" style="width:112px;" @change="typeChange">
              <el-option label="每天" value="每天"></el-option>
              <el-option label="每周" value="每周"></el-option>
              <el-option label="每月" value="每月"></el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-select
              v-show="type == '每周'"
              v-model="week"
              value-key="cron"
              placeholder="请选择星期"
              style="width:112px;"
            >
              <el-option
                v-for="(item,index) in weekOption"
                :key="item.cron"
                :label="item.title"
                :value="item"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-select
              v-show="type == '每月'"
              v-model="month"
              value-key="cron"
              placeholder="请选择日期"
              style="width:112px;"
            >
              <el-option
                v-for="(item,index) in monthOption"
                :key="item.cron"
                :label="item.title"
                :value="item"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-time-picker
              placeholder="选择时间"
              v-model="time"
              value-format="H:m:s"
              style="width: 100%;"
            ></el-time-picker>
          </el-col>
        </el-row>
        <div class="footer">
          <el-button size="mini" type="text" @click="visible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="handleSummit">确定</el-button>
        </div>
      </div>

      <el-input v-model="value" slot="reference"></el-input>
    </el-popover>
  </div>
</template>
<script>
export default {
  props: {
    timeCronStr: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      visible: false,
      value: '',
      type: '每天', // 天\周\月
      week: null, // 星期几
      month: null, // 几号
      time: '', // 时间
      weekOption: [
        {
          title: '星期一',
          value: '星期一',
          cron: 2,
        },
        {
          title: '星期二',
          value: '星期二',
          cron: 3,
        },
        {
          title: '星期三',
          value: '星期三',
          cron: 4,
        },
        {
          title: '星期四',
          value: '星期四',
          cron: 5,
        },
        {
          title: '星期五',
          value: '星期五',
          cron: 6,
        },
        {
          title: '星期六',
          value: '星期六',
          cron: 7,
        },
        {
          title: '星期日',
          value: '星期日',
          cron: 1,
        },
      ],
      monthOption: [],
    }
  },
  created() {
    this.initData()
  },
  mounted() {},
  methods: {
    initData() {
      let arr = []
      for (let i = 1; i < 32; i++) {
        arr.push({
          title: i + '号',
          value: i + '号',
          cron: i,
        })
      }
      this.monthOption = arr
      if (this.timeCronStr) {
        this.value = this.timeCronStr
        let valueArr = this.timeCronStr.split(',')
        let valueArrLen = valueArr.length
        this.type = valueArr[0]
        this.time = valueArr[valueArrLen - 1]
        if (valueArrLen > 2) {
          // 说明是每月 或 每周
          if (valueArr[1].indexOf('星期') > -1) {
            // 每周
            this.weekOption.map((v) => {
              if (v.title == valueArr[1]) {
                this.week = v
              }
            })
          } else {
            this.monthOption.map((v) => {
              if (v.title == valueArr[1]) {
                this.month = v
              }
            })
          }
        }
      }
    },
    typeChange(t) {
      if (t == '每周' && !this.week) {
        this.week = this.weekOption[0]
      }
      if (t == '每月' && !this.month) {
        this.month = this.monthOption[0]
      }
    },
    handleSummit() {
      if (!this.time) {
        this.$message({
          message: '请选择时间!',
          type: 'warning',
        })
        return
      }
      let dataArr = []
      let timeCron
      let clockCornArr = this.time.split(':').reverse()
      if (this.type == '每天') {
        dataArr.push(this.type, this.time)
        timeCron = clockCornArr.join(' ') + ' * * ?'
      } else {
        if (this.type == '每月') {
          dataArr.push(this.type, this.month.title, this.time)
          timeCron = clockCornArr.join(' ') + ' ' + this.month.cron + ' * ?'
        } else {
          // 每周
          dataArr.push(this.type, this.week.title, this.time)
          timeCron = clockCornArr.join(' ') + ' ? * ' + this.week.cron
        }
      }
      this.value = dataArr.join(',')
      // console.log('timeCron', timeCron)
      this.visible = false
      this.$emit('change', this.value, timeCron) // 每月,1号,14:52:36 和 36 52 14 1 * ?
    },
  },
}
</script>
<style lang="scss" scoped>
.form {
  padding: 12px;
}
.footer {
  text-align: right;
  margin-top: 10px;
}
</style>

> 使用示例

<div style="text-align:left; padding-bottom:40px;">
        <time-cron @change="handelCronChange" style="margin-right:40px;"></time-cron>
        <time-cron :timeCronStr="timeCronStr"></time-cron>
      </div>
。。。。

timeCronStr: '每周,星期二,14:51:50',

解释： 当我们选择每月,1号,14:52:36 这个结果时，我们前端转换corn表达式为36 52 14 1 * ?

我们把后面那段代码传递给后台，后台就可以直接执行。

他们的定时器就会在每个月的1号的15:52:36 这个时间点执行定时任务。