fix: misaligned nodes when running tasks from a schedule through enha…

…ncement by adding RunScheduleDialog component and integrating into schedule management

- Introduced RunScheduleDialog.vue for managing schedule runs.
- Updated index.ts to export the new RunScheduleDialog component.
- Enhanced RunSpiderDialog.vue to utilize form data instead of state.
- Added internationalization support for the new dialog in both English and Chinese.
- Updated schedule store to include runById action for executing scheduled tasks.
- Integrated RunScheduleDialog into ScheduleList.vue for user interaction.

crawlab-team/crawlab#1523

src/components/core/schedule/RunScheduleDialog.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+defineOptions({ name: 'ClRunScheduleDialog' });
+</script>
+
+<template>
+  <cl-run-spider-dialog ns="schedule" />
+</template>

src/components/core/spider/RunSpiderDialog.vue

@@ -4,58 +4,74 @@ import { useStore } from 'vuex';
 import useSpider from '@/components/core/spider/useSpider';
 import useNode from '@/components/core/node/useNode';
 import { TASK_MODE_RANDOM, TASK_MODE_SELECTED_NODES } from '@/constants/task';
-import useTask from '@/components/core/task/useTask';
 import { ElMessage } from 'element-plus';
 import { priorityOptions, translate } from '@/utils';
 
+const props = withDefaults(
+  defineProps<{
+    ns?: ListStoreNamespace;
+  }>(),
+  {
+    ns: 'spider',
+  }
+);
+
 // i18n
 const t = translate;
 
 // store
-const ns = 'spider';
 const store = useStore();
-const { spider: state } = store.state as RootStoreState;
 
 const { allListSelectOptions: allNodeSelectOptions } = useNode(store);
 
-const { modeOptions, form } = useSpider(store);
+const { modeOptions } = useSpider(store);
 
-// spider
-const spider = computed<Spider>(() => form.value);
+// form
+const form = computed(() => {
+  const { ns } = props;
+  return store.state[ns].form;
+});
 
 // form ref
 const formRef = ref();
 
 // get run options
 const getOptions = (): SpiderRunOptions => {
   return {
-    mode: spider.value.mode || TASK_MODE_RANDOM,
-    cmd: spider.value.cmd,
-    param: spider.value.param,
-    priority: spider.value.priority || 5,
+    mode: form.value.mode || TASK_MODE_RANDOM,
+    cmd: form.value.cmd,
+    param: form.value.param,
+    priority: form.value.priority || 5,
   };
 };
 
 // run options
 const options = ref<SpiderRunOptions>(getOptions());
 
 // dialog visible
-const visible = computed<boolean>(() => state.activeDialogKey === 'run');
+const visible = computed<boolean>(() => {
+  const { ns } = props;
+  return store.state[ns].activeDialogKey === 'run';
+});
 
 // title
 const title = computed<string>(() => {
-  if (!spider.value) return t('components.spider.dialog.run.title');
-  return `${t('components.spider.dialog.run.title')} - ${spider.value.name}`;
+  const { ns } = props;
+  if (!form.value) return t(`components.${ns}.dialog.run.title`);
+  return `${t(`components.${ns}.dialog.run.title`)} - ${form.value.name}`;
 });
 
 const onClose = () => {
+  const { ns } = props;
   store.commit(`${ns}/hideDialog`);
+  store.commit(`${ns}/resetForm`);
 };
 
 const onConfirm = async () => {
+  const { ns } = props;
   await formRef.value?.validate();
   await store.dispatch(`${ns}/runById`, {
-    id: spider.value?._id,
+    id: form.value?._id,
     options: options.value,
   });
   store.commit(`${ns}/hideDialog`);
@@ -67,7 +83,7 @@ const updateOptions = () => {
   options.value = getOptions();
 };
 
-watch(() => spider.value, updateOptions);
+watch(() => form.value, updateOptions);
 onBeforeMount(updateOptions);
 defineOptions({ name: 'ClRunSpiderDialog' });
 </script>

src/components/core/task/TaskForm.vue

@@ -23,7 +23,6 @@ const router = useRouter();
 const t = translate;
 
 // store
-const ns = 'task';
 const store = useStore();
 
 // use node
@@ -90,7 +89,6 @@ const onCancel = async () => {
   }
 };
 
-const noNodeId = computed<boolean>(() => isZeroObjectId(form.value?.node_id));
 const noScheduleId = computed<boolean>(() =>
   isZeroObjectId(form.value?.schedule_id)
 );

src/components/index.ts

