feat: 修改日志

apps/web-baicai/src/adapter/vxe-table.ts

@@ -306,7 +306,7 @@ setupVbenVxeTable({
         });
         let width = 0;
         if (actions.length === 1) {
-          width = 80;
+          width = 60;
         } else {
           width = dropDownActions.length > 0 ? 150 : 108;
         }

apps/web-baicai/src/views/system/log/audit/index.vue

@@ -1,36 +1,52 @@
 <script lang="ts" setup>
-import { useAccess } from '@vben/access';
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter';
+
 import { Page } from '@vben/common-ui';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { TableAction } from '#/components/table-action';
+import { useTableGridOptions, useVbenVxeGrid } from '#/adapter';
+import { LogApi } from '#/api';
 
-import { gridOptions, searchFormOptions } from '../data.config';
+import { useColumns, useSearchSchema } from '../data.config';
 
-const { hasAccessByCodes } = useAccess();
+const handleActionClick = async ({
+  code,
+}: OnActionClickParams<LogApi.RecordItem>) => {
+  switch (code) {
+    case 'view': {
+      // await handleDelete(row.id);
+      break;
+    }
+  }
+};
 
-const [Grid] = useVbenVxeGrid({
-  formOptions: searchFormOptions,
-  gridOptions,
-});
+const [Grid] = useVbenVxeGrid(
+  useTableGridOptions({
+    formOptions: {
+      fieldMappingTime: [['__date', ['startTime', 'endTime']]],
+      schema: useSearchSchema(),
+    },
+    gridOptions: {
+      columns: useColumns(handleActionClick),
+      proxyConfig: {
+        ajax: {
+          query: async ({ page }, formValues) => {
+            return await LogApi.getAuditPage({
+              pageIndex: page.currentPage,
+              pageSize: page.pageSize,
+              ...formValues,
+            });
+          },
+        },
+      },
+    } as VxeTableGridOptions,
+  }),
+);
 </script>
 
 <template>
   <Page auto-content-height>
     <Grid>
-      <template #toolbar-tools> </template>
-      <template #action>
-        <TableAction
-          :actions="[
-            {
-              label: '详情',
-              type: 'text',
-              disabled: !hasAccessByCodes(['logAudit:edit']),
-              // onClick: handleEdit.bind(null, row, true),
-            },
-          ]"
-        />
-      </template>
+      <template #toolbar-tools></template>
     </Grid>
   </Page>
 </template>

apps/web-baicai/src/views/system/log/data.config.ts

@@ -1,10 +1,13 @@
-import type { VbenFormProps } from '#/adapter/form';
-import type { VxeGridProps } from '#/adapter/vxe-table';
+import type {
+  OnActionClickFn,
+  VbenFormSchema,
+  VxeTableGridOptions,
+} from '#/adapter';
 
 import { LogApi } from '#/api';
 
