fix: 间隔时间组件封装

src/components/common/job-trigger-interval.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import CronInput from '@sa/cron-input';
+import { useAppStore } from '@/store/modules/app';
+
+defineOptions({
+  name: 'JobTriggerInterval'
+});
+
+interface Props {
+  triggerType: number;
+}
+
+const model = defineModel<string>();
+const props = defineProps<Props>();
+
+const app = useAppStore();
+
+/** 保存 `固定时间` 类型的 时间间隔 */
+const interval = ref<number>(60);
+
+/** 保存 `CRON表达式` 类型的 表达式 */
+const cron = ref<string>('* * * * * ?');
+
+/** 监视 触发间隔 变化 */
+watch(
+  interval,
+  val => {
+    if (props.triggerType === 2) {
+      model.value = `${val}`;
+    }
+  },
+  { immediate: true }
+);
+
+/** 监视 cron 表达式变化 */
+watch(
+  cron,
+  val => {
+    if (props.triggerType === 3) {
+      model.value = val;
+    }
+  },
+  { immediate: true }
+);
+
+/** 根据不同 triggerType, 为model赋值 */
+watch(
+  () => props.triggerType,
+  triggerType => {
+    if (triggerType === 2) {
+      model.value = `${interval.value}`;
+    } else if (triggerType === 3) {
+      model.value = cron.value;
+    } else {
+      model.value = '*';
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div>
+    <NInputGroup v-if="triggerType === 2">
+      <NInputNumber v-model:value="interval" :placeholder="$t('page.jobTask.form.triggerInterval')" />
+      <NInputGroupLabel>秒</NInputGroupLabel>
+    </NInputGroup>
+    <CronInput
+      v-else-if="triggerType === 3"
+      v-model="cron"
+      :placeholder="$t('page.jobTask.form.triggerInterval_CRON')"
+      :lang="app.locale"
+    />
+    <NInput v-else-if="triggerType === 99" disabled />
+  </div>
+</template>
+
+<style scoped></style>

src/components/common/scene-trigger-interval.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import CronInput from '@sa/cron-input';
+import { useAppStore } from '@/store/modules/app';
+
+defineOptions({
+  name: 'SceneTriggerInterval'
+});
+
+interface Props {
+  backOff: number;
+}
+
+const model = defineModel<string>();
+const props = defineProps<Props>();
+
+const app = useAppStore();
+
+/** 保存 `固定时间` 类型的 时间间隔 */
+const interval = ref<number>(60);
+
+/** 保存 `CRON表达式` 类型的 表达式 */
+const cron = ref<string>('* * * * * ?');
+
+const delayLevelDesc = ref('10s,15s,30s,35s,40s,50s,1m,2m,4m,6m,8m,10m,20m,40m,1h,2h,3h,4h,5h,6h,7h,8h,9h,10h,11h,12h');
+
+/** 监视 触发间隔 变化 */
+watch(
+  interval,
+  val => {
+    if (props.backOff === 2 || props.backOff === 4) {
+      model.value = `${val}`;
+    }
+  },
+  { immediate: true }
+);
+
+/** 监视 cron表达式 变化 */
+watch(
+  cron,
+  val => {
+    if (props.backOff === 3) {
+      model.value = val;
+    }
+  },
+  { immediate: true }
+);
+
+/** 根据不同 backOff 对model赋值 */
+watch(
+  () => props.backOff,
+  backOff => {
+    if (backOff === 2 || backOff === 4) {
+      model.value = `${interval.value}`;
+    } else if (backOff === 3) {
+      model.value = cron.value;
+    } else {
+      model.value = delayLevelDesc.value;
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <CronInput v-if="backOff === 3" v-model="cron" :lang="app.locale" />
+  <NInputNumber
+    v-else-if="backOff === 2 || backOff === 4"
+    v-model:value="interval"
+    :placeholder="$t('page.retryScene.form.triggerInterval')"
+    clearable
+  />
+  <NInput v-else v-model:value="delayLevelDesc" type="textarea" :autosize="{ minRows: 1, maxRows: 3 }" readonly />
+</template>
+
+<style scoped></style>

src/typings/api.d.ts

@@ -812,7 +812,7 @@ declare namespace Api {
       /** 最大重试次数 */
       maxRetryCount: number;
       /** 间隔时间 */
-      triggerInterval: number;
+      triggerInterval: string;
       /** 调用链超时时间 */
       deadlineRequest: number;
       /** 超时时间 */

src/views/job/task/modules/job-task-operate-drawer.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, reactive, watch } from 'vue';
-import CronInput from '@sa/cron-input';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import OperateDrawer from '@/components/common/operate-drawer.vue';
 import { $t } from '@/locales';
@@ -10,6 +9,7 @@ import RouteKey from '@/components/common/route-key.vue';
 import ExecutorType from '@/components/common/executor-type.vue';
 import TaskType from '@/components/common/task-type.vue';
 import CodeMirror from '@/components/common/code-mirror.vue';
+import JobTriggerInterval from '@/components/common/job-trigger-interval.vue';
 
 defineOptions({
   name: 'JobTaskOperateDrawer'
@@ -350,17 +350,7 @@ watch(visible, () => {
         />
       </NFormItem>
       <NFormItem :label="$t('page.jobTask.triggerInterval')" path="triggerInterval">
-        <NInput
+        <JobTriggerInterval v-model="model.triggerInterval" :trigger-type="model.triggerType" />
-          v-if="model.triggerType === 2"
-          v-model:value="model.triggerInterval"
-          :placeholder="$t('page.jobTask.form.triggerInterval')"
-        />
-        <CronInput
-          v-else-if="model.triggerType === 3"
-          v-model:value="model.triggerInterval"
-          :placeholder="$t('page.jobTask.form.triggerInterval_CRON')"
-        />
-        <NInput v-else-if="model.triggerType === 99" v-model:value="model.triggerInterval" disabled />
       </NFormItem>
       <NFormItem :label="$t('page.jobTask.executorTimeout')" path="executorTimeout">
         <NInputNumber

src/views/retry/scene/modules/scene-operate-drawer.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
-import CronInput from '@sa/cron-input';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import OperateDrawer from '@/components/common/operate-drawer.vue';
 import RouteKey from '@/components/common/route-key.vue';
@@ -8,7 +7,6 @@ import { $t } from '@/locales';
 import { fetchAddRetryScene, fetchEditRetryScene, fetchGetAllGroupNameList } from '@/service/api';
 import { DelayLevel, backOffRecordOptions, enableStatusNumberOptions } from '@/constants/business';
 import { translateOptions, translateOptions2 } from '@/utils/common';
-import { useAppStore } from '@/store/modules/app';
 
 defineOptions({
   name: 'SceneOperateDrawer'
@@ -21,7 +19,6 @@ interface Props {
   rowData?: Api.RetryScene.Scene | null;
 }
 
-const app = useAppStore();
 const groupNameList = ref<string[]>([]);
 const delayLevelDesc = ref<string>('10s');
 
@@ -72,7 +69,7 @@ function createDefaultModel(): Model {
     sceneStatus: 1,
     backOff: 2,
     maxRetryCount: 1,
-    triggerInterval: 60,
+    triggerInterval: '60',
     deadlineRequest: 60000,
     executorTimeout: 60,
     description: '',
@@ -288,14 +285,7 @@ watch(
         />
       </NFormItem>
       <NFormItem path="triggerInterval">
-        <CronInput v-if="model.backOff === 3" v-model:value="model.triggerInterval as any" :lang="app.locale" />
+        <SceneTriggerInterval v-model="model.triggerInterval" :back-off="model.backOff" />
-        <NInputNumber
-          v-else-if="model.backOff === 2 || model.backOff === 4"
-          v-model:value="model.triggerInterval as any"
-          :placeholder="$t('page.retryScene.form.triggerInterval')"
-          clearable
-        />
-        <NInput v-else v-model:value="delayLevelDesc" type="textarea" :autosize="{ minRows: 1, maxRows: 3 }" readonly />
         <template #label>
           <div class="flex-center">
             {{ $t('page.retryScene.triggerInterval') }}