wip: 定时任务详情

src/locales/langs/en-us.ts

@@ -944,7 +944,8 @@ const local: App.I18n.Schema = {
         fixed: '固定时间',
         cron: 'CRON表达式',
         workflow: '工作流'
-      }
+      },
+      detail: 'Job Task Detail'
     },
     jobBatch: {
       title: 'Job Batch List',

src/locales/langs/zh-cn.ts

@@ -939,7 +939,8 @@ const local: App.I18n.Schema = {
         fixed: '固定时间',
         cron: 'CRON表达式',
         workflow: '工作流'
-      }
+      },
+      detail: '定时任务详情'
     },
     jobBatch: {
       title: '任务批次列表',

src/typings/app.d.ts

@@ -1087,6 +1087,7 @@ declare namespace App {
             cron: string;
             workflow: string;
           };
+          detail: string;
         };
         jobBatch: {
           title: string;

src/views/job/task/index.vue

@@ -1,5 +1,7 @@
 <script setup lang="tsx">
 import { NButton, NPopconfirm, NTag } from 'naive-ui';
+import { useBoolean } from '@sa/hooks';
+import { ref } from 'vue';
 import { fetchDeleteJob, fetchGetJobPage, fetchTriggerJob, fetchUpdateJobStatus } from '@/service/api';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
@@ -8,9 +10,15 @@ import { blockStrategyRecord, taskTypeRecord, triggerTypeRecord } from '@/consta
 import StatusSwitch from '@/components/common/status-switch.vue';
 import JobTaskOperateDrawer from './modules/job-task-operate-drawer.vue';
 import JobTaskSearch from './modules/job-task-search.vue';
+import JobTaskDetailDrawer from './modules/job-task-detail-drawer.vue';
 
 const appStore = useAppStore();
 
+/** 详情页属性数据 */
+const detailData = ref<Api.Job.Job | null>();
+/** 详情页可见状态 */
+const { bool: detailVisible, setTrue: openDetail } = useBoolean(false);
+
 const { columns, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchGetJobPage,
   apiParams: {
@@ -31,7 +39,19 @@ const { columns, data, getData, loading, mobilePagination, searchParams, resetSe
       key: 'jobName',
       title: $t('page.jobTask.jobName'),
       align: 'center',
-      minWidth: 120
+      minWidth: 120,
+      render: row => {
+        async function showDetailDrawer() {
+          detailData.value = row;
+          openDetail();
+        }
+
+        return (
+          <n-button text tag="a" type="primary" onClick={showDetailDrawer} class="ws-normal">
+            {row.jobName}
+          </n-button>
+        );
+      }
     },
     {
       key: 'groupName',
@@ -237,6 +257,7 @@ async function handleTriggerJob(id: string) {
         @submitted="getData"
       />
     </NCard>
+    <JobTaskDetailDrawer v-model:visible="detailVisible" :row-data="detailData" />
   </div>
 </template>
 

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

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+import { tagColor } from '@/utils/common';
+import {
+  blockStrategyRecord,
+  enableStatusNumberRecord,
+  executorTypeRecord,
+  routeKeyRecord,
+  taskTypeRecord,
+  triggerTypeRecord
+} from '@/constants/business';
+
+defineOptions({
+  name: 'JobTaskDetailDrawer'
+});
+
+interface Props {
+  /** row data */
+  rowData?: Api.Job.Job | null;
+}
+defineProps<Props>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+</script>
+
+<template>
+  <OperateDrawer v-model="visible" :title="$t('page.jobTask.detail')">
+    <NDescriptions label-placement="top" bordered :column="2">
+      <NDescriptionsItem :label="$t('page.jobTask.groupName')">{{ rowData?.groupName }}</NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobTask.jobName')">{{ rowData?.jobName }}</NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobTask.taskType')">
+        <NTag :type="tagColor(rowData?.taskType!)">{{ $t(taskTypeRecord[rowData?.taskType!]) }}</NTag>
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobTask.argsStr')">{{ rowData?.argsStr }}</NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobTask.nextTriggerAt')">
+        {{ rowData?.nextTriggerAt }}
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobTask.jobStatus')">
+        <NTag :type="tagColor(rowData?.jobStatus!)">{{ $t(enableStatusNumberRecord[rowData?.jobStatus!]) }}</NTag>
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobTask.routeKey')">
+        <NTag :type="tagColor(rowData?.routeKey!)">{{ $t(routeKeyRecord[rowData?.routeKey!]) }}</NTag>
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobTask.executorType')">
+        <NTag :type="tagColor(rowData?.executorType!)">{{ $t(executorTypeRecord[rowData?.executorType!]) }}</NTag>
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobTask.executorInfo')">
+        {{ rowData?.executorInfo }}
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobTask.triggerType')">
+        <NTag :type="tagColor(rowData?.triggerType!)">{{ $t(triggerTypeRecord[rowData?.triggerType!]) }}</NTag>
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobTask.triggerInterval')">
+        {{ rowData?.triggerInterval }}
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobTask.blockStrategy')">
+        <NTag :type="tagColor(rowData?.blockStrategy!)">{{ $t(blockStrategyRecord[rowData?.blockStrategy!]) }}</NTag>
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobTask.executorTimeout')">
+        {{ rowData?.executorTimeout }}
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobTask.maxRetryTimes')">
+        {{ rowData?.maxRetryTimes }}
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobTask.retryInterval')">
+        {{ rowData?.retryInterval }}
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobTask.parallelNum')">
+        {{ rowData?.parallelNum }}
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobTask.description')" :span="2">
+        {{ rowData?.description }}
+      </NDescriptionsItem>
+    </NDescriptions>
+  </OperateDrawer>
+</template>
+
+<style scoped></style>