From 45d0c427eb4ec5bc2a55eeea99ef8c0f01d9fa20 Mon Sep 17 00:00:00 2001
From: byteblogs168 <598092184@qq.com>
Date: Thu, 12 Oct 2023 23:09:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:2.4.0=201.=E6=96=B0=E5=A2=9Ejob=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E9=9D=A2=E3=80=81=E4=BB=BB=E5=8A=A1=E6=89=B9?=
 =?UTF-8?q?=E6=AC=A1=E5=88=97=E8=A1=A8=E9=A1=B5=202.=20=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E9=87=8D=E8=AF=95=E7=9A=84=E7=9B=AE=E5=BD=95=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../server/web/model/request/JobQueryVO.java  |   1 +
 .../model/response/JobBatchResponseVO.java    |  33 ++
 .../web/service/impl/JobServiceImpl.java      |   5 +
 frontend/src/api/jobApi.js                    |  48 +-
 frontend/src/config/router.config.js          | 143 +++---
 frontend/src/views/job/JobBatch.vue           | 441 +++++++++++++++++
 frontend/src/views/job/JobInfo.vue            | 102 ++++
 frontend/src/views/job/JobList.vue            | 119 +++--
 frontend/src/views/job/JobTask.vue            | 445 ++++++++++++++++++
 9 files changed, 1237 insertions(+), 100 deletions(-)
 create mode 100644 frontend/src/views/job/JobBatch.vue
 create mode 100644 frontend/src/views/job/JobInfo.vue
 create mode 100644 frontend/src/views/job/JobTask.vue

diff --git a/easy-retry-server/easy-retry-server-web/src/main/java/com/aizuda/easy/retry/server/web/model/request/JobQueryVO.java b/easy-retry-server/easy-retry-server-web/src/main/java/com/aizuda/easy/retry/server/web/model/request/JobQueryVO.java
index 43972446..683cb200 100644
--- a/easy-retry-server/easy-retry-server-web/src/main/java/com/aizuda/easy/retry/server/web/model/request/JobQueryVO.java
+++ b/easy-retry-server/easy-retry-server-web/src/main/java/com/aizuda/easy/retry/server/web/model/request/JobQueryVO.java
@@ -14,4 +14,5 @@ import lombok.EqualsAndHashCode;
 public class JobQueryVO extends BaseQueryVO {
     private String groupName;
     private String jobName;
+    private Integer jobStatus;
 }
diff --git a/easy-retry-server/easy-retry-server-web/src/main/java/com/aizuda/easy/retry/server/web/model/response/JobBatchResponseVO.java b/easy-retry-server/easy-retry-server-web/src/main/java/com/aizuda/easy/retry/server/web/model/response/JobBatchResponseVO.java
index a24d32d2..c57e7132 100644
--- a/easy-retry-server/easy-retry-server-web/src/main/java/com/aizuda/easy/retry/server/web/model/response/JobBatchResponseVO.java
+++ b/easy-retry-server/easy-retry-server-web/src/main/java/com/aizuda/easy/retry/server/web/model/response/JobBatchResponseVO.java
@@ -2,6 +2,8 @@ package com.aizuda.easy.retry.server.web.model.response;
 
 import lombok.Data;
 
+import java.time.LocalDateTime;
+
 /**
  * @author: www.byteblogs.com
  * @date : 2023-10-12 10:18
@@ -10,4 +12,35 @@ import lombok.Data;
 @Data
 public class JobBatchResponseVO {
 
+    private Long id;
+
+    /**
+     * 组名称
+     */
+    private String groupName;
+
+    /**
+     * 任务信息id
+     */
+    private Long jobId;
+
+    /**
+     * 任务状态 0、失败 1、成功
+     */
+    private Integer taskStatus;
+
+    /**
+     * 创建时间
+     */
+    private LocalDateTime createDt;
+
+    /**
+     * 任务执行时间
+     */
+    private LocalDateTime executionAt;
+
+    /**
+     * 操作原因
+     */
+    private Integer operationReason;
 }
diff --git a/easy-retry-server/easy-retry-server-web/src/main/java/com/aizuda/easy/retry/server/web/service/impl/JobServiceImpl.java b/easy-retry-server/easy-retry-server-web/src/main/java/com/aizuda/easy/retry/server/web/service/impl/JobServiceImpl.java
index b4a22d60..0d18fac2 100644
--- a/easy-retry-server/easy-retry-server-web/src/main/java/com/aizuda/easy/retry/server/web/service/impl/JobServiceImpl.java
+++ b/easy-retry-server/easy-retry-server-web/src/main/java/com/aizuda/easy/retry/server/web/service/impl/JobServiceImpl.java
@@ -18,6 +18,7 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
 import java.util.List;
