完成系统日志

src/apis/system1.js

@@ -1,9 +1,9 @@
 import axios from '../utils/request'
 // 系统日志
-export const userLogin = (data) => {
+export const getRZList = (data) => {
   return axios({
     method: 'post',
-    url: '/admin/login',
+    url: '/sys/log/list',
     data
   })
 }

src/views/system/system1.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="system1">
-    <TabList :ind='1'/>
+  <div class="system2">
+    <TabList :ind="1" />
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">
@@ -10,12 +10,56 @@
         </el-breadcrumb>
       </div>
       <div class="conten">
+        <div class="middle">
+          <div class="select">
+            <span>操作事件：</span>
+            <el-input
+              v-model="myData.searchKey"
+              placeholder="请输入"
+              style="width: 217px"
+            ></el-input>
+
+            <el-button style="margin-left: 20px" @click="find">查询</el-button>
+          </div>
+          <!--表格 -->
+          <div class="table">
+            <el-table
+              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+              :data="tableData"
+              border
+              style="width: 100%"
+            >
+              <el-table-column type="index" width="80" label="序号"> </el-table-column>
+              <el-table-column prop="userName" label="账号" width="240">
+              </el-table-column>
+              <el-table-column prop="type" label="操作模块" width="240">
+              </el-table-column>
+              <el-table-column prop="description" label="操作事件">
+              </el-table-column>
+              <el-table-column prop="createTime" label="操作时间" width="240"> </el-table-column>
+            </el-table>
+          </div>
+                        <!-- 分页器 -->
+          <div class="paging">
+            <el-pagination
+              :current-page='myData.pageNum'
+              @current-change='currentChange'
+              @size-change='sizeChange'
+              background
+              layout="prev, pager, next,sizes,jumper"
+              :total="total"
+            >
+            </el-pagination>
+          </div>
+
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { getRZList } from '@/apis/system1'
 import TabList from '@/components/tabLeft4.vue'
 export default {
   name: 'system1',
@@ -24,7 +68,16 @@ export default {
   data () {
     // 这里存放数据
     return {
-
+      total: 0,
+      myData: {
+        endTime: '',
+        pageNum: 1,
+        pageSize: 10,
+        searchKey: '',
+        startTime: ''
+      },
+      // 表格数据
+      tableData: []
     }
   },
   // 监听属性 类似于data概念
@@ -33,12 +86,34 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-
+    // 分页器
+    currentChange (val) {
+      this.myData.pageNum = val
+      this.getRZList(this.myData)
+    },
+    sizeChange (val) {
+      this.myData.pageSize = val
+      this.getRZList(this.myData)
+    },
+    // 点击查找
+    find () {
+      this.myData.pageNum = 1
+      this.getRZList(this.myData)
+    },
+    // 封装获取用户列表方法
+    async getRZList (data) {
+      const res = await getRZList(data)
+      this.total = res.data.total
+      this.tableData = res.data.list
+    }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {},
+  mounted () {
+    // 调用获取列表方法
+    this.getRZList(this.myData)
+  },
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
   beforeUpdate () {}, // 生命周期 - 更新之前
@@ -50,8 +125,8 @@ export default {
 </script>
 <style lang='less' scoped>
 //@import url(); 引入公共css类
-.system1 {
-    /deep/#mytitle>span{
+.system2 {
+  /deep/#mytitle > span {
     font-weight: 800;
   }
   display: flex;
@@ -69,11 +144,40 @@ export default {
       background-color: #fff;
     }
   }
+
   .conten {
     flex: 1;
     background-color: #fff;
     margin: 20px 20px 40px;
-    padding: 30px 60px 0;
+    .middle {
+      position: relative;
+              .paging {
+          position: absolute;
+          bottom: 15px;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+      width: 100%;
+      height: 100%;
+      background-color: #fff;
+      .select {
+        color: black;
+        padding: 30px 0 0 0;
+        & > span {
+          margin-left: 30px;
+        }
+      }
+      .table {
+        /deep/.el-table__body-wrapper{
+          max-width: 1634px;
+          max-height: 560px;
+          overflow-y: auto;
+        }
+        // max-height: 640px;
+        // overflow: auto;
+        padding: 24px;
+      }
+    }
   }
 }
 </style>