参考了 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>