<template>
|
<div>
|
<b style="padding-right:30px;">定时重启:</b>
|
<el-select v-model="every" placeholder="请选择" size="small" @change="changeEvery">
|
<el-option label="关闭" value="never"></el-option>
|
<el-option label="每天" value="day"></el-option>
|
<el-option label="每周" value="week"></el-option>
|
<el-option label="每月" value="month"></el-option>
|
</el-select>
|
|
<el-select
|
v-show="every == 'month'"
|
v-model="cronValueObj.day"
|
placeholder="请选择"
|
size="small"
|
style="margin-left: 20px"
|
@change="updateExpression"
|
>
|
<el-option v-for="item in days" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
</el-select>
|
|
<el-select
|
v-show="every == 'week'"
|
v-model="cronValueObj.week"
|
placeholder="请选择"
|
size="small"
|
style="margin-left: 20px"
|
@change="updateExpression"
|
>
|
<el-option label="星期一" value="1"></el-option>
|
<el-option label="星期二" value="2"></el-option>
|
<el-option label="星期三" value="3"></el-option>
|
<el-option label="星期四" value="4"></el-option>
|
<el-option label="星期五" value="5"></el-option>
|
<el-option label="星期六" value="6"></el-option>
|
<el-option label="星期日" value="7"></el-option>
|
</el-select>
|
|
<el-time-picker
|
v-show="every !== 'never'"
|
v-model="time"
|
:picker-options="{selectableRange: '00:00:00 - 23:59:59'}"
|
value-format="HH:mm"
|
format="HH:mm"
|
placeholder="任意时间点"
|
size="small"
|
style="margin-left: 20px"
|
@change="updateExpression"
|
></el-time-picker>
|
|
<el-button
|
v-show="saveBtn"
|
type="primary"
|
size="small"
|
style="margin-left: 20px"
|
@click="save"
|
>保存</el-button>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "VueCrontab",
|
props: ["expression"],
|
computed: {
|
days: () => {
|
let arr = []
|
for (let i = 1; i < 32; i++) {
|
arr.push({
|
label: i + "日",
|
value: i + ""
|
})
|
}
|
|
return arr
|
}
|
},
|
watch: {
|
expression: function () {
|
this.resolveExp()
|
}
|
},
|
data() {
|
return {
|
saveBtn: false,
|
every: "never",
|
time: "",
|
cronValueObj: {
|
min: "*",
|
hour: "*",
|
day: "*",
|
month: "*",
|
week: "*"
|
},
|
cronText: ""
|
}
|
},
|
mounted() {
|
this.resolveExp()
|
},
|
methods: {
|
resolveExp() {
|
//反解析 表达式
|
"准备反解析", this.expression;
|
if (this.expression.length) {
|
let arr = this.expression.split(" ");
|
if (arr.length >= 5) {
|
//6 位以上是合法表达式
|
this.cronValueObj.min = arr[0]
|
this.cronValueObj.hour = arr[1]
|
this.cronValueObj.day = arr[2]
|
// this.cronValueObj.month = arr[3],
|
this.cronValueObj.month = "*"
|
this.cronValueObj.week = arr[4]
|
}
|
|
if (this.cronValueObj.week != "*") {
|
this.every = "week"
|
} else if (this.cronValueObj.day != "*") {
|
this.every = "month"
|
} else {
|
this.every = "day"
|
}
|
this.time = this.cronValueObj.hour + ":" + this.cronValueObj.min
|
} else {
|
//没有传入的表达式 则还原
|
this.clearCron();
|
}
|
},
|
changeEvery() {
|
this.saveBtn = true;
|
if (this.every === "never") {
|
this.cronText = ""
|
return
|
}
|
if (this.every === "month") {
|
this.cronValueObj.week = "*"
|
this.cronValueObj.day = "1"
|
if (!this.time.length) {
|
this.time = "00:00"
|
}
|
}
|
if (this.every === "week") {
|
this.cronValueObj.day = "*"
|
this.cronValueObj.week = "1"
|
if (!this.time.length) {
|
this.time = "00:00"
|
}
|
}
|
if (this.every === "day") {
|
this.cronValueObj.day = "*"
|
this.cronValueObj.week = "*"
|
}
|
this.updateExpression()
|
},
|
updateExpression() {
|
this.saveBtn = true;
|
if (this.time.length) {
|
let arr = this.time.split(":");
|
this.cronValueObj.hour = arr[0]
|
this.cronValueObj.min = arr[1]
|
}
|
this.crontabValueString()
|
},
|
clearCron() {
|
this.cronValueObj.second = "*"
|
this.cronValueObj.min = "*"
|
this.cronValueObj.hour = "*"
|
this.cronValueObj.day = "*"
|
this.cronValueObj.month = "*"
|
this.cronValueObj.week = "*"
|
},
|
crontabValueString: function () {
|
let obj = this.cronValueObj;
|
this.cronText =
|
obj.min +
|
" " +
|
obj.hour +
|
" " +
|
obj.day +
|
" " +
|
obj.month +
|
" " +
|
obj.week
|
},
|
save() {
|
this.$emit("update", this.cronText)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
</style>
|
