index.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <script lang="ts" setup>
  2. import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter';
  3. import { confirm, Page, useVbenModal } from '@vben/common-ui';
  4. import { Button, message } from 'ant-design-vue';
  5. import { useTableGridOptions, useVbenVxeGrid } from '#/adapter';
  6. import { LogApi } from '#/api';
  7. import FormView from '../components/view.vue';
  8. import { useExceptionColumns, useSearchSchema } from '../data.config';
  9. const [FormViewModel, formViewApi] = useVbenModal({
  10. connectedComponent: FormView,
  11. });
  12. const handleView = (data: any) => {
  13. formViewApi
  14. .setData({
  15. baseData: { content: data.message },
  16. })
  17. .open();
  18. };
  19. const handleActionClick = async ({
  20. code,
  21. row,
  22. }: OnActionClickParams<LogApi.RecordItem>) => {
  23. switch (code) {
  24. case 'view': {
  25. handleView(row);
  26. break;
  27. }
  28. }
  29. };
  30. const [Grid, { reload }] = useVbenVxeGrid(
  31. useTableGridOptions({
  32. formOptions: {
  33. fieldMappingTime: [['__date', ['startTime', 'endTime']]],
  34. schema: useSearchSchema(),
  35. },
  36. gridOptions: {
  37. columns: useExceptionColumns(handleActionClick),
  38. proxyConfig: {
  39. ajax: {
  40. query: async ({ page }, formValues) => {
  41. return await LogApi.getExceptionPage({
  42. pageIndex: page.currentPage,
  43. pageSize: page.pageSize,
  44. ...formValues,
  45. });
  46. },
  47. },
  48. },
  49. } as VxeTableGridOptions,
  50. }),
  51. );
  52. const handelClear = () => {
  53. confirm({
  54. title: '删除提示',
  55. content: `确定要清空日志记录吗?`,
  56. icon: 'question',
  57. beforeClose: async ({ isConfirm }: { isConfirm: boolean }) => {
  58. if (isConfirm) {
  59. await LogApi.clearLog('logException');
  60. message.success('数据删除成功');
  61. reload();
  62. return true;
  63. } else return false;
  64. },
  65. });
  66. };
  67. </script>
  68. <template>
  69. <Page auto-content-height>
  70. <FormViewModel />
  71. <Grid>
  72. <template #table-title>
  73. <span class="border-l-primary border-l-8 border-solid pl-2">
  74. 异常日志列表
  75. </span>
  76. </template>
  77. <template #toolbar-tools>
  78. <Button
  79. class="mr-2"
  80. type="primary"
  81. v-access:code="'logException:clear'"
  82. @click="() => handelClear()"
  83. >
  84. 清空日志
  85. </Button>
  86. </template>
  87. </Grid>
  88. </Page>
  89. </template>