admin_web/apps/web-antd/src/component/calendar/event-table.vue

<script setup lang="ts">

import { getUserlogEventApi } from '#/api/core/log';
import { useVbenVxeGrid } from '#/adapter/vxe-table';

import { inject } from 'vue';
import { globalState } from '#/store/globalState';
import { $t } from '#/locales';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { VbenFormProps } from '#/adapter/form';
import { Page } from '@vben/common-ui';
import dayjs from 'dayjs';
const state = inject('globalState', globalState);

const date = dayjs();
const startDate = dayjs().startOf('day');
interface RowType {
  Uid: string;
  Event: string;
  Param: string;
  Timestamp: string;
}
const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
    schema: [
      {
        component: 'Input',
        componentProps: {
          placeholder: 'Uid',
        },
        defaultValue: state.uid,
        fieldName: 'Uid',
        label: 'Uid',
      },
      {
        component: 'Input',
        componentProps: {
          placeholder: 'Event',
        },
        defaultValue: state.Event,
        fieldName: 'Event',
        label: '事件类型',
      },
      {
        component: 'DatePicker',
        defaultValue: startDate,
        componentProps: {
          format: 'YYYY-MM-DD',
        },
        fieldName: 'StartTime',
        label: '开始时间',
        formItemClass: 'col-start-1',
      },
      {
        component: 'TimePicker',
        componentProps: {
          placeholder: '时间',
        },
        fieldName: 'StartTime',
        label: '--',
       
      },
      {
        component: 'DatePicker',
        defaultValue: date,
        componentProps: {
          format: 'YYYY-MM-DD',
        },
        fieldName: 'EndTime',
        label: '结束时间',
       
      },
      {
        component: 'TimePicker',
        componentProps: {
          placeholder: '时间',
        },
        fieldName: 'EndTime',
        label: '--',
        
      },
    ],
    // 控制表单是否显示折叠按钮
    showCollapseButton: true,
    submitButtonOptions: {
      content: '查询',
    },
    // 是否在字段值改变时提交表单
    submitOnChange: false,
    // 按下回车时是否提交表单
    submitOnEnter: false,
    wrapperClass: 'grid-cols-1 md:grid-cols-5',
}
const gridOptions: VxeGridProps<RowType> = {
  columns: [
    { field: 'Uid', title: 'id' },
    { field: 'Event', title: '事件类型', formatter: ({ cellValue }) => $t('page.log.event.' + `${cellValue}`) || cellValue },
    { field: 'Label', title: 'Label'},
    { field: 'Param', title: '参数' },
    { field: 'Timestamp', title: '时间', formatter: ({ cellValue }) => new Date(cellValue*1000).toLocaleString()},
  ],
  stripe: true,
  height: 'auto',
  pagerConfig: {},
  proxyConfig: {
    response: {
        total: "total",
        result: "data"
    },
    ajax: {
      query: async ({ page }, formValues) => {
        let Uid = parseInt(formValues.Uid, 10);
        if (Uid == 0) {
          return []
        }
        state.uid = Uid;
        state.Event = formValues.Event;
        return await getUserlogEventApi({
          Id: Uid,
          Event: formValues.Event,
          StartTime: formValues.StartTime,
          EndTime: formValues.EndTime,
          CurrentPage: page.currentPage,
          PageSize: page.pageSize,
        });
      },
    },
  },
  
  rowConfig: {
    isHover: true,
  },
};

const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });

</script>

<template>
  <Page auto-content-height>
    <Grid />
  </Page>
</template>