feat: 使用 useDescription
xingyu4j
parent
604539e22b
commit
4f5316aa32
|
|
@ -1,6 +1,13 @@
|
|||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { DescriptionItemSchema } from '#/components/description';
|
||||
|
||||
import { h } from 'vue';
|
||||
|
||||
import { JsonViewer } from '@vben/common-ui';
|
||||
import { formatDateTime } from '@vben/utils';
|
||||
|
||||
import { DictTag } from '#/components/dict-tag';
|
||||
import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
|
||||
|
||||
/** 列表的搜索表单 */
|
||||
|
|
@ -136,3 +143,101 @@ 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) => {
|
||||
return h(DictTag, {
|
||||
type: DICT_TYPE.USER_TYPE,
|
||||
value: data.userType,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'userIp',
|
||||
label: '用户IP',
|
||||
},
|
||||
{
|
||||
field: 'userAgent',
|
||||
label: '用户UA',
|
||||
},
|
||||
{
|
||||
field: 'requestMethod',
|
||||
label: '请求信息',
|
||||
content: (data) => {
|
||||
return `${data.requestMethod} ${data.requestUrl}`;
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'requestParams',
|
||||
label: '请求参数',
|
||||
content: (data) => {
|
||||
return h(JsonViewer, {
|
||||
value: data.requestParams,
|
||||
previewMode: true,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'responseBody',
|
||||
label: '请求结果',
|
||||
},
|
||||
{
|
||||
field: 'beginTime',
|
||||
label: '请求时间',
|
||||
content: (data) => {
|
||||
return `${formatDateTime(data?.beginTime)} ~ ${formatDateTime(data?.endTime)}`;
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'duration',
|
||||
label: '请求耗时',
|
||||
},
|
||||
{
|
||||
field: 'resultCode',
|
||||
label: '操作结果',
|
||||
content: (data) => {
|
||||
return data.resultCode === 0
|
||||
? '成功'
|
||||
: `失败 | ${data.resultCode} | ${data.resultMsg}`;
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'operateModule',
|
||||
label: '操作模块',
|
||||
},
|
||||
{
|
||||
field: 'operateName',
|
||||
label: '操作名',
|
||||
},
|
||||
{
|
||||
field: 'operateType',
|
||||
label: '操作类型',
|
||||
content: (data) =>
|
||||
h(DictTag, {
|
||||
type: DICT_TYPE.INFRA_OPERATE_TYPE,
|
||||
value: data?.operateType,
|
||||
}),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,13 +3,11 @@ import type { InfraApiAccessLogApi } from '#/api/infra/api-access-log';
|
|||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { JsonViewer, useVbenModal } from '@vben/common-ui';
|
||||
import { formatDateTime } from '@vben/utils';
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { Descriptions } from 'ant-design-vue';
|
||||
import { useDescription } from '#/components/description';
|
||||
|
||||
import { DictTag } from '#/components/dict-tag';
|
||||
import { DICT_TYPE } from '#/utils';
|
||||
import { useDetailSchema } from '../data';
|
||||
|
||||
const formData = ref<InfraApiAccessLogApi.ApiAccessLog>();
|
||||
|
||||
|
|
@ -32,6 +30,15 @@ const [Modal, modalApi] = useVbenModal({
|
|||
}
|
||||
},
|
||||
});
|
||||
|
||||
const [Description] = useDescription({
|
||||
componentProps: {
|
||||
bordered: true,
|
||||
column: 1,
|
||||
class: 'mx-4',
|
||||
},
|
||||
schema: useDetailSchema(),
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -41,66 +48,6 @@ const [Modal, modalApi] = useVbenModal({
|
|||
:show-cancel-button="false"
|
||||
:show-confirm-button="false"
|
||||
>
|
||||
<Descriptions
|
||||
bordered
|
||||
:column="1"
|
||||
size="middle"
|
||||
class="mx-4"
|
||||
:label-style="{ width: '110px' }"
|
||||
>
|
||||
<Descriptions.Item label="日志编号">
|
||||
{{ formData?.id }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="链路追踪">
|
||||
{{ formData?.traceId }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="应用名">
|
||||
{{ formData?.applicationName }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="用户信息">
|
||||
{{ formData?.userId }}
|
||||
<DictTag :type="DICT_TYPE.USER_TYPE" :value="formData?.userType" />
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="用户IP">
|
||||
{{ formData?.userIp }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="用户UA">
|
||||
{{ formData?.userAgent }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="请求信息">
|
||||
{{ formData?.requestMethod }} {{ formData?.requestUrl }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="请求参数">
|
||||
<JsonViewer :value="formData?.requestParams" preview-mode />
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="请求结果">
|
||||
{{ formData?.responseBody }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="请求时间">
|
||||
{{ formatDateTime(formData?.beginTime || '') }} ~
|
||||
{{ formatDateTime(formData?.endTime || '') }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="请求耗时">
|
||||
{{ formData?.duration }} ms
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="操作结果">
|
||||
<div v-if="formData?.resultCode === 0">正常</div>
|
||||
<div v-else-if="formData && formData?.resultCode > 0">
|
||||
失败 | {{ formData?.resultCode }} | {{ formData?.resultMsg }}
|
||||
</div>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="操作模块">
|
||||
{{ formData?.operateModule }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="操作名">
|
||||
{{ formData?.operateName }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="操作类型">
|
||||
<DictTag
|
||||
:type="DICT_TYPE.INFRA_OPERATE_TYPE"
|
||||
:value="formData?.operateType"
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
<Description :data="formData" />
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,13 @@
|
|||
import type { VbenFormSchema } from '#/adapter/form';
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
import type { DescriptionItemSchema } from '#/components/description';
|
||||
|
||||
import { h } from 'vue';
|
||||
|
||||
import { JsonViewer } from '@vben/common-ui';
|
||||
import { formatDateTime } from '@vben/utils';
|
||||
|
||||
import { DictTag } from '#/components/dict-tag';
|
||||
import {
|
||||
DICT_TYPE,
|
||||
getDictOptions,
|
||||
|
|
@ -121,3 +128,102 @@ 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) => {
|
||||
return h(DictTag, {
|
||||
type: DICT_TYPE.USER_TYPE,
|
||||
value: data.userType,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'userIp',
|
||||
label: '用户IP',
|
||||
},
|
||||
{
|
||||
field: 'userAgent',
|
||||
label: '用户UA',
|
||||
},
|
||||
{
|
||||
field: 'requestMethod',
|
||||
label: '请求信息',
|
||||
content: (data) => {
|
||||
return `${data.requestMethod} ${data.requestUrl}`;
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'requestParams',
|
||||
label: '请求参数',
|
||||
content: (data) => {
|
||||
return h(JsonViewer, {
|
||||
value: data.requestParams,
|
||||
previewMode: true,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'exceptionTime',
|
||||
label: '异常时间',
|
||||
content: (data) => {
|
||||
return formatDateTime(data?.exceptionTime) as string;
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'exceptionName',
|
||||
label: '异常名',
|
||||
},
|
||||
{
|
||||
field: 'exceptionStackTrace',
|
||||
label: '异常堆栈',
|
||||
content: (data) => {
|
||||
return h(JsonViewer, {
|
||||
value: data.exceptionStackTrace,
|
||||
previewMode: true,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'processStatus',
|
||||
label: '处理状态',
|
||||
content: (data) => {
|
||||
return h(DictTag, {
|
||||
type: DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS,
|
||||
value: data?.processStatus,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'processUserId',
|
||||
label: '处理人',
|
||||
},
|
||||
{
|
||||
field: 'processTime',
|
||||
label: '处理时间',
|
||||
content: (data) => {
|
||||
return formatDateTime(data?.processTime) as string;
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,13 +3,11 @@ import type { InfraApiErrorLogApi } from '#/api/infra/api-error-log';
|
|||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { JsonViewer, useVbenModal } from '@vben/common-ui';
|
||||
import { formatDateTime } from '@vben/utils';
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
|
||||
import { Descriptions } from 'ant-design-vue';
|
||||
import { useDescription } from '#/components/description';
|
||||
|
||||
import { DictTag } from '#/components/dict-tag';
|
||||
import { DICT_TYPE } from '#/utils';
|
||||
import { useDetailSchema } from '../data';
|
||||
|
||||
const formData = ref<InfraApiErrorLogApi.ApiErrorLog>();
|
||||
|
||||
|
|
@ -32,6 +30,15 @@ const [Modal, modalApi] = useVbenModal({
|
|||
}
|
||||
},
|
||||
});
|
||||
|
||||
const [Description] = useDescription({
|
||||
componentProps: {
|
||||
bordered: true,
|
||||
column: 1,
|
||||
class: 'mx-4',
|
||||
},
|
||||
schema: useDetailSchema(),
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -41,59 +48,6 @@ const [Modal, modalApi] = useVbenModal({
|
|||
:show-cancel-button="false"
|
||||
:show-confirm-button="false"
|
||||
>
|
||||
<Descriptions
|
||||
bordered
|
||||
:column="1"
|
||||
size="middle"
|
||||
class="mx-4"
|
||||
:label-style="{ width: '110px' }"
|
||||
>
|
||||
<Descriptions.Item label="日志编号">
|
||||
{{ formData?.id }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="链路追踪">
|
||||
{{ formData?.traceId }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="应用名">
|
||||
{{ formData?.applicationName }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="用户编号">
|
||||
{{ formData?.userId }}
|
||||
<DictTag :type="DICT_TYPE.USER_TYPE" :value="formData?.userType" />
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="用户IP">
|
||||
{{ formData?.userIp }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="用户UA">
|
||||
{{ formData?.userAgent }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="请求信息">
|
||||
{{ formData?.requestMethod }} {{ formData?.requestUrl }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="请求参数">
|
||||
<JsonViewer :value="formData?.requestParams" preview-mode />
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="异常时间">
|
||||
{{ formatDateTime(formData?.exceptionTime || '') }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="异常名">
|
||||
{{ formData?.exceptionName }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item v-if="formData?.exceptionStackTrace" label="异常堆栈">
|
||||
<JsonViewer :value="formData?.exceptionStackTrace" preview-mode />
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="处理状态">
|
||||
<DictTag
|
||||
:type="DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS"
|
||||
:value="formData?.processStatus"
|
||||
/>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item v-if="formData?.processUserId" label="处理人">
|
||||
{{ formData?.processUserId }}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item v-if="formData?.processTime" label="处理时间">
|
||||
{{ formatDateTime(formData?.processTime || '') }}
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
<Description :data="formData" />
|
||||
</Modal>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue