From 90e9b3aaf2172054d88e9f4e226611b594cd3d38 Mon Sep 17 00:00:00 2001
From: Kven <2955163637@qq.com>
Date: Tue, 13 May 2025 11:28:43 +0800
Subject: [PATCH] =?UTF-8?q?feat(@vben/web-antd):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E6=97=A5=E5=BF=97=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/core/index.ts           |   1 +
 apps/web-antd/src/api/core/log.ts             |  27 +++
 .../src/router/routes/modules/system.ts       |  10 +
 apps/web-antd/src/views/log/data.ts           | 176 ++++++++++++++++++
 apps/web-antd/src/views/log/list.vue          |  90 +++++++++
 5 files changed, 304 insertions(+)
 create mode 100644 apps/web-antd/src/api/core/log.ts
 create mode 100644 apps/web-antd/src/views/log/data.ts
 create mode 100644 apps/web-antd/src/views/log/list.vue

diff --git a/apps/web-antd/src/api/core/index.ts b/apps/web-antd/src/api/core/index.ts
index 8d802e3..1243365 100644
--- a/apps/web-antd/src/api/core/index.ts
+++ b/apps/web-antd/src/api/core/index.ts
@@ -1,6 +1,7 @@
 export * from './auth';
 export * from './chatflow';
 export * from './dept';
+export * from './log';
 export * from './menu';
 export * from './role';
 export * from './server';
diff --git a/apps/web-antd/src/api/core/log.ts b/apps/web-antd/src/api/core/log.ts
new file mode 100644
index 0000000..585b889
--- /dev/null
+++ b/apps/web-antd/src/api/core/log.ts
@@ -0,0 +1,27 @@
+import { requestClient } from '#/api/request';
+
+export interface LogsRecord {
+  moduleType?: string;
+  functionType?: string;
+  publishTimeBegin?: string;
+  publishTimeEnd?: string;
+  current: number;
+  size: number;
+}
+
+// 日志分页查询
+export function queryLogList(data: LogsRecord) {
+  return requestClient.get('/rest/log', { params: data });
+}
+
+// 日志详情
+export function queryLogDetail(id: number) {
+  return requestClient.get(`/rest/log/${id}`);
+}
+
+// 日志批量删除
+export function deleteLogs(ids: number[]) {
+  return requestClient.delete(`/rest/log/batch`, {
+    data: ids,
+  });
+}
diff --git a/apps/web-antd/src/router/routes/modules/system.ts b/apps/web-antd/src/router/routes/modules/system.ts
index 642770a..b598894 100644
--- a/apps/web-antd/src/router/routes/modules/system.ts
+++ b/apps/web-antd/src/router/routes/modules/system.ts
@@ -43,6 +43,16 @@ const routes: RouteRecordRaw[] = [
           authority: ['system:user'],
         },
       },
+      {
+        name: 'log',
+        path: '/system/log',
+        component: () => import('#/views/log/list.vue'),
+        meta: {
+          icon: MdiUser,
+          title: '系统日志',
+          authority: ['system'],
+        },
+      },
     ],
   },
 ];
