feat(sj_1.0.0): 定时任务列表-初稿

src/locales/langs/en-us.ts

@@ -183,6 +183,8 @@ const local: App.I18n.Schema = {
     retry_task: 'Retry task',
     retry_scene: 'Retry scene',
     workflow: 'Workflow',
+    job: 'Schedule Task Management',
+    job_task: 'Schedule Task List',
     'manage_user-detail': 'User Detail',
     manage_role: 'Role Manage',
     manage_menu: 'Menu Manage',
@@ -716,6 +718,49 @@ const local: App.I18n.Schema = {
       },
       addWorkflow: 'Add Workflow',
       editWorkflow: 'Add Workflow'
+    },
+    jobTask: {
+      title: 'JobTask List',
+      groupName: 'Group name',
+      jobName: 'Mission name',
+      argsStr: 'Method parameters',
+      argsType: 'Parameter Type',
+      nextTriggerAt: 'Next trigger time',
+      jobStatus: 'State',
+      routeKey: 'Routing strategy',
+      executorType: 'Actuator type',
+      triggerType: 'Trigger type',
+      triggerInterval: 'Interval duration',
+      blockStrategy: 'Blocking strategy',
+      executorTimeout: 'Overtime time',
+      maxRetryTimes: 'Maximum number of retries',
+      retryInterval: 'Retry interval',
+      taskType: 'Task type',
+      parallelNum: 'Parallel number',
+      bucketIndex: 'Bucket',
+      description: 'Description',
+      updateDt: 'Update time',
+      form: {
+        jobStatus: 'Please enter status',
+        maxRetryTimes: 'Please enter maximum number of retry',
+        description: 'Please enter description',
+        triggerType: 'Please enter trigger type',
+        jobName: 'Please enter Mission name',
+        executorTimeout: 'Please enter executor timeout',
+        triggerInterval: 'Please enter interval duration',
+        taskType: 'Please enter Task type',
+        parallelNum: 'Please enter Parallel number',
+        bucketIndex: 'Please enter Bucket',
+        executorType: 'Please enter Actuator type',
+        routeKey: 'Please enter Routing strategy',
+        blockStrategy: 'Please enter Blocking strategy',
+        argsType: 'Please enter Parameter Type',
+        argsStr: 'Please enter executor arguments',
+        groupName: 'Please enter Group name',
+        retryInterval: 'Please enter retry interval'
+      },
+      addJobTask: 'Add job task',
+      editJobTask: 'Edit job task'
     }
   },
   form: {

src/locales/langs/zh-cn.ts

@@ -184,6 +184,8 @@ const local: App.I18n.Schema = {
     retry_task: '重试任务',
     retry_scene: '重试场景',
     workflow: '工作流',
+    job: '定时任务管理',
+    job_task: '定时任务信息',
     'manage_user-detail': '用户详情',
     manage_role: '角色管理',
     manage_menu: '菜单管理',
@@ -712,6 +714,49 @@ const local: App.I18n.Schema = {
       },
       addWorkflow: '新增工作流',
       editWorkflow: '编辑工作流'
+    },
+    jobTask: {
+      title: '定时任务列表',
+      groupName: '组名称',
+      jobName: '任务名称',
+      argsStr: '方法参数',
+      argsType: '参数类型',
+      nextTriggerAt: '触发时间',
+      jobStatus: '状态',
+      routeKey: '路由策略',
+      executorType: '执行器类型',
+      triggerType: '触发类型',
+      triggerInterval: '间隔时长',
+      blockStrategy: '阻塞策略',
+      executorTimeout: '超时时间',
+      maxRetryTimes: '最大重试次数',
+      retryInterval: '重试间隔',
+      taskType: '任务类型',
+      parallelNum: '并行数',
+      bucketIndex: 'Bucket',
+      description: '描述',
+      updateDt: '更新时间',
+      form: {
+        jobStatus: '请输入状态',
+        maxRetryTimes: '请输入最大重试次数',
+        description: '请输入描述',
+        triggerType: '请输入触发类型',
+        jobName: '请输入任务名称',
+        executorTimeout: '请输入超时时间',
+        triggerInterval: '请输入间隔时长',
+        taskType: '请输入任务类型',
+        parallelNum: '请输入并行数',
+        bucketIndex: '请输入Bucket',
+        executorType: '请输入执行器类型',
+        routeKey: '请输入路由策略',
+        blockStrategy: '请输入阻塞策略',
+        argsType: '请输入参数类型',
+        argsStr: '请输入方法参数',
+        groupName: '请输入组名称',
+        retryInterval: '请输入重试间隔'
+      },
+      addJobTask: '新增定时任务',
+      editJobTask: '编辑定时任务'
     }
   },
   form: {

src/router/elegant/imports.ts

@@ -30,6 +30,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   "function_toggle-auth": () => import("@/views/function/toggle-auth/index.vue"),
   group: () => import("@/views/group/index.vue"),
   home: () => import("@/views/home/index.vue"),
+  job_task: () => import("@/views/job/task/index.vue"),
   manage_menu: () => import("@/views/manage/menu/index.vue"),
   manage_role: () => import("@/views/manage/role/index.vue"),
   "manage_user-detail": () => import("@/views/manage/user-detail/[id].vue"),

src/router/elegant/routes.ts

@@ -187,6 +187,26 @@ export const generatedRoutes: GeneratedRoute[] = [
       order: 1
     }
   },
