Skip to content

Commit

Permalink
feat(job): 支持可视化生成 CRON 表达式
Browse files Browse the repository at this point in the history
  • Loading branch information
KAI authored and Charles7c committed Oct 10, 2024
1 parent 4a79040 commit adcb9fe
Show file tree
Hide file tree
Showing 17 changed files with 1,271 additions and 20 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"animate.css": "^4.1.1",
"axios": "^0.27.2",
"codemirror": "^6.0.1",
"cron-parser": "^4.9.0",
"crypto-js": "^4.2.0",
"dayjs": "^1.11.4",
"echarts": "^5.4.2",
Expand Down
88 changes: 88 additions & 0 deletions src/components/GenCron/CronForm/component/day-form.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<template>
<div class="cron-inner-config-list">
<a-radio-group v-model="type">
<div class="item">
<a-radio :value="TypeEnum.unset" v-bind="beforeRadioAttrs">不设置</a-radio>
<span class="tip-info">日和周只能设置其中之一</span>
</div>
<div class="item">
<a-radio :value="TypeEnum.every" v-bind="beforeRadioAttrs">每日</a-radio>
</div>
<div class="item">
<a-radio :value="TypeEnum.range" v-bind="beforeRadioAttrs">区间</a-radio>
<span>从</span>
<a-input-number v-model="valueRange.start" v-bind="inputNumberAttrs" />
<span>日 至</span>
<a-input-number v-model="valueRange.end" v-bind="inputNumberAttrs" />
<span>日</span>
</div>
<div class="item">
<a-radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</a-radio>
<span>从</span>
<a-input-number v-model="valueLoop.start" v-bind="typeLoopAttrs" />
<span>日开始, 间隔</span>
<a-input-number v-model="valueLoop.interval" v-bind="typeLoopAttrs" />
<span>日</span>
</div>
<div class="item">
<a-radio :value="TypeEnum.last" v-bind="beforeRadioAttrs">最后一日</a-radio>
</div>
<div class="item">
<a-radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs">指定</a-radio>
<div class="list">
<a-checkbox-group v-model="valueList">
<a-grid :cols="11">
<a-grid-item v-for="i in specifyRange" :key="i">
<a-checkbox :value="i" v-bind="typeSpecifyAttrs">
{{ i }}
</a-checkbox>
</a-grid-item>
</a-grid>
</a-checkbox-group>
</div>
</div>
</a-radio-group>
</div>
</template>

<script lang="ts">
import { TypeEnum, useFormProps, useFormSetup, useFromEmits } from './use-mixin'
export default defineComponent({
name: 'DayForm',
props: useFormProps({
defaultValue: '*',
props: {
week: { type: String, default: '?' }
}
}),
emits: useFromEmits(),
setup(props, context) {
const isDisabled = computed(() => {
return (props.week && props.week !== '?') || props.disabled
})
const setup = useFormSetup(props, context, {
defaultValue: '*',
valueWork: 1,
minValue: 1,
maxValue: 31,
valueRange: { start: 1, end: 31 },
valueLoop: { start: 1, interval: 1 },
disabled: isDisabled
})
const typeWorkAttrs = computed(() => ({
disabled: setup.type.value !== TypeEnum.work || props.disabled || isDisabled.value,
...setup.inputNumberAttrs.value
}))
watch(
() => props.week,
() => {
setup.updateValue(isDisabled.value ? '?' : setup.computeValue.value)
}
)
return { ...setup, typeWorkAttrs }
}
})
</script>
60 changes: 60 additions & 0 deletions src/components/GenCron/CronForm/component/hour-form.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<template>
<div class="cron-inner-config-list">
<a-radio-group v-model="type">
<div class="item">
<a-radio :value="TypeEnum.every" v-bind="beforeRadioAttrs">每时</a-radio>
</div>
<div class="item">
<a-radio :value="TypeEnum.range" v-bind="beforeRadioAttrs">区间</a-radio>
<span>从</span>
<a-input-number v-model="valueRange.start" v-bind="typeRangeAttrs" />
<span>时 至</span>
<a-input-number v-model="valueRange.end" v-bind="typeRangeAttrs" />
<span>时</span>
</div>
<div class="item">
<a-radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</a-radio>
<span>从</span>
<a-input-number v-model="valueLoop.start" v-bind="typeLoopAttrs" />
<span>时开始, 间隔</span>
<a-input-number v-model="valueLoop.interval" v-bind="typeLoopAttrs" />
<span>时</span>
</div>
<div class="item">
<a-radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs">指定</a-radio>
<div class="list">
<a-checkbox-group v-model="valueList">
<a-grid :cols="12">
<a-grid-item v-for="i in specifyRange" :key="i">
<a-checkbox :value="i" v-bind="typeSpecifyAttrs">
{{ i }}
</a-checkbox>
</a-grid-item>
</a-grid>
</a-checkbox-group>
</div>
</div>
</a-radio-group>
</div>
</template>

