From ddeac22beddd0b1fd6d5b70041c846cc4d0b7c24 Mon Sep 17 00:00:00 2001
From: xlsea <m@xlsea.cn>
Date: Thu, 20 Jun 2024 10:56:55 +0800
Subject: [PATCH] =?UTF-8?q?fix(sj=5Fmap=5Freduce):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=B5=81=E8=A1=A8=E5=8D=95=E8=B5=8B=E5=80=BC?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../workflow/modules/drawer/start-drawer.vue  |  9 ++-
 src/components/workflow/workflow.vue          | 42 +++++++++++-
 src/constants/business.ts                     | 20 +++---
 src/views/workflow/task/index.vue             | 64 ++++++++++---------
 4 files changed, 91 insertions(+), 44 deletions(-)

diff --git a/src/components/workflow/modules/drawer/start-drawer.vue b/src/components/workflow/modules/drawer/start-drawer.vue
index 8e9a1cc..7e463da 100644
--- a/src/components/workflow/modules/drawer/start-drawer.vue
+++ b/src/components/workflow/modules/drawer/start-drawer.vue
@@ -2,7 +2,11 @@
 import { ref, watch } from 'vue';
 import CronInput from '@sa/cron-input';
 import { type FormInst, type FormItemRule } from 'naive-ui';
-import { blockStrategyRecordOptions, triggerTypeOptions, workFlowNodeStatusOptions } from '@/constants/business';
+import {
+  blockStrategyRecordOptions,
+  workflowTriggerTypeOptions as triggerTypeOptions,
+  workFlowNodeStatusOptions
+} from '@/constants/business';
 import { $t } from '@/locales';
 import { fetchGetAllGroupNameList } from '@/service/api';
 import { isNotNull } from '@/utils/common';