+import java.util.Objects;
 
 /**
  * @author www.byteblogs.com
@@ -44,6 +45,10 @@ public class JobServiceImpl implements JobService {
             queryWrapper.eq(Job::getJobName, queryVO.getJobName());
         }
 
+        if (Objects.nonNull(queryVO.getJobStatus())) {
+            queryWrapper.eq(Job::getJobStatus, queryVO.getJobStatus());
+        }
+
         PageDTO<Job> selectPage = jobMapper.selectPage(pageDTO, queryWrapper);
 
         List<JobResponseVO> jobResponseList = JobResponseVOConverter.INSTANCE.toJobResponseVOs(selectPage.getRecords());
diff --git a/frontend/src/api/jobApi.js b/frontend/src/api/jobApi.js
index 3b77d46d..316d2172 100644
--- a/frontend/src/api/jobApi.js
+++ b/frontend/src/api/jobApi.js
@@ -1,11 +1,34 @@
 import request from '@/utils/request'
 const jobApi = {
+  // 任务信息
+  jobList: '/job/list',
+  jobDetail: '/job/',
+  saveJob: '/job/',
+  updateJob: '/job/',
+
+  // 任务批次
+  jobBatchList: '/job/batch/list',
+  jobBatchDetail: '/job/batch/'
 
-  jobList: '/job/list'
 }
 
 export default jobApi
 
+export function jobBatchList (parameter) {
+  return request({
+    url: jobApi.jobBatchList,
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function jobBatchDetail (id) {
+  return request({
+    url: jobApi.jobBatchDetail + id,
+    method: 'get'
+  })
+}
+
 export function getJobList (parameter) {
   return request({
     url: jobApi.jobList,
@@ -13,3 +36,26 @@ export function getJobList (parameter) {
     params: parameter
   })
 }
+
+export function getJobDetail (id) {
+  return request({
+    url: jobApi.jobDetail + id,
+    method: 'get'
+  })
+}
+
+export function saveJob (data) {
+  return request({
+    url: jobApi.saveJob,
+    method: 'post',
+    data
+  })
+}
+
+export function updateJob (data) {
+  return request({
+    url: jobApi.updateJob,
+    method: 'put',
+    data
+  })
+}
diff --git a/frontend/src/config/router.config.js b/frontend/src/config/router.config.js
index 7bfb6cd1..a142f622 100644
--- a/frontend/src/config/router.config.js
+++ b/frontend/src/config/router.config.js
@@ -52,68 +52,106 @@ export const asyncRouterMap = [
         meta: { title: '基础信息配置', hidden: true, hideChildrenInMenu: true, icon: 'profile', permission: ['basicConfig'] }
       },
       {
-        path: '/retry-task',
+        path: '/retry',
         name: 'RetryTask',
         component: RouteView,
-        hideChildrenInMenu: true,
-        redirect: '/retry-task/list',
-        meta: { title: '任务管理', icon: 'schedule', hideChildrenInMenu: true, keepAlive: true, permission: ['retryTask'] },
+        redirect: '/retry/list',
+        meta: { title: '重试任务管理', icon: 'schedule', hideChildrenInMenu: true, keepAlive: true, permission: ['retryTask'] },
         children: [
           {
-            path: '/retry-task/info',
+            path: '/retry/list',
+            name: 'RetryTaskList',
+            component: () => import('@/views/task/RetryTaskList'),
+            meta: { title: '重试任务', icon: 'profile', keepAlive: true, permission: ['retryTask'] }
+          },
+          {
+            path: '/retry/info',
             name: 'RetryTaskInfo',
+            hidden: true,
             component: () => import('@/views/task/RetryTaskInfo'),
             meta: { title: '任务管理详情', icon: 'profile', keepAlive: true, permission: ['retryTask'] }
           },
           {
-            path: '/retry-task/list',
-            name: 'RetryTaskList',
-            component: () => import('@/views/task/RetryTaskList'),
-            meta: { title: '任务管理列表', icon: 'profile', keepAlive: true, permission: ['retryTask'] }
+            path: '/retry/dead-letter/list',
+            name: 'RetryDeadLetterList',
+            component: () => import('@/views/task/RetryDeadLetterList'),
+            meta: { title: '死信队列', icon: 'profile', permission: ['retryDeadLetter'] }
+          },
+          {
+            path: '/retry/dead-letter/info',
+            name: 'RetryDeadLetterInfo',
+            hidden: true,
+            component: () => import('@/views/task/RetryDeadLetterInfo'),
+            meta: { title: '死信队列管理详情', icon: 'profile', permission: ['retryDeadLetter'] }
+          },
+          {
+            path: '/retry/log/list',
+            name: 'RetryLogList',
+            component: () => import('@/views/task/RetryLogList'),
+            meta: { title: '重试日志', icon: 'profile', permission: ['retryLog'] }
+          },
+          {
+            path: '/retry/log/info',
+            name: 'RetryLogInfo',
+            hidden: true,
+            component: () => import('@/views/task/RetryLogInfo'),
+            meta: { title: '重试日志详情', icon: 'profile', permission: ['retryLog'] }
           }
           ]
       },
+      // {
+      //   path: '/retry-dead-letter',
+      //   name: 'RetryDeadLetter',
+      //   component: RouteView,
+      //   hideChildrenInMenu: true,
+      //   redirect: '/retry-dead-letter/list',
+      //   meta: { title: '死信队列管理', icon: 'exception', permission: ['retryDeadLetter'] },
+      //   children: [
+      //     {
+      //       path: '/retry-dead-letter/list',
+      //       name: 'RetryDeadLetterList',
+      //       component: () => import('@/views/task/RetryDeadLetterList'),
+      //       meta: { title: '死信队列管理列表', icon: 'profile', permission: ['retryDeadLetter'] }
+      //     },
+      //     {
+      //       path: '/retry-dead-letter/info',
+      //       name: 'RetryDeadLetterInfo',
+      //       component: () => import('@/views/task/RetryDeadLetterInfo'),
+      //       meta: { title: '死信队列管理详情', icon: 'profile', permission: ['retryDeadLetter'] }
+      //     }
+      //   ]
+      // },
       {
-        path: '/retry-dead-letter',
-        name: 'RetryDeadLetter',
+        path: '/job',
+        name: 'Job',
         component: RouteView,
-        hideChildrenInMenu: true,
-        redirect: '/retry-dead-letter/list',
-        meta: { title: '死信队列管理', icon: 'exception', permission: ['retryDeadLetter'] },
+        redirect: '/job/list',
+        meta: { title: '定时任务管理', icon: 'profile', permission: ['retryLog'] },
         children: [
           {
-            path: '/retry-dead-letter/list',
-            name: 'RetryDeadLetterList',
-            component: () => import('@/views/task/RetryDeadLetterList'),
-            meta: { title: '死信队列管理列表', icon: 'profile', permission: ['retryDeadLetter'] }
+            path: '/job/list',
+            name: 'JobList',
+            component: () => import('@/views/job/JobList'),
+            meta: { title: '任务信息', icon: 'profile', permission: ['retryLog'] }
           },
           {
-            path: '/retry-dead-letter/info',
-            name: 'RetryDeadLetterInfo',
-            component: () => import('@/views/task/RetryDeadLetterInfo'),
-            meta: { title: '死信队列管理详情', icon: 'profile', permission: ['retryDeadLetter'] }
-          }
-        ]
-      },
-      {
-        path: '/retry-log',
-        name: 'RetryLog',
-        component: RouteView,
-        hideChildrenInMenu: true,
-        redirect: '/retry-log/list',
-        meta: { title: '重试日志管理', icon: 'profile', permission: ['retryLog'] },
-        children: [
-          {
-            path: '/retry-log/list',
-            name: 'RetryLogList',
-            component: () => import('@/views/task/RetryLogList'),
-            meta: { title: '重试日志列表', icon: 'profile', permission: ['retryLog'] }
+            path: '/job/info',
+            name: 'JobInfo',
+            hidden: true,
+            component: () => import('@/views/job/JobInfo'),
+            meta: { title: '定时任务详情', icon: 'profile', permission: ['retryLog'] }
           },
           {
-            path: '/retry-log/info',
-            name: 'RetryLogInfo',
-            component: () => import('@/views/task/RetryLogInfo'),
-            meta: { title: '重试日志详情', icon: 'profile', permission: ['retryLog'] }
+            path: '/job/batch/list',
+            name: 'JobBatch',
+            component: () => import('@/views/job/JobBatch'),
+            meta: { title: '任务批次', icon: 'profile', permission: ['retryLog'] }
+          },
+          {
+            path: '/job/task/list',
+            name: 'JobTask',
+            component: () => import('@/views/job/JobTask'),
+            meta: { title: '任务项', icon: 'profile', permission: ['retryLog'] }
           }
         ]
       },
@@ -129,27 +167,6 @@ export const asyncRouterMap = [
         hidden: true,
         component: () => import('@/views/user/UserForm'),
         meta: { title: '新增或更新用户', icon: 'profile', permission: ['userForm'] }
-      },
-      {
-        path: '/job',
-        name: 'Job',
-        component: RouteView,
-        redirect: '/list',
-        meta: { title: '任务调度管理', icon: 'profile', permission: ['retryLog'] },
-        children: [
-          {
-            path: '/list',
-            name: 'JobList',
-            component: () => import('@/views/job/JobList'),
-            meta: { title: '调度任务', icon: 'profile', permission: ['retryLog'] }
-          },
-          {
-            path: '/retry-log/info',
-            name: 'RetryLogInfo',
-            component: () => import('@/views/task/RetryLogInfo'),
-            meta: { title: '任务批次', icon: 'profile', permission: ['retryLog'] }
-          }
-        ]
       }
     ]
   },
diff --git a/frontend/src/views/job/JobBatch.vue b/frontend/src/views/job/JobBatch.vue
new file mode 100644
index 00000000..64004ec2
--- /dev/null
+++ b/frontend/src/views/job/JobBatch.vue
@@ -0,0 +1,441 @@
+<template>
+  <a-card :bordered="false">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="8" :sm="24">
+            <a-form-item label="组名称">
+              <a-select
+                v-model="queryParam.groupName"
+                placeholder="请输入组名称"
+                @change="(value) => handleChange(value)"
+              >
+                <a-select-option v-for="item in groupNameList" :value="item" :key="item">{{ item }}</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="场景名称">
+              <a-select v-model="queryParam.sceneName" placeholder="请选择场景名称" allowClear>
+                <a-select-option v-for="item in sceneList" :value="item.sceneName" :key="item.sceneName">
+                  {{ item.sceneName }}</a-select-option
+                >
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="状态">
+              <a-select v-model="queryParam.jobStatus" placeholder="请选择状态" allowClear>
+                <a-select-option v-for="(index, value) in jobStatus" :value="value" :key="value">
+                  {{ index.name }}</a-select-option
+                >
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <template v-if="advanced">
+            <a-col :md="8" :sm="24">
+              <a-form-item label="业务编号">
+                <a-input v-model="queryParam.bizNo" placeholder="请输入业务编号" allowClear />
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="幂等id">
+                <a-input v-model="queryParam.idempotentId" placeholder="请输入幂等id" allowClear />
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="UniqueId">
+                <a-input v-model="queryParam.uniqueId" placeholder="请输入唯一id" allowClear/>
+              </a-form-item>
+            </a-col>
+          </template>
+          <a-col :md="(!advanced && 8) || 24" :sm="24">
+            <span
+              class="table-page-search-submitButtons"
+              :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
+            >
+              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+              <a-button style="margin-left: 8px" @click="() => (queryParam = {})">重置</a-button>
+              <a @click="toggleAdvanced" style="margin-left: 8px">
+                {{ advanced ? '收起' : '展开' }}
+                <a-icon :type="advanced ? 'up' : 'down'" />
+              </a>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <div class="table-operator">
+      <a-button type="primary" icon="plus" @click="handleNew()">新增</a-button>
+      <!--      <a-button type="primary" icon="plus" @click="handleBatchNew()">批量</a-button>-->
+      <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay" @click="onClick">
+          <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
+          <a-menu-item key="2"><a-icon type="edit" />更新</a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /> </a-button>
+      </a-dropdown>
+    </div>
+
+    <s-table
+      ref="table"
+      size="default"
+      :rowKey="(record) => record.id"
+      :columns="columns"
+      :data="loadData"
+      :alert="options.alert"
+      :rowSelection="options.rowSelection"
+    >
+      <span slot="serial" slot-scope="text, record">
+        {{ record.id }}
+      </span>
+      <span slot="taskType" slot-scope="text">
+        <a-tag :color="taskType[text].color">
+          {{ taskType[text].name }}
+        </a-tag>
+      </span>
+      <span slot="taskStatus" slot-scope="text">
+        <a-tag :color="taskStatus[text].color">
+          {{ taskStatus[text].name }}
+        </a-tag>
+      </span>
+      <span slot="triggerType" slot-scope="text">
+        <a-tag :color="triggerType[text].color">
+          {{ triggerType[text].name }}
+        </a-tag>
+      </span>
+      <span slot="blockStrategy" slot-scope="text">
+        <a-tag :color="blockStrategy[text].color">
+          {{ blockStrategy[text].name }}
+        </a-tag>
+      </span>
+      <span slot="triggerInterval" slot-scope="text">
+        <span>{{ text }}(秒)</span>
+      </span>
+      <span slot="executorTimeout" slot-scope="text">
+        <span>{{ text }}(秒)</span>
+      </span>
+      <span slot="action" slot-scope="text, record">
+        <template>
+          <a @click="handleInfo(record)">详情</a>
+          <a-divider type="vertical" />
+          <a-popconfirm
+            title="是否暂停?"
+            ok-text="恢复"
+            cancel-text="取消"
+            @confirm="handleSuspend(record)"
+          >
+            <a href="javascript:;" v-if="record.retryStatus === 0">暂停</a>
+          </a-popconfirm>
+          <a-divider type="vertical" v-if="record.retryStatus === 0" />
+          <a-popconfirm
+            title="是否恢复?"
+            ok-text="恢复"
+            cancel-text="取消"
+            @confirm="handleRecovery(record)"
+          >
+            <a href="javascript:;" v-if="record.retryStatus === 3">恢复</a>
+          </a-popconfirm>
+          <a-divider type="vertical" v-if="record.retryStatus === 3" />
+          <a-popconfirm
+            title="是否完成?"
+            ok-text="完成"
+            cancel-text="取消"
+            @confirm="handleFinish(record)"
+          >
+            <a href="javascript:;" v-if="record.retryStatus !== 1 && record.retryStatus !== 2">完成</a>
+          </a-popconfirm>
+          <a-divider type="vertical" v-if="record.retryStatus !== 1 && record.retryStatus !== 2" />
+          <a-popconfirm
+            title="是否执行任务?"
+            ok-text="执行"
+            cancel-text="取消"
+            @confirm="handleTrigger(record)"
+          >
+            <a href="javascript:;" v-if="record.retryStatus !== 1 && record.retryStatus !== 2">执行</a>
+          </a-popconfirm>
+
+        </template>
+      </span>
+    </s-table>
+
+  </a-card>
+</template>
+
+<script>
+import ATextarea from 'ant-design-vue/es/input/TextArea'
+import AInput from 'ant-design-vue/es/input/Input'
+import { STable } from '@/components'
+import { jobBatchList } from '@/api/jobApi'
+import { getAllGroupNameList } from '@/api/manage'
+
+export default {
+  name: 'JobList',
+  components: {
+    AInput,
+    ATextarea,
+    STable
+  },
+  data () {
+    return {
+      currentComponet: 'List',
+      record: '',
+      mdl: {},
+      visible: false,
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      jobStatus: {
+        '0': {
+          'name': '关闭',
+          'color': '#9c1f1f'
+        },
+        '1': {
+          'name': '开启',
+          'color': '#f5a22d'
+        }
+      },
+      taskType: {
+        '1': {
+          'name': '集群模式',
+          'color': '#d06892'
+        },
+        '2': {
+          'name': '广播模式',
+          'color': '#f5a22d'
+        },
+        '3': {
+          'name': '分片模式',
+          'color': '#e1f52d'
+        }
+      },
+      triggerType: {
+        '1': {
+          'name': 'CRON表达式',
+          'color': '#d06892'
+        },
+        '2': {
+          'name': '固定时间',
+          'color': '#f5a22d'
+        }
+      },
+      blockStrategy: {
+        '1': {
+          'name': '丢弃策略',
+          'color': '#d06892'
+        },
+        '2': {
+          'name': '覆盖',
+          'color': '#f5a22d'
+        },
+        '3': {
+          'name': '并行',
+          'color': '#e1f52d'
+        }
+      },
+      // 表头
+      columns: [
+        {
+          title: 'ID',
+          scopedSlots: { customRender: 'serial' }
+        },
+        {
+          title: '组名称',
+          dataIndex: 'groupName'
+        },
+        {
+          title: '任务名称',
+          dataIndex: 'jobName',
+          ellipsis: true
+        },
+        {
+          title: '状态',
+          dataIndex: 'taskStatus',
+          scopedSlots: { customRender: 'taskStatus' }
+        },
+        {
+          title: '任务类型',
+          dataIndex: 'taskType',
+          scopedSlots: { customRender: 'taskType' }
+        },
+        {
+          title: '触发类型',
+          dataIndex: 'triggerType',
+          scopedSlots: { customRender: 'triggerType' }
+        },
+        {
+          title: '间隔时长',
+          dataIndex: 'triggerInterval',
+          scopedSlots: { customRender: 'triggerInterval' }
+        },
+        {
+          title: '阻塞策略',
+          dataIndex: 'blockStrategy',
+          scopedSlots: { customRender: 'blockStrategy' }
+        },
+        {
+          title: '超时时间',
+          dataIndex: 'executorTimeout',
+          scopedSlots: { customRender: 'executorTimeout' }
+        },
+        {
+          title: '创建时间',
+          dataIndex: 'createDt',
+          sorter: true,
+          width: '10%'
+        },
+        {
+          title: '操作',
+          fixed: 'right',
+          dataIndex: 'action',
+          width: '180px',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: (parameter) => {
+        return jobBatchList(Object.assign(parameter, this.queryParam)).then((res) => {
+          return res
+        })
+      },
+      selectedRowKeys: [],
+      selectedRows: [],
+
+      // custom table alert & rowSelection
+      options: {
+        alert: {
+          show: true,
+          clear: () => {
+            this.selectedRowKeys = []
+          }
+        },
+        rowSelection: {
+          selectedRowKeys: this.selectedRowKeys,
+          onChange: this.onSelectChange
+        }
+      },
+      optionAlertShow: false,
+      groupNameList: [],
+      sceneList: []
+    }
+  },
+  created () {
+    getAllGroupNameList().then((res) => {
+      this.groupNameList = res.data
+      if (this.groupNameList !== null && this.groupNameList.length > 0) {
+        this.queryParam['groupName'] = this.groupNameList[0]
+        this.$refs.table.refresh(true)
+        this.handleChange(this.groupNameList[0])
+      }
+    })
+  },
+  methods: {
+    handleNew () {
+      this.$refs.saveRetryTask.isShow(true, null)
+    },
+    handleBatchNew () {
+      this.$refs.batchSaveRetryTask.isShow(true, null)
+    },
+    handleChange (value) {
+    },
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+    },
+    handleInfo (record) {
+      this.$router.push({ path: '/job/info', query: { id: record.id, groupName: record.groupName } })
+    },
+    handleOk (record) {},
+    handleSuspend (record) {
+      // updateRetryTaskStatus({ id: record.id, groupName: record.groupName, retryStatus: 3 }).then((res) => {
+      //   const { status } = res
+      //   if (status === 0) {
+      //     this.$message.error('暂停失败')
+      //   } else {
+      //     this.$refs.table.refresh(true)
+      //     this.$message.success('暂停成功')
+      //   }
+      // })
+    },
+    handleRecovery (record) {
+      // updateRetryTaskStatus({ id: record.id, groupName: record.groupName, retryStatus: 0 }).then((res) => {
+      //   const { status } = res
+      //   if (status === 0) {
+      //     this.$message.error('恢复失败')
+      //   } else {
+      //     this.$refs.table.refresh(true)
+      //     this.$message.success('恢复成功')
+      //   }
+      // })
+    },
+    handleFinish (record) {
+      // updateRetryTaskStatus({ id: record.id, groupName: record.groupName, retryStatus: 1 }).then((res) => {
+      //   const { status } = res
+      //   if (status === 0) {
+      //     this.$message.error('执行失败')
+      //   } else {
+      //     this.$refs.table.refresh(true)
+      //     this.$message.success('执行成功')
+      //   }
+      // })
+    },
+    handleTrigger (record) {
+      // if (record.taskType === 1) {
+      //   manualTriggerRetryTask({ groupName: record.groupName, uniqueIds: [ record.uniqueId ] }).then(res => {
+      //     const { status } = res
+      //     if (status === 0) {
+      //       this.$message.error('执行失败')
+      //     } else {
+      //       this.$refs.table.refresh(true)
+      //       this.$message.success('执行成功')
+      //     }
+      //   })
+      // } else {
+      //   manualTriggerCallbackTask({ groupName: record.groupName, uniqueIds: [ record.uniqueId ] }).then(res => {
+      //     const { status } = res
+      //     if (status === 0) {
+      //       this.$message.error('执行失败')
+      //     } else {
+      //       this.$refs.table.refresh(true)
+      //       this.$message.success('执行完成')
+      //     }
+      //   })
+      // }
+    },
+    refreshTable (v) {
+      this.$refs.table.refresh(true)
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    handlerDel () {
+      // var that = this
+      // this.$confirm({
+      //   title: '您要删除这些数据吗?',
+      //   content: h => <div style="color:red;">删除后数据不可恢复，请确认!</div>,
+      //   onOk () {
+      //     batchDelete({ groupName: that.selectedRows[0].groupName, ids: that.selectedRowKeys }).then(res => {
+      //       that.$refs.table.refresh(true)
+      //       that.$message.success(`成功删除${res.data}条数据`)
+      //       that.selectedRowKeys = []
+      //     })
+      //   },
+      //   onCancel () {
+      //   },
+      //   class: 'test'
+      // })
+    },
+    onClick ({ key }) {
+      if (key === '2') {
+        this.$refs.batchUpdateRetryTaskInfo.isShow(true, this.selectedRows, this.selectedRowKeys)
+        return
+      }
+
+      if (key === '1') {
+        this.handlerDel()
+      }
+    }
+  }
+}
+</script>
diff --git a/frontend/src/views/job/JobInfo.vue b/frontend/src/views/job/JobInfo.vue
new file mode 100644
index 00000000..71c3e800
--- /dev/null
+++ b/frontend/src/views/job/JobInfo.vue
@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <page-header-wrapper @back="() => $router.go(-1)" style="margin: -24px -1px 0">
+      <div></div>
+    </page-header-wrapper>
+    <a-card :bordered="false" v-if="jobInfo !==null ">
+      <a-descriptions title="" bordered>
+        <a-descriptions-item label="组名称">
+          {{ jobInfo.groupName }}
+        </a-descriptions-item>
+        <a-descriptions-item label="任务名称">
+          {{ jobInfo.jobName }}
+        </a-descriptions-item>
+        <a-descriptions-item label="重试次数">
+          {{ jobInfo.retryCount }}
+        </a-descriptions-item>
+        <a-descriptions-item label="重试状态 | 数据类型">
+          <a-tag color="red">
+            {{ retryStatus[jobInfo.retryStatus] }}
+          </a-tag>
+          <a-divider type="vertical" />
+          <a-tag :color="taskType[jobInfo.taskType].color">
+            {{ taskType[jobInfo.taskType].name }}
+          </a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item label="下次触发时间">
+          {{ jobInfo.nextTriggerAt }}
+        </a-descriptions-item>
+        <a-descriptions-item label="更新时间">
+          {{ jobInfo.updateDt }}
+        </a-descriptions-item>
+        <a-descriptions-item label="执行器名称" span="3">
+          {{ jobInfo.executorName }}
+        </a-descriptions-item>
+        <a-descriptions-item label="参数" span="3">
+          {{ jobInfo.argsStr }}
+        </a-descriptions-item>
+        <a-descriptions-item label="扩展参数" span="3">
+          {{ jobInfo.extAttrs }}
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import { getJobDetail } from '@/api/jobApi'
+import moment from 'moment'
+
+export default {
+  name: 'JobInfo',
+  components: {
+
+  },
+  data () {
+    return {
+      jobInfo: null,
+      retryStatus: {
+        '0': '处理中',
+        '1': '处理成功',
+        '2': '最大次数',
+        '3': '暂停'
+      },
+      taskType: {
+        '1': {
+          'name': '重试数据',
+          'color': '#d06892'
+        },
+        '2': {
+          'name': '回调数据',
+          'color': '#f5a22d'
+        }
+      }
+    }
+  },
+  created () {
+    const id = this.$route.query.id
+    const groupName = this.$route.query.groupName
+    if (id && groupName) {
+      getJobDetail(id).then(res => {
+        this.jobInfo = res.data
+        // this.queryParam = {
+        //   groupName: this.retryTaskInfo.groupName,
+        //   uniqueId: this.retryTaskInfo.uniqueId
+        // }
+        // this.$refs.retryTaskLogMessageListRef.refreshTable(this.queryParam)
+      })
+    } else {
+      this.$router.push({ path: '/404' })
+    }
+  },
+  methods: {
+    parseDate (date) {
+      return moment(date).format('YYYY-MM-DD HH:mm:ss')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/views/job/JobList.vue b/frontend/src/views/job/JobList.vue
index 444de2e7..f21a3a14 100644
--- a/frontend/src/views/job/JobList.vue
+++ b/frontend/src/views/job/JobList.vue
@@ -24,9 +24,9 @@
             </a-form-item>
           </a-col>
           <a-col :md="8" :sm="24">
-            <a-form-item label="重试状态">
-              <a-select v-model="queryParam.retryStatus" placeholder="请选择状态" allowClear>
-                <a-select-option v-for="(index, value) in retryStatus" :value="value" :key="value">
+            <a-form-item label="状态">
+              <a-select v-model="queryParam.jobStatus" placeholder="请选择状态" allowClear>
+                <a-select-option v-for="(index, value) in jobStatus" :value="value" :key="value">
                   {{ index.name }}</a-select-option
                 >
               </a-select>
@@ -66,8 +66,8 @@
       </a-form>
     </div>
     <div class="table-operator">
-      <a-button type="primary" icon="plus" @click="handleNew()">单个</a-button>
-      <a-button type="primary" icon="plus" @click="handleBatchNew()">批量</a-button>
+      <a-button type="primary" icon="plus" @click="handleNew()">新增</a-button>
+      <!--      <a-button type="primary" icon="plus" @click="handleBatchNew()">批量</a-button>-->
       <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
         <a-menu slot="overlay" @click="onClick">
           <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
@@ -85,7 +85,6 @@
       :data="loadData"
       :alert="options.alert"
       :rowSelection="options.rowSelection"
-      :scroll="{ x: 2000 }"
     >
       <span slot="serial" slot-scope="text, record">
         {{ record.id }}
@@ -100,6 +99,22 @@
           {{ jobStatus[text].name }}
         </a-tag>
       </span>
+      <span slot="triggerType" slot-scope="text">
+        <a-tag :color="triggerType[text].color">
+          {{ triggerType[text].name }}
+        </a-tag>
+      </span>
+      <span slot="blockStrategy" slot-scope="text">
+        <a-tag :color="blockStrategy[text].color">
+          {{ blockStrategy[text].name }}
+        </a-tag>
+      </span>
+      <span slot="triggerInterval" slot-scope="text">
+        <span>{{ text }}(秒)</span>
+      </span>
+      <span slot="executorTimeout" slot-scope="text">
+        <span>{{ text }}(秒)</span>
+      </span>
       <span slot="action" slot-scope="text, record">
         <template>
           <a @click="handleInfo(record)">详情</a>
@@ -152,6 +167,7 @@ import ATextarea from 'ant-design-vue/es/input/TextArea'
 import AInput from 'ant-design-vue/es/input/Input'
 import { STable } from '@/components'
 import { getJobList } from '@/api/jobApi'
+import { getAllGroupNameList } from '@/api/manage'
 
 export default {
   name: 'JobList',
@@ -194,52 +210,78 @@ export default {
           'color': '#e1f52d'
         }
       },
+      triggerType: {
+        '1': {
+          'name': 'CRON表达式',
+          'color': '#d06892'
+        },
+        '2': {
+          'name': '固定时间',
+          'color': '#f5a22d'
+        }
+      },
+      blockStrategy: {
+        '1': {
+          'name': '丢弃策略',
+          'color': '#d06892'
+        },
+        '2': {
+          'name': '覆盖',
+          'color': '#f5a22d'
+        },
+        '3': {
+          'name': '并行',
+          'color': '#e1f52d'
+        }
+      },
       // 表头
       columns: [
         {
           title: 'ID',
-          scopedSlots: { customRender: 'serial' },
-          fixed: 'left'
+          scopedSlots: { customRender: 'serial' }
         },
         {
           title: '组名称',
-          dataIndex: 'groupName',
-          width: '10%'
+          dataIndex: 'groupName'
         },
         {
           title: '任务名称',
           dataIndex: 'jobName',
-          ellipsis: true,
-          width: '10%'
+          ellipsis: true
         },
         {
-          title: '业务编号',
-          dataIndex: 'bizNo',
-          width: '10%'
+          title: '触发时间',
+          dataIndex: 'nextTriggerAt'
         },
         {
-          title: '下次触发时间',
-          dataIndex: 'nextTriggerAt',
-          needTotal: false,
-          width: '10%'
-        },
-        {
-          title: '次数',
-          dataIndex: 'retryCount',
-          sorter: true,
-          width: '6%'
-        },
-        {
-          title: '任务状态',
+          title: '状态',
           dataIndex: 'jobStatus',
-          scopedSlots: { customRender: 'jobStatus' },
-          width: '5%'
+          scopedSlots: { customRender: 'jobStatus' }
         },
         {
           title: '任务类型',
           dataIndex: 'taskType',
-          scopedSlots: { customRender: 'taskType' },
-          width: '5%'
+          scopedSlots: { customRender: 'taskType' }
+        },
+        {
+          title: '触发类型',
+          dataIndex: 'triggerType',
+          scopedSlots: { customRender: 'triggerType' }
+        },
+        {
+          title: '间隔时长',
+          dataIndex: 'triggerInterval',
+          scopedSlots: { customRender: 'triggerInterval' }
+        },
+        {
+          title: '阻塞策略',
+          dataIndex: 'blockStrategy',
+          scopedSlots: { customRender: 'blockStrategy' }
+        },
+        {
+          title: '超时时间',
+          dataIndex: 'executorTimeout',
+          scopedSlots: { customRender: 'executorTimeout' }
         },
         {
           title: '更新时间',
@@ -283,6 +325,14 @@ export default {
     }
   },
   created () {
+    getAllGroupNameList().then((res) => {
+      this.groupNameList = res.data
+      if (this.groupNameList !== null && this.groupNameList.length > 0) {
+        this.queryParam['groupName'] = this.groupNameList[0]
+        this.$refs.table.refresh(true)
+        this.handleChange(this.groupNameList[0])
+      }
+    })
   },
   methods: {
     handleNew () {
@@ -292,15 +342,12 @@ export default {
       this.$refs.batchSaveRetryTask.isShow(true, null)
     },
     handleChange (value) {
-      // getSceneList({ groupName: value }).then((res) => {
-      //   this.sceneList = res.data
-      // })
     },
     toggleAdvanced () {
       this.advanced = !this.advanced
     },
     handleInfo (record) {
-      this.$router.push({ path: '/retry-task/info', query: { id: record.id, groupName: record.groupName } })
+      this.$router.push({ path: '/job/info', query: { id: record.id, groupName: record.groupName } })
     },
     handleOk (record) {},
     handleSuspend (record) {
diff --git a/frontend/src/views/job/JobTask.vue b/frontend/src/views/job/JobTask.vue
new file mode 100644
index 00000000..f21a3a14
--- /dev/null
+++ b/frontend/src/views/job/JobTask.vue
@@ -0,0 +1,445 @@
+<template>
+  <a-card :bordered="false">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="8" :sm="24">
+            <a-form-item label="组名称">
+              <a-select
+                v-model="queryParam.groupName"
+                placeholder="请输入组名称"
+                @change="(value) => handleChange(value)"
+              >
+                <a-select-option v-for="item in groupNameList" :value="item" :key="item">{{ item }}</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="场景名称">
+              <a-select v-model="queryParam.sceneName" placeholder="请选择场景名称" allowClear>
+                <a-select-option v-for="item in sceneList" :value="item.sceneName" :key="item.sceneName">
+                  {{ item.sceneName }}</a-select-option
+                >
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="状态">
+              <a-select v-model="queryParam.jobStatus" placeholder="请选择状态" allowClear>
+                <a-select-option v-for="(index, value) in jobStatus" :value="value" :key="value">
+                  {{ index.name }}</a-select-option
+                >
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <template v-if="advanced">
+            <a-col :md="8" :sm="24">
+              <a-form-item label="业务编号">
+                <a-input v-model="queryParam.bizNo" placeholder="请输入业务编号" allowClear />
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="幂等id">
+                <a-input v-model="queryParam.idempotentId" placeholder="请输入幂等id" allowClear />
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="UniqueId">
+                <a-input v-model="queryParam.uniqueId" placeholder="请输入唯一id" allowClear/>
+              </a-form-item>
+            </a-col>
+          </template>
+          <a-col :md="(!advanced && 8) || 24" :sm="24">
+            <span
+              class="table-page-search-submitButtons"
+              :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
+            >
+              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+              <a-button style="margin-left: 8px" @click="() => (queryParam = {})">重置</a-button>
+              <a @click="toggleAdvanced" style="margin-left: 8px">
+                {{ advanced ? '收起' : '展开' }}
+                <a-icon :type="advanced ? 'up' : 'down'" />
+              </a>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <div class="table-operator">
+      <a-button type="primary" icon="plus" @click="handleNew()">新增</a-button>
+      <!--      <a-button type="primary" icon="plus" @click="handleBatchNew()">批量</a-button>-->
+      <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay" @click="onClick">
+          <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
+          <a-menu-item key="2"><a-icon type="edit" />更新</a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /> </a-button>
+      </a-dropdown>
+    </div>
+
+    <s-table
+      ref="table"
+      size="default"
+      :rowKey="(record) => record.id"
+      :columns="columns"
+      :data="loadData"
+      :alert="options.alert"
+      :rowSelection="options.rowSelection"
+    >
+      <span slot="serial" slot-scope="text, record">
+        {{ record.id }}
+      </span>
+      <span slot="taskType" slot-scope="text">
+        <a-tag :color="taskType[text].color">
+          {{ taskType[text].name }}
+        </a-tag>
+      </span>
+      <span slot="jobStatus" slot-scope="text">
+        <a-tag :color="jobStatus[text].color">
+          {{ jobStatus[text].name }}
+        </a-tag>
+      </span>
+      <span slot="triggerType" slot-scope="text">
+        <a-tag :color="triggerType[text].color">
+          {{ triggerType[text].name }}
+        </a-tag>
+      </span>
+      <span slot="blockStrategy" slot-scope="text">
+        <a-tag :color="blockStrategy[text].color">
+          {{ blockStrategy[text].name }}
+        </a-tag>
+      </span>
+      <span slot="triggerInterval" slot-scope="text">
+        <span>{{ text }}(秒)</span>
+      </span>
+      <span slot="executorTimeout" slot-scope="text">
+        <span>{{ text }}(秒)</span>
+      </span>
+      <span slot="action" slot-scope="text, record">
+        <template>
+          <a @click="handleInfo(record)">详情</a>
+          <a-divider type="vertical" />
+          <a-popconfirm
+            title="是否暂停?"
+            ok-text="恢复"
+            cancel-text="取消"
+            @confirm="handleSuspend(record)"
+          >
+            <a href="javascript:;" v-if="record.retryStatus === 0">暂停</a>
+          </a-popconfirm>
+          <a-divider type="vertical" v-if="record.retryStatus === 0" />
+          <a-popconfirm
+            title="是否恢复?"
+            ok-text="恢复"
+            cancel-text="取消"
+            @confirm="handleRecovery(record)"
+          >
+            <a href="javascript:;" v-if="record.retryStatus === 3">恢复</a>
+          </a-popconfirm>
+          <a-divider type="vertical" v-if="record.retryStatus === 3" />
+          <a-popconfirm
+            title="是否完成?"
+            ok-text="完成"
+            cancel-text="取消"
+            @confirm="handleFinish(record)"
+          >
+            <a href="javascript:;" v-if="record.retryStatus !== 1 && record.retryStatus !== 2">完成</a>
+          </a-popconfirm>
+          <a-divider type="vertical" v-if="record.retryStatus !== 1 && record.retryStatus !== 2" />
+          <a-popconfirm
+            title="是否执行任务?"
+            ok-text="执行"
+            cancel-text="取消"
+            @confirm="handleTrigger(record)"
+          >
+            <a href="javascript:;" v-if="record.retryStatus !== 1 && record.retryStatus !== 2">执行</a>
+          </a-popconfirm>
+
+        </template>
+      </span>
+    </s-table>
+
+  </a-card>
+</template>
+
+<script>
+import ATextarea from 'ant-design-vue/es/input/TextArea'
+import AInput from 'ant-design-vue/es/input/Input'
+import { STable } from '@/components'
+import { getJobList } from '@/api/jobApi'
+import { getAllGroupNameList } from '@/api/manage'
+
+export default {
+  name: 'JobList',
+  components: {
+    AInput,
+    ATextarea,
+    STable
+  },
+  data () {
+    return {
+      currentComponet: 'List',
+      record: '',
+      mdl: {},
+      visible: false,
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      jobStatus: {
+        '0': {
+          'name': '关闭',
+          'color': '#9c1f1f'
+        },
+        '1': {
+          'name': '开启',
+          'color': '#f5a22d'
+        }
+      },
+      taskType: {
+        '1': {
+          'name': '集群模式',
+          'color': '#d06892'
+        },
+        '2': {
+          'name': '广播模式',
+          'color': '#f5a22d'
+        },
+        '3': {
+          'name': '分片模式',
+          'color': '#e1f52d'
+        }
+      },
+      triggerType: {
+        '1': {
+          'name': 'CRON表达式',
+          'color': '#d06892'
+        },
+        '2': {
+          'name': '固定时间',
+          'color': '#f5a22d'
+        }
+      },
+      blockStrategy: {
+        '1': {
+          'name': '丢弃策略',
+          'color': '#d06892'
+        },
+        '2': {
+          'name': '覆盖',
+          'color': '#f5a22d'
+        },
+        '3': {
+          'name': '并行',
+          'color': '#e1f52d'
+        }
+      },
+      // 表头
+      columns: [
+        {
+          title: 'ID',
+          scopedSlots: { customRender: 'serial' }
+        },
+        {
+          title: '组名称',
+          dataIndex: 'groupName'
+        },
+        {
+          title: '任务名称',
+          dataIndex: 'jobName',
+          ellipsis: true
+        },
+        {
+          title: '触发时间',
+          dataIndex: 'nextTriggerAt'
+        },
+        {
+          title: '状态',
+          dataIndex: 'jobStatus',
+          scopedSlots: { customRender: 'jobStatus' }
+        },
+        {
+          title: '任务类型',
+          dataIndex: 'taskType',
+          scopedSlots: { customRender: 'taskType' }
+        },
+        {
+          title: '触发类型',
+          dataIndex: 'triggerType',
+          scopedSlots: { customRender: 'triggerType' }
+        },
+        {
+          title: '间隔时长',
+          dataIndex: 'triggerInterval',
+          scopedSlots: { customRender: 'triggerInterval' }
+        },
+        {
+          title: '阻塞策略',
+          dataIndex: 'blockStrategy',
+          scopedSlots: { customRender: 'blockStrategy' }
+        },
+        {
+          title: '超时时间',
+          dataIndex: 'executorTimeout',
+          scopedSlots: { customRender: 'executorTimeout' }
+        },
+        {
+          title: '更新时间',
+          dataIndex: 'updateDt',
+          sorter: true,
+          width: '10%'
+        },
+        {
+          title: '操作',
+          fixed: 'right',
+          dataIndex: 'action',
+          width: '180px',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: (parameter) => {
+        return getJobList(Object.assign(parameter, this.queryParam)).then((res) => {
+          return res
+        })
+      },
+      selectedRowKeys: [],
+      selectedRows: [],
+
+      // custom table alert & rowSelection
+      options: {
+        alert: {
+          show: true,
+          clear: () => {
+            this.selectedRowKeys = []
+          }
+        },
+        rowSelection: {
+          selectedRowKeys: this.selectedRowKeys,
+          onChange: this.onSelectChange
+        }
+      },
+      optionAlertShow: false,
+      groupNameList: [],
+      sceneList: []
+    }
+  },
+  created () {
+    getAllGroupNameList().then((res) => {
+      this.groupNameList = res.data
+      if (this.groupNameList !== null && this.groupNameList.length > 0) {
+        this.queryParam['groupName'] = this.groupNameList[0]
+        this.$refs.table.refresh(true)
+        this.handleChange(this.groupNameList[0])
+      }
+    })
+  },
+  methods: {
+    handleNew () {
+      this.$refs.saveRetryTask.isShow(true, null)
+    },
+    handleBatchNew () {
+      this.$refs.batchSaveRetryTask.isShow(true, null)
+    },
+    handleChange (value) {
+    },
+    toggleAdvanced () {
+      this.advanced = !this.advanced
+    },
+    handleInfo (record) {
+      this.$router.push({ path: '/job/info', query: { id: record.id, groupName: record.groupName } })
+    },
+    handleOk (record) {},
+    handleSuspend (record) {
+      // updateRetryTaskStatus({ id: record.id, groupName: record.groupName, retryStatus: 3 }).then((res) => {
+      //   const { status } = res
+      //   if (status === 0) {
+      //     this.$message.error('暂停失败')
+      //   } else {
+      //     this.$refs.table.refresh(true)
+      //     this.$message.success('暂停成功')
+      //   }
+      // })
+    },
+    handleRecovery (record) {
+      // updateRetryTaskStatus({ id: record.id, groupName: record.groupName, retryStatus: 0 }).then((res) => {
+      //   const { status } = res
+      //   if (status === 0) {
+      //     this.$message.error('恢复失败')
+      //   } else {
+      //     this.$refs.table.refresh(true)
+      //     this.$message.success('恢复成功')
+      //   }
+      // })
+    },
+    handleFinish (record) {
+      // updateRetryTaskStatus({ id: record.id, groupName: record.groupName, retryStatus: 1 }).then((res) => {
+      //   const { status } = res
+      //   if (status === 0) {
+      //     this.$message.error('执行失败')
+      //   } else {
+      //     this.$refs.table.refresh(true)
+      //     this.$message.success('执行成功')
+      //   }
+      // })
+    },
+    handleTrigger (record) {
+      // if (record.taskType === 1) {
+      //   manualTriggerRetryTask({ groupName: record.groupName, uniqueIds: [ record.uniqueId ] }).then(res => {
+      //     const { status } = res
+      //     if (status === 0) {
+      //       this.$message.error('执行失败')
+      //     } else {
+      //       this.$refs.table.refresh(true)
+      //       this.$message.success('执行成功')
+      //     }
+      //   })
+      // } else {
+      //   manualTriggerCallbackTask({ groupName: record.groupName, uniqueIds: [ record.uniqueId ] }).then(res => {
+      //     const { status } = res
+      //     if (status === 0) {
+      //       this.$message.error('执行失败')
+      //     } else {
+      //       this.$refs.table.refresh(true)
+      //       this.$message.success('执行完成')
+      //     }
+      //   })
+      // }
+    },
+    refreshTable (v) {
+      this.$refs.table.refresh(true)
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    },
+    handlerDel () {
+      // var that = this
+      // this.$confirm({
+      //   title: '您要删除这些数据吗?',
+      //   content: h => <div style="color:red;">删除后数据不可恢复，请确认!</div>,
+      //   onOk () {
+      //     batchDelete({ groupName: that.selectedRows[0].groupName, ids: that.selectedRowKeys }).then(res => {
+      //       that.$refs.table.refresh(true)
+      //       that.$message.success(`成功删除${res.data}条数据`)
+      //       that.selectedRowKeys = []
+      //     })
+      //   },
+      //   onCancel () {
+      //   },
+      //   class: 'test'
+      // })
+    },
+    onClick ({ key }) {
+      if (key === '2') {
+        this.$refs.batchUpdateRetryTaskInfo.isShow(true, this.selectedRows, this.selectedRowKeys)
+        return
+      }
+
+      if (key === '1') {
+        this.handlerDel()
+      }
+    }
+  }
+}
+</script>