From 2722abdc61025576c99473f2fca12a0369d70d56 Mon Sep 17 00:00:00 2001
From: xlsea <m@xlsea.cn>
Date: Fri, 28 Jun 2024 10:06:47 +0800
Subject: [PATCH] =?UTF-8?q?fix(sj=5Fmap=5Freduce):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E5=88=97=E8=A1=A8=E5=B1=95=E7=A4=BA=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common}/job-task-list-table.vue           |  14 +-
 .../workflow/modules/common/detail-card.vue   | 136 +-----------------
 .../workflow/modules/detail/start-detail.vue  |  11 +-
 .../workflow/modules/nodes/task-node.vue      |   8 +-
 src/components/workflow/styles/index.scss     |  12 +-
 .../batch/modules/job-batch-detail-drawer.vue |   1 -
 6 files changed, 37 insertions(+), 145 deletions(-)
 rename src/{views/job/batch/modules => components/common}/job-task-list-table.vue (94%)

diff --git a/src/views/job/batch/modules/job-task-list-table.vue b/src/components/common/job-task-list-table.vue
similarity index 94%
rename from src/views/job/batch/modules/job-task-list-table.vue
rename to src/components/common/job-task-list-table.vue
index b462c45..874345c 100644
--- a/src/views/job/batch/modules/job-task-list-table.vue
+++ b/src/components/common/job-task-list-table.vue
@@ -31,7 +31,7 @@ const emit = defineEmits<Emits>();
 
 const expandedRowKeys = ref<DataTableRowKey[]>([]);
 
