feat: 定时任务批次详情页

src/locales/langs/en-us.ts

@@ -951,6 +951,8 @@ const local: App.I18n.Schema = {
       title: 'Job Batch List',
       groupName: 'Group name',
       jobName: 'Job name',
+      executorInfo: 'Executor Name',
+      executorType: 'Executor type',
       executionAt: 'Start execution time',
       taskBatchStatus: 'Task Batch Status',
       operationReason: 'Reason for operation',
@@ -958,7 +960,8 @@ const local: App.I18n.Schema = {
         groupName: 'Please enter group name',
         jobName: 'Please enter job name',
         taskBatchStatus: 'Please enter state'
-      }
+      },
+      detail: 'Job Batch Detail'
     },
     userManager: {
       title: 'UserCenter List',

src/locales/langs/zh-cn.ts

@@ -946,6 +946,8 @@ const local: App.I18n.Schema = {
       title: '任务批次列表',
       groupName: '组名称',
       jobName: '任务名称',
+      executorInfo: '执行器名称',
+      executorType: '执行器类型',
       executionAt: '开始执行时间',
       taskBatchStatus: '状态',
       operationReason: '操作原因',
@@ -953,7 +955,8 @@ const local: App.I18n.Schema = {
         groupName: '请输入组名称',
         jobName: '请输入任务名称',
         taskBatchStatus: '请输入状态'
-      }
+      },
+      detail: '执行批次详情'
     },
     userManager: {
       title: '用户列表',

src/service/api/job-batch.ts

@@ -8,3 +8,10 @@ export function fetchGetJobBatchList(params?: Api.JobBatch.JobBatchSearchParams)
     params
   });
 }
+
+export function fetchGetJobBatchDetail(id: string) {
+  return request<Api.JobBatch.JobBatch>({
+    url: `/job/batch/${id}`,
+    method: 'get'
+  });
+}

src/typings/app.d.ts

@@ -1093,6 +1093,8 @@ declare namespace App {
           title: string;
           groupName: string;
           jobName: string;
+          executorInfo: string;
+          executorType: string;
           executionAt: string;
           taskBatchStatus: string;
           operationReason: string;
@@ -1101,6 +1103,7 @@ declare namespace App {
             jobName: string;
             taskBatchStatus: string;
           };
+          detail: string;
         };
         userManager: {
           title: string;

src/views/job/batch/index.vue

@@ -1,14 +1,23 @@
 <script setup lang="tsx">
 import { NButton, NTag } from 'naive-ui';
+import { useBoolean } from '@sa/hooks';
+import { ref } from 'vue';
 import { fetchGetJobBatchList } from '@/service/api';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useTable } from '@/hooks/common/table';
 import { operationReasonRecord } from '@/constants/business';
+import { tagColor } from '@/utils/common';
 import JobBatchSearch from './modules/job-batch-search.vue';
+import JobBatchDetailDrawer from './modules/job-batch-detail-drawer.vue';
 
 const appStore = useAppStore();
 
+/** 详情页属性数据 */
+const detailData = ref<Api.JobBatch.JobBatch | null>();
+/** 详情页可见状态 */
+const { bool: detailVisible, setTrue: openDetail } = useBoolean(false);
+
 const { columns, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchGetJobBatchList,
   apiParams: {
@@ -23,7 +32,19 @@ const { columns, data, getData, loading, mobilePagination, searchParams, resetSe
       key: 'id',
       title: $t('common.index'),
       align: 'center',
-      width: 64
+      width: 64,
+      render: row => {
+        function showDetailDrawer() {
+          detailData.value = row;
+          openDetail();
+        }
+
+        return (
+          <NButton text tag="a" type="primary" onClick={showDetailDrawer} class="ws-normal">
+            {row.id}
+          </NButton>
+        );
+      }
     },
     {
       key: 'groupName',
@@ -52,26 +73,9 @@ const { columns, data, getData, loading, mobilePagination, searchParams, resetSe
         if (row.operationReason === null) {
           return null;
         }
-        const tagMap: Record<Api.Common.OperationReason, NaiveUI.ThemeColor> = {
-          0: 'default',
-          1: 'default',
-          2: 'error',
-          3: 'default',
-          4: 'default',
-          5: 'default',
-          6: 'default',
-          7: 'default',
-          8: 'default',
-          9: 'default',
-          10: 'default',
-          11: 'default',
-          12: 'default',
-          13: 'default',
-          14: 'default'
-        };
         const label = $t(operationReasonRecord[row.operationReason!]);
 
-        return <NTag type={tagMap[row.operationReason!]}>{label}</NTag>;
+        return <NTag type={tagColor(row.operationReason!)}>{label}</NTag>;
       }
     },
     {
@@ -120,6 +124,7 @@ function detail(id: string) {
         class="sm:h-full"
       />
     </NCard>
+    <JobBatchDetailDrawer v-model:visible="detailVisible" :row-data="detailData" />
   </div>
 </template>
 

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

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+import { executorTypeRecord, operationReasonRecord, taskBatchStatusRecord } from '@/constants/business';
+import { $t } from '@/locales';
+// import { fetchGetJobBatchDetail } from '@/service/api';
+import { tagColor } from '@/utils/common';
+
+defineOptions({
+  name: 'JobBatchDetailDrawer'
+});
+
+interface Props {
+  /** row data */
+  rowData?: Api.JobBatch.JobBatch | null;
+}
+const props = defineProps<Props>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+watch(
+  () => visible.value,
+  async val => {
+    if (val === true) {
+      console.log(props.rowData?.id);
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <OperateDrawer v-model="visible" :title="$t('page.jobBatch.detail')">
+    <NDescriptions label-placement="top" bordered :column="2">
+      <NDescriptionsItem :label="$t('page.jobBatch.groupName')">{{ rowData?.groupName }}</NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobBatch.jobName')">{{ rowData?.jobName }}</NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobBatch.taskBatchStatus')">
+        <NTag :type="tagColor(rowData?.taskBatchStatus!)">
+          {{ $t(taskBatchStatusRecord[rowData?.taskBatchStatus!]) }}
+        </NTag>
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobBatch.executionAt')">{{ rowData?.executionAt }}</NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobBatch.operationReason')">
+        <NTag :type="tagColor(rowData?.operationReason!)">
+          {{ $t(operationReasonRecord[rowData?.operationReason!]) }}
+        </NTag>
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobBatch.executorType')">
+        <NTag :type="tagColor(rowData?.executorType!)">
+          {{ $t(executorTypeRecord[rowData?.executorType!]) }}
+        </NTag>
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('page.jobBatch.executorInfo')" :span="2">
+        {{ rowData?.executorInfo }}
+      </NDescriptionsItem>
+      <NDescriptionsItem :label="$t('common.createDt')" :span="2">{{ rowData?.createDt }}</NDescriptionsItem>
+    </NDescriptions>
+  </OperateDrawer>
+</template>
+
+<style scoped></style>