feat: 新增登录日志页面

src/api/system/log.ts

@@ -59,3 +59,58 @@ export const deleteOperationLogApi = (data: Array<number>) => {
     }
   });
 };
+
+/** 登录日志查询类 */
+export interface LoginLogQuery extends BasePageQuery {
+  beginTime?: string;
+  endTime?: string;
+  ipAddress?: string;
+  status?: string;
+  username?: string;
+}
+
+/**
+ * 登录日志信息
+ */
+export interface LoginLogsDTO {
+  browser?: string;
+  infoId?: string;
+  ipAddress?: string;
+  loginLocation?: string;
+  loginTime?: Date;
+  msg?: string;
+  operationSystem?: string;
+  /** TODO 这个登录状态的设计很奇怪  需要重构掉 */
+  status?: number;
+  statusStr?: string;
+  username?: string;
+}
+
+/** 获取操作日志列表 */
+export const getLoginLogListApi = (params?: LoginLogQuery) => {
+  return http.request<ResponseData<PageDTO<LoginLogsDTO>>>(
+    "get",
+    "/logs/loginLogs",
+    {
+      params
+    }
+  );
+};
+
+export const exportLoginLogExcelApi = (
+  params: LoginLogQuery,
+  fileName: string
+) => {
+  return http.download("/logs/loginLogs/excel", fileName, {
+    params
+  });
+};
+
+export const deleteLoginLogApi = (data: Array<number>) => {
+  return http.request<ResponseData<void>>("delete", "/logs/loginLogs", {
+    params: {
+      // 需要将数组转换为字符串  否则Axios会将参数变成 noticeIds[0]:1  noticeIds[1]:2 这种格式，后端接收参数不成功
+      ids: data.toString()
+    }
+  });
+};

src/utils/http/index.ts

@@ -87,7 +87,7 @@ class PureHttp {
           "/captchaImage",
           "/getConfig"
         ];
-        return whiteList.some(v => config.url.indexOf(v) > -1)
+        return whiteList.some(v => config.url.endsWith(v))
           ? config
           : new Promise(resolve => {
               const data = getToken();

src/views/system/log/loginLog/index.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useLoginLogHook } from "./utils/hook";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+import Delete from "@iconify-icons/ep/delete";
+import Search from "@iconify-icons/ep/search";
+import Refresh from "@iconify-icons/ep/refresh";
+import { useUserStoreHook } from "@/store/modules/user";
+// TODO 这个导入声明好长  看看如何优化
+import { CommonUtils } from "../../../../utils/common";
+
+/** 组件name最好和菜单表中的router_name一致 */
+defineOptions({
+  name: "SystemOperationLog"
+});
+
+const loginLogStatusList =
+  useUserStoreHook().dictionaryList["sysLoginLog.status"];
+
+const tableRef = ref();
+
+const searchFormRef = ref();
+const {
+  searchFormParams,
+  pageLoading,
+  columns,
+  dataList,
+  pagination,
+  timeRange,
+  defaultSort,
+  multipleSelection,
+  onSearch,
+  resetForm,
+  exportAllExcel,
+  getLoginLogList,
+  handleDelete,
+  handleBulkDelete
+} = useLoginLogHook();
+</script>
+
+<template>
+  <div class="main">
+    <!-- 搜索栏 -->
+    <el-form
+      ref="searchFormRef"
+      :inline="true"
+      :model="searchFormParams"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+    >
+      <el-form-item label="登录IP：" prop="ipAddress">
+        <el-input
+          v-model="searchFormParams.ipAddress"
+          placeholder="请输入IP地址"
+          clearable
+          class="!w-[200px]"
+        />
+      </el-form-item>
+      <el-form-item label="用户名：" prop="username">
+        <el-input
+          v-model="searchFormParams.username"
+          placeholder="请选择用户名称"
+          clearable
+          class="!w-[200px]"
+        />
+      </el-form-item>
+
+      <el-form-item label="状态：" prop="status">
+        <el-select
+          v-model="searchFormParams.status"
+          placeholder="请选择状态"
+          clearable
+          class="!w-[180px]"
+        >
+          <el-option
+            v-for="dict in loginLogStatusList"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <label class="el-form-item__label is-required font-bold"
+          >登录时间：</label
+        >
+        <!-- TODO 如何消除这个v-model的warning -->
+        <el-date-picker
+          class="!w-[240px]"
+          v-model="timeRange"
+          value-format="YYYY-MM-DD"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          :icon="useRenderIcon(Search)"
+          :loading="pageLoading"
+          @click="onSearch"
+        >
+          搜索
+        </el-button>
+        <el-button
+          :icon="useRenderIcon(Refresh)"
+          @click="resetForm(searchFormRef, tableRef)"
+        >
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- table bar 包裹  table -->
+    <PureTableBar title="登录日志列表" :columns="columns" @refresh="onSearch">
+      <!-- 表格操作栏 -->
+      <template #buttons>
+        <el-button
+          type="danger"
+          :icon="useRenderIcon(Delete)"
+          @click="handleBulkDelete(tableRef)"
+        >
+          批量删除
+        </el-button>
+        <el-button
+          type="primary"
+          @click="CommonUtils.exportExcel(columns, dataList, '登录日志列表')"
+          >单页导出</el-button
+        >
+        <el-button type="primary" @click="exportAllExcel">全部导出</el-button>
+      </template>
+      <template v-slot="{ size, dynamicColumns }">
+        <pure-table
+          border
+          ref="tableRef"
+          align-whole="center"
+          showOverflowTooltip
+          table-layout="auto"
+          :loading="pageLoading"
+          :size="size"
+          adaptive
+          :data="dataList"
+          :columns="dynamicColumns"
+          :default-sort="defaultSort"
+          :pagination="pagination"
+          :paginationSmall="size === 'small' ? true : false"
+          :header-cell-style="{
+            background: 'var(--el-table-row-hover-bg-color)',
+            color: 'var(--el-text-color-primary)'
+          }"
+          @page-size-change="getLoginLogList"
+          @page-current-change="getLoginLogList"
+          @sort-change="getLoginLogList"
+          @selection-change="
+            rows => (multipleSelection = rows.map(item => item.logId))
+          "
+        >
+          <template #operation="{ row }">
+            <el-popconfirm
+              :title="`是否确认删除编号为${row.logId}的这条日志`"
+              @confirm="handleDelete(row)"
+            >
+              <template #reference>
+                <el-button
+                  class="reset-margin"
+                  link
+                  type="danger"
+                  :size="size"
+                  :icon="useRenderIcon(Delete)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-popconfirm>
+          </template>
+        </pure-table>
+      </template>
+    </PureTableBar>
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+
+.search-form {
+  :deep(.el-form-item) {
+    margin-bottom: 12px;
+  }
+}
+</style>

