init: 初始系统模板
This commit is contained in:
TsMask
141
src/components/CronModal/components/Day.vue
Normal file
141
src/components/CronModal/components/Day.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch, onBeforeMount } from 'vue';
|
||||
const emit = defineEmits(['update:value']);
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: String,
|
||||
default: '*',
|
||||
},
|
||||
});
|
||||
|
||||
/**指定列表初始数据 */
|
||||
const optionsSpecific = Array.from({ length: 31 }, (_, i) => {
|
||||
let idx = i + 1;
|
||||
return {
|
||||
label: `${idx}`,
|
||||
value: `${idx}`,
|
||||
};
|
||||
});
|
||||
|
||||
/**数据 */
|
||||
let data = reactive({
|
||||
type: '1',
|
||||
/**间隔 */
|
||||
increment: 2,
|
||||
incrementStart: 1,
|
||||
/**周期 */
|
||||
rangeStart: 1,
|
||||
rangeEnd: 2,
|
||||
/**指定 */
|
||||
specific: ['1'],
|
||||
});
|
||||
|
||||
/**监听数据，将数值格式化 */
|
||||
watch(data, () => {
|
||||
let reultValue = '*';
|
||||
let val = data.type;
|
||||
// 每一
|
||||
if (val === '1') {
|
||||
reultValue = '*';
|
||||
}
|
||||
// 间隔
|
||||
if (val === '2') {
|
||||
let start = data.incrementStart;
|
||||
let increment = data.increment;
|
||||
reultValue = `${start ?? 0}/${increment ?? 0}`;
|
||||
}
|
||||
// 周期
|
||||
if (val === '3') {
|
||||
let start = data.rangeStart;
|
||||
let end = data.rangeEnd;
|
||||
reultValue = `${start ?? 0}-${end ?? 0}`;
|
||||
}
|
||||
// 指定
|
||||
if (val === '4') {
|
||||
reultValue = data.specific.sort((a, b) => +a - +b).join(',');
|
||||
}
|
||||
emit('update:value', reultValue);
|
||||
});
|
||||
|
||||
/**挂载前初始属性 */
|
||||
onBeforeMount(() => {
|
||||
const val = props.value;
|
||||
if (val === '*') {
|
||||
data.type = '1';
|
||||
}
|
||||
if (val.includes('/')) {
|
||||
const arr = val.split('/');
|
||||
data.incrementStart = Number(arr[0]);
|
||||
data.increment = Number(arr[1]);
|
||||
data.type = '2';
|
||||
}
|
||||
if (val.includes('-')) {
|
||||
const arr = val.split('-');
|
||||
data.rangeStart = Number(arr[0]);
|
||||
data.rangeEnd = Number(arr[1]);
|
||||
data.type = '3';
|
||||
}
|
||||
if (val.includes(',')) {
|
||||
data.specific = val.split(',').sort((a, b) => +a - +b);
|
||||
data.type = '4';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-radio-group size="small" v-model:value="data.type">
|
||||
<a-space direction="vertical" :size="18">
|
||||
<a-radio value="1">每一天</a-radio>
|
||||
<a-radio value="2">
|
||||
每隔
|
||||
<a-input-number
|
||||
size="small"
|
||||
v-model:value="data.increment"
|
||||
:min="1"
|
||||
:max="31"
|
||||
placeholder="1-31"
|
||||
></a-input-number>
|
||||
天执行一次，从
|
||||
<a-input-number
|
||||
size="small"
|
||||
v-model:value="data.incrementStart"
|
||||
:min="1"
|
||||
:max="31"
|
||||
placeholder="1-31"
|
||||
></a-input-number>
|
||||
日开始
|
||||
</a-radio>
|
||||
<a-radio value="3">
|
||||
周期从
|
||||
<a-input-number
|
||||
size="small"
|
||||
v-model:value="data.rangeStart"
|
||||
:min="1"
|
||||
:max="31"
|
||||
placeholder="1-31"
|
||||
></a-input-number>
|
||||
到
|
||||
<a-input-number
|
||||
size="small"
|
||||
v-model:value="data.rangeEnd"
|
||||
:min="1"
|
||||
:max="31"
|
||||
placeholder="1-31"
|
||||
></a-input-number>
|
||||
日
|
||||
</a-radio>
|
||||
<a-radio value="4">指定日(可多选)</a-radio>
|
||||
<a-select
|
||||
v-model:value="data.specific"
|
||||
size="small"
|
||||
mode="multiple"
|
||||
style="width: 100%"
|
||||
placeholder="指定日(可多选)"
|
||||
:options="optionsSpecific"
|
||||
></a-select>
|
||||
<a-radio value="5">本月最后一天</a-radio>
|
||||
</a-space>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
137
src/components/CronModal/components/Hour.vue
Normal file
137
src/components/CronModal/components/Hour.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch, onBeforeMount } from 'vue';
|
||||
const emit = defineEmits(['update:value']);
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: String,
|
||||
default: '*',
|
||||
},
|
||||
});
|
||||
|
||||
/**指定列表初始数据 */
|
||||
const optionsSpecific = Array.from({ length: 24 }, (_, i) => ({
|
||||
label: `${i}`.padStart(2, '0'),
|
||||
value: `${i}`,
|
||||
}));
|
||||
|
||||
/**数据 */
|
||||
let data = reactive({
|
||||
type: '1',
|
||||
/**间隔 */
|
||||
increment: 2,
|
||||
incrementStart: 0,
|
||||
/**周期 */
|
||||
rangeStart: 0,
|
||||
rangeEnd: 2,
|
||||
/**指定 */
|
||||
specific: ['0'],
|
||||
});
|
||||
|
||||
/**监听数据，将数值格式化 */
|
||||
watch(data, () => {
|
||||
let reultValue = '*';
|
||||
let val = data.type;
|
||||
// 每一
|
||||
if (val === '1') {
|
||||
reultValue = '*';
|
||||
}
|
||||
// 间隔
|
||||
if (val === '2') {
|
||||
let start = data.incrementStart;
|
||||
let increment = data.increment;
|
||||
reultValue = `${start ?? 0}/${increment ?? 0}`;
|
||||
}
|
||||
// 周期
|
||||
if (val === '3') {
|
||||
let start = data.rangeStart;
|
||||
let end = data.rangeEnd;
|
||||
reultValue = `${start ?? 0}-${end ?? 0}`;
|
||||
}
|
||||
// 指定
|
||||
if (val === '4') {
|
||||
reultValue = data.specific.sort((a, b) => +a - +b).join(',');
|
||||
}
|
||||
emit('update:value', reultValue);
|
||||
});
|
||||
|
||||
/**挂载前初始属性 */
|
||||
onBeforeMount(() => {
|
||||
const val = props.value;
|
||||
if (val === '*') {
|
||||
data.type = '1';
|
||||
}
|
||||
if (val.includes('/')) {
|
||||
const arr = val.split('/');
|
||||
data.incrementStart = Number(arr[0]);
|
||||
data.increment = Number(arr[1]);
|
||||
data.type = '2';
|
||||
}
|
||||
if (val.includes('-')) {
|
||||
const arr = val.split('-');
|
||||
data.rangeStart = Number(arr[0]);
|
||||
data.rangeEnd = Number(arr[1]);
|
||||
data.type = '3';
|
||||
}
|
||||
if (val.includes(',')) {
|
||||
data.specific = val.split(',').sort((a, b) => +a - +b);
|
||||
data.type = '4';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-radio-group size="small" v-model:value="data.type">
|
||||
<a-space direction="vertical" :size="18">
|
||||
<a-radio value="1">每一小时</a-radio>
|
||||
<a-radio value="2">
|
||||
每隔
|
||||
<a-input-number
|
||||
size="small"
|
||||
v-model:value="data.increment"
|
||||
:min="0"
|
||||
:max="23"
|
||||
placeholder="0-23"
|
||||
></a-input-number>
|
||||
小时执行一次，从
|
||||
<a-input-number
|
||||
size="small"
|
||||
v-model:value="data.incrementStart"
|
||||
:min="0"
|
||||
:max="23"
|
||||
placeholder="0-23"
|
||||
></a-input-number>
|
||||
时开始
|
||||
</a-radio>
|
||||
<a-radio value="3">
|
||||
周期从
|
||||
<a-input-number
|
||||
size="small"
|
||||
v-model:value="data.rangeStart"
|
||||
:min="0"
|
||||
:max="23"
|
||||
placeholder="1-23"
|
||||
></a-input-number>
|
||||
到
|
||||
<a-input-number
|
||||
size="small"
|
||||
v-model:value="data.rangeEnd"
|
||||
:min="0"
|
||||
:max="23"
|
||||
placeholder="0-23"
|
||||
></a-input-number>
|
||||
小时
|
||||
</a-radio>
|
||||
<a-radio value="4">指定小时(可多选)</a-radio>
|
||||
<a-select
|
||||
v-model:value="data.specific"
|
||||
size="small"
|
||||
mode="multiple"
|
||||
style="width: 100%"
|
||||
placeholder="指定小时(可多选)"
|
||||
:options="optionsSpecific"
|
||||
></a-select>
|
||||
</a-space>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
139
src/components/CronModal/components/Minute.vue
Normal file
139
src/components/CronModal/components/Minute.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch, onBeforeMount } from 'vue';
|
||||
const emit = defineEmits(['update:value']);
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: String,
|
||||
default: '*',
|
||||
},
|
||||
});
|
||||
|
||||
/**指定列表初始数据 */
|
||||
const optionsSpecific = Array.from({ length: 60 }, (_, i) => {
|
||||
return {
|
||||
label: `${i}`.padStart(2, '0'),
|
||||
value: `${i}`,
|
||||
};
|
||||
});
|
||||
|
||||
/**数据 */
|
||||
let data = reactive({
|
||||
type: '1',
|
||||
/**间隔 */
|
||||
increment: 1,
|
||||
incrementStart: 0,
|
||||
/**周期 */
|
||||
rangeStart: 1,
|
||||
rangeEnd: 2,
|
||||
/**指定 */
|
||||
specific: ['0'],
|
||||
});
|
||||
|
||||
/**监听数据，将数值格式化 */
|
||||
watch(data, () => {
|
||||
let reultValue = '*';
|
||||
let val = data.type;
|
||||
// 每一
|
||||
if (val === '1') {
|
||||
reultValue = '*';
|
||||
}
|
||||
// 间隔
|
||||
if (val === '2') {
|
||||
let start = data.incrementStart;
|
||||
let increment = data.increment;
|
||||
reultValue = `${start ?? 0}/${increment ?? 0}`;
|
||||
}
|
||||
// 周期
|
||||
if (val === '3') {
|
||||
let start = data.rangeStart;
|
||||
let end = data.rangeEnd;
|
||||
reultValue = `${start ?? 0}-${end ?? 0}`;
|
||||
}
|
||||
// 指定
|
||||
if (val === '4') {
|
||||
reultValue = data.specific.sort((a, b) => +a - +b).join(',');
|
||||
}
|
||||
emit('update:value', reultValue);
|
||||
});
|
||||
|
||||
/**挂载前初始属性 */
|
||||
onBeforeMount(() => {
|
||||
const val = props.value;
|
||||
if (val === '*') {
|
||||
data.type = '1';
|
||||
}
|
||||
if (val.includes('/')) {
|
||||
const arr = val.split('/');
|
||||
data.incrementStart = Number(arr[0]);
|
||||
data.increment = Number(arr[1]);
|
||||
data.type = '2';
|
||||
}
|
||||
if (val.includes('-')) {
|
||||
const arr = val.split('-');
|
||||
data.rangeStart = Number(arr[0]);
|
||||
data.rangeEnd = Number(arr[1]);
|
||||
data.type = '3';
|
||||
}
|
||||
if (val.includes(',')) {
|
||||
data.specific = val.split(',').sort((a, b) => +a - +b);
|
||||
data.type = '4';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-radio-group size="small" v-model:value="data.type">
|
||||
<a-space direction="vertical" :size="18">
|
||||
<a-radio value="1">每一分钟</a-radio>
|
||||
<a-radio value="2">
|
||||
每隔
|
||||
<a-input-number
|
||||
size="small"
|
||||
v-model:value="data.increment"
|
||||
:min="0"
|
||||
:max="59"
|
||||
placeholder="0-59"
|
||||
></a-input-number>
|
||||
分钟执行一次，从
|
||||
<a-input-number
|
||||
size="small"
|
||||
v-model:value="data.incrementStart"
|
||||
:min="0"
|
||||
:max="59"
|
||||
placeholder="0-59"
|
||||
></a-input-number>
|
||||
分钟开始
|
||||
</a-radio>
|
||||
<a-radio value="3">
|
||||
周期从
|
||||
<a-input-number
|
||||
size="small"
|
||||
v-model:value="data.rangeStart"
|
||||
:min="0"
|
||||
:max="59"
|
||||
placeholder="0-59"
|
||||
></a-input-number>
|
||||
到
|
||||
<a-input-number
|
||||
size="small"
|
||||
v-model:value="data.rangeEnd"
|
||||
:min="0"
|
||||
:max="59"
|
||||
placeholder="0-59"
|
||||
></a-input-number>
|
||||
分钟
|
||||
</a-radio>
|
||||
<a-radio value="4">指定分钟(可多选)</a-radio>
|
||||
<a-select
|
||||
v-model:value="data.specific"
|
||||
size="small"
|
||||
mode="multiple"
|
||||
style="width: 100%"
|
||||
placeholder="指定分钟(可多选)"
|
||||
:options="optionsSpecific"
|
||||
></a-select>
|
||||
</a-space>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
141
src/components/CronModal/components/Month.vue
Normal file
141
src/components/CronModal/components/Month.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch, onBeforeMount } from 'vue';
|
||||
const emit = defineEmits(['update:value']);
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: String,
|
||||
default: '*',
|
||||
},
|
||||
});
|
||||
|
||||
/**指定列表初始数据 */
|
||||
const optionsSpecific = Array.from({ length: 12 }, (_, i) => {
|
||||
let idx = i + 1;
|
||||
return {
|
||||
label: `${idx}`,
|
||||
value: `${idx}`,
|
||||
};
|
||||
});
|
||||
|
||||
/**构建数据 */
|
||||
let data = reactive({
|
||||
/**类型 */
|
||||
type: '1',
|
||||
/**间隔 */
|
||||
increment: 1,
|
||||
incrementStart: 1,
|
||||
/**周期 */
|
||||
rangeStart: 1,
|
||||
rangeEnd: 2,
|
||||
/**指定秒 */
|
||||
specific: ['1'],
|
||||
});
|
||||
|
||||
/**监听数据，将数值格式化 */
|
||||
watch(data, () => {
|
||||
let reultValue = '*';
|
||||
let val = data.type;
|
||||
// 每一
|
||||
if (val === '1') {
|
||||
reultValue = '*';
|
||||
}
|
||||
// 间隔
|
||||
if (val === '2') {
|
||||
let start = data.incrementStart;
|
||||
let increment = data.increment;
|
||||
reultValue = `${start ?? 0}/${increment ?? 0}`;
|
||||
}
|
||||
// 周期
|
||||
if (val === '3') {
|
||||
let start = data.rangeStart;
|
||||
let end = data.rangeEnd;
|
||||
reultValue = `${start ?? 0}-${end ?? 0}`;
|
||||
}
|
||||
// 指定
|
||||
if (val === '4') {
|
||||
reultValue = data.specific.sort((a, b) => +a - +b).join(',');
|
||||
}
|
||||
emit('update:value', reultValue);
|
||||
});
|
||||
|
||||
/**挂载前初始属性 */
|
||||
onBeforeMount(() => {
|
||||
const val = props.value;
|
||||
if (val === '*') {
|
||||
data.type = '1';
|
||||
}
|
||||
if (val.includes('/')) {
|
||||
const arr = val.split('/');
|
||||
data.incrementStart = Number(arr[0]);
|
||||
data.increment = Number(arr[1]);
|
||||
data.type = '2';
|
||||
}
|
||||
if (val.includes('-')) {
|
||||
const arr = val.split('-');
|
||||
data.rangeStart = Number(arr[0]);
|
||||
data.rangeEnd = Number(arr[1]);
|
||||
data.type = '3';
|
||||
}
|
||||
if (val.includes(',')) {
|
||||
data.specific = val.split(',').sort((a, b) => +a - +b);
|
||||
data.type = '4';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-radio-group size="small" v-model:value="data.type">
|
||||
<a-space direction="vertical" :size="18">
|
||||
<a-radio value="1">每一月</a-radio>
|
||||
<a-radio value="2">
|
||||
每隔
|
||||
<a-input-number
|
||||
size="small"
|
||||
v-model:value="data.increment"
|
||||
:min="1"
|
||||
:max="12"
|
||||
placeholder="1-12"
|
||||
></a-input-number>
|
||||
月执行，从
|
||||
<a-input-number
|
||||
size="small"
|
||||
v-model:value="data.incrementStart"
|
||||
:min="1"
|
||||
:max="12"
|
||||
placeholder="1-12"
|
||||
></a-input-number>
|
||||
月开始
|
||||
</a-radio>
|
||||
<a-radio value="3">
|
||||
周期从
|
||||
<a-input-number
|
||||
size="small"
|
||||
v-model:value="data.rangeStart"
|
||||
:min="1"
|
||||
:max="12"
|
||||
placeholder="1-12"
|
||||
></a-input-number>
|
||||
到
|
||||
<a-input-number
|
||||
size="small"
|
||||
v-model:value="data.rangeEnd"
|
||||
:min="1"
|
||||
:max="12"
|
||||
placeholder="1-12"
|
||||
></a-input-number>
|
||||
月之间的每个月
|
||||
</a-radio>
|
||||
<a-radio value="4">指定月(可多选)</a-radio>
|
||||
<a-select
|
||||
v-model:value="data.specific"
|
||||
size="small"
|
||||
mode="multiple"
|
||||
style="width: 100%"
|
||||
placeholder="指定月(可多选)"
|
||||
:options="optionsSpecific"
|
||||
></a-select>
|
||||
</a-space>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
138
src/components/CronModal/components/Second.vue
Normal file
138
src/components/CronModal/components/Second.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, watch, onBeforeMount } from 'vue';
|
||||
const emit = defineEmits(['update:value']);
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: String,
|
||||
default: '*',
|
||||
},
|
||||
});
|
||||
|
||||
/**指定列表初始数据 */
|
||||
const optionsSpecific = Array.from({ length: 60 }, (_, i) => ({
|
||||
label: `${i}`.padStart(2, '0'),
|
||||
value: `${i}`,
|
||||
}));
|
||||
|
||||
/**构建数据 */
|
||||
let data = reactive({
|
||||
/**类型 */
|
||||
type: '1',
|
||||
/**间隔 */
|
||||
increment: 2,
|
||||
incrementStart: 0,
|
||||
/**周期 */
|
||||
rangeStart: 1,
|
||||
rangeEnd: 2,
|
||||
/**指定秒 */
|
||||
specific: ['0'],
|
||||
});
|
||||
|
||||
/**监听数据，将数值格式化 */
|
||||
watch(data, () => {
|
||||
let reultValue = '*';
|
||||
let val = data.type;
|
||||
// 每一
|
||||
if (val === '1') {
|
||||
reultValue = '*';
|
||||
}
|
||||
// 间隔
|
||||
if (val === '2') {
|
||||
let start = data.incrementStart;
|
||||
let increment = data.increment;
|
||||
reultValue = `${start ?? 0}/${increment ?? 0}`;
|
||||
}
|
||||
// 周期
|
||||
if (val === '3') {
|
||||
let start = data.rangeStart;
|
||||
let end = data.rangeEnd;
|
||||
reultValue = `${start ?? 0}-${end ?? 0}`;
|
||||
}
|
||||
// 指定
|
||||
if (val === '4') {
|
||||
reultValue = data.specific.sort((a, b) => +a - +b).join(',');
|
||||
}
|
||||
emit('update:value', reultValue);
|
||||
});
|
||||
|
||||
/**挂载前初始属性 */
|
||||
onBeforeMount(() => {
|
||||
const val = props.value;
|
||||
if (val === '*') {
|
||||
data.type = '1';
|
||||
}
|
||||
if (val.includes('/')) {
|
||||
const arr = val.split('/');
|
||||
data.incrementStart = Number(arr[0]);
|
||||
data.increment = Number(arr[1]);
|
||||
data.type = '2';
|
||||
}
|
||||
if (val.includes('-')) {
|
||||
const arr = val.split('-');
|
||||
data.rangeStart = Number(arr[0]);
|
||||
data.rangeEnd = Number(arr[1]);
|
||||
data.type = '3';
|
||||
}
|
||||
if (val.includes(',')) {
|
||||
data.specific = val.split(',').sort((a, b) => +a - +b);
|
||||
data.type = '4';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-radio-group size="small" v-model:value="data.type">
|
||||
<a-space direction="vertical" :size="18">
|
||||
<a-radio value="1">每一秒钟</a-radio>
|
||||
<a-radio value="2">
|
||||
每隔
|
||||
<a-input-number
|
||||
size="small"
|
||||
v-model:value="data.increment"
|
||||
:min="0"
|
||||
:max="59"
|
||||
placeholder="0-59"
|
||||
></a-input-number>
|
||||
秒执行一次，从
|
||||
<a-input-number
|
||||
size="small"
|
||||
v-model:value="data.incrementStart"
|
||||
:min="0"
|
||||
:max="59"
|
||||
placeholder="0-59"
|
||||
></a-input-number>
|
||||
秒开始
|
||||
</a-radio>
|
||||
<a-radio value="3">
|
||||
周期从
|
||||
<a-input-number
|
||||
size="small"
|
||||
v-model:value="data.rangeStart"
|
||||
:min="0"
|
||||
:max="59"
|
||||
placeholder="0-59"
|
||||
></a-input-number>
|
||||
到
|
||||
<a-input-number
|
||||
size="small"
|
||||
v-model:value="data.rangeEnd"
|
||||
:min="0"
|
||||
:max="59"
|
||||
placeholder="0-59"
|
||||
></a-input-number>
|
||||
秒
|
||||
</a-radio>
|
||||
<a-radio value="4">指定秒数(可多选)</a-radio>
|
||||
<a-select
|
||||
v-model:value="data.specific"
|
||||
size="small"
|
||||
mode="multiple"
|
||||
style="width: 100%"
|
||||
placeholder="指定秒数(可多选)"
|
||||
:options="optionsSpecific"
|
||||
></a-select>
|
||||
</a-space>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
112
src/components/CronModal/index.vue
Normal file
112
src/components/CronModal/index.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="Cron表达式生成"
|
||||
:visible="props.visible"
|
||||
:body-style="{ padding: '0 24px' }"
|
||||
:destroy-on-close="true"
|
||||
@cancel="fnCronModal(false)"
|
||||
@ok="fnCronModal(true)"
|
||||
>
|
||||
<a-tabs tab-position="top" type="line">
|
||||
<a-tab-pane key="1" tab="秒">
|
||||
<CronSecond v-model:value="cronValue.second"></CronSecond>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="分钟">
|
||||
<CronMinute v-model:value="cronValue.minute"></CronMinute>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="小时">
|
||||
<CronHour v-model:value="cronValue.hour"></CronHour>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="4" tab="日">
|
||||
<CronDay v-model:value="cronValue.day"></CronDay>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="5" tab="月">
|
||||
<CronMonth v-model:value="cronValue.month"></CronMonth>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
<a-input
|
||||
class="reultBox"
|
||||
addon-before="表达式预览："
|
||||
v-model:value="cronStr"
|
||||
disabled
|
||||
/>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
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';
|
||||
|
||||
const emit = defineEmits(['cancel', 'ok', 'update:visible']);
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
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.visible,
|
||||
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:visible', false);
|
||||
if (val) {
|
||||
emit('ok', cronStr.value);
|
||||
} else {
|
||||
emit('cancel');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.reultBox {
|
||||
margin-top: 48px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user