一、插入组件
安装：
npm install vue-cron --save
引入：
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
// 在 main.js 文件里全局引入
import VueCron from 'vue-cron'
Vue.use(VueCron);//使用方式：<vueCron></vueCron>
// 在相关页面文件里局部引入
import {cron} from 'vue-cron' // 使用方式：<cron></cron>
export default {
template: '<cron/>',
components: { cron }
}
实例：
<template>
<div class="infoLabel">
<label class="configTit requiredInfo" ref="labelcron">cron表达式</label>
<el-popover v-model="cronPopover">
<cron @change="onChangeCron" @close="cronPopover = false ></cron>
<el-input slot="reference" @click="cronPopover = true" v-model="cron"
placeholder="请输入定时策略" class="inputWidth"></el-input>
</el-popover>
</div>
</template>
<script>
import {cron} from 'vue-cron';
export default {
components: { cron },
data(){
return {
cronPopover:false,
cron:''
}
},
methods: {
onChangeCron(val){
this.cron=val
},
},
}
</script>
效果图
第二种效果
<td colspan="1">
<FormItem >
<el-col :span="18">
<el-input @click="cronPopover = true" v-model="baseInfo.scheduleConf" placeholder="请输入定时策略"
size="small">
</el-input>
</el-col>
<el-col :span="6">
<Poptip placement="bottom" width="400">
<Button>点击</Button>
<div class="api" slot="content">
<vueCron @change="onChangeCron" @close="cronPopover = false" />
</div>
</Poptip>
</el-col>
</FormItem>
</td>
cron表达式转化插件-cronstrue
安装：
npm install cronstrue --save
引入：
import cronstrue from "cronstrue/i18n";
使用：
cronstrue.toString(this.cron,{ locale: "zh_CN"})
注释：vue-cron 一周是从周日开始，所以周日是1，但是cronstrue一周是从周一开始，周一是1
cronstrue提供属性dayOfWeekStartIndexZero，默认为ture，修改为false就是从周日开始。
computed:{
cronLabel(){
if(this.formData.cron){
return cronstrue.toString(this.cron,{ locale: "zh_CN",dayOfWeekStartIndexZero:false })
}
}
},
二, 自己写入
common.css
html {
/* 标准字体大小可以，在移动端使用的rem适配的话会动态改变。 */
font-size: 14px;
/* 使用IE盒模型（个人取舍，我一般设置width是这是盒子的真实大小，包括padding和border） */
box-sizing: border-box;
}
html,
body {
/* 在有些手机浏览器中点击一个链接或着可点击元素的时候，会出现一个半透明的灰色背景； */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
/* 提升移动端滚动的体验效果 */
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
/* 与浏览器窗口高度一致 */
height: 100%;
}
body {
/* 有些背景默认为浅灰色，所以统一设置为纯白 */
background: #fff;
/* 照着antd上面来的，在公司就别用微软雅黑了，不建议字体使用rem。 */
font: 14px, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial,
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
/* 使字体更加顺滑 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 去除浏览器默认的margin和padding, 自行删减一些不必要的标签 */
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dd,
ul,
ol,
th,
td,
button,
figure,
input,
textarea,
form,
pre,
blockquote,
figure {
margin: 0;
padding: 0;
}
a {
/* 小手 */
cursor: pointer;
/* 取消超链接的默认下划线 */
text-decoration: none;
/* antd里面还做了 ， 看你团队需不需要这样的风格 */
transition: color 0.3s ease;
}
ol,
ul {
/* 去除自带的ugly样式。 */
list-style: none;
}
/* 这些节点部分属性没有继承父节点样式，所有继承一下，并取消outline，外轮廓的效果 */
a,
h1,
h2,
h3,
h4,
h5,
h6,
input,
select,
button,
textarea {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
font-style: inherit;
line-height: inherit;
color: inherit;
outline: none;
}
button,
input[type='submit'],
input[type='button'] {
/* 可点击小手 */
cursor: pointer;
}
/* 取消部分浏览器数字输入控件的操作按钮 apperance可以改变控件的外观。 */
input[type='number'] {
-moz-appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
margin: 0;
-webkit-appearance: none;
}
/**
* 删除Firefox中的内边框和填充。
*/
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* 让html5中的hidden在IE10中正确显示
*/
[hidden] {
display: none;
}
template {
/* 有些浏览器会显示template 不过template标签用的也少，自行取舍。 */
display: none;
}
/*滚动条*/
::-webkit-scrollbar {
width: 3px;
height: 5px;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
/*背景内阴影*/
/*-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
border-radius: 10px;
/*滚动条背景颜色*/
/*background-color: rgba(0, 163, 245, 0.4);*/
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #eff1f7;
}
/*滑块hover效果*/
::-webkit-scrollbar-thumb:hover {
border-radius: 5px;
/*内阴影*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #eef2ff;
}
/*组件公共部分样式*/
.condition {
height: 40px;
}
.align {
text-align: center;
}
.padding15{
padding: 15px;
}
.padding5{
padding: 5px;
}
day.vue
<template>
<Row class="cron-day-box">
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="every" value="every" name="day">
</i-col>
<i-col span="22">
<div class="condition">每天 允许的通配符[, - * / L W]</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="noSpecify" value="noSpecify" name="day">
</i-col>
<i-col span="22">
<div class="condition">不指定</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="cycle" value="cycle" name="day">
</i-col>
<i-col span="22">
<div class="condition">
周期 从
<InputNumber v-model="cron.cycle.start" :min="1" :max="31" style="width:100px" :disabled="type !== 'cycle'" /> -
<InputNumber v-model="cron.cycle.end" :min="1" :max="31" style="width:100px" :disabled="type !== 'cycle'" /> 日
</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="frequency" value="frequency" name="day">
</i-col>
<i-col span="22">
<div class="condition">
从
<InputNumber v-model="cron.frequency.start" :min="1" :max="31" style="width:100px" :disabled="type !== 'frequency'" /> 天开始,每
<InputNumber v-model="cron.frequency.end" :min="1" :max="31" style="width:100px" :disabled="type !== 'frequency'" /> 天执行一次
</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="monthSpecifyWorkDay" value="monthSpecifyWorkDay" name="day">
</i-col>
<i-col span="22">
<div class="condition">
每月
<InputNumber v-model="cron.monthSpecifyWorkDay.value" :min="1" :max="31" style="width:100px" :disabled="type !== 'monthSpecifyWorkDay'" />
号最近的那个工作日
</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="monthLastDay" value="monthLastDay" name="day">
</i-col>
<i-col span="22">
<div class="condition">本月最后一天</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="specify" value="specify" name="day">
</i-col>
<i-col span="22">
<div style="height:30px">指定</div>
<div>
<CheckboxGroup v-model="cron.specify">
<Checkbox v-for="i in 31" :key="i" :label="i | getTwoLen" :disabled="type !== 'specify'" />
</CheckboxGroup>
</div>
</i-col>
</Row>
</template>
<script>
import Mixins from './../mixins/cron'
export default {
name: 'Day',
mixins: [ Mixins ],
data () {
return {
base: 'day',
type: '',
cron: {
every: '*',
noSpecify: '?',
cycle: {
start: 1,
end: 2
},
frequency: {
start: 1,
end: 1
},
monthSpecifyWorkDay: {
value: 1
},
monthLastDay: 'L',
specify: []
}
}
},
methods: {
backDay () {
this.$emit('getDay', { day: this.format('every') })
}
}
}
</script>
<style scoped>
@import './../assets/common.css';
</style>
hou.vue
<template>
<Row class="cron-hou-box">
<Row>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="every" value="every" name="hour">
</i-col>
<i-col span="22">
<div class="condition">每小时 允许的通配符[, - * /]</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="cycle" value="cycle" name="hour">
</i-col>
<i-col span="22">
<div class="condition">
周期 从
<InputNumber v-model="cron.cycle.start" :min="0" :max="23" style="width:100px" :disabled="type !== 'cycle'" /> -
<InputNumber v-model="cron.cycle.end" :min="0" :max="23" style="width:100px" :disabled="type !== 'cycle'" /> 小时
</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="frequency" value="frequency" name="hour">
</i-col>
<i-col span="22">
<div class="condition">
从
<InputNumber v-model="cron.frequency.start" :min="0" :max="23" style="width:100px" :disabled="type !== 'frequency'" /> 小时开始,每
<InputNumber v-model="cron.frequency.end" :min="0" :max="23" style="width:100px" :disabled="type !== 'frequency'" /> 小时执行一次
</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="specify" value="specify" name="hour">
</i-col>
<i-col span="22">
<div style="height:30px">指定</div>
<div>
<CheckboxGroup v-model="cron.specify">
<Checkbox v-for="i in 24" :key="i" :label="i - 1 | getTwoLen" :disabled="type !== 'specify'" />
</CheckboxGroup>
</div>
</i-col>
</Row>
</Row>
</template>
<script>
import Mixins from './../mixins/cron'
export default {
name: 'Hou',
mixins: [ Mixins ],
data () {
return {
base: 'hou',
type: '',
cron: {
every: '*',
cycle: {
start: 1,
end: 2
},
frequency: {
start: 0,
end: 1
},
specify: []
}
}
},
methods: {
backHou() {
this.$emit('getHou', { hou: this.format('every') })
}
}
}
</script>
<style scoped>
@import './../assets/common.css';
</style>
min.vue
<template>
<Row class="cron-hou-box">
<Row>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="every" value="every" name="hour">
</i-col>
<i-col span="22">
<div class="condition">每小时 允许的通配符[, - * /]</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="cycle" value="cycle" name="hour">
</i-col>
<i-col span="22">
<div class="condition">
周期 从
<InputNumber v-model="cron.cycle.start" :min="0" :max="23" style="width:100px" :disabled="type !== 'cycle'" /> -
<InputNumber v-model="cron.cycle.end" :min="0" :max="23" style="width:100px" :disabled="type !== 'cycle'" /> 小时
</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="frequency" value="frequency" name="hour">
</i-col>
<i-col span="22">
<div class="condition">
从
<InputNumber v-model="cron.frequency.start" :min="0" :max="23" style="width:100px" :disabled="type !== 'frequency'" /> 小时开始,每
<InputNumber v-model="cron.frequency.end" :min="0" :max="23" style="width:100px" :disabled="type !== 'frequency'" /> 小时执行一次
</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="specify" value="specify" name="hour">
</i-col>
<i-col span="22">
<div style="height:30px">指定</div>
<div>
<CheckboxGroup v-model="cron.specify">
<Checkbox v-for="i in 24" :key="i" :label="i - 1 | getTwoLen" :disabled="type !== 'specify'" />
</CheckboxGroup>
</div>
</i-col>
</Row>
</Row>
</template>
<script>
import Mixins from './../mixins/cron'
export default {
name: 'Hou',
mixins: [ Mixins ],
data () {
return {
base: 'hou',
type: '',
cron: {
every: '*',
cycle: {
start: 1,
end: 2
},
frequency: {
start: 0,
end: 1
},
specify: []
}
}
},
methods: {
backHou() {
this.$emit('getHou', { hou: this.format('every') })
}
}
}
</script>
<style scoped>
@import './../assets/common.css';
</style>
mon.vue
<template>
<Row class="cron-mon-box">
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="every" value="every" name="month">
</i-col>
<i-col span="22">
<div class="condition">每月 允许的通配符[, - * / L W]</div>
</i-col>
<!-- <i-col span="2" class="align">
<input v-model="type" type="radio" input-id="noSpecify" value="noSpecify" name="month">
</i-col>
<i-col span="22">
<div class="condition">不指定</div>
</i-col> -->
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="cycle" value="cycle" name="month">
</i-col>
<i-col span="22">
<div class="condition">
周期 从
<InputNumber v-model="cron.cycle.start" :min="1" :max="12" style="width:100px" :disabled="type !== 'cycle'" /> -
<InputNumber v-model="cron.cycle.end" :min="1" :max="12" style="width:100px" :disabled="type !== 'cycle'" /> 月
</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="frequency" value="frequency" name="month">
</i-col>
<i-col span="22">
<div class="condition">
从
<InputNumber v-model="cron.frequency.start" :min="1" :max="12" style="width:100px" :disabled="type !== 'frequency'" /> 日开始,每
<InputNumber v-model="cron.frequency.end" :min="1" :max="12" style="width:100px" :disabled="type !== 'frequency'" /> 月执行一次
</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="specify" value="specify" name="month">
</i-col>
<i-col span="22">
<div style="height:30px">指定</div>
<div>
<CheckboxGroup v-model="cron.specify">
<Checkbox v-for="i in 12" :key="i" :label="i | getTwoLen" :disabled="type !== 'specify'" />
</CheckboxGroup>
</div>
</i-col>
</Row>
</template>
<script>
import Mixins from './../mixins/cron'
export default {
name: 'Mon',
mixins: [ Mixins ],
data () {
return {
base: 'mon',
type: '',
cron: {
every: '*',
noSpecify: '?',
cycle: {
start: 1,
end: 2
},
frequency: {
start: 1,
end: 1
},
specify: []
}
}
},
methods: {
backMon() {
this.$emit('getMon', { mon: this.format('every') })
}
}
}
</script>
<style scoped>
@import './../assets/common.css';
</style>
sec.vue
<template>
<Row class="cron-sec-box">
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="every" value="every" name="sec">
</i-col>
<i-col span="22">
<div class="condition">每秒 允许的通配符[, - * /]</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="cycle" value="cycle" name="sec">
</i-col>
<i-col span="22">
<div class="condition">
周期 从
<InputNumber
v-model="cron.cycle.start"
:max="59"
:min="0"
style="width:100px"
:disabled="type !== 'cycle'"
/> -
<InputNumber
v-model="cron.cycle.end"
:max="59"
:min="0"
style="width:100px"
:disabled="type !== 'cycle'"
/> 秒
</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="frequency" value="frequency" name="sec">
</i-col>
<i-col span="22">
<div class="condition">
从
<InputNumber
v-model="cron.frequency.start"
:max="59"
:min="0"
style="width:100px"
:disabled="type !== 'frequency'"
/> 秒开始,每
<InputNumber
v-model="cron.frequency.end"
:max="59"
:min="0"
style="width:100px"
:disabled="type !== 'frequency'"
/> 秒执行一次
</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="specify" value="specify" name="sec">
</i-col>
<i-col span="22">
<div style="height:30px">指定</div>
<div>
<CheckboxGroup v-model="cron.specify">
<Checkbox v-for="i in 60" :key="i" :label="i - 1 | getTwoLen" :disabled="type !== 'specify'" />
</CheckboxGroup>
</div>
</i-col>
</Row>
</template>
<script>
import Mixins from './../mixins/cron'
export default {
name: 'Sec',
mixins: [ Mixins ],
data () {
return {
base: 'sec',
type: '',
cron: {
every: '*',
cycle: {
start: 1,
end: 2
},
frequency: {
start: 0,
end: 1
},
specify: []
}
}
},
methods: {
backSec() {
this.$emit('getSec', { sec: this.format('every') })
}
}
}
</script>
<style scoped>
@import './../assets/common.css';
</style>
week.vue
<template>
<Row class="cron-week-box">
<Row>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="every" value="every" name="week">
</i-col>
<i-col span="22">
<div class="condition">每周 允许的通配符[, - * /]</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="noSpecify" value="noSpecify" name="week">
</i-col>
<i-col span="22">
<div class="condition">不指定</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="cycle" value="cycle" name="week">
</i-col>
<i-col span="22">
<div class="condition">
周期 从星期
<InputNumber v-model="cron.cycle.start" :min="1" :max="7" style="width:100px" :disabled="type !== 'cycle'" /> -
<InputNumber v-model="cron.cycle.end" :min="1" :max="7" style="width:100px" :disabled="type !== 'cycle'" />
</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="frequency" value="frequency" name="week">
</i-col>
<i-col span="22">
<div class="condition">
第
<InputNumber v-model="cron.frequency.start" :min="1" :max="6" style="width:100px" :disabled="type !== 'frequency'" /> 周的星期
<InputNumber v-model="cron.frequency.end" :min="1" :max="7" style="width:100px" :disabled="type !== 'frequency'" />
</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="monthLastWeek" value="monthLastWeek" name="week">
</i-col>
<i-col span="22">
<div class="condition">
本月最后一个星期
<InputNumber v-model="cron.monthLastWeek.value" :min="1" :max="7" style="width:100px" :disabled="type !== 'monthLastWeek'" />
</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="specify" value="specify" name="week">
</i-col>
<i-col span="22">
<div style="height:30px">指定</div>
<div>
<CheckboxGroup v-model="cron.specify">
<Checkbox v-for="i in 7" :key="i" :label="i | getTwoLen" :disabled="type !== 'specify'" />
</CheckboxGroup>
</div>
</i-col>
</Row>
</Row>
</template>
<script>
import Mixins from './../mixins/cron'
export default {
name: 'Week',
mixins: [Mixins],
data () {
return {
base: 'week',
type: '',
cron: {
every: '*',
noSpecify: '?',
cycle: {
start: 1,
end: 2
},
frequency: {
start: 1,
end: 1
},
monthLastWeek: {
value: 1
},
specify: []
}
}
},
methods: {
backWeek () {
this.$emit('getWeek', { week: this.format('noSpecify') })
}
}
}
</script>
<style scoped>
@import './../assets/common.css';
</style>
year.vue
<template>
<Row class="cron-year-box">
<Row>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="noSpecify" value="noSpecify" name="year">
</i-col>
<i-col span="22">
<div class="condition">不指定 允许的通配符[, - * /] 非必填</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="every" value="every" name="year">
</i-col>
<i-col span="22">
<div class="condition">每年</div>
</i-col>
<i-col span="2" class="align">
<input v-model="type" type="radio" input-id="cycle" value="cycle" name="year">
</i-col>
<i-col span="22">
<div class="condition">
周期 从
<InputNumber v-model="cron.cycle.start" style="width:100px" :disabled="type !== 'cycle'" /> -
<InputNumber v-model="cron.cycle.end" style="width:100px" :disabled="type !== 'cycle'" /> 年
</div>
</i-col>
</Row>
</Row>
</template>
<script>
import Mixins from './../mixins/cron'
export default {
name: 'Year',
mixins: [Mixins],
data () {
return {
base: 'year',
type: '',
cron: {
noSpecify: '',
every: '*',
cycle: {
start: new Date().getFullYear(),
end: new Date().getFullYear() + 1
}
}
}
},
methods: {
backYear () {
this.$emit('getYear', { year: this.format() })
}
}
}
</script>
<style scoped>
@import './../assets/common.css';
</style>
cron.js
export default {
props: {
setData: String
},
filters: {
getTwoLen(val, len = -2) {
return ('0' + val).slice(len)
}
},
watch: {
type: {
handler(val, old) {
if (old) {
this.cron = this.$options.data().cron
}
if (val === 'specify') {
if (this.cron.specify && this.cron.specify.length === 0) {
this.cron.specify = /(sec|min|hou)/.test(this.base)
? ['00']
: ['01']
}
}
},
immediate: true,
deep: true
},
setData: {
handler(val) {
if (val) {
this.valType(val)
}
},
immediate: true,
deep: true
}
},
methods: {
typeVal(type, data) {
let val
switch (type) {
case 'cycle':
val = data.start + '-' + data.end
break
case 'frequency':
val = data.start + '/' + data.end
break
case 'specify':
val = data.map(e => Number(e)).join(',')
break
case 'monthSpecifyWorkDay':
val = data.value + 'W'
break
case 'monthLastWeek':
val = data.value + 'L'
break
default:
val = data
}
return val
},
valType(data) {
let reg = /^[1-7]L$/
if (data.match('-')) {
this.type = 'cycle'
this.cron['cycle'].start = Number(data.split('-')[0])
this.cron['cycle'].end = Number(data.split('-')[1])
} else if (data.match('/')) {
this.type = 'frequency'
this.cron['frequency'].start = Number(data.split('/')[0])
this.cron['frequency'].end = Number(data.split('/')[1])
} else if (data.match(',') || Number(data) > 0 || data === '0') {
this.type = 'specify'
this.cron['specify'] = data.split(',').map(element => {
return ('0' + element).slice(-2)
})
} else if (data.match('W')) {
this.type = 'monthSpecifyWorkDay'
this.cron['monthSpecifyWorkDay'].value = Number(data.slice(0, -1))
} else if (reg.test(data)) {
this.type = 'monthLastWeek'
this.cron['monthLastWeek'].value = Number(data.slice(0, -1))
} else if (data === 'L') {
this.type = 'monthLastDay'
} else if (data === '*') {
this.type = 'every'
} else if (data === '?') {
this.type = 'noSpecify'
}
},
format(type) {
this.type = this.type || type
let backObj = {}
backObj.type = this.type
backObj.val = backObj.type ? this.cron[`${this.type}`] : null
backObj.cronVal = backObj.type
? this.typeVal(backObj.type, backObj.val)
: null
return backObj
},
cronReset() {
Object.assign(this.$data, this.$options.data())
}
}
}
cron.vue
<template>
<div :class="['tabs-box', padding ? 'padding15' : '']">
<Tabs type="card" :class="[border ? 'tab-border' : '']">
<TabPane label="秒">
<sec ref="sec" :set-data="setChild.sec" @getSec="getsec" />
</TabPane>
<TabPane label="分">
<min ref="min" :set-data="setChild.min" @getMin="getmin" />
</TabPane>
<TabPane label="时">
<hou ref="hou" :set-data="setChild.hou" @getHou="gethou" />
</TabPane>
<TabPane label="日">
<day ref="day" :set-data="setChild.day" @getDay="getday" />
</TabPane>
<TabPane label="月">
<mon ref="mon" :set-data="setChild.mon" @getMon="getmon" />
</TabPane>
<TabPane label="周">
<week ref="week" :set-data="setChild.week" @getWeek="getweek" />
</TabPane>
<TabPane label="年">
<year ref="year" :set-data="setChild.year" @getYear="getyear" />
</TabPane>
</Tabs>
<div :class="['align padding5', border ? 'btn-border' : '']">
<Button type="primary" @click="onPrimaryCronSave">确定</Button>
<Button class="marginl36" type="error" @click="handleCronReset">重置</Button>
</div>
</div>
</template>
<script>
import Sec from './cronComponents/sec.vue'
import Min from './cronComponents/min.vue'
import Hou from './cronComponents/hou.vue'
import Day from './cronComponents/day.vue'
import Mon from './cronComponents/mon.vue'
import Week from './cronComponents/week.vue'
import Year from './cronComponents/year.vue'
let dataType = ['sec', 'min', 'hou', 'day', 'mon', 'week', 'year']
export default {
name: 'Cron',
components: { Sec, Min, Hou, Day, Mon, Week, Year },
props: {
verify: {
type: Boolean,
required: false
},
cronData: {
type: String,
required: false,
default: () => {
return ''
}
},
border: {
type: Boolean,
required: false
},
padding: {
type: Boolean,
required: false
}
},
data () {
return {
childBack: {
sec: '',
min: '',
hou: '',
day: '',
mon: '',
week: '',
year: ''
},
setChild: {
sec: '',
min: '',
hou: '',
day: '',
mon: '',
week: '',
year: ''
}
}
},
computed: {
cron () {
return this.childBack.year
? this.childBack.sec + ' ' + this.childBack.min + ' ' + this.childBack.hou + ' ' + this.childBack.day + ' ' + this.childBack.mon + ' ' + this.childBack.week + ' ' + this.childBack.year
: this.childBack.sec + ' ' + this.childBack.min + ' ' + this.childBack.hou + ' ' + this.childBack.day + ' ' + this.childBack.mon + ' ' + this.childBack.week
}
},
mounted () {
// 初始化，应该将默认数据展示
this.init()
},
methods: {
init () {
this.setData()
},
setData () {
this.verify && this.cronData && this.setCronValidator()
this.cronData.split(' ').forEach((cron, i) => {
this.setChild[dataType[i]] = cron
})
},
setCronValidator () {
let value = this.cronData.trim()
let regRes = false
let cronArr = value.split(' ')
let dateReg = /^(\?|\*|L|[0-9]{1,2}(\/|-)[0-9]{1,2}|([1-9]|[1-2][0-9]|[3][0-1])W|[0-9]{1,2}([,]{1}[0-9]{1,2})*)[\s]$/
let weekReg = /^(\?|\*|[0-9]{1,2}(\/|-)[0-9]{1,2}|[1-7]L|[0-9]{1,2}([,]{1}[0-9]{1,2})*)[\s]$/
let baseReg = /^(\?|\*|[0-9]{1,2}(\/|-)[0-9]{1,2}|[0-9]{1,2}([,]{1}[0-9]{1,2})*)[\s]$/
let yearReg = /^(\?|\*|[0-9]{4}-[0-9]{4}|)$/
if (cronArr.length >= 6 && cronArr.length <= 7) {
cronArr.forEach((c, i) => {
if (i === 3) {
regRes = dateReg.test(c + ' ')
!regRes && this.$Message.error('传入的cron策略中“天”的策略不符,请检查')
} else if (i === 5) {
regRes = weekReg.test(c + ' ')
!regRes && this.$Message.error('传入的cron策略中“周”的策略不符,请检查')
} else if (i === 6) {
regRes = yearReg.test(c)
!regRes && this.$Message.error('传入的cron策略中“年”的策略不符,请检查')
} else {
regRes = baseReg.test(c + ' ')
!regRes && this.$Message.error('传入的cron策略中"秒，分，时，月"中至少一项不符,一般只包含数字-/*,请检查')
}
})
} else {
this.$Message.error('传入的cron策略长度不符，应为6-7组策略值和空格连接的字符串，如"* * * * * *"')
}
return regRes
},
getsec (data) {
this.childBack.sec = data.sec.cronVal
},
getmin (data) {
this.childBack.min = data.min.cronVal
},
gethou (data) {
this.childBack.hou = data.hou.cronVal
},
getday (data) {
this.childBack.day = data.day.cronVal
},
getmon (data) {
this.childBack.mon = data.mon.cronVal
},
getweek (data) {
this.childBack.week = data.week.cronVal
},
getyear (data) {
this.childBack.year = data.year.cronVal
},
getData () {
this.$refs.sec.backSec()
this.$refs.min.backMin()
this.$refs.hou.backHou()
this.$refs.day.backDay()
this.$refs.mon.backMon()
this.$refs.week.backWeek()
this.$refs.year.backYear()
return this.cron
},
onPrimaryCronSave () {
let backCron = this.getData()
if (this.childBack.day === '?' && this.childBack.week === '?') {
this.$Message.error('日和星期（周）不能都为不指定，请检查！')
} else if (this.childBack.week !== '?' && this.childBack.day !== '?') {
this.$Message.error('日和星期（周）只能同时指定一个，请检查！')
} else if (this.childBack.year && this.childBack.year.split('-').length > 1 && (this.childBack.year.split('-')[0] - 0 > this.childBack.year.split('-')[1] - 0)) {
this.$Message.error('开始年份必须小于停止年份，请检查！')
} else {
this.$emit('getCron', backCron)
this.setChild = this.$options.data().setChild
}
},
handleCronReset () {
dataType.forEach(ref => {
this.$refs[ref].cronReset()
})
Object.assign(this.$data, this.$options.data())
}
}
}
</script>
<style scoped>
@import './assets/common.css';
.tabs-box {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
text-align: left;
font-size: 14px;
line-height: 1.5;
background: #ffffff;
color: #ffffff;
}
::v-deep .ivu-tabs {
flex: 1;
display: flex;
flex-direction: column;
}
::v-deep .ivu-tabs-bar {
margin-bottom: 0;
}
::v-deep .ivu-tabs-content {
margin-top: 4px;
height: calc(100% - 28px);
}
::v-deep .ivu-tabs .ivu-tabs-tabpane {
padding: 10px 0;
overflow-y: auto;
}
.marginl36 {
margin-left: 36px;
}
.tab-border {
border: 1px solid #dcdee2;
}
.btn-border {
border: 1px solid #dcdee2;
border-top: 0;
}
</style>
引入
import Cron from cron
<tr>
<td colspan="2" class="right">
<div class="tableth">cron表达式</div>
</td>
<td colspan="1">
<FormItem>
<el-popover v-model="showOne">
<Cron ref="cron" v-model="this.baseInfo.scheduleConf" :cron-data="cronData" :verify="isVerify" @getCron="getCron" />
<el-input slot="reference" @click="showOne = true" v-model="baseInfo.scheduleConf" placeholder="请输入定时策略"
size="small">
</el-input>
</el-popover>
</FormItem>
</td>
</tr>
getCron(data) {
console.log('dataqqqccron',data)
this.baseInfo.scheduleConf = data
console.log('dataqqqccron 1111', this.baseInfo.scheduleConf)
},
