最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

环球热点评!Vue3项目-生成Cron表达式组件

来源:博客园

最近做的一个vue3项目过程中,需要用到cron表达式功能,而对于普通业务人员,他们是不懂cron表达式规则的,所以需要做一个可手动配置生成cron表达式的功能。从网上查找了一些相关资料,然后结合vue3+Element Plus,改造成适合自己项目的组件。记录代码如下:


(相关资料图)

1、components目录下新建 vue3Cron/Index.vue

src/components/vue3Cron/Index.vue

<script>import { reactive, computed, toRefs, defineComponent, ref, watch } from "vue";// (默认是每一分钟一次)export default defineComponent({  name: "Vue3Cron",  props: {    maxHeight: String,    change: Function,    value: String,  },  setup(props, { emit }) {    const weekList = ref([      { name: "星期日", value: "SUN", val: 1, },      { name: "星期一", value: "MON", val: 2, },      { name: "星期二", value: "TUE", val: 3, },      { name: "星期三", value: "WED", val: 4, },      { name: "星期四", value: "THU", val: 5, },      { name: "星期五", value: "FRI", val: 6, },      { name: "星期六", value: "SAT", val: 7, },    ])    const tabActive = ref(1);    const currYear = ref(new Date().getFullYear());    const onHandleTab = (index) => {      tabActive.value = index;    };    // (默认是每一分钟一次)    const state = reactive({      second: {        cronEvery: "1",        incrementStart: 0,        incrementIncrement: 1,        rangeStart: 0,        rangeEnd: 0,        specificSpecific: [],      },      minute: {        cronEvery: "1",        incrementStart: 0,        incrementIncrement: 1,        rangeStart: 0,        rangeEnd: 0,        specificSpecific: [],      },      hour: {        cronEvery: "1",        incrementStart: 1,        incrementIncrement: 1,        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: 1,        incrementIncrement: 1,        rangeStart: 1,        rangeEnd: 1,        specificSpecific: [],      },      year: {        cronEvery: "1",        incrementStart: new Date().getFullYear(),        incrementIncrement: 1,        rangeStart: new Date().getFullYear(),        rangeEnd: new Date().getFullYear(),        specificSpecific: [],      },      output: {        second: "",        minute: "",        hour: "",        day: "",        month: "",        Week: "",        year: "",      },      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 = "";        // TODO,目前先不指定年份,注释以下代码        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;          }        }      }    };    watch(      () => state.cron,      (value) => {        if (typeof state.cron !== "string") return;        emit("update:value", value);      }    );    return {      weekList,      state,      handleChange,      rest,      tabActive,      onHandleTab,      currYear,    };  },});</script>

2、业务代码中使用vue3Cron/Index.vue

<script setup>import { ref, reactive } from "vue";import { ElMessage } from "element-plus";import { ArrowDown } from "@element-plus/icons-vue"import cronParse from "cron-parser";import triggerApi from "@/api/triggerApi";import Vue3Cron from "@/components/vue3Cron/Index.vue";// 其他代码省略*******// 定义数据const isShowCronCore = ref(true); // 是否打开cron表达式配置框const submiting = ref(false);     // 是否正在提交中const formRef = ref(null);const formData = reactive({  // 表单数据  name: "", // 名称  logicConfig: "* * * * * ? *", // cron表达式});const changeCron = (val) => {  if (typeof val !== "string") return false;  formData.logicConfig = val;};
// 其他代码省略*******
</script>

3、效果

例如:勾选配置为:每天10:30执行一次,输入框显示的表达式如下

注:目前还没做根据表达式回显秒分时天月年的配置项的功能,其实也很简单,只需要稍加理解一下cron表达式的规则,然后逐一解析即可。另外实际项目中根据情况判断需不需要显示年的选项

附上cron表达式基本介绍:

1、Cron表达式是一个字符串,字符串以5或6个空格隔开,分为6或7个域,每一个域代表一个含义,Cron有如下两种语法格式:

(1)、秒 分 时 日 月 周 年

(2)、秒 分 时日 月 周

corn从左到右(用空格隔开):秒 分 小时 月份中的日期 月份 星期中的日期 年份

二、各字段的含义