@@ -165,6 +169,7 @@ const rules: Record<RuleKey, FormItemRule> = {
               <NInputNumber
                 v-else
                 v-model:value="form.triggerInterval as number"
+                :min="1"
                 class="w-full"
                 placeholder="请输入触发间隔"
               >
@@ -176,7 +181,7 @@ const rules: Record<RuleKey, FormItemRule> = {
         <NGrid :cols="24" x-gap="20">
           <NGi :span="8">
             <NFormItem path="executorTimeout" label="执行超时时间">
-              <NInputNumber v-model:value="form.executorTimeout" placeholder="请输入超时时间">
+              <NInputNumber v-model:value="form.executorTimeout" placeholder="请输入超时时间" :min="1">
                 <template #suffix>秒</template>
               </NInputNumber>
             </NFormItem>
diff --git a/src/components/workflow/workflow.vue b/src/components/workflow/workflow.vue
index 063176a..50e33cf 100644
--- a/src/components/workflow/workflow.vue
+++ b/src/components/workflow/workflow.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { $t } from '@/locales';
 import NodeWrap from './modules/nodes/node-wrap.vue';
 import StartNode from './modules/nodes/start-node.vue';
@@ -57,12 +57,48 @@ watch(
 const onZoom = (n: number) => {
   zoom.value += 10 * n;
 
+  if (n > 0) {
+    const workflowBodyDom: HTMLDivElement | null = document.querySelector('.workflow-body');
+    if (workflowBodyDom) {
+      if (zoom.value <= 160) {
+        workflowBodyDom.scrollTo({ left: (280 * zoom.value) / 100, behavior: 'smooth' });
+      }
+
+      if (zoom.value > 160) {
+        workflowBodyDom.scrollTo({ left: (420 * zoom.value) / 100, behavior: 'smooth' });
+      }
+
+      if (zoom.value > 200) {
+        workflowBodyDom.scrollTo({ left: (520 * zoom.value) / 100, behavior: 'smooth' });
+      }
+    }
+  }
+
   if (zoom.value <= 10) {
     zoom.value = 10;
   } else if (zoom.value >= 300) {
     zoom.value = 300;
   }
 };
+
+const handleWeel = (e: WheelEvent) => {
+  e.preventDefault();
+  // @ts-expect-error ts-migrate(2339)
+  const wheelDelta = e.wheelDelta;
+
+  if (wheelDelta < 0) {
+    onZoom(-1);
+  } else {
+    onZoom(1);
+  }
+};
+
+onMounted(() => {
+  const workflowDom: HTMLDivElement | null = document.querySelector('.workflow');
+  if (workflowDom) {
+    workflowDom.onwheel = (ev: WheelEvent) => handleWeel(ev);
+  }
+});
 </script>
 
 <template>
@@ -73,7 +109,7 @@ const onZoom = (n: number) => {
           <div>
             <NTooltip>
               <template #trigger>
-                <NButton type="info" size="small" strong @click="onZoom(-1)">
+                <NButton size="small" strong circle @click="onZoom(-1)">
                   <icon-ant-design:minus-outlined />
                 </NButton>
               </template>
@@ -82,7 +118,7 @@ const onZoom = (n: number) => {
             <span class="ml-8px mr-8px text-18px text-#333639 dark:text-#d6d6d6">{{ zoom }}%</span>
             <NTooltip>
               <template #trigger>
-                <NButton type="info" size="small" strong @click="onZoom(1)">
+                <NButton size="small" strong circle @click="onZoom(1)">
                   <icon-ant-design:plus-outlined />
                 </NButton>
               </template>
diff --git a/src/constants/business.ts b/src/constants/business.ts
index 1178438..88df6d9 100644
--- a/src/constants/business.ts
+++ b/src/constants/business.ts
@@ -1,5 +1,5 @@
 import { $t } from '@/locales';
-import { transformRecordToNumberOption, transformRecordToOption } from '@/utils/common';
+import { transformRecordToNumberOption } from '@/utils/common';
 
 export const yesOrNoRecord: Record<Api.Common.YesOrNo, App.I18n.I18nKey> = {
   '0': 'common.yesOrNo.no',
@@ -30,13 +30,13 @@ export const alarmTypeRecord: Record<Api.NotifyRecipient.AlarmType, App.I18n.I18
   4: 'page.notifyRecipient.lark',
   5: 'page.notifyRecipient.webhook'
 };
-export const alarmTypeRecordOptions = transformRecordToOption(alarmTypeRecord);
+export const alarmTypeRecordOptions = transformRecordToNumberOption(alarmTypeRecord);
 
 export const alarmWebhookTypeRecord: Record<Api.NotifyRecipient.AlarmTypeWebhook, App.I18n.I18nKey> = {
   1: 'page.notifyRecipient.form.applicationJson',
   2: 'page.notifyRecipient.form.applicationXWwwFormUrlencoded'
 };
-export const alarmWebhookTypeRecordOptions = transformRecordToOption(alarmWebhookTypeRecord);
+export const alarmWebhookTypeRecordOptions = transformRecordToNumberOption(alarmWebhookTypeRecord);
 
 export const systemTaskType: Record<Api.NotifyConfig.SystemTaskType, App.I18n.I18nKey> = {
   1: 'common.systemTaskType.retry',
@@ -130,7 +130,7 @@ export const failStrategyRecord: Record<Api.Common.FailStrategy, App.I18n.I18nKe
   2: 'common.failStrategy.items.blockage'
 };
 
-export const failStrategyOptions = transformRecordToOption(failStrategyRecord);
+export const failStrategyOptions = transformRecordToNumberOption(failStrategyRecord);
 
 /** 判定逻辑 */
 export const logicalConditionRecord: Record<Api.Common.LogicalCondition, string> = {
@@ -138,7 +138,7 @@ export const logicalConditionRecord: Record<Api.Common.LogicalCondition, string>
   2: 'or'
 };
 
-export const logicalConditionOptions = transformRecordToOption(logicalConditionRecord);
+export const logicalConditionOptions = transformRecordToNumberOption(logicalConditionRecord);
 
 /** 表达式类型 */
 export const expressionRecord: Record<Api.Common.Expression, string> = {
@@ -147,7 +147,7 @@ export const expressionRecord: Record<Api.Common.Expression, string> = {
   3: 'QL'
 };
 
-export const expressionOptions = transformRecordToOption(expressionRecord);
+export const expressionOptions = transformRecordToNumberOption(expressionRecord);
 
 /** 请求类型 */
 export const contentTypeRecord: Record<Api.Common.ContentType, string> = {
@@ -155,7 +155,7 @@ export const contentTypeRecord: Record<Api.Common.ContentType, string> = {
   2: 'application/x-www-form-urlencoded'
 };
 
-export const contentTypeOptions = transformRecordToOption(contentTypeRecord);
+export const contentTypeOptions = transformRecordToNumberOption(contentTypeRecord);
 
 /** 执行器类型 */
 export const executorTypeRecord: Record<Api.Common.ExecutorType, App.I18n.I18nKey> = {
@@ -212,6 +212,10 @@ export const triggerTypeRecord: Record<Api.Job.TriggerType, App.I18n.I18nKey> =
 
 export const triggerTypeOptions = transformRecordToNumberOption(triggerTypeRecord);
 
+export const workflowTriggerTypeOptions = transformRecordToNumberOption(triggerTypeRecord).filter(
+  item => item.value !== 99
+);
+
 export const taskBatchStatusRecord: Record<Api.Common.TaskBatchStatus, App.I18n.I18nKey> = {
   1: 'common.taskBatchStatus.items.waiting',
   2: 'common.taskBatchStatus.items.running',
@@ -326,7 +330,7 @@ export const workFlowNodeStatusRecord: Record<Api.Common.WorkFlowNodeStatus, App
   1: 'common.workFlowNodeStatus.items.open'
 };
 
-export const workFlowNodeStatusOptions = transformRecordToOption(workFlowNodeStatusRecord);
+export const workFlowNodeStatusOptions = transformRecordToNumberOption(workFlowNodeStatusRecord);
 
 export const jobStatusEnum: Workflow.JobTagType = {
   0: {
diff --git a/src/views/workflow/task/index.vue b/src/views/workflow/task/index.vue
index f2a3308..18566e7 100644
--- a/src/views/workflow/task/index.vue
+++ b/src/views/workflow/task/index.vue
@@ -131,15 +131,6 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
       width: 200,
       render: row => {
         const options = [
-          {
-            label: $t('common.execute'),
-            key: 'execute',
-            click: () => execute(row.id!)
-          },
-          {
-            type: 'divider',
-            key: 'd1'
-          },
           {
             label: $t('common.copy'),
             key: 'copy',
@@ -153,35 +144,48 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
             label: $t('common.batchList'),
             key: 'batchList',
             click: () => batch(row.id!)
+          },
+          {
+            type: 'divider',
+            key: 'd2'
+          },
+          {
+            show: hasAuth('R_ADMIN'),
+            type: 'render',
+            key: 'delete',
+            render: () => (
+              <div class="flex-center">
+                <NPopconfirm onPositiveClick={() => handleDelete(row.id!)}>
+                  {{
+                    default: () => $t('common.confirmDelete'),
+                    trigger: () => (
+                      <NButton quaternary size="small">
+                        {$t('common.delete')}
+                      </NButton>
+                    )
+                  }}
+                </NPopconfirm>
+              </div>
+            )
           }
         ];
 
-        function onSelect(key: string) {
-          options.filter(o => o.key === key)[0].click!();
-        }
+        const onSelect = (key: string) => {
+          const fun = options.filter(o => o.key === key)[0].click;
+          if (fun) fun();
+        };
 
         return (
           <div class="flex-center gap-8px">
             <NButton text type="warning" ghost size="small" onClick={() => edit(row.id!)}>
               {$t('common.edit')}
             </NButton>
-            {hasAuth('R_ADMIN') ? (
-              <>
-                <n-divider vertical />
-                <NPopconfirm onPositiveClick={() => handleDelete(row.id!)}>
-                  {{
-                    default: () => $t('common.confirmDelete'),
-                    trigger: () => (
-                      <NButton text type="error" ghost size="small">
-                        {$t('common.delete')}
-                      </NButton>
-                    )
-                  }}
-                </NPopconfirm>
-              </>
-            ) : (
-              ''
-            )}
+
+            <n-divider vertical />
+
+            <NButton text type="error" ghost size="small" onClick={() => execute(row.id!)}>
+              {$t('common.execute')}
+            </NButton>
 
             <n-divider vertical />
 
@@ -320,5 +324,3 @@ function handleExport() {
     </NCard>
   </div>
 </template>
-
-<style scoped></style>