@@ -170,6 +170,7 @@ import ResultCell from './core/result/ResultCell.vue';
 import ResultCellDialog from './core/result/ResultCellDialog.vue';
 import ResultDedupFieldsDialog from './core/result/ResultDedupFieldsDialog.vue';
 import RoleForm from './core/role/RoleForm.vue';
+import RunScheduleDialog from './core/schedule/RunScheduleDialog.vue';
 import RunSpiderDialog from './core/spider/RunSpiderDialog.vue';
 import ScheduleCron from './core/schedule/ScheduleCron.vue';
 import ScheduleForm from './core/schedule/ScheduleForm.vue';
@@ -401,6 +402,7 @@ export {
   ResultCellDialog as ClResultCellDialog,
   ResultDedupFieldsDialog as ClResultDedupFieldsDialog,
   RoleForm as ClRoleForm,
+  RunScheduleDialog as ClRunScheduleDialog,
   RunSpiderDialog as ClRunSpiderDialog,
   ScheduleCron as ClScheduleCron,
   ScheduleForm as ClScheduleForm,

src/i18n/lang/en/components/schedule.ts

@@ -33,6 +33,11 @@ const schedule: LComponentsSchedule = {
       next: 'Next',
     },
   },
+  dialog: {
+    run: {
+      title: 'Run Schedule',
+    },
+  },
 };
 
 export default schedule;

src/i18n/lang/zh/components/schedule.ts

@@ -32,6 +32,11 @@ const schedule: LComponentsSchedule = {
       next: '下一时刻',
     },
   },
+  dialog: {
+    run: {
+      title: '运行定时任务',
+    },
+  },
 };
 
 export default schedule;

src/interfaces/i18n/components/schedule.d.ts

@@ -32,4 +32,9 @@ interface LComponentsSchedule {
       next: string;
     };
   };
+  dialog: {
+    run: {
+      title: string;
+    };
+  };
 }

src/interfaces/store/modules/schedule.d.ts

@@ -14,4 +14,8 @@ type ScheduleStoreMutations = BaseStoreMutations<Schedule>;
 interface ScheduleStoreActions extends BaseStoreActions<Schedule> {
   enable: StoreAction<ScheduleStoreState, string>;
   disable: StoreAction<ScheduleStoreState, string>;
+  runById: StoreAction<
+    ScheduleStoreState,
+    { id: string; options: SpiderRunOptions }
+  >;
 }

src/store/modules/schedule.ts

@@ -45,6 +45,12 @@ const actions = {
   disable: async (ctx: StoreActionContext, id: string) => {
     return await post(`/schedules/${id}/disable`);
   },
+  runById: async (
+    ctx: StoreActionContext,
+    { id, options }: { id: string; options: SpiderRunOptions }
+  ) => {
+    return await post(`/schedules/${id}/run`, options);
+  },
 } as ScheduleStoreActions;
 
 export default {

src/views/schedule/list/ScheduleList.vue

@@ -14,6 +14,7 @@ const {
   tablePagination,
   actionFunctions,
 } = useScheduleList();
+
 defineOptions({ name: 'ClScheduleList' });
 </script>
 
@@ -32,6 +33,7 @@ defineOptions({ name: 'ClScheduleList' });
     <template #extra>
       <!-- Dialogs (handled by store) -->
       <cl-create-edit-schedule-dialog />
+      <cl-run-schedule-dialog />
       <!-- ./Dialogs -->
     </template>
   </cl-list-layout>

src/views/schedule/list/useScheduleList.tsx

@@ -41,6 +41,7 @@ const useScheduleList = () => {
   const ns = 'schedule';
   const store = useStore<RootStoreState>();
   const { commit } = store;
+  const { schedule: state } = store.state;
 
   // use list
   const { actionFunctions } = useList<Schedule>(ns, store);
@@ -293,24 +294,9 @@ const useScheduleList = () => {
             },
             {
               tooltip: t('common.actions.run'),
-              onClick: async row => {
-                await ElMessageBox.confirm(
-                  t('common.messageBox.confirm.run'),
-                  t('common.actions.run'),
-                  {
-                    type: 'warning',
-                    confirmButtonText: t('common.actions.confirm'),
-                    cancelButtonText: t('common.actions.cancel'),
-                  }
-                );
-                await store.dispatch('task/create', {
-                  mode: row.mode,
-                  priority: row.priority,
-                  spider_id: row.spider_id,
-                  cmd: row.cmd,
-                  param: row.param,
-                });
-                ElMessage.success(t('common.message.success.run'));
+              onClick: row => {
+                store.commit(`${ns}/setForm`, row);
+                store.commit(`${ns}/showDialog`, 'run');
               },
               action: ACTION_RUN,
             },