feat(1.4.0-beta1): 1. 优化重试列表

src/locales/langs/en-us.ts

@@ -67,6 +67,7 @@ const local: App.I18n.Schema = {
     confirmStop: 'Confirm Stop?',
     execute: 'Execute',
     batchList: 'Batch',
+    retryTaskList: 'RetryTaskList',
     copy: 'Copy',
     resume: 'Resume',
     pause: 'Pause',
@@ -764,17 +765,19 @@ const local: App.I18n.Schema = {
       detail: 'Retry Task Detail',
       groupName: 'Group name',
       sceneName: 'Scene name',
-      retryStatus: 'Retry status',
+      taskStatus: 'Task status',
       taskType: 'Task type',
       idempotentId: 'Idempotent ID',
       bizNo: 'Business Number',
       createDt: 'Creation time',
       operationReason: 'Operation reason',
+      retryId: 'Retry id',
       form: {
         groupName: 'Please enter Group name',
         idempotentId: 'Please enter Idempotent ID',
         sceneName: 'Please enter Scene name',
-        bizNo: 'Please enter Business Number'
+        bizNo: 'Please enter Business Number',
+        retryId: 'Please enter retry id'
       },
       addRetryTask: 'Add Retry Task',
       editRetryTask: 'Add Retry Task'

src/locales/langs/zh-cn.ts

@@ -68,6 +68,7 @@ const local: App.I18n.Schema = {
     execute: '执行',
     copy: '复制',
     batchList: '批次',
+    retryTaskList: '任务',
     resume: '恢复',
     pause: '暂停',
     finish: '完成',
@@ -772,17 +773,19 @@ const local: App.I18n.Schema = {
       detail: '重试详情',
       groupName: '组名称',
       sceneName: '场景名称',
-      retryStatus: '状态',
+      taskStatus: '状态',
       taskType: '类型',
       idempotentId: '幂等ID',
       bizNo: '业务编号',
       createDt: '创建时间',
       operationReason: '操作原因',
+      retryId: '重试ID',
       form: {
         groupName: '请输入组名称',
         idempotentId: '请输入幂等id',
         sceneName: '请输入场景名称',
-        bizNo: '请输入业务编号'
+        bizNo: '请输入业务编号',
+        retryId: '请输入重试ID'
       },
       addRetryTask: '新增重试任务',
       editRetryTask: '编辑重试任务'

src/typings/api.d.ts

@@ -792,8 +792,6 @@ declare namespace Api {
     type RetryTaskUpdateStatusRequest = {
       /** id */
       id: number;
-      /** 组名称 */
-      groupName: string;
       /** 重试状态 0、重试中 1、重试完成 2、最大次数 3、暂停 */
       retryStatus: RetryStatusType;
     };
@@ -804,7 +802,6 @@ declare namespace Api {
     };
 
     type BatchDeleteRetryTaskVO = {
-      groupName: string;
       ids: string[];
     };
 

src/typings/app.d.ts

@@ -348,6 +348,7 @@ declare namespace App {
         confirmStop: string;
         execute: string;
         batchList: string;
+        retryTaskList: string;
         copy: string;
         resume: string;
         pause: string;
@@ -972,17 +973,19 @@ declare namespace App {
           detail: string;
           groupName: string;
           sceneName: string;
-          retryStatus: string;
+          taskStatus: string;
           taskType: string;
           idempotentId: string;
           bizNo: string;
           createDt: string;
           operationReason: string;
+          retryId: string;
           form: {
             groupName: string;
             idempotentId: string;
             sceneName: string;
             bizNo: string;
+            retryId: string;
           };
           addRetryTask: string;
           editRetryTask: string;

src/views/retry/info/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { NButton, NPopconfirm, NTag } from 'naive-ui';
+import { NButton, NDropdown, NPopconfirm, NTag, NTooltip } from 'naive-ui';
 import { onMounted, ref } from 'vue';
 import { useBoolean } from '~/packages/hooks';
 import {
@@ -16,6 +16,8 @@ import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
 import { retryStatusTypeRecord, retryTaskTypeRecord } from '@/constants/business';
 import { tagColor } from '@/utils/common';
+import SvgIcon from '@/components/custom/svg-icon.vue';
+import { useRouterPush } from '@/hooks/common/router';
 import RetryTaskOperateDrawer from './modules/retry-operate-drawer.vue';
 import RetryTaskBatchAddDrawer from './modules/retr-batch-add-drawer.vue';
 import RetryTaskSearch from './modules/retry-search.vue';
@@ -25,8 +27,10 @@ import RetryTaskDetailDrawerVue from './modules/retry-detail-drawer.vue';
 const detailData = ref<Api.Retry.Retry | null>();
 /** 详情页可见状态 */
 const { bool: detailVisible, setTrue: openDetail } = useBoolean(false);
+const { routerPushByKey } = useRouterPush();
 
 const appStore = useAppStore();
+const retryStatus = history.state.retryStatus;
 
 const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchGetRetryTaskList,
@@ -39,6 +43,9 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
     bizNo: null,
     retryStatus: null
   },
+  searchParams: {
+    retryStatus
+  },
   columns: () => [
     {
       type: 'selection',
@@ -48,10 +55,26 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
     },
     {
       key: 'id',
-      title: $t('common.index'),
       align: 'center',
       width: 128,
       fixed: 'left',
+      title: () => {
+        return (
+          <div class="flex-center">
+            <span>{$t('page.jobBatch.jobTask.id')}</span>
+            <NTooltip trigger="hover">
+              {{
+                trigger: () => (
+                  <span class="mb-2px ml-5px text-16px">
+                    <SvgIcon icon="ant-design:info-circle-outlined" />
+                  </span>
+                ),
+                default: () => <span>{$t('common.idDetailTip')}</span>
+              }}
+            </NTooltip>
+          </div>
+        );
+      },
       render: row => {
         async function showDetailDrawer() {
           await loadRetryInfo(row);
@@ -69,29 +92,25 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
       key: 'groupName',
       title: $t('page.retry.groupName'),
       align: 'center',
-      resizable: true,
+      width: 180
-      minWidth: 120,
-      maxWidth: 250
     },
     {
       key: 'sceneName',
       title: $t('page.retry.sceneName'),
       align: 'center',
-      minWidth: 120
+      width: 180
     },
     {
       key: 'nextTriggerAt',
       title: $t('page.retry.nextTriggerAt'),
       align: 'center',
-      resizable: true,
+      width: 120
-      minWidth: 80,
-      maxWidth: 150
     },
     {
       key: 'retryCount',
       title: $t('page.retry.retryCount'),
       align: 'center',
-      width: 80
+      width: 100
     },
     {
       key: 'retryStatus',
@@ -111,7 +130,7 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
       key: 'taskType',
       title: $t('page.retry.taskType'),
       align: 'center',
-      width: 100,
+      width: 120,
       render: row => {
         if (row.taskType === null) {
           return null;
@@ -129,115 +148,189 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
       key: 'idempotentId',
       title: $t('page.retry.idempotentId'),
       align: 'center',
-      resizable: true,
       minWidth: 120
     },
     {
       key: 'bizNo',
       title: $t('page.retry.bizNo'),
       align: 'center',
-      resizable: true,
+      minWidth: 120
-      minWidth: 150,
+    },
-      maxWidth: 300
+    {
+      key: 'createDt',
+      title: $t('page.retryTask.createDt'),
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'updateDt',
+      title: $t('page.retryTask.createDt'),
+      align: 'center',
+      minWidth: 120
     },
     {
       key: 'operate',
       title: $t('common.operate'),
       align: 'center',
-      width: 260,
+      width: 120,
       fixed: 'right',
-      render: row => (
+      render: row => {
-        <div class="flex-center gap-8px">
+        const options = [
-          {/* 非[完成,最大次数], 显示[执行]按钮 */}
-          {row.retryStatus !== 1 && row.retryStatus !== 2 ? (
-            <>
-              <NPopconfirm onPositiveClick={() => handleExecute(row.groupName!, row.id! as any, row.taskType!)}>
-                {{
-                  default: () => $t('common.confirmExecute'),
-                  trigger: () => (
-                    <NButton type="info" text ghost size="small">
-                      {$t('common.execute')}
-                    </NButton>
-                  )
-                }}
-              </NPopconfirm>
-              <n-divider vertical />
-            </>
-          ) : (
-            ''
-          )}
-          {/* 非[完成,最大次数], 显示[完成]按钮 */}
-          {row.retryStatus !== 1 && row.retryStatus !== 2 ? (
-            <>
-              <NPopconfirm onPositiveClick={() => handleFinish(Number(row.id!), row.groupName!)}>
-                {{
-                  default: () => $t('common.confirmFinish'),
-                  trigger: () => (
-                    <NButton type="warning" text ghost size="small">
-                      {$t('common.finish')}
-                    </NButton>
-                  )
-                }}
-              </NPopconfirm>
-              <n-divider vertical />
-            </>
-          ) : (
-            ''
-          )}
-          {/* 重试中, 显示[停止]按钮 */}
-          {row.retryStatus === 0 ? (
-            <>
-              <NPopconfirm onPositiveClick={() => handlePause(Number(row.id!), row.groupName!)}>
-                {{
-                  default: () => $t('common.confirmPause'),
-                  trigger: () => (
-                    <NButton type="success" text ghost size="small">
-                      {$t('common.pause')}
-                    </NButton>
-                  )
-                }}
-              </NPopconfirm>
-              <n-divider vertical />
-            </>
-          ) : (
-            ''
-          )}
-          {/* 暂停, 显示[开始]按钮 */}
-          {row.retryStatus === 3 ? (
-            <>
-              <NPopconfirm onPositiveClick={() => handleResume(Number(row.id!), row.groupName!)}>
-                {{
-                  default: () => $t('common.confirmResume'),
-                  trigger: () => (
-                    <NButton type="info" text ghost size="small">
-                      {$t('common.resume')}
-                    </NButton>
-                  )
-                }}
-              </NPopconfirm>
-              <n-divider vertical />
-            </>
-          ) : (
-            ''
-          )}
           {
-            <NPopconfirm onPositiveClick={() => handleDelete(row.groupName!, row.id!)}>
+            type: 'divider',
+            key: 'd2',
+            show: row.retryStatus !== 1 && row.retryStatus !== 2
+          },
+          {
+            label: $t('common.execute'),
+            key: 'execute',
+            type: 'render',
+            show: row.retryStatus !== 1 && row.retryStatus !== 2,
+            render: () => (
+              <div class="flex-center">
+                <NPopconfirm
+                  onPositiveClick={() => handleExecute(row.groupName!, row.id! as any, row.taskType!)}
+                  v-if="row.retryStatus !== 1 && row.retryStatus !== 2"
+                >
+                  {{
+                    default: () => $t('common.confirmExecute'),
+                    trigger: () => (
+                      <NButton type="error" text ghost size="small">
+                        {$t('common.execute')}
+                      </NButton>
+                    )
+                  }}
+                </NPopconfirm>
+              </div>
+            )
+          },
+          {
+            type: 'divider',
+            key: 'd2',
+            show: row.retryStatus === 0
+          },
+          {
+            label: $t('common.pause'),
+            key: 'pause',
+            type: 'render',
+            show: row.retryStatus === 0,
+            render: () => (
+              <div class="flex-center">
+                <NPopconfirm onPositiveClick={() => handlePause(Number(row.id!))}>
+                  {{
+                    default: () => $t('common.confirmPause'),
+                    trigger: () => (
+                      <NButton type="success" text ghost size="small">
+                        {$t('common.pause')}
+                      </NButton>
+                    )
+                  }}
+                </NPopconfirm>
+              </div>
+            )
+          },
+          {
+            type: 'divider',
+            key: 'd2',
+            show: row.retryStatus === 0
+          },
+          {
+            label: $t('common.pause'),
+            key: 'pause',
+            type: 'render',
+            show: row.retryStatus === 3,
+            render: () => (
+              <div class="flex-center">
+                <NPopconfirm onPositiveClick={() => handleResume(Number(row.id!))}>
+                  {{
+                    default: () => $t('common.confirmResume'),
+                    trigger: () => (
+                      <NButton type="info" text ghost size="small">
+                        {$t('common.resume')}
+                      </NButton>
+                    )
+                  }}
+                </NPopconfirm>
+              </div>
+            )
+          },
+          {
+            type: 'divider',
+            key: 'd2',
+            show: row.retryStatus === 0
+          },
+          {
+            label: $t('common.finish'),
+            key: 'finish',
+            show: row.retryStatus !== 1 && row.retryStatus !== 2,
+            render: () => (
+              <div class="flex-center">
+                <NPopconfirm onPositiveClick={() => handleFinish(Number(row.id!))}>
+                  {{
+                    default: () => $t('common.confirmFinish'),
+                    trigger: () => (
+                      <NButton type="warning" text ghost size="small">
+                        {$t('common.finish')}
+                      </NButton>
+                    )
+                  }}
+                </NPopconfirm>
+              </div>
+            )
+          },
+
+          {
+            type: 'divider',
+            key: 'd2'
+          },
+          {
+            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>
+            )
+          }
+        ];
+
+        return (
+          <div class="flex-center gap-8px">
+            <NButton text type="warning" ghost size="small" onClick={() => goToRetryTask(row.id!)}>
+              {$t('common.retryTaskList')}
+            </NButton>
+
+            <n-divider vertical />
+
+            <NDropdown trigger="click" show-arrow={false} options={options} size="small">
               {{
-                default: () => $t('common.confirmDelete'),
+                default: () => (
-                trigger: () => (
+                  <NButton text type="primary" ghost size="small">
-                  <NButton type="error" text ghost size="small">
+                    更多
-                    {$t('common.delete')}
                   </NButton>
                 )
               }}
-            </NPopconfirm>
+            </NDropdown>
-          }
+          </div>
-        </div>
+        );
-      )
+      }
     }
   ]
 });
 
+function goToRetryTask(retryId: string) {
+  routerPushByKey('retry_task', { state: { retryId } });
+}
+
 const {
   drawerVisible,
   operateType,
@@ -250,8 +343,8 @@ const {
 
 const { bool: batchAddDrawerVisible, setTrue: openBatchAddDrawer } = useBoolean();
 
-async function handleDelete(groupName: string, id: string) {
+async function handleDelete(id: string) {
-  const { error } = await fetchBatchDeleteRetryTask({ groupName, ids: [id] });
+  const { error } = await fetchBatchDeleteRetryTask({ ids: [id] });
   if (error) return;
   onDeleted();
 }
@@ -264,8 +357,7 @@ async function loadRetryInfo(row: Api.Retry.Retry) {
 async function handleBatchDelete() {
   const ids: string[] = checkedRowKeys.value as string[];
   if (ids.length === 0) return;
-  const groupName = data.value[0].groupName;
+  const { error } = await fetchBatchDeleteRetryTask({ ids });
-  const { error } = await fetchBatchDeleteRetryTask({ groupName, ids });
   if (error) return;
   onBatchDeleted();
 }
@@ -285,20 +377,20 @@ function handleExecute(groupName: string, retryId: number, type: Api.Retry.TaskT
   }
 }
 
-function handleResume(id: number, groupName: string) {
+function handleResume(id: number) {
-  updateRetryTaskStatus(id, groupName, 0);
+  updateRetryTaskStatus(id, 0);
 }
 
-function handlePause(id: number, groupName: string) {
+function handlePause(id: number) {
-  updateRetryTaskStatus(id, groupName, 3);
+  updateRetryTaskStatus(id, 3);
 }
 
-function handleFinish(id: number, groupName: string) {
+function handleFinish(id: number) {
-  updateRetryTaskStatus(id, groupName, 1);
+  updateRetryTaskStatus(id, 1);
 }
 
-async function updateRetryTaskStatus(id: number, groupName: string, retryStatus: Api.Retry.RetryStatusType) {
+async function updateRetryTaskStatus(id: number, status: Api.Retry.RetryStatusType) {
-  const { error } = await fetchUpdateRetryTaskStatus({ id, groupName, retryStatus });
+  const { error } = await fetchUpdateRetryTaskStatus({ id, retryStatus: status });
   if (error) return;
   window.$message?.success($t('common.updateSuccess'));
   getData();

src/views/retry/task/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { NButton, NPopconfirm, NTag } from 'naive-ui';
+import { NButton, NPopconfirm, NTag, NTooltip } from 'naive-ui';
 import { ref } from 'vue';
 import { useBoolean } from '~/packages/hooks';
 import { fetchBatchDeleteRetryLog, fetchDeleteRetryLog, fetchRetryLogById, fetchRetryLogPageList } from '@/service/api';
@@ -8,6 +8,7 @@ import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
 import { operationReasonRecord, retryTaskStatusTypeRecord, retryTaskTypeRecord } from '@/constants/business';
 import { monthRangeISO8601, tagColor } from '@/utils/common';
+import SvgIcon from '@/components/custom/svg-icon.vue';
 import RetryLogSearch from './modules/retry-task-search.vue';
 import RetryLogDetailDrawer from './modules/retry-task-detail-drawer.vue';
 
@@ -17,7 +18,7 @@ const appStore = useAppStore();
 const detailData = ref<Api.RetryTask.RetryTask | null>();
 /** 详情页可见状态 */
 const { bool: detailVisible, setTrue: openDetail } = useBoolean(false);
-const taskStatus = history.state.taskStatus;
+const retryId = history.state.retryId;
 
 const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchRetryLogPageList,
@@ -32,7 +33,7 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
     datetimeRange: monthRangeISO8601()
   },
   searchParams: {
-    taskStatus
+    retryId
   },
   columns: () => [
     {
@@ -43,9 +44,26 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
     },
     {
       key: 'id',
-      title: $t('common.index'),
       align: 'center',
-      width: 64,
+      width: 120,
+      fixed: 'left',
+      title: () => {
+        return (
+          <div class="flex-center">
+            <span>{$t('page.jobBatch.jobTask.id')}</span>
+            <NTooltip trigger="hover">
+              {{
+                trigger: () => (
+                  <span class="mb-2px ml-5px text-16px">
+                    <SvgIcon icon="ant-design:info-circle-outlined" />
+                  </span>
+                ),
+                default: () => <span>{$t('common.idDetailTip')}</span>
+              }}
+            </NTooltip>
+          </div>
+        );
+      },
       render: row => {
         async function showDetailDrawer() {
           await loadRetryInfo(row);
@@ -62,20 +80,40 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
     {
       key: 'groupName',
       title: $t('page.retryTask.groupName'),
-      align: 'left',
+      align: 'center',
       minWidth: 120
     },
     {
       key: 'sceneName',
       title: $t('page.retryTask.sceneName'),
-      align: 'left',
+      align: 'center',
       minWidth: 120
     },
+    {
+      key: 'retryId',
+      title: $t('page.retryTask.retryId'),
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'taskType',
+      title: $t('page.retryTask.taskType'),
+      align: 'center',
+      minWidth: 80,
+      render: row => {
+        if (row.taskType === null) {
+          return null;
+        }
+        const label = $t(retryTaskTypeRecord[row.taskType!]);
+
+        return <NTag type={tagColor(row.taskType!)}>{label}</NTag>;
+      }
+    },
     {
       key: 'taskStatus',
-      title: $t('page.retryTask.retryStatus'),
+      title: $t('page.retryTask.taskStatus'),
-      align: 'left',
+      align: 'center',
-      minWidth: 120,
+      minWidth: 80,
       render: row => {
         if (row.taskStatus === null) {
           return null;
@@ -108,24 +146,10 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
         return <NTag type={tagColor(row.operationReason!)}>{label}</NTag>;
       }
     },
-    {
-      key: 'taskType',
-      title: $t('page.retryTask.taskType'),
-      align: 'left',
-      minWidth: 120,
-      render: row => {
-        if (row.taskType === null) {
-          return null;
-        }
-        const label = $t(retryTaskTypeRecord[row.taskType!]);
-
-        return <NTag type={tagColor(row.taskType!)}>{label}</NTag>;
-      }
-    },
     {
       key: 'createDt',
       title: $t('page.retryTask.createDt'),
-      align: 'left',
+      align: 'center',
       minWidth: 120
     },
     {

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { $t } from '@/locales';
 import { translateOptions } from '@/utils/common';
-import { retryStatusTypeOptions } from '@/constants/business';
+import { retryTaskStatusTypeOptions } from '@/constants/business';
 import SelectGroup from '@/components/common/select-group.vue';
 import SelectScene from '@/components/common/select-scene.vue';
 import DatetimeRange from '@/components/common/datetime-range.vue';
@@ -36,20 +36,14 @@ function search() {
     <NFormItemGi span="24 s:12 m:6" :label="$t('page.retryTask.sceneName')" path="sceneName" class="pr-24px">
       <SelectScene v-model:value="model.sceneName" :group-name="model.groupName as string" clearable />
     </NFormItemGi>
-    <!--    <NFormItemGi span="24 s:12 m:6" :label="$t('page.retryTask.UniqueId')" path="UniqueId" class="pr-24px">-->
+    <NFormItemGi span="24 s:12 m:6" :label="$t('page.retryTask.retryId')" path="bizNo" class="pr-24px">
-    <!--      <NInput v-model:value="model.uniqueId" :placeholder="$t('page.retryTask.form.UniqueId')" clearable />-->
+      <NInput v-model:value="model.retryId" :placeholder="$t('page.retryTask.form.retryId')" clearable />
-    <!--    </NFormItemGi>-->
+    </NFormItemGi>
-    <!--    <NFormItemGi span="24 s:12 m:6" :label="$t('page.retryTask.idempotentId')" path="idempotentId" class="pr-24px">-->
+    <NFormItemGi span="24 s:12 m:6" :label="$t('page.retry.retryStatus')" path="taskBatchStatus" class="pr-24px">
-    <!--      <NInput v-model:value="model.idempotentId" :placeholder="$t('page.retryTask.form.idempotentId')" clearable />-->
-    <!--    </NFormItemGi>-->
-    <!--    <NFormItemGi span="24 s:12 m:6" :label="$t('page.retryTask.bizNo')" path="bizNo" class="pr-24px">-->
-    <!--      <NInput v-model:value="model.bizNo" :placeholder="$t('page.retryTask.form.bizNo')" clearable />-->
-    <!--    </NFormItemGi>-->
-    <NFormItemGi span="24 s:12 m:6" :label="$t('page.retryTask.retryStatus')" path="taskBatchStatus" class="pr-24px">
       <NSelect
         v-model:value="model.taskStatus"
-        :placeholder="$t('page.retryTask.form.retryStatus')"
+        :placeholder="$t('page.retry.form.retryStatus')"
-        :options="translateOptions(retryStatusTypeOptions)"
+        :options="translateOptions(retryTaskStatusTypeOptions)"
         clearable
       />
     </NFormItemGi>