mirror of https://gitee.com/xiaonuobase/snowy
914 lines
26 KiB
Vue
914 lines
26 KiB
Vue
<template>
|
|
<a-input :value="defaultValue" @update:value="upadteValue" placeholder="请输入CRON定时规则">
|
|
<template #addonAfter>
|
|
<a-dropdown>
|
|
<down-outlined />
|
|
<template #overlay>
|
|
<a-menu @click="handleShortcuts">
|
|
<a-menu-item key="0 * * * * ?">每分钟</a-menu-item>
|
|
<a-menu-item key="0 0 * * * ?">每小时</a-menu-item>
|
|
<a-menu-item key="0 0 0 * * ?">每天零点</a-menu-item>
|
|
<a-menu-item key="0 0 0 1 * ?">每月一号零点</a-menu-item>
|
|
<a-menu-item key="0 0 0 L * ?">每月最后一天零点</a-menu-item>
|
|
<a-menu-item key="0 0 0 ? * 1">每周星期日零点</a-menu-item>
|
|
<a-menu-divider v-if="shortcuts" />
|
|
<a-menu-item v-for="item in shortcuts" :key="item.value">{{ item.text }}</a-menu-item>
|
|
<a-menu-divider />
|
|
<a-menu-item key="custom"><UserOutlined />自定义</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
</a-dropdown>
|
|
</template>
|
|
</a-input>
|
|
<a-modal
|
|
title="CRON规则生成器"
|
|
v-model:visible="modalVisible"
|
|
:width="580"
|
|
@cancel="modalVisible = false"
|
|
@ok="submit"
|
|
destroy-on-close
|
|
append-to-body
|
|
>
|
|
<div>
|
|
<a-tabs v-model:activeKey="activeKey">
|
|
<a-tab-pane key="1">
|
|
<template #tab>
|
|
<div class="cron-num">
|
|
<h2>秒</h2>
|
|
<a-tag :color="activeKey === '1' ? `var(--primary-color)` : ''" style="margin-right: 0px">{{
|
|
value_second
|
|
}}</a-tag>
|
|
</div>
|
|
</template>
|
|
<a-form>
|
|
<a-form-item label="类型">
|
|
<a-radio-group v-model:value="dateValue.second.type">
|
|
<a-radio-button value="0">任意值</a-radio-button>
|
|
<a-radio-button value="1">范围</a-radio-button>
|
|
<a-radio-button value="2">间隔</a-radio-button>
|
|
<a-radio-button value="3">指定</a-radio-button>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item label="范围" v-if="dateValue.second.type === '1'">
|
|
<a-input-number
|
|
v-model:value="dateValue.second.range.start"
|
|
:min="0"
|
|
:max="59"
|
|
controls-position="right"
|
|
></a-input-number>
|
|
<span style="padding: 0 15px">-</span>
|
|
<a-input-number
|
|
v-model:value="dateValue.second.range.end"
|
|
:min="0"
|
|
:max="59"
|
|
controls-position="right"
|
|
></a-input-number>
|
|
</a-form-item>
|
|
<a-form-item label="间隔" v-if="dateValue.second.type === '2'">
|
|
<a-input-number
|
|
v-model:value="dateValue.second.loop.start"
|
|
:min="0"
|
|
:max="59"
|
|
controls-position="right"
|
|
/>
|
|
秒开始，每
|
|
<a-input-number v-model:value="dateValue.second.loop.end" :min="0" :max="59" controls-position="right" />
|
|
秒执行一次
|
|
</a-form-item>
|
|
<a-form-item label="指定" v-if="dateValue.second.type === '3'">
|
|
<a-select
|
|
v-model:value="dateValue.second.appoint"
|
|
multiple
|
|
style="width: 100%"
|
|
mode="multiple"
|
|
placeholder="请选择"
|
|
>
|
|
<a-select-option v-for="(item, index) in data.second" :key="index" :label="item" :value="item" />
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="2">
|
|
<template #tab>
|
|
<div class="cron-num">
|
|
<h2>分钟</h2>
|
|
<a-tag :color="activeKey === '2' ? `var(--primary-color)` : ''" style="margin-right: 0px">{{
|
|
value_minute
|
|
}}</a-tag>
|
|
</div>
|
|
</template>
|
|
<a-form>
|
|
<a-form-item label="类型">
|
|
<a-radio-group v-model:value="dateValue.minute.type">
|
|
<a-radio-button value="0">任意值</a-radio-button>
|
|
<a-radio-button value="1">范围</a-radio-button>
|
|
<a-radio-button value="2">间隔</a-radio-button>
|
|
<a-radio-button value="3">指定</a-radio-button>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item label="范围" v-if="dateValue.minute.type === '1'">
|
|
<a-input-number
|
|
v-model:value="dateValue.minute.range.start"
|
|
:min="0"
|
|
:max="59"
|
|
controls-position="right"
|
|
/>
|
|
<span style="padding: 0 15px">-</span>
|
|
<a-input-number v-model:value="dateValue.minute.range.end" :min="0" :max="59" controls-position="right" />
|
|
</a-form-item>
|
|
<a-form-item label="间隔" v-if="dateValue.minute.type === '2'">
|
|
<a-input-number
|
|
v-model:value="dateValue.minute.loop.start"
|
|
:min="0"
|
|
:max="59"
|
|
controls-position="right"
|
|
/>
|
|
分钟开始，每
|
|
<a-input-number v-model:value="dateValue.minute.loop.end" :min="0" :max="59" controls-position="right" />
|
|
分钟执行一次
|
|
</a-form-item>
|
|
<a-form-item label="指定" v-if="dateValue.minute.type === '3'">
|
|
<a-select
|
|
v-model:value="dateValue.minute.appoint"
|
|
multiple
|
|
style="width: 100%"
|
|
mode="multiple"
|
|
placeholder="请选择"
|
|
>
|
|
<a-select-option v-for="(item, index) in data.minute" :key="index" :label="item" :value="item" />
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="3">
|
|
<template #tab>
|
|
<div class="cron-num">
|
|
<h2>小时</h2>
|
|
<a-tag :color="activeKey === '3' ? `var(--primary-color)` : ''" style="margin-right: 0px">{{
|
|
value_hour
|
|
}}</a-tag>
|
|
</div>
|
|
</template>
|
|
<a-form>
|
|
<a-form-item label="类型">
|
|
<a-radio-group v-model:value="dateValue.hour.type">
|
|
<a-radio-button value="0">任意值</a-radio-button>
|
|
<a-radio-button value="1">范围</a-radio-button>
|
|
<a-radio-button value="2">间隔</a-radio-button>
|
|
<a-radio-button value="3">指定</a-radio-button>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item label="范围" v-if="dateValue.hour.type === '1'">
|
|
<a-input-number v-model:value="dateValue.hour.range.start" :min="0" :max="23" controls-position="right" />
|
|
<span style="padding: 0 15px">-</span>
|
|
<a-input-number v-model:value="dateValue.hour.range.end" :min="0" :max="23" controls-position="right" />
|
|
</a-form-item>
|
|
<a-form-item label="间隔" v-if="dateValue.hour.type === '2'">
|
|
<a-input-number v-model:value="dateValue.hour.loop.start" :min="0" :max="23" controls-position="right" />
|
|
小时开始，每
|
|
<a-input-number v-model:value="dateValue.hour.loop.end" :min="0" :max="23" controls-position="right" />
|
|
小时执行一次
|
|
</a-form-item>
|
|
<a-form-item label="指定" v-if="dateValue.hour.type === '3'">
|
|
<a-select
|
|
v-model:value="dateValue.hour.appoint"
|
|
multiple
|
|
style="width: 100%"
|
|
mode="multiple"
|
|
placeholder="请选择"
|
|
>
|
|
<a-select-option v-for="(item, index) in data.hour" :key="index" :label="item" :value="item" />
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="4">
|
|
<template #tab>
|
|
<div class="cron-num">
|
|
<h2>日</h2>
|
|
<a-tag :color="activeKey === '4' ? `var(--primary-color)` : ''" style="margin-right: 0px">{{
|
|
value_day
|
|
}}</a-tag>
|
|
</div>
|
|
</template>
|
|
<a-form>
|
|
<a-form-item label="类型">
|
|
<a-radio-group v-model:value="dateValue.day.type">
|
|
<a-radio-button value="0">任意值</a-radio-button>
|
|
<a-radio-button value="1">范围</a-radio-button>
|
|
<a-radio-button value="2">间隔</a-radio-button>
|
|
<a-radio-button value="3">指定</a-radio-button>
|
|
<a-radio-button value="4">本月最后一天</a-radio-button>
|
|
<a-radio-button value="5">不指定</a-radio-button>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item label="范围" v-if="dateValue.day.type === '1'">
|
|
<a-input-number v-model:value="dateValue.day.range.start" :min="1" :max="31" controls-position="right" />
|
|
<span style="padding: 0 15px">-</span>
|
|
<a-input-number v-model:value="dateValue.day.range.end" :min="1" :max="31" controls-position="right" />
|
|
</a-form-item>
|
|
<a-form-item label="间隔" v-if="dateValue.day.type === '2'">
|
|
<a-input-number v-model:value="dateValue.day.loop.start" :min="1" :max="31" controls-position="right" />
|
|
号开始，每
|
|
<a-input-number v-model:value="dateValue.day.loop.end" :min="1" :max="31" controls-position="right" />
|
|
天执行一次
|
|
</a-form-item>
|
|
<a-form-item label="指定" v-if="dateValue.day.type === '3'">
|
|
<a-select
|
|
v-model:value="dateValue.day.appoint"
|
|
multiple
|
|
style="width: 100%"
|
|
mode="multiple"
|
|
placeholder="请选择"
|
|
>
|
|
<a-select-option v-for="(item, index) in data.day" :key="index" :label="item" :value="item" />
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="5">
|
|
<template #tab>
|
|
<div class="cron-num">
|
|
<h2>月</h2>
|
|
<a-tag :color="activeKey === '5' ? `var(--primary-color)` : ''" style="margin-right: 0px">{{
|
|
value_month
|
|
}}</a-tag>
|
|
</div>
|
|
</template>
|
|
<a-form>
|
|
<a-form-item label="类型">
|
|
<a-radio-group v-model:value="dateValue.month.type">
|
|
<a-radio-button value="0">任意值</a-radio-button>
|
|
<a-radio-button value="1">范围</a-radio-button>
|
|
<a-radio-button value="2">间隔</a-radio-button>
|
|
<a-radio-button value="3">指定</a-radio-button>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item label="范围" v-if="dateValue.month.type === '1'">
|
|
<a-input-number
|
|
v-model:value="dateValue.month.range.start"
|
|
:min="1"
|
|
:max="12"
|
|
controls-position="right"
|
|
/>
|
|
<span style="padding: 0 15px">-</span>
|
|
<a-input-number v-model:value="dateValue.month.range.end" :min="1" :max="12" controls-position="right" />
|
|
</a-form-item>
|
|
<a-form-item label="间隔" v-if="dateValue.month.type === '2'">
|
|
<a-input-number v-model:value="dateValue.month.loop.start" :min="1" :max="12" controls-position="right" />
|
|
月开始，每
|
|
<a-input-number v-model:value="dateValue.month.loop.end" :min="1" :max="12" controls-position="right" />
|
|
月执行一次
|
|
</a-form-item>
|
|
<a-form-item label="指定" v-if="dateValue.month.type === '3'">
|
|
<a-select
|
|
v-model:value="dateValue.month.appoint"
|
|
multiple
|
|
style="width: 100%"
|
|
mode="multiple"
|
|
placeholder="请选择"
|
|
>
|
|
<a-select-option v-for="(item, index) in data.month" :key="index" :label="item" :value="item" />
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="6">
|
|
<template #tab>
|
|
<div class="cron-num">
|
|
<h2>周</h2>
|
|
<a-tag :color="activeKey === '6' ? `var(--primary-color)` : ''" style="margin-right: 0px">{{
|
|
value_week
|
|
}}</a-tag>
|
|
</div>
|
|
</template>
|
|
<a-form>
|
|
<a-form>
|
|
<a-form-item label="类型">
|
|
<a-radio-group v-model:value="dateValue.week.type">
|
|
<a-radio-button value="0">任意值</a-radio-button>
|
|
<a-radio-button value="1">范围</a-radio-button>
|
|
<a-radio-button value="2">间隔</a-radio-button>
|
|
<a-radio-button value="3">指定</a-radio-button>
|
|
<a-radio-button value="4">本月最后一周</a-radio-button>
|
|
<a-radio-button value="5">不指定</a-radio-button>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item label="范围" v-if="dateValue.week.type === '1'">
|
|
<a-select v-model:value="dateValue.week.range.start" placeholder="请选择">
|
|
<a-select-option
|
|
v-for="(item, index) in data.week"
|
|
:key="index"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</a-select>
|
|
<span style="padding: 0 15px">-</span>
|
|
<a-select v-model:value="dateValue.week.range.end" placeholder="请选择">
|
|
<a-select-option
|
|
v-for="(item, index) in data.week"
|
|
:key="index"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item label="间隔" v-if="dateValue.week.type === '2'">
|
|
第
|
|
<a-input-number v-model:value="dateValue.week.loop.start" :min="1" :max="4" controls-position="right" />
|
|
周的星期
|
|
<a-select v-model:value="dateValue.week.loop.end" placeholder="请选择">
|
|
<a-select-option
|
|
v-for="(item, index) in data.week"
|
|
:key="index"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</a-select>
|
|
执行一次
|
|
</a-form-item>
|
|
<a-form-item label="指定" v-if="dateValue.week.type === '3'">
|
|
<a-select
|
|
v-model:value="dateValue.week.appoint"
|
|
multiple
|
|
style="width: 100%"
|
|
mode="multiple"
|
|
placeholder="请选择"
|
|
>
|
|
<a-select-option
|
|
v-for="(item, index) in data.week"
|
|
:key="index"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item label="最后一周" v-if="dateValue.week.type === '4'">
|
|
<a-select v-model:value="dateValue.week.last" placeholder="请选择">
|
|
<a-select-option
|
|
v-for="(item, index) in data.week"
|
|
:key="index"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-form>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="7">
|
|
<template #tab>
|
|
<div class="cron-num">
|
|
<h2>年</h2>
|
|
<a-tag :color="activeKey === '7' ? `var(--primary-color)` : ''" style="margin-right: 0px">{{
|
|
value_year
|
|
}}</a-tag>
|
|
</div>
|
|
</template>
|
|
<a-form>
|
|
<a-form-item label="类型">
|
|
<a-radio-group v-model:value="dateValue.year.type">
|
|
<a-radio-button value="-1">忽略</a-radio-button>
|
|
<a-radio-button value="0">任意值</a-radio-button>
|
|
<a-radio-button value="1">范围</a-radio-button>
|
|
<a-radio-button value="2">间隔</a-radio-button>
|
|
<a-radio-button value="3">指定</a-radio-button>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item label="范围" v-if="dateValue.year.type === '1'">
|
|
<a-input-number v-model:value="dateValue.year.range.start" controls-position="right" />
|
|
<span style="padding: 0 15px">-</span>
|
|
<a-input-number v-model:value="dateValue.year.range.end" controls-position="right" />
|
|
</a-form-item>
|
|
<a-form-item label="间隔" v-if="dateValue.year.type === '2'">
|
|
<a-input-number v-model:value="dateValue.year.loop.start" controls-position="right" />
|
|
年开始，每
|
|
<a-input-number v-model:value="dateValue.year.loop.end" :min="1" controls-position="right" />
|
|
年执行一次
|
|
</a-form-item>
|
|
<a-form-item label="指定" v-if="dateValue.year.type === '3'">
|
|
<a-select
|
|
v-model:value="dateValue.year.appoint"
|
|
multiple
|
|
style="width: 100%"
|
|
mode="multiple"
|
|
placeholder="请选择"
|
|
>
|
|
<a-select-option v-for="(item, index) in data.year" :key="index" :label="item" :value="item" />
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</div>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script setup name="XnCron">
|
|
const activeKey = ref('1')
|
|
const type = ref('0')
|
|
const defaultValue = ref('')
|
|
const modalVisible = ref(false)
|
|
const getYear = () => {
|
|
let v = []
|
|
let y = new Date().getFullYear()
|
|
for (let i = 0; i < 11; i++) {
|
|
v.push(y + i)
|
|
}
|
|
return v
|
|
}
|
|
const dateValue = ref({
|
|
second: {
|
|
type: '0',
|
|
range: {
|
|
start: 1,
|
|
end: 2
|
|
},
|
|
loop: {
|
|
start: 0,
|
|
end: 1
|
|
},
|
|
appoint: []
|
|
},
|
|
minute: {
|
|
type: '0',
|
|
range: {
|
|
start: 1,
|
|
end: 2
|
|
},
|
|
loop: {
|
|
start: 0,
|
|
end: 1
|
|
},
|
|
appoint: []
|
|
},
|
|
hour: {
|
|
type: '0',
|
|
range: {
|
|
start: 1,
|
|
end: 2
|
|
},
|
|
loop: {
|
|
start: 0,
|
|
end: 1
|
|
},
|
|
appoint: []
|
|
},
|
|
day: {
|
|
type: '0',
|
|
range: {
|
|
start: 1,
|
|
end: 2
|
|
},
|
|
loop: {
|
|
start: 1,
|
|
end: 1
|
|
},
|
|
appoint: []
|
|
},
|
|
month: {
|
|
type: '0',
|
|
range: {
|
|
start: 1,
|
|
end: 2
|
|
},
|
|
loop: {
|
|
start: 1,
|
|
end: 1
|
|
},
|
|
appoint: []
|
|
},
|
|
week: {
|
|
type: '5',
|
|
range: {
|
|
start: '2',
|
|
end: '3'
|
|
},
|
|
loop: {
|
|
start: 0,
|
|
end: '2'
|
|
},
|
|
last: '2',
|
|
appoint: []
|
|
},
|
|
year: {
|
|
type: '-1',
|
|
range: {
|
|
start: getYear()[0],
|
|
end: getYear()[1]
|
|
},
|
|
loop: {
|
|
start: getYear()[0],
|
|
end: 1
|
|
},
|
|
appoint: []
|
|
}
|
|
})
|
|
const data = {
|
|
second: ['0', '5', '15', '20', '25', '30', '35', '40', '45', '50', '55', '59'],
|
|
minute: ['0', '5', '15', '20', '25', '30', '35', '40', '45', '50', '55', '59'],
|
|
hour: [
|
|
'0',
|
|
'1',
|
|
'2',
|
|
'3',
|
|
'4',
|
|
'5',
|
|
'6',
|
|
'7',
|
|
'8',
|
|
'9',
|
|
'10',
|
|
'11',
|
|
'12',
|
|
'13',
|
|
'14',
|
|
'15',
|
|
'16',
|
|
'17',
|
|
'18',
|
|
'19',
|
|
'20',
|
|
'21',
|
|
'22',
|
|
'23'
|
|
],
|
|
day: [
|
|
'1',
|
|
'2',
|
|
'3',
|
|
'4',
|
|
'5',
|
|
'6',
|
|
'7',
|
|
'8',
|
|
'9',
|
|
'10',
|
|
'11',
|
|
'12',
|
|
'13',
|
|
'14',
|
|
'15',
|
|
'16',
|
|
'17',
|
|
'18',
|
|
'19',
|
|
'20',
|
|
'21',
|
|
'22',
|
|
'23',
|
|
'24',
|
|
'25',
|
|
'26',
|
|
'27',
|
|
'28',
|
|
'29',
|
|
'30',
|
|
'31'
|
|
],
|
|
month: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
|
|
week: [
|
|
{
|
|
value: '1',
|
|
label: '周日'
|
|
},
|
|
{
|
|
value: '2',
|
|
label: '周一'
|
|
},
|
|
{
|
|
value: '3',
|
|
label: '周二'
|
|
},
|
|
{
|
|
value: '4',
|
|
label: '周三'
|
|
},
|
|
{
|
|
value: '5',
|
|
label: '周四'
|
|
},
|
|
{
|
|
value: '6',
|
|
label: '周五'
|
|
},
|
|
{
|
|
value: '7',
|
|
label: '周六'
|
|
}
|
|
],
|
|
year: getYear()
|
|
}
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: String,
|
|
default: () => ''
|
|
},
|
|
shortcuts: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
})
|
|
const value_second = computed(() => {
|
|
let v = dateValue.value.second
|
|
if (v.type === '0') {
|
|
return '*'
|
|
} else if (v.type === '1') {
|
|
return v.range.start + '-' + v.range.end
|
|
} else if (v.type === '2') {
|
|
return v.loop.start + '/' + v.loop.end
|
|
} else if (v.type === '3') {
|
|
return v.appoint.length > 0 ? v.appoint.join(',') : '*'
|
|
} else {
|
|
return '*'
|
|
}
|
|
})
|
|
const value_minute = computed(() => {
|
|
let v = dateValue.value.minute
|
|
if (v.type === '0') {
|
|
return '*'
|
|
} else if (v.type === '1') {
|
|
return v.range.start + '-' + v.range.end
|
|
} else if (v.type === '2') {
|
|
return v.loop.start + '/' + v.loop.end
|
|
} else if (v.type === '3') {
|
|
return v.appoint.length > 0 ? v.appoint.join(',') : '*'
|
|
} else {
|
|
return '*'
|
|
}
|
|
})
|
|
const value_hour = computed(() => {
|
|
let v = dateValue.value.hour
|
|
if (v.type === '0') {
|
|
return '*'
|
|
} else if (v.type === '1') {
|
|
return v.range.start + '-' + v.range.end
|
|
} else if (v.type === '2') {
|
|
return v.loop.start + '/' + v.loop.end
|
|
} else if (v.type === '3') {
|
|
return v.appoint.length > 0 ? v.appoint.join(',') : '*'
|
|
} else {
|
|
return '*'
|
|
}
|
|
})
|
|
const value_day = computed(() => {
|
|
let v = dateValue.value.day
|
|
if (v.type === '0') {
|
|
return '*'
|
|
} else if (v.type === '1') {
|
|
return v.range.start + '-' + v.range.end
|
|
} else if (v.type === '2') {
|
|
return v.loop.start + '/' + v.loop.end
|
|
} else if (v.type === '3') {
|
|
return v.appoint.length > 0 ? v.appoint.join(',') : '*'
|
|
} else if (v.type === '4') {
|
|
return 'L'
|
|
} else if (v.type === '5') {
|
|
return '?'
|
|
} else {
|
|
return '*'
|
|
}
|
|
})
|
|
const value_month = computed(() => {
|
|
let v = dateValue.value.month
|
|
if (v.type === '0') {
|
|
return '*'
|
|
} else if (v.type === '1') {
|
|
return v.range.start + '-' + v.range.end
|
|
} else if (v.type === '2') {
|
|
return v.loop.start + '/' + v.loop.end
|
|
} else if (v.type === '3') {
|
|
return v.appoint.length > 0 ? v.appoint.join(',') : '*'
|
|
} else {
|
|
return '*'
|
|
}
|
|
})
|
|
const value_week = computed(() => {
|
|
let v = dateValue.value.week
|
|
if (v.type === '0') {
|
|
return '*'
|
|
} else if (v.type === '1') {
|
|
return v.range.start + '-' + v.range.end
|
|
} else if (v.type === '2') {
|
|
return v.loop.end + '#' + v.loop.start
|
|
} else if (v.type === '3') {
|
|
return v.appoint.length > 0 ? v.appoint.join(',') : '*'
|
|
} else if (v.type === '4') {
|
|
return v.last + 'L'
|
|
} else if (v.type === '5') {
|
|
return '?'
|
|
} else {
|
|
return '*'
|
|
}
|
|
})
|
|
const value_year = computed(() => {
|
|
let v = dateValue.value.year
|
|
if (v.type === '-1') {
|
|
return ''
|
|
} else if (v.type === '0') {
|
|
return '*'
|
|
} else if (v.type === '1') {
|
|
return v.range.start + '-' + v.range.end
|
|
} else if (v.type === '2') {
|
|
return v.loop.start + '/' + v.loop.end
|
|
} else if (v.type === '3') {
|
|
return v.appoint.length > 0 ? v.appoint.join(',') : ''
|
|
} else {
|
|
return ''
|
|
}
|
|
})
|
|
|
|
// 监听周
|
|
watch(dateValue.value.week, (newValue) => {
|
|
if (newValue.type !== '5') {
|
|
dateValue.value.day.type = '5'
|
|
}
|
|
})
|
|
// 监听监听日
|
|
watch(dateValue.value.day, (newValue) => {
|
|
if (newValue.type !== '5') {
|
|
dateValue.value.week.type = '5'
|
|
}
|
|
})
|
|
watch(props, (newValue) => {
|
|
if (newValue.modelValue) {
|
|
defaultValue.value = newValue.modelValue
|
|
}
|
|
})
|
|
onMounted(() => {
|
|
defaultValue.value = props.modelValue
|
|
})
|
|
const emit = defineEmits(['update:modelValue'])
|
|
const upadteValue = (v) => {
|
|
emit('update:modelValue', v)
|
|
}
|
|
const handleShortcuts = (obj) => {
|
|
if (obj.key === 'custom') {
|
|
open()
|
|
} else {
|
|
defaultValue.value = obj.key
|
|
emit('update:modelValue', defaultValue.value)
|
|
}
|
|
}
|
|
const open = () => {
|
|
set()
|
|
modalVisible.value = true
|
|
}
|
|
const set = () => {
|
|
defaultValue.value = props.modelValue
|
|
let arr = (props.modelValue || '* * * * * ?').split(' ')
|
|
//简单检查
|
|
if (arr.length < 6) {
|
|
arr = '* * * * * ?'.split(' ')
|
|
}
|
|
|
|
//秒
|
|
if (arr[0] === '*') {
|
|
dateValue.value.second.type = '0'
|
|
} else if (arr[0].includes('-')) {
|
|
dateValue.value.second.type = '1'
|
|
dateValue.value.second.range.start = Number(arr[0].split('-')[0])
|
|
dateValue.value.second.range.end = Number(arr[0].split('-')[1])
|
|
} else if (arr[0].includes('/')) {
|
|
dateValue.value.second.type = '2'
|
|
dateValue.value.second.loop.start = Number(arr[0].split('/')[0])
|
|
dateValue.value.second.loop.end = Number(arr[0].split('/')[1])
|
|
} else {
|
|
dateValue.value.second.type = '3'
|
|
dateValue.value.second.appoint = arr[0].split(',')
|
|
}
|
|
//分
|
|
if (arr[1] === '*') {
|
|
dateValue.value.minute.type = '0'
|
|
} else if (arr[1].includes('-')) {
|
|
dateValue.value.minute.type = '1'
|
|
dateValue.value.minute.range.start = Number(arr[1].split('-')[0])
|
|
dateValue.value.minute.range.end = Number(arr[1].split('-')[1])
|
|
} else if (arr[1].includes('/')) {
|
|
dateValue.value.minute.type = '2'
|
|
dateValue.value.minute.loop.start = Number(arr[1].split('/')[0])
|
|
dateValue.value.minute.loop.end = Number(arr[1].split('/')[1])
|
|
} else {
|
|
dateValue.value.minute.type = '3'
|
|
dateValue.value.minute.appoint = arr[1].split(',')
|
|
}
|
|
//小时
|
|
if (arr[2] === '*') {
|
|
dateValue.value.hour.type = '0'
|
|
} else if (arr[2].includes('-')) {
|
|
dateValue.value.hour.type = '1'
|
|
dateValue.value.hour.range.start = Number(arr[2].split('-')[0])
|
|
dateValue.value.hour.range.end = Number(arr[2].split('-')[1])
|
|
} else if (arr[2].includes('/')) {
|
|
dateValue.value.hour.type = '2'
|
|
dateValue.value.hour.loop.start = Number(arr[2].split('/')[0])
|
|
dateValue.value.hour.loop.end = Number(arr[2].split('/')[1])
|
|
} else {
|
|
dateValue.value.hour.type = '3'
|
|
dateValue.value.hour.appoint = arr[2].split(',')
|
|
}
|
|
//日
|
|
if (arr[3] === '*') {
|
|
dateValue.value.day.type = '0'
|
|
} else if (arr[3] === 'L') {
|
|
dateValue.value.day.type = '4'
|
|
} else if (arr[3] === '?') {
|
|
dateValue.value.day.type = '5'
|
|
} else if (arr[3].includes('-')) {
|
|
dateValue.value.day.type = '1'
|
|
dateValue.value.day.range.start = Number(arr[3].split('-')[0])
|
|
dateValue.value.day.range.end = Number(arr[3].split('-')[1])
|
|
} else if (arr[3].includes('/')) {
|
|
dateValue.value.day.type = '2'
|
|
dateValue.value.day.loop.start = Number(arr[3].split('/')[0])
|
|
dateValue.value.day.loop.end = Number(arr[3].split('/')[1])
|
|
} else {
|
|
dateValue.value.day.type = '3'
|
|
dateValue.value.day.appoint = arr[3].split(',')
|
|
}
|
|
//月
|
|
if (arr[4] === '*') {
|
|
dateValue.value.month.type = '0'
|
|
} else if (arr[4].includes('-')) {
|
|
dateValue.value.month.type = '1'
|
|
dateValue.value.month.range.start = Number(arr[4].split('-')[0])
|
|
dateValue.value.month.range.end = Number(arr[4].split('-')[1])
|
|
} else if (arr[4].includes('/')) {
|
|
dateValue.value.month.type = '2'
|
|
dateValue.value.month.loop.start = Number(arr[4].split('/')[0])
|
|
dateValue.value.month.loop.end = Number(arr[4].split('/')[1])
|
|
} else {
|
|
dateValue.value.month.type = '3'
|
|
dateValue.value.month.appoint = arr[4].split(',')
|
|
}
|
|
//周
|
|
if (arr[5] === '*') {
|
|
dateValue.value.week.type = '0'
|
|
} else if (arr[5] === '?') {
|
|
dateValue.value.week.type = '5'
|
|
} else if (arr[5].includes('-')) {
|
|
dateValue.value.week.type = '1'
|
|
dateValue.value.week.range.start = arr[5].split('-')[0]
|
|
dateValue.value.week.range.end = arr[5].split('-')[1]
|
|
} else if (arr[5].includes('#')) {
|
|
dateValue.value.week.type = '2'
|
|
dateValue.value.week.loop.start = Number(arr[5].split('#')[1])
|
|
dateValue.value.week.loop.end = arr[5].split('#')[0]
|
|
} else if (arr[5].includes('L')) {
|
|
dateValue.value.week.type = '4'
|
|
dateValue.value.week.last = arr[5].split('L')[0]
|
|
} else {
|
|
dateValue.value.week.type = '3'
|
|
dateValue.value.week.appoint = arr[5].split(',')
|
|
}
|
|
//年
|
|
if (!arr[6]) {
|
|
dateValue.value.year.type = '-1'
|
|
} else if (arr[6] === '*') {
|
|
dateValue.value.year.type = '0'
|
|
} else if (arr[6].includes('-')) {
|
|
dateValue.value.year.type = '1'
|
|
dateValue.value.year.range.start = Number(arr[6].split('-')[0])
|
|
dateValue.value.year.range.end = Number(arr[6].split('-')[1])
|
|
} else if (arr[6].includes('/')) {
|
|
dateValue.value.year.type = '2'
|
|
dateValue.value.year.loop.start = Number(arr[6].split('/')[1])
|
|
dateValue.value.year.loop.end = Number(arr[6].split('/')[0])
|
|
} else {
|
|
dateValue.value.year.type = '3'
|
|
dateValue.value.year.appoint = arr[6].split(',')
|
|
}
|
|
}
|
|
|
|
const submit = () => {
|
|
let year = value_year.value ? ' ' + value_year.value : ''
|
|
defaultValue.value =
|
|
value_second.value +
|
|
' ' +
|
|
value_minute.value +
|
|
' ' +
|
|
value_hour.value +
|
|
' ' +
|
|
value_day.value +
|
|
' ' +
|
|
value_month.value +
|
|
' ' +
|
|
value_week.value +
|
|
year
|
|
emit('update:modelValue', defaultValue.value)
|
|
modalVisible.value = false
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.cron-num {
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
.cron-num h2 {
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
}
|
|
</style>
|