<script lang="ts" setup>
|
import { ref, reactive, computed, watch, onBeforeMount } from 'vue'
|
import { propTypes } from '@/utils/propTypes'
|
import { useI18n } from '@/hooks/web/useI18n'
|
import type { Corn } from './Hour.vue'
|
const props = defineProps({
|
modelValue: propTypes.string.def('?')
|
})
|
|
const { t } = useI18n()
|
|
const type = ref('1')
|
const work = ref<string | number>(0)
|
const last = ref<string | number>(0)
|
const state = reactive<Corn>({
|
cycle: {
|
// 周期
|
start: 0,
|
end: 0
|
},
|
loop: {
|
// 循环
|
start: 0,
|
end: 0
|
},
|
week: {
|
// 指定周
|
start: 0,
|
end: 0
|
},
|
appoint: []
|
})
|
|
const resultValue = computed(() => {
|
const result = []
|
switch (type.value) {
|
case '1': // 每秒
|
result.push('*')
|
break
|
case '2': // 年期
|
result.push(`${state.cycle.start}-${state.cycle.end}`)
|
break
|
case '3': // 循环
|
result.push(`${state.loop.start}/${state.loop.end}`)
|
break
|
case '4': // 指定
|
result.push(state.appoint.join(','))
|
break
|
case '6': // 最后
|
result.push(`${last.value === 0 ? '' : last.value}L`)
|
break
|
case '7': // 指定周
|
result.push(`${state.week.start}#${state.week.end}`)
|
break
|
default: // 不指定
|
result.push('?')
|
break
|
}
|
return result.join('')
|
})
|
|
onBeforeMount(() => {
|
updateVal()
|
})
|
|
watch(
|
() => props.modelValue,
|
() => {
|
updateVal()
|
}
|
)
|
|
watch(
|
() => resultValue.value,
|
() => {
|
emits('update:modelValue', resultValue.value)
|
}
|
)
|
|
const updateVal = () => {
|
if (!props.modelValue) {
|
return
|
}
|
if (props.modelValue === '?') {
|
type.value = '5'
|
} else if (props.modelValue.indexOf('-') !== -1) {
|
// 2周期
|
if (props.modelValue.split('-').length === 2) {
|
type.value = '2'
|
state.cycle.start = props.modelValue.split('-')[0] as unknown as number
|
state.cycle.end = props.modelValue.split('-')[1] as unknown as number
|
}
|
} else if (props.modelValue.indexOf('/') !== -1) {
|
// 3循环
|
if (props.modelValue.split('/').length === 2) {
|
type.value = '3'
|
state.loop.start = props.modelValue.split('/')[0] as unknown as number
|
state.loop.end = props.modelValue.split('/')[1] as unknown as number
|
}
|
} else if (props.modelValue.indexOf('*') !== -1) {
|
// 1每
|
type.value = '1'
|
} else if (props.modelValue.indexOf('L') !== -1) {
|
// 6最后
|
type.value = '6'
|
last.value = props.modelValue.replace('L', '')
|
} else if (props.modelValue.indexOf('#') !== -1) {
|
// 7指定周
|
if (props.modelValue.split('#').length === 2) {
|
type.value = '7'
|
state.week.start = props.modelValue.split('#')[0]
|
state.week.end = props.modelValue.split('#')[1]
|
}
|
} else if (props.modelValue.indexOf('W') !== -1) {
|
// 8工作日
|
type.value = '8'
|
work.value = props.modelValue.replace('W', '')
|
} else {
|
// *
|
type.value = '4'
|
state.appoint = props.modelValue.split(',')
|
}
|
}
|
|
const emits = defineEmits(['update:modelValue'])
|
</script>
|
|
<template>
|
<div>
|
<div>
|
<el-radio v-model="type" label="1" size="small" border>{{ t('cron.every_week') }}</el-radio>
|
</div>
|
<div>
|
<el-radio v-model="type" label="5" size="small" border>{{ t('cron.not_set') }}</el-radio>
|
</div>
|
<div>
|
<el-radio v-model="type" label="2" size="small" border>{{ t('cron.cycle') }}</el-radio>
|
<span style="margin-left: 10px; margin-right: 5px">{{ t('cron.week_start') }}</span>
|
<el-input-number
|
v-model="state.cycle.start"
|
:min="1"
|
:max="7"
|
size="small"
|
style="width: 100px"
|
@change="type = '2'"
|
/>
|
<span style="margin-left: 5px; margin-right: 5px">{{ t('cron.week_end') }}</span>
|
<el-input-number
|
v-model="state.cycle.end"
|
:min="2"
|
:max="7"
|
size="small"
|
style="width: 100px"
|
@change="type = '2'"
|
/>
|
</div>
|
<div>
|
<el-radio v-model="type" label="3" size="small" border>{{ t('cron.repeat') }}</el-radio>
|
<span style="margin-left: 10px; margin-right: 5px">{{ t('cron.week_start') }}</span>
|
<el-input-number
|
v-model="state.loop.start"
|
:min="1"
|
:max="7"
|
size="small"
|
style="width: 100px"
|
@change="type = '3'"
|
/>
|
<span style="margin-left: 5px; margin-right: 5px">{{ t('cron.every_begin') }}</span>
|
<el-input-number
|
v-model="state.loop.end"
|
:min="1"
|
:max="7"
|
size="small"
|
style="width: 100px"
|
@change="type = '3'"
|
/>
|
{{ t('cron.day_exec') }}
|
</div>
|
<div>
|
<el-radio v-model="type" label="4" size="small" border>{{ t('cron.set') }}</el-radio>
|
<el-checkbox-group v-model="state.appoint" style="margin-left: 50px; line-height: 25px">
|
<el-checkbox v-for="i in 7" :key="i" :label="i + ''" @change="type = '4'" />
|
</el-checkbox-group>
|
</div>
|
<div>
|
<span style="font-size: 12px">{{ t('cron.week_tips') }}</span>
|
</div>
|
</div>
|
</template>
|
|
<style lang="less" scoped></style>
|