src/views/system/log/loginLog/utils/hook.tsx

@@ -0,0 +1,234 @@
+import dayjs from "dayjs";
+import { message } from "@/utils/message";
+import { ElMessageBox, Sort } from "element-plus";
+import {
+  getLoginLogListApi,
+  deleteLoginLogApi,
+  exportLoginLogExcelApi,
+  LoginLogQuery
+} from "@/api/system/log";
+import { reactive, ref, onMounted, toRaw } from "vue";
+import { useUserStoreHook } from "@/store/modules/user";
+import { CommonUtils } from "@/utils/common";
+import { PaginationProps } from "@pureadmin/table";
+
+const loginLogStatusMap =
+  useUserStoreHook().dictionaryMap["sysLoginLog.status"];
+
+export function useLoginLogHook() {
+  const defaultSort: Sort = {
+    prop: "loginTime",
+    order: "descending"
+  };
+
+  const pagination: PaginationProps = {
+    total: 0,
+    pageSize: 10,
+    currentPage: 1,
+    background: true
+  };
+
+  const timeRange = ref([]);
+
+  const searchFormParams = reactive<LoginLogQuery>({
+    ipAddress: undefined,
+    username: undefined,
+    status: undefined,
+    beginTime: undefined,
+    endTime: undefined,
+    timeRangeColumn: defaultSort.prop
+  });
+
+  const dataList = ref([]);
+  const pageLoading = ref(true);
+  const multipleSelection = ref([]);
+
+  const columns: TableColumnList = [
+    {
+      type: "selection",
+      align: "left"
+    },
+    {
+      label: "日志编号",
+      prop: "logId",
+      minWidth: 100
+    },
+    {
+      label: "用户名",
+      prop: "username",
+      minWidth: 120,
+      sortable: "custom"
+    },
+    {
+      label: "IP地址",
+      prop: "ipAddress",
+      minWidth: 120
+    },
+    {
+      label: "登录地点",
+      prop: "loginLocation",
+      minWidth: 120
+    },
+    {
+      label: "操作系统",
+      prop: "operationSystem",
+      minWidth: 120
+    },
+    {
+      label: "浏览器",
+      prop: "browser",
+      minWidth: 120
+    },
+    {
+      label: "状态",
+      prop: "status",
+      minWidth: 120,
+      cellRenderer: ({ row, props }) => (
+        <el-tag
+          size={props.size}
+          type={loginLogStatusMap[row.status].cssTag}
+          effect="plain"
+        >
+          {loginLogStatusMap[row.status].label}
+        </el-tag>
+      )
+    },
+    {
+      label: "状态名",
+      prop: "statusStr",
+      minWidth: 120,
+      hide: true
+    },
+    {
+      label: "登录时间",
+      minWidth: 160,
+      prop: "loginTime",
+      sortable: "custom",
+      formatter: ({ loginTime }) =>
+        dayjs(loginTime).format("YYYY-MM-DD HH:mm:ss")
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 140,
+      slot: "operation"
+    }
+  ];
+
+  async function onSearch() {
+    // 点击搜索的时候 需要重置分页
+    pagination.currentPage = 1;
+    getLoginLogList();
+  }
+
+  function resetForm(formEl, tableRef) {
+    if (!formEl) return;
+    // 清空查询参数
+    formEl.resetFields();
+    // 清空排序
+    searchFormParams.orderColumn = undefined;
+    searchFormParams.orderDirection = undefined;
+    // 清空时间查询  TODO  这块有点繁琐  有可以优化的地方吗？
+    // Form组件的resetFields方法无法清除datepicker里面的数据。
+    timeRange.value = [];
+    searchFormParams.beginTime = undefined;
+    searchFormParams.endTime = undefined;
+    tableRef.getTableRef().clearSort();
+    // 重置分页并查询
+    onSearch();
+  }
+
+  async function getLoginLogList(sort: Sort = defaultSort) {
+    pageLoading.value = true;
+    if (sort != null) {
+      CommonUtils.fillSortParams(searchFormParams, sort);
+    }
+    CommonUtils.fillPaginationParams(searchFormParams, pagination);
+    CommonUtils.fillTimeRangeParams(searchFormParams, timeRange.value);
+
+    const { data } = await getLoginLogListApi(toRaw(searchFormParams)).finally(
+      () => {
+        pageLoading.value = false;
+      }
+    );
+    dataList.value = data.rows;
+    pagination.total = data.total;
+  }
+
+  async function exportAllExcel(sort: Sort = defaultSort) {
+    if (sort != null) {
+      CommonUtils.fillSortParams(searchFormParams, sort);
+    }
+    CommonUtils.fillPaginationParams(searchFormParams, pagination);
+    CommonUtils.fillTimeRangeParams(searchFormParams, timeRange.value);
+
+    exportLoginLogExcelApi(toRaw(searchFormParams), "登录日志.xls");
+  }
+
+  async function handleDelete(row) {
+    await deleteLoginLogApi([row.logId]).then(() => {
+      message(`您删除了操作编号为${row.logId}的这条数据`, {
+        type: "success"
+      });
+      // 刷新列表
+      getLoginLogList();
+    });
+  }
+
+  async function handleBulkDelete(tableRef) {
+    if (multipleSelection.value.length === 0) {
+      message("请选择需要删除的数据", { type: "warning" });
+      return;
+    }
+
+    ElMessageBox.confirm(
+      `确认要<strong>删除</strong>编号为<strong style='color:var(--el-color-primary)'>[ ${multipleSelection.value} ]</strong>的日志吗?`,
+      "系统提示",
+      {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        dangerouslyUseHTMLString: true,
+        draggable: true
+      }
+    )
+      .then(async () => {
+        await deleteLoginLogApi(multipleSelection.value).then(() => {
+          message(`您删除了日志编号为[ ${multipleSelection.value} ]的数据`, {
+            type: "success"
+          });
+          // 刷新列表
+          getLoginLogList();
+        });
+      })
+      .catch(() => {
+        message("取消删除", {
+          type: "info"
+        });
+        // 清空checkbox选择的数据
+        tableRef.getTableRef().clearSelection();
+      });
+  }
+
+  onMounted(() => {
+    getLoginLogList();
+  });
+
+  return {
+    searchFormParams,
+    pageLoading,
+    columns,
+    dataList,
+    pagination,
+    defaultSort,
+    timeRange,
+    multipleSelection,
+    onSearch,
+    exportAllExcel,
+    // exportExcel,
+    getLoginLogList,
+    resetForm,
+    handleDelete,
+    handleBulkDelete
+  };
+}

src/views/system/log/operationLog/index.vue

@@ -133,7 +133,7 @@ const {
     </el-form>
 
     <!-- table bar 包裹  table -->
-    <PureTableBar title="通知列表" :columns="columns" @refresh="onSearch">
+    <PureTableBar title="操作日志列表" :columns="columns" @refresh="onSearch">
       <!-- 表格操作栏 -->
       <template #buttons>
         <el-button

src/views/system/log/operationLog/utils/hook.tsx

@@ -12,6 +12,7 @@ import {
 import { reactive, ref, onMounted, h, toRaw } from "vue";
 import { useUserStoreHook } from "@/store/modules/user";
 import { CommonUtils } from "@/utils/common";
+import { PaginationProps } from "@pureadmin/table";
 
 const operationLogStatusMap =
   useUserStoreHook().dictionaryMap["sysOperationLog.status"];