feat(job): 支持可视化生成 CRON 表达式

src/views/schedule/job/JobAddModal.vue

@@ -58,11 +58,17 @@
               >
                 <template #suffix>秒</template>
               </a-input-number>
-              <a-input
-                v-else
-                v-model="form.triggerInterval"
-                placeholder="请输入CRON表达式"
-              />
+              <div v-else style="display: flex;">
+                <a-input
+                    v-model="form.triggerInterval"
+                    placeholder="请输入CRON表达式"
+                />
+                <a-button @click="openGeneratorCron(form.triggerInterval)">
+                  <template #icon>
+                    <icon-history />
+                  </template>
+                </a-button>
+              </div>
             </a-form-item>
           </a-col>
         </a-row>
@@ -150,6 +156,7 @@
         </a-row>
       </fieldset>
     </a-form>
+    <CronGeneratorModal ref="genModal" @ok="(e) => form.triggerInterval = e" />
   </a-modal>
 </template>
 
@@ -159,6 +166,7 @@ import { useWindowSize } from '@vueuse/core'
 import { addJob, listGroup, updateJob } from '@/apis/schedule'
 import { useForm } from '@/hooks'
 import { useDict } from '@/hooks/app'
+import CronGeneratorModal from '@/components/GenCron/CronModel/index.vue'
 
 const emit = defineEmits<{
   (e: 'save-success'): void
@@ -176,7 +184,7 @@ const dataId = ref()
 const isUpdate = computed(() => !!dataId.value)
 const title = computed(() => (isUpdate.value ? '修改任务' : '新增任务'))
 const formRef = ref<FormInstance>()
-
+const genModal = ref()
 const rules: FormInstance['rules'] = {
   groupName: [{ required: true, message: '请选择任务组' }],
   jobName: [{ required: true, message: '请输入任务名称' }],
@@ -302,6 +310,11 @@ const onDeleteArgs = (index) => {
   args.value.splice(index, 1)
 }
 
+// 打开生成表达式
+const openGeneratorCron = (cron: string) => {
+  genModal.value.open(cron)
+}
+
 defineExpose({ onAdd, onUpdate })
 </script>
 

src/views/schedule/job/index.vue

@@ -36,7 +36,14 @@
       <template #triggerType="{ record }">
         <GiCellTag :value="record.triggerType" :dict="job_trigger_type_enum" />:&nbsp;
         <span v-if="record.triggerType === 2">{{ record.triggerInterval }} 秒</span>
-        <span v-else>{{ record.triggerInterval }}</span>
+        <span v-else>
+          <a-popover title="最近5次运行时间" position="bottom">
+            <template #content>
+              <a-textarea :model-value="parseCron(record.triggerInterval)" :auto-size="true" style="margin-top: 10px" />
+            </template>
+             <a-link>{{ record.triggerInterval }}</a-link>
+          </a-popover>
+         </span>
       </template>
       <template #taskType="{ record }">
         <GiCellTag :value="record.taskType" :dict="job_task_type_enum" />
@@ -77,7 +84,7 @@ import { type JobQuery, type JobResp, deleteJob, listGroup, listJob, triggerJob,
 import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { useTable } from '@/hooks'
 import { useDict } from '@/hooks/app'
-import { isMobile } from '@/utils'
+import { isMobile, parseCron } from '@/utils'
 import has from '@/utils/has'
 
 defineOptions({ name: 'ScheduleJob' })
@@ -180,13 +187,11 @@ const JobDetailDrawerRef = ref<InstanceType<typeof JobDetailDrawer>>()
 const onDetail = (record: JobResp) => {
   JobDetailDrawerRef.value?.onDetail(record)
 }
-
 const router = useRouter()
 // 日志
 const onLog = (record: JobResp) => {
   router.push({ path: '/schedule/log', query: { jobId: record.id, jobName: record.jobName, groupName: record.groupName } })
 }
-
 onMounted(() => {
   getGroupList()
 })