BizCronInput 定时表达式输入

Cron 定时表达式可视化配置：5 字段（分时日月周）每字段支持「每一 / 指定 / 区间 / 循环」四种方式，与表达式字符串双向同步（可视化结果规范化回发）；无法解析的高级表达式自动回退为输入框直编模式。内建「未来 N 次执行」预览（分钟步进匹配；日与周同时受限时按标准 cron 的 OR 语义）。定时任务调度、报表订阅、告警规则、数据同步周期。

周字段约定：1=周一 … 7=周日（区别于 Linux cron 的 0=周日）。

基础用法

v-model 双向绑定 + change 轨迹 + 执行预览。

<script setup lang="ts">
/** 场景：定时任务基础配置——可视化 5 字段与表达式双向同步，change 记录轨迹 */
import { ref } from 'vue'
import { BizCronInput } from 'vue3-ep-biz-lib'

const expression = ref('0 0 * * *')
const logs = ref<string[]>([])

const onChange = (value: string): void => {
  logs.value.unshift(`表达式更新为：${value}`)
}
</script>

<template>
  <div style="max-width: 760px">
    <BizCronInput v-model="expression" @change="onChange" />
    <div style="margin-top: 10px; font-size: 13px; color: var(--el-text-color-secondary)">
      <div>当前 v-model 值：<code>{{ expression }}</code></div>
      <div v-for="(log, i) in logs.slice(0, 3)" :key="i">{{ log }}</div>
    </div>
  </div>
</template>

常用预设

内置每天 / 每小时 / 工作日等预设一键套用，再按周字段微调。

<script setup lang="ts">
/** 场景：报表订阅——常用预设一键套用，再按周字段微调指定周一 / 周三 / 周五 */
import { ref } from 'vue'
import { BizCronInput } from 'vue3-ep-biz-lib'

const expression = ref('0 9 * * 1-5')
</script>

<template>
  <div style="max-width: 760px">
    <BizCronInput v-model="expression" />
  </div>
</template>

高级表达式直编

0/30 9-18 * * 1-5（工作日白天每 30 分钟）等复杂组合直接写在输入框，组件尽量解析回可视化状态。

<script setup lang="ts">
/** 场景：高级表达式直编——可视化无法覆盖的组合（工作日白天每 30 分钟）直接写在输入框 */
import { ref } from 'vue'
import { ElAlert } from 'element-plus'
import { BizCronInput } from 'vue3-ep-biz-lib'

const expression = ref('0/30 9-18 * * 1-5')
</script>

<template>
  <div style="max-width: 760px">
    <BizCronInput v-model="expression" />
    <ElAlert
      style="margin-top: 10px"
      type="info"
      :closable="false"
      show-icon
      title="组件会尽量把表达式解析回可视化状态；无法解析时进入高级模式（黄色提示条），仅输入框可编辑，预览区停用"
    />
  </div>
</template>

任务调度表单

任务名 + 调度周期组成的新建任务表单，preview-count 收紧预览条数。

<script setup lang="ts">
/** 场景：数据同步任务新建——任务名 + 调度表达式 + 预览次数收紧为 3 次 */
import { ref } from 'vue'
import { ElButton, ElForm, ElFormItem, ElInput, ElMessage } from 'element-plus'
import { BizCronInput } from 'vue3-ep-biz-lib'

const taskName = ref('会员数据同步')
const expression = ref('0 2 * * *')

const submit = (): void => {
  if (!taskName.value.trim()) {
    ElMessage.warning('请填写任务名称')
    return
  }
  ElMessage.success(`任务「${taskName.value}」已按 ${expression.value} 创建`)
}
</script>

<template>
  <div style="max-width: 760px">
    <ElForm label-width="90px">
      <ElFormItem label="任务名称">
        <ElInput v-model="taskName" placeholder="如：会员数据同步" style="width: 320px" />
      </ElFormItem>
      <ElFormItem label="调度周期">
        <BizCronInput v-model="expression" :preview-count="3" />
      </ElFormItem>
      <ElFormItem>
        <ElButton type="primary" @click="submit">创建任务</ElButton>
      </ElFormItem>
    </ElForm>
  </div>
</template>

调度预检（expose）

validate() 校验表达式可解析性；getNextFireTimes(n) 取未来 n 次执行时间。

<script setup lang="ts">
/** 场景：调度预检——expose validate() 与 getNextFireTimes(n) 在保存前做一次自检 */
import { ref } from 'vue'
import { ElButton, ElMessage, ElTag } from 'element-plus'
import { BizCronInput } from 'vue3-ep-biz-lib'
import type { BizCronInputInstance } from 'vue3-ep-biz-lib'

const inputRef = ref<BizCronInputInstance>()
const expression = ref('0 0 1 * *')
const nextTen = ref<Date[]>([])

const pad = (n: number): string => String(n).padStart(2, '0')

const precheck = (): void => {
  const result = inputRef.value?.validate()
  if (!result?.valid) {
    ElMessage.error(result?.message ?? '表达式不合法')
    return
  }
  nextTen.value = inputRef.value?.getNextFireTimes(10) ?? []
}
</script>

<template>
  <div style="max-width: 760px">
    <BizCronInput ref="inputRef" v-model="expression" />
    <div style="margin-top: 10px; display: flex; gap: 8px; align-items: center">
      <ElButton type="primary" size="small" @click="precheck">预检未来 10 次</ElButton>
      <ElTag v-for="(d, i) in nextTen" :key="i" size="small" type="info">
        {{ d.getFullYear() }}-{{ pad(d.getMonth() + 1) }}-{{ pad(d.getDate()) }} {{ pad(d.getHours()) }}:{{ pad(d.getMinutes()) }}
      </ElTag>
    </div>
  </div>
</template>

只读回显

disabled 禁用全部编辑入口，仅保留预览。

<script setup lang="ts">
/** 场景：任务详情只读回显——禁用全部编辑入口，仅保留预览 */
import { ref } from 'vue'
import { BizCronInput } from 'vue3-ep-biz-lib'

const expression = ref('0 9 * * 1-5')
</script>

<template>
  <div style="max-width: 760px">
    <BizCronInput v-model="expression" disabled />
  </div>
</template>

Props

属性名	类型	默认值	说明
model-value / v-model	`string`	`''`	Cron 表达式（5 段空格分隔）
disabled	`boolean`	`false`	禁用
preview-count	`number`	`5`	预览的未来执行次数
preview-days	`number`	`370`	预览扫描天数上限（防止永不匹配表达式空转）

Events

事件名	参数	说明
update:model-value	`(value: string)`	表达式更新（可视化变化后输出规范化结果）
change	`(value: string)`	表达式变化（含高级模式直编）

Expose

名称	类型	说明
validate	`() => { valid: boolean; message: string }`	校验表达式可解析性
getNextFireTimes	`(count?: number) => Date[]`	从当前时刻起未来 count 次执行时间

BizCronInput 定时表达式输入 ​

基础用法 ​

常用预设 ​

高级表达式直编 ​

任务调度表单 ​

调度预检（expose） ​

只读回显 ​

Props ​

Events ​

Expose ​