yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

reactor：【infra 基础设施】infra 的 job、joblogger 描述的统一

pull/211/head
YunaiV 2025-09-10 22:33:38 +08:00
parent 4cb1ecfb1c
commit 21f76355fa
15 changed files with 563 additions and 327 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
apps/web-antd/src/views/infra/apiAccessLog/data.ts
View File

@ -1,5 +1,6 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { InfraApiAccessLogApi } from '#/api/infra/api-access-log';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
@ -180,7 +181,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'userType',
label: '用户类型',
content: (data) => {
content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
return h(DictTag, {
type: DICT_TYPE.USER_TYPE,
value: data.userType,
@ -189,23 +190,25 @@ export function useDetailSchema(): DescriptionItemSchema[] {
},
{
field: 'userIp',
label: '用户IP',
label: '用户 IP',
},
{
field: 'userAgent',
label: '用户UA',
label: '用户 UA',
},
{
field: 'requestMethod',
label: '请求信息',
content: (data) => {
return `${data.requestMethod} ${data.requestUrl}`;
content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
if (data?.requestMethod && data?.requestUrl) {
return `${data.requestMethod} ${data.requestUrl}`;
}
return '';
},
},
{
field: 'requestParams',
label: '请求参数',
content: (data) => {
content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
if (data.requestParams) {
return h(JsonViewer, {
value: JSON.parse(data.requestParams),
@ -220,23 +223,29 @@ export function useDetailSchema(): DescriptionItemSchema[] {
label: '请求结果',
},
{
field: 'beginTime',
label: '请求时间',
content: (data) => {
return `${formatDateTime(data?.beginTime)} ~ ${formatDateTime(data?.endTime)}`;
content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
if (data?.beginTime && data?.endTime) {
return `${formatDateTime(data.beginTime)} ~ ${formatDateTime(data.endTime)}`;
}
return '';
},
},
{
field: 'duration',
label: '请求耗时',
content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
return data?.duration ? `${data.duration} ms` : '';
},
},
{
field: 'resultCode',
label: '操作结果',
content: (data) => {
return data.resultCode === 0
? '成功'
: `失败 | ${data.resultCode} | ${data.resultMsg}`;
content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
if (data?.resultCode === 0) {
return '正常';
} else if (data && data.resultCode > 0) {
return `失败 | ${data.resultCode} | ${data.resultMsg}`;
}
return '';
},
},
{
@ -250,11 +259,12 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'operateType',
label: '操作类型',
content: (data) =>
h(DictTag, {
content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
return h(DictTag, {
type: DICT_TYPE.INFRA_OPERATE_TYPE,
value: data?.operateType,
}),
});
},
},
];
}

20
apps/web-antd/src/views/infra/apiAccessLog/modules/detail.vue
View File

@ -11,6 +11,15 @@ import { useDetailSchema } from '../data';
const formData = ref<InfraApiAccessLogApi.ApiAccessLog>();
const [Descriptions] = useDescription({
componentProps: {
bordered: true,
column: 1,
class: 'mx-4',
},
schema: useDetailSchema(),
});
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
@ -30,15 +39,6 @@ const [Modal, modalApi] = useVbenModal({
}
},
});
const [Description] = useDescription({
componentProps: {
bordered: true,
column: 1,
class: 'mx-4',
},
schema: useDetailSchema(),
});
</script>
<template>
@ -48,6 +48,6 @@ const [Description] = useDescription({
:show-cancel-button="false"
:show-confirm-button="false"
>
<Description :data="formData" />
<Descriptions :data="formData" />
</Modal>
</template>

49
apps/web-antd/src/views/infra/apiErrorLog/data.ts
View File

@ -1,5 +1,6 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { InfraApiErrorLogApi } from '#/api/infra/api-error-log';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
@ -9,8 +10,6 @@ import { DICT_TYPE, InfraApiErrorLogProcessStatusEnum } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { formatDateTime } from '@vben/utils';
import { Textarea } from 'ant-design-vue';
import { DictTag } from '#/components/dict-tag';
import { getRangePickerDefaultProps } from '#/utils';
@ -130,7 +129,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
{
title: '操作',
minWidth: 200,
minWidth: 220,
fixed: 'right',
slots: { default: 'actions' },
},
@ -159,7 +158,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'userType',
label: '用户类型',
content: (data) => {
content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
return h(DictTag, {
type: DICT_TYPE.USER_TYPE,
value: data.userType,
@ -168,23 +167,26 @@ export function useDetailSchema(): DescriptionItemSchema[] {
},
{
field: 'userIp',
label: '用户IP',
label: '用户 IP',
},
{
field: 'userAgent',
label: '用户UA',
label: '用户 UA',
},
{
field: 'requestMethod',
label: '请求信息',
content: (data) => {
return `${data.requestMethod} ${data.requestUrl}`;
content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
if (data?.requestMethod && data?.requestUrl) {
return `${data.requestMethod} ${data.requestUrl}`;
}
return '';
},
},
{
field: 'requestParams',
label: '请求参数',
content: (data) => {
content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
if (data.requestParams) {
return h(JsonViewer, {
value: JSON.parse(data.requestParams),
@ -197,8 +199,8 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'exceptionTime',
label: '异常时间',
content: (data) => {
return formatDateTime(data?.exceptionTime) as string;
content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
return formatDateTime(data?.exceptionTime || '') as string;
},
},
{
@ -208,17 +210,24 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'exceptionStackTrace',
label: '异常堆栈',
content: (data) => {
return h(Textarea, {
value: data.exceptionStackTrace,
rows: 20,
});
hidden: (data: InfraApiErrorLogApi.ApiErrorLog) =>
!data?.exceptionStackTrace,
content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
if (data?.exceptionStackTrace) {
return h('textarea', {
value: data.exceptionStackTrace,
style:
'width: 100%; min-height: 200px; max-height: 400px; resize: vertical;',
readonly: true,
});
}
return '';
},
},
{
field: 'processStatus',
label: '处理状态',
content: (data) => {
content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
return h(DictTag, {
type: DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS,
value: data?.processStatus,
@ -228,12 +237,14 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'processUserId',
label: '处理人',
hidden: (data: InfraApiErrorLogApi.ApiErrorLog) => !data?.processUserId,
},
{
field: 'processTime',
label: '处理时间',
content: (data) => {
return formatDateTime(data?.processTime) as string;
hidden: (data: InfraApiErrorLogApi.ApiErrorLog) => !data?.processTime,
content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
return formatDateTime(data?.processTime || '') as string;
},
},
];

22
apps/web-antd/src/views/infra/apiErrorLog/modules/detail.vue
View File

@ -11,6 +11,15 @@ import { useDetailSchema } from '../data';
const formData = ref<InfraApiErrorLogApi.ApiErrorLog>();
const [Descriptions] = useDescription({
componentProps: {
bordered: true,
column: 1,
class: 'mx-4',
},
schema: useDetailSchema(),
});
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
@ -30,24 +39,15 @@ const [Modal, modalApi] = useVbenModal({
}
},
});
const [Description] = useDescription({
componentProps: {
bordered: true,
column: 1,
class: 'mx-4',
},
schema: useDetailSchema(),
});
</script>
<template>
<Modal
title="API错误日志详情"
title="API 错误日志详情"
class="w-1/2"
:show-cancel-button="false"
:show-confirm-button="false"
>
<Description :data="formData" />
<Descriptions :data="formData" />
</Modal>
</template>

24
apps/web-antd/src/views/infra/job/data.ts
View File

@ -1,5 +1,6 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { InfraJobApi } from '#/api/infra/job';
import type { DescriptionItemSchema } from '#/components/description';
import { h, markRaw } from 'vue';
@ -173,7 +174,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
];
}
/** 详情的配置 */
/** 详情页的字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
@ -187,11 +188,12 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'status',
label: '任务状态',
content: (data) =>
h(DictTag, {
content: (data: InfraJobApi.Job) => {
return h(DictTag, {
type: DICT_TYPE.INFRA_JOB_STATUS,
value: data?.status,
}),
});
},
},
{
field: 'handlerName',
@ -203,23 +205,25 @@ export function useDetailSchema(): DescriptionItemSchema[] {
},
{
field: 'cronExpression',
label: 'CRON 表达式',
label: 'Cron 表达式',
},
{
field: 'retryCount',
label: '重试次数',
},
{
field: 'retryInterval',
label: '重试间隔',
content: (data: InfraJobApi.Job) => {
return data?.retryInterval ? `${data.retryInterval} 毫秒` : '无间隔';
},
},
{
field: 'monitorTimeout',
label: '监控超时时间',
content: (data) =>
data?.monitorTimeout && data.monitorTimeout > 0
content: (data: InfraJobApi.Job) => {
return data?.monitorTimeout && data.monitorTimeout > 0
? `${data.monitorTimeout} 毫秒`
: '未开启',
: '未开启';
},
},
{
field: 'nextTimes',

23
apps/web-antd/src/views/infra/job/logger/data.ts
View File

@ -1,5 +1,6 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { InfraJobLogApi } from '#/api/infra/job-log';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
@ -127,7 +128,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
];
}
/** 详情的配置 */
/** 详情页的字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
@ -153,23 +154,29 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'beginTime',
label: '执行时间',
},
{
field: 'endTime',
label: '结束时间',
content: (data: InfraJobLogApi.JobLog) => {
if (data?.beginTime && data?.endTime) {
return `${formatDateTime(data.beginTime)} ~ ${formatDateTime(data.endTime)}`;
}
return '';
},
},
{
field: 'duration',
label: '执行时长',
content: (data: InfraJobLogApi.JobLog) => {
return data?.duration ? `${data.duration} 毫秒` : '';
},
},
{
field: 'status',
label: '任务状态',
content: (data) =>
h(DictTag, {
content: (data: InfraJobLogApi.JobLog) => {
return h(DictTag, {
type: DICT_TYPE.INFRA_JOB_LOG_STATUS,
value: data?.status,
}),
});
},
},
{
field: 'result',

20
apps/web-antd/src/views/infra/job/logger/modules/detail.vue
View File

@ -12,6 +12,15 @@ import { useDetailSchema } from '../data';
const formData = ref<InfraJobLogApi.JobLog>();
const [Descriptions] = useDescription({
componentProps: {
bordered: true,
column: 1,
class: 'mx-4',
},
schema: useDetailSchema(),
});
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
@ -31,15 +40,6 @@ const [Modal, modalApi] = useVbenModal({
}
},
});
const [Description] = useDescription({
componentProps: {
bordered: true,
column: 1,
class: 'mx-4',
},
schema: useDetailSchema(),
});
</script>
<template>
@ -49,6 +49,6 @@ const [Description] = useDescription({
:show-cancel-button="false"
:show-confirm-button="false"
>
<Description :data="formData" />
<Descriptions :data="formData" />
</Modal>
</template>

117
apps/web-ele/src/views/infra/apiAccessLog/data.ts
View File

@ -1,9 +1,16 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { InfraApiAccessLogApi } from '#/api/infra/api-access-log';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { JsonViewer } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { formatDateTime } from '@vben/utils';
import { DictTag } from '#/components/dict-tag';
import { getRangePickerDefaultProps } from '#/utils';
/** 列表的搜索表单 */
@ -151,3 +158,113 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
];
}
/** 详情页的字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'id',
label: '日志编号',
},
{
field: 'traceId',
label: '链路追踪',
},
{
field: 'applicationName',
label: '应用名',
},
{
field: 'userId',
label: '用户Id',
},
{
field: 'userType',
label: '用户类型',
content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
return h(DictTag, {
type: DICT_TYPE.USER_TYPE,
value: data.userType,
});
},
},
{
field: 'userIp',
label: '用户 IP',
},
{
field: 'userAgent',
label: '用户 UA',
},
{
label: '请求信息',
content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
if (data?.requestMethod && data?.requestUrl) {
return `${data.requestMethod} ${data.requestUrl}`;
}
return '';
},
},
{
field: 'requestParams',
label: '请求参数',
content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
if (data.requestParams) {
return h(JsonViewer, {
value: JSON.parse(data.requestParams),
previewMode: true,
});
}
return '';
},
},
{
field: 'responseBody',
label: '请求结果',
},
{
label: '请求时间',
content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
if (data?.beginTime && data?.endTime) {
return `${formatDateTime(data.beginTime)} ~ ${formatDateTime(data.endTime)}`;
}
return '';
},
},
{
label: '请求耗时',
content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
return data?.duration ? `${data.duration} ms` : '';
},
},
{
label: '操作结果',
content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
if (data?.resultCode === 0) {
return '正常';
} else if (data && data.resultCode > 0) {
return `失败 | ${data.resultCode} | ${data.resultMsg}`;
}
return '';
},
},
{
field: 'operateModule',
label: '操作模块',
},
{
field: 'operateName',
label: '操作名',
},
{
field: 'operateType',
label: '操作类型',
content: (data: InfraApiAccessLogApi.ApiAccessLog) => {
return h(DictTag, {
type: DICT_TYPE.INFRA_OPERATE_TYPE,
value: data?.operateType,
});
},
},
];
}

83
apps/web-ele/src/views/infra/apiAccessLog/modules/detail.vue
View File

@ -1,18 +1,28 @@
<script lang="ts" setup>
<script setup lang="ts">
import type { InfraApiAccessLogApi } from '#/api/infra/api-access-log';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { formatDateTime } from '@vben/utils';
import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
import { useDescription } from '#/components/description';
import { DictTag } from '#/components/dict-tag';
import { useDetailSchema } from '../data';
const formData = ref<InfraApiAccessLogApi.ApiAccessLog>();
const [Descriptions] = useDescription({
componentProps: {
border: true,
column: 1,
direction: 'horizontal',
title: '',
extra: '',
labelWidth: 110,
},
schema: useDetailSchema(),
});
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
@ -35,73 +45,12 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<!-- TODO @puhui999：这个后续会做类似 antd 的 description 组件么？ -->
<Modal
title="API 访问日志详情"
class="w-1/2"
:show-cancel-button="false"
:show-confirm-button="false"
>
<ElDescriptions
border
:column="1"
size="default"
class="mx-4"
label-width="110px"
>
<ElDescriptionsItem label="日志编号">
{{ formData?.id }}
</ElDescriptionsItem>
<ElDescriptionsItem label="链路追踪">
{{ formData?.traceId }}
</ElDescriptionsItem>
<ElDescriptionsItem label="应用名">
{{ formData?.applicationName }}
</ElDescriptionsItem>
<ElDescriptionsItem label="用户信息">
{{ formData?.userId }}
<DictTag :type="DICT_TYPE.USER_TYPE" :value="formData?.userType" />
</ElDescriptionsItem>
<ElDescriptionsItem label="用户IP">
{{ formData?.userIp }}
</ElDescriptionsItem>
<ElDescriptionsItem label="用户UA">
{{ formData?.userAgent }}
</ElDescriptionsItem>
<ElDescriptionsItem label="请求信息">
{{ formData?.requestMethod }} {{ formData?.requestUrl }}
</ElDescriptionsItem>
<ElDescriptionsItem label="请求参数">
{{ formData?.requestParams }}
</ElDescriptionsItem>
<ElDescriptionsItem label="请求结果">
{{ formData?.responseBody }}
</ElDescriptionsItem>
<ElDescriptionsItem label="请求时间">
{{ formatDateTime(formData?.beginTime || '') }} ~
{{ formatDateTime(formData?.endTime || '') }}
</ElDescriptionsItem>
<ElDescriptionsItem label="请求耗时">
{{ formData?.duration }} ms
</ElDescriptionsItem>
<ElDescriptionsItem label="操作结果">
<div v-if="formData?.resultCode === 0">正常</div>
<div v-else-if="formData && formData?.resultCode > 0">
失败 | {{ formData?.resultCode }} | {{ formData?.resultMsg }}
</div>
</ElDescriptionsItem>
<ElDescriptionsItem label="操作模块">
{{ formData?.operateModule }}
</ElDescriptionsItem>
<ElDescriptionsItem label="操作名">
{{ formData?.operateName }}
</ElDescriptionsItem>
<ElDescriptionsItem label="操作类型">
<DictTag
:type="DICT_TYPE.INFRA_OPERATE_TYPE"
:value="formData?.operateType"
/>
</ElDescriptionsItem>
</ElDescriptions>
<Descriptions :data="formData" />
</Modal>
</template>

123
apps/web-ele/src/views/infra/apiErrorLog/data.ts
View File

@ -1,9 +1,16 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { InfraApiErrorLogApi } from '#/api/infra/api-error-log';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { JsonViewer } from '@vben/common-ui';
import { DICT_TYPE, InfraApiErrorLogProcessStatusEnum } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { formatDateTime } from '@vben/utils';
import { DictTag } from '#/components/dict-tag';
import { getRangePickerDefaultProps } from '#/utils';
/** 列表的搜索表单 */
@ -122,9 +129,123 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
{
title: '操作',
minWidth: 200,
minWidth: 220,
fixed: 'right',
slots: { default: 'actions' },
},
];
}
/** 详情页的字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'id',
label: '日志编号',
},
{
field: 'traceId',
label: '链路追踪',
},
{
field: 'applicationName',
label: '应用名',
},
{
field: 'userId',
label: '用户Id',
},
{
field: 'userType',
label: '用户类型',
content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
return h(DictTag, {
type: DICT_TYPE.USER_TYPE,
value: data.userType,
});
},
},
{
field: 'userIp',
label: '用户 IP',
},
{
field: 'userAgent',
label: '用户 UA',
},
{
field: 'requestMethod',
label: '请求信息',
content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
if (data?.requestMethod && data?.requestUrl) {
return `${data.requestMethod} ${data.requestUrl}`;
}
return '';
},
},
{
field: 'requestParams',
label: '请求参数',
content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
if (data.requestParams) {
return h(JsonViewer, {
value: JSON.parse(data.requestParams),
previewMode: true,
});
}
return '';
},
},
{
field: 'exceptionTime',
label: '异常时间',
content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
return formatDateTime(data?.exceptionTime || '') as string;
},
},
{
field: 'exceptionName',
label: '异常名',
},
{
field: 'exceptionStackTrace',
label: '异常堆栈',
hidden: (data: InfraApiErrorLogApi.ApiErrorLog) =>
!data?.exceptionStackTrace,
content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
if (data?.exceptionStackTrace) {
return h('textarea', {
value: data.exceptionStackTrace,
style:
'width: 100%; min-height: 200px; max-height: 400px; resize: vertical;',
readonly: true,
});
}
return '';
},
},
{
field: 'processStatus',
label: '处理状态',
content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
return h(DictTag, {
type: DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS,
value: data?.processStatus,
});
},
},
{
field: 'processUserId',
label: '处理人',
hidden: (data: InfraApiErrorLogApi.ApiErrorLog) => !data?.processUserId,
},
{
field: 'processTime',
label: '处理时间',
hidden: (data: InfraApiErrorLogApi.ApiErrorLog) => !data?.processTime,
content: (data: InfraApiErrorLogApi.ApiErrorLog) => {
return formatDateTime(data?.processTime || '') as string;
},
},
];
}

82
apps/web-ele/src/views/infra/apiErrorLog/modules/detail.vue
View File

@ -1,18 +1,28 @@
<script lang="ts" setup>
<script setup lang="ts">
import type { InfraApiErrorLogApi } from '#/api/infra/api-error-log';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { formatDateTime } from '@vben/utils';
import { ElDescriptions, ElDescriptionsItem, ElInput } from 'element-plus';
import { useDescription } from '#/components/description';
import { DictTag } from '#/components/dict-tag';
import { useDetailSchema } from '../data';
const formData = ref<InfraApiErrorLogApi.ApiErrorLog>();
const [Descriptions] = useDescription({
componentProps: {
border: true,
column: 1,
direction: 'horizontal',
title: '',
extra: '',
labelWidth: 110,
},
schema: useDetailSchema(),
});
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
@ -36,69 +46,11 @@ const [Modal, modalApi] = useVbenModal({
<template>
<Modal
title="API错误日志详情"
title="API 错误日志详情"
class="w-1/2"
:show-cancel-button="false"
:show-confirm-button="false"
>
<ElDescriptions
border
:column="1"
size="default"
class="mx-4"
label-width="110px"
>
<ElDescriptionsItem label="日志编号">
{{ formData?.id }}
</ElDescriptionsItem>
<ElDescriptionsItem label="链路追踪">
{{ formData?.traceId }}
</ElDescriptionsItem>
<ElDescriptionsItem label="应用名">
{{ formData?.applicationName }}
</ElDescriptionsItem>
<ElDescriptionsItem label="用户编号">
{{ formData?.userId }}
<DictTag :type="DICT_TYPE.USER_TYPE" :value="formData?.userType" />
</ElDescriptionsItem>
<ElDescriptionsItem label="用户IP">
{{ formData?.userIp }}
</ElDescriptionsItem>
<ElDescriptionsItem label="用户UA">
{{ formData?.userAgent }}
</ElDescriptionsItem>
<ElDescriptionsItem label="请求信息">
{{ formData?.requestMethod }} {{ formData?.requestUrl }}
</ElDescriptionsItem>
<ElDescriptionsItem label="请求参数">
{{ formData?.requestParams }}
</ElDescriptionsItem>
<ElDescriptionsItem label="异常时间">
{{ formatDateTime(formData?.exceptionTime || '') }}
</ElDescriptionsItem>
<ElDescriptionsItem label="异常名">
{{ formData?.exceptionName }}
</ElDescriptionsItem>
<ElDescriptionsItem v-if="formData?.exceptionStackTrace" label="异常堆栈">
<ElInput
type="textarea"
:model-value="formData?.exceptionStackTrace"
:autosize="{ maxRows: 20 }"
readonly
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="处理状态">
<DictTag
:type="DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS"
:value="formData?.processStatus"
/>
</ElDescriptionsItem>
<ElDescriptionsItem v-if="formData?.processUserId" label="处理人">
{{ formData?.processUserId }}
</ElDescriptionsItem>
<ElDescriptionsItem v-if="formData?.processTime" label="处理时间">
{{ formatDateTime(formData?.processTime || '') }}
</ElDescriptionsItem>
</ElDescriptions>
<Descriptions :data="formData" />
</Modal>
</template>

61
apps/web-ele/src/views/infra/job/data.ts
View File

@ -1,8 +1,15 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { InfraJobApi } from '#/api/infra/job';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { formatDateTime } from '@vben/utils';
import { DictTag } from '#/components/dict-tag';
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
@ -167,3 +174,57 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
];
}
/** 详情页的字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'id',
label: '任务编号',
},
{
field: 'name',
label: '任务名称',
},
{
field: 'status',
label: '任务状态',
content: (data: InfraJobApi.Job) => {
return h(DictTag, {
type: DICT_TYPE.INFRA_JOB_STATUS,
value: data?.status,
});
},
},
{
field: 'handlerName',
label: '处理器的名字',
},
{
field: 'handlerParam',
label: '处理器的参数',
},
{
field: 'cronExpression',
label: 'Cron 表达式',
},
{
field: 'retryCount',
label: '重试次数',
},
{
label: '重试间隔',
content: (data: InfraJobApi.Job) => {
return data?.retryInterval ? `${data.retryInterval} 毫秒` : '无间隔';
},
},
{
label: '监控超时时间',
content: (data: InfraJobApi.Job) => {
return data?.monitorTimeout && data.monitorTimeout > 0
? `${data.monitorTimeout} 毫秒`
: '未开启';
},
},
];
}

63
apps/web-ele/src/views/infra/job/logger/data.ts
View File

@ -1,5 +1,9 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { InfraJobLogApi } from '#/api/infra/job-log';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
@ -7,6 +11,8 @@ import { formatDateTime } from '@vben/utils';
import dayjs from 'dayjs';
import { DictTag } from '#/components/dict-tag';
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
@ -121,3 +127,60 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
];
}
/** 详情页的字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'id',
label: '日志编号',
},
{
field: 'jobId',
label: '任务编号',
},
{
field: 'handlerName',
label: '处理器的名字',
},
{
field: 'handlerParam',
label: '处理器的参数',
},
{
field: 'executeIndex',
label: '第几次执行',
},
{
field: 'beginTime',
label: '执行时间',
content: (data: InfraJobLogApi.JobLog) => {
if (data?.beginTime && data?.endTime) {
return `${formatDateTime(data.beginTime)} ~ ${formatDateTime(data.endTime)}`;
}
return '';
},
},
{
field: 'duration',
label: '执行时长',
content: (data: InfraJobLogApi.JobLog) => {
return data?.duration ? `${data.duration} 毫秒` : '';
},
},
{
field: 'status',
label: '任务状态',
content: (data: InfraJobLogApi.JobLog) => {
return h(DictTag, {
type: DICT_TYPE.INFRA_JOB_LOG_STATUS,
value: data?.status,
});
},
},
{
field: 'result',
label: '执行结果',
},
];
}

62
apps/web-ele/src/views/infra/job/logger/modules/detail.vue
View File

@ -1,19 +1,29 @@
<script lang="ts" setup>
<script setup lang="ts">
import type { InfraJobLogApi } from '#/api/infra/job-log';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { formatDateTime } from '@vben/utils';
import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
import { getJobLog } from '#/api/infra/job-log';
import { DictTag } from '#/components/dict-tag';
import { useDescription } from '#/components/description';
import { useDetailSchema } from '../data';
const formData = ref<InfraJobLogApi.JobLog>();
const [Descriptions] = useDescription({
componentProps: {
border: true,
column: 1,
direction: 'horizontal',
title: '',
extra: '',
labelWidth: 140,
},
schema: useDetailSchema(),
});
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
@ -42,44 +52,6 @@ const [Modal, modalApi] = useVbenModal({
:show-cancel-button="false"
:show-confirm-button="false"
>
<ElDescriptions
:column="1"
border
size="default"
class="mx-4"
:label-width="140"
>
<ElDescriptionsItem label="日志编号">
{{ formData?.id }}
</ElDescriptionsItem>
<ElDescriptionsItem label="任务编号">
{{ formData?.jobId }}
</ElDescriptionsItem>
<ElDescriptionsItem label="处理器的名字">
{{ formData?.handlerName }}
</ElDescriptionsItem>
<ElDescriptionsItem label="处理器的参数">
{{ formData?.handlerParam }}
</ElDescriptionsItem>
<ElDescriptionsItem label="第几次执行">
{{ formData?.executeIndex }}
</ElDescriptionsItem>
<ElDescriptionsItem label="执行时间">
{{ formData?.beginTime ? formatDateTime(formData.beginTime) : '' }} ~
{{ formData?.endTime ? formatDateTime(formData.endTime) : '' }}
</ElDescriptionsItem>
<ElDescriptionsItem label="执行时长">
{{ formData?.duration ? `${formData.duration} 毫秒` : '' }}
</ElDescriptionsItem>
<ElDescriptionsItem label="任务状态">
<DictTag
:type="DICT_TYPE.INFRA_JOB_LOG_STATUS"
:value="formData?.status"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="执行结果">
{{ formData?.result }}
</ElDescriptionsItem>
</ElDescriptions>
<Descriptions :data="formData" />
</Modal>
</template>

93
apps/web-ele/src/views/infra/job/modules/detail.vue
View File

@ -1,25 +1,31 @@
<script lang="ts" setup>
<script setup lang="ts">
import type { InfraJobApi } from '#/api/infra/job';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { formatDateTime } from '@vben/utils';
import {
ElDescriptions,
ElDescriptionsItem,
ElTimeline,
ElTimelineItem,
} from 'element-plus';
import { getJob, getJobNextTimes } from '#/api/infra/job';
import { DictTag } from '#/components/dict-tag';
import { useDescription } from '#/components/description';
import { useDetailSchema } from '../data';
const formData = ref<InfraJobApi.Job>(); // 任务详情
const nextTimes = ref<Date[]>([]); // 下一次执行时间
const [Descriptions] = useDescription({
componentProps: {
border: true,
column: 1,
direction: 'horizontal',
title: '',
extra: '',
labelWidth: 140,
},
schema: useDetailSchema(),
});
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
@ -50,57 +56,20 @@ const [Modal, modalApi] = useVbenModal({
:show-cancel-button="false"
:show-confirm-button="false"
>
<ElDescriptions
:column="1"
border
size="default"
class="mx-4"
:label-width="140"
>
<ElDescriptionsItem label="任务编号">
{{ formData?.id }}
</ElDescriptionsItem>
<ElDescriptionsItem label="任务名称">
{{ formData?.name }}
</ElDescriptionsItem>
<ElDescriptionsItem label="任务状态">
<DictTag :type="DICT_TYPE.INFRA_JOB_STATUS" :value="formData?.status" />
</ElDescriptionsItem>
<ElDescriptionsItem label="处理器的名字">
{{ formData?.handlerName }}
</ElDescriptionsItem>
<ElDescriptionsItem label="处理器的参数">
{{ formData?.handlerParam }}
</ElDescriptionsItem>
<ElDescriptionsItem label="Cron 表达式">
{{ formData?.cronExpression }}
</ElDescriptionsItem>
<ElDescriptionsItem label="重试次数">
{{ formData?.retryCount }}
</ElDescriptionsItem>
<ElDescriptionsItem label="重试间隔">
{{
formData?.retryInterval ? `${formData.retryInterval} 毫秒` : '无间隔'
}}
</ElDescriptionsItem>
<ElDescriptionsItem label="监控超时时间">
{{
formData?.monitorTimeout && formData.monitorTimeout > 0
? `${formData.monitorTimeout} 毫秒`
: '未开启'
}}
</ElDescriptionsItem>
<ElDescriptionsItem label="后续执行时间">
<ElTimeline class="h-[180px]">
<ElTimelineItem
v-for="(nextTime, index) in nextTimes"
:key="index"
type="primary"
>
第 {{ index + 1 }} 次：{{ formatDateTime(nextTime.toString()) }}
</ElTimelineItem>
</ElTimeline>
</ElDescriptionsItem>
</ElDescriptions>
<Descriptions :data="formData" />
<!-- 后续执行时间 -->
<div v-if="nextTimes.length > 0" class="mt-4">
<h4 class="mb-2 text-lg font-medium">后续执行时间</h4>
<div class="max-h-[200px] overflow-y-auto rounded border p-2">
<div
v-for="(nextTime, index) in nextTimes"
:key="index"
class="py-1 text-sm text-gray-600"
>
第 {{ index + 1 }} 次：{{ formatDateTime(nextTime.toString()) }}
</div>
</div>
</div>
</Modal>
</template>