✨ 登录记录查看

components/common/user/login-records.vue

@@ -0,0 +1,76 @@
+<template>
+  <el-row>
+    <el-col>
+      <h1>登录记录</h1>
+    </el-col>
+    <el-col>
+      <el-table
+        :data="records.records"
+        style="width: 100%">
+        <el-table-column
+          label="登录 IP"
+          prop="loginIp"
+          width="200">
+        </el-table-column>
+        <el-table-column
+          label="浏览器"
+          width="180"
+          prop="loginBrowser">
+        </el-table-column>
+        <el-table-column
+          label="登录时间"
+          width="180"
+          prop="createdTime">
+        </el-table-column>
+      </el-table>
+    </el-col>
+    <el-col>
+      <el-pagination
+        :hide-on-single-page="true"
+        @current-change="currentChange"
+        :current-page="records.pagination.currentPage"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="records.pagination.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="records.pagination.total">
+      </el-pagination>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: "loginRecords",
+  props: {
+    idUser: '',
+    records: {
+      type: Object
+    }
+  },
+  watch: {
+    idUser() {
+      this.resetSearchDate()
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    currentChange(page) {
+      let _ts = this;
+      let startDate = _ts.searchDate[0]
+      let endDate = _ts.searchDate[1]
+      let search = {
+        page: page,
+        startDate: startDate,
+        endDate: endDate
+      }
+      _ts.$emit('currentChange', search);
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

pages/user/settings.vue

@@ -18,6 +18,10 @@
             <i class="el-icon-unlock"></i>
             <span slot="title">账户安全</span>
           </el-menu-item>
+          <el-menu-item index="login-record">
+            <i class="el-icon-monitor"></i>
+            <span slot="title">登录记录</span>
+          </el-menu-item>
           <el-menu-item v-show="false" index="notification">
             <i class="el-icon-bell"></i>
             <span slot="title">通知方式</span>

pages/user/settings/login-record.vue

@@ -0,0 +1,65 @@
+<template>
+  <el-row>
+    <el-col>
+      <login-records :records="records" :idUser="idUser" @currentChange="handleCurrentChange"></login-records>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import {mapState} from 'vuex';
+import LoginRecords from "@/components/common/user/login-records";
+
+export default {
+  name: "loginRecord",
+  components: {LoginRecords},
+  computed: {
+    ...mapState({
+      idUser: state => state.oauth.idUser
+    })
+  },
+  data() {
+    return {
+      records: {
+        records: [],
+        pagination: {}
+      }
+    }
+  },
+  methods: {
+    handleCurrentChange(search) {
+      let _ts = this;
+      _ts.$axios.$get('api/user-info/login-records', {
+        params: {
+          idUser: _ts.idUser,
+          page: search.page
+        }
+      }).then(function (res) {
+        if (res) {
+          _ts.records = res
+        }
+      })
+    },
+    getData() {
+      let _ts = this
+      _ts.$axios.$get('api/user-info/login-records', {
+        params: {
+          idUser: _ts.idUser
+        }
+      }).then(function (res) {
+        if (res) {
+          _ts.records = res
+        }
+      })
+    }
+  },
+  mounted() {
+    this.$store.commit('setActiveMenu', 'login-record');
+    this.getData();
+  }
+}
+</script>
+
+<style scoped>
+
+</style>