vue3的CRON表達(dá)式組件用法解讀
更新時間：2026年01月15日 09:27:11 作者：沒頭腦和不高興y
該文檔介紹了Cron表達(dá)式生成器的使用說明,該組件通過圖形化界面幫助用戶配置定時任務(wù)的執(zhí)行計劃,支持秒、分鐘、小時、日、月、周等時間單位的靈活配置,并實時計算并顯示最近5次執(zhí)行時間
Cron 表達(dá)式生成器使用說明文檔
功能概述
本組件是一個可視化 Cron 表達(dá)式生成器，用于幫助用戶通過圖形化界面配置定時任務(wù)的執(zhí)行計劃。
支持秒、分鐘、小時、日、月、周等時間單位的靈活配置，并實時計算顯示最近5次執(zhí)行時間。支持編輯和回顯
主要功能
1. 時間單位配置
- 秒：支持每秒、周期范圍、間隔執(zhí)行和指定秒數(shù)
- 分鐘：支持每分鐘、周期范圍、間隔執(zhí)行和指定分鐘數(shù)
- 小時：支持每小時、周期范圍、間隔執(zhí)行和指定小時數(shù)
- 日：支持每日、不指定、周期范圍、間隔執(zhí)行、工作日、月末和指定日期
- 月：支持每月、不指定、周期范圍、間隔執(zhí)行和指定月份
- 周：支持每周、不指定、周期范圍、間隔執(zhí)行、月末周和指定星期
2. 實時預(yù)覽
- 實時生成并顯示 Cron 表達(dá)式
- 自動計算并顯示最近5次執(zhí)行時間
使用說明
基本操作
- 通過頂部標(biāo)簽頁切換不同時間單位
- 選擇對應(yīng)的時間配置方式（單選按鈕）
- 根據(jù)選擇的配置方式填寫具體參數(shù)
- 系統(tǒng)自動生成 Cron 表達(dá)式并顯示執(zhí)行時間
配置選項說明
秒配置
- 每秒：任務(wù)每秒執(zhí)行一次
- 周期從...到...秒：在指定秒數(shù)范圍內(nèi)執(zhí)行
- 周期從...秒開始，每...秒執(zhí)行一次：從指定秒數(shù)開始，按間隔執(zhí)行
- 指定秒數(shù)：勾選具體的秒數(shù)執(zhí)行
分鐘配置
- 每分鐘：任務(wù)每分鐘執(zhí)行一次
- 周期從...到...分鐘：在指定分鐘范圍內(nèi)執(zhí)行
- 周期從...分鐘開始，每...分鐘執(zhí)行一次：從指定分鐘開始，按間隔執(zhí)行
- 指定分鐘數(shù)：勾選具體的分鐘數(shù)執(zhí)行
小時配置
- 每小時：任務(wù)每小時執(zhí)行一次
- 周期從...到...小時：在指定小時范圍內(nèi)執(zhí)行
- 周期從...小時開始，每...小時執(zhí)行一次：從指定小時開始，按間隔執(zhí)行
- 指定小時數(shù)：勾選具體的小時數(shù)執(zhí)行
日配置
- 每日：任務(wù)每天執(zhí)行一次
- 不指定：不指定具體日期
- 周期從...到...日：在指定日期范圍內(nèi)執(zhí)行
- 周期從...日開始，每...日執(zhí)行一次：從指定日期開始，按間隔執(zhí)行
- 每月...號最近的那個工作日：指定日期最近的工作日執(zhí)行
- 本月最后一天：每月最后一天執(zhí)行
- 指定日期：勾選具體的日期執(zhí)行
月配置
- 每月：任務(wù)每月執(zhí)行一次
- 不指定：不指定具體月份
- 周期從...到...月：在指定月份范圍內(nèi)執(zhí)行
- 周期從...月開始，每...月執(zhí)行一次：從指定月份開始，按間隔執(zhí)行
- 指定月份：勾選具體的月份執(zhí)行
周配置
- 每周：任務(wù)每周執(zhí)行一次
- 不指定：不指定具體星期
- 周期從星期...到星期...：在指定星期范圍內(nèi)執(zhí)行
- 第...周的星期...：指定某周的某天執(zhí)行
- 本月最后一個星期...：每月最后一個指定星期執(zhí)行
- 指定星期：勾選具體的星期執(zhí)行
技術(shù)實現(xiàn)
核心功能
- 使用
cron-parser庫解析和計算 Cron 表達(dá)式 - 使用
dayjs處理日期時間格式化 - 基于 Vue 3 的 Composition API 實現(xiàn)響應(yīng)式邏輯
- 使用 Element Plus 組件庫構(gòu)建 UI
數(shù)據(jù)流
用戶通過界面配置時間參數(shù)
組件內(nèi)部將配置轉(zhuǎn)換為標(biāo)準(zhǔn) Cron 表達(dá)式
通過 v-model 將表達(dá)式傳遞給父組件
同時計算并顯示最近5次執(zhí)行時間
<template>
<div style="width: 700px; margin: 0 auto; padding: 20px" class="cron-selector">
<el-tabs v-model="activeTab" type="border-card" :lazy="true">
<el-tab-pane name="秒" label="秒">
<el-radio-group @change="() => resetRadioValues('second')" v-model="secondRadio">
<el-radio value="1" size="large">每秒 允許的通配符[,-*/]</el-radio>
<el-radio value="2" size="large">
<template #default>
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">周期從</span>
<el-input v-model="secondStart1" style="width: 60px; margin-right: 8px" />
<span style="margin-right: 8px">到</span>
<el-input v-model="secondEnd1" style="width: 60px; margin-right: 8px" />
<span>秒</span>
</div>
</template>
</el-radio>
<el-radio value="3" size="large">
<template #default>
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">周期從</span>
<el-input v-model="secondStart2" style="width: 60px; margin-right: 8px" />
<span style="margin-right: 8px">秒開始，每</span>
<el-input v-model="secondEnd2" style="width: 60px; margin-right: 8px" />
<span>秒執(zhí)行一次</span>
</div>
</template>
</el-radio>
<el-radio value="4" size="large">
<template #default>
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">指定</span>
<el-checkbox-group :disabled="secondRadio !== '4'" v-model="checkSeconds">
<el-checkbox
v-for="(item, index) in secondList"
:label="item"
:value="item"
:key="index"
/>
</el-checkbox-group>
</div>
</template>
</el-radio>
</el-radio-group>
</el-tab-pane>
<el-tab-pane name="分鐘" label="分鐘">
<el-radio-group @change="() => resetRadioValues('minutes')" v-model="minutesRadio">
<el-radio value="1" size="large">每分鐘 允許的通配符[,-*/]</el-radio>
<el-radio value="2" size="large">
<template #default>
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">周期從</span>
<el-input v-model="minutesStart1" style="width: 60px; margin-right: 8px" />
<span style="margin-right: 8px">到</span>
<el-input v-model="minutesEnd1" style="width: 60px; margin-right: 8px" />
<span>分鐘</span>
</div>
</template>
</el-radio>
<el-radio value="3" size="large">
<template #default>
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">周期從</span>
<el-input v-model="minutesStart2" style="width: 60px; margin-right: 8px" />
<span style="margin-right: 8px">分鐘開始，每</span>
<el-input v-model="minutesEnd2" style="width: 60px; margin-right: 8px" />
<span>分鐘執(zhí)行一次</span>
</div>
</template>
</el-radio>
<el-radio value="4" size="large">
<template #default>
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">指定</span>
<el-checkbox-group v-model="checkMinutes" :disabled="minutesRadio !== '4'">
<el-checkbox
v-for="(item, index) in minuteList"
:label="item"
:value="item"
:key="index"
/>
</el-checkbox-group>
</div>
</template>
</el-radio>
</el-radio-group>
</el-tab-pane>
<el-tab-pane name="小時" label="小時">
<el-radio-group @change="() => resetRadioValues('hour')" v-model="hourRadio">
<el-radio value="1" size="large">每小時 允許的通配符[,-*/]</el-radio>
<el-radio value="2" size="large">
<template #default>
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">周期從</span>
<el-input v-model="hourStart1" style="width: 60px; margin-right: 8px" />
<span style="margin-right: 8px">到</span>
<el-input v-model="hourEnd1" style="width: 60px; margin-right: 8px" />
<span>小時</span>
</div>
</template>
</el-radio>
<el-radio value="3" size="large">
<template #default>
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">周期從</span>
<el-input v-model="hourStart2" style="width: 60px; margin-right: 8px" />
<span style="margin-right: 8px">小時開始，每</span>
<el-input v-model="hourEnd2" style="width: 60px; margin-right: 8px" />
<span>小時執(zhí)行一次</span>
</div>
</template>
</el-radio>
<el-radio value="4" size="large">
<template #default>
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">指定</span>
<el-checkbox-group v-model="checkHour" :disabled="hourRadio !== '4'">
<el-checkbox
v-for="(item, index) in hourList"
:label="item"
:value="item"
:key="index"
/>
</el-checkbox-group>
</div>
</template>
</el-radio>
</el-radio-group>
</el-tab-pane>
<el-tab-pane name="日" label="日">
<el-radio-group @change="() => resetRadioValues('day')" v-model="dayRadio">
<el-radio value="1" size="large">每日 允許的通配符[,-*/]</el-radio>
<el-radio value="2" size="large">不指定</el-radio>
<el-radio value="3" size="large">
<template #default>
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">周期從</span>
<el-input v-model="dayStart1" style="width: 60px; margin-right: 8px" />
<span style="margin-right: 8px">到</span>
<el-input v-model="dayEnd1" style="width: 60px; margin-right: 8px" />
<span>日</span>
</div>
</template>
</el-radio>
<el-radio value="4" size="large">
<template #default>
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">周期從</span>
<el-input v-model="dayStart2" style="width: 60px; margin-right: 8px" />
<span style="margin-right: 8px">日開始，每</span>
<el-input v-model="dayEnd2" style="width: 60px; margin-right: 8px" />
<span>日執(zhí)行一次</span>
</div>
</template>
</el-radio>
<el-radio value="5" size="large">
<template #default>
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">每月</span>
<el-input v-model="day" style="width: 60px; margin-right: 8px" />
<span>號最近的那個工作日</span>
</div>
</template>
</el-radio>
<el-radio value="6" size="large">本月最后一天</el-radio>
<el-radio value="7" size="large">
<template #default>
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">指定</span>
<el-checkbox-group v-model="checkDay" :disabled="dayRadio !== '7'">
<el-checkbox
v-for="(item, index) in dayList"
:label="item"
:value="item"
:key="index"
/>
</el-checkbox-group>
</div>
</template>
</el-radio>
</el-radio-group>
</el-tab-pane>
<el-tab-pane name="月" label="月">
<el-radio-group @change="() => resetRadioValues('month')" v-model="monthRadio">
<el-radio value="1" size="large">每月 允許的通配符[,-*/]</el-radio>
<el-radio value="2" size="large">不指定</el-radio>
<el-radio value="3" size="large">
<template #default>
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">周期從</span>
<el-input v-model="monthStart1" style="width: 60px; margin-right: 8px" />
<span style="margin-right: 8px">到</span>
<el-input v-model="monthEnd1" style="width: 60px; margin-right: 8px" />
<span>月</span>
</div>
</template>
</el-radio>
<el-radio value="4" size="large">
<template #default>
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">周期從</span>
<el-input v-model="monthStart2" style="width: 60px; margin-right: 8px" />
<span style="margin-right: 8px">月開始，每</span>
<el-input v-model="monthEnd2" style="width: 60px; margin-right: 8px" />
<span>月執(zhí)行一次</span>
</div>
</template>
</el-radio>
<el-radio value="5" size="large">
<template #default>
<div style="display: flex; align-items: center">
<span style="margin-right: 8px;x">指定</span>
<el-checkbox-group
style="margin-top: 10px"
:disabled="monthRadio !== '5'"
v-model="selectedMonth"
>
<el-checkbox
v-for="(item, index) in monthList"
:label="item"
:value="item"
:key="index"
/>
</el-checkbox-group>
</div>
</template>
</el-radio>
</el-radio-group>
</el-tab-pane>
<el-tab-pane name="周" label="周">
<el-radio-group @change="() => resetRadioValues('week')" v-model="weekRadio">
<el-radio value="1" size="large">每周 允許的通配符[,-*/]</el-radio>
<el-radio value="2" size="large">不指定</el-radio>
<el-radio value="3" size="large">
<template #default>
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">周期從星期</span>
<el-input v-model="weekStart1" style="width: 60px; margin-right: 8px" />
<span style="margin-right: 8px">到星期</span>
<el-input v-model="weekEnd1" style="width: 60px; margin-right: 8px" />
</div>
</template>
</el-radio>
<el-radio value="4" size="large">
<template #default>
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">第</span>
<el-input v-model="weekStart2" style="width: 60px; margin-right: 8px" />
<span style="margin-right: 8px">周的星期</span>
<el-input v-model="weekEnd2" style="width: 60px; margin-right: 8px" />
</div>
</template>
</el-radio>
<el-radio value="5" size="large">
<template #default>
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">本月最后一個星期</span>
<el-input v-model="week" style="width: 60px; margin-right: 8px" />
</div>
</template>
</el-radio>
<el-radio value="6" size="large">
<template #default>
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">指定</span>
<el-checkbox-group v-model="selectedWeek" :disabled="weekRadio !== '6'">
<el-checkbox
v-for="(item, index) in weekList"
:label="item"
:value="item"
:key="index"
style="margin-bottom: 0"
/>
</el-checkbox-group>
</div>
</template>
</el-radio>
</el-radio-group>
</el-tab-pane>
<!-- <el-tab-pane name="年" label="年">
<el-radio-group @change="() => resetRadioValues('year')" v-model="yearRadio">
<el-radio value="1" size="large">不指定 允許的通配符[, - * /]</el-radio>
<el-radio value="2" size="large">每年</el-radio>
<el-radio value="3" size="large">
<template #default>
<div style="display: flex; align-items: center">
<span style="margin-right: 8px">周期從</span>
<el-input v-model="yearStart" style="width: 60px; margin-right: 8px" />
<span style="margin-right: 8px">到</span>
<el-input v-model="yearEnd" style="width: 60px; margin-right: 8px" />
</div>
</template>
</el-radio>
</el-radio-group>
</el-tab-pane> -->
</el-tabs>
<!-- 添加最近運行時間展示區(qū)域 -->
<div class="next-runs" v-if="nextRuns.length > 0">
<h4>最近5次運行時間:</h4>
<ul>
<li v-for="(run, index) in nextRuns" :key="index">{{ run }}</li>
</ul>
</div>
</div>
</template>
<script setup>
import { reactive, ref, watch, watchEffect } from 'vue'
import cronParser from 'cron-parser'
import dayjs from 'dayjs'
import { onMounted } from 'vue'
const props = defineProps({
modelValue: {
type: String,
default: ''
}
})
const activeTab = ref('秒')
const emit = defineEmits(['update:modelValue'])
const ruleFormRef = ref()
const ruleForm = ref({})
const pad = (n) => n.toString().padStart(2, '0')
const secondList = new Array(60).fill(0).map((_, index) => {
return pad(index)
})
const hourList = new Array(24).fill(0).map((_, index) => {
return pad(index)
})
const weekList = new Array(7).fill(0).map((_, index) => {
return pad(index + 1)
})
const dayList = new Array(31).fill(0).map((_, index) => {
return pad(index + 1) // 修改為從1開始，生成01,02,...31
})
const month = new Array(12).fill(0).map((_, index) => {
return pad(index + 1)
})
const minuteList = new Array(60).fill(0).map((_, index) => {
return pad(index)
})
const monthList = new Array(12).fill(0).map((_, index) => {
return pad(index + 1)
})
// 秒選框
const secondRadio = ref('1')
const secondStart1 = ref(1)
const secondEnd1 = ref(2)
const secondStart2 = ref(0)
const secondEnd2 = ref(1)
// 分鐘選框
const minutesRadio = ref('1')
const minutesStart1 = ref(1)
const minutesEnd1 = ref(2)
const minutesStart2 = ref(0)
const minutesEnd2 = ref(1)
// 小時選框
const hourRadio = ref('1')
const hourStart1 = ref(1)
const hourEnd1 = ref(2)
const hourStart2 = ref(0)
const hourEnd2 = ref(1)
// 日選框
// 日選框默認(rèn)值修改
const dayRadio = ref('1')
const dayStart1 = ref(1) // 原值1保持不變
const dayEnd1 = ref(31) // 改為31
const dayStart2 = ref(1) // 原值1保持不變
const dayEnd2 = ref(1) // 原值1保持不變
const day = ref(1) // 原值1保持不變
// 月選框
const monthRadio = ref('1')
const monthStart1 = ref(1)
const monthEnd1 = ref(2)
const monthStart2 = ref(1)
const monthEnd2 = ref(1)
// 周選框
const weekRadio = ref('2')
const weekStart1 = ref(1)
const weekEnd1 = ref(2)
const weekStart2 = ref(1)
const weekEnd2 = ref(1)
const week = ref('')
// 年
const yearRadio = ref('1')
const yearStart = ref('')
const yearEnd = ref('')
const checkSeconds = ref([])
const checkMinutes = ref([])
const checkHour = ref([])
const checkDay = ref([])
const selectedMonth = ref([])
const selectedWeek = ref([])
const fieldVal = ref({
second: '*',
minutes: '*',
hour: '*',
day: '*',
month: '*',
week: '?'
})
const resetRadioValues = (field) => {
switch (field) {
case 'second':
secondStart1.value = 1
secondEnd1.value = 2
secondStart2.value = 0
secondEnd2.value = 1
checkSeconds.value = []
break
case 'minutes':
minutesStart1.value = 1
minutesEnd1.value = 2
minutesStart2.value = 0
minutesEnd2.value = 1
checkMinutes.value = []
break
case 'hour':
hourStart1.value = 1
hourEnd1.value = 2
hourStart2.value = 0
hourEnd2.value = 1
checkHour.value = []
break
case 'day':
dayStart1.value = 1
dayEnd1.value = 2
dayStart2.value = 1
dayEnd2.value = 1
day.value = 1
checkDay.value = []
break
case 'month':
monthStart1.value = 1
monthEnd1.value = 2
monthStart2.value = 1
monthEnd2.value = 1
selectedMonth.value = []
break
case 'week':
weekStart1.value = 1
weekEnd1.value = 2
weekStart2.value = 1
weekEnd2.value = 1
week.value = ''
selectedWeek.value = []
break
case 'year':
yearStart.value = ''
yearEnd.value = ''
break
}
}
watchEffect(() => {
// 秒
if (secondRadio.value == '1') {
resetRadioValues('second')
fieldVal.value.second = '*'
} else if (secondRadio.value == '2') {
fieldVal.value.second = `${secondStart1.value}-${secondEnd1.value}`
} else if (secondRadio.value == '3') {
fieldVal.value.second = `${secondStart2.value}/${secondEnd2.value}`
} else if (secondRadio.value == '4') {
const list = checkSeconds.value.map((v) => parseInt(v))
list.sort((a, b) => a - b)
fieldVal.value.second = list.join(',')
}
// 分
if (minutesRadio.value == '1') {
resetRadioValues('minutes')
fieldVal.value.minutes = '*'
} else if (minutesRadio.value == '2') {
fieldVal.value.minutes = `${minutesStart1.value}-${minutesEnd1.value}`
} else if (minutesRadio.value == '3') {
fieldVal.value.minutes = `${minutesStart2.value}/${minutesEnd2.value}`
} else if (minutesRadio.value == '4') {
const list = checkMinutes.value.map((v) => parseInt(v))
list.sort((a, b) => a - b)
fieldVal.value.minutes = list.join(',')
}
// 時
if (hourRadio.value == '1') {
resetRadioValues('hour')
fieldVal.value.hour = '*'
} else if (hourRadio.value == '2') {
fieldVal.value.hour = `${hourStart1.value}-${hourEnd1.value}`
} else if (hourRadio.value == '3') {
fieldVal.value.hour = `${hourStart2.value}/${hourEnd2.value}`
} else if (hourRadio.value == '4') {
const list = checkHour.value.map((v) => parseInt(v))
list.sort((a, b) => a - b)
fieldVal.value.hour = list.join(',')
}
// 日
switch (dayRadio.value) {
case '1':
fieldVal.value.day = '*'
break
case '2':
fieldVal.value.day = '?'
break
case '3':
fieldVal.value.day = `${dayStart1.value}-${dayEnd1.value}`
break
case '4':
fieldVal.value.day = `${dayStart2.value}/${dayEnd2.value}`
break
case '5':
fieldVal.value.day = `${day.value}W`
break
case '6':
fieldVal.value.day = `L`
break
case '7':
const list = checkDay.value.map((v) => parseInt(v))
list.sort((a, b) => a - b)
fieldVal.value.day = list.join(',')
break
}
// 月
switch (monthRadio.value) {
case '1':
fieldVal.value.month = '*'
break
case '2':
fieldVal.value.month = '?'
break
case '3':
fieldVal.value.month = `${monthStart1.value}-${monthEnd1.value}`
break
case '4':
fieldVal.value.month = `${monthStart2.value}/${monthEnd2.value}`
break
case '5':
const list = selectedMonth.value.map((v) => parseInt(v))
list.sort((a, b) => a - b)
fieldVal.value.month = list.join(',')
break
}
// 周
switch (weekRadio.value) {
case '1':
fieldVal.value.week = '*'
break
case '2':
fieldVal.value.week = '?'
break
case '3':
fieldVal.value.week = `${weekStart1.value}-${weekEnd1.value}`
break
case '4':
fieldVal.value.week = `${weekStart2.value}/${weekEnd2.value}`
break
case '5':
fieldVal.value.week = `${week.value}L`
break
case '6':
const list = selectedWeek.value.map((v) => parseInt(v))
list.sort((a, b) => a - b)
fieldVal.value.week = list.join(',')
break
}
switch (yearRadio.value) {
case '1':
fieldVal.value.year = ''
break
case '2':
fieldVal.value.year = '*'
break
case '3':
fieldVal.value.year = `${yearStart.value}-${yearEnd.value}`
break
}
})
// 移除mounted中的強制設(shè)置
onMounted(() => {
console.log('activeTab value:', activeTab.value)
// 移除這行強制設(shè)置
// activeTab.value = '秒'
})
// 在解析方法中添加activeTab自動切換邏輯
const parseField = (value, field, radioRef, checkRef, start1Ref, end1Ref, start2Ref, end2Ref) => {
// 新增字段類型映射
const fieldMap = {
second: '秒',
minutes: '分鐘',
hour: '小時',
day: '日',
month: '月',
week: '周',
year: '年'
}
// 在解析時自動切換tab
// if (value !== '*' && value !== '?') {
// activeTab.value = fieldMap[field]
// }
if (value === '*') {
radioRef.value = '1'
checkRef.value = []
} else if (value.includes('-')) {
radioRef.value = '2'
const [start, end] = value.split('-')
start1Ref.value = parseInt(start)
end1Ref.value = parseInt(end)
} else if (value.includes('/')) {
radioRef.value = '3'
const [start, end] = value.split('/')
start2Ref.value = parseInt(start)
end2Ref.value = parseInt(end)
} else if (value.includes(',')) {
radioRef.value = '4'
checkRef.value = value.split(',').map((v) => pad(parseInt(v)))
} else {
// 新增單個數(shù)值處理
radioRef.value = '4'
checkRef.value = [pad(parseInt(value))]
}
}
// 添加解析日字段的特殊處理
const parseDayField = (
value,
radioRef,
checkRef,
start1Ref,
end1Ref,
start2Ref,
end2Ref,
dayRef
) => {
if (value === '*') {
radioRef.value = '1'
} else if (value === '?') {
radioRef.value = '2'
} else if (value.includes('-')) {
radioRef.value = '3'
const [start, end] = value.split('-')
start1Ref.value = parseInt(start)
end1Ref.value = parseInt(end)
} else if (value.includes('/')) {
radioRef.value = '4'
const [start, end] = value.split('/')
start2Ref.value = parseInt(start)
end2Ref.value = parseInt(end)
} else if (value.endsWith('W')) {
radioRef.value = '5'
dayRef.value = parseInt(value.replace('W', ''))
} else if (value === 'L') {
radioRef.value = '6'
} else if (value.includes(',')) {
radioRef.value = '7'
checkRef.value = value.split(',').map((v) => pad(parseInt(v)))
} else {
// 新增單個數(shù)值處理
radioRef.value = '7'
checkRef.value = [pad(parseInt(value))]
}
}
// 添加解析周字段的特殊處理
const parseWeekField = (
value,
radioRef,
checkRef,
start1Ref,
end1Ref,
start2Ref,
end2Ref,
weekRef
) => {
if (value === '*') {
radioRef.value = '1'
} else if (value === '?') {
radioRef.value = '2'
} else if (value.includes('-')) {
radioRef.value = '3'
const [start, end] = value.split('-')
start1Ref.value = parseInt(start)
end1Ref.value = parseInt(end)
} else if (value.includes('/')) {
radioRef.value = '4'
const [start, end] = value.split('/')
start2Ref.value = parseInt(start)
end2Ref.value = parseInt(end)
} else if (value.endsWith('L')) {
radioRef.value = '5'
weekRef.value = value.replace('L', '')
} else if (value.includes(',')) {
radioRef.value = '6'
checkRef.value = value.split(',').map((v) => pad(parseInt(v)))
} else {
// 新增單個數(shù)值處理
radioRef.value = '6'
checkRef.value = [pad(parseInt(value))]
}
}
const cron = ref('')
// 修改watch部分
// watch(
// () => fieldVal.value,
// (newVal) => {
// const { second, minutes, hour, day, month, week } = newVal
// // 只使用前6個標(biāo)準(zhǔn)字段
// const cronValue = `${second} ${minutes} ${hour} ${day} ${month} ${week}`
// cron.value = cronValue
// emit('update:modelValue', cronValue)
// },
// { immediate: true, deep: true }
// )
let isInternalUpdate = false
// 添加初始化方法，解析傳入的cron表達(dá)式
watch(
() => props.modelValue,
(newVal, oldVal) => {
if (isInternalUpdate) {
isInternalUpdate = false
return
}
if (newVal && newVal !== oldVal) {
nextTick(() => {
setTimeout(() => {
console.log('newVal', newVal)
try {
const parts = newVal.split(' ')
if (parts.length >= 6) {
clear(false)
// 解析秒
parseField(
parts[0],
'second',
secondRadio,
checkSeconds,
secondStart1,
secondEnd1,
secondStart2,
secondEnd2
)
// 解析分鐘
parseField(
parts[1],
'minutes',
minutesRadio,
checkMinutes,
minutesStart1,
minutesEnd1,
minutesStart2,
minutesEnd2
)
// 解析小時
parseField(
parts[2],
'hour',
hourRadio,
checkHour,
hourStart1,
hourEnd1,
hourStart2,
hourEnd2
)
// 解析日
parseDayField(
parts[3],
dayRadio,
checkDay,
dayStart1,
dayEnd1,
dayStart2,
dayEnd2,
day
)
// 解析月
parseField(
parts[4],
'month',
monthRadio,
selectedMonth,
monthStart1,
monthEnd1,
monthStart2,
monthEnd2
)
// 解析周
parseWeekField(
parts[5],
weekRadio,
selectedWeek,
weekStart1,
weekEnd1,
weekStart2,
weekEnd2,
week
)
// 最后設(shè)置activeTab
const priorityFields = [
{ index: 0, tab: '秒' },
{ index: 1, tab: '分鐘' },
{ index: 2, tab: '小時' },
{ index: 3, tab: '日' },
{ index: 4, tab: '月' },
{ index: 5, tab: '周' }
]
const firstNonDefault = priorityFields.find(
({ index }) => parts[index] !== '*' && parts[index] !== '?'
)
activeTab.value = firstNonDefault?.tab || '秒'
}
} catch (e) {
console.error('解析Cron表達(dá)式出錯:', e)
}
}, 200)
})
}
},
{ immediate: true }
)
// 添加計算最近運行時間的函數(shù)
const nextRuns = ref([])
const calculateNextRuns = async () => {
try {
if (!cron.value || cron.value.trim() === '') {
nextRuns.value = ['請先配置有效的Cron表達(dá)式']
return
}
const parser = cronParser.default || cronParser
const interval = parser.parse(cron.value, {
currentDate: new Date(),
endDate: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000)
})
const runs = []
for (let i = 0; i < 5; i++) {
try {
const nextDate = interval.next().toDate()
// 使用dayjs格式化日期
const formattedDate = dayjs(nextDate).format('YYYY-MM-DD HH:mm:ss')
runs.push(formattedDate)
} catch (e) {
break
}
}
nextRuns.value = runs.length > 0 ? runs : ['無有效執(zhí)行時間']
} catch (e) {
console.error('解析Cron表達(dá)式出錯:', e)
nextRuns.value = [`無效的Cron表達(dá)式: ${cron.value}`]
}
}
// 修改watch部分，使其成為異步函數(shù)
watch(
() => fieldVal.value,
async (newVal) => {
isInternalUpdate = true
const { second, minutes, hour, day, month, week, year } = newVal
const cronValue = `${second} ${minutes} ${hour} ${day} ${month} ${week} ${year}`
cron.value = cronValue
emit('update:modelValue', cronValue)
await calculateNextRuns()
},
{ immediate: true, deep: true }
)
const clear = (resetRadio = true) => {
// 僅在需要重置radio時修改activeTab
if (resetRadio) {
activeTab.value = '秒'
}
// 重置所有radio選項為默認(rèn)值
secondRadio.value = '1'
minutesRadio.value = '1'
hourRadio.value = '1'
dayRadio.value = '1'
monthRadio.value = '1'
weekRadio.value = '2'
yearRadio.value = '1'
// 清空所有checkbox選擇
checkSeconds.value = []
checkMinutes.value = []
checkHour.value = []
checkDay.value = []
selectedMonth.value = []
selectedWeek.value = []
// 重置所有輸入框為默認(rèn)值
secondStart1.value = 1
secondEnd1.value = 2
secondStart2.value = 0
secondEnd2.value = 1
minutesStart1.value = 1
minutesEnd1.value = 2
minutesStart2.value = 0
minutesEnd2.value = 1
hourStart1.value = 1
hourEnd1.value = 2
hourStart2.value = 0
hourEnd2.value = 1
dayStart1.value = 1
dayEnd1.value = 2
dayStart2.value = 1
dayEnd2.value = 1
day.value = 1
monthStart1.value = 1
monthEnd1.value = 2
monthStart2.value = 1
monthEnd2.value = 1
weekStart1.value = 1
weekEnd1.value = 2
weekStart2.value = 1
weekEnd2.value = 1
week.value = ''
yearStart.value = ''
yearEnd.value = ''
}
// watch(activeTab, () => {
// clear(false) // 傳入false不清空radio選項，只清空輸入值和checkbox
// })
// 暴露clear方法
defineExpose({
clear
})
</script>
<style lang="scss" scoped>
.form-title {
line-height: 50px;
font-weight: 700;
font-weight: bold;
font-size: 18px;
position: relative;
text-indent: 14px;
&::before {
content: ' ';
position: absolute;
width: 4px;
left: 0;
top: calc(50% - 10px);
height: 20px;
border-radius: 2px;
background: #62a7f1;
}
}
.cron-selector {
::v-deep(.el-tabs__content) {
padding: 10px;
}
::v-deep(.el-radio-group) {
.el-radio {
width: 100%;
height: auto;
margin-bottom: 10px;
min-height: 32px;
}
}
::v-deep(.el-checkbox-group) {
display: flex;
flex-wrap: wrap;
.el-checkbox {
margin-right: 10px;
height: auto;
margin-bottom: 10px;
}
}
}
/* 添加樣式 */
.next-runs {
margin-top: 20px;
padding: 15px;
background-color: #fff;
border-radius: 4px;
h4 {
margin-bottom: 10px;
color: #333;
}
ul {
padding-left: 20px;
margin: 0;
li {
line-height: 1.8;
color: #333;
}
}
}
</style>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
文章主要介紹了在Vue項目中處理全局樣式和局部樣式的方法,包括使用scoped屬性和深度選擇器（/deep/）來覆蓋子組件的樣式,作者建議所有組件必須使用scoped,以避免樣式?jīng)_突,對于父組件覆蓋子組件的樣式,作者推薦給子組件指定自定義類名2025-01-01
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)評論列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
今天小編就為大家分享一篇vue表單自定義校驗規(guī)則介紹，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家介紹了vue3?emits事件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)tab欄點擊高亮效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
vue父列表數(shù)據(jù)獲取子列表數(shù)據(jù)的實現(xiàn)步驟
本文檔將介紹如何通過點擊父列表（表格）中的數(shù)據(jù)行來獲取到子列表（表格）的數(shù)據(jù),代碼示例是基于Vue框架實現(xiàn)的一個組件,包含了父列表和子列表,通過點擊父列表的數(shù)據(jù)行來動態(tài)獲取子列表的數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧2024-06-06
Vue+Webpack完美整合富文本編輯器TinyMce的方法
這篇文章主要介紹了Vue+Webpack完美整合富文本編輯器TinyMce的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
這篇文章主要給大家介紹了關(guān)于vue3獲取、設(shè)置元素高度的相關(guān)資料,小編通過實際案例向大家展示操作過程,操作方法簡單易懂,需要的朋友可以參考下2024-08-08
vue項目實現(xiàn)表單登錄頁保存賬號和密碼到cookie功能
這篇文章主要介紹了vue項目實現(xiàn)表單登錄頁保存賬號和密碼到cookie功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了Vue中mapMutations傳遞參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04