xdz-pc/src/components/bpmnProcessDesigner/package/penal/time-event-config/CycleConfig.vue

<template>
  <el-tabs v-model="tab">
    <el-tab-pane label="CRON表达式" name="cron">
      <div style="margin-bottom: 10px">
        <el-input
          v-model="cronStr"
          readonly
          style="width: 400px; font-weight: bold"
          :key="'cronStr'"
        />
      </div>
      <div style="display: flex; gap: 8px; margin-bottom: 8px">
        <el-input v-model="fields.second" placeholder="秒" style="width: 80px" :key="'second'" />
        <el-input v-model="fields.minute" placeholder="分" style="width: 80px" :key="'minute'" />
        <el-input v-model="fields.hour" placeholder="时" style="width: 80px" :key="'hour'" />
        <el-input v-model="fields.day" placeholder="天" style="width: 80px" :key="'day'" />
        <el-input v-model="fields.month" placeholder="月" style="width: 80px" :key="'month'" />
        <el-input v-model="fields.week" placeholder="周" style="width: 80px" :key="'week'" />
        <el-input v-model="fields.year" placeholder="年" style="width: 80px" :key="'year'" />
      </div>
      <el-tabs v-model="activeField" type="card" style="margin-bottom: 8px">
        <el-tab-pane v-for="f in cronFieldList" :label="f.label" :name="f.key" :key="f.key">
          <div style="margin-bottom: 8px">
            <el-radio-group v-model="cronMode[f.key]" :key="'radio-' + f.key">
              <el-radio label="every" :key="'every-' + f.key">每{{ f.label }}</el-radio>
              <el-radio label="range" :key="'range-' + f.key"
                >从
                <el-input-number
                  v-model="cronRange[f.key][0]"
                  :min="f.min"
                  :max="f.max"
                  size="small"
                  style="width: 60px"
                  :key="'range0-' + f.key"
                />
                到
                <el-input-number
                  v-model="cronRange[f.key][1]"
                  :min="f.min"
                  :max="f.max"
                  size="small"
                  style="width: 60px"
                  :key="'range1-' + f.key"
                />
                之间每{{ f.label }}</el-radio
              >
              <el-radio label="step" :key="'step-' + f.key"
                >从第
                <el-input-number
                  v-model="cronStep[f.key][0]"
                  :min="f.min"
                  :max="f.max"
                  size="small"
                  style="width: 60px"
                  :key="'step0-' + f.key"
                />
                开始每
                <el-input-number
                  v-model="cronStep[f.key][1]"
                  :min="1"
                  :max="f.max"
                  size="small"
                  style="width: 60px"
                  :key="'step1-' + f.key"
                />
                {{ f.label }}</el-radio
              >
              <el-radio label="appoint" :key="'appoint-' + f.key">指定</el-radio>
            </el-radio-group>
          </div>
          <div v-if="cronMode[f.key] === 'appoint'">
            <el-checkbox-group v-model="cronAppoint[f.key]" :key="'group-' + f.key">
              <el-checkbox
                v-for="n in f.max + 1"
                :label="pad(n - 1)"
                :key="'cb-' + f.key + '-' + (n - 1)"
                >{{ pad(n - 1) }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
    <el-tab-pane label="标准格式" name="iso" :key="'iso-tab'">
      <div style="margin-bottom: 10px">
        <el-input
          v-model="isoStr"
          placeholder="如R1/2025-05-21T21:59:54/P3DT30M30S"
          style="width: 400px; font-weight: bold"
          :key="'isoStr'"
        />
      </div>
      <div style="margin-bottom: 10px"
        >循环次数：<el-input-number v-model="repeat" :min="1" style="width: 100px" :key="'repeat'"
      /></div>
      <div style="margin-bottom: 10px"
        >日期时间：<el-date-picker
          v-model="isoDate"
          type="datetime"
          placeholder="选择日期时间"
          style="width: 200px"
          :key="'isoDate'"
      /></div>
      <div style="margin-bottom: 10px"
        >当前时长：<el-input
          v-model="isoDuration"
          placeholder="如P3DT30M30S"
          style="width: 200px"
          :key="'isoDuration'"
      /></div>
      <div>
        <div
          >秒：<el-button
            v-for="s in [5, 10, 30, 50]"
            @click="setDuration('S', s)"
            :key="'sec-' + s"
            >{{ s }}</el-button
          >自定义</div
        >
        <div
          >分：<el-button
            v-for="m in [5, 10, 30, 50]"
            @click="setDuration('M', m)"
            :key="'min-' + m"
            >{{ m }}</el-button
          >自定义</div
        >
        <div
          >小时：<el-button
            v-for="h in [4, 8, 12, 24]"
            @click="setDuration('H', h)"
            :key="'hour-' + h"
            >{{ h }}</el-button
          >自定义</div
        >
        <div
          >天：<el-button
            v-for="d in [1, 2, 3, 4]"
            @click="setDuration('D', d)"
            :key="'day-' + d"
            >{{ d }}</el-button
          >自定义</div
        >
        <div
          >月：<el-button
            v-for="mo in [1, 2, 3, 4]"
            @click="setDuration('M', mo)"
            :key="'mon-' + mo"
            >{{ mo }}</el-button
          >自定义</div
        >
        <div
          >年：<el-button
            v-for="y in [1, 2, 3, 4]"
            @click="setDuration('Y', y)"
            :key="'year-' + y"
            >{{ y }}</el-button
          >自定义</div
        >
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import { ref, watch, computed } from 'vue'
const props = defineProps({ value: String })
const emit = defineEmits(['change'])

const tab = ref('cron')
const cronStr = ref(props.value || '* * * * * ?')
const fields = ref({
  second: '*',
  minute: '*',
  hour: '*',
  day: '*',
  month: '*',
  week: '?',
  year: ''
})
const cronFieldList = [
  { key: 'second', label: '秒', min: 0, max: 59 },
  { key: 'minute', label: '分', min: 0, max: 59 },
  { key: 'hour', label: '时', min: 0, max: 23 },
  { key: 'day', label: '天', min: 1, max: 31 },
  { key: 'month', label: '月', min: 1, max: 12 },
  { key: 'week', label: '周', min: 1, max: 7 },
  { key: 'year', label: '年', min: 1970, max: 2099 }
]
const activeField = ref('second')
const cronMode = ref({
  second: 'appoint',
  minute: 'every',
  hour: 'every',
  day: 'every',
  month: 'every',
  week: 'every',
  year: 'every'
})
const cronAppoint = ref({
  second: ['00', '01'],
  minute: [],
  hour: [],
  day: [],
  month: [],
  week: [],
  year: []
})
const cronRange = ref({
  second: [0, 1],
  minute: [0, 1],
  hour: [0, 1],
  day: [1, 2],
  month: [1, 2],
  week: [1, 2],
  year: [1970, 1971]
})
const cronStep = ref({
  second: [1, 1],
  minute: [1, 1],
  hour: [1, 1],
  day: [1, 1],
  month: [1, 1],
  week: [1, 1],
  year: [1970, 1]
})

function pad(n) {
  return n < 10 ? '0' + n : '' + n
}

watch(
  [fields, cronMode, cronAppoint, cronRange, cronStep],
  () => {
    // 组装cron表达式
    let arr = cronFieldList.map((f) => {
      if (cronMode.value[f.key] === 'every') return '*'
      if (cronMode.value[f.key] === 'appoint') return cronAppoint.value[f.key].join(',') || '*'
      if (cronMode.value[f.key] === 'range')
        return `${cronRange.value[f.key][0]}-${cronRange.value[f.key][1]}`
      if (cronMode.value[f.key] === 'step')
        return `${cronStep.value[f.key][0]}/${cronStep.value[f.key][1]}`
      return fields.value[f.key] || '*'
    })
    // week和year特殊处理
    arr[5] = arr[5] || '?'
    cronStr.value = arr.join(' ')
    if (tab.value === 'cron') emit('change', cronStr.value)
  },
  { deep: true }
)

// 标准格式
const isoStr = ref('')
const repeat = ref(1)
const isoDate = ref('')
const isoDuration = ref('')
function setDuration(type, val) {
  // 组装ISO 8601字符串
  let d = isoDuration.value
  if (!d.includes(type)) d += val + type
  else d = d.replace(new RegExp(`\\d+${type}`), val + type)
  isoDuration.value = d
  updateIsoStr()
}
function updateIsoStr() {
  let str = `R${repeat.value}`
  if (isoDate.value)
    str +=
      '/' +
      (typeof isoDate.value === 'string' ? isoDate.value : new Date(isoDate.value).toISOString())
  if (isoDuration.value) str += '/' + isoDuration.value
  isoStr.value = str
  if (tab.value === 'iso') emit('change', isoStr.value)
}
watch([repeat, isoDate, isoDuration], updateIsoStr)
watch(
  () => props.value,
  (val) => {
    if (!val) return
    if (tab.value === 'cron') cronStr.value = val
    if (tab.value === 'iso') isoStr.value = val
  },
  { immediate: true }
)
</script>