初始版本提交

src/views/system/log/index.vue

@@ -0,0 +1,202 @@
+<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>