diff --git a/apps/web-antd/src/views/log/data.ts b/apps/web-antd/src/views/log/data.ts
new file mode 100644
index 0000000..c317d9d
--- /dev/null
+++ b/apps/web-antd/src/views/log/data.ts
@@ -0,0 +1,176 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+// import type { UserApi } from '#/api';
+
+import { ref } from 'vue';
+
+import { getAllDeptTree, queryRoleList } from '#/api';
+// import { $t } from '#/locales';
+
+const treeData = ref([]);
+const optionsRoleData = ref([]);
+
+queryRoleList('').then((res) => {
+  optionsRoleData.value = res.records.map((item) => ({
+    label: item.name,
+    value: item.id,
+  }));
+});
+
+function transformToTreeData(data: any) {
+  return data.map((item) => ({
+    value: item.id,
+    label: item.name,
+    ...(item.children && { children: transformToTreeData(item.children) }),
+  }));
+}
+
+// 使用示例
+getAllDeptTree(1).then((res) => {
+  treeData.value = transformToTreeData(res);
+});
+// export function useFormSchema(): VbenFormSchema[] {
+//   return [
+//     {
+//       component: 'Input',
+//       fieldName: 'username',
+//       label: '用户名称',
+//       rules: 'required',
+//     },
+//     {
+//       component: 'Input',
+//       fieldName: 'name',
+//       label: '昵称',
+//       rules: 'required',
+//     },
+//     {
+//       component: 'Input',
+//       fieldName: 'email',
+//       label: 'Email',
+//       rules: 'required',
+//     },
+//     {
+//       component: 'Input',
+//       fieldName: 'phone',
+//       label: '电话',
+//       rules: 'required',
+//     },
+//     {
+//       component: 'Input',
+//       fieldName: 'password',
+//       label: '密码',
+//       rules: 'required',
+//     },
+//     {
+//       component: 'Input',
+//       fieldName: 'address',
+//       label: '地址',
+//     },
+//     {
+//       component: 'RadioGroup',
+//       componentProps: {
+//         buttonStyle: 'solid',
+//         options: [
+//           { label: $t('common.enabled'), value: true },
+//           { label: $t('common.disabled'), value: false },
+//         ],
+//         optionType: 'button',
+//       },
+//       defaultValue: true,
+//       fieldName: 'enable',
+//       label: '状态',
+//     },
+//     {
+//       component: 'Textarea',
+//       fieldName: 'remark',
+//       label: '备注',
+//     },
+//     {
+//       component: 'Select',
+//       rules: 'required',
+//       componentProps: {
+//         allowClear: true,
+//         mode: 'multiple',
+//         // api: queryRoleList(''),
+//         options: optionsRoleData,
+//         class: 'w-full',
+//         labelField: 'name',
+//         valueField: 'id',
+//       },
+//       fieldName: 'roleIds',
+//       label: '所属角色',
+//     },
+//     {
+//       component: 'TreeSelect',
+//       componentProps: {
+//         allowClear: true,
+//         // api: getAllDeptTree(1),
+//         treeData,
+//         class: 'w-full',
+//         labelField: 'name',
+//         valueField: 'id',
+//         childrenField: 'children',
+//       },
+//       fieldName: 'deptId',
+//       label: '所属部门',
+//     },
+//   ];
+// }
+
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'functionType',
+      label: '功能类型',
+    },
+    // {
+    //   component: 'Select',
+    //   componentProps: {
+    //     allowClear: true,
+    //     options: [
+    //       { label: $t('common.enabled'), value: true },
+    //       { label: $t('common.disabled'), value: false },
+    //     ],
+    //   },
+    //   fieldName: 'enableState',
+    //   label: '状态',
+    // },
+    // {
+    //   component: 'Input',
+    //   fieldName: 'remark',
+    //   label: '备注',
+    // },
+    // {
+    //   component: 'RangePicker',
+    //   fieldName: 'makeTime',
+    //   label: '创建时间',
+    // },
+  ];
+}
+
+export function useColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      type: 'checkbox',
+      width: 100,
+    },
+    {
+      field: 'functionType',
+      title: '功能类型',
+      width: 200,
+    },
+    {
+      field: 'content',
+      minWidth: 100,
+      title: '内容',
+    },
+    {
+      field: 'makeTime',
+      slots: { default: 'makeTime' },
+      title: '发生时间',
+      width: 200,
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/log/list.vue b/apps/web-antd/src/views/log/list.vue
new file mode 100644
index 0000000..32faae9
--- /dev/null
+++ b/apps/web-antd/src/views/log/list.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { UserApi } from '#/api';
+
+import { ref } from 'vue';
+
+import { Page, useVbenDrawer } from '@vben/common-ui';
+
+import { Button, message } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteLogs, queryLogList } from '#/api';
+
+import { useColumns, useGridFormSchema } from './data';
+
+const [FormDrawer] = useVbenDrawer({
+  destroyOnClose: true,
+});
+
+const selectedRowIds = ref<number[]>([]);
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const res = await queryLogList({
+            page: page.currentPage,
+            size: page.pageSize,
+            current: page.currentPage,
+            ...formValues,
+          });
+          return {
+            items: res.records,
+            total: res.total,
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+
+    toolbarConfig: {
+      custom: true,
+      export: false,
+      refresh: { code: 'query' },
+      search: true,
+      zoom: true,
+    },
+  } as VxeTableGridOptions<UserApi.User>,
+});
+
+function onRefresh() {
+  gridApi.query();
+}
+
+async function onDelete() {
+  const ids = gridApi.grid.getCheckboxRecords();
+  selectedRowIds.value = ids.map((item) => item.id);
+  try {
+    await deleteLogs(selectedRowIds.value);
+    message.success('删除成功');
+    onRefresh();
+  } catch {
+    message.error('删除失败');
+  }
+}
+</script>
+<template>
+  <Page auto-content-height>
+    <FormDrawer />
+    <Grid table-title="用户列表">
+      <template #toolbar-tools>
+        <Button type="primary" @click="onDelete" danger> 批量删除 </Button>
+      </template>
+      <template #makeTime="{ row }">
+        {{ dayjs(row.makeTime).format('YYYY-MM-DD HH:mm') }}
+      </template>
+    </Grid>
+  </Page>
+</template>