字段允许值允许的特殊字符
秒(Seconds)0~59的整数, - * / 四个字符
分(Minutes0~59的整数, - * / 四个字符
小时(Hours0~23的整数, - * / 四个字符
日期(DayofMonth1~31的整数(但是你需要考虑你月的天数),- * ? / L W C 八个字符
月份(Month1~12的整数或者 JAN-DEC, - * / 四个字符
星期(DayofWeek1~7的整数或者 SUN-SAT (1=SUN), - * ? / L C # 八个字符
年(可选,留空)(Year1970~2099, - * / 四个字符

注意事项:

每一个域都使用数字,但还可以出现如下特殊字符,它们的含义是:

(1)*:表示匹配该域的任意值。假如在Minutes域使用*, 即表示每分钟都会触发事件。

(2)?:只能用在DayofMonth和DayofWeek两个域。它也匹配域的任意值,但实际不会。因为DayofMonth和DayofWeek会相互影响。例如想在每月的20日触发调度,不管20日到底是星期几,则只能使用如下写法: 13 13 15 20 * ?, 其中最后一位只能用?,而不能使用*,如果使用*表示不管星期几都会触发,实际上并不是这样。

(3)-:表示范围。例如在Minutes域使用5-20,表示从5分到20分钟每分钟触发一次

(4)/:表示起始时间开始触发,然后每隔固定时间触发一次。例如在Minutes域使用5/20,则意味着5分钟触发一次,而25,45等分别触发一次.

(5),:表示列出枚举值。例如:在Minutes域使用5,20,则意味着在5和20分每分钟触发一次。

(6)L:表示最后,只能出现在DayofWeek和DayofMonth域。如果在DayofWeek域使用5L,意味着在最后的一个星期四触发。

(7)W:表示有效工作日(周一到周五),只能出现在DayofMonth域,系统将在离指定日期的最近的有效工作日触发事件。例如:在 DayofMonth使用5W,如果5日是星期六,则将在最近的工作日:星期五,即4日触发。如果5日是星期天,则在6日(周一)触发;如果5日在星期一到星期五中的一天,则就在5日触发。另外一点,W的最近寻找不会跨过月份 。

(8)LW:这两个字符可以连用,表示在某个月最后一个工作日,即最后一个星期五。

(9)#:用于确定每个月第几个星期几,只能出现在DayofMonth域。例如在4#2,表示某月的第二个星期三。

三、常用表达式例子

(1)0 0 2 1 * ? *表示在每月的1日的凌晨2点调整任务

(2)0 15 10 ? * MON-FRI表示周一到周五每天上午10:15执行作业

(3)0 15 10 ? 6L 2002-2006表示2002-2006年的每个月的最后一个星期五上午10:15执行作

(4)0 0 10,14,16 * * ?每天上午10点,下午2点,4点

(5)0 0/30 9-17 * * ?朝九晚五工作时间内每半小时

(6)0 0 12 ? * WED表示每个星期三中午12点

(7)0 0 12 * * ?每天中午12点触发

(8)0 15 10 ? * * 每天上午10:15触发

(9)0 15 10 * * ?每天上午10:15触发

(10)0 15 10 * * ? *每天上午10:15触发

(11)0 15 10 * * ? 20052005年的每天上午10:15触发

(12)0 * 14 * * ?在每天下午2点到下午2:59期间的每1分钟触发

(13)0 0/5 14 * * ?在每天下午2点到下午2:55期间的每5分钟触发

(14)0 0/5 14,18 * * ?在每天下午2点到2:55期间和下午6点到6:55期间的每5分钟触发

(15)0 0-5 14 * * ?在每天下午2点到下午2:05期间的每1分钟触发

(16)0 10,44 14 ? 3 WED每年三月的星期三的下午2:10和2:44触发

(17)0 15 10 ? * MON-FRI周一至周五的上午10:15触发

(18)0 15 10 15 * ?每月15日上午10:15触发

(19)0 15 10 L * ?每月最后一日的上午10:15触发

(20)0 15 10 ? * 6L每月的最后一个星期五上午10:15触发

(21)0 15 10 ? * 6L 2002-20052002年至2005年的每月的最后一个星期五上午10:15触发

(22)0 15 10 ? * 6#3每月的第三个星期五上午10:15触发

注:

(1)有些子表达式能包含一些范围或列表

例如:子表达式(天(星期))可以为 “MON-FRI”,“MON,WED,FRI”,“MON-WED,SAT”

“*”字符代表所有可能的值

因此,“*”在子表达式(月)里表示每个月的含义,“*”在子表达式(天(星期))表示星期的每一天

“/”字符用来指定数值的增量  例如:在子表达式(分钟)里的“0/15”表示从第0分钟开始,每15分钟在子表达式(分钟)里的“3/20”表示从第3分钟开始,每20分钟(它和“3,23,43”)的含义一样

“?”字符仅被用于天(月)和天(星期)两个子表达式,表示不指定值  当2个子表达式其中之一被指定了值以后,为了避免冲突,需要将另一个子表达式的值设为“?”

“L” 字符仅被用于天(月)和天(星期)两个子表达式,它是单词“last”的缩写  但是它在两个子表达式里的含义是不同的。  在天(月)子表达式中,“L”表示一个月的最后一天  在天(星期)自表达式中,“L”表示一个星期的最后一天,也就是SAT

如果在“L”前有具体的内容,它就具有其他的含义了

例如:“6L”表示这个月的倒数第6天,“FRIL”表示这个月的最一个星期五  注意:在使用“L”参数时,不要指定列表或范围,因为这会导致问题

关键词: 子表达式 一个星期 触发一次