+  {
+    name: 'job',
+    path: '/job',
+    component: 'layout.base',
+    meta: {
+      title: 'job',
+      i18nKey: 'route.job'
+    },
+    children: [
+      {
+        name: 'job_task',
+        path: '/job/task',
+        component: 'view.job_task',
+        meta: {
+          title: 'job_task',
+          i18nKey: 'route.job_task'
+        }
+      }
+    ]
+  },
   {
     name: 'login',
     path: '/login/:module(pwd-login)?',

src/router/elegant/transform.ts

@@ -114,14 +114,14 @@ function transformElegantRouteToVueRoute(
     }
 
   }
-
+  
   // add redirect to child
   if (children?.length && !vueRoute.redirect) {
     vueRoute.redirect = {
       name: children[0].name
     };
   }
-
+  
   if (children?.length) {
     const childRoutes = children.flatMap(child => transformElegantRouteToVueRoute(child, layouts, views));
 
@@ -163,6 +163,8 @@ const routeMap: RouteMap = {
   "function_toggle-auth": "/function/toggle-auth",
   "group": "/group",
   "home": "/home",
+  "job": "/job",
+  "job_task": "/job/task",
   "login": "/login/:module(pwd-login)?",
   "manage": "/manage",
   "manage_menu": "/manage/menu",

src/service/api/index.ts

@@ -9,3 +9,4 @@ export * from './group-config';
 export * from './retry-task';
 export * from './retry';
 export * from './workflow';
+export * from './job-task';

src/service/api/job-task.ts

@@ -0,0 +1,28 @@
+import { request } from '../request';
+
+/** get JobTask page */
+export function fetchGetJobTaskPage(params?: Api.JobTask.JobTaskSearchParams) {
+  return request<Api.JobTask.JobTaskList>({
+    url: '/job/page/list',
+    method: 'get',
+    params
+  });
+}
+
+/** add JobTask */
+export function fetchAddJobTask(params?: Api.JobTask.JobTask) {
+  return request<boolean>({
+    url: '/job/page/list',
+    method: 'post',
+    params
+  });
+}
+
+/** edit JobTask */
+export function fetchEditJobTask(params?: Api.JobTask.JobTask) {
+  return request<boolean>({
+    url: '/job/page/list',
+    method: 'put',
+    params
+  });
+}

src/typings/api.d.ts

@@ -796,4 +796,82 @@ declare namespace Api {
     /** workflow list */
     type WorkflowList = Common.PaginatingQueryRecord<Workflow>;
   }
+
+  /**
+   * namespace JobTask
+   *
+   * backend api module: "jobTask"
+   */
+  namespace JobTask {
+    type CommonSearchParams = Pick<Common.PaginatingCommonParams, 'page' | 'size'>;
+
+    /** JobTask */
+    type JobTask = Common.CommonRecord<{
+      /** 组名称 */
+      groupName: string;
+      /** 任务名称 */
+      jobName: string;
+      /** 方法参数 */
+      argsStr: string;
+      /** 参数类型 */
+      argsType: string;
+      /** 扩展字段 */
+      extAttrs: string;
+      /** 下次触发时间 */
+      nextTriggerAt: string;
+      /** 状态 */
+      jobStatus: string;
+      /** 路由策略 */
+      routeKey: string;
+      /** 执行器类型 */
+      executorType: string;
+      /** 触发类型 */
+      triggerType: string;
+      /** 间隔时长 */
+      triggerInterval: number;
+      /** 阻塞策略 */
+      blockStrategy: number;
+      /** 超时时间 */
+      executorTimeout: number;
+      /** 最大重试次数 */
+      maxRetryTimes: number;
+      /** 重试间隔 */
+      retryInterval: number;
+      /** 任务类型 */
+      taskType: number;
+      /** 并行数 */
+      parallelNum: number;
+      /** Bucket */
+      bucketIndex: number;
+      /** 描述 */
+      description: string;
+    }>;
+
+    /** JobTask search params */
+    type JobTaskSearchParams = CommonType.RecordNullable<
+      Pick<
+        Api.JobTask.JobTask,
+        | 'groupName'
+        | 'jobName'
+        | 'argsStr'
+        | 'argsType'
+        | 'jobStatus'
+        | 'routeKey'
+        | 'executorType'
+        | 'triggerType'
+        | 'triggerInterval'
+        | 'blockStrategy'
+        | 'executorTimeout'
+        | 'maxRetryTimes'
+        | 'retryInterval'
+        | 'taskType'
+        | 'parallelNum'
+        | 'description'
+      > &
+        CommonSearchParams
+    >;
+
+    /** JobTask list */
+    type JobTaskList = Common.PaginatingQueryRecord<JobTask>;
+  }
 }

src/typings/app.d.ts

@@ -884,6 +884,49 @@ declare namespace App {
           addWorkflow: string;
           editWorkflow: string;
         };
+        jobTask: {
+          title: string;
+          groupName: string;
+          jobName: string;
+          argsStr: string;
+          argsType: string;
+          nextTriggerAt: string;
+          jobStatus: string;
+          routeKey: string;
+          executorType: string;
+          triggerType: string;
+          triggerInterval: string;
+          blockStrategy: string;
+          executorTimeout: string;
+          maxRetryTimes: string;
+          retryInterval: string;
+          taskType: string;
+          parallelNum: string;
+          bucketIndex: string;
+          description: string;
+          updateDt: string;
+          form: {
+            jobName: string;
+            jobStatus: string;
+            maxRetryTimes: string;
+            description: string;
+            triggerType: string;
+            executorTimeout: string;
+            triggerInterval: string;
+            taskType: string;
+            parallelNum: string;
+            bucketIndex: string;
+            executorType: string;
+            routeKey: string;
+            blockStrategy: string;
+            argsType: string;
+            argsStr: string;
+            groupName: string;
+            retryInterval: string;
+          };
+          addJobTask: string;
+          editJobTask: string;
+        };
       };
       form: {
         required: string;

src/typings/elegant-router.d.ts

@@ -37,6 +37,8 @@ declare module "@elegant-router/types" {
     "function_toggle-auth": "/function/toggle-auth";
     "group": "/group";
     "home": "/home";
+    "job": "/job";
+    "job_task": "/job/task";
     "login": "/login/:module(pwd-login)?";
     "manage": "/manage";
     "manage_menu": "/manage/menu";
@@ -101,6 +103,7 @@ declare module "@elegant-router/types" {
     | "function"
     | "group"
     | "home"
+    | "job"
     | "login"
     | "manage"
     | "multi-menu"
@@ -142,6 +145,7 @@ declare module "@elegant-router/types" {
     | "function_toggle-auth"
     | "group"
     | "home"
+    | "job_task"
     | "manage_menu"
     | "manage_role"
     | "manage_user-detail"

src/views/job/task/index.vue

@@ -0,0 +1,192 @@
+<script setup lang="tsx">
+import { NButton, NPopconfirm } from 'naive-ui';
+import { fetchGetJobTaskPage } from '@/service/api';
+import { $t } from '@/locales';
+import { useAppStore } from '@/store/modules/app';
+import { useTable, useTableOperate } from '@/hooks/common/table';
+import JobTaskOperateDrawer from './modules/job-task-operate-drawer.vue';
+import JobTaskSearch from './modules/job-task-search.vue';
+
+const appStore = useAppStore();
+
+const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
+  apiFn: fetchGetJobTaskPage,
+  apiParams: {
+    page: 1,
+    size: 10,
+    groupName: null,
+    jobName: null,
+    jobStatus: null
+  },
+  columns: () => [
+    {
+      type: 'selection',
+      align: 'center',
+      width: 48
+    },
+    {
+      key: 'index',
+      title: $t('common.index'),
+      align: 'center',
+      width: 64
+    },
+    {
+      key: 'jobName',
+      title: $t('page.jobTask.jobName'),
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'groupName',
+      title: $t('page.jobTask.groupName'),
+      align: 'left',
+      minWidth: 120
+    },
+    {
+      key: 'nextTriggerAt',
+      title: $t('page.jobTask.nextTriggerAt'),
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'jobStatus',
+      title: $t('page.jobTask.jobStatus'),
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'taskType',
+      title: $t('page.jobTask.taskType'),
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'triggerType',
+      title: $t('page.jobTask.triggerType'),
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'triggerInterval',
+      title: $t('page.jobTask.triggerInterval'),
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'blockStrategy',
+      title: $t('page.jobTask.blockStrategy'),
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'executorTimeout',
+      title: $t('page.jobTask.executorTimeout'),
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'updateDt',
+      title: $t('page.jobTask.executorTimeout'),
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'operate',
+      title: $t('common.operate'),
+      align: 'center',
+      width: 130,
+      render: row => (
+        <div class="flex-center gap-8px">
+          <NButton type="primary" ghost size="small" onClick={() => edit(row.id!)}>
+            {$t('common.edit')}
+          </NButton>
+          <NPopconfirm onPositiveClick={() => handleDelete(row.id!)}>
+            {{
+              default: () => $t('common.confirmDelete'),
+              trigger: () => (
+                <NButton type="error" ghost size="small">
+                  {$t('common.delete')}
+                </NButton>
+              )
+            }}
+          </NPopconfirm>
+        </div>
+      )
+    }
+  ]
+});
+
+const {
+  drawerVisible,
+  operateType,
+  editingData,
+  handleAdd,
+  handleEdit,
+  checkedRowKeys,
+  onBatchDeleted,
+  onDeleted
+  // closeDrawer
+} = useTableOperate(data, getData);
+
+async function handleBatchDelete() {
+  // request
+  console.log(checkedRowKeys.value);
+
+  onBatchDeleted();
+}
+
+function handleDelete(id: string) {
+  // request
+  console.log(id);
+
+  onDeleted();
+}
+
+function edit(id: string) {
+  handleEdit(id);
+}
+</script>
+
+<template>
+  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+    <JobTaskSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
+    <NCard
+      :title="$t('page.jobTask.title')"
+      :bordered="false"
+      size="small"
+      class="sm:flex-1-hidden card-wrapper"
+      header-class="view-card-header"
+    >
+      <template #header-extra>
+        <TableHeaderOperation
+          v-model:columns="columnChecks"
+          :disabled-delete="checkedRowKeys.length === 0"
+          :loading="loading"
+          @add="handleAdd"
+          @delete="handleBatchDelete"
+          @refresh="getData"
+        />
+      </template>
+      <NDataTable
+        v-model:checked-row-keys="checkedRowKeys"
+        :columns="columns"
+        :data="data"
+        :flex-height="!appStore.isMobile"
+        :scroll-x="962"
+        :loading="loading"
+        remote
+        :row-key="row => row.id"
+        :pagination="mobilePagination"
+        class="sm:h-full"
+      />
+      <JobTaskOperateDrawer
+        v-model:visible="drawerVisible"
+        :operate-type="operateType"
+        :row-data="editingData"
+        @submitted="getData"
+      />
+    </NCard>
+  </div>
+</template>
+
+<style scoped></style>

src/views/job/task/modules/job-task-operate-drawer.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { computed, reactive, watch } from 'vue';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import OperateDrawer from '@/components/common/operate-drawer.vue';
+import { $t } from '@/locales';
+// import { fetchAddJobTask, fetchEditJobTask } from '@/service/api';
+
+defineOptions({
+  name: 'JobTaskOperateDrawer'
+});
+
+interface Props {
+  /** the type of operation */
+  operateType: NaiveUI.TableOperateType;
+  /** the edit row data */
+  rowData?: Api.JobTask.JobTask | null;
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'submitted'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+const { defaultRequiredRule } = useFormRules();
+
+const title = computed(() => {
+  const titles: Record<NaiveUI.TableOperateType, string> = {
+    add: $t('page.jobTask.addJobTask'),
+    edit: $t('page.jobTask.editJobTask')
+  };
+  return titles[props.operateType];
+});
+
+type Model = Pick<
+  Api.JobTask.JobTask,
+  | 'groupName'
+  | 'jobName'
+  | 'argsStr'
+  | 'argsType'
+  | 'jobStatus'
+  | 'routeKey'
+  | 'executorType'
+  | 'triggerType'
+  | 'triggerInterval'
+  | 'blockStrategy'
+  | 'executorTimeout'
+  | 'maxRetryTimes'
+  | 'retryInterval'
+  | 'taskType'
+  | 'parallelNum'
+  | 'description'
+>;
+
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    groupName: '',
+    jobName: '',
+    argsStr: '',
+    argsType: '',
+    jobStatus: '',
+    routeKey: '',
+    executorType: '',
+    triggerType: '',
+    triggerInterval: 1,
+    blockStrategy: 1,
+    executorTimeout: 60,
+    maxRetryTimes: 3,
+    retryInterval: 1,
+    taskType: 1,
+    parallelNum: 1,
+    description: ''
+  };
+}
+
+type RuleKey = Extract<
+  keyof Model,
+  | 'groupName'
+  | 'jobName'
+  | 'argsStr'
+  | 'argsType'
+  | 'jobStatus'
+  | 'routeKey'
+  | 'executorType'
+  | 'triggerType'
+  | 'triggerInterval'
+  | 'blockStrategy'
+  | 'executorTimeout'
+  | 'maxRetryTimes'
+  | 'retryInterval'
+  | 'taskType'
+  | 'parallelNum'
+  | 'description'
+>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+  groupName: defaultRequiredRule,
+  jobName: defaultRequiredRule,
+  argsStr: defaultRequiredRule,
+  argsType: defaultRequiredRule,
+  jobStatus: defaultRequiredRule,
+  routeKey: defaultRequiredRule,
+  executorType: defaultRequiredRule,
+  triggerType: defaultRequiredRule,
+  triggerInterval: defaultRequiredRule,
+  blockStrategy: defaultRequiredRule,
+  executorTimeout: defaultRequiredRule,
+  maxRetryTimes: defaultRequiredRule,
+  retryInterval: defaultRequiredRule,
+  taskType: defaultRequiredRule,
+  parallelNum: defaultRequiredRule,
+  description: defaultRequiredRule
+};
+
+function handleUpdateModelWhenEdit() {
+  if (props.operateType === 'add') {
+    Object.assign(model, createDefaultModel());
+    return;
+  }
+
+  if (props.operateType === 'edit' && props.rowData) {
+    Object.assign(model, props.rowData);
+  }
+}
+
+function closeDrawer() {
+  visible.value = false;
+}
+
+async function handleSubmit() {
+  await validate();
+  // request
+  // if (props.operateType === 'add') {
+  //   const { ... } = model;
+  //   fetchAddJobTask({ ... });
+  // }
+
+  // if (props.operateType === 'edit') {
+  //   const { ... } = model;
+  //   fetchEditJobTask({ ... });
+  // }
+  window.$message?.success($t('common.updateSuccess'));
+  closeDrawer();
+  emit('submitted');
+}
+
+watch(visible, () => {
+  if (visible.value) {
+    handleUpdateModelWhenEdit();
+    restoreValidation();
+  }
+});
+</script>
+
+<template>
+  <OperateDrawer v-model="visible" :title="title" @handle-submit="handleSubmit">
+    <NForm ref="formRef" :model="model" :rules="rules">
+      <NFormItem :label="$t('page.jobTask.groupName')" path="groupName">
+        <NInput v-model:value="model.groupName" :placeholder="$t('page.jobTask.form.groupName')" />
+      </NFormItem>
+      <NFormItem :label="$t('page.jobTask.jobName')" path="jobName">
+        <NInput v-model:value="model.jobName" :placeholder="$t('page.jobTask.form.jobName')" />
+      </NFormItem>
+      <NFormItem :label="$t('page.jobTask.jobStatus')" path="jobStatus">
+        <NInput v-model:value="model.jobStatus" :placeholder="$t('page.jobTask.form.jobStatus')" />
+      </NFormItem>
+    </NForm>
+    <template #footer>
+      <NSpace :size="16">
+        <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
+        <NButton type="primary" @click="handleSubmit">{{ $t('common.save') }}</NButton>
+      </NSpace>
+    </template>
+  </OperateDrawer>
+</template>
+
+<style scoped></style>

