wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改cron表达式组件

Browse Source
This commit is contained in:
不做码农
2022-05-03 14:45:21 +08:00
parent 62f42993fb
commit f041a757d2
5 changed files with 371 additions and 496 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/vue3-cron-core/Index.vue
+368 -324
View File
@@ -1,366 +1,376 @@
<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>
<li class="v3c-tab-item" :class="{ 'v3c-active': tabActive == 1 }" @click="onHandleTab(1)">秒</li>
<li class="v3c-tab-item" :class="{ 'v3c-active': tabActive == 2 }" @click="onHandleTab(2)">分</li>
<li class="v3c-tab-item" :class="{ 'v3c-active': tabActive == 3 }" @click="onHandleTab(3)">时</li>
<li class="v3c-tab-item" :class="{ 'v3c-active': tabActive == 4 }" @click="onHandleTab(4)">日</li>
<li class="v3c-tab-item" :class="{ 'v3c-active': tabActive == 5 }" @click="onHandleTab(5)">月</li>
<li class="v3c-tab-item" :class="{ 'v3c-active': tabActive == 7 }" @click="onHandleTab(7)">周</li>
<li class="v3c-tab-item" :class="{ 'v3c-active': tabActive == 6 }" @click="onHandleTab(6)">年</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>
<el-form-item>
<el-radio v-model="state.second.cronEvery" label="1"> 每一秒钟 </el-radio>
</el-form-item>
<!-- 每隔多久 -->
<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>
<el-form-item>
<el-radio v-model="state.second.cronEvery" :label="2">
从
<el-input-number type="number" :min="0" :max="59" v-model="state.second.incrementStart" />
秒开始，每 <el-input-number type="number" :min="1" :max="60" v-model="state.second.incrementIncrement" />
秒执行一次
</el-radio>
</el-form-item>
<!-- 周期 -->
<el-form-item>
<el-radio v-model="state.second.cronEvery" :label="4">
周期从
<el-input-number type="number" v-model="state.second.rangeStart" :min="1" :max="60" />
-
<el-input-number type="number" v-model="state.second.rangeEnd" :min="0" :max="59" />
秒
</el-radio>
</el-form-item>
<!-- 具体秒数 -->
<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>
<el-form-item>
<el-radio v-model="state.second.cronEvery" :label="3">
指定
<el-select clearable v-model="state.second.specificSpecific" placeholder="可多选" multiple style="width: 100%">
<el-option v-for="item in 60" :key="item" :value="item - 1">{{ item - 1 }}</el-option>
</el-select>
</el-radio>
</el-form-item>
</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>
<!-- 每一分 -->
<el-form-item>
<el-radio v-model="state.minute.cronEvery" label="1">分钟 允许的通配符[, - * /] </el-radio>
</el-form-item>
<!-- 每隔多久 -->
<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>
<el-form-item>
<el-radio v-model="state.minute.cronEvery" :label="2">
从
<el-input-number type="number" :min="0" :max="59" v-model="state.minute.incrementStart" />
分开始 每
<el-input-number type="number" :min="1" :max="60" v-model="state.minute.incrementIncrement" />
分执行一次
</el-radio>
</el-form-item>
<!-- 具体分钟数 -->
<el-form-item>
<el-radio v-model="state.minute.cronEvery" :label="4">
周期从
<el-input-number type="number" v-model="state.minute.rangeStart" :min="1" :max="60" />
-
<el-input-number type="number" v-model="state.minute.rangeEnd" :min="0" :max="59" />
分
</el-radio>
</el-form-item>
<!-- 具体分钟数 -->
<el-form-item>
<el-radio v-model="state.minute.cronEvery" :label="3">
指定
<el-select multiple v-model="state.minute.specificSpecific">
<el-option :value="index" v-for="(item, index) in 60" :key="index">{{ index }}</el-option>
</el-select>
</el-radio>
</el-form-item>
</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>
<!-- 小时 -->
<!-- 3.小时 -->
<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>
<!-- 每一小时 -->
<el-form-item>
<el-radio v-model="state.hour.cronEvery" label="1"> 小时 允许的通配符[, - * /]</el-radio>
</el-form-item>
<!-- 每隔多久小时 -->
<el-form-item>
<el-radio :label="2" v-model="state.hour.cronEvery">
从
<el-input-number type="number" :min="0" :max="59" v-model="state.hour.incrementStart" />
小时开始，每隔
<el-input-number type="number" :min="1" :max="60" v-model="state.hour.incrementIncrement" />
小时执行一次
</el-radio>
</el-form-item>
<!-- 周期 -->
<el-form-item>
<el-radio :label="4" v-model="state.hour.cronEvery">
周期从
<el-input-number type="number" v-model="state.hour.rangeStart" :min="1" :max="60" />
-
<el-input-number type="number" v-model="state.hour.rangeEnd" :min="0" :max="59" />
小时
</el-radio>
</el-form-item>
<!-- 具体小时数 -->
<el-form-item>
<el-radio :label="3" v-model="state.hour.cronEvery">
指定
<el-select multiple v-model="state.hour.specificSpecific">
<el-option :value="index" v-for="(item, index) in 60" :key="index">{{ index }}</el-option>
</el-select>
</el-radio>
</el-form-item>
</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>
<!-- 天 -->
<!-- 4.日 -->
<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>
<el-form-item>
<el-radio label="1" v-model="state.day.cronEvery"> 每天 </el-radio>
</el-form-item>
<!-- 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>
<el-form-item>
<el-radio label="2" v-model="state.day.cronEvery"> 不指定 </el-radio>
</el-form-item>
<!-- 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>
<el-form-item>
<el-radio label="3" v-model="state.day.cronEvery">
周期从
<el-input-number v-model="state.day.cycle01" :min="1" :max="30" /> -
<el-input-number v-model="state.day.cycle02" :min="state.day.cycle01 ? state.day.cycle01 + 1 : 2" :max="31" /> 日
</el-radio>
</el-form-item>
<!-- 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>
<el-form-item>
<el-radio label="4" v-model="state.day.cronEvery">
从
<el-input-number v-model="state.day.incrementStart" :min="1" :max="30" /> 号开始，每
<el-input-number v-model="state.day.incrementIncrement" :min="1" :max="31 - state.day.incrementStart || 1" /> 日执行一次
</el-radio>
</el-form-item>
<!-- 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>
<el-form-item>
<el-radio label="5" v-model="state.day.cronEvery">
最近的工作日(周一至周五)至本月
<el-input-number v-model="state.day.cronDaysNearestWeekday" :min="1" :max="31" />
日
</el-radio>
</el-form-item>
<!-- 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>
<el-form-item>
<el-radio label="6" v-model="state.day.cronEvery"> 在这个月的最后一天 </el-radio>
</el-form-item>
<!-- 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>
<el-form-item>
<el-radio label="7" v-model="state.day.cronEvery">
指定
<el-select multiple v-model="state.day.specificSpecific">
<el-option v-for="(val, index) in 31" :key="index" :value="val">
{{ val }}
</el-option>
</el-select>
</el-radio>
</el-form-item>
</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>
<!-- 7.周 -->
<div class="v3c-content" v-show="tabActive == 7">
<!-- 1 -->
<el-form-item>
<el-radio v-model="state.week.cronEvery" label="1"> 每周 </el-radio>
</el-form-item>
<!-- 2 -->
<el-form-item>
<el-radio v-model="state.week.cronEvery" label="2"> 不指定 </el-radio>
</el-form-item>
<!-- 3 -->
<el-form-item>
<el-radio v-model="state.week.cronEvery" label="3">
周期从星期
<el-select clearable v-model="state.week.cycle01" style="width: 100px">
<el-option v-for="(item, index) of weekList" :key="index" :label="item.value" :value="item.key" :disabled="item.key === 1">{{ item.value }}</el-option>
</el-select>
-
<el-select clearable v-model="state.week.cycle02" style="width: 100px">
<el-option v-for="(item, index) of weekList" :key="index" :label="item.value" :value="item.key" :disabled="item.key < state.week.cycle01 && item.key !== 1">
{{ item.value }}
</el-option>
</el-select>
</el-radio>
</el-form-item>
<!-- 4 -->
<el-form-item>
<el-radio v-model="state.week.cronEvery" label="4">
第
<el-input-number v-model="state.week.average01" :min="1" :max="4" /> 周的星期
<el-select clearable v-model="state.week.average02" style="width: 100px">
<el-option v-for="(item, index) of weekList" :key="index" :label="item.value" :value="item.key">{{ item.value }}</el-option>
</el-select>
</el-radio>
</el-form-item>
<!-- 5 -->
<el-form-item>
<el-radio v-model="state.week.cronEvery" label="5">
本月最后一个星期
<el-select clearable v-model="state.week.weekday" style="width: 100px">
<el-option v-for="(item, index) of weekList" :key="index" :label="item.value" :value="item.key">{{ item.value }}</el-option>
</el-select>
</el-radio>
</el-form-item>
<!-- 6 -->
<el-form-item>
<el-radio v-model="state.week.cronEvery" label="6">
指定
<el-select clearable v-model="state.week.specificSpecific" placeholder="可多选" multiple style="width: 100%">
<el-option v-for="(item, index) of weekList" :key="index" :label="item.value" :value="String(item.key)">{{ item.value }}</el-option>
</el-select>
</el-radio>
</el-form-item>
</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" />
&nbsp;
<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>
<!-- 月 -->
<!-- 5.月 -->
<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" />
从
<el-input-number type="number" v-model="state.month.incrementStart" :min="1" :max="11" />
月开始，每隔
<el-input-number type="number" v-model="state.month.incrementIncrement" :min="1" :max="12 - state.month.incrementStart || 0" />
月月执行一次
</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">
指定
<el-select multiple v-model="state.month.specificSpecific">
<el-option v-for="(val, index) in 12" :key="index" :value="val">
{{ val }}
</option>
</select>
</el-option>
</el-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" />
周期从
<el-input-number type="number" v-model="state.month.rangeStart" :min="1" :max="11" />
-
<el-input-number type="number" v-model="state.month.rangeEnd" :min="state.month.rangeStart ? state.month.rangeStart + 1 : 2" :max="12" />
月
</label>
</div>
</div>
<!-- 年 -->
<!-- 6.年 -->
<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>
从
<el-input-number type="number" v-model="state.year.incrementStart" :min="currYear" :max="currYear + 10" />
年开始，每
<el-input-number type="number" v-model="state.year.incrementIncrement" :min="1" :max="99" />
年执行一次
</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" />
周期从
<el-input-number type="number" v-model="state.year.rangeStart" :min="currYear + 1" :max="currYear + 10" />
-
<el-input-number type="number" v-model="state.year.rangeEnd" :min="state.year.rangeStart ? state.year.rangeStart + 1 : currYear + 1" :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" />
指定
<el-select multiple v-model="state.year.specificSpecific">
<el-option v-for="(val, index) in 100" :key="index" :value="currYear + val">
{{ currYear + val }}
</el-option>
</el-select>
</label>
</div>
</div>
<!-- 结果 -->
<div class="v3c-footer">
<div style="flex: 1">
CRON &nbsp;: &nbsp;&nbsp;<span class="cron">{{ state.cron }}</span>
&nbsp; &nbsp; &nbsp;
<button class="btn-ok" @click.stop="handleChange">{{ state.text.Save }}</button>
<fieldset>
<legend>Cron表达式</legend>
<span class="cron">{{ state.cron }}</span>
</fieldset>
</div>
<div class="v3c-footer">
<div>
<el-button size="small" type="primary" @click="handleChange">保存</el-button>
<el-button size="small" type="warning" @click="clearCron">重置</el-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 weekList = ref([
{
key: 2,
value: '星期一',
},
{
key: 3,
value: '星期二',
},
{
key: 4,
value: '星期三',
},
{
key: 5,
value: '星期四',
},
{
key: 6,
value: '星期五',
},
{
key: 7,
value: '星期六',
},
{
key: 1,
value: '星期日',
},
])
const state = reactive({
language: i18n.value,
second: {
cronEvery: '1',
incrementStart: 3,
@@ -395,9 +405,16 @@ export default defineComponent({
cronLastSpecificDomDay: 1,
cronDaysBeforeEomMinus: 0,
cronDaysNearestWeekday: 1,
cycle01: 1,
cycle02: 2,
},
week: {
cronEvery: '1',
cycle01: 2,
cycle02: 3,
average01: 1,
average02: 2,
weekday: 2,
incrementStart: 1,
incrementIncrement: 1,
specificSpecific: [],
@@ -429,7 +446,6 @@ export default defineComponent({
Week: '',
year: '',
},
text: computed(() => Language[state.language || 'cn']),
secondsText: computed(() => {
let seconds = ''
let cronEvery = state.second.cronEvery
@@ -501,26 +517,33 @@ export default defineComponent({
let cronEvery = state.day.cronEvery
switch (cronEvery.toString()) {
case '1':
days = '*'
break
case '2':
case '4':
case '11':
days = '?'
break
case '3':
days = state.day.incrementStart + '/' + state.day.incrementIncrement
const cycle01 = checkNumber(state.day.cycle01, 1, 30)
const cycle02 = checkNumber(state.day.cycle02, cycle01 ? cycle01 + 1 : 2, 31, 31)
days = cycle01 + '-' + cycle02
break
case '4':
const average01 = checkNumber(state.day.incrementStart, 1, 30)
const average02 = checkNumber(state.day.incrementIncrement, 1, 31 - average01 || 0)
days = average01 + '/' + average02
break
case '5':
state.day.specificSpecific.map((val) => {
days += val + ','
})
days = days.slice(0, -1)
days = state.day.cronDaysNearestWeekday + 'W'
break
case '6':
days = 'L'
break
case '7':
days = 'LW'
// days = 'LW'
state.day.specificSpecific.map((val) => {
days += val + ','
})
days = days.slice(0, -1)
break
case '8':
days = state.day.cronLastSpecificDomDay + 'L'
@@ -531,38 +554,43 @@ export default defineComponent({
case '10':
days = state.day.cronDaysNearestWeekday + 'W'
break
case '12':
days = '?'
break
}
return days
}),
weeksText: computed(() => {
let weeks = ''
let cronEvery = state.day.cronEvery
let cronEvery = state.week.cronEvery
if (cronEvery.toString() !== '2' && state.day.cronEvery !== '?') {
// state.daysText = '?'
// state.day.cronEvery = '2'
}
switch (cronEvery.toString()) {
case '1':
case '3':
case '5':
weeks = '?'
weeks = '*'
break
case '2':
weeks = state.week.incrementStart + '/' + state.week.incrementIncrement
weeks = '?'
break
case '3':
weeks = state.cycleTotal
break
case '4':
weeks = state.averageTotal
break
case '5':
weeks = state.week.weekday + 'L'
break
case '6':
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
}
console.log('weeks=' + weeks)
return weeks
}),
monthsText: computed(() => {
@@ -614,35 +642,50 @@ export default defineComponent({
state.yearsText || '*'
}`
}),
// 计算两个周期值
cycleTotal: computed(() => {
state.week.cycle01 = checkNumber(state.week.cycle01, 1, 7)
state.week.cycle02 = checkNumber(state.week.cycle02, 1, 7)
console.log('check', state.week)
return `${state.week.cycle01}-${state.week.cycle02}`
}),
// 计算平均用到的值
averageTotal: computed(() => {
state.week.average01 = checkNumber(state.week.average01, 1, 4)
state.week.average02 = checkNumber(state.week.average02, 1, 7)
return state.week.average02 + '#' + state.week.average01
}),
})
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 clearCron = () => {
state.second.cronEvery = '1'
state.minute.cronEvery = '1'
state.hour.cronEvery = '1'
state.day.cronEvery = '1'
state.month.cronEvery = '1'
state.week.cronEvery = '1'
state.year.cronEvery = '1'
}
// 表单选项的子组件校验数字格式（通过-props传递）
const checkNumber = (value, minLimit, maxLimit) => {
// 检查必须为整数
value = Math.floor(value)
if (value < minLimit) {
value = minLimit
} else if (value > maxLimit) {
value = maxLimit
}
return value
}
}
const tabActive = ref(1)
const currYear = new Date().getFullYear() - 1
const onHandleTab = (index) => {
tabActive.value = index
}
watch(
() => state.cron,
(value) => {
@@ -650,14 +693,15 @@ export default defineComponent({
emit('update:value', value)
},
)
return {
state,
handleChange,
rest,
tabActive,
onHandleTab,
currYear,
weekList,
onHandleTab,
handleChange,
clearCron,
checkNumber,
}
},
})
@@ -672,7 +716,7 @@ export default defineComponent({
padding: 0;
list-style: none;
margin: 0;
background-color: #f5f7fa;
/* background-color: #f5f7fa; */
display: flex;
}
@@ -706,10 +750,10 @@ export default defineComponent({
}
.v3c-footer {
background-color: #f5f7fa;
padding-top: 10px;
/* background-color: #f5f7fa; */
/* padding-top: 10px; */
padding-bottom: 10px;
display: flex;
/* display: flex; */
text-align: center;
}
@@ -790,18 +834,18 @@ export default defineComponent({
font-size: 14px;
border-radius: 2px;
color: #fff;
/*color: #fff;
background: #61ddaa;
border-color: #61ddaa;
border-color: #61ddaa; */
text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
box-shadow: 0 2px #0000000b;
}
.cron {
background-color: #61ddaa;
/* background-color: #61ddaa; */
padding: 5px;
padding-left: 10px;
padding-right: 10px;
color: #ffffff;
/* color: #ffffff; */
}
</style>
src/components/vue3-cron-core/language/cn.js
-53
View File
@@ -1,53 +0,0 @@
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:'生成'
}
src/components/vue3-cron-core/language/en.js
-53
View File
@@ -1,53 +0,0 @@
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',
}
src/components/vue3-cron-core/language/index.js
-9
View File
@@ -1,9 +0,0 @@
import en from './en'
import cn from './cn'
import pt from './pt_br'
export default {
en,
cn,
pt
}
src/components/vue3-cron-core/language/pt_br.js
-54
View File
@@ -1,54 +0,0 @@
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'
}