<script lang="ts">
import { useFormProps, useFormSetup, useFromEmits } from './use-mixin'
export default defineComponent({
name: 'HourForm',
props: useFormProps({
defaultValue: '*'
}),
emits: useFromEmits(),
setup(props, context) {
return useFormSetup(props, context, {
defaultValue: '*',
minValue: 0,
maxValue: 23,
valueRange: { start: 0, end: 23 },
valueLoop: { start: 0, interval: 1 }
})
}
})
</script>
60 changes: 60 additions & 0 deletions src/components/GenCron/CronForm/component/minute-form.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<template>
<div class="cron-inner-config-list">
<a-radio-group v-model="type">
<div class="item">
<a-radio :value="TypeEnum.every" v-bind="beforeRadioAttrs">每分</a-radio>
</div>
<div class="item">
<a-radio :value="TypeEnum.range" v-bind="beforeRadioAttrs">区间</a-radio>
<span>从</span>
<a-input-number v-model="valueRange.start" v-bind="typeRangeAttrs" />
<span>分 至</span>
<a-input-number v-model="valueRange.end" v-bind="typeRangeAttrs" />
<span>分</span>
</div>
<div class="item">
<a-radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</a-radio>
<span>从</span>
<a-input-number v-model="valueLoop.start" v-bind="typeLoopAttrs" />
<span>分开始, 间隔</span>
<a-input-number v-model="valueLoop.interval" v-bind="typeLoopAttrs" />
<span>分</span>
</div>
<div class="item">
<a-radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs">指定</a-radio>
<div class="list">
<a-checkbox-group v-model="valueList">
<a-grid :cols="10">
<a-grid-item v-for="i in specifyRange" :key="i">
<a-checkbox :value="i" v-bind="typeSpecifyAttrs">
{{ i }}
</a-checkbox>
</a-grid-item>
</a-grid>
</a-checkbox-group>
</div>
</div>
</a-radio-group>
</div>
</template>

<script lang="ts">
import { useFormProps, useFormSetup, useFromEmits } from './use-mixin'
export default defineComponent({
name: 'MinuteForm',
props: useFormProps({
defaultValue: '*'
}),
emits: useFromEmits(),
setup(props, context) {
return useFormSetup(props, context, {
defaultValue: '*',
minValue: 0,
maxValue: 59,
valueRange: { start: 0, end: 59 },
valueLoop: { start: 0, interval: 1 }
})
}
})
</script>
60 changes: 60 additions & 0 deletions src/components/GenCron/CronForm/component/month-form.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<template>
<div class="cron-inner-config-list">
<a-radio-group v-model="type">
<div class="item">
<a-radio :value="TypeEnum.every" v-bind="beforeRadioAttrs">每月</a-radio>
</div>
<div class="item">
<a-radio :value="TypeEnum.range" v-bind="beforeRadioAttrs">区间</a-radio>
<span>从</span>
<a-input-number v-model="valueRange.start" v-bind="typeRangeAttrs" />
<span>月 至</span>
<a-input-number v-model="valueRange.end" v-bind="typeRangeAttrs" />
<span>月</span>
</div>
<div class="item">
<a-radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</a-radio>
<span>从</span>
<a-input-number v-model="valueLoop.start" v-bind="typeLoopAttrs" />
<span>月开始, 间隔</span>
<a-input-number v-model="valueLoop.interval" v-bind="typeLoopAttrs" />
<span>月</span>
</div>
<div class="item">
<a-radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs">指定</a-radio>
<div class="list">
<a-checkbox-group v-model="valueList">
<a-grid :cols="12">
<a-grid-item v-for="i in specifyRange" :key="i">
<a-checkbox :value="i" v-bind="typeSpecifyAttrs">
{{ i }}
</a-checkbox>
</a-grid-item>
</a-grid>
</a-checkbox-group>
</div>
</div>
</a-radio-group>
</div>
</template>

<script lang="ts">
import { useFormProps, useFormSetup, useFromEmits } from './use-mixin'
export default defineComponent({
name: 'MonthForm',
props: useFormProps({
defaultValue: '*'
}),
emits: useFromEmits(),
setup(props, context) {
return useFormSetup(props, context, {
defaultValue: '*',
minValue: 1,
maxValue: 12,
valueRange: { start: 1, end: 12 },
valueLoop: { start: 1, interval: 1 }
})
}
})
</script>
60 changes: 60 additions & 0 deletions src/components/GenCron/CronForm/component/second-form.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<template>
<div class="cron-inner-config-list">
<a-radio-group v-model="type">
<div class="item">
<a-radio :value="TypeEnum.every" v-bind="beforeRadioAttrs">每秒</a-radio>
</div>
<div class="item">
<a-radio :value="TypeEnum.range" v-bind="beforeRadioAttrs">区间</a-radio>
<span>从</span>
<a-input-number v-model="valueRange.start" v-bind="typeRangeAttrs" />
<span>秒 至</span>
<a-input-number v-model="valueRange.end" v-bind="typeRangeAttrs" />
<span>秒</span>
</div>
<div class="item">
<a-radio :value="TypeEnum.loop" v-bind="beforeRadioAttrs">循环</a-radio>
<span>从</span>
<a-input-number v-model="valueLoop.start" v-bind="typeLoopAttrs" />
<span>秒开始, 间隔</span>
<a-input-number v-model="valueLoop.interval" v-bind="typeLoopAttrs" />
<span>秒</span>
</div>
<div class="item">
<a-radio :value="TypeEnum.specify" v-bind="beforeRadioAttrs">指定</a-radio>
<div class="list">
<a-checkbox-group v-model="valueList">
<a-grid :cols="10">
<a-grid-item v-for="i in specifyRange" :key="i">
<a-checkbox :value="i" v-bind="typeSpecifyAttrs">
{{ i }}
</a-checkbox>
</a-grid-item>
</a-grid>
</a-checkbox-group>
</div>
</div>
</a-radio-group>
</div>
</template>

<script lang="ts">
import { useFormProps, useFormSetup, useFromEmits } from './use-mixin'
export default defineComponent({
name: 'SecondForm',
props: useFormProps({
defaultValue: '*'
}),
emits: useFromEmits(),
setup(props, context) {
return useFormSetup(props, context, {
defaultValue: '*',
minValue: 0,
maxValue: 59,
valueRange: { start: 0, end: 59 },
valueLoop: { start: 0, interval: 1 }
})
}
})
</script>
Loading

0 comments on commit adcb9fe

Please sign in to comment.