src/views/job/task/modules/job-task-search.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'JobTaskSearch'
+});
+
+interface Emits {
+  (e: 'reset'): void;
+  (e: 'search'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const model = defineModel<Api.JobTask.JobTaskSearchParams>('model', { required: true });
+
+function reset() {
+  emit('reset');
+}
+
+function search() {
+  emit('search');
+}
+</script>
+
+<template>
+  <SearchForm :model="model" @search="search" @reset="reset">
+    <NFormItemGi span="24 s:12 m:6" :label="$t('page.jobTask.groupName')" path="groupName" class="pr-24px">
+      <NInput v-model:value="model.groupName" :placeholder="$t('page.jobTask.form.groupName')" />
+    </NFormItemGi>
+    <NFormItemGi span="24 s:12 m:6" :label="$t('page.jobTask.jobName')" path="jobName" class="pr-24px">
+      <NInput v-model:value="model.jobName" :placeholder="$t('page.jobTask.form.jobName')" />
+    </NFormItemGi>
+    <NFormItemGi span="24 s:12 m:6" :label="$t('page.jobTask.jobStatus')" path="jobStatus" class="pr-24px">
+      <NInput v-model:value="model.jobStatus" :placeholder="$t('page.jobTask.form.jobStatus')" />
+    </NFormItemGi>
+  </SearchForm>
+</template>
+
+<style scoped></style>