mirror of
https://github.com/certd/certd.git
synced 2026-04-23 19:57:27 +08:00
Other translations
This commit is contained in:
@@ -1,120 +1,132 @@
|
||||
<template>
|
||||
<div class="cron-editor">
|
||||
<div class="flex-o">
|
||||
<cron-light :disabled="disabled" :readonly="readonly" :period="period" class="flex-o cron-ant" locale="zh-CN" format="quartz" :model-value="modelValue" @update:model-value="onUpdate" @error="onError" />
|
||||
</div>
|
||||
<div class="mt-5 flex">
|
||||
<a-input :disabled="true" :readonly="readonly" :value="modelValue" @change="onChange"></a-input>
|
||||
<fs-icon icon="ion:close-circle" class="pointer fs-16 ml-5 color-gray" title="清除选择" @click="onClear"></fs-icon>
|
||||
</div>
|
||||
<div class="helper">下次触发时间:{{ nextTime }}</div>
|
||||
<div class="fs-helper">{{ errorMessage }}</div>
|
||||
</div>
|
||||
<div class="cron-editor">
|
||||
<div class="flex-o">
|
||||
<cron-light :disabled="disabled" :readonly="readonly" :period="period" class="flex-o cron-ant"
|
||||
locale="zh-CN" format="quartz" :model-value="modelValue" @update:model-value="onUpdate"
|
||||
@error="onError" />
|
||||
</div>
|
||||
<div class="mt-5 flex">
|
||||
<a-input :disabled="true" :readonly="readonly" :value="modelValue" @change="onChange"></a-input>
|
||||
<fs-icon icon="ion:close-circle" class="pointer fs-16 ml-5 color-gray" :title="t('certd.cron.clearTip')"
|
||||
@click="onClear"></fs-icon>
|
||||
</div>
|
||||
<div class="helper">{{ t('certd.cron.nextTrigger') }}:{{ nextTime }}</div>
|
||||
<div class="fs-helper">{{ errorMessage }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import parser from "cron-parser";
|
||||
import { computed, ref } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const { t } = useI18n();
|
||||
import { getCronNextTimes } from "/@/components/cron-editor/utils";
|
||||
defineOptions({
|
||||
name: "CronEditor",
|
||||
name: "CronEditor",
|
||||
});
|
||||
const props = defineProps<{
|
||||
modelValue?: string;
|
||||
disabled?: boolean;
|
||||
readonly?: boolean;
|
||||
allowEveryMin?: boolean;
|
||||
modelValue?: string;
|
||||
disabled?: boolean;
|
||||
readonly?: boolean;
|
||||
allowEveryMin?: boolean;
|
||||
}>();
|
||||
|
||||
const period = ref<string>("");
|
||||
if (props.modelValue == null || props.modelValue.endsWith("* * *")) {
|
||||
period.value = "day";
|
||||
period.value = "day";
|
||||
} else if (props.modelValue.endsWith("* *")) {
|
||||
period.value = "month";
|
||||
period.value = "month";
|
||||
} else if (props.modelValue.endsWith("*")) {
|
||||
period.value = "year";
|
||||
period.value = "year";
|
||||
}
|
||||
const emit = defineEmits<{
|
||||
"update:modelValue": any;
|
||||
change: any;
|
||||
"update:modelValue": any;
|
||||
change: any;
|
||||
}>();
|
||||
|
||||
const errorMessage = ref<string | null>(null);
|
||||
|
||||
const onUpdate = (value: string) => {
|
||||
if (value === props.modelValue) {
|
||||
return;
|
||||
}
|
||||
const arr: string[] = value.split(" ");
|
||||
if (arr[0] === "*") {
|
||||
arr[0] = "0";
|
||||
}
|
||||
if (!props.allowEveryMin) {
|
||||
if (arr[1] === "*") {
|
||||
arr[1] = "0";
|
||||
}
|
||||
}
|
||||
if (value === props.modelValue) {
|
||||
return;
|
||||
}
|
||||
const arr: string[] = value.split(" ");
|
||||
if (arr[0] === "*") {
|
||||
arr[0] = "0";
|
||||
}
|
||||
if (!props.allowEveryMin) {
|
||||
if (arr[1] === "*") {
|
||||
arr[1] = "0";
|
||||
}
|
||||
}
|
||||
|
||||
value = arr.join(" ");
|
||||
value = arr.join(" ");
|
||||
|
||||
emit("update:modelValue", value);
|
||||
errorMessage.value = undefined;
|
||||
emit("update:modelValue", value);
|
||||
errorMessage.value = undefined;
|
||||
};
|
||||
|
||||
const onPeriod = (value: string) => {
|
||||
period.value = value;
|
||||
period.value = value;
|
||||
};
|
||||
|
||||
const onChange = (e: any) => {
|
||||
const value = e.target.value;
|
||||
onUpdate(value);
|
||||
const value = e.target.value;
|
||||
onUpdate(value);
|
||||
};
|
||||
const onError = (error: any) => {
|
||||
errorMessage.value = error;
|
||||
errorMessage.value = error;
|
||||
};
|
||||
|
||||
const onClear = () => {
|
||||
if (props.disabled) {
|
||||
return;
|
||||
}
|
||||
onUpdate("");
|
||||
if (props.disabled) {
|
||||
return;
|
||||
}
|
||||
onUpdate("");
|
||||
};
|
||||
|
||||
const nextTime = computed(() => {
|
||||
if (props.modelValue == null) {
|
||||
return "请先设置正确的cron表达式";
|
||||
}
|
||||
if (props.modelValue == null) {
|
||||
return t("certd.cron.tip");
|
||||
}
|
||||
|
||||
try {
|
||||
const nextTimes = getCronNextTimes(props.modelValue, 2);
|
||||
return nextTimes.join(",");
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
return "请先设置正确的cron表达式";
|
||||
}
|
||||
try {
|
||||
const nextTimes = getCronNextTimes(props.modelValue, 2);
|
||||
return nextTimes.join(",");
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
return t("certd.cron.tip");
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
<style lang="less">
|
||||
.cron-editor {
|
||||
.cron-ant {
|
||||
flex-wrap: wrap;
|
||||
&* > {
|
||||
margin-bottom: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.vcron-select-list {
|
||||
min-width: 56px;
|
||||
}
|
||||
.vcron-select-input {
|
||||
min-height: 22px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.vcron-select-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.cron-ant {
|
||||
flex-wrap: wrap;
|
||||
|
||||
&*> {
|
||||
margin-bottom: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vcron-select-list {
|
||||
min-width: 56px;
|
||||
}
|
||||
|
||||
.vcron-select-input {
|
||||
min-height: 22px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.vcron-select-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user