geg-gas-web/src/views/system/log/index.vue

<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <DeptTree class="w-3/20" @select="handleSelect" />
    <BasicTable @register="registerTable" class="w-17/20">
      <template #toolbar>
        <a-button type="error" v-auth="'log:empty'" @click="handleClear">{{ t('清空') }}</a-button>
        <a-button type="primary" v-auth="'log:export'" @click="handleExport">{{
          t('导出')
        }}</a-button>
        <a-button type="primary" v-auth="'log:batchDelete'" @click="handleDelete">{{
          t('批量删除')
        }}</a-button>
      </template>
    </BasicTable>
    <AccountModal @register="registerModal" @success="handleSuccess" />
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicTable, useTable, FormSchema, BasicColumn } from '/@/components/Table';

  import { PageWrapper } from '/@/components/Page';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { downloadByData } from '/@/utils/file/download';
  import { useModal } from '/@/components/Modal';
  import AccountModal from './components/logModal.vue';
  import DeptTree from './components/DeptTree.vue';
  import { deleteLog, exportLog, getLogPageList } from '/@/api/system/log';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  export const searchFormSchema: FormSchema[] = [
    {
      field: 'keyword',
      label: t('关键字'),
      component: 'Input',
      componentProps: {
        placeholder: t('请输入要查询的关键字'),
      },
      colProps: { lg: 8, md: 24 },
    },
    {
      field: 'createTime',
      label: t('日期'),
      component: 'RangePicker',
      colProps: { lg: 8, md: 24 },
    },
  ];

  export const columns: BasicColumn[] = [
    {
      title: t('操作时间'),
      dataIndex: 'createTime',
      width: 120,
      sorter: true,
      align: 'left',
    },
    {
      title: t('操作用户'),
      dataIndex: 'username',
      width: 120,
      sorter: true,
      align: 'left',
    },
    {
      title: t('IP地址'),
      dataIndex: 'ip',
      width: 120,
      sorter: true,
      align: 'left',
    },
    {
      title: t('类名'),
      dataIndex: 'method',
      width: 120,
      sorter: true,
      align: 'left',
    },
    {
      title: t('操作类型'),
      dataIndex: 'operation',
      width: 180,
      sorter: true,
      align: 'left',
    },
    {
      title: t('耗时/ms'),
      dataIndex: 'time',
      width: 180,
      sorter: true,
      align: 'left',
    },
  ];

  export default defineComponent({
    name: 'LogManagement',
    components: { BasicTable, PageWrapper, DeptTree, AccountModal },
    setup() {
      const { notification } = useMessage();

      const selectDeptId = ref(1);

      const [registerModal, { openModal }] = useModal();
      const [registerTable, { reload, getSelectRowKeys, setProps }] = useTable({
        title: t('登录日志列表'),
        api: getLogPageList,
        rowKey: 'id',
        columns,
        formConfig: {
          rowProps: {
            gutter: 16,
          },
          schemas: searchFormSchema,
          fieldMapToTime: [
            ['createTime', ['createTimeStart', 'createTimeEnd'], 'YYYY-MM-DD', false],
          ],
          actionColOptions: { span: 24 },
          showResetButton: false,
        },
        rowSelection: {
          type: 'checkbox',
        },
        beforeFetch: (params) => {
          //发送请求默认新增  左边树结构所选机构id
          return { ...params, category: selectDeptId.value };
        },
        useSearchForm: true,
        showTableSetting: true,
        striped: false,
        tableSetting: {
          size: false,
          setting: false,
        },
      });
      function handleClear() {
        openModal(true);
      }
      async function handleExport() {
        let rows = warning();
        if (!rows) {
          return;
        }
        try {
          let res = await exportLog(rows);

          downloadByData(
            res.data,
            t('日志列表.xlsx'),
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
          );
        } catch (error) {}
      }

      function handleDelete() {
        let rows = warning();
        if (!rows) {
          return;
        }
        deleteLog(rows).then(() => {
          notification.success({
            message: t('批量删除日志成功'),
            description: t('成功'),
          });
          handleSuccess();
        });
      }
      function warning() {
        const selectRows = getSelectRowKeys();
        if (selectRows.length === 0) {
          notification.warning({
            message: t('警告'),
            description: t('请选择一条数据！'),
          }); //提示消息
          return false;
        } else {
          return selectRows;
        }
      }
      function handleSuccess() {
        reload({ searchInfo: { category: selectDeptId.value } });
      }

      function handleSelect(dept) {
        selectDeptId.value = dept.key;
        setProps({ title: dept.title + t('列表') });
        handleSuccess();
      }

      return {
        registerTable,
        registerModal,
        handleExport,

        handleDelete,
        handleSuccess,
        handleSelect,

        handleClear,
        t,
      };
    },
  });
</script>