[Fix][UI] Fix bug where crontab special of month and year (#11661)

dolphinscheduler-ui/src/components/crontab/common.ts

@@ -16,6 +16,7 @@
  */
 
 import _ from 'lodash'
+import type { ISpecialSelect } from './types'
 
 const timeI18n = {
   second: {
@@ -190,4 +191,40 @@ const isWeek = (str: string) => {
   return flag
 }
 
-export { isStr, isWeek, timeI18n, week, specificWeek, lastWeeks }
+const range = (start: number, stop: number, step = 1) =>
+  Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step)
+
+const specificList: ISpecialSelect = {
+  60: _.map(range(0, 59), (v) => {
+    return {
+      value: v + '',
+      label: v + ''
+    }
+  }),
+  24: _.map(range(0, 23), (v) => {
+    return {
+      value: v + '',
+      label: v + ''
+    }
+  }),
+  12: _.map(range(1, 12), (v) => {
+    return {
+      value: v + '',
+      label: v + ''
+    }
+  }),
+  year: _.map(range(2018, 2030), (v) => {
+    return {
+      value: v + '',
+      label: v + ''
+    }
+  }),
+  day: _.map(range(1, 31), (v) => {
+    return {
+      value: v + '',
+      label: v + ''
+    }
+  })
+}
+
+export { isStr, isWeek, timeI18n, week, specificWeek, lastWeeks, specificList }

dolphinscheduler-ui/src/components/crontab/index.tsx

@@ -93,18 +93,27 @@ export default defineComponent({
           <CrontabTime
             v-model:timeValue={this.secondRef}
             timeI18n={timeI18n.second}
+            timeSpecial={60}
+            timeMin={0}
+            timeMax={59}
           />
         </NTabPane>
         <NTabPane name='minute' tab={t('crontab.minute')}>
           <CrontabTime
             v-model:timeValue={this.minuteRef}
             timeI18n={timeI18n.minute}
+            timeSpecial={60}
+            timeMin={0}
+            timeMax={59}
           />
         </NTabPane>
         <NTabPane name='hour' tab={t('crontab.hour')}>
           <CrontabTime
             v-model:timeValue={this.hourRef}
             timeI18n={timeI18n.hour}
+            timeSpecial={24}
+            timeMin={0}
+            timeMax={23}
           />
         </NTabPane>
         <NTabPane name='day' tab={t('crontab.day')}>
@@ -117,12 +126,22 @@ export default defineComponent({
           <CrontabTime
             v-model:timeValue={this.monthRef}
             timeI18n={timeI18n.month}
+            timeSpecial={12}
+            timeMin={0}
+            timeMax={12}
           />
         </NTabPane>
         <NTabPane name='year' tab={t('crontab.year')}>
           <CrontabTime
             v-model:timeValue={this.yearRef}
             timeI18n={timeI18n.year}
+            timeSpecial={'year'}
+            timeMin={0}
+            timeMax={2030}
+            intervalPerform={1}
+            intervalStart={2019}
+            cycleStart={2019}
+            cycleEnd={2019}
           />
         </NTabPane>
       </NTabs>

dolphinscheduler-ui/src/components/crontab/modules/day.tsx

@@ -18,7 +18,14 @@
 import { defineComponent, onMounted, PropType, ref, watch } from 'vue'
 import { NInputNumber, NRadio, NRadioGroup, NSelect } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
-import { isStr, isWeek, week, specificWeek, lastWeeks } from '../common'
+import {
+  isStr,
+  isWeek,
+  week,
+  specificWeek,
+  lastWeeks,
+  specificList
+} from '../common'
 import styles from '../index.module.scss'
 
 const props = {
@@ -39,11 +46,6 @@ export default defineComponent({
   setup(props, ctx) {
     const { t } = useI18n()
 
-    const options = Array.from({ length: 60 }, (x, i) => ({
-      label: i.toString(),
-      value: i
-    }))
-
     const weekOptions = week.map((v) => ({
       label: t(v.label),
       value: v.value
@@ -430,7 +432,6 @@ export default defineComponent({
     onMounted(() => analyticalValue())
 
     return {
-      options,
       weekOptions,
       lastWeekOptions,
       radioRef,
@@ -551,7 +552,7 @@ export default defineComponent({
               <NSelect
                 style={{ width: '300px' }}
                 multiple
-                options={this.options}
+                options={specificList.day}
                 placeholder={t('crontab.specific_day_tip')}
                 v-model:value={this.WkspecificDayRef}
                 onUpdateValue={this.onWkspecificDay}

dolphinscheduler-ui/src/components/crontab/modules/time.tsx

@@ -20,10 +20,38 @@ import { defineComponent, onMounted, PropType, ref, toRefs, watch } from 'vue'
 import { NInputNumber, NRadio, NRadioGroup, NSelect } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { ICrontabI18n } from '../types'
-import { isStr } from '../common'
+import { isStr, specificList } from '../common'
 import styles from '../index.module.scss'
 
 const props = {
+  timeMin: {
+    type: Number as PropType<number>,
+    default: 0
+  },
+  timeMax: {
+    type: Number as PropType<number>,
+    default: 60
+  },
+  intervalPerform: {
+    type: Number as PropType<number>,
+    default: 5
+  },
+  intervalStart: {
+    type: Number as PropType<number>,
+    default: 3
+  },
+  cycleStart: {
+    type: Number as PropType<number>,
+    default: 1
+  },
+  cycleEnd: {
+    type: Number as PropType<number>,
+    default: 1
+  },
+  timeSpecial: {
+    type: Number as PropType<number | string>,
+    default: 60
+  },
   timeValue: {
     type: String as PropType<string>,
     default: '*'
@@ -46,11 +74,11 @@ export default defineComponent({
 
     const timeRef = ref()
     const radioRef = ref()
-    const intervalStartRef = ref(0)
-    const intervalPerformRef = ref(0)
+    const intervalStartRef = ref(props.intervalStart)
+    const intervalPerformRef = ref(props.intervalPerform)
     const specificTimesRef = ref<Array<number>>([])
-    const cycleStartRef = ref(0)
-    const cycleEndRef = ref(0)
+    const cycleStartRef = ref(props.cycleStart)
+    const cycleEndRef = ref(props.cycleEnd)
 
     /**
      * Parse parameter value
@@ -73,8 +101,10 @@ export default defineComponent({
 
       // Positive integer (times)
       if (
-        ($timeVal.length === 1 && _.isInteger(parseInt($timeVal))) ||
-        ($timeVal.length === 2 && _.isInteger(parseInt($timeVal)))
+        ($timeVal.length === 1 ||
+          $timeVal.length === 2 ||
+          $timeVal.length === 4) &&
+        _.isInteger(parseInt($timeVal))
       ) {
         radioRef.value = 'specificTime'
         specificTimesRef.value = [parseInt($timeVal)]
@@ -232,9 +262,9 @@ export default defineComponent({
             <div class={styles['item-text']}>{t(this.timeI18n!.every)}</div>
             <div class={styles['number-input']}>
               <NInputNumber
-                defaultValue={0}
-                min={0}
-                max={59}
+                defaultValue={5}
+                min={this.timeMin}
+                max={this.timeMax}
                 v-model:value={this.intervalPerformRef}
                 onUpdateValue={this.onIntervalPerform}
               />
@@ -244,9 +274,9 @@ export default defineComponent({
             </div>
             <div class={styles['number-input']}>
               <NInputNumber
-                defaultValue={0}
-                min={0}
-                max={59}
+                defaultValue={3}
+                min={this.timeMin}
+                max={this.timeMax}
                 v-model:value={this.intervalStartRef}
                 onUpdateValue={this.onIntervalStart}
               />
@@ -261,7 +291,7 @@ export default defineComponent({
             <div class={styles['select-input']}>
               <NSelect
                 multiple
-                options={this.options}
+                options={specificList[this.timeSpecial]}
                 placeholder={t(this.timeI18n!.specificTimeTip)}
                 v-model:value={this.specificTimesRef}
                 onUpdateValue={this.onSpecificTimes}
@@ -275,9 +305,9 @@ export default defineComponent({
             <div>{t(this.timeI18n!.cycleFrom)}</div>
             <div class={styles['number-input']}>
               <NInputNumber
-                defaultValue={0}
-                min={0}
-                max={59}
+                defaultValue={1}
+                min={this.timeMin}
+                max={this.timeMax}
                 v-model:value={this.cycleStartRef}
                 onUpdateValue={this.onCycleStart}
               />
@@ -285,9 +315,9 @@ export default defineComponent({
             <div>{t(this.timeI18n!.to)}</div>
             <div class={styles['number-input']}>
               <NInputNumber
-                defaultValue={0}
-                min={0}
-                max={59}
+                defaultValue={1}
+                min={this.timeMin}
+                max={this.timeMax}
                 v-model:value={this.cycleEndRef}
                 onUpdateValue={this.onCycleEnd}
               />

dolphinscheduler-ui/src/components/crontab/types.ts

@@ -27,4 +27,11 @@ interface ICrontabI18n {
   time: string
 }
 
-export { ICrontabI18n }
+interface ISpecialSelect {
+  [key: number | string]: {
+    label: string
+    value: string
+  }[]
+}
+
+export { ICrontabI18n, ISpecialSelect }