refactor: 重构操作日志drawer

apps/web-antd/src/api/monitor/operlog/model.d.ts

@@ -2,7 +2,7 @@ export interface OperationLog {
   operId: string;
   tenantId: string;
   title: string;
-  businessType: number;
+  businessType: string;
   businessTypes?: any;
   method: string;
   requestMethod: string;
@@ -14,7 +14,7 @@ export interface OperationLog {
   operLocation: string;
   operParam: string;
   jsonResult: string;
-  status: number;
+  status: string;
   errorMsg: string;
   operTime: string;
   costTime: number;

apps/web-antd/src/utils/render.tsx

@@ -116,7 +116,7 @@ export function renderHttpMethodTag(type: string) {
   return <Tag color={color}>{title}</Tag>;
 }
 
-export function renderDictTag(value: string, dicts: DictData[]) {
+export function renderDictTag(value: number | string, dicts: DictData[]) {
   return <DictTag dicts={dicts} value={value}></DictTag>;
 }
 
@@ -155,7 +155,7 @@ export function renderDictTags(
  * @param dictName dictName
  * @returns tag
  */
-export function renderDict(value: string, dictName: string) {
+export function renderDict(value: number | string, dictName: string) {
   const dictInfo = getDictOptions(dictName);
   return renderDictTag(value, dictInfo);
 }

apps/web-antd/src/views/monitor/operlog/data.tsx

@@ -1,17 +1,10 @@
 import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
-import type { DescItem } from '#/components/description';
 
 import { DictEnum } from '@vben/constants';
 
-import { Tag } from 'ant-design-vue';
-
 import { getDictOptions } from '#/utils/dict';
-import {
+import { renderDict } from '#/utils/render';
-  renderDict,
-  renderHttpMethodTag,
-  renderJsonPreview,
-} from '#/utils/render';
 
 export const querySchema: FormSchemaGetter = () => [
   {
@@ -96,104 +89,3 @@ export const columns: VxeGridProps['columns'] = [
     width: 120,
   },
 ];
-
-export const descSchema: DescItem[] = [
-  {
-    field: 'operId',
-    label: '日志编号',
-  },
-  {
-    field: 'status',
-    label: '操作结果',
-    render(value) {
-      return renderDict(value, DictEnum.SYS_COMMON_STATUS);
-    },
-  },
-  {
-    field: 'title',
-    label: '操作模块',
-    labelMinWidth: 80,
-    render(value, { businessType }) {
-      const operType = renderDict(businessType, DictEnum.SYS_OPER_TYPE);
-      return (
-        <div class="flex items-center">
-          <Tag>{value}</Tag>
-          {operType}
-        </div>
-      );
-    },
-  },
-  {
-    field: 'operIp',
-    label: '操作信息',
-    render(_, data) {
-      return `账号: ${data.operName} / ${data.deptName} / ${data.operIp} / ${data.operLocation}`;
-    },
-  },
-  {
-    field: 'operUrl',
-    label: '请求信息',
-    render(_, data) {
-      const { operUrl, requestMethod } = data;
-      const methodTag = renderHttpMethodTag(requestMethod);
-      return (
-        <span>
-          {methodTag} {operUrl}
-        </span>
-      );
-    },
-  },
-  {
-    field: 'errorMsg',
-    label: '异常信息',
-    render(value) {
-      return <span class="font-bold text-red-600">{value}</span>;
-    },
-    show: (data) => {
-      return data && data.errorMsg !== '';
-    },
-  },
-  {
-    field: 'method',
-    label: '方法',
-  },
-  /**
-   * 默认word-break: break-word;会导致json预览样式异常
-   */
-  {
-    field: 'operParam',
-    label: '请求参数',
-    render(value) {
-      return (
-        <div class="max-h-[300px] w-full overflow-y-auto">
-          {renderJsonPreview(value)}
-        </div>
-      );
-    },
-  },
-  {
-    field: 'jsonResult',
-    label: '响应参数',
-    render(value) {
-      return (
-        <div class="max-h-[300px] w-full overflow-y-auto">
-          {renderJsonPreview(value)}
-        </div>
-      );
-    },
-    show(data) {
-      return data && data.jsonResult;
-    },
-  },
-  {
-    field: 'costTime',
-    label: '耗时',
-    render(value) {
-      return `${value} ms`;
-    },
-  },
-  {
-    field: 'operTime',
-    label: '操作时间',
-  },
-];

apps/web-antd/src/views/monitor/operlog/operation-preview-drawer.vue

@@ -1,32 +1,94 @@
 <script setup lang="ts">
 import type { OperationLog } from '#/api/monitor/operlog/model';
 
+import { computed, shallowRef } from 'vue';
+
 import { useVbenDrawer } from '@vben/common-ui';
+import { DictEnum } from '@vben/constants';
 
-import { Description, useDescription } from '#/components/description';
+import { Descriptions, DescriptionsItem, Tag } from 'ant-design-vue';
 
-import { descSchema } from './data';
+import {
+  renderDict,
+  renderHttpMethodTag,
+  renderJsonPreview,
+} from '#/utils/render';
 
 const [BasicDrawer, drawerApi] = useVbenDrawer({
   onOpenChange: handleOpenChange,
+  onClosed() {
+    currentLog.value = null;
+  },
 });
 
-const [registerDescription, { setDescProps }] = useDescription({
+const currentLog = shallowRef<null | OperationLog>(null);
-  column: 1,
-  schema: descSchema,
-});
-
 function handleOpenChange(open: boolean) {
   if (!open) {
     return null;
   }
   const { record } = drawerApi.getData() as { record: OperationLog };
-  setDescProps({ data: record }, true);
+  currentLog.value = record;
 }
+
+const actionInfo = computed(() => {
+  if (!currentLog.value) {
+    return '-';
+  }
+  const data = currentLog.value;
+  return `账号: ${data.operName} / ${data.deptName} / ${data.operIp} / ${data.operLocation}`;
+});
 </script>
 
 <template>
   <BasicDrawer :footer="false" class="w-[600px]" title="查看日志">
-    <Description @register="registerDescription" />
+    <Descriptions v-if="currentLog" size="small" bordered :column="1">
+      <DescriptionsItem label="日志编号" :label-style="{ minWidth: '120px' }">
+        {{ currentLog.operId }}
+      </DescriptionsItem>
+      <DescriptionsItem label="操作结果">
+        <component
+          :is="renderDict(currentLog.status, DictEnum.SYS_COMMON_STATUS)"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="操作模块">
+        <div class="flex items-center">
+          <Tag>{{ currentLog.title }}</Tag>
+          <component
+            :is="renderDict(currentLog.businessType, DictEnum.SYS_OPER_TYPE)"
+          />
+        </div>
+      </DescriptionsItem>
+      <DescriptionsItem label="操作信息">
+        {{ actionInfo }}
+      </DescriptionsItem>
+      <DescriptionsItem label="请求信息">
+        <component :is="renderHttpMethodTag(currentLog.requestMethod)" />
+        {{ currentLog.operUrl }}
+      </DescriptionsItem>
+      <DescriptionsItem v-if="currentLog.errorMsg" label="异常信息">
+        <span class="font-semibold text-red-600">
+          {{ currentLog.errorMsg }}
+        </span>
+      </DescriptionsItem>
+      <DescriptionsItem label="方法">
+        {{ currentLog.method }}
+      </DescriptionsItem>
+      <DescriptionsItem label="请求参数">
+        <div class="max-h-[300px] overflow-y-auto">
+          <component :is="renderJsonPreview(currentLog.operParam)" />
+        </div>
+      </DescriptionsItem>
+      <DescriptionsItem v-if="currentLog.jsonResult" label="响应参数">
+        <div class="max-h-[300px] overflow-y-auto">
+          <component :is="renderJsonPreview(currentLog.jsonResult)" />
+        </div>
+      </DescriptionsItem>
+      <DescriptionsItem label="请求耗时">
+        {{ `${currentLog.costTime} ms` }}
+      </DescriptionsItem>
+      <DescriptionsItem label="操作时间">
+        {{ `${currentLog.operTime}` }}
+      </DescriptionsItem>
+    </Descriptions>
   </BasicDrawer>
 </template>