新增cron表达式组件
This commit is contained in:
不做码农
parent
39908e1bbc
commit
5ae44e8519
807
src/components/vue3-cron-core/Index.vue
Normal file
807
src/components/vue3-cron-core/Index.vue
Normal file
@ -0,0 +1,807 @@
|
||||
<template>
|
||||
<div class="v3c">
|
||||
<ul class="v3c-tab">
|
||||
<li class="v3c-tab-item" :class="{ 'v3c-active': tabActive == 1 }" @click="onHandleTab(1)">{{ state.text.Seconds.name }}</li>
|
||||
<li class="v3c-tab-item" :class="{ 'v3c-active': tabActive == 2 }" @click="onHandleTab(2)">{{ state.text.Minutes.name }}</li>
|
||||
<li class="v3c-tab-item" :class="{ 'v3c-active': tabActive == 3 }" @click="onHandleTab(3)">{{ state.text.Hours.name }}</li>
|
||||
<li class="v3c-tab-item" :class="{ 'v3c-active': tabActive == 4 }" @click="onHandleTab(4)">{{ state.text.Day.name }}</li>
|
||||
<li class="v3c-tab-item" :class="{ 'v3c-active': tabActive == 5 }" @click="onHandleTab(5)">{{ state.text.Month.name }}</li>
|
||||
<li class="v3c-tab-item" :class="{ 'v3c-active': tabActive == 6 }" @click="onHandleTab(6)">{{ state.text.Year.name }}</li>
|
||||
<li class="v3c-tab-item v3c-lang-btn" @click="state.language = state.language === 'en' ? 'cn' : 'en'">{{ state.language === 'en' ? 'cn' : 'en' }}</li>
|
||||
</ul>
|
||||
<!-- 秒 -->
|
||||
<div class="v3c-content" v-show="tabActive == 1">
|
||||
<!-- 每一秒 -->
|
||||
<div>
|
||||
<label for="seconds1">
|
||||
<input type="radio" id="seconds1" value="1" v-model="state.second.cronEvery" />
|
||||
{{ state.text.Seconds.every }}
|
||||
</label>
|
||||
</div>
|
||||
<!-- 每隔多久 -->
|
||||
<div class="mt-20">
|
||||
<label for="seconds2">
|
||||
<input type="radio" id="seconds2" value="2" v-model="state.second.cronEvery" />
|
||||
{{ state.text.Seconds.interval[0] }}
|
||||
<input type="number" min="1" max="60" v-model="state.second.incrementIncrement" />
|
||||
{{ state.text.Seconds.interval[1] || '' }}
|
||||
<input type="number" min="0" max="59" v-model="state.second.incrementStart" />
|
||||
{{ state.text.Seconds.interval[2] || '' }}
|
||||
</label>
|
||||
</div>
|
||||
<!-- 具体秒数 -->
|
||||
<div class="mt-20">
|
||||
<label for="seconds3">
|
||||
<input type="radio" id="seconds3" value="3" v-model="state.second.cronEvery" />
|
||||
{{ state.text.Seconds.specific }}
|
||||
<select multiple v-model="state.second.specificSpecific">
|
||||
<option :value="index" v-for="(item, index) in 60" :key="index">{{ index }}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<!-- 具体秒数 -->
|
||||
<div class="mt-20">
|
||||
<label for="seconds4">
|
||||
<input type="radio" id="seconds4" value="4" v-model="state.second.cronEvery" />
|
||||
{{ state.text.Seconds.cycle[0] }}
|
||||
<input type="number" v-model="state.second.rangeStart" min="1" max="60" />
|
||||
{{ state.text.Seconds.cycle[1] || '' }}
|
||||
<input type="number" v-model="state.second.rangeEnd" min="0" max="59" />
|
||||
{{ state.text.Seconds.cycle[2] || '' }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 分钟 -->
|
||||
<div class="v3c-content" v-show="tabActive == 2">
|
||||
<!-- 每一秒 -->
|
||||
<div>
|
||||
<label for="minute1">
|
||||
<input type="radio" id="minute1" value="1" v-model="state.minute.cronEvery" />
|
||||
{{ state.text.Minutes.every }}
|
||||
</label>
|
||||
</div>
|
||||
<!-- 每隔多久 -->
|
||||
<div class="mt-20">
|
||||
<label for="minute2">
|
||||
<input type="radio" id="minute2" value="2" v-model="state.minute.cronEvery" />
|
||||
{{ state.text.Minutes.interval[0] }}
|
||||
<input type="number" min="1" max="60" v-model="state.minute.incrementIncrement" />
|
||||
{{ state.text.Minutes.interval[1] || '' }}
|
||||
<input type="number" min="0" max="59" v-model="state.minute.incrementStart" />
|
||||
{{ state.text.Minutes.interval[2] || '' }}
|
||||
</label>
|
||||
</div>
|
||||
<!-- 具体秒数 -->
|
||||
<div class="mt-20">
|
||||
<label for="minute3">
|
||||
<input type="radio" id="minute3" value="3" v-model="state.minute.cronEvery" />
|
||||
{{ state.text.Minutes.specific }}
|
||||
<select multiple v-model="state.minute.specificSpecific">
|
||||
<option :value="index" v-for="(item, index) in 60" :key="index">{{ index }}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<!-- 具体秒数 -->
|
||||
<div class="mt-20">
|
||||
<label for="minute4">
|
||||
<input type="radio" id="minute4" value="4" v-model="state.minute.cronEvery" />
|
||||
{{ state.text.Minutes.cycle[0] }}
|
||||
<input type="number" v-model="state.minute.rangeStart" min="1" max="60" />
|
||||
{{ state.text.Minutes.cycle[1] || '' }}
|
||||
<input type="number" v-model="state.minute.rangeEnd" min="0" max="59" />
|
||||
{{ state.text.Minutes.cycle[2] || '' }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小时 -->
|
||||
<div class="v3c-content" v-show="tabActive == 3">
|
||||
<!-- 每一秒 -->
|
||||
<div>
|
||||
<label for="hour1">
|
||||
<input type="radio" id="hour1" value="1" v-model="state.hour.cronEvery" />
|
||||
{{ state.text.Hours.every }}
|
||||
</label>
|
||||
</div>
|
||||
<!-- 每隔多久 -->
|
||||
<div class="mt-20">
|
||||
<label for="hour2">
|
||||
<input type="radio" id="hour2" value="2" v-model="state.hour.cronEvery" />
|
||||
{{ state.text.Hours.interval[0] }}
|
||||
<input type="number" min="1" max="60" v-model="state.hour.incrementIncrement" />
|
||||
{{ state.text.Hours.interval[1] || '' }}
|
||||
<input type="number" min="0" max="59" v-model="state.hour.incrementStart" />
|
||||
{{ state.text.Hours.interval[2] || '' }}
|
||||
</label>
|
||||
</div>
|
||||
<!-- 具体秒数 -->
|
||||
<div class="mt-20">
|
||||
<label for="hour3">
|
||||
<input type="radio" id="hour3" value="3" v-model="state.hour.cronEvery" />
|
||||
{{ state.text.Hours.specific }}
|
||||
<select multiple v-model="state.hour.specificSpecific">
|
||||
<option :value="index" v-for="(item, index) in 60" :key="index">{{ index }}</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<!-- 具体秒数 -->
|
||||
<div class="mt-20">
|
||||
<label for="hour4">
|
||||
<input type="radio" id="hour4" value="4" v-model="state.hour.cronEvery" />
|
||||
{{ state.text.Hours.cycle[0] }}
|
||||
<input type="number" v-model="state.hour.rangeStart" min="1" max="60" />
|
||||
{{ state.text.Hours.cycle[1] || '' }}
|
||||
<input type="number" v-model="state.hour.rangeEnd" min="0" max="59" />
|
||||
{{ state.text.Hours.cycle[2] || '' }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 天 -->
|
||||
<div class="v3c-content" v-show="tabActive == 4">
|
||||
<!-- 1 -->
|
||||
<div>
|
||||
<label for="day1">
|
||||
<input type="radio" id="day1" value="1" v-model="state.day.cronEvery" />
|
||||
{{ state.text.Day.every }}
|
||||
</label>
|
||||
</div>
|
||||
<!-- 2 -->
|
||||
<div class="mt-20">
|
||||
<label for="day2">
|
||||
<input type="radio" id="day2" value="2" v-model="state.day.cronEvery" />
|
||||
{{ state.text.Day.intervalWeek[0] }}
|
||||
<input type="number" min="1" max="60" v-model="state.day.incrementIncrement" />
|
||||
{{ state.text.Day.intervalWeek[1] }}
|
||||
<input type="number" min="0" max="59" v-model="state.day.incrementStart" />
|
||||
{{ state.text.Day.intervalWeek[2] }}
|
||||
</label>
|
||||
</div>
|
||||
<!-- 3 -->
|
||||
<div class="mt-20">
|
||||
<label for="day3">
|
||||
<input type="radio" id="day3" value="3" v-model="state.day.cronEvery" />
|
||||
{{ state.text.Day.intervalDay[0] }}
|
||||
<input type="number" v-model="state.hour.rangeStart" min="1" max="30" />
|
||||
{{ state.text.Day.intervalDay[1] }}
|
||||
<input type="number" v-model="state.hour.rangeEnd" min="1" max="30" />
|
||||
{{ state.text.Day.intervalDay[2] }}
|
||||
</label>
|
||||
</div>
|
||||
<!-- 4 -->
|
||||
<div class="mt-20">
|
||||
<label for="day4">
|
||||
<input type="radio" id="day4" value="4" v-model="state.day.cronEvery" />
|
||||
{{ state.text.Day.specificWeek }}
|
||||
<select multiple v-model="state.week.specificSpecific">
|
||||
<option v-for="(val, index) in 7" :key="index" :value="['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'][val - 1]">
|
||||
{{ state.text.Week[val - 1] }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<!-- 5 -->
|
||||
<div class="mt-20">
|
||||
<label for="day5">
|
||||
<input type="radio" id="day5" value="5" v-model="state.day.cronEvery" />
|
||||
{{ state.text.Day.specificDay }}
|
||||
<select multiple v-model="state.week.specificSpecific">
|
||||
<option v-for="(val, index) in 31" :key="index" :value="val">
|
||||
{{ val }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<!-- 6 -->
|
||||
<div class="mt-20">
|
||||
<label for="day6">
|
||||
<input type="radio" id="day6" value="6" v-model="state.day.cronEvery" />
|
||||
{{ state.text.Day.lastDay }}
|
||||
</label>
|
||||
</div>
|
||||
<!-- 7 -->
|
||||
<div class="mt-20">
|
||||
<label for="day7">
|
||||
<input type="radio" id="day7" value="7" v-model="state.day.cronEvery" />
|
||||
{{ state.text.Day.lastWeekday }}
|
||||
</label>
|
||||
</div>
|
||||
<!-- 8 -->
|
||||
<div class="mt-20">
|
||||
<label for="day8">
|
||||
<input type="radio" id="day8" value="8" v-model="state.day.cronEvery" />
|
||||
{{ state.text.Day.lastWeek[0] }}
|
||||
<select v-model="state.day.cronLastSpecificDomDay">
|
||||
<option v-for="(val, index) in 7" :key="index" :value="val">
|
||||
{{ state.text.Week[val - 1] }}
|
||||
</option>
|
||||
</select>
|
||||
{{ state.text.Day.lastWeek[1] || '' }}
|
||||
</label>
|
||||
</div>
|
||||
<!-- 9 -->
|
||||
<div class="mt-20">
|
||||
<label for="day9">
|
||||
<input type="radio" id="day9" value="9" v-model="state.day.cronEvery" />
|
||||
<input type="number" v-model="state.day.cronDaysBeforeEomMinus" min="1" max="31" />
|
||||
{{ state.text.Day.beforeEndMonth[0] }}
|
||||
</label>
|
||||
</div>
|
||||
<!-- 10 -->
|
||||
<div class="mt-20">
|
||||
<label for="day10">
|
||||
<input type="radio" id="day10" value="10" v-model="state.day.cronEvery" />
|
||||
{{ state.text.Day.nearestWeekday[0] }}
|
||||
<input type="number" v-model="state.day.cronDaysNearestWeekday" :min="1" :max="31" />
|
||||
{{ state.text.Day.nearestWeekday[1] }}
|
||||
</label>
|
||||
</div>
|
||||
<!-- 11 -->
|
||||
<div class="mt-20">
|
||||
<label for="day11">
|
||||
<input type="radio" id="day11" value="11" v-model="state.day.cronEvery" />
|
||||
{{ state.text.Day.someWeekday[0] }}
|
||||
<input type="number" v-model="state.week.cronNthDayNth" :min="1" :max="5" />
|
||||
|
||||
<select v-model="state.week.cronNthDayDay">
|
||||
<option v-for="(val, index) in 7" :key="index" :value="val">
|
||||
{{ state.text.Week[val - 1] }}
|
||||
</option>
|
||||
</select>
|
||||
{{ state.text.Day.someWeekday[1] }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 月 -->
|
||||
<div class="v3c-content" v-show="tabActive == 5">
|
||||
<!-- 1 -->
|
||||
<div>
|
||||
<label for="month1">
|
||||
<input type="radio" id="month1" value="1" v-model="state.month.cronEvery" />
|
||||
{{ state.text.Month.every }}
|
||||
</label>
|
||||
</div>
|
||||
<!-- 2 -->
|
||||
<div class="mt-20">
|
||||
<label for="month2">
|
||||
<input type="radio" id="month2" value="2" v-model="state.month.cronEvery" />
|
||||
{{ state.text.Month.interval[0] }}
|
||||
<input type="number" v-model="state.month.incrementIncrement" :min="0" :max="12" />
|
||||
{{ state.text.Month.interval[1] }}
|
||||
<input type="number" v-model="state.month.incrementStart" :min="0" :max="12" />
|
||||
</label>
|
||||
</div>
|
||||
<!-- 3 -->
|
||||
<div class="mt-20">
|
||||
<label for="month3">
|
||||
<input type="radio" id="month3" value="3" v-model="state.month.cronEvery" />
|
||||
{{ state.text.Month.specific }}
|
||||
<select multiple v-model="state.month.specificSpecific">
|
||||
<option v-for="(val, index) in 12" :key="index" :value="val">
|
||||
{{ val }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<!-- 4 -->
|
||||
<div class="mt-20">
|
||||
<label for="month4">
|
||||
<input type="radio" id="month4" value="4" v-model="state.month.cronEvery" />
|
||||
{{ state.text.Month.cycle[0] }}
|
||||
<input type="number" v-model="state.month.rangeStart" :min="1" :max="12" />
|
||||
{{ state.text.Month.cycle[1] }}
|
||||
<input type="number" v-model="state.month.rangeEnd" :min="1" :max="12" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 年 -->
|
||||
<div class="v3c-content" v-show="tabActive == 6">
|
||||
<!-- 1 -->
|
||||
<div>
|
||||
<label for="year1">
|
||||
<input type="radio" id="year1" value="1" v-model="state.year.cronEvery" />
|
||||
{{ state.text.Year.every }}
|
||||
</label>
|
||||
</div>
|
||||
<!-- 2 -->
|
||||
<div class="mt-20">
|
||||
<label for="year2">
|
||||
<input type="radio" id="year2" value="2" v-model="state.year.cronEvery" />
|
||||
{{ state.text.Year.interval[0] }}
|
||||
<input type="number" v-model="state.year.incrementIncrement" :min="1" :max="99" />
|
||||
{{ state.text.Year.interval[1] }}
|
||||
<input type="number" v-model="state.year.incrementStart" :min="currYear" :max="currYear + 10" />
|
||||
</label>
|
||||
</div>
|
||||
<!-- 3 -->
|
||||
<div class="mt-20">
|
||||
<label for="year3">
|
||||
<input type="radio" id="year3" value="3" v-model="state.year.cronEvery" />
|
||||
{{ state.text.Year.specific }}
|
||||
<select multiple v-model="state.year.specificSpecific">
|
||||
<option v-for="(val, index) in 100" :key="index" :value="currYear + val">
|
||||
{{ currYear + val }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<!-- 4 -->
|
||||
<div class="mt-20">
|
||||
<label for="year3">
|
||||
<input type="radio" id="year3" value="4" v-model="state.year.cronEvery" />
|
||||
{{ state.text.Year.cycle[0] }}
|
||||
<input type="number" v-model="state.month.rangeStart" :min="currYear" :max="currYear + 10" />
|
||||
{{ state.text.Year.cycle[1] }}
|
||||
<input type="number" v-model="state.month.rangeEnd" :min="currYear" :max="currYear + 10" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 结果 -->
|
||||
<div class="v3c-footer">
|
||||
<div style="flex: 1">
|
||||
CRON : <span class="cron">{{ state.cron }}</span>
|
||||
|
||||
<button class="btn-ok" @click.stop="handleChange">{{ state.text.Save }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Language from './language'
|
||||
import { reactive, computed, toRefs, defineComponent, ref, watch } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Vue3CronCore',
|
||||
props: {
|
||||
i18n: {},
|
||||
maxHeight: String,
|
||||
change: Function,
|
||||
value: String,
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const { i18n } = toRefs(props)
|
||||
const state = reactive({
|
||||
language: i18n.value,
|
||||
second: {
|
||||
cronEvery: '1',
|
||||
incrementStart: 3,
|
||||
incrementIncrement: 5,
|
||||
rangeStart: 0,
|
||||
rangeEnd: 0,
|
||||
specificSpecific: [],
|
||||
},
|
||||
minute: {
|
||||
cronEvery: '1',
|
||||
incrementStart: 3,
|
||||
incrementIncrement: 5,
|
||||
rangeStart: 0,
|
||||
rangeEnd: 0,
|
||||
specificSpecific: [],
|
||||
},
|
||||
hour: {
|
||||
cronEvery: '1',
|
||||
incrementStart: 3,
|
||||
incrementIncrement: 5,
|
||||
rangeStart: 0,
|
||||
rangeEnd: 0,
|
||||
specificSpecific: [],
|
||||
},
|
||||
day: {
|
||||
cronEvery: '1',
|
||||
incrementStart: 1,
|
||||
incrementIncrement: 1,
|
||||
rangeStart: 0,
|
||||
rangeEnd: 0,
|
||||
specificSpecific: [],
|
||||
cronLastSpecificDomDay: 1,
|
||||
cronDaysBeforeEomMinus: 0,
|
||||
cronDaysNearestWeekday: 1,
|
||||
},
|
||||
week: {
|
||||
cronEvery: '1',
|
||||
incrementStart: 1,
|
||||
incrementIncrement: 1,
|
||||
specificSpecific: [],
|
||||
cronNthDayDay: 1,
|
||||
cronNthDayNth: 1,
|
||||
},
|
||||
month: {
|
||||
cronEvery: '1',
|
||||
incrementStart: 3,
|
||||
incrementIncrement: 5,
|
||||
rangeStart: 1,
|
||||
rangeEnd: 1,
|
||||
specificSpecific: [],
|
||||
},
|
||||
year: {
|
||||
cronEvery: '1',
|
||||
incrementStart: 2022,
|
||||
incrementIncrement: 1,
|
||||
rangeStart: 1,
|
||||
rangeEnd: 1,
|
||||
specificSpecific: [],
|
||||
},
|
||||
output: {
|
||||
second: '',
|
||||
minute: '',
|
||||
hour: '',
|
||||
day: '',
|
||||
month: '',
|
||||
Week: '',
|
||||
year: '',
|
||||
},
|
||||
text: computed(() => Language[state.language || 'cn']),
|
||||
secondsText: computed(() => {
|
||||
let seconds = ''
|
||||
let cronEvery = state.second.cronEvery
|
||||
switch (cronEvery.toString()) {
|
||||
case '1':
|
||||
seconds = '*'
|
||||
break
|
||||
case '2':
|
||||
seconds = state.second.incrementStart + '/' + state.second.incrementIncrement
|
||||
break
|
||||
case '3':
|
||||
state.second.specificSpecific.map((val) => {
|
||||
seconds += val + ','
|
||||
})
|
||||
seconds = seconds.slice(0, -1)
|
||||
break
|
||||
case '4':
|
||||
seconds = state.second.rangeStart + '-' + state.second.rangeEnd
|
||||
break
|
||||
}
|
||||
return seconds
|
||||
}),
|
||||
minutesText: computed(() => {
|
||||
let minutes = ''
|
||||
let cronEvery = state.minute.cronEvery
|
||||
switch (cronEvery.toString()) {
|
||||
case '1':
|
||||
minutes = '*'
|
||||
break
|
||||
case '2':
|
||||
minutes = state.minute.incrementStart + '/' + state.minute.incrementIncrement
|
||||
break
|
||||
case '3':
|
||||
state.minute.specificSpecific.map((val) => {
|
||||
minutes += val + ','
|
||||
})
|
||||
minutes = minutes.slice(0, -1)
|
||||
break
|
||||
case '4':
|
||||
minutes = state.minute.rangeStart + '-' + state.minute.rangeEnd
|
||||
break
|
||||
}
|
||||
return minutes
|
||||
}),
|
||||
hoursText: computed(() => {
|
||||
let hours = ''
|
||||
let cronEvery = state.hour.cronEvery
|
||||
switch (cronEvery.toString()) {
|
||||
case '1':
|
||||
hours = '*'
|
||||
break
|
||||
case '2':
|
||||
hours = state.hour.incrementStart + '/' + state.hour.incrementIncrement
|
||||
break
|
||||
case '3':
|
||||
state.hour.specificSpecific.map((val) => {
|
||||
hours += val + ','
|
||||
})
|
||||
hours = hours.slice(0, -1)
|
||||
break
|
||||
case '4':
|
||||
hours = state.hour.rangeStart + '-' + state.hour.rangeEnd
|
||||
break
|
||||
}
|
||||
return hours
|
||||
}),
|
||||
daysText: computed(() => {
|
||||
let days = ''
|
||||
let cronEvery = state.day.cronEvery
|
||||
switch (cronEvery.toString()) {
|
||||
case '1':
|
||||
break
|
||||
case '2':
|
||||
case '4':
|
||||
case '11':
|
||||
days = '?'
|
||||
break
|
||||
case '3':
|
||||
days = state.day.incrementStart + '/' + state.day.incrementIncrement
|
||||
break
|
||||
case '5':
|
||||
state.day.specificSpecific.map((val) => {
|
||||
days += val + ','
|
||||
})
|
||||
days = days.slice(0, -1)
|
||||
break
|
||||
case '6':
|
||||
days = 'L'
|
||||
break
|
||||
case '7':
|
||||
days = 'LW'
|
||||
break
|
||||
case '8':
|
||||
days = state.day.cronLastSpecificDomDay + 'L'
|
||||
break
|
||||
case '9':
|
||||
days = 'L-' + state.day.cronDaysBeforeEomMinus
|
||||
break
|
||||
case '10':
|
||||
days = state.day.cronDaysNearestWeekday + 'W'
|
||||
break
|
||||
}
|
||||
return days
|
||||
}),
|
||||
weeksText: computed(() => {
|
||||
let weeks = ''
|
||||
let cronEvery = state.day.cronEvery
|
||||
switch (cronEvery.toString()) {
|
||||
case '1':
|
||||
case '3':
|
||||
case '5':
|
||||
weeks = '?'
|
||||
break
|
||||
case '2':
|
||||
weeks = state.week.incrementStart + '/' + state.week.incrementIncrement
|
||||
break
|
||||
case '4':
|
||||
state.week.specificSpecific.map((val) => {
|
||||
weeks += val + ','
|
||||
})
|
||||
weeks = weeks.slice(0, -1)
|
||||
break
|
||||
case '6':
|
||||
case '7':
|
||||
case '8':
|
||||
case '9':
|
||||
case '10':
|
||||
weeks = '?'
|
||||
break
|
||||
case '11':
|
||||
weeks = state.week.cronNthDayDay + '#' + state.week.cronNthDayNth
|
||||
break
|
||||
}
|
||||
return weeks
|
||||
}),
|
||||
monthsText: computed(() => {
|
||||
let months = ''
|
||||
let cronEvery = state.month.cronEvery
|
||||
switch (cronEvery.toString()) {
|
||||
case '1':
|
||||
months = '*'
|
||||
break
|
||||
case '2':
|
||||
months = state.month.incrementStart + '/' + state.month.incrementIncrement
|
||||
break
|
||||
case '3':
|
||||
state.month.specificSpecific.map((val) => {
|
||||
months += val + ','
|
||||
})
|
||||
months = months.slice(0, -1)
|
||||
break
|
||||
case '4':
|
||||
months = state.month.rangeStart + '-' + state.month.rangeEnd
|
||||
break
|
||||
}
|
||||
return months
|
||||
}),
|
||||
yearsText: computed(() => {
|
||||
let years = ''
|
||||
let cronEvery = state.year.cronEvery
|
||||
switch (cronEvery.toString()) {
|
||||
case '1':
|
||||
years = '*'
|
||||
break
|
||||
case '2':
|
||||
years = state.year.incrementStart + '/' + state.year.incrementIncrement
|
||||
break
|
||||
case '3':
|
||||
state.year.specificSpecific.map((val) => {
|
||||
years += val + ','
|
||||
})
|
||||
years = years.slice(0, -1)
|
||||
break
|
||||
case '4':
|
||||
years = state.year.rangeStart + '-' + state.year.rangeEnd
|
||||
break
|
||||
}
|
||||
return years
|
||||
}),
|
||||
cron: computed(() => {
|
||||
return `${state.secondsText || '*'} ${state.minutesText || '*'} ${state.hoursText || '*'} ${state.daysText || '*'} ${state.monthsText || '*'} ${state.weeksText || '?'} ${
|
||||
state.yearsText || '*'
|
||||
}`
|
||||
}),
|
||||
})
|
||||
|
||||
const handleChange = () => {
|
||||
if (typeof state.cron !== 'string') return false
|
||||
emit('change', state.cron)
|
||||
}
|
||||
const rest = (data) => {
|
||||
for (let 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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const tabActive = ref(1)
|
||||
const currYear = new Date().getFullYear() - 1
|
||||
const onHandleTab = (index) => {
|
||||
tabActive.value = index
|
||||
}
|
||||
|
||||
watch(
|
||||
() => state.cron,
|
||||
(value) => {
|
||||
if (typeof state.cron !== 'string') return
|
||||
emit('update:value', value)
|
||||
},
|
||||
)
|
||||
|
||||
return {
|
||||
state,
|
||||
handleChange,
|
||||
rest,
|
||||
tabActive,
|
||||
onHandleTab,
|
||||
currYear,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.v3c {
|
||||
width: auto;
|
||||
border: 1px solid #f5f7fa;
|
||||
}
|
||||
.v3c-tab {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
background-color: #f5f7fa;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.v3c-tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.v3c-tab-item.v3c-active {
|
||||
background-color: #5b8ff9;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.v3c-lang-btn {
|
||||
background-color: #61ddaa;
|
||||
color: #ffffff;
|
||||
/* border-radius: 10px; */
|
||||
}
|
||||
|
||||
.v3c-content {
|
||||
padding: 20px;
|
||||
max-height: v-bind(maxHeight);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.p-20 {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.v3c-footer {
|
||||
background-color: #f5f7fa;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mt-20 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.v3c input[type='text'] {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.v3c input[type='number'] {
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
.v3c select {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
.v3c select[multiple] {
|
||||
width: 80px;
|
||||
height: 100px;
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
.btn-ok {
|
||||
line-height: 1.5715;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0 2px #00000004;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
touch-action: manipulation;
|
||||
height: 32px;
|
||||
padding: 4px 15px;
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
|
||||
color: #fff;
|
||||
background: #5b8ff9;
|
||||
border-color: #5b8ff9;
|
||||
text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
|
||||
box-shadow: 0 2px #0000000b;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
line-height: 1.5715;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0 2px #00000004;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
touch-action: manipulation;
|
||||
height: 32px;
|
||||
padding: 4px 15px;
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
|
||||
color: #fff;
|
||||
background: #61ddaa;
|
||||
border-color: #61ddaa;
|
||||
text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
|
||||
box-shadow: 0 2px #0000000b;
|
||||
}
|
||||
|
||||
.cron {
|
||||
background-color: #61ddaa;
|
||||
padding: 5px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
53
src/components/vue3-cron-core/language/cn.js
Normal file
53
src/components/vue3-cron-core/language/cn.js
Normal file
@ -0,0 +1,53 @@
|
||||
export default {
|
||||
Seconds:{
|
||||
name:'秒',
|
||||
every:'每一秒钟',
|
||||
interval:['每隔','秒执行 从','秒开始'],
|
||||
specific:'具体秒数(可多选)',
|
||||
cycle:['周期从','到','秒']
|
||||
},
|
||||
Minutes:{
|
||||
name:'分',
|
||||
every:'每一分钟',
|
||||
interval:['每隔','分执行 从','分开始'],
|
||||
specific:'具体分钟数(可多选)',
|
||||
cycle:['周期从','到','分']
|
||||
},
|
||||
Hours:{
|
||||
name:'时',
|
||||
every:'每一小时',
|
||||
interval:['每隔','小时执行 从','小时开始'],
|
||||
specific:'具体小时数(可多选)',
|
||||
cycle:['周期从','到','小时']
|
||||
},
|
||||
Day:{
|
||||
name:'天',
|
||||
every:'每一天',
|
||||
intervalWeek:['每隔','周执行 从','开始'],
|
||||
intervalDay:['每隔','天执行 从','天开始'],
|
||||
specificWeek:'具体星期几(可多选)',
|
||||
specificDay:'具体天数(可多选)',
|
||||
lastDay:'在这个月的最后一天',
|
||||
lastWeekday:'在这个月的最后一个工作日',
|
||||
lastWeek:['在这个月的最后一个'],
|
||||
beforeEndMonth:['在本月底前','天'],
|
||||
nearestWeekday:['最近的工作日（周一至周五）至本月','日'],
|
||||
someWeekday:['在这个月的第','个'],
|
||||
},
|
||||
Week:['天','一','二','三','四','五','六'].map(val=>'星期'+val),
|
||||
Month:{
|
||||
name:'月',
|
||||
every:'每一月',
|
||||
interval:['每隔','月执行 从','月开始'],
|
||||
specific:'具体月数(可多选)',
|
||||
cycle:['从','到','月之间的每个月']
|
||||
},
|
||||
Year:{
|
||||
name:'年',
|
||||
every:'每一年',
|
||||
interval:['每隔','年执行 从','年开始'],
|
||||
specific:'具体年份(可多选)',
|
||||
cycle:['从','到','年之间的每一年']
|
||||
},
|
||||
Save:'生成'
|
||||
}
|
||||
53
src/components/vue3-cron-core/language/en.js
Normal file
53
src/components/vue3-cron-core/language/en.js
Normal file
@ -0,0 +1,53 @@
|
||||
export default {
|
||||
Seconds:{
|
||||
name:'Seconds',
|
||||
every:'Every second',
|
||||
interval:['Every','second(s) starting at second'],
|
||||
specific:'Specific second (choose one or many)',
|
||||
cycle:['Every second between second','and second']
|
||||
},
|
||||
Minutes:{
|
||||
name:'Minutes',
|
||||
every:'Every minute',
|
||||
interval:['Every','minute(s) starting at minute'],
|
||||
specific:'Specific minute (choose one or many)',
|
||||
cycle:['Every minute between minute','and minute']
|
||||
},
|
||||
Hours:{
|
||||
name:'Hours',
|
||||
every:'Every hour',
|
||||
interval:['Every','hour(s) starting at hour'],
|
||||
specific:'Specific hour (choose one or many)',
|
||||
cycle:['Every hour between hour','and hour']
|
||||
},
|
||||
Day:{
|
||||
name:'Day',
|
||||
every:'Every day',
|
||||
intervalWeek:['Every','day(s) starting on'],
|
||||
intervalDay:['Every','day(s) starting at the','of the month'],
|
||||
specificWeek:'Specific day of week (choose one or many)',
|
||||
specificDay:'Specific day of month (choose one or many)',
|
||||
lastDay:'On the last day of the month',
|
||||
lastWeekday:'On the last weekday of the month',
|
||||
lastWeek:['On the last',' of the month'],
|
||||
beforeEndMonth:['day(s) before the end of the month'],
|
||||
nearestWeekday:['Nearest weekday (Monday to Friday) to the','of the month'],
|
||||
someWeekday:['On the','of the month'],
|
||||
},
|
||||
Week:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
|
||||
Month:{
|
||||
name:'Month',
|
||||
every:'Every month',
|
||||
interval:['Every','month(s) starting in'],
|
||||
specific:'Specific month (choose one or many)',
|
||||
cycle:['Every month between','and']
|
||||
},
|
||||
Year:{
|
||||
name:'Year',
|
||||
every:'Any year',
|
||||
interval:['Every','year(s) starting in'],
|
||||
specific:'Specific year (choose one or many)',
|
||||
cycle:['Every year between','and']
|
||||
},
|
||||
Save:'Generate',
|
||||
}
|
||||
9
src/components/vue3-cron-core/language/index.js
Normal file
9
src/components/vue3-cron-core/language/index.js
Normal file
@ -0,0 +1,9 @@
|
||||
import en from './en'
|
||||
import cn from './cn'
|
||||
import pt from './pt_br'
|
||||
|
||||
export default {
|
||||
en,
|
||||
cn,
|
||||
pt
|
||||
}
|
||||
54
src/components/vue3-cron-core/language/pt_br.js
Normal file
54
src/components/vue3-cron-core/language/pt_br.js
Normal file
@ -0,0 +1,54 @@
|
||||
export default {
|
||||
Seconds:{
|
||||
name:'Segundos',
|
||||
every:'A cada segundo',
|
||||
interval:['A cada','segundo(s) começando no segundo'],
|
||||
specific:'Segundo específico (escolha um ou muitos)',
|
||||
cycle:['A Cada segundo entre segundos','e segundo']
|
||||
},
|
||||
Minutes:{
|
||||
name:'Minutos',
|
||||
every:'A cada minuto',
|
||||
interval:['A cada','minuto(s) começando no minuto'],
|
||||
specific:'Minuto específico (escolha um ou muitos)',
|
||||
cycle:['A cada minuto entre minutos','e minutos']
|
||||
},
|
||||
Hours:{
|
||||
name:'Horas',
|
||||
every:'A cada hora',
|
||||
interval:['A cada','hora(s) começando na hora'],
|
||||
specific:'Hora específica (escolha uma ou muitas)',
|
||||
cycle:['A cada hora entre horas','e horas']
|
||||
},
|
||||
Day:{
|
||||
name:'Dia',
|
||||
every:'A cada dia',
|
||||
intervalWeek:['A cada','dia(s) começando em'],
|
||||
intervalDay:['A cada','dia(s) começando no','do mês'],
|
||||
specificWeek:'Dia específico da semana (escolha um ou vários)',
|
||||
specificDay:'Dia específico do mês (escolha um ou vários)',
|
||||
lastDay:'No último dia do mês',
|
||||
lastWeekday:'No último dia da semana do mês',
|
||||
lastWeek:['No último',' do mês'],
|
||||
beforeEndMonth:['dia(s) antes do final do mês'],
|
||||
nearestWeekday:['Dia da semana mais próximo (segunda a sexta) ao ','do mês'],
|
||||
someWeekday:['No','do mês'],
|
||||
},
|
||||
Week:['Domingo','Segunda-feira','Terça-feira','Quarta-feira','Quinta-feira','Sexta-feira','Sábado'],
|
||||
Month:{
|
||||
name:'Mês',
|
||||
every:'A cada mês',
|
||||
interval:['A cada','mês(es) começando em'],
|
||||
specific:'Mês específico (escolha um ou muitos)',
|
||||
cycle:['Todo mês entre','e']
|
||||
},
|
||||
Year:{
|
||||
name:'Ano',
|
||||
every:'Qualquer ano',
|
||||
interval:['A cada','ano(s) começando em'],
|
||||
specific:'Ano específico (escolha um ou muitos)',
|
||||
cycle:['Todo ano entre','e']
|
||||
},
|
||||
Save:'Salvar',
|
||||
Close:'Fechar'
|
||||
}
|
||||
@ -139,6 +139,12 @@
|
||||
<el-col :lg="24" v-if="form.triggerType == 1">
|
||||
<el-form-item label="间隔(Cron)" prop="cron">
|
||||
<el-input v-model="form.cron" placeholder="请输入cron执行表达式">
|
||||
<template #append>
|
||||
<el-button type="primary" @click="handleShowCron" style="width: 80px;">
|
||||
生成表达式
|
||||
<el-icon><time /></el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@ -182,9 +188,10 @@
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- <el-dialog title="Cron表达式生成器" v-model="openCron" destroy-on-close>
|
||||
<crontab @hide="openCron = false" @fill="crontabFill" :expression="expression"></crontab>
|
||||
</el-dialog> -->
|
||||
<el-dialog title="Cron表达式生成器" v-model="openCron" destroy-on-close>
|
||||
<!-- 使用组件例子 -->
|
||||
<Vue3CronCore i18n="cn" maxHeight="350px" @change="changeCron" v-model:value="form.cron" style="flex: 0.4" />
|
||||
</el-dialog>
|
||||
|
||||
<el-drawer :title="logTitle" v-model="drawer">
|
||||
<el-timeline>
|
||||
@ -201,7 +208,7 @@
|
||||
<script setup name="job">
|
||||
import { queryTasks, getTasks, createTasks, updateTasks, deleteTasks, startTasks, stopTasks, runTasks, exportTasks } from '@/api/monitor/job'
|
||||
import { listJobLog } from '@/api/monitor/jobLog'
|
||||
// import Crontab from '@/components/Crontab'
|
||||
import Vue3CronCore from '@/components/vue3-cron-core/Index.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const { proxy } = getCurrentInstance()
|
||||
@ -323,15 +330,16 @@ function handleJobLog(id, title) {
|
||||
}
|
||||
}
|
||||
/** cron表达式按钮操作 */
|
||||
// function handleShowCron() {
|
||||
function handleShowCron() {
|
||||
// expression.value = form.value.cron
|
||||
// openCron.value = true
|
||||
// }
|
||||
openCron.value = true
|
||||
}
|
||||
/** 确定后回传值 */
|
||||
// function crontabFill(value) {
|
||||
// console.log(value)
|
||||
// form.value.cron = value
|
||||
// }
|
||||
const changeCron = (val) => {
|
||||
if (typeof val !== 'string') return false
|
||||
openCron.value = false
|
||||
form.value.cron = val
|
||||
}
|
||||
// 启动按钮
|
||||
function handleStart(row) {
|
||||
startTasks(row.id).then((response) => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user