基于Vue的cron表达式
基于Vue的Cron表达式组件
cron可选择为分钟、小时、天、星期、月和年
代码如下，直接放在文件中便可使用
<el-form > <el-row :gutter="10">
<el-col :span="4">
<el-form-item label="每:">
<el-select v-model="myFrequency.base" style="width:90%;" @change="selectChange1">
<el-option v-for="(item,index) in frequency"
:label="item.label" :value="item.value" :key="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item v-show="myFrequency.base == 6" label="月=>">
<el-select style="width:85%;"
v-model="myFrequency.monthValues"
multiple @change="selectChange6">
<el-option v-for="(item,key) in monthValues"
:label="item" :value="key" :key="key">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item v-show="myFrequency.base == 4" label="星期=>">
<el-select v-model="myFrequency.dayValues"
multiple style="width:80%;" @change="selectChange4">
<el-option v-for="(item,key) in dayValues"
:label="item" :value="key" :key="key">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item v-show="myFrequency.base >= 5" label="几号=>">
<el-select style="width:69%" v-model="myFrequency.dayOfMonthValues"
multiple @change="selectChange5">
<el-option v-for="(item,index) in dayOfMonthValues"
:label="item.label" :value="item.value" :key="index">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item v-show="myFrequency.base >= 2" :label="myFrequency.base >=3 ?'点222=>':'分钟11=>'">
<el-select v-show="myFrequency.base >= 3"
v-model="myFrequency.hourValues"
multiple style="width:80%" @change="selectChange3">
<el-option v-for="item in hourValues"
:label="item" :value="item" :key="item">
</el-option>
</el-select>
<el-select v-model="myFrequency.minuteValues"
v-show="myFrequency.base <3"
multiple style="width:70%" @change="selectChange2">
<el-option v-for="item in minuteValues"
:label="item" :value="item" :key="item">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item v-show="myFrequency.base >= 3" label="分钟=>">
<el-select v-model="myFrequency.minuteValues"
multiple style="width:70%" @change="selectChange2">
<el-option v-for="item in minuteValues"
:label="item" :value="item" :key="item">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="23">
<el-form-item label="cron表达式：">
{{jobCron}}
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="23">
<el-form-item label="最近5次运行时间：">
<el-button type="primary" size="small" @click="runCron">点击查看</el-button>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="23">
<div v-for="item in cronList" style="padding:0 5px;">{{item}}</div>
</el-col>
</el-row>
</el-form>
<script>
export default {
data(){
return{
jobCron:'',
txtLen:500,
isCron:true,
myFrequency:{
base:1,
dayValues:'',
dayOfMonthValues:'',
monthValues:'',
hourValues:'',
minuteValues:''
},
modifyFrequency:{
dayValues:'',
dayOfMonthValues:'',
monthValues:'',
hourValues:'',
minuteValues:''
},
frequency:[
{
value: 1,
label: "分钟"
}, {
value: 2,
label: "小时"
}, {
value: 3,
label: "天"
}, {
value: 4,
label: "星期"
}, {
value: 5,
label: "月"
}, {
value: 6,
label: "年"
}
],
baseFrequency:{
minute: 1,
hour: 2,
day: 3,
week: 4,
month: 5,
year: 6
},
dayValues: {
1: "星期日",
2: "星期一",
3: "星期二",
4: "星期三",
5: "星期四",
6: "星期五",
7: "星期六"
},
dayOfMonthValues:[],
monthValues:{
1: "一月",
2: "二月",
3: "三月",
4: "四月",
5: "五月",
6: "六月",
7: "七月",
8: "八月",
9: "九月",
10: "十月",
11: "十一月",
12: "十二月"
},
hourValues: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
minuteValues:[0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55],
baseCout:0,
id:'',
cronList:[]
}
},
methods:{
runCron(){
let params={
jobCron:this.jobCron
}
ajax.getJson(getTimeUrl,params,res=>{
if(res.result==200) this.cronList=res.obj
else this.cronList=[]
},
err=>{
console.log(err)
})
},
getMothValue(){
let list = [];
for (let i = 0; i <31; i++) {
let j=i;
let currentJson={
value:++j,
label:j+'号'
}
list[i]=currentJson
}
this.dayOfMonthValues=list
},
hasClear(val){
if(val<this.baseCout){
this.myFrequency.minuteValues=[]
this.myFrequency.hourValues=[]
this.myFrequency.dayValues=[]
this.myFrequency.dayOfMonthValues=[]
this.myFrequency.monthValues=[]
}
},
selectChange1(val){
this.hasClear(val)
this.baseCout=val
if(this.modifyFrequency.minuteValues) this.myFrequency.minuteValues=this.modifyFrequency.minuteValues
if(this.modifyFrequency.hourValues) this.myFrequency.hourValues=this.modifyFrequency.hourValues
if(this.modifyFrequency.dayValues) this.myFrequency.dayValues=this.modifyFrequency.dayValues
if(this.modifyFrequency.dayOfMonthValues) this.myFrequency.dayOfMonthValues=this.modifyFrequency.dayOfMonthValues
if(this.modifyFrequency.monthValues) this.myFrequency.monthValues=this.modifyFrequency.monthValues
this.modifyFrequency={
dayValues: '',
dayOfMonthValues:'',
monthValues:'',
hourValues:'',
minuteValues:''
}
this.getCron(val)
},
getCron(val){
var cron = ["0", "*", "*", "*", "*", "?"];
if(val && val>= this.baseFrequency.hour) {
if(this.myFrequency.minuteValues.length==0) this.myFrequency.minuteValues.push(0)
cron[1] = typeof this.myFrequency.minuteValues !== "undefined" ? this.myFrequency.minuteValues : "0";
}
if(val && val >= this.baseFrequency.day) {
if(this.myFrequency.hourValues.length==0) this.myFrequency.hourValues.push(0)
cron[2] = typeof this.myFrequency.hourValues !== "undefined" ? this.myFrequency.hourValues : "*";
}
if(val && val === this.baseFrequency.week) {
if(this.myFrequency.dayValues.length==0) this.myFrequency.dayValues.push('1')
cron[3] = "?";
cron[5] = this.myFrequency.dayValues;
}
if(val && val >= this.baseFrequency.month) {
if(this.myFrequency.dayOfMonthValues.length==0) this.myFrequency.dayOfMonthValues.push(1)
cron[3] = typeof this.myFrequency.dayOfMonthValues !== "undefined" ? this.myFrequency.dayOfMonthValues : "?";
}
if(val && val === this.baseFrequency.year) {
if(this.myFrequency.monthValues.length==0) this.myFrequency.monthValues.push('1')
cron[4] = typeof this.myFrequency.monthValues !== "undefined" ? this.myFrequency.monthValues : "*";
}
this.jobCron=cron.join(" ");
},
selectChange2(val){
this.myFrequency.minuteValues=val
this.getCron(this.myFrequency.base)
},
selectChange3(val){
this.myFrequency.hourValues=val
this.getCron(this.myFrequency.base)
},
selectChange4(val){
this.myFrequency.dayValues=val
this.getCron(this.myFrequency.base)
},
selectChange5(val){
this.myFrequency.dayOfMonthValues=val
this.getCron(this.myFrequency.base)
},
selectChange6(val){
this.myFrequency.monthValues=val
this.getCron(this.myFrequency.base)
},
//获取的编辑详情接口
getModifyData(val){
this.id=val.id
let params={
id:val.id
}
ajax.getJson(getTimeTaskMessageUrl,params,res=>{
if(res.result==200){
this.fromDefaultCron(res.obj.jobCron)
}
},
err=>{
console.log(err)
})
},
fromDefaultCron(value){
let cron = value.replace(/\s+/g, " ").split(" ");
var frequency = { base: "1" }; // default: every minute
var tempArray = [];
if(cron[1] === "*" && cron[2] === "*" && cron[3] === "*" && cron[4] === "*" && cron[5] === "?") {
frequency.base = 1; // every minute
} else if(cron[2] === "*" && cron[3] === "*" && cron[4] === "*" && cron[5] === "?") {
frequency.base = 2; // every hour
} else if(cron[3] === "*" && cron[4] === "*" && cron[5] === "?") {
frequency.base = 3; // every day
} else if(cron[3] === "?") {
frequency.base = 4; // every week
} else if(cron[4] === "*" && cron[5] === "?") {
frequency.base = 5; // every month
} else if(cron[5] === "?") {
frequency.base = 6; // every year
}
if (cron[1] !== "*") {
//preparing to handle multiple minutes
tempArray = cron[1].split(",");
for (var i = 0; i < tempArray.length; i++) { tempArray[i] = +tempArray[i]; }
frequency.minuteValues = tempArray;
}
if (cron[2] !== "*") {
//preparing to handle multiple hours
tempArray = cron[2].split(",");
for (var i = 0; i < tempArray.length; i++) { tempArray[i] = +tempArray[i]; }
frequency.hourValues = tempArray;
}
if (cron[3] !== "*" && cron[3] !== "?") {
//preparing to handle multiple days of the month
tempArray = cron[3].split(",");
for (var i = 0; i < tempArray.length; i++) { tempArray[i] = +tempArray[i]; }
frequency.dayOfMonthValues = tempArray;
}
if (cron[4] !== "*") {
//preparing to handle multiple months
tempArray = cron[4].split(",");
for (var i = 0; i < tempArray.length; i++) { tempArray[i] = (+tempArray[i])+''; }
frequency.monthValues = tempArray;
}
if (cron[5] !== "*" && cron[5] !== "?") {
//preparing to handle multiple days of the week
tempArray = cron[5].split(",");
for (var i = 0; i < tempArray.length; i++) { tempArray[i] = (+tempArray[i])+''; }
frequency.dayValues = tempArray;
}
this.myFrequency.base=frequency.base
if(frequency.dayOfMonthValues) this.modifyFrequency.dayOfMonthValues=frequency.dayOfMonthValues
if(frequency.hourValues) this.modifyFrequency.hourValues=frequency.hourValues
if(frequency.minuteValues) this.modifyFrequency.minuteValues=frequency.minuteValues
if(frequency.dayValues) this.modifyFrequency.dayValues=frequency.dayValues
if(frequency.monthValues) this.modifyFrequency.monthValues=frequency.monthValues
}
},
created(){
}
}
</script>
以上是 基于Vue的cron表达式 的全部内容， 来源链接： utcz.com/z/377241.html
