fix(sj_map_reduce): 修复工作流表单赋值问题

2024-06-20 10:56:55 +08:00 · 2024-06-20 10:56:55 +08:00 · ddeac22bed
commit ddeac22bed
parent 1b66376f9d
4 changed files with 91 additions and 44 deletions
--- 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>
--- 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>
--- 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: {
--- 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 text type="error" ghost size="small" onClick={() => execute(row.id!)}>
+              {$t('common.execute')}
            </NButton>
-                    )
-                  }}
-                </NPopconfirm>
-              </>
-            ) : (
-              ''
-            )}

            <n-divider vertical />

@ -320,5 +324,3 @@ function handleExport() {
    </NCard>
  </div>
 </template>
-
-<style scoped></style>