2021-03-10 13:06:14 +08:00

775 lines
19 KiB
Vue

<template>
<div class="vue-cron">
<el-tabs type="border-card">
<el-tab-pane>
<span slot="label"><i class="el-icon-date"></i> {{ text.Seconds.name }}</span>
<div class="tabBody">
<el-row>
<el-radio v-model="second.cronEvery" label="1">{{
text.Seconds.every
}}</el-radio>
</el-row>
<el-row>
<el-radio v-model="second.cronEvery" label="2"
>{{ text.Seconds.interval[0] }}
<el-input-number
size="small"
v-model="second.incrementIncrement"
:min="1"
:max="60"
></el-input-number>
{{ text.Seconds.interval[1] || "" }}
<el-input-number
size="small"
v-model="second.incrementStart"
:min="0"
:max="59"
></el-input-number>
{{ text.Seconds.interval[2] || "" }}
</el-radio>
</el-row>
<el-row>
<el-radio class="long" v-model="second.cronEvery" label="3"
>{{ text.Seconds.specific }}
<el-select size="small" multiple v-model="second.specificSpecific">
<el-option v-for="val in 60" :key="val" :value="val - 1">{{
val - 1
}}</el-option>
</el-select>
</el-radio>
</el-row>
<el-row>
<el-radio v-model="second.cronEvery" label="4"
>{{ text.Seconds.cycle[0] }}
<el-input-number
size="small"
v-model="second.rangeStart"
:min="1"
:max="60"
></el-input-number>
{{ text.Seconds.cycle[1] || "" }}
<el-input-number
size="small"
v-model="second.rangeEnd"
:min="0"
:max="59"
></el-input-number>
{{ text.Seconds.cycle[2] || "" }}
</el-radio>
</el-row>
</div>
</el-tab-pane>
<el-tab-pane>
<span slot="label"><i class="el-icon-date"></i> {{ text.Minutes.name }}</span>
<div class="tabBody">
<el-row>
<el-radio v-model="minute.cronEvery" label="1">{{
text.Minutes.every
}}</el-radio>
</el-row>
<el-row>
<el-radio v-model="minute.cronEvery" label="2"
>{{ text.Minutes.interval[0] }}
<el-input-number
size="small"
v-model="minute.incrementIncrement"
:min="1"
:max="60"
></el-input-number>
{{ text.Minutes.interval[1] }}
<el-input-number
size="small"
v-model="minute.incrementStart"
:min="0"
:max="59"
></el-input-number>
{{ text.Minutes.interval[2] || "" }}
</el-radio>
</el-row>
<el-row>
<el-radio class="long" v-model="minute.cronEvery" label="3"
>{{ text.Minutes.specific }}
<el-select size="small" multiple v-model="minute.specificSpecific">
<el-option v-for="val in 60" :key="val" :value="val - 1">{{
val - 1
}}</el-option>
</el-select>
</el-radio>
</el-row>
<el-row>
<el-radio v-model="minute.cronEvery" label="4"
>{{ text.Minutes.cycle[0] }}
<el-input-number
size="small"
v-model="minute.rangeStart"
:min="1"
:max="60"
></el-input-number>
{{ text.Minutes.cycle[1] }}
<el-input-number
size="small"
v-model="minute.rangeEnd"
:min="0"
:max="59"
></el-input-number>
{{ text.Minutes.cycle[2] }}
</el-radio>
</el-row>
</div>
</el-tab-pane>
<el-tab-pane>
<span slot="label"><i class="el-icon-date"></i> {{ text.Hours.name }}</span>
<div class="tabBody">
<el-row>
<el-radio v-model="hour.cronEvery" label="1">{{
text.Hours.every
}}</el-radio>
</el-row>
<el-row>
<el-radio v-model="hour.cronEvery" label="2"
>{{ text.Hours.interval[0] }}
<el-input-number
size="small"
v-model="hour.incrementIncrement"
:min="0"
:max="23"
></el-input-number>
{{ text.Hours.interval[1] }}
<el-input-number
size="small"
v-model="hour.incrementStart"
:min="0"
:max="23"
></el-input-number>
{{ text.Hours.interval[2] }}
</el-radio>
</el-row>
<el-row>
<el-radio class="long" v-model="hour.cronEvery" label="3"
>{{ text.Hours.specific }}
<el-select size="small" multiple v-model="hour.specificSpecific">
<el-option v-for="val in 24" :key="val" :value="val - 1">{{
val - 1
}}</el-option>
</el-select>
</el-radio>
</el-row>
<el-row>
<el-radio v-model="hour.cronEvery" label="4"
>{{ text.Hours.cycle[0] }}
<el-input-number
size="small"
v-model="hour.rangeStart"
:min="0"
:max="23"
></el-input-number>
{{ text.Hours.cycle[1] }}
<el-input-number
size="small"
v-model="hour.rangeEnd"
:min="0"
:max="23"
></el-input-number>
{{ text.Hours.cycle[2] }}
</el-radio>
</el-row>
</div>
</el-tab-pane>
<el-tab-pane>
<span slot="label"><i class="el-icon-date"></i> {{ text.Day.name }}</span>
<div class="tabBody">
<el-row>
<el-radio v-model="day.cronEvery" label="1">{{ text.Day.every }}</el-radio>
</el-row>
<el-row>
<el-radio v-model="day.cronEvery" label="2"
>{{ text.Day.intervalWeek[0] }}
<el-input-number
size="small"
v-model="week.incrementIncrement"
:min="1"
:max="7"
></el-input-number>
{{ text.Day.intervalWeek[1] }}
<el-select size="small" v-model="week.incrementStart">
<el-option
v-for="val in 7"
:key="val"
:label="text.Week[val - 1]"
:value="val"
></el-option>
</el-select>
{{ text.Day.intervalWeek[2] }}
</el-radio>
</el-row>
<el-row>
<el-radio v-model="day.cronEvery" label="3"
>{{ text.Day.intervalDay[0] }}
<el-input-number
size="small"
v-model="day.incrementIncrement"
:min="1"
:max="31"
></el-input-number>
{{ text.Day.intervalDay[1] }}
<el-input-number
size="small"
v-model="day.incrementStart"
:min="1"
:max="31"
></el-input-number>
{{ text.Day.intervalDay[2] }}
</el-radio>
</el-row>
<el-row>
<el-radio class="long" v-model="day.cronEvery" label="4"
>{{ text.Day.specificWeek }}
<el-select size="small" multiple v-model="week.specificSpecific">
<el-option
v-for="val in 7"
:key="val"
:label="text.Week[val - 1]"
:value="
['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'][val - 1]
"
></el-option>
</el-select>
</el-radio>
</el-row>
<el-row>
<el-radio class="long" v-model="day.cronEvery" label="5"
>{{ text.Day.specificDay }}
<el-select size="small" multiple v-model="day.specificSpecific">
<el-option v-for="val in 31" :key="val" :value="val">{{
val
}}</el-option>
</el-select>
</el-radio>
</el-row>
<el-row>
<el-radio v-model="day.cronEvery" label="6">{{
text.Day.lastDay
}}</el-radio>
</el-row>
<el-row>
<el-radio v-model="day.cronEvery" label="7">{{
text.Day.lastWeekday
}}</el-radio>
</el-row>
<el-row>
<el-radio v-model="day.cronEvery" label="8"
>{{ text.Day.lastWeek[0] }}
<el-select size="small" v-model="day.cronLastSpecificDomDay">
<el-option
v-for="val in 7"
:key="val"
:label="text.Week[val - 1]"
:value="val"
></el-option>
</el-select>
{{ text.Day.lastWeek[1] || "" }}
</el-radio>
</el-row>
<el-row>
<el-radio v-model="day.cronEvery" label="9">
<el-input-number
size="small"
v-model="day.cronDaysBeforeEomMinus"
:min="1"
:max="31"
></el-input-number>
{{ text.Day.beforeEndMonth[0] }}
</el-radio>
</el-row>
<el-row>
<el-radio v-model="day.cronEvery" label="10"
>{{ text.Day.nearestWeekday[0] }}
<el-input-number
size="small"
v-model="day.cronDaysNearestWeekday"
:min="1"
:max="31"
></el-input-number>
{{ text.Day.nearestWeekday[1] }}
</el-radio>
</el-row>
<el-row>
<el-radio v-model="day.cronEvery" label="11"
>{{ text.Day.someWeekday[0] }}
<el-input-number
size="small"
v-model="week.cronNthDayNth"
:min="1"
:max="5"
></el-input-number>
<el-select
size="small"
v-model="week.cronNthDayDay"
style="margin-left: 5px"
>
<el-option
v-for="val in 7"
:key="val"
:label="text.Week[val - 1]"
:value="val"
></el-option>
</el-select>
{{ text.Day.someWeekday[1] }}
</el-radio>
</el-row>
</div>
</el-tab-pane>
<el-tab-pane>
<span slot="label"><i class="el-icon-date"></i> {{ text.Month.name }}</span>
<div class="tabBody">
<el-row>
<el-radio v-model="month.cronEvery" label="1">{{
text.Month.every
}}</el-radio>
</el-row>
<el-row>
<el-radio v-model="month.cronEvery" label="2"
>{{ text.Month.interval[0] }}
<el-input-number
size="small"
v-model="month.incrementIncrement"
:min="0"
:max="12"
></el-input-number>
{{ text.Month.interval[1] }}
<el-input-number
size="small"
v-model="month.incrementStart"
:min="0"
:max="12"
></el-input-number>
</el-radio>
</el-row>
<el-row>
<el-radio class="long" v-model="month.cronEvery" label="3"
>{{ text.Month.specific }}
<el-select size="small" multiple v-model="month.specificSpecific">
<el-option
v-for="val in 12"
:key="val"
:label="val"
:value="val"
></el-option>
</el-select>
</el-radio>
</el-row>
<el-row>
<el-radio v-model="month.cronEvery" label="4"
>{{ text.Month.cycle[0] }}
<el-input-number
size="small"
v-model="month.rangeStart"
:min="1"
:max="12"
></el-input-number>
{{ text.Month.cycle[1] }}
<el-input-number
size="small"
v-model="month.rangeEnd"
:min="1"
:max="12"
></el-input-number>
</el-radio>
</el-row>
</div>
</el-tab-pane>
<el-tab-pane v-if="showYear || false">
<span slot="label"><i class="el-icon-date"></i> {{ text.Year.name }}</span>
<div class="tabBody">
<el-row>
<el-radio v-model="year.cronEvery" label="1">{{
text.Year.every
}}</el-radio>
</el-row>
<el-row>
<el-radio v-model="year.cronEvery" label="2"
>{{ text.Year.interval[0] }}
<el-input-number
size="small"
v-model="year.incrementIncrement"
:min="1"
:max="99"
></el-input-number>
{{ text.Year.interval[1] }}
<el-input-number
size="small"
v-model="year.incrementStart"
:min="2018"
:max="2118"
></el-input-number>
</el-radio>
</el-row>
<el-row>
<el-radio class="long" v-model="year.cronEvery" label="3"
>{{ text.Year.specific }}
<el-select
size="small"
filterable
multiple
v-model="year.specificSpecific"
>
<el-option
v-for="val in 100"
:key="val"
:label="2017 + val"
:value="2017 + val"
></el-option>
</el-select>
</el-radio>
</el-row>
<el-row>
<el-radio v-model="year.cronEvery" label="4"
>{{ text.Year.cycle[0] }}
<el-input-number
size="small"
v-model="year.rangeStart"
:min="2018"
:max="2118"
></el-input-number>
{{ text.Year.cycle[1] }}
<el-input-number
size="small"
v-model="year.rangeEnd"
:min="2018"
:max="2118"
></el-input-number>
</el-radio>
</el-row>
</div>
</el-tab-pane>
</el-tabs>
<div class="bottom">
<!-- <span class="value">{{this.cron}}</span> -->
<el-button type="primary" @click="change">{{ text.Save }}</el-button>
<el-button type="primary" @click="close">{{ text.Close }}</el-button>
</div>
</div>
</template>
<script>
import Language from "./cn";
export default {
name: "vue-cron",
props: ["data", "i18n", "showYear"],
data() {
return {
second: {
cronEvery: "",
incrementStart: "3",
incrementIncrement: "5",
rangeStart: "",
rangeEnd: "",
specificSpecific: []
},
minute: {
cronEvery: "",
incrementStart: "3",
incrementIncrement: "5",
rangeStart: "",
rangeEnd: "",
specificSpecific: []
},
hour: {
cronEvery: "",
incrementStart: "3",
incrementIncrement: "5",
rangeStart: "",
rangeEnd: "",
specificSpecific: []
},
day: {
cronEvery: "",
incrementStart: "1",
incrementIncrement: "1",
rangeStart: "",
rangeEnd: "",
specificSpecific: [],
cronLastSpecificDomDay: 1,
cronDaysBeforeEomMinus: "",
cronDaysNearestWeekday: ""
},
week: {
cronEvery: "",
incrementStart: "1",
incrementIncrement: "1",
specificSpecific: [],
cronNthDayDay: 1,
cronNthDayNth: "1"
},
month: {
cronEvery: "",
incrementStart: "3",
incrementIncrement: "5",
rangeStart: "",
rangeEnd: "",
specificSpecific: []
},
year: {
cronEvery: "",
incrementStart: "2017",
incrementIncrement: "1",
rangeStart: "",
rangeEnd: "",
specificSpecific: []
},
output: {
second: "",
minute: "",
hour: "",
day: "",
month: "",
Week: "",
year: ""
}
};
},
watch: {
data() {
this.rest(this.$data);
}
},
computed: {
text() {
return Language;
},
secondsText() {
let seconds = "";
const cronEvery = this.second.cronEvery;
switch (cronEvery.toString()) {
case "1":
seconds = "*";
break;
case "2":
seconds = this.second.incrementStart + "/" + this.second.incrementIncrement;
break;
case "3":
this.second.specificSpecific.forEach(val => {
seconds += val + ",";
});
seconds = seconds.slice(0, -1);
break;
case "4":
seconds = this.second.rangeStart + "-" + this.second.rangeEnd;
break;
}
return seconds;
},
minutesText() {
let minutes = "";
const cronEvery = this.minute.cronEvery;
switch (cronEvery.toString()) {
case "1":
minutes = "*";
break;
case "2":
minutes = this.minute.incrementStart + "/" + this.minute.incrementIncrement;
break;
case "3":
this.minute.specificSpecific.forEach(val => {
minutes += val + ",";
});
minutes = minutes.slice(0, -1);
break;
case "4":
minutes = this.minute.rangeStart + "-" + this.minute.rangeEnd;
break;
}
return minutes;
},
hoursText() {
let hours = "";
const cronEvery = this.hour.cronEvery;
switch (cronEvery.toString()) {
case "1":
hours = "*";
break;
case "2":
hours = this.hour.incrementStart + "/" + this.hour.incrementIncrement;
break;
case "3":
this.hour.specificSpecific.forEach(val => {
hours += val + ",";
});
hours = hours.slice(0, -1);
break;
case "4":
hours = this.hour.rangeStart + "-" + this.hour.rangeEnd;
break;
}
return hours;
},
daysText() {
let days = "";
const cronEvery = this.day.cronEvery;
switch (cronEvery.toString()) {
case "1":
break;
case "2":
case "4":
case "11":
days = "?";
break;
case "3":
days = this.day.incrementStart + "/" + this.day.incrementIncrement;
break;
case "5":
this.day.specificSpecific.forEach(val => {
days += val + ",";
});
days = days.slice(0, -1);
break;
case "6":
days = "L";
break;
case "7":
days = "LW";
break;
case "8":
days = this.day.cronLastSpecificDomDay + "L";
break;
case "9":
days = "L-" + this.day.cronDaysBeforeEomMinus;
break;
case "10":
days = this.day.cronDaysNearestWeekday + "W";
break;
}
return days;
},
weeksText() {
let weeks = "";
const cronEvery = this.day.cronEvery;
switch (cronEvery.toString()) {
case "1":
case "3":
case "5":
weeks = "?";
break;
case "2":
weeks = this.week.incrementStart + "/" + this.week.incrementIncrement;
break;
case "4":
this.week.specificSpecific.forEach(val => {
weeks += val + ",";
});
weeks = weeks.slice(0, -1);
break;
case "6":
case "7":
case "8":
case "9":
case "10":
weeks = "?";
break;
case "11":
weeks = this.week.cronNthDayDay + "#" + this.week.cronNthDayNth;
break;
}
return weeks;
},
monthsText() {
let months = "";
const cronEvery = this.month.cronEvery;
switch (cronEvery.toString()) {
case "1":
months = "*";
break;
case "2":
months = this.month.incrementStart + "/" + this.month.incrementIncrement;
break;
case "3":
this.month.specificSpecific.forEach(val => {
months += val + ",";
});
months = months.slice(0, -1);
break;
case "4":
months = this.month.rangeStart + "-" + this.month.rangeEnd;
break;
}
return months;
},
yearsText() {
let years = "";
const cronEvery = this.year.cronEvery;
switch (cronEvery.toString()) {
case "1":
years = "*";
break;
case "2":
years = this.year.incrementStart + "/" + this.year.incrementIncrement;
break;
case "3":
this.year.specificSpecific.forEach(val => {
years += val + ",";
});
years = years.slice(0, -1);
break;
case "4":
years = this.year.rangeStart + "-" + this.year.rangeEnd;
break;
}
return years;
},
cron() {
return `${this.secondsText || "*"} ${this.minutesText || "*"} ${this.hoursText ||
"*"} ${this.daysText || "*"} ${this.monthsText || "*"} ${this.weeksText || "?"} ${
this.showYear ? this.yearsText || "*" : ""
}`;
}
},
methods: {
getValue() {
return this.cron;
},
change() {
this.$emit("change", this.cron);
this.close();
},
close() {
this.$emit("close");
},
rest(data) {
for (const i in data) {
if (data[i] instanceof Object) {
this.rest(data[i]);
} else {
switch (typeof data[i]) {
case "object":
data[i] = [];
break;
case "string":
data[i] = "";
break;
}
}
}
}
}
};
</script>
<style lang="scss" scoped>
.bottom {
text-align: center;
margin-top: 20px;
}
.tabBody /deep/ .el-row {
margin: 10px 0;
}
.vue-cron /deep/ .el-tabs {
box-shadow: none;
}
</style>