添加Quartz定时任务的Cron表达式前端Vue+ElementUI的表单输入方式

背景：Cron表达式难懂，前端可能一不小心就写错，基于这个背景

先看效果

 点ok

可以看到把下拉框选择的时间转化为了Cron表达式

怎么做的呢？注意：需要有一点Vue的基础

第一步、创建Vue组件名字为：timeCron.vue

<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 label="每周" value="每周"/>
              <el-option label="每月" value="每月"/>
            </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 in weekOption"
                :key="item.cron"
                :label="item.title"
                :value="item"
              />
            </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 in monthOption"
                :key="item.cron"
                :label="item.title"
                :value="item"
              />
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-time-picker
              v-model="time"
              placeholder="选择时间"
              value-format="H:m:s"
              style="width: 100%;"
            />
          </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 slot="reference" v-model="value"/>
    </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() {
      const 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
        const valueArr = this.timeCronStr.split(',')
        const 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
      }
      const dataArr = []
      let timeCron
      const 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>

第二步、在需要用到的组件中导入并注册

import timeCron from '@/components/Tool/timeCron'

注意：这里导入自己timeCron组件的位置

// 注册组件
components: {
  timeCron
},

 第三步：使用timeCron组件

<el-form-item label="Cron表达式">
            <div style="text-align:left; padding-bottom:40px;">
              <time-cron @change="handelCronChange" style="margin-right:40px;"></time-cron>
              <el-input
                :label="Form.cronExpression"
                :value="Form.cronExpression"
                style="inline-size: auto"
                disabled
              ></el-input>
            </div>
          </el-form-item>

handelCronChange函数

handelCronChange(StrCron, TimeCron) {
      this.Form.cronExpression = TimeCron
    }

this.Form.cronExpression为自己定义的data数据

handelCronChange函数有两个参数：分别为

每月,1号,14:52:36 和 36 52 14 1 * ?