CronBuilder Cron 表达式构建器

Cron 表达式可视化构建器组件。提供「简单设置」和「Cron 专家模式」两种编辑方式。简单模式通过下拉选择自动生成 Quartz 6 段 Cron 表达式；专家模式直接编写 Cron 表达式。支持自动解析已有表达式回填简单模式。

• 基础用法
• Props
• Events
• 简单模式
• 专家模式
• 在 AiCrudPage 中使用
• 注意事项

基础用法

<template>
  <CronBuilder v-model="cronExpression" />
  <p>当前 Cron: {{ cronExpression }}</p>
</template>

<script setup>
import { ref } from 'vue'
import CronBuilder from '@/components/job/CronBuilder.vue'

const cronExpression = ref('0 0 8 * * ?')
</script>

Props

属性	类型	默认值	说明
modelValue	String	''	Cron 表达式（v-model 绑定），Quartz 6 段格式

Events

事件名	参数	说明
update:modelValue	(cron: string)	Cron 表达式变化
modeChange	(mode: 'simple' | 'expert')	模式切换时触发

简单模式

通过下拉选择生成 Cron 表达式，支持的频率类型：

频率类型	说明	示例结果
interval	每隔 N 分钟（1-59）	0 0/5 * * * ?
hourly	每小时第 N 分钟	0 30 * * * ?
daily	每天指定时间	0 0 8 * * ?
weekly	每周指定星期和时间	0 0 9 ? * MON
monthly	每月指定日期和时间	0 0 10 15 * ?

专家模式

直接输入 6 段 Quartz Cron 表达式：

秒 分 时 日 月 周
0  0  8  *  *  ?    → 每天 8:00:00
0  */5 * * * ?      → 每 5 分钟
0  30 9 ? * MON-FRI → 工作日 9:30

在 AiCrudPage 中使用

const editSchema = [
  { field: 'cronExpression', label: '执行周期', type: 'input',
    slot: 'cron', span: 2,
    rules: [{ required: true, message: '请设置执行周期' }] },
]

<AiCrudPage :edit-schema="editSchema">
  <template #form-cron="{ value, updateValue }">
    <CronBuilder :model-value="value" @update:model-value="updateValue" />
  </template>
</AiCrudPage>

注意事项

• 使用 Quartz 6 段格式（秒 分 时 日 月 周），非标准 Linux 5 段格式
• 传入已有表达式时，组件会尝试解析并回填简单模式的选项
• 无法解析的表达式会自动切换到专家模式