log list

杨泽宇
1 parent fd7e17f5
Showing 5 changed files with 194 additions and 3 deletions
src/api/user/login/index.ts
src/router/modules/system.ts
src/views/system/log.vue
src/views/user/edit.vue
src/views/user/index.vue
-import request from '../../request'
+import request from '../../request';
+import { deleteEmptyParam } from '@/utils/tool';
  
 /**
  * @description 登录
@@ -35,4 +36,17 @@ export const menuData = async () =&gt; {
     method: 'get',
   })
   return res
+}
+
+/**
+ * @description 日志列表
+ * @function logList
+ */
+export const logList = async (params: any) => {
+  let res: any = await request({
+    url: '/log/list',
+    method: 'get',
+    params: deleteEmptyParam(params)
+  })
+  return res
 }
 \ No newline at end of file
@@ -8,6 +8,11 @@ const system = {
     name: 'system',
     component: () => import('@/views/system/info.vue'),
     meta: { title: '基本信息' }
+  }, {
+    path: 'log',
+    name: 'log',
+    component: () => import('@/views/system/log.vue'),
+    meta: { title: '日志管理' }
   }]
 }
  
+<script setup lang="ts">
+import { reactive, ref, onMounted } from "vue";
+import { parseTime } from "@/utils/tool";
+import { logList } from "@/api/user/login";
+import Pagination from "@/components/Pagination/index.vue";
+interface Form {
+  page: number;
+  pageSize: number;
+  ip: string;
+  userName: string;
+  model: string;
+  type: string;
+  startTime: string;
+  endTime: string;
+}
+interface Params {
+  total: number;
+  query: Form;
+}
+interface Data {
+  loading: boolean;
+  list: any[];
+  params: Params;
+}
+const value1 = ref([])
+let data: Data = reactive({
+  list: [],
+  loading: false,
+  params: {
+    total: 0,
+    query: {
+      page: 1,
+      pageSize: 10,
+      ip: "",
+      userName: "",
+      model: "",
+      type: "",
+      startTime: "",
+      endTime: "",
+    },
+  },
+});
+/**
+ * 列表
+ */
+const getList = async () => {
+  data.loading = true;
+  try {
+    const res = await logList(data.params.query);
+    data.list = res?.data?.data?.list;
+    data.params.total = res?.data?.data?.total;
+  } catch (e) {
+    console.log(e);
+  } finally {
+    data.loading = false;
+  }
+};
+/**
+ * 分页回调
+ * @param {number} page 当前页码
+ * @param {number} size 每页内容条数
+ */
+const handlePageChange = (page, size) => {
+  data.params.query.page = page;
+  data.params.query.pageSize = size;
+  getList();
+};
+/**
+ * 时间组件回调
+ * @param {array} value [开始时间, 结束时间]
+ */
+const handleTimeChange = (value: array) => {
+  console.log(value)
+  data.params.query.startTime = value? value[0]: ''
+  data.params.query.endTime = value? value[1]: ''
+  getList();
+}
+/**
+ * 查询
+ */
+const handleSearch = () => {
+  getList();
+};
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <div class="page-container">
+    <h1>日志管理</h1>
+    <el-row style="padding-bottom: 20px">
+      <el-form :inline="true" label-width="70px">
+        <el-form-item label="IP">
+          <el-input
+            v-model.trim="data.params.query.ip"
+            placeholder="请填写IP"
+            maxlength="15"
+            @change="handleSearch"
+          />
+        </el-form-item>
+        <el-form-item label="用户名">
+          <el-input
+            v-model.trim="data.params.query.userName"
+            placeholder="请填写用户名"
+            maxlength="15"
+            @change="handleSearch"
+          />
+        </el-form-item>
+        <el-form-item label="模块">
+          <el-input
+            v-model.trim="data.params.query.model"
+            placeholder="请填写模块"
+            maxlength="15"
+            @change="handleSearch"
+          />
+        </el-form-item>
+        <el-form-item label="类型">
+          <el-input
+            v-model.trim="data.params.query.type"
+            placeholder="请填写类型"
+            maxlength="15"
+            @change="handleSearch"
+          />
+        </el-form-item>
+        <el-form-item label="时间">
+          <el-date-picker
+            v-model="value1"
+            type="datetimerange"
+            range-separator="至"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            @change="handleTimeChange"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-table
+      :data="data.list"
+      style="width: 100%"
+      border
+      v-loading="data.loading"
+      align="center"
+      element-loading-text="拼命加载中"
+    >
+      <el-table-column prop="id" label="ID" align="center"> </el-table-column>
+      <el-table-column prop="ip" label="IP" align="center"> </el-table-column>
+      <el-table-column prop="type" label="类型" align="center">
+      </el-table-column>
+      <el-table-column prop="model" label="模块" align="center">
+      </el-table-column>
+      <el-table-column prop="themeName" label="内容" align="center">
+      </el-table-column>
+      <el-table-column prop="time" label="操作时间" align="center">
+      </el-table-column>
+      <el-table-column prop="userName" label="操作人" align="center">
+      </el-table-column>
+    </el-table>
+    <Pagination
+      :total="data.params.total"
+      :currentPage="data.params.query.page"
+      :pageSize="data.params.query.pageSize"
+      @pageChange="handlePageChange"
+    ></Pagination>
+  </div>
+</template>
@@ -233,7 +233,7 @@ onMounted(() =&gt; {
           </el-checkbox-group>
         </el-form-item>
         <!-- 当前登录的用户是物业管理员，表单里才有关联小区 -->
-        <el-form-item label="小区" style="width: 100%" v-show="asyncData.userType === '1'">
+        <el-form-item label="小区" style="width: 100%" v-show="asyncData.userType === 1">
           <el-checkbox-group
             v-model="form.communityList"
             @change="(data) => (form.data.neighborhoodIds = data.join(','))"
@@ -191,7 +191,7 @@ onMounted(() =&gt; {
       element-loading-text="拼命加载中"
     >
       <el-table-column prop="id" label="ID" align="center"></el-table-column>
-      <el-table-column prop="userName" label="昵称" align="center">
+      <el-table-column prop="userName" label="用户名" align="center">
       </el-table-column>
       <el-table-column prop="cellphone" label="手机号" align="center">
       </el-table-column>