From 5b148b7ed960ca6f7f5b733b2eadd56eeecbd4c2 Mon Sep 17 00:00:00 2001
From: xiaojunnuo <xiaojunnuo@qq.com>
Date: Wed, 23 Oct 2024 16:04:57 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96cron=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=99=A8=EF=BC=8C=E5=A2=9E=E5=8A=A0=E4=B8=8B=E6=AC=A1?=
 =?UTF-8?q?=E8=A7=A6=E5=8F=91=E6=97=B6=E9=97=B4=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/cron-editor/index.vue      | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/ui/certd-client/src/components/cron-editor/index.vue b/packages/ui/certd-client/src/components/cron-editor/index.vue
index 15bce87e0..e53db4d20 100644
--- a/packages/ui/certd-client/src/components/cron-editor/index.vue
+++ b/packages/ui/certd-client/src/components/cron-editor/index.vue
@@ -16,12 +16,15 @@
     <div class="mt-5">
       <a-input :disabled="true" :readonly="readonly" :value="modelValue" @change="onChange"></a-input>
     </div>
+    <div class="helper">下次触发时间：{{ nextTime }}</div>
     <div class="fs-helper">{{ errorMessage }}</div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import parser from "cron-parser";
+import { computed, ref } from "vue";
+import dayjs from "dayjs";
 defineOptions({
   name: "CronEditor"
 });
@@ -31,8 +34,10 @@ const props = defineProps<{
   readonly?: boolean;
 }>();
 
-const period = ref<string>("day");
-
+const period = ref<string>("");
+if (props.modelValue == null) {
+  period.value = "day";
+}
 const emit = defineEmits<{
   "update:modelValue": any;
 }>();
@@ -58,6 +63,17 @@ const onChange = (e: any) => {
 const onError = (error: any) => {
   errorMessage.value = error;
 };
+
+const nextTime = computed(() => {
+  try {
+    const interval = parser.parseExpression(props.modelValue);
+    const next = interval.next().getTime();
+    return dayjs(next).format("YYYY-MM-DD HH:mm:ss");
+  } catch (e) {
+    console.log(e);
+    return "请先设置正确的cron表达式";
+  }
+});
 </script>
 <style lang="less">
 .cron-editor {