-const { columns, data, loading, mobilePagination } = useTable({
+const { columns, columnChecks, data, loading, mobilePagination } = useTable({
   apiFn: fetchGetJobTaskList,
   apiParams: {
     page: 1,
@@ -187,6 +187,18 @@ const onExpandedRowKeys = (keys: DataTableRowKey[]) => {
 const onUpdatePage = (_: number) => {
   expandedRowKeys.value = [];
 };
+
+const init = () => {
+  columnChecks.value = columnChecks.value.filter(column => {
+    if (!['4', '5'].includes(String(props.rowData?.taskType) || '-1')) {
+      return column.key !== 'taskName';
+    }
+
+    return true;
+  });
+};
+
+init();
 </script>
 
 <template>
diff --git a/src/components/workflow/modules/common/detail-card.vue b/src/components/workflow/modules/common/detail-card.vue
index e7b8364..a5ccf50 100644
--- a/src/components/workflow/modules/common/detail-card.vue
+++ b/src/components/workflow/modules/common/detail-card.vue
@@ -1,16 +1,14 @@
 <script setup lang="tsx">
 import { nextTick, ref, useSlots, watch } from 'vue';
-import type { DataTableColumn } from 'naive-ui';
-import { NButton, NCode, NPopover, NTag } from 'naive-ui';
+import { NButton, NTag } from 'naive-ui';
 import hljs from 'highlight.js/lib/core';
 import json from 'highlight.js/lib/languages/json';
-import { isNotNull, parseArgsJson, translateOptions } from '@/utils/common';
+import { isNotNull, translateOptions } from '@/utils/common';
 import {
   jobExecutorEnum,
   jobOperationReasonEnum,
   jobStatusEnum,
   taskBatchStatusEnum,
-  taskBatchStatusRecord,
   taskStatusRecordOptions
 } from '@/constants/business';
 import { useWorkflowStore } from '@/store/modules/workflow';
@@ -162,125 +160,6 @@ const isRetry = (taskBatchStatus: number) => {
   return taskBatchStatus === 4 || taskBatchStatus === 5 || taskBatchStatus === 6;
 };
 
-type ThemeColor = 'default' | 'error' | 'primary' | 'info' | 'success' | 'warning';
-
-const columns = ref<DataTableColumn<Workflow.JobBatchType>[]>([
-  {
-    key: 'index',
-    title: '日志',
-    align: 'center',
-    width: 64,
-    render: row => {
-      return (
-        <NButton type="primary" text onClick={() => getLogRows(row)}>
-          <span class="w-28px ws-break-spaces">{`查看\n日志`}</span>
-        </NButton>
-      );
-    }
-  },
-  {
-    key: 'id',
-    title: $t('page.jobBatch.jobTask.id'),
-    align: 'left',
-    titleAlign: 'center',
-    minWidth: 64
-  },
-  {
-    key: 'groupName',
-    title: $t('page.jobBatch.jobTask.groupName'),
-    align: 'left',
-    titleAlign: 'center',
-    minWidth: 180
-  },
-  {
-    key: 'taskStatus',
-    title: $t('page.jobBatch.jobTask.taskStatus'),
-    align: 'left',
-    titleAlign: 'center',
-    minWidth: 80,
-    render: row => {
-      if (row.taskStatus === null) {
-        return undefined;
-      }
-      const label = $t(taskBatchStatusRecord[row.taskStatus!]);
-      const tagMap: Record<number, 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',
-    titleAlign: 'center',
-    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',
-    titleAlign: 'center',
-    minWidth: 120
-  },
-  {
-    key: 'retryCount',
-    title: $t('page.jobBatch.jobTask.retryCount'),
-    align: 'left',
-    titleAlign: 'center',
-    minWidth: 64
-  },
-  {
-    key: 'createDt',
-    title: $t('page.jobBatch.jobTask.createDt'),
-    align: 'left',
-    titleAlign: 'center',
-    minWidth: 120
-  }
-]);
-
 function getTagColor(color: string) {
   return {
     color: `${color}18`,
@@ -392,16 +271,7 @@ const onUpdatePage = (page: number) => {
                     重试
                   </NButton>
                 </template>
-                <NDataTable
-                  :columns="columns"
-                  :data="dataSource"
-                  :loading="loading"
-                  :scroll="{ x: 1200 }"
-                  remote
-                  :row-key="row => row.id"
-                  :pagination="pagination"
-                  class="pt-16px sm:h-full"
-                />
+                <JobTaskListTable class="mt-16px" :row-data="jobData as Api.JobBatch.JobBatch" @show-log="getLogRows" />
               </NCard>
             </NTabPane>
           </NTabs>
diff --git a/src/components/workflow/modules/detail/start-detail.vue b/src/components/workflow/modules/detail/start-detail.vue
index 2e18760..2a95c57 100644
--- a/src/components/workflow/modules/detail/start-detail.vue
+++ b/src/components/workflow/modules/detail/start-detail.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { $t } from '@/locales';
 import { blockStrategyRecord, triggerTypeRecord, workFlowNodeStatusRecord } from '@/constants/business';
 
@@ -36,6 +36,14 @@ watch(
 const onClose = () => {
   emit('update:open', false);
 };
+
+const wfContext = computed(() => {
+  try {
+    return JSON.parse(props.modelValue?.wfContext || '{}').init;
+  } catch {
+    return props.modelValue.wfContext;
+  }
+});
 </script>
 
 <template>
@@ -52,6 +60,7 @@ const onClose = () => {
 
         <NDescriptionsItem label="执行超时时间">{{ modelValue.executorTimeout }} 秒</NDescriptionsItem>
         <NDescriptionsItem label="阻塞策略">{{ $t(blockStrategyRecord[modelValue.blockStrategy!]) }}</NDescriptionsItem>
+        <NDescriptionsItem label="工作流上下文">{{ wfContext }}</NDescriptionsItem>
         <NDescriptionsItem label="工作流状态">
           {{ $t(workFlowNodeStatusRecord[modelValue.workflowStatus!]) }}
         </NDescriptionsItem>
diff --git a/src/components/workflow/modules/nodes/task-node.vue b/src/components/workflow/modules/nodes/task-node.vue
index b8ee754..4cd947d 100644
--- a/src/components/workflow/modules/nodes/task-node.vue
+++ b/src/components/workflow/modules/nodes/task-node.vue
@@ -200,9 +200,11 @@ const isShow = (taskBatchStatus: number) => {
                   </span>
                 </NButton>
                 <NDivider v-if="isStop(item.taskBatchStatus!) && isRetry(item.taskBatchStatus!)" vertical />
-                <NButton v-if="isStop(item.taskBatchStatus!)" text class="popover-item" @click="stop(item!)">
-                  <icon-ant-design:stop-outlined />
-                  <span>{{ $t('common.stop') }}</span>
+                <NButton v-if="isStop(item.taskBatchStatus!)" text @click="stop(item!)">
+                  <span class="popover-item">
+                    <icon-ant-design:stop-outlined />
+                    {{ $t('common.stop') }}
+                  </span>
                 </NButton>
               </div>
               <template #trigger>
diff --git a/src/components/workflow/styles/index.scss b/src/components/workflow/styles/index.scss
index c26e52a..52d619a 100644
--- a/src/components/workflow/styles/index.scss
+++ b/src/components/workflow/styles/index.scss
@@ -25,7 +25,7 @@
     align-items: center;
     padding: 0px 0px;
     position: relative;
-    z-index: 1;
+    z-index: 2;
   }
 
   .node-wrap-box {
@@ -115,7 +115,7 @@
     display: inline-flex;
     flex-shrink: 0;
     position: relative;
-    z-index: 1;
+    z-index: 2;
   }
 
   .add-node-btn-box:before {
@@ -413,7 +413,7 @@
     position: absolute;
     top: 0;
     bottom: 0;
-    z-index: 1;
+    z-index: 2;
     left: 0;
     display: none;
     justify-content: center;
@@ -425,7 +425,7 @@
     position: absolute;
     top: 0;
     bottom: 0;
-    z-index: 1;
+    z-index: 2;
     right: 0;
     display: none;
     justify-content: center;
@@ -446,7 +446,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    z-index: 2;
+    z-index: 3;
     border-radius: 4px;
     transition: all 0.1s;
   }
@@ -464,7 +464,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    z-index: 2;
+    z-index: 3;
     border-radius: 4px;
     transition: all 0.1s;
   }
diff --git a/src/views/job/batch/modules/job-batch-detail-drawer.vue b/src/views/job/batch/modules/job-batch-detail-drawer.vue
index a80f16d..82e0b50 100644
--- a/src/views/job/batch/modules/job-batch-detail-drawer.vue
+++ b/src/views/job/batch/modules/job-batch-detail-drawer.vue
@@ -3,7 +3,6 @@ import { ref } from 'vue';
 import { executorTypeRecord, operationReasonRecord, taskBatchStatusRecord } from '@/constants/business';
 import { $t } from '@/locales';
 import { tagColor } from '@/utils/common';
-import JobTaskListTable from './job-task-list-table.vue';
 
 defineOptions({
   name: 'JobBatchDetailDrawer'