feat(sj_map_reduce): 工作流批次详情新增实时刷新功能

src/components/common/log-drawer.vue

@@ -32,21 +32,19 @@ const visible = defineModel<boolean>('show', {
 const syncTime = ref(1);
 const logList = ref<Api.JobLog.JobMessage[]>([]);
 const interval = ref<NodeJS.Timeout>();
-const controller = new AbortController();
+let controller = new AbortController();
 const finished = ref<boolean>(true);
 let startId = '0';
 let fromIndex: number = 0;
-let axiosController = new AbortController();
 
 const pauseLog = () => {
   finished.value = true;
-  controller.abort();
   clearTimeout(interval.value);
   interval.value = undefined;
 };
 
 const stopLog = () => {
-  if (!finished.value) axiosController.abort();
+  if (!finished.value) controller.abort();
   pauseLog();
   startId = '0';
   fromIndex = 0;
@@ -68,7 +66,7 @@ async function getLogList() {
         fromIndex,
         size: 50
       },
-      axiosController
+      controller
     );
     logData = data;
     logError = error;
@@ -119,7 +117,7 @@ watch(
 
     if ((val || !props.drawer) && props.type && props.taskData) {
       finished.value = false;
-      axiosController = new AbortController();
+      controller = new AbortController();
       await getLogList();
     }
 
@@ -265,7 +263,7 @@ const SnailLogComponent = defineComponent({
 </script>
 
 <template>
-  <NDrawer v-if="drawer" v-model:show="visible" width="100%" display-directive="if">
+  <NDrawer v-if="drawer" v-model:show="visible" width="100%" display-directive="if" :auto-focus="false">
     <NDrawerContent closable>
       <template #header>
         <div class="flex-center">
@@ -287,10 +285,10 @@ const SnailLogComponent = defineComponent({
           </NTooltip>
           <span class="ml-6px">{{ title }}</span>
           <ButtonIcon icon="hugeicons:share-01" tooltip-content="在新标签页打开" class="ml-6px" @click="openNewTab" />
-          <NDropdown trigger="hover" :options="syncOptions" @select="handleSyncSelect">
+          <NDropdown trigger="hover" :options="syncOptions" width="trigger" @select="handleSyncSelect">
             <NTooltip placement="right">
               <template #trigger>
-                <NButton quaternary class="ml-3px w-136px" @click="handleSyncSelect(-1)">
+                <NButton dashed class="ml-3px w-136px" @click="handleSyncSelect(-1)">
                   <template #icon>
                     <div class="flex-center gap-8px">
                       <icon-solar:refresh-outline class="text-18px" />
@@ -311,10 +309,10 @@ const SnailLogComponent = defineComponent({
   <NCard v-else :bordered="false" :title="title" size="small" class="h-full sm:flex-1-hidden card-wrapper">
     <template #header-extra>
       <div class="flex items-center">
-        <NDropdown trigger="hover" :options="syncOptions" @select="handleSyncSelect">
+        <NDropdown trigger="hover" :options="syncOptions" width="trigger" @select="handleSyncSelect">
           <NTooltip placement="right">
             <template #trigger>
-              <NButton quaternary class="ml-3px w-136px" @click="handleSyncSelect(-1)">
+              <NButton dashed class="ml-3px w-136px" @click="handleSyncSelect(-1)">
                 <template #icon>
                   <div class="flex-center gap-8px">
                     <icon-solar:refresh-outline class="text-18px" />

src/components/workflow/modules/common/detail-card.vue

@@ -236,7 +236,7 @@ const onUpdatePage = (page: number) => {
               </NSpin>
               <slot></slot>
             </NTabPane>
-            <NTabPane name="task">
+            <NTabPane name="task" :disabled="jobData.taskBatchStatus === 99">
               <template #tab>
                 <span>任务项列表</span>
               </template>
@@ -271,7 +271,7 @@ const onUpdatePage = (page: number) => {
                     重试
                   </NButton>
                 </template>
-                <JobTaskListTable class="mt-16px" :row-data="jobData as Api.JobBatch.JobBatch" @show-log="getLogRows" />
+                <JobTaskListTable class="mt-16px" :row-data="jobData as any" @show-log="getLogRows" />
               </NCard>
             </NTabPane>
           </NTabs>

src/components/workflow/workflow.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref, useSlots, watch } from 'vue';
 import VueDragResize from 'vue-drag-resize/src';
 import { $t } from '@/locales';
 import NodeWrap from './modules/nodes/node-wrap.vue';
@@ -29,6 +29,8 @@ interface Emits {
 
 const emit = defineEmits<Emits>();
 
+const slots = useSlots();
+
 const zoom = ref<number>(100);
 const nodeData = ref<Workflow.NodeDataType>({});
 
@@ -144,6 +146,9 @@ const onDragstop = () => {
             <NButton type="info" @click="save">保存</NButton>
             <NButton class="ml-16px" @click="cancel">取消</NButton>
           </div>
+          <div v-if="disabled && slots.buttons" class="buttons">
+            <slot name="buttons"></slot>
+          </div>
         </div>
       </NAffix>
       <NSpin :show="spinning">

src/typings/workflow.d.ts

@@ -20,6 +20,8 @@ declare namespace Workflow {
     wfContexts?: { key: string; value: string | number | boolean; type: string }[];
     /** 工作流状态 */
     workflowStatus?: Api.Common.WorkFlowNodeStatus;
+    /** 工作流批次状态 */
+    workflowBatchStatus?: Api.Common.TaskBatchStatus;
     /** 描述 */
     description?: string;
     /** 流程配置 */

src/views/workflow/form/batch/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import Workflow from '@/components/workflow';
 import { useWorkflowStore } from '@/store/modules/workflow';
@@ -9,30 +9,144 @@ const store = useWorkflowStore();
 const route = useRoute();
 
 const spinning = ref(false);
-
 const id: string = String(route.query.id);
-
 const node = ref<Workflow.NodeDataType>({});
+const syncTime = ref(0);
+const interval = ref<NodeJS.Timeout>();
+const controller = new AbortController();
+const finished = ref<boolean>(true);
+
+const pauseBatch = () => {
+  finished.value = true;
+  controller.abort();
+  clearTimeout(interval.value);
+  interval.value = undefined;
+};
+
+const stopBatch = () => {
+  if (!finished.value) controller.abort();
+  pauseBatch();
+  node.value = {};
+  store.clear();
+};
 
 const getBatchDetail = async () => {
   spinning.value = true;
   const { data, error } = await fetchWorkflowBatchInfo(id);
   if (!error) {
     node.value = data;
+    finished.value = !(data.workflowBatchStatus && [1, 2].includes(data.workflowBatchStatus));
+    if (!finished.value) {
+      clearTimeout(interval.value);
+      interval.value = setTimeout(getBatchDetail, syncTime.value * 1000);
+    }
+  } else if (error?.code !== 'ERR_CANCELED') {
+    stopBatch();
   }
   spinning.value = false;
 };
 
+const handleSyncSelect = async (time: number) => {
+  if (time === -1) {
+    if (finished.value) {
+      finished.value = false;
+      await getBatchDetail();
+    }
+    return;
+  }
+
+  if (time === 0) {
+    pauseBatch();
+    return;
+  }
+
+  syncTime.value = time;
+  finished.value = false;
+  await getBatchDetail();
+};
+
 onMounted(() => {
   store.clear();
   store.setType(2);
   store.setId(id);
   getBatchDetail();
 });
+
+onBeforeUnmount(() => {
+  stopBatch();
+});
+
+const syncOptions = ref([
+  {
+    label: 'Off',
+    key: 0
+  },
+  {
+    label: 'Auto(1s)',
+    key: 1
+  },
+  {
+    label: '5s',
+    key: 5
+  },
+  {
+    label: '10s',
+    key: 10
+  },
+  {
+    label: '30s',
+    key: 30
+  },
+  {
+    label: '1m',
+    key: 60
+  },
+  {
+    label: '5m',
+    key: 300
+  }
+]);
 </script>
 
 <template>
-  <Workflow v-model="node" :spinning="spinning" disabled />
+  <Workflow v-model="node" :spinning="spinning" disabled>
+    <template #buttons>
+      <div class="flex-center">
+        <NDropdown trigger="hover" width="trigger" :options="syncOptions" @select="handleSyncSelect">
+          <NTooltip placement="left">
+            <template #trigger>
+              <NButton dashed class="mr-16px w-136px" @click="handleSyncSelect(-1)">
+                <template #icon>
+                  <div class="flex-center gap-8px">
+                    <icon-solar:refresh-outline class="text-18px" />
+                    {{ syncOptions.filter(item => item.key === syncTime)[0].label }}
+                    <SvgIcon icon="material-symbols:expand-more-rounded" />
+                  </div>
+                </template>
+              </NButton>
+            </template>
+            自动刷新频率
+          </NTooltip>
+        </NDropdown>
+        <NTooltip v-if="finished" placement="top">
+          <template #trigger>
+            <icon-material-symbols:check-circle class="text-20px color-success" />
+          </template>
+          流程批次加载完成
+        </NTooltip>
+        <NTooltip v-else>
+          <template #trigger>
+            <NSpin size="small">
+              <template #icon>
+                <icon-nonicons:loading-16 />
+              </template>
+            </NSpin>
+          </template>
+          流程批次正在加载
+        </NTooltip>
+      </div>
+    </template>
+  </Workflow>
 </template>
 
 <style scoped></style>