refactor(sj_map_reduce): 解决任务项列表树形结构分页问题

src/typings/api.d.ts

@@ -1045,6 +1045,10 @@ declare namespace Api {
       taskStatus: Common.TaskStatus;
       /** 任务类型 */
       taskType: Common.TaskType;
+      /** 子节点 */
+      children: JobTaskTree[];
+      /** 是否存在下级 */
+      isLeaf: boolean;
     }>;
 
     type JobTaskTree = {
@@ -1055,7 +1059,7 @@ declare namespace Api {
     /** jobTask search params */
     type jobTaskSearchParams = CommonType.RecordNullable<
       Pick<Api.Job.JobTask, 'groupName' | 'taskBatchId' | 'taskStatus'> &
-        CommonSearchParams & { startId: number; fromIndex: number }
+        CommonSearchParams & { startId: number; fromIndex: number; parentId: string }
     >;
 
     /** jobTask list */

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

@@ -5,7 +5,6 @@ import { $t } from '@/locales';
 import { tagColor } from '@/utils/common';
 import { fetchJobLogList } from '@/service/api/log';
 import JobTaskListTable from './job-task-list-table.vue';
-import JobTaskTreeTable from './job-task-tree-table.vue';
 
 defineOptions({
   name: 'JobBatchDetailDrawer'
@@ -106,12 +105,7 @@ onBeforeUnmount(() => {
         </NDescriptions>
       </NTabPane>
       <NTabPane :name="1" :tab="$t('page.log.title')" display-directive="if">
-        <JobTaskTreeTable
-          v-if="rowData?.taskType && [4, 5].includes(Number(rowData.taskType))"
-          :row-data="rowData"
-          @show-log="openLog"
-        />
-        <JobTaskListTable v-else :row-data="rowData" @show-log="openLog" />
+        <JobTaskListTable :row-data="rowData" @show-log="openLog" />
       </NTabPane>
     </NTabs>
   </DetailDrawer>

src/views/job/batch/modules/job-task-list-table.vue

@@ -6,7 +6,7 @@ import { taskStatusRecord } from '@/constants/business';
 import { $t } from '@/locales';
 import { parseArgsJson } from '@/utils/common';
 import { useTable } from '@/hooks/common/table';
-import { fetchGetJobTaskList } from '@/service/api';
+import { fetchGetJobTaskList, fetchGetJobTaskTree } from '@/service/api';
 
 defineOptions({
   name: 'JobTaskListTable'
@@ -40,6 +40,12 @@ const { columns, data, loading, mobilePagination } = useTable({
     // the value can not be undefined, otherwise the property in Form will not be reactive
   },
   columns: () => [
+    {
+      key: 'id',
+      title: $t('page.jobBatch.jobTask.id'),
+      align: 'left',
+      minWidth: 120
+    },
     {
       key: 'index',
       title: $t('common.index'),
@@ -51,12 +57,6 @@ const { columns, data, loading, mobilePagination } = useTable({
         </NButton>
       )
     },
-    {
-      key: 'id',
-      title: $t('page.jobBatch.jobTask.id'),
-      align: 'left',
-      minWidth: 64
-    },
     {
       key: 'groupName',
       title: $t('page.jobBatch.jobTask.groupName'),
@@ -147,6 +147,25 @@ const { columns, data, loading, mobilePagination } = useTable({
     }
   ]
 });
+
+const onLoad = (row: Record<string, any>) => {
+  return new Promise<void>((resolve, reject) => {
+    fetchGetJobTaskTree({
+      groupName: row.groupName,
+      taskBatchId: row.taskBatchId,
+      startId: 0,
+      fromIndex: 0,
+      parentId: row.id
+    })
+      .then(res => {
+        row.children = res.data?.data || [];
+        resolve();
+      })
+      .catch(e => {
+        reject(e);
+      });
+  });
+};
 </script>
 
 <template>
@@ -158,7 +177,11 @@ const { columns, data, loading, mobilePagination } = useTable({
     :scroll-x="962"
     :row-key="row => row.id"
     :pagination="mobilePagination"
+    :indent="16"
+    :cascade="false"
+    allow-checking-not-loaded
     class="sm:h-full"
+    @load="onLoad"
   />
 </template>
 

src/views/job/batch/modules/job-task-tree-table.vue

@@ -1,170 +0,0 @@
-<script setup lang="tsx">
-import { NButton, NCode, NPopover, NTag } from 'naive-ui';
-import hljs from 'highlight.js/lib/core';
-import json from 'highlight.js/lib/languages/json';
-import { taskStatusRecord } from '@/constants/business';
-import { $t } from '@/locales';
-import { parseArgsJson } from '@/utils/common';
-import { useTable, useTableOperate } from '@/hooks/common/table';
-import { fetchGetJobTaskTree } from '@/service/api';
-
-defineOptions({
-  name: 'JobTaskTreeTable'
-});
-
-hljs.registerLanguage('json', json);
-
-interface Props {
-  /** row data */
-  rowData?: Api.JobBatch.JobBatch | null;
-}
-
-const props = defineProps<Props>();
-
-interface Emits {
-  (e: 'showLog', rowData: Api.Job.JobTask): void;
-}
-
-const emit = defineEmits<Emits>();
-
-const { columns, data, loading, getData } = useTable({
-  apiFn: fetchGetJobTaskTree,
-  apiParams: {
-    page: 1,
-    size: 10,
-    groupName: props.rowData?.groupName,
-    taskBatchId: props.rowData?.id,
-    startId: 0,
-    fromIndex: 0
-    // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
-    // the value can not be undefined, otherwise the property in Form will not be reactive
-  },
-  columns: () => [
-    {
-      key: 'id',
-      title: $t('page.jobBatch.jobTask.id'),
-      align: 'left',
-      minWidth: 100
-    },
-    {
-      key: 'index',
-      title: '日志',
-      align: 'center',
-      width: 64,
-      render: row => (
-        <NButton type="info" text onClick={() => emit('showLog', row)}>
-          <span class="w-28px ws-break-spaces">{$t('page.log.view')}</span>
-        </NButton>
-      )
-    },
-    {
-      key: 'groupName',
-      title: $t('page.jobBatch.jobTask.groupName'),
-      align: 'left',
-      minWidth: 180
-    },
-    {
-      key: 'taskStatus',
-      title: $t('page.jobBatch.jobTask.taskStatus'),
-      align: 'left',
-      minWidth: 80,
-      render: row => {
-        if (row.taskStatus === null) {
-          return null;
-        }
-        const label = $t(taskStatusRecord[row.taskStatus!]);
-        const tagMap: Record<number, NaiveUI.ThemeColor> = {
-          1: 'info',
-          2: 'info',
-          3: 'info',
-          4: 'error',
-          5: 'error',
-          6: 'error'
-        };
-        return <NTag type={tagMap[row.taskStatus!]}>{label}</NTag>;
-      }
-    },
-    {
-      key: 'clientInfo',
-      title: $t('page.jobBatch.jobTask.clientInfo'),
-      align: 'left',
-      minWidth: 150,
-      render: row => {
-        if (row.clientInfo) {
-          const parts = row.clientInfo?.split('@');
-          const result = parts.length > 1 ? parts[1] : '';
-          return <div>{result}</div>;
-        }
-        return <div>{row.clientInfo}</div>;
-      }
-    },
-    {
-      key: 'argsStr',
-      title: $t('page.jobBatch.jobTask.argsStr'),
-      align: 'center',
-      titleAlign: 'center',
-      minWidth: 120,
-      render: row => {
-        return (
-          <NPopover trigger="click">
-            {{
-              trigger: () => (
-                <NButton type="primary" text>
-                  <span class="w-28px ws-break-spaces">{`查看\n参数`}</span>
-                </NButton>
-              ),
-              default: () => (
-                <NCode
-                  class="max-h-300px overflow-auto"
-                  hljs={hljs}
-                  code={parseArgsJson(row.argsStr)}
-                  language="json"
-                  show-line-numbers
-                />
-              )
-            }}
-          </NPopover>
-        );
-      }
-    },
-    {
-      key: 'resultMessage',
-      title: $t('page.jobBatch.jobTask.resultMessage'),
-      align: 'left',
-      minWidth: 120
-    },
-    {
-      key: 'retryCount',
-      title: $t('page.jobBatch.jobTask.retryCount'),
-      align: 'left',
-      minWidth: 64
-    },
-    {
-      key: 'createDt',
-      title: $t('page.jobBatch.jobTask.createDt'),
-      align: 'left',
-      minWidth: 120
-    }
-  ]
-});
-
-const { checkedRowKeys } = useTableOperate(data, getData);
-</script>
-
-<template>
-  <NDataTable
-    v-model:checked-row-keys="checkedRowKeys"
-    :columns="columns"
-    :data="data"
-    size="small"
-    :loading="loading"
-    :row-key="row => row.id"
-    :scroll-x="962"
-    virtual-scroll
-    max-height="calc(100vh - 180px)"
-    :indent="32"
-    class="sm:h-full"
-  />
-</template>
-
-<style scoped></style>