定时任务支持在线生成表达式

src/components/Crontab/day.vue

@@ -0,0 +1,173 @@
+<template>
+  <el-form size="small">
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="1"> 日，允许的通配符[, - * ? / L W] </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="2"> 不指定 </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="3">
+        周期从
+        <el-input-number v-model="cycle01" :min="1" :max="30" /> - <el-input-number v-model="cycle02" :min="cycle01 + 1" :max="31" /> 日
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="4">
+        从
+        <el-input-number v-model="average01" :min="1" :max="30" /> 号开始，每
+        <el-input-number v-model="average02" :min="1" :max="31 - average01" /> 日执行一次
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="5">
+        每月
+        <el-input-number v-model="workday" :min="1" :max="31" /> 号最近的那个工作日
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="6"> 本月最后一天 </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="7">
+        指定
+        <el-select clearable v-model="checkboxList" placeholder="可多选" multiple :multiple-limit="10">
+          <el-option v-for="item in 31" :key="item" :label="item" :value="item" />
+        </el-select>
+      </el-radio>
+    </el-form-item>
+  </el-form>
+</template>
+<script setup>
+const emit = defineEmits(['update'])
+const props = defineProps({
+  cron: {
+    type: Object,
+    default: {
+      second: '*',
+      min: '*',
+      hour: '*',
+      day: '*',
+      month: '*',
+      week: '?',
+      year: ''
+    }
+  },
+  check: {
+    type: Function,
+    default: () => {}
+  }
+})
+const radioValue = ref(1)
+const cycle01 = ref(1)
+const cycle02 = ref(2)
+const average01 = ref(1)
+const average02 = ref(1)
+const workday = ref(1)
+const checkboxList = ref([])
+const checkCopy = ref([1])
+const cycleTotal = computed(() => {
+  cycle01.value = props.check(cycle01.value, 1, 30)
+  cycle02.value = props.check(cycle02.value, cycle01.value + 1, 31)
+  return cycle01.value + '-' + cycle02.value
+})
+const averageTotal = computed(() => {
+  average01.value = props.check(average01.value, 1, 30)
+  average02.value = props.check(average02.value, 1, 31 - average01.value)
+  return average01.value + '/' + average02.value
+})
+const workdayTotal = computed(() => {
+  workday.value = props.check(workday.value, 1, 31)
+  return workday.value + 'W'
+})
+const checkboxString = computed(() => {
+  return checkboxList.value.join(',')
+})
+watch(
+  () => props.cron.day,
+  (value) => changeRadioValue(value)
+)
+watch([radioValue, cycleTotal, averageTotal, workdayTotal, checkboxString], () => onRadioChange())
+function changeRadioValue(value) {
+  if (value === '*') {
+    radioValue.value = 1
+  } else if (value === '?') {
+    radioValue.value = 2
+  } else if (value.indexOf('-') > -1) {
+    const indexArr = value.split('-')
+    cycle01.value = Number(indexArr[0])
+    cycle02.value = Number(indexArr[1])
+    radioValue.value = 3
+  } else if (value.indexOf('/') > -1) {
+    const indexArr = value.split('/')
+    average01.value = Number(indexArr[0])
+    average02.value = Number(indexArr[1])
+    radioValue.value = 4
+  } else if (value.indexOf('W') > -1) {
+    const indexArr = value.split('W')
+    workday.value = Number(indexArr[0])
+    radioValue.value = 5
+  } else if (value === 'L') {
+    radioValue.value = 6
+  } else {
+    checkboxList.value = [...new Set(value.split(',').map((item) => Number(item)))]
+    radioValue.value = 7
+  }
+}
+// 单选按钮值变化时
+function onRadioChange() {
+  if (radioValue.value === 2 && props.cron.week === '?') {
+    emit('update', 'week', '*', 'day')
+  }
+  if (radioValue.value !== 2 && props.cron.week !== '?') {
+    emit('update', 'week', '?', 'day')
+  }
+  switch (radioValue.value) {
+    case 1:
+      emit('update', 'day', '*', 'day')
+      break
+    case 2:
+      emit('update', 'day', '?', 'day')
+      break
+    case 3:
+      emit('update', 'day', cycleTotal.value, 'day')
+      break
+    case 4:
+      emit('update', 'day', averageTotal.value, 'day')
+      break
+    case 5:
+      emit('update', 'day', workdayTotal.value, 'day')
+      break
+    case 6:
+      emit('update', 'day', 'L', 'day')
+      break
+    case 7:
+      if (checkboxList.value.length === 0) {
+        checkboxList.value.push(checkCopy.value[0])
+      } else {
+        checkCopy.value = checkboxList.value
+      }
+      emit('update', 'day', checkboxString.value, 'day')
+      break
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-input-number--small,
+.el-input-number--small,
+.el-select,
+.el-select--small {
+  margin: 0 0.2rem;
+}
+.el-select,
+.el-select--small {
+  width: 18.8rem;
+}
+</style>

src/components/Crontab/hour.vue

@@ -0,0 +1,130 @@
+<template>
+  <el-form size="small">
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="1"> 小时，允许的通配符[, - * /] </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="2">
+        周期从
+        <el-input-number v-model="cycle01" :min="0" :max="22" /> - <el-input-number v-model="cycle02" :min="cycle01 + 1" :max="23" /> 时
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="3">
+        从
+        <el-input-number v-model="average01" :min="0" :max="22" /> 时开始，每
+        <el-input-number v-model="average02" :min="1" :max="23 - average01" /> 小时执行一次
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="4">
+        指定
+        <el-select clearable v-model="checkboxList" placeholder="可多选" multiple :multiple-limit="10">
+          <el-option v-for="item in 24" :key="item" :label="item - 1" :value="item - 1" />
+        </el-select>
+      </el-radio>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+const emit = defineEmits(['update'])
+const props = defineProps({
+  cron: {
+    type: Object,
+    default: {
+      second: '*',
+      min: '*',
+      hour: '*',
+      day: '*',
+      month: '*',
+      week: '?',
+      year: ''
+    }
+  },
+  check: {
+    type: Function,
+    default: () => {}
+  }
+})
+const radioValue = ref(1)
+const cycle01 = ref(0)
+const cycle02 = ref(1)
+const average01 = ref(0)
+const average02 = ref(1)
+const checkboxList = ref([])
+const checkCopy = ref([0])
+const cycleTotal = computed(() => {
+  cycle01.value = props.check(cycle01.value, 0, 22)
+  cycle02.value = props.check(cycle02.value, cycle01.value + 1, 23)
+  return cycle01.value + '-' + cycle02.value
+})
+const averageTotal = computed(() => {
+  average01.value = props.check(average01.value, 0, 22)
+  average02.value = props.check(average02.value, 1, 23 - average01.value)
+  return average01.value + '/' + average02.value
+})
+const checkboxString = computed(() => {
+  return checkboxList.value.join(',')
+})
+watch(
+  () => props.cron.hour,
+  (value) => changeRadioValue(value)
+)
+watch([radioValue, cycleTotal, averageTotal, checkboxString], () => onRadioChange())
+function changeRadioValue(value) {
+  if (value === '*') {
+    radioValue.value = 1
+  } else if (value.indexOf('-') > -1) {
+    const indexArr = value.split('-')
+    cycle01.value = Number(indexArr[0])
+    cycle02.value = Number(indexArr[1])
+    radioValue.value = 2
+  } else if (value.indexOf('/') > -1) {
+    const indexArr = value.split('/')
+    average01.value = Number(indexArr[0])
+    average02.value = Number(indexArr[1])
+    radioValue.value = 3
+  } else {
+    checkboxList.value = [...new Set(value.split(',').map((item) => Number(item)))]
+    radioValue.value = 4
+  }
+}
+function onRadioChange() {
+  switch (radioValue.value) {
+    case 1:
+      emit('update', 'hour', '*', 'hour')
+      break
+    case 2:
+      emit('update', 'hour', cycleTotal.value, 'hour')
+      break
+    case 3:
+      emit('update', 'hour', averageTotal.value, 'hour')
+      break
+    case 4:
+      if (checkboxList.value.length === 0) {
+        checkboxList.value.push(checkCopy.value[0])
+      } else {
+        checkCopy.value = checkboxList.value
+      }
+      emit('update', 'hour', checkboxString.value, 'hour')
+      break
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-input-number--small,
+.el-input-number--small,
+.el-select,
+.el-select--small {
+  margin: 0 0.2rem;
+}
+.el-select,
+.el-select--small {
+  width: 18.8rem;
+}
+</style>

src/components/Crontab/index.vue

@@ -0,0 +1,280 @@
+<template>
+  <div>
+    <el-tabs type="border-card">
+      <el-tab-pane label="秒" v-if="shouldHide('second')">
+        <CrontabSecond @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj" ref="cronsecond" />
+      </el-tab-pane>
+
+      <el-tab-pane label="分钟" v-if="shouldHide('min')">
+        <CrontabMin @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj" ref="cronmin" />
+      </el-tab-pane>
+
+      <el-tab-pane label="小时" v-if="shouldHide('hour')">
+        <CrontabHour @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj" ref="cronhour" />
+      </el-tab-pane>
+
+      <el-tab-pane label="日" v-if="shouldHide('day')">
+        <CrontabDay @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj" ref="cronday" />
+      </el-tab-pane>
+
+      <el-tab-pane label="月" v-if="shouldHide('month')">
+        <CrontabMonth @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj" ref="cronmonth" />
+      </el-tab-pane>
+
+      <el-tab-pane label="周" v-if="shouldHide('week')">
+        <CrontabWeek @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj" ref="cronweek" />
+      </el-tab-pane>
+
+      <el-tab-pane label="年" v-if="shouldHide('year')">
+        <CrontabYear @update="updateCrontabValue" :check="checkNumber" :cron="crontabValueObj" ref="cronyear" />
+      </el-tab-pane>
+    </el-tabs>
+
+    <div class="popup-main">
+      <div class="popup-result">
+        <p class="title">时间表达式</p>
+        <table>
+          <thead>
+            <th v-for="item of tabTitles" :key="item">{{ item }}</th>
+            <th>Cron 表达式</th>
+          </thead>
+          <tbody>
+            <td>
+              <span v-if="crontabValueObj.second.length < 10">{{ crontabValueObj.second }}</span>
+              <el-tooltip v-else :content="crontabValueObj.second" placement="top"
+                ><span>{{ crontabValueObj.second }}</span></el-tooltip
+              >
+            </td>
+            <td>
+              <span v-if="crontabValueObj.min.length < 10">{{ crontabValueObj.min }}</span>
+              <el-tooltip v-else :content="crontabValueObj.min" placement="top"
+                ><span>{{ crontabValueObj.min }}</span></el-tooltip
+              >
+            </td>
+            <td>
+              <span v-if="crontabValueObj.hour.length < 10">{{ crontabValueObj.hour }}</span>
+              <el-tooltip v-else :content="crontabValueObj.hour" placement="top"
+                ><span>{{ crontabValueObj.hour }}</span></el-tooltip
+              >
+            </td>
+            <td>
+              <span v-if="crontabValueObj.day.length < 10">{{ crontabValueObj.day }}</span>
+              <el-tooltip v-else :content="crontabValueObj.day" placement="top"
+                ><span>{{ crontabValueObj.day }}</span></el-tooltip
+              >
+            </td>
+            <td>
+              <span v-if="crontabValueObj.month.length < 10">{{ crontabValueObj.month }}</span>
+              <el-tooltip v-else :content="crontabValueObj.month" placement="top"
+                ><span>{{ crontabValueObj.month }}</span></el-tooltip
+              >
+            </td>
+            <td>
+              <span v-if="crontabValueObj.week.length < 10">{{ crontabValueObj.week }}</span>
+              <el-tooltip v-else :content="crontabValueObj.week" placement="top"
+                ><span>{{ crontabValueObj.week }}</span></el-tooltip
+              >
+            </td>
+            <td>
+              <span v-if="crontabValueObj.year.length < 10">{{ crontabValueObj.year }}</span>
+              <el-tooltip v-else :content="crontabValueObj.year" placement="top"
+                ><span>{{ crontabValueObj.year }}</span></el-tooltip
+              >
+            </td>
+            <td class="result">
+              <span v-if="crontabValueString.length < 90">{{ crontabValueString }}</span>
+              <el-tooltip v-else :content="crontabValueString" placement="top"
+                ><span>{{ crontabValueString }}</span></el-tooltip
+              >
+            </td>
+          </tbody>
+        </table>
+      </div>
+      <CrontabResult :ex="crontabValueString"></CrontabResult>
+
+      <div class="pop_btn">
+        <el-button type="primary" @click="submitFill">确定</el-button>
+        <el-button type="warning" @click="clearCron">重置</el-button>
+        <el-button @click="hidePopup">取消</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import CrontabSecond from './second.vue'
+import CrontabMin from './min.vue'
+import CrontabHour from './hour.vue'
+import CrontabDay from './day.vue'
+import CrontabMonth from './month.vue'
+import CrontabWeek from './week.vue'
+import CrontabYear from './year.vue'
+import CrontabResult from './result.vue'
+const { proxy } = getCurrentInstance()
+const emit = defineEmits(['hide', 'fill'])
+const props = defineProps({
+  hideComponent: {
+    type: Array,
+    default: () => []
+  },
+  expression: {
+    type: String,
+    default: ''
+  }
+})
+const tabTitles = ref(['秒', '分钟', '小时', '日', '月', '周', '年'])
+const tabActive = ref(0)
+const hideComponent = ref([])
+const expression = ref('')
+const crontabValueObj = ref({
+  second: '*',
+  min: '*',
+  hour: '*',
+  day: '*',
+  month: '*',
+  week: '?',
+  year: ''
+})
+const crontabValueString = computed(() => {
+  const obj = crontabValueObj.value
+  return obj.second + ' ' + obj.min + ' ' + obj.hour + ' ' + obj.day + ' ' + obj.month + ' ' + obj.week + (obj.year === '' ? '' : ' ' + obj.year)
+})
+watch(expression, () => resolveExp())
+function shouldHide(key) {
+  return !(hideComponent.value && hideComponent.value.includes(key))
+}
+function resolveExp() {
+  // 反解析 表达式
+  if (expression.value) {
+    const arr = expression.value.split(/\s+/)
+    if (arr.length >= 6) {
+      //6 位以上是合法表达式
+      let obj = {
+        second: arr[0],
+        min: arr[1],
+        hour: arr[2],
+        day: arr[3],
+        month: arr[4],
+        week: arr[5],
+        year: arr[6] ? arr[6] : ''
+      }
+      crontabValueObj.value = {
+        ...obj
+      }
+    }
+  } else {
+    // 没有传入的表达式 则还原
+    clearCron()
+  }
+}
+// tab切换值
+function tabCheck(index) {
+  tabActive.value = index
+}
+// 由子组件触发，更改表达式组成的字段值
+function updateCrontabValue(name, value, from) {
+  crontabValueObj.value[name] = value
+}
+// 表单选项的子组件校验数字格式（通过-props传递）
+function checkNumber(value, minLimit, maxLimit) {
+  // 检查必须为整数
+  value = Math.floor(value)
+  if (value < minLimit) {
+    value = minLimit
+  } else if (value > maxLimit) {
+    value = maxLimit
+  }
+  return value
+}
+// 隐藏弹窗
+function hidePopup() {
+  emit('hide')
+}
+// 填充表达式
+function submitFill() {
+  emit('fill', crontabValueString.value)
+  hidePopup()
+}
+function clearCron() {
+  // 还原选择项
+  crontabValueObj.value = {
+    second: '*',
+    min: '*',
+    hour: '*',
+    day: '*',
+    month: '*',
+    week: '?',
+    year: ''
+  }
+}
+onMounted(() => {
+  expression.value = props.expression
+  hideComponent.value = props.hideComponent
+})
+</script>
+
+<style lang="scss" scoped>
+.pop_btn {
+  text-align: center;
+  margin-top: 20px;
+}
+.popup-main {
+  position: relative;
+  margin: 10px auto;
+  background: #fff;
+  border-radius: 5px;
+  font-size: 12px;
+  overflow: hidden;
+}
+.popup-title {
+  overflow: hidden;
+  line-height: 34px;
+  padding-top: 6px;
+  background: #f2f2f2;
+}
+.popup-result {
+  box-sizing: border-box;
+  line-height: 24px;
+  margin: 25px auto;
+  padding: 15px 10px 10px;
+  border: 1px solid #ccc;
+  position: relative;
+}
+.popup-result .title {
+  position: absolute;
+  top: -28px;
+  left: 50%;
+  width: 140px;
+  font-size: 14px;
+  margin-left: -70px;
+  text-align: center;
+  line-height: 30px;
+  background: #fff;
+}
+.popup-result table {
+  text-align: center;
+  width: 100%;
+  margin: 0 auto;
+}
+.popup-result table td:not(.result) {
+  width: 3.5rem;
+  min-width: 3.5rem;
+  max-width: 3.5rem;
+}
+.popup-result table span {
+  display: block;
+  width: 100%;
+  font-family: arial;
+  line-height: 30px;
+  height: 30px;
+  white-space: nowrap;
+  overflow: hidden;
+  border: 1px solid #e8e8e8;
+}
+.popup-result-scroll {
+  font-size: 12px;
+  line-height: 24px;
+  height: 10em;
+  overflow-y: auto;
+}
+</style>

src/components/Crontab/min.vue

@@ -0,0 +1,129 @@
+<template>
+  <el-form size="small">
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="1"> 分钟，允许的通配符[, - * /] </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="2">
+        周期从
+        <el-input-number v-model="cycle01" :min="0" :max="58" /> - <el-input-number v-model="cycle02" :min="cycle01 + 1" :max="59" /> 分钟
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="3">
+        从
+        <el-input-number v-model="average01" :min="0" :max="58" /> 分钟开始， 每
+        <el-input-number v-model="average02" :min="1" :max="59 - average01" /> 分钟执行一次
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="4">
+        指定
+        <el-select clearable v-model="checkboxList" placeholder="可多选" multiple :multiple-limit="10">
+          <el-option v-for="item in 60" :key="item" :label="item - 1" :value="item - 1" />
+        </el-select>
+      </el-radio>
+    </el-form-item>
+  </el-form>
+</template>
+<script setup>
+const emit = defineEmits(['update'])
+const props = defineProps({
+  cron: {
+    type: Object,
+    default: {
+      second: '*',
+      min: '*',
+      hour: '*',
+      day: '*',
+      month: '*',
+      week: '?',
+      year: ''
+    }
+  },
+  check: {
+    type: Function,
+    default: () => {}
+  }
+})
+const radioValue = ref(1)
+const cycle01 = ref(0)
+const cycle02 = ref(1)
+const average01 = ref(0)
+const average02 = ref(1)
+const checkboxList = ref([])
+const checkCopy = ref([0])
+const cycleTotal = computed(() => {
+  cycle01.value = props.check(cycle01.value, 0, 58)
+  cycle02.value = props.check(cycle02.value, cycle01.value + 1, 59)
+  return cycle01.value + '-' + cycle02.value
+})
+const averageTotal = computed(() => {
+  average01.value = props.check(average01.value, 0, 58)
+  average02.value = props.check(average02.value, 1, 59 - average01.value)
+  return average01.value + '/' + average02.value
+})
+const checkboxString = computed(() => {
+  return checkboxList.value.join(',')
+})
+watch(
+  () => props.cron.min,
+  (value) => changeRadioValue(value)
+)
+watch([radioValue, cycleTotal, averageTotal, checkboxString], () => onRadioChange())
+function changeRadioValue(value) {
+  if (value === '*') {
+    radioValue.value = 1
+  } else if (value.indexOf('-') > -1) {
+    const indexArr = value.split('-')
+    cycle01.value = Number(indexArr[0])
+    cycle02.value = Number(indexArr[1])
+    radioValue.value = 2
+  } else if (value.indexOf('/') > -1) {
+    const indexArr = value.split('/')
+    average01.value = Number(indexArr[0])
+    average02.value = Number(indexArr[1])
+    radioValue.value = 3
+  } else {
+    checkboxList.value = [...new Set(value.split(',').map((item) => Number(item)))]
+    radioValue.value = 4
+  }
+}
+function onRadioChange() {
+  switch (radioValue.value) {
+    case 1:
+      emit('update', 'min', '*', 'min')
+      break
+    case 2:
+      emit('update', 'min', cycleTotal.value, 'min')
+      break
+    case 3:
+      emit('update', 'min', averageTotal.value, 'min')
+      break
+    case 4:
+      if (checkboxList.value.length === 0) {
+        checkboxList.value.push(checkCopy.value[0])
+      } else {
+        checkCopy.value = checkboxList.value
+      }
+      emit('update', 'min', checkboxString.value, 'min')
+      break
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-input-number--small,
+.el-input-number--small,
+.el-select,
+.el-select--small {
+  margin: 0 0.2rem;
+}
+.el-select,
+.el-select--small {
+  width: 19.8rem;
+}
+</style>

src/components/Crontab/month.vue

@@ -0,0 +1,144 @@
+<template>
+  <el-form size="small">
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="1"> 月，允许的通配符[, - * /] </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="2">
+        周期从
+        <el-input-number v-model="cycle01" :min="1" :max="11" /> - <el-input-number v-model="cycle02" :min="cycle01 + 1" :max="12" /> 月
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="3">
+        从
+        <el-input-number v-model="average01" :min="1" :max="11" /> 月开始，每
+        <el-input-number v-model="average02" :min="1" :max="12 - average01" /> 月月执行一次
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="4">
+        指定
+        <el-select clearable v-model="checkboxList" placeholder="可多选" multiple :multiple-limit="8">
+          <el-option v-for="item in monthList" :key="item.key" :label="item.value" :value="item.key" />
+        </el-select>
+      </el-radio>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+const emit = defineEmits(['update'])
+const props = defineProps({
+  cron: {
+    type: Object,
+    default: {
+      second: '*',
+      min: '*',
+      hour: '*',
+      day: '*',
+      month: '*',
+      week: '?',
+      year: ''
+    }
+  },
+  check: {
+    type: Function,
+    default: () => {}
+  }
+})
+const radioValue = ref(1)
+const cycle01 = ref(1)
+const cycle02 = ref(2)
+const average01 = ref(1)
+const average02 = ref(1)
+const checkboxList = ref([])
+const checkCopy = ref([1])
+const monthList = ref([
+  { key: 1, value: '一月' },
+  { key: 2, value: '二月' },
+  { key: 3, value: '三月' },
+  { key: 4, value: '四月' },
+  { key: 5, value: '五月' },
+  { key: 6, value: '六月' },
+  { key: 7, value: '七月' },
+  { key: 8, value: '八月' },
+  { key: 9, value: '九月' },
+  { key: 10, value: '十月' },
+  { key: 11, value: '十一月' },
+  { key: 12, value: '十二月' }
+])
+const cycleTotal = computed(() => {
+  cycle01.value = props.check(cycle01.value, 1, 11)
+  cycle02.value = props.check(cycle02.value, cycle01.value + 1, 12)
+  return cycle01.value + '-' + cycle02.value
+})
+const averageTotal = computed(() => {
+  average01.value = props.check(average01.value, 1, 11)
+  average02.value = props.check(average02.value, 1, 12 - average01.value)
+  return average01.value + '/' + average02.value
+})
+const checkboxString = computed(() => {
+  return checkboxList.value.join(',')
+})
+watch(
+  () => props.cron.month,
+  (value) => changeRadioValue(value)
+)
+watch([radioValue, cycleTotal, averageTotal, checkboxString], () => onRadioChange())
+function changeRadioValue(value) {
+  if (value === '*') {
+    radioValue.value = 1
+  } else if (value.indexOf('-') > -1) {
+    const indexArr = value.split('-')
+    cycle01.value = Number(indexArr[0])
+    cycle02.value = Number(indexArr[1])
+    radioValue.value = 2
+  } else if (value.indexOf('/') > -1) {
+    const indexArr = value.split('/')
+    average01.value = Number(indexArr[0])
+    average02.value = Number(indexArr[1])
+    radioValue.value = 3
+  } else {
+    checkboxList.value = [...new Set(value.split(',').map((item) => Number(item)))]
+    radioValue.value = 4
+  }
+}
+function onRadioChange() {
+  switch (radioValue.value) {
+    case 1:
+      emit('update', 'month', '*', 'month')
+      break
+    case 2:
+      emit('update', 'month', cycleTotal.value, 'month')
+      break
+    case 3:
+      emit('update', 'month', averageTotal.value, 'month')
+      break
+    case 4:
+      if (checkboxList.value.length === 0) {
+        checkboxList.value.push(checkCopy.value[0])
+      } else {
+        checkCopy.value = checkboxList.value
+      }
+      emit('update', 'month', checkboxString.value, 'month')
+      break
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-input-number--small,
+.el-input-number--small,
+.el-select,
+.el-select--small {
+  margin: 0 0.2rem;
+}
+.el-select,
+.el-select--small {
+  width: 18.8rem;
+}
+</style>

src/components/Crontab/result.vue

@@ -0,0 +1,560 @@
+<template>
+  <div class="popup-result">
+    <p class="title">最近5次运行时间</p>
+    <ul class="popup-result-scroll">
+      <template v-if="isShow">
+        <li v-for="item in resultList" :key="item">{{ item }}</li>
+      </template>
+      <li v-else>计算结果中...</li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  ex: {
+    type: String,
+    default: ''
+  }
+})
+const dayRule = ref('')
+const dayRuleSup = ref('')
+const dateArr = ref([])
+const resultList = ref([])
+const isShow = ref(false)
+watch(
+  () => props.ex,
+  () => expressionChange()
+)
+// 表达式值变化时，开始去计算结果
+function expressionChange() {
+  // 计算开始-隐藏结果
+  isShow.value = false
+  // 获取规则数组[0秒、1分、2时、3日、4月、5星期、6年]
+  let ruleArr = props.ex.split(' ')
+  // 用于记录进入循环的次数
+  let nums = 0
+  // 用于暂时存符号时间规则结果的数组
+  let resultArr = []
+  // 获取当前时间精确至[年、月、日、时、分、秒]
+  let nTime = new Date()
+  let nYear = nTime.getFullYear()
+  let nMonth = nTime.getMonth() + 1
+  let nDay = nTime.getDate()
+  let nHour = nTime.getHours()
+  let nMin = nTime.getMinutes()
+  let nSecond = nTime.getSeconds()
+  // 根据规则获取到近100年可能年数组、月数组等等
+  getSecondArr(ruleArr[0])
+  getMinArr(ruleArr[1])
+  getHourArr(ruleArr[2])
+  getDayArr(ruleArr[3])
+  getMonthArr(ruleArr[4])
+  getWeekArr(ruleArr[5])
+  getYearArr(ruleArr[6], nYear)
+  // 将获取到的数组赋值-方便使用
+  let sDate = dateArr.value[0]
+  let mDate = dateArr.value[1]
+  let hDate = dateArr.value[2]
+  let DDate = dateArr.value[3]
+  let MDate = dateArr.value[4]
+  let YDate = dateArr.value[5]
+  // 获取当前时间在数组中的索引
+  let sIdx = getIndex(sDate, nSecond)
+  let mIdx = getIndex(mDate, nMin)
+  let hIdx = getIndex(hDate, nHour)
+  let DIdx = getIndex(DDate, nDay)
+  let MIdx = getIndex(MDate, nMonth)
+  let YIdx = getIndex(YDate, nYear)
+  // 重置月日时分秒的函数(后面用的比较多)
+  const resetSecond = function () {
+    sIdx = 0
+    nSecond = sDate[sIdx]
+  }
+  const resetMin = function () {
+    mIdx = 0
+    nMin = mDate[mIdx]
+    resetSecond()
+  }
+  const resetHour = function () {
+    hIdx = 0
+    nHour = hDate[hIdx]
+    resetMin()
+  }
+  const resetDay = function () {
+    DIdx = 0
+    nDay = DDate[DIdx]
+    resetHour()
+  }
+  const resetMonth = function () {
+    MIdx = 0
+    nMonth = MDate[MIdx]
+    resetDay()
+  }
+  // 如果当前年份不为数组中当前值
+  if (nYear !== YDate[YIdx]) {
+    resetMonth()
+  }
+  // 如果当前月份不为数组中当前值
+  if (nMonth !== MDate[MIdx]) {
+    resetDay()
+  }
+  // 如果当前“日”不为数组中当前值
+  if (nDay !== DDate[DIdx]) {
+    resetHour()
+  }
+  // 如果当前“时”不为数组中当前值
+  if (nHour !== hDate[hIdx]) {
+    resetMin()
+  }
+  // 如果当前“分”不为数组中当前值
+  if (nMin !== mDate[mIdx]) {
+    resetSecond()
+  }
+  // 循环年份数组
+  goYear: for (let Yi = YIdx; Yi < YDate.length; Yi++) {
+    let YY = YDate[Yi]
+    // 如果到达最大值时
+    if (nMonth > MDate[MDate.length - 1]) {
+      resetMonth()
+      continue
+    }
+    // 循环月份数组
+    goMonth: for (let Mi = MIdx; Mi < MDate.length; Mi++) {
+      // 赋值、方便后面运算
+      let MM = MDate[Mi]
+      MM = MM < 10 ? '0' + MM : MM
+      // 如果到达最大值时
+      if (nDay > DDate[DDate.length - 1]) {
+        resetDay()
+        if (Mi === MDate.length - 1) {
+          resetMonth()
+          continue goYear
+        }
+        continue
+      }
+      // 循环日期数组
+      goDay: for (let Di = DIdx; Di < DDate.length; Di++) {
+        // 赋值、方便后面运算
+        let DD = DDate[Di]
+        let thisDD = DD < 10 ? '0' + DD : DD
+        // 如果到达最大值时
+        if (nHour > hDate[hDate.length - 1]) {
+          resetHour()
+          if (Di === DDate.length - 1) {
+            resetDay()
+            if (Mi === MDate.length - 1) {
+              resetMonth()
+              continue goYear
+            }
+            continue goMonth
+          }
+          continue
+        }
+        // 判断日期的合法性，不合法的话也是跳出当前循环
+        if (
+          checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true &&
+          dayRule.value !== 'workDay' &&
+          dayRule.value !== 'lastWeek' &&
+          dayRule.value !== 'lastDay'
+        ) {
+          resetDay()
+          continue goMonth
+        }
+        // 如果日期规则中有值时
+        if (dayRule.value === 'lastDay') {
+          // 如果不是合法日期则需要将前将日期调到合法日期即月末最后一天
+          if (checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
+            while (DD > 0 && checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
+              DD--
+              thisDD = DD < 10 ? '0' + DD : DD
+            }
+          }
+        } else if (dayRule.value === 'workDay') {
+          // 校验并调整如果是2月30号这种日期传进来时需调整至正常月底
+          if (checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
+            while (DD > 0 && checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
+              DD--
+              thisDD = DD < 10 ? '0' + DD : DD
+            }
+          }
+          // 获取达到条件的日期是星期X
+          let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + thisDD + ' 00:00:00'), 'week')
+          // 当星期日时
+          if (thisWeek === 1) {
+            // 先找下一个日，并判断是否为月底
+            DD++
+            thisDD = DD < 10 ? '0' + DD : DD
+            // 判断下一日已经不是合法日期
+            if (checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
+              DD -= 3
+            }
+          } else if (thisWeek === 7) {
+            // 当星期6时只需判断不是1号就可进行操作
+            if (dayRuleSup.value !== 1) {
+              DD--
+            } else {
+              DD += 2
+            }
+          }
+        } else if (dayRule.value === 'weekDay') {
+          // 如果指定了是星期几
+          // 获取当前日期是属于星期几
+          let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + DD + ' 00:00:00'), 'week')
+          // 校验当前星期是否在星期池（dayRuleSup）中
+          if (dayRuleSup.value.indexOf(thisWeek) < 0) {
+            // 如果到达最大值时
+            if (Di === DDate.length - 1) {
+              resetDay()
+              if (Mi === MDate.length - 1) {
+                resetMonth()
+                continue goYear
+              }
+              continue goMonth
+            }
+            continue
+          }
+        } else if (dayRule.value === 'assWeek') {
+          // 如果指定了是第几周的星期几
+          // 获取每月1号是属于星期几
+          let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + DD + ' 00:00:00'), 'week')
+          if (dayRuleSup.value[1] >= thisWeek) {
+            DD = (dayRuleSup.value[0] - 1) * 7 + dayRuleSup.value[1] - thisWeek + 1
+          } else {
+            DD = dayRuleSup.value[0] * 7 + dayRuleSup.value[1] - thisWeek + 1
+          }
+        } else if (dayRule.value === 'lastWeek') {
+          // 如果指定了每月最后一个星期几
+          // 校验并调整如果是2月30号这种日期传进来时需调整至正常月底
+          if (checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
+            while (DD > 0 && checkDate(YY + '-' + MM + '-' + thisDD + ' 00:00:00') !== true) {
+              DD--
+              thisDD = DD < 10 ? '0' + DD : DD
+            }
+          }
+          // 获取月末最后一天是星期几
+          let thisWeek = formatDate(new Date(YY + '-' + MM + '-' + thisDD + ' 00:00:00'), 'week')
+          // 找到要求中最近的那个星期几
+          if (dayRuleSup.value < thisWeek) {
+            DD -= thisWeek - dayRuleSup.value
+          } else if (dayRuleSup.value > thisWeek) {
+            DD -= 7 - (dayRuleSup.value - thisWeek)
+          }
+        }
+        // 判断时间值是否小于10置换成“05”这种格式
+        DD = DD < 10 ? '0' + DD : DD
+        // 循环“时”数组
+        goHour: for (let hi = hIdx; hi < hDate.length; hi++) {
+          let hh = hDate[hi] < 10 ? '0' + hDate[hi] : hDate[hi]
+          // 如果到达最大值时
+          if (nMin > mDate[mDate.length - 1]) {
+            resetMin()
+            if (hi === hDate.length - 1) {
+              resetHour()
+              if (Di === DDate.length - 1) {
+                resetDay()
+                if (Mi === MDate.length - 1) {
+                  resetMonth()
+                  continue goYear
+                }
+                continue goMonth
+              }
+              continue goDay
+            }
+            continue
+          }
+          // 循环"分"数组
+          goMin: for (let mi = mIdx; mi < mDate.length; mi++) {
+            let mm = mDate[mi] < 10 ? '0' + mDate[mi] : mDate[mi]
+            // 如果到达最大值时
+            if (nSecond > sDate[sDate.length - 1]) {
+              resetSecond()
+              if (mi === mDate.length - 1) {
+                resetMin()
+                if (hi === hDate.length - 1) {
+                  resetHour()
+                  if (Di === DDate.length - 1) {
+                    resetDay()
+                    if (Mi === MDate.length - 1) {
+                      resetMonth()
+                      continue goYear
+                    }
+                    continue goMonth
+                  }
+                  continue goDay
+                }
+                continue goHour
+              }
+              continue
+            }
+            // 循环"秒"数组
+            goSecond: for (let si = sIdx; si <= sDate.length - 1; si++) {
+              let ss = sDate[si] < 10 ? '0' + sDate[si] : sDate[si]
+              // 添加当前时间（时间合法性在日期循环时已经判断）
+              if (MM !== '00' && DD !== '00') {
+                resultArr.push(YY + '-' + MM + '-' + DD + ' ' + hh + ':' + mm + ':' + ss)
+                nums++
+              }
+              // 如果条数满了就退出循环
+              if (nums === 5) break goYear
+              // 如果到达最大值时
+              if (si === sDate.length - 1) {
+                resetSecond()
+                if (mi === mDate.length - 1) {
+                  resetMin()
+                  if (hi === hDate.length - 1) {
+                    resetHour()
+                    if (Di === DDate.length - 1) {
+                      resetDay()
+                      if (Mi === MDate.length - 1) {
+                        resetMonth()
+                        continue goYear
+                      }
+                      continue goMonth
+                    }
+                    continue goDay
+                  }
+                  continue goHour
+                }
+                continue goMin
+              }
+            } //goSecond
+          } //goMin
+        } //goHour
+      } //goDay
+    } //goMonth
+  }
+  // 判断100年内的结果条数
+  if (resultArr.length === 0) {
+    resultList.value = ['没有达到条件的结果！']
+  } else {
+    resultList.value = resultArr
+    if (resultArr.length !== 5) {
+      resultList.value.push('最近100年内只有上面' + resultArr.length + '条结果！')
+    }
+  }
+  // 计算完成-显示结果
+  isShow.value = true
+}
+// 用于计算某位数字在数组中的索引
+function getIndex(arr, value) {
+  if (value <= arr[0] || value > arr[arr.length - 1]) {
+    return 0
+  } else {
+    for (let i = 0; i < arr.length - 1; i++) {
+      if (value > arr[i] && value <= arr[i + 1]) {
+        return i + 1
+      }
+    }
+  }
+}
+// 获取"年"数组
+function getYearArr(rule, year) {
+  dateArr.value[5] = getOrderArr(year, year + 100)
+  if (rule !== undefined) {
+    if (rule.indexOf('-') >= 0) {
+      dateArr.value[5] = getCycleArr(rule, year + 100, false)
+    } else if (rule.indexOf('/') >= 0) {
+      dateArr.value[5] = getAverageArr(rule, year + 100)
+    } else if (rule !== '*') {
+      dateArr.value[5] = getAssignArr(rule)
+    }
+  }
+}
+// 获取"月"数组
+function getMonthArr(rule) {
+  dateArr.value[4] = getOrderArr(1, 12)
+  if (rule.indexOf('-') >= 0) {
+    dateArr.value[4] = getCycleArr(rule, 12, false)
+  } else if (rule.indexOf('/') >= 0) {
+    dateArr.value[4] = getAverageArr(rule, 12)
+  } else if (rule !== '*') {
+    dateArr.value[4] = getAssignArr(rule)
+  }
+}
+// 获取"日"数组-主要为日期规则
+function getWeekArr(rule) {
+  // 只有当日期规则的两个值均为“”时则表达日期是有选项的
+  if (dayRule.value === '' && dayRuleSup.value === '') {
+    if (rule.indexOf('-') >= 0) {
+      dayRule.value = 'weekDay'
+      dayRuleSup.value = getCycleArr(rule, 7, false)
+    } else if (rule.indexOf('#') >= 0) {
+      dayRule.value = 'assWeek'
+      let matchRule = rule.match(/[0-9]{1}/g)
+      dayRuleSup.value = [Number(matchRule[1]), Number(matchRule[0])]
+      dateArr.value[3] = [1]
+      if (dayRuleSup.value[1] === 7) {
+        dayRuleSup.value[1] = 0
+      }
+    } else if (rule.indexOf('L') >= 0) {
+      dayRule.value = 'lastWeek'
+      dayRuleSup.value = Number(rule.match(/[0-9]{1,2}/g)[0])
+      dateArr.value[3] = [31]
+      if (dayRuleSup.value === 7) {
+        dayRuleSup.value = 0
+      }
+    } else if (rule !== '*' && rule !== '?') {
+      dayRule.value = 'weekDay'
+      dayRuleSup.value = getAssignArr(rule)
+    }
+  }
+}
+// 获取"日"数组-少量为日期规则
+function getDayArr(rule) {
+  dateArr.value[3] = getOrderArr(1, 31)
+  dayRule.value = ''
+  dayRuleSup.value = ''
+  if (rule.indexOf('-') >= 0) {
+    dateArr.value[3] = getCycleArr(rule, 31, false)
+    dayRuleSup.value = 'null'
+  } else if (rule.indexOf('/') >= 0) {
+    dateArr.value[3] = getAverageArr(rule, 31)
+    dayRuleSup.value = 'null'
+  } else if (rule.indexOf('W') >= 0) {
+    dayRule.value = 'workDay'
+    dayRuleSup.value = Number(rule.match(/[0-9]{1,2}/g)[0])
+    dateArr.value[3] = [dayRuleSup.value]
+  } else if (rule.indexOf('L') >= 0) {
+    dayRule.value = 'lastDay'
+    dayRuleSup.value = 'null'
+    dateArr.value[3] = [31]
+  } else if (rule !== '*' && rule !== '?') {
+    dateArr.value[3] = getAssignArr(rule)
+    dayRuleSup.value = 'null'
+  } else if (rule === '*') {
+    dayRuleSup.value = 'null'
+  }
+}
+// 获取"时"数组
+function getHourArr(rule) {
+  dateArr.value[2] = getOrderArr(0, 23)
+  if (rule.indexOf('-') >= 0) {
+    dateArr.value[2] = getCycleArr(rule, 24, true)
+  } else if (rule.indexOf('/') >= 0) {
+    dateArr.value[2] = getAverageArr(rule, 23)
+  } else if (rule !== '*') {
+    dateArr.value[2] = getAssignArr(rule)
+  }
+}
+// 获取"分"数组
+function getMinArr(rule) {
+  dateArr.value[1] = getOrderArr(0, 59)
+  if (rule.indexOf('-') >= 0) {
+    dateArr.value[1] = getCycleArr(rule, 60, true)
+  } else if (rule.indexOf('/') >= 0) {
+    dateArr.value[1] = getAverageArr(rule, 59)
+  } else if (rule !== '*') {
+    dateArr.value[1] = getAssignArr(rule)
+  }
+}
+// 获取"秒"数组
+function getSecondArr(rule) {
+  dateArr.value[0] = getOrderArr(0, 59)
+  if (rule.indexOf('-') >= 0) {
+    dateArr.value[0] = getCycleArr(rule, 60, true)
+  } else if (rule.indexOf('/') >= 0) {
+    dateArr.value[0] = getAverageArr(rule, 59)
+  } else if (rule !== '*') {
+    dateArr.value[0] = getAssignArr(rule)
+  }
+}
+// 根据传进来的min-max返回一个顺序的数组
+function getOrderArr(min, max) {
+  let arr = []
+  for (let i = min; i <= max; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+// 根据规则中指定的零散值返回一个数组
+function getAssignArr(rule) {
+  let arr = []
+  let assiginArr = rule.split(',')
+  for (let i = 0; i < assiginArr.length; i++) {
+    arr[i] = Number(assiginArr[i])
+  }
+  arr.sort(compare)
+  return arr
+}
+// 根据一定算术规则计算返回一个数组
+function getAverageArr(rule, limit) {
+  let arr = []
+  let agArr = rule.split('/')
+  let min = Number(agArr[0])
+  let step = Number(agArr[1])
+  while (min <= limit) {
+    arr.push(min)
+    min += step
+  }
+  return arr
+}
+// 根据规则返回一个具有周期性的数组
+function getCycleArr(rule, limit, status) {
+  // status--表示是否从0开始（则从1开始）
+  let arr = []
+  let cycleArr = rule.split('-')
+  let min = Number(cycleArr[0])
+  let max = Number(cycleArr[1])
+  if (min > max) {
+    max += limit
+  }
+  for (let i = min; i <= max; i++) {
+    let add = 0
+    if (status === false && i % limit === 0) {
+      add = limit
+    }
+    arr.push(Math.round((i % limit) + add))
+  }
+  arr.sort(compare)
+  return arr
+}
+// 比较数字大小（用于Array.sort）
+function compare(value1, value2) {
+  if (value2 - value1 > 0) {
+    return -1
+  } else {
+    return 1
+  }
+}
+// 格式化日期格式如：2017-9-19 18:04:33
+function formatDate(value, type) {
+  // 计算日期相关值
+  let time = typeof value == 'number' ? new Date(value) : value
+  let Y = time.getFullYear()
+  let M = time.getMonth() + 1
+  let D = time.getDate()
+  let h = time.getHours()
+  let m = time.getMinutes()
+  let s = time.getSeconds()
+  let week = time.getDay()
+  // 如果传递了type的话
+  if (type === undefined) {
+    return (
+      Y +
+      '-' +
+      (M < 10 ? '0' + M : M) +
+      '-' +
+      (D < 10 ? '0' + D : D) +
+      ' ' +
+      (h < 10 ? '0' + h : h) +
+      ':' +
+      (m < 10 ? '0' + m : m) +
+      ':' +
+      (s < 10 ? '0' + s : s)
+    )
+  } else if (type === 'week') {
+    // 在quartz中 1为星期日
+    return week + 1
+  }
+}
+// 检查日期是否存在
+function checkDate(value) {
+  let time = new Date(value)
+  let format = formatDate(time)
+  return value === format
+}
+onMounted(() => {
+  expressionChange()
+})
+</script>

src/components/Crontab/second.vue

@@ -0,0 +1,131 @@
+<template>
+  <el-form size="small">
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="1"> 秒，允许的通配符[, - * /] </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="2">
+        周期从
+        <el-input-number v-model="cycle01" :min="0" :max="58" /> - <el-input-number v-model="cycle02" :min="cycle01 + 1" :max="59" /> 秒
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="3">
+        从
+        <el-input-number v-model="average01" :min="0" :max="58" /> 秒开始，每
+        <el-input-number v-model="average02" :min="1" :max="59 - average01" /> 秒执行一次
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="4">
+        指定
+        <el-select clearable v-model="checkboxList" placeholder="可多选" multiple :multiple-limit="10">
+          <el-option v-for="item in 60" :key="item" :label="item - 1" :value="item - 1" />
+        </el-select>
+      </el-radio>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+const emit = defineEmits(['update'])
+const props = defineProps({
+  cron: {
+    type: Object,
+    default: {
+      second: '*',
+      min: '*',
+      hour: '*',
+      day: '*',
+      month: '*',
+      week: '?',
+      year: ''
+    }
+  },
+  check: {
+    type: Function,
+    default: () => {}
+  }
+})
+const radioValue = ref(1)
+const cycle01 = ref(0)
+const cycle02 = ref(1)
+const average01 = ref(0)
+const average02 = ref(1)
+const checkboxList = ref([])
+const checkCopy = ref([0])
+const cycleTotal = computed(() => {
+  cycle01.value = props.check(cycle01.value, 0, 58)
+  cycle02.value = props.check(cycle02.value, cycle01.value + 1, 59)
+  return cycle01.value + '-' + cycle02.value
+})
+const averageTotal = computed(() => {
+  average01.value = props.check(average01.value, 0, 58)
+  average02.value = props.check(average02.value, 1, 59 - average01.value)
+  return average01.value + '/' + average02.value
+})
+const checkboxString = computed(() => {
+  return checkboxList.value.join(',')
+})
+watch(
+  () => props.cron.second,
+  (value) => changeRadioValue(value)
+)
+watch([radioValue, cycleTotal, averageTotal, checkboxString], () => onRadioChange())
+function changeRadioValue(value) {
+  if (value === '*') {
+    radioValue.value = 1
+  } else if (value.indexOf('-') > -1) {
+    const indexArr = value.split('-')
+    cycle01.value = Number(indexArr[0])
+    cycle02.value = Number(indexArr[1])
+    radioValue.value = 2
+  } else if (value.indexOf('/') > -1) {
+    const indexArr = value.split('/')
+    average01.value = Number(indexArr[0])
+    average02.value = Number(indexArr[1])
+    radioValue.value = 3
+  } else {
+    checkboxList.value = [...new Set(value.split(',').map((item) => Number(item)))]
+    radioValue.value = 4
+  }
+}
+// 单选按钮值变化时
+function onRadioChange() {
+  switch (radioValue.value) {
+    case 1:
+      emit('update', 'second', '*', 'second')
+      break
+    case 2:
+      emit('update', 'second', cycleTotal.value, 'second')
+      break
+    case 3:
+      emit('update', 'second', averageTotal.value, 'second')
+      break
+    case 4:
+      if (checkboxList.value.length === 0) {
+        checkboxList.value.push(checkCopy.value[0])
+      } else {
+        checkCopy.value = checkboxList.value
+      }
+      emit('update', 'second', checkboxString.value, 'second')
+      break
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-input-number--small,
+.el-input-number--small,
+.el-select,
+.el-select--small {
+  margin: 0 0.2rem;
+}
+.el-select,
+.el-select--small {
+  width: 18.8rem;
+}
+</style>

src/components/Crontab/week.vue

@@ -0,0 +1,191 @@
+<template>
+  <el-form size="small">
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="1"> 周，允许的通配符[, - * ? / L #] </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="2"> 不指定 </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="3">
+        周期从
+        <el-select clearable v-model="cycle01">
+          <el-option v-for="(item, index) of weekList" :key="index" :label="item.value" :value="item.key" :disabled="item.key === 7">{{
+            item.value
+          }}</el-option>
+        </el-select>
+        -
+        <el-select clearable v-model="cycle02">
+          <el-option v-for="(item, index) of weekList" :key="index" :label="item.value" :value="item.key" :disabled="item.key <= cycle01">{{
+            item.value
+          }}</el-option>
+        </el-select>
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="4">
+        第
+        <el-input-number v-model="average01" :min="1" :max="4" /> 周的
+        <el-select clearable v-model="average02">
+          <el-option v-for="item in weekList" :key="item.key" :label="item.value" :value="item.key" />
+        </el-select>
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="5">
+        本月最后一个
+        <el-select clearable v-model="weekday">
+          <el-option v-for="item in weekList" :key="item.key" :label="item.value" :value="item.key" />
+        </el-select>
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio v-model="radioValue" :label="6">
+        指定
+        <el-select class="multiselect" clearable v-model="checkboxList" placeholder="可多选" multiple :multiple-limit="6">
+          <el-option v-for="item in weekList" :key="item.key" :label="item.value" :value="item.key" />
+        </el-select>
+      </el-radio>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+const emit = defineEmits(['update'])
+const props = defineProps({
+  cron: {
+    type: Object,
+    default: {
+      second: '*',
+      min: '*',
+      hour: '*',
+      day: '*',
+      month: '*',
+      week: '?',
+      year: ''
+    }
+  },
+  check: {
+    type: Function,
+    default: () => {}
+  }
+})
+const radioValue = ref(2)
+const cycle01 = ref(2)
+const cycle02 = ref(3)
+const average01 = ref(1)
+const average02 = ref(2)
+const weekday = ref(2)
+const checkboxList = ref([])
+const checkCopy = ref([2])
+const weekList = ref([
+  { key: 1, value: '星期日' },
+  { key: 2, value: '星期一' },
+  { key: 3, value: '星期二' },
+  { key: 4, value: '星期三' },
+  { key: 5, value: '星期四' },
+  { key: 6, value: '星期五' },
+  { key: 7, value: '星期六' }
+])
+const cycleTotal = computed(() => {
+  cycle01.value = props.check(cycle01.value, 1, 6)
+  cycle02.value = props.check(cycle02.value, cycle01.value + 1, 7)
+  return cycle01.value + '-' + cycle02.value
+})
+const averageTotal = computed(() => {
+  average01.value = props.check(average01.value, 1, 4)
+  average02.value = props.check(average02.value, 1, 7)
+  return average02.value + '#' + average01.value
+})
+const weekdayTotal = computed(() => {
+  weekday.value = props.check(weekday.value, 1, 7)
+  return weekday.value + 'L'
+})
+const checkboxString = computed(() => {
+  return checkboxList.value.join(',')
+})
+watch(
+  () => props.cron.week,
+  (value) => changeRadioValue(value)
+)
+watch([radioValue, cycleTotal, averageTotal, weekdayTotal, checkboxString], () => onRadioChange())
+function changeRadioValue(value) {
+  if (value === '*') {
+    radioValue.value = 1
+  } else if (value === '?') {
+    radioValue.value = 2
+  } else if (value.indexOf('-') > -1) {
+    const indexArr = value.split('-')
+    cycle01.value = Number(indexArr[0])
+    cycle02.value = Number(indexArr[1])
+    radioValue.value = 3
+  } else if (value.indexOf('#') > -1) {
+    const indexArr = value.split('#')
+    average01.value = Number(indexArr[1])
+    average02.value = Number(indexArr[0])
+    radioValue.value = 4
+  } else if (value.indexOf('L') > -1) {
+    const indexArr = value.split('L')
+    weekday.value = Number(indexArr[0])
+    radioValue.value = 5
+  } else {
+    checkboxList.value = [...new Set(value.split(',').map((item) => Number(item)))]
+    radioValue.value = 6
+  }
+}
+function onRadioChange() {
+  if (radioValue.value === 2 && props.cron.day === '?') {
+    emit('update', 'day', '*', 'week')
+  }
+  if (radioValue.value !== 2 && props.cron.day !== '?') {
+    emit('update', 'day', '?', 'week')
+  }
+  switch (radioValue.value) {
+    case 1:
+      emit('update', 'week', '*', 'week')
+      break
+    case 2:
+      emit('update', 'week', '?', 'week')
+      break
+    case 3:
+      emit('update', 'week', cycleTotal.value, 'week')
+      break
+    case 4:
+      emit('update', 'week', averageTotal.value, 'week')
+      break
+    case 5:
+      emit('update', 'week', weekdayTotal.value, 'week')
+      break
+    case 6:
+      if (checkboxList.value.length === 0) {
+        checkboxList.value.push(checkCopy.value[0])
+      } else {
+        checkCopy.value = checkboxList.value
+      }
+      emit('update', 'week', checkboxString.value, 'week')
+      break
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-input-number--small,
+.el-input-number--small,
+.el-select,
+.el-select--small {
+  margin: 0 0.5rem;
+}
+.el-select,
+.el-select--small {
+  width: 8rem;
+}
+.el-select.multiselect,
+.el-select--small.multiselect {
+  width: 17.8rem;
+}
+</style>

src/components/Crontab/year.vue

@@ -0,0 +1,150 @@
+<template>
+  <el-form size="small">
+    <el-form-item>
+      <el-radio :label="1" v-model="radioValue"> 不填，允许的通配符[, - * /] </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio :label="2" v-model="radioValue"> 每年 </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio :label="3" v-model="radioValue">
+        周期从
+        <el-input-number v-model="cycle01" :min="fullYear" :max="maxFullYear - 1" /> -
+        <el-input-number v-model="cycle02" :min="cycle01 + 1" :max="maxFullYear" />
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio :label="4" v-model="radioValue">
+        从
+        <el-input-number v-model="average01" :min="fullYear" :max="maxFullYear - 1" /> 年开始，每
+        <el-input-number v-model="average02" :min="1" :max="10" /> 年执行一次
+      </el-radio>
+    </el-form-item>
+
+    <el-form-item>
+      <el-radio :label="5" v-model="radioValue">
+        指定
+        <el-select clearable v-model="checkboxList" placeholder="可多选" multiple :multiple-limit="8">
+          <el-option v-for="item in 9" :key="item" :value="item - 1 + fullYear" :label="item - 1 + fullYear" />
+        </el-select>
+      </el-radio>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+const emit = defineEmits(['update'])
+const props = defineProps({
+  cron: {
+    type: Object,
+    default: {
+      second: '*',
+      min: '*',
+      hour: '*',
+      day: '*',
+      month: '*',
+      week: '?',
+      year: ''
+    }
+  },
+  check: {
+    type: Function,
+    default: () => {}
+  }
+})
+const fullYear = ref(0)
+const maxFullYear = ref(0)
+const radioValue = ref(1)
+const cycle01 = ref(0)
+const cycle02 = ref(0)
+const average01 = ref(0)
+const average02 = ref(1)
+const checkboxList = ref([])
+const checkCopy = ref([])
+const cycleTotal = computed(() => {
+  cycle01.value = props.check(cycle01.value, fullYear.value, maxFullYear.value - 1)
+  cycle02.value = props.check(cycle02.value, cycle01.value + 1, maxFullYear.value)
+  return cycle01.value + '-' + cycle02.value
+})
+const averageTotal = computed(() => {
+  average01.value = props.check(average01.value, fullYear.value, maxFullYear.value - 1)
+  average02.value = props.check(average02.value, 1, 10)
+  return average01.value + '/' + average02.value
+})
+const checkboxString = computed(() => {
+  return checkboxList.value.join(',')
+})
+watch(
+  () => props.cron.year,
+  (value) => changeRadioValue(value)
+)
+watch([radioValue, cycleTotal, averageTotal, checkboxString], () => onRadioChange())
+function changeRadioValue(value) {
+  if (value === '') {
+    radioValue.value = 1
+  } else if (value === '*') {
+    radioValue.value = 2
+  } else if (value.indexOf('-') > -1) {
+    const indexArr = value.split('-')
+    cycle01.value = Number(indexArr[0])
+    cycle02.value = Number(indexArr[1])
+    radioValue.value = 3
+  } else if (value.indexOf('/') > -1) {
+    const indexArr = value.split('#')
+    average01.value = Number(indexArr[1])
+    average02.value = Number(indexArr[0])
+    radioValue.value = 4
+  } else {
+    checkboxList.value = [...new Set(value.split(',').map((item) => Number(item)))]
+    radioValue.value = 5
+  }
+}
+function onRadioChange() {
+  switch (radioValue.value) {
+    case 1:
+      emit('update', 'year', '', 'year')
+      break
+    case 2:
+      emit('update', 'year', '*', 'year')
+      break
+    case 3:
+      emit('update', 'year', cycleTotal.value, 'year')
+      break
+    case 4:
+      emit('update', 'year', averageTotal.value, 'year')
+      break
+    case 5:
+      if (checkboxList.value.length === 0) {
+        checkboxList.value.push(checkCopy.value[0])
+      } else {
+        checkCopy.value = checkboxList.value
+      }
+      emit('update', 'year', checkboxString.value, 'year')
+      break
+  }
+}
+onMounted(() => {
+  fullYear.value = Number(new Date().getFullYear())
+  maxFullYear.value = fullYear.value + 10
+  cycle01.value = fullYear.value
+  cycle02.value = cycle01.value + 1
+  average01.value = fullYear.value
+  checkCopy.value = [fullYear.value]
+})
+</script>
+
+<style lang="scss" scoped>
+.el-input-number--small,
+.el-input-number--small,
+.el-select,
+.el-select--small {
+  margin: 0 0.2rem;
+}
+.el-select,
+.el-select--small {
+  width: 18.8rem;
+}
+</style>

src/views/monitor/job/index.vue

@@ -201,12 +201,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>
+                <template #append>
                   <el-button type="primary" @click="handleShowCron" style="width: 80px">
                     生成表达式
                     <el-icon><time /></el-icon>
                   </el-button>
-                </template> -->
+                </template>
               </el-input>
             </el-form-item>
           </el-col>
@@ -255,9 +255,8 @@
       </template>
     </el-dialog>
 
-    <el-dialog title="Cron表达式生成器" v-model="openCron" destroy-on-close>
+    <el-dialog title="Cron表达式生成器" v-model="openCron" append-to-body destroy-on-close>
-      <!-- 使用组件例子 -->
+      <crontab ref="crontabRef" @hide="openCron = false" @fill="crontabFill" :expression="expression"></crontab>
-      <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">
@@ -284,7 +283,8 @@
 <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 Vue3CronCore from '@/components/vue3-cron-core/Index.vue'
+// import Vue3CronCore from '@/components/vue3-cron-core/Index.vue'
+import Crontab from '@/components/Crontab'
 
 const router = useRouter()
 const { proxy } = getCurrentInstance()
@@ -345,7 +345,7 @@ const state = reactive({
     className: [{ required: true, message: '任务类名不能为空', trigger: 'blur' }],
     triggerType: [{ required: true, message: '请选择触发器类型', trigger: 'blur' }],
     apiUrl: [{ required: true, message: '请输入apiUrl地址', trigger: 'blur' }],
-    cron: [{ required: true, message: '请输入cron表达式', trigger: 'blur' }],
+    cron: [{ required: true, message: 'cron表达式不能为空', trigger: 'change' }],
     beginTime: [{ required: false, message: '请选择开始日期', trigger: 'blur' }],
     endTime: [{ required: false, message: '请选择结束日期', trigger: 'blur' }],
     intervalSecond: [{ message: '请设置执行间隔', type: 'number', trigger: 'blur' }]
@@ -397,15 +397,14 @@ function handleUpdate(row) {
 
 /** cron表达式按钮操作 */
 function handleShowCron() {
-  // expression.value = form.value.cron
+  expression.value = form.value.cron
   openCron.value = true
 }
 /** 确定后回传值 */
-const changeCron = (val) => {
+function crontabFill(value) {
-  if (typeof val !== 'string') return false
+  form.value.cron = value
-  openCron.value = false
-  form.value.cron = val
 }
+
 // 启动按钮
 function handleStart(row) {
   startTasks(row.id).then((response) => {