gtsoft/gtsoft-snail-job-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
opensnail 2025-02-21 23:59:44 +08:00
parent c64ad0cc81
commit 3e17388c98
7 changed files with 273 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/locales/langs/en-us.ts
View File

@ -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'

7
src/locales/langs/zh-cn.ts
View File

@ -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: '编辑重试任务'

3
src/typings/api.d.ts vendored
View File

@ -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[];
};

5
src/typings/app.d.ts vendored
View File

@ -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;

314
src/views/retry/info/index.vue
View File

@ -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,
minWidth: 120,
maxWidth: 250
width: 180
},
{
key: 'sceneName',
title: $t('page.retry.sceneName'),
align: 'center',
minWidth: 120
width: 180
},
{
key: 'nextTriggerAt',
title: $t('page.retry.nextTriggerAt'),
align: 'center',
resizable: true,
minWidth: 80,
maxWidth: 150
width: 120
},
{
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: 150,
maxWidth: 300
minWidth: 120
},
{
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 => (
<div class="flex-center gap-8px">
{/* 非[完成,最大次数], 显示[执行]按钮 */}
{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 />
</>
) : (
''
)}
render: row => {
const options = [
{
<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'),
trigger: () => (
<NButton type="error" text ghost size="small">
{$t('common.delete')}
default: () => (
<NButton text type="primary" ghost size="small">
更多
</NButton>
)
}}
</NPopconfirm>
}
</div>
)
</NDropdown>
</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) {
const { error } = await fetchBatchDeleteRetryTask({ groupName, ids: [id] });
async function handleDelete(id: string) {
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({ groupName, ids });
const { error } = await fetchBatchDeleteRetryTask({ 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) {
updateRetryTaskStatus(id, groupName, 0);
function handleResume(id: number) {
updateRetryTaskStatus(id, 0);
}
function handlePause(id: number, groupName: string) {
updateRetryTaskStatus(id, groupName, 3);
function handlePause(id: number) {
updateRetryTaskStatus(id, 3);
}
function handleFinish(id: number, groupName: string) {
updateRetryTaskStatus(id, groupName, 1);
function handleFinish(id: number) {
updateRetryTaskStatus(id, 1);
}
async function updateRetryTaskStatus(id: number, groupName: string, retryStatus: Api.Retry.RetryStatusType) {
const { error } = await fetchUpdateRetryTaskStatus({ id, groupName, retryStatus });
async function updateRetryTaskStatus(id: number, status: Api.Retry.RetryStatusType) {
const { error } = await fetchUpdateRetryTaskStatus({ id, retryStatus: status });
if (error) return;
window.$message?.success($t('common.updateSuccess'));
getData();

74
src/views/retry/task/index.vue
View File

@ -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'),
align: 'left',
minWidth: 120,
title: $t('page.retryTask.taskStatus'),
align: 'center',
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
},
{

20
src/views/retry/task/modules/retry-task-search.vue
View File

@ -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">-->
<!-- <NInput v-model:value="model.uniqueId" :placeholder="$t('page.retryTask.form.UniqueId')" clearable />-->
<!-- </NFormItemGi>-->
<!-- <NFormItemGi span="24 s:12 m:6" :label="$t('page.retryTask.idempotentId')" path="idempotentId" 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">
<NFormItemGi span="24 s:12 m:6" :label="$t('page.retryTask.retryId')" path="bizNo" class="pr-24px">
<NInput v-model:value="model.retryId" :placeholder="$t('page.retryTask.form.retryId')" clearable />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" :label="$t('page.retry.retryStatus')" path="taskBatchStatus" class="pr-24px">
<NSelect
v-model:value="model.taskStatus"
:placeholder="$t('page.retryTask.form.retryStatus')"
:options="translateOptions(retryStatusTypeOptions)"
:placeholder="$t('page.retry.form.retryStatus')"
:options="translateOptions(retryTaskStatusTypeOptions)"
clearable
/>
</NFormItemGi>