<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>
|
