From 5fbbfdd3badb4d4667702d3956e3a37d7170fdc1 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 6 Apr 2025 10:44:23 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=A2=9E=E5=8A=A0=20operatelog=20?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C=E6=97=A5=E5=BF=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/system/operate-log/index.ts       |  38 +++++
 .../src/views/system/operatelog/data.ts       | 145 ++++++++++++++++++
 .../src/views/system/operatelog/index.vue     |  96 ++++++++++++
 .../system/operatelog/modules/detail.vue      |  76 +++++++++
 4 files changed, 355 insertions(+)
 create mode 100644 apps/web-antd/src/api/system/operate-log/index.ts
 create mode 100644 apps/web-antd/src/views/system/operatelog/data.ts
 create mode 100644 apps/web-antd/src/views/system/operatelog/index.vue
 create mode 100644 apps/web-antd/src/views/system/operatelog/modules/detail.vue

diff --git a/apps/web-antd/src/api/system/operate-log/index.ts b/apps/web-antd/src/api/system/operate-log/index.ts
new file mode 100644
index 000000000..ab0cf4599
--- /dev/null
+++ b/apps/web-antd/src/api/system/operate-log/index.ts
@@ -0,0 +1,38 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemOperateLogApi {
+  /** 操作日志信息 */
+  export interface SystemOperateLog {
+    id: number;
+    traceId: string;
+    userType: number;
+    userId: number;
+    userName: string;
+    type: string;
+    subType: string;
+    bizId: number;
+    action: string;
+    extra: string;
+    requestMethod: string;
+    requestUrl: string;
+    userIp: string;
+    userAgent: string;
+    creator: string;
+    creatorName: string;
+    createTime: string;
+  }
+}
+
+/** 查询操作日志列表 */
+export function getOperateLogPage(params: PageParam) {
+  return requestClient.get<PageResult<SystemOperateLogApi.SystemOperateLog>>('/system/operate-log/page',
+    { params }
+  );
+}
+
+/** 导出操作日志 */
+export function exportOperateLog(params: any) {
+  return requestClient.download('/system/operate-log/export-excel', { params });
+}
diff --git a/apps/web-antd/src/views/system/operatelog/data.ts b/apps/web-antd/src/views/system/operatelog/data.ts
new file mode 100644
index 000000000..c5712e753
--- /dev/null
+++ b/apps/web-antd/src/views/system/operatelog/data.ts
@@ -0,0 +1,145 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils/date';
+import { useAccess } from '@vben/access';
+
+const { hasAccessByCodes } = useAccess();
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '操作人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        fieldNames: {
+          label: 'nickname',
+          value: 'id',
+        },
+        allowClear: true,
+        placeholder: '请选择操作人员',
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '操作模块',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入操作模块',
+      },
+    },
+    {
+      fieldName: 'subType',
+      label: '操作名',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入操作名',
+      },
+    },
+    {
+      fieldName: 'action',
+      label: '操作内容',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入操作内容',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '操作时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'bizId',
+      label: '业务编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入业务编号',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns<T = SystemOperateLogApi.SystemOperateLog>(
+  onActionClick: OnActionClickFn<T>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '日志编号',
+      minWidth: 100,
+    },
+    {
+      field: 'userName',
+      title: '操作人',
+      minWidth: 120,
+    },
+    {
+      field: 'type',
+      title: '操作模块',
+      minWidth: 120,
+    },
+    {
+      field: 'subType',
+      title: '操作名',
+      minWidth: 160,
+    },
+    {
+      field: 'action',
+      title: '操作内容',
+      minWidth: 200,
+    },
+    {
+      field: 'createTime',
+      title: '操作时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'bizId',
+      title: '业务编号',
+      minWidth: 120,
+    },
+    {
+      field: 'userIp',
+      title: '操作IP',
+      minWidth: 120,
+    },
+    {
+      field: 'operation',
+      title: '操作',
+      minWidth: 120,
+      align: 'center',
+      fixed: 'right',
+      cellRender: {
+        attrs: {
+          nameField: 'action',
+          nameTitle: '操作日志',
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: [
+          {
+            code: 'view',
+            text: '详情',
+            show: hasAccessByCodes(['system:operate-log:query']),
+          },
+        ],
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/system/operatelog/index.vue b/apps/web-antd/src/views/system/operatelog/index.vue
new file mode 100644
index 000000000..80dc5cfe7
--- /dev/null
+++ b/apps/web-antd/src/views/system/operatelog/index.vue
@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { Button } from 'ant-design-vue';
+import { Download } from '@vben/icons';
+import Detail from './modules/detail.vue';
+import { DocAlert } from '#/components/doc-alert';
+
+import { $t } from '#/locales';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { exportOperateLog, getOperateLogPage } from '#/api/system/operate-log';
+import { downloadByData } from '#/utils/download';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function onExport() {
+  const data = await exportOperateLog(await gridApi.formApi.getValues());
+  downloadByData(data, '操作日志.xls');
+}
+
+/** 查看操作日志详情 */
+function onView(row: SystemOperateLogApi.SystemOperateLog) {
+  detailModalApi.setData(row).open();
+}
+
+/** 表格操作按钮的回调函数 */
+function onActionClick({
+  code,
+  row,
+}: OnActionClickParams<SystemOperateLogApi.SystemOperateLog>) {
+  switch (code) {
+    case 'view': {
+      onView(row);
+      break;
+    }
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(onActionClick),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOperateLogPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemOperateLogApi.SystemOperateLog>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <DocAlert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
+
+    <DetailModal @success="onRefresh" />
+    <Grid table-title="操作日志列表">
+      <template #toolbar-tools>
+        <Button type="primary" class="ml-2" @click="onExport" v-access:code="['system:operate-log:export']">
+          <Download class="size-5" />
+          {{ $t('ui.actionTitle.export') }}
+        </Button>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/system/operatelog/modules/detail.vue b/apps/web-antd/src/views/system/operatelog/modules/detail.vue
new file mode 100644
index 000000000..b69f8f3d2
--- /dev/null
+++ b/apps/web-antd/src/views/system/operatelog/modules/detail.vue
@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+import { useVbenModal } from '@vben/common-ui';
+import { Descriptions } from 'ant-design-vue';
+
+import { ref } from 'vue';
+import { formatDateTime } from '@vben/utils';
+
+const formData = ref<SystemOperateLogApi.SystemOperateLog>();
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemOperateLogApi.SystemOperateLog>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = data;
+    } finally {
+      modalApi.lock(false);
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="操作日志详情" class="w-1/2" :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="链路追踪" v-if="formData?.traceId">
+        {{ formData?.traceId }}
+      </Descriptions.Item>
+      <Descriptions.Item label="操作人编号">
+        {{ formData?.userId }}
+      </Descriptions.Item>
+      <Descriptions.Item label="操作人名字">
+        {{ formData?.userName }}
+      </Descriptions.Item>
+      <Descriptions.Item label="操作人IP">
+        {{ formData?.userIp }}
+      </Descriptions.Item>
+      <Descriptions.Item label="操作人UA">
+        {{ formData?.userAgent }}
+      </Descriptions.Item>
+      <Descriptions.Item label="操作模块">
+        {{ formData?.type }}
+      </Descriptions.Item>
+      <Descriptions.Item label="操作名">
+        {{ formData?.subType }}
+      </Descriptions.Item>
+      <Descriptions.Item label="操作内容">
+        {{ formData?.action }}
+      </Descriptions.Item>
+      <Descriptions.Item v-if="formData?.extra" label="操作拓展参数">
+        {{ formData?.extra }}
+      </Descriptions.Item>
+      <Descriptions.Item label="请求URL">
+        {{ formData?.requestMethod }} {{ formData?.requestUrl }}
+      </Descriptions.Item>
+      <Descriptions.Item label="操作时间">
+        {{ formatDateTime(formData?.createTime || '') }}
+      </Descriptions.Item>
+      <Descriptions.Item label="业务编号">
+        {{ formData?.bizId }}
+      </Descriptions.Item>
+    </Descriptions>
+  </Modal>
+</template>