117 lines
2.8 KiB
Vue
117 lines
2.8 KiB
Vue
<template>
|
||
<ProModal
|
||
:drag="true"
|
||
:destroyOnClose="true"
|
||
:title="t('components.CronModal.title')"
|
||
:open="props.open"
|
||
:body-style="{ padding: '0 24px' }"
|
||
@cancel="fnCronModal(false)"
|
||
@ok="fnCronModal(true)"
|
||
>
|
||
<a-tabs tab-position="top" type="line">
|
||
<a-tab-pane key="1" :tab="t('common.units.second')">
|
||
<CronSecond v-model:value="cronValue.second"></CronSecond>
|
||
</a-tab-pane>
|
||
<a-tab-pane key="2" :tab="t('common.units.minute')">
|
||
<CronMinute v-model:value="cronValue.minute"></CronMinute>
|
||
</a-tab-pane>
|
||
<a-tab-pane key="3" :tab="t('common.units.hour')">
|
||
<CronHour v-model:value="cronValue.hour"></CronHour>
|
||
</a-tab-pane>
|
||
<a-tab-pane key="4" :tab="t('common.units.day')">
|
||
<CronDay v-model:value="cronValue.day"></CronDay>
|
||
</a-tab-pane>
|
||
<a-tab-pane key="5" :tab="t('common.units.month')">
|
||
<CronMonth v-model:value="cronValue.month"></CronMonth>
|
||
</a-tab-pane>
|
||
</a-tabs>
|
||
|
||
<a-input
|
||
class="reultBox"
|
||
:addon-before="t('components.CronModal.addon')"
|
||
v-model:value="cronStr"
|
||
disabled
|
||
/>
|
||
</ProModal>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { ProModal } from 'antdv-pro-modal';
|
||
import CronSecond from './components/Second.vue';
|
||
import CronMinute from './components/Minute.vue';
|
||
import CronHour from './components/Hour.vue';
|
||
import CronDay from './components/Day.vue';
|
||
import CronMonth from './components/Month.vue';
|
||
import { reactive, computed, watch } from 'vue';
|
||
import useI18n from '@/hooks/useI18n';
|
||
const { t } = useI18n();
|
||
|
||
const emit = defineEmits(['cancel', 'ok', 'update:open']);
|
||
const props = defineProps({
|
||
open: {
|
||
type: Boolean,
|
||
required: true,
|
||
},
|
||
cron: {
|
||
type: String,
|
||
default: '* * * * * ?',
|
||
},
|
||
});
|
||
|
||
/**cron属性值 */
|
||
let cronValue = reactive({
|
||
second: '*',
|
||
minute: '*',
|
||
hour: '*',
|
||
day: '*',
|
||
month: '*',
|
||
week: '?',
|
||
});
|
||
|
||
/**组合cron结果 */
|
||
const cronStr = computed(() => {
|
||
let time = `${cronValue.second} ${cronValue.minute} ${cronValue.hour}`;
|
||
let date = `${cronValue.day} ${cronValue.month} ${cronValue.week}`;
|
||
return `${time} ${date}`;
|
||
});
|
||
|
||
/**监听是否显示，初始cron属性 */
|
||
watch(
|
||
() => props.open,
|
||
val => {
|
||
if (!val) return;
|
||
const arr = props.cron.split(' ');
|
||
// 6 位以上是合法表达式
|
||
if (arr.length >= 6) {
|
||
Object.assign(cronValue, {
|
||
second: arr[0],
|
||
minute: arr[1],
|
||
hour: arr[2],
|
||
day: arr[3],
|
||
month: arr[4],
|
||
week: arr[5],
|
||
});
|
||
}
|
||
}
|
||
);
|
||
|
||
/**
|
||
* 窗口事件
|
||
* @param val modal触发事件
|
||
*/
|
||
function fnCronModal(val: boolean) {
|
||
emit('update:open', false);
|
||
if (val) {
|
||
emit('ok', cronStr.value);
|
||
} else {
|
||
emit('cancel');
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.reultBox {
|
||
margin-top: 48px;
|
||
margin-bottom: 24px;
|
||
}
|
||
</style>
|