-export const searchFormOptions: VbenFormProps = {
-  schema: [
+export const useSearchSchema = (): VbenFormSchema[] => {
+  return [
     {
       component: 'RangePicker',
       fieldName: '__date',
@@ -15,18 +18,13 @@ export const searchFormOptions: VbenFormProps = {
         showTime: { format: 'HH:mm:ss' },
       },
     },
-  ],
+  ];
 };
 
-export const gridOptions: VxeGridProps<LogApi.RecordItem> = {
-  toolbarConfig: {
-    refresh: true,
-    print: false,
-    export: false,
-    zoom: true,
-    custom: true,
-  },
-  columns: [
+export function useColumns(
+  onActionClick?: OnActionClickFn<LogApi.RecordItem>,
+): VxeTableGridOptions<LogApi.RecordItem>['columns'] {
+  return [
     { title: '序号', type: 'seq', width: 50 },
     { align: 'left', field: 'tableName', title: '表名', width: 120 },
     { align: 'left', field: 'columnName', title: '列名', width: 120 },
@@ -37,43 +35,34 @@ export const gridOptions: VxeGridProps<LogApi.RecordItem> = {
     { align: 'left', field: 'account', title: '账号', width: 100 },
     { align: 'left', field: 'realName', title: '姓名' },
     {
-      field: 'action',
+      align: 'right',
+      cellRender: {
+        attrs: {
+          nameField: 'tableName',
+          nameTitle: '表名',
+          onClick: onActionClick,
+        },
+        name: 'CellAction',
+        options: [
+          {
+            code: 'view',
+            label: '详情',
+            auth: ['logAudit:edit'],
+          },
+        ],
+      },
+      field: 'operation',
       fixed: 'right',
-      slots: { default: 'action' },
+      headerAlign: 'center',
+      showOverflow: false,
       title: '操作',
-      width: 100,
-    },
-  ],
-  height: 'auto',
-  keepSource: true,
-  proxyConfig: {
-    ajax: {
-      query: async ({ page }, formValues) => {
-        const postData = { ...formValues };
-        if (postData.__date) {
-          postData.startTime = postData.__date[0];
-          postData.endTime = postData.__date[1];
-          delete postData.__date;
-        }
-        return await LogApi.getAuditPage({
-          pageIndex: page.currentPage,
-          pageSize: page.pageSize,
-          ...postData,
-        });
-      },
+      width: 50,
     },
-  },
-};
+  ];
+}
 
-export const gridDifferenceOptions: VxeGridProps<LogApi.RecordItem> = {
-  toolbarConfig: {
-    refresh: true,
-    print: false,
-    export: false,
-    zoom: true,
-    custom: true,
-  },
-  columns: [
+export function useDifferenceColumns(): VxeTableGridOptions<LogApi.RecordItem>['columns'] {
+  return [
     { title: '序号', type: 'seq', width: 50 },
     {
       align: 'left',
@@ -121,44 +110,15 @@ export const gridDifferenceOptions: VxeGridProps<LogApi.RecordItem> = {
       title: '耗时',
       width: 80,
     },
-  ],
-  height: 'auto',
-  keepSource: true,
-  proxyConfig: {
-    ajax: {
-      query: async ({ page }, formValues) => {
-        const postData = { ...formValues };
-        if (postData.__date) {
-          postData.startTime = postData.__date[0];
-          postData.endTime = postData.__date[1];
-          delete postData.__date;
-        }
-        return await LogApi.getDifferencePage({
-          pageIndex: page.currentPage,
-          pageSize: page.pageSize,
-          ...postData,
-        });
-      },
-    },
-  },
-};
+  ];
+}
 
-export const gridExceptionOptions: VxeGridProps<LogApi.RecordItem> = {
-  toolbarConfig: {
-    refresh: true,
-    print: false,
-    export: false,
-    zoom: true,
-    custom: true,
-  },
-  columns: [
+export function useExceptionColumns(
+  onActionClick?: OnActionClickFn<LogApi.RecordItem>,
+): VxeTableGridOptions<LogApi.RecordItem>['columns'] {
+  return [
     { title: '序号', type: 'seq', width: 50 },
-    {
-      align: 'left',
-      field: 'httpMethod',
-      title: '请求方式',
-      width: 80,
-    },
+    { align: 'left', field: 'httpMethod', title: '请求方式', width: 80 },
     {
       align: 'left',
       field: 'requestUrl',
@@ -194,43 +154,36 @@ export const gridExceptionOptions: VxeGridProps<LogApi.RecordItem> = {
       showOverflow: true,
     },
     {
-      field: 'action',
+      align: 'right',
+      cellRender: {
+        attrs: {
+          nameField: 'requestUrl',
+          nameTitle: '请求地址',
+          onClick: onActionClick,
+        },
+        name: 'CellAction',
+        options: [
+          {
+            code: 'view',
+            label: '详情',
+            // auth: ['logException:view'],
+          },
+        ],
+      },
+      field: 'operation',
       fixed: 'right',
-      slots: { default: 'action' },
+      headerAlign: 'center',
+      showOverflow: false,
       title: '操作',
-      width: 60,
-    },
-  ],
-  height: 'auto',
-  keepSource: true,
-  proxyConfig: {
-    ajax: {
-      query: async ({ page }, formValues) => {
-        const postData = { ...formValues };
-        if (postData.__date) {
-          postData.startTime = postData.__date[0];
-          postData.endTime = postData.__date[1];
-          delete postData.__date;
-        }
-        return await LogApi.getExceptionPage({
-          pageIndex: page.currentPage,
-          pageSize: page.pageSize,
-          ...postData,
-        });
-      },
+      width: 50,
     },
-  },
-};
+  ];
+}
 
-export const gridOperateOptions: VxeGridProps<LogApi.RecordItem> = {
-  toolbarConfig: {
-    refresh: true,
-    print: false,
-    export: false,
-    zoom: true,
-    custom: true,
-  },
-  columns: [
+export function useOperateColumns(
+  onActionClick?: OnActionClickFn<LogApi.RecordItem>,
+): VxeTableGridOptions<LogApi.RecordItem>['columns'] {
+  return [
     { title: '序号', type: 'seq', width: 50 },
     {
       align: 'left',
@@ -273,43 +226,34 @@ export const gridOperateOptions: VxeGridProps<LogApi.RecordItem> = {
       showOverflow: true,
     },
     {
-      field: 'action',
+      align: 'right',
+      cellRender: {
+        attrs: {
+          nameField: 'requestUrl',
+          nameTitle: '请求地址',
+          onClick: onActionClick,
+        },
+        name: 'CellAction',
+        options: [
+          {
+            code: 'view',
+            label: '详情',
+            // auth: ['logOperate:view'],
+          },
+        ],
+      },
+      field: 'operation',
       fixed: 'right',
-      slots: { default: 'action' },
+      headerAlign: 'center',
+      showOverflow: false,
       title: '操作',
-      width: 60,
-    },
-  ],
-  height: 'auto',
-  keepSource: true,
-  proxyConfig: {
-    ajax: {
-      query: async ({ page }, formValues) => {
-        const postData = { ...formValues };
-        if (postData.__date) {
-          postData.startTime = postData.__date[0];
-          postData.endTime = postData.__date[1];
-          delete postData.__date;
-        }
-        return await LogApi.getOperatePage({
-          pageIndex: page.currentPage,
-          pageSize: page.pageSize,
-          ...postData,
-        });
-      },
+      width: 50,
     },
-  },
-};
+  ];
+}
 
-export const gridVisitOptions: VxeGridProps<LogApi.RecordItem> = {
-  toolbarConfig: {
-    refresh: true,
-    print: false,
-    export: false,
-    zoom: true,
-    custom: true,
-  },
-  columns: [
+export function useVisitColumns(): VxeTableGridOptions<LogApi.RecordItem>['columns'] {
+  return [
     { title: '序号', type: 'seq', width: 50 },
     {
       align: 'left',
@@ -322,7 +266,6 @@ export const gridVisitOptions: VxeGridProps<LogApi.RecordItem> = {
       align: 'left',
       field: 'actionName',
       title: '方法名称',
-      width: 120,
       showOverflow: true,
     },
     {
@@ -387,24 +330,5 @@ export const gridVisitOptions: VxeGridProps<LogApi.RecordItem> = {
       title: '姓名',
       width: 120,
     },
-  ],
-  height: 'auto',
-  keepSource: true,
-  proxyConfig: {
-    ajax: {
-      query: async ({ page }, formValues) => {
-        const postData = { ...formValues };
-        if (postData.__date) {
-          postData.startTime = postData.__date[0];
-          postData.endTime = postData.__date[1];
-          delete postData.__date;
-        }
-        return await LogApi.getVisitPage({
-          pageIndex: page.currentPage,
-          pageSize: page.pageSize,
-          ...postData,
-        });
-      },
-    },
-  },
-};
+  ];
+}

apps/web-baicai/src/views/system/log/difference/index.vue

@@ -1,17 +1,37 @@
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter';
+
 import { Page } from '@vben/common-ui';
 
 import { Button, message, Modal } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { useTableGridOptions, useVbenVxeGrid } from '#/adapter';
 import { LogApi } from '#/api';
 
-import { gridDifferenceOptions, searchFormOptions } from '../data.config';
+import { useDifferenceColumns, useSearchSchema } from '../data.config';
 
-const [Grid, { reload }] = useVbenVxeGrid({
-  formOptions: searchFormOptions,
-  gridOptions: gridDifferenceOptions,
-});
+const [Grid, { reload }] = useVbenVxeGrid(
+  useTableGridOptions({
+    formOptions: {
+      fieldMappingTime: [['__date', ['startTime', 'endTime']]],
+      schema: useSearchSchema(),
+    },
+    gridOptions: {
+      columns: useDifferenceColumns(),
+      proxyConfig: {
+        ajax: {
+          query: async ({ page }, formValues) => {
+            return await LogApi.getDifferencePage({
+              pageIndex: page.currentPage,
+              pageSize: page.pageSize,
+              ...formValues,
+            });
+          },
+        },
+      },
+    } as VxeTableGridOptions,
+  }),
+);
 
 const handelClear = () => {
   Modal.confirm({

apps/web-baicai/src/views/system/log/exception/index.vue

@@ -1,23 +1,63 @@
 <script lang="ts" setup>
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter';
+
 import { Page, useVbenModal } from '@vben/common-ui';
 
 import { Button, message, Modal } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { useTableGridOptions, useVbenVxeGrid } from '#/adapter';
 import { LogApi } from '#/api';
-import { TableAction } from '#/components/table-action';
 
 import FormView from '../components/view.vue';
-import { gridExceptionOptions, searchFormOptions } from '../data.config';
+import { useExceptionColumns, useSearchSchema } from '../data.config';
 
 const [FormViewModel, formViewApi] = useVbenModal({
   connectedComponent: FormView,
 });
 
-const [Grid, { reload }] = useVbenVxeGrid({
-  formOptions: searchFormOptions,
-  gridOptions: gridExceptionOptions,
-});
+const handleView = (data: any) => {
+  formViewApi
+    .setData({
+      baseData: { content: data.message },
+    })
+    .open();
+};
+
+const handleActionClick = async ({
+  code,
+  row,
+}: OnActionClickParams<LogApi.RecordItem>) => {
+  switch (code) {
+    case 'view': {
+      handleView(row);
+      break;
+    }
+  }
+};
+
+const [Grid, { reload }] = useVbenVxeGrid(
+  useTableGridOptions({
+    formOptions: {
+      fieldMappingTime: [['__date', ['startTime', 'endTime']]],
+      schema: useSearchSchema(),
+    },
+    gridOptions: {
+      columns: useExceptionColumns(handleActionClick),
+
+      proxyConfig: {
+        ajax: {
+          query: async ({ page }, formValues) => {
+            return await LogApi.getExceptionPage({
+              pageIndex: page.currentPage,
+              pageSize: page.pageSize,
+              ...formValues,
+            });
+          },
+        },
+      },
+    } as VxeTableGridOptions,
+  }),
+);
 
 const handelClear = () => {
   Modal.confirm({
@@ -32,13 +72,6 @@ const handelClear = () => {
     },
   });
 };
-
-const handleView = (data: any) => {
-  formViewApi.setData({
-    baseData: { content: data.message },
-  });
-  formViewApi.open();
-};
 </script>
 
 <template>
@@ -55,18 +88,6 @@ const handleView = (data: any) => {
           清空日志
         </Button>
       </template>
-
-      <template #action="{ row }">
-        <TableAction
-          :actions="[
-            {
-              label: '详情',
-              type: 'text',
-              onClick: handleView.bind(null, row),
-            },
-          ]"
-        />
-      </template>
     </Grid>
   </Page>
 </template>

apps/web-baicai/src/views/system/log/operate/index.vue

@@ -1,23 +1,60 @@
 <script lang="ts" setup>
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter';
+
 import { Page, useVbenModal } from '@vben/common-ui';
 
 import { Button, message, Modal } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { useTableGridOptions, useVbenVxeGrid } from '#/adapter';
 import { LogApi } from '#/api';
-import { TableAction } from '#/components/table-action';
 
 import FormView from '../components/view.vue';
-import { gridOperateOptions, searchFormOptions } from '../data.config';
+import { useOperateColumns, useSearchSchema } from '../data.config';
 
 const [FormViewModel, formViewApi] = useVbenModal({
   connectedComponent: FormView,
 });
+const handleView = (data: any) => {
+  formViewApi
+    .setData({
+      baseData: { content: data.message },
+    })
+    .open();
+};
+const handleActionClick = async ({
+  code,
+  row,
+}: OnActionClickParams<LogApi.RecordItem>) => {
+  switch (code) {
+    case 'view': {
+      handleView(row);
+      break;
+    }
+  }
+};
 
-const [Grid, { reload }] = useVbenVxeGrid({
-  formOptions: searchFormOptions,
-  gridOptions: gridOperateOptions,
-});
+const [Grid, { reload }] = useVbenVxeGrid(
+  useTableGridOptions({
+    formOptions: {
+      fieldMappingTime: [['__date', ['startTime', 'endTime']]],
+      schema: useSearchSchema(),
+    },
+    gridOptions: {
+      columns: useOperateColumns(handleActionClick),
+      proxyConfig: {
+        ajax: {
+          query: async ({ page }, formValues) => {
+            return await LogApi.getOperatePage({
+              pageIndex: page.currentPage,
+              pageSize: page.pageSize,
+              ...formValues,
+            });
+          },
+        },
+      },
+    } as VxeTableGridOptions,
+  }),
+);
 
 const handelClear = () => {
   Modal.confirm({
@@ -32,12 +69,6 @@ const handelClear = () => {
     },
   });
 };
-const handleView = (data: any) => {
-  formViewApi.setData({
-    baseData: { content: data.message },
-  });
-  formViewApi.open();
-};
 </script>
 
 <template>
@@ -54,17 +85,6 @@ const handleView = (data: any) => {
           清空日志
         </Button>
       </template>
-      <template #action="{ row }">
-        <TableAction
-          :actions="[
-            {
-              label: '详情',
-              type: 'text',
-              onClick: handleView.bind(null, row),
-            },
-          ]"
-        />
-      </template>
     </Grid>
   </Page>
 </template>

apps/web-baicai/src/views/system/log/visit/index.vue

@@ -1,17 +1,38 @@
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter';
+
 import { Page } from '@vben/common-ui';
 
 import { Button, message, Modal } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { useTableGridOptions, useVbenVxeGrid } from '#/adapter';
 import { LogApi } from '#/api';
 
-import { gridVisitOptions, searchFormOptions } from '../data.config';
+import { useSearchSchema, useVisitColumns } from '../data.config';
+
+const [Grid, { reload }] = useVbenVxeGrid(
+  useTableGridOptions({
+    formOptions: {
+      fieldMappingTime: [['__date', ['startTime', 'endTime']]],
+      schema: useSearchSchema(),
+    },
+    gridOptions: {
+      columns: useVisitColumns(),
 
-const [Grid, { reload }] = useVbenVxeGrid({
-  formOptions: searchFormOptions,
-  gridOptions: gridVisitOptions,
-});
+      proxyConfig: {
+        ajax: {
+          query: async ({ page }, formValues) => {
+            return await LogApi.getVisitPage({
+              pageIndex: page.currentPage,
+              pageSize: page.pageSize,
+              ...formValues,
+            });
+          },
+        },
+      },
+    } as VxeTableGridOptions,
+  }),
+);
 
 const handelClear = () => {
   Modal.confirm({