feat(@vben/web-antd): 添加系统日志功能

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';

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,
+  });
+}

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'],
+        },
+      },
     ],
   },
 ];

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,
+    },
+  ];
+}

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>