From 37b67ec651ab9ef809d7f34b471a8ec2a5d90c70 Mon Sep 17 00:00:00 2001
From: ronger <ronger-x@outlook.com>
Date: Fri, 14 Jan 2022 12:01:00 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E7=99=BB=E5=BD=95=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=E6=9F=A5=E7=9C=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/common/user/login-records.vue | 76 ++++++++++++++++++++++++
 pages/user/settings.vue                  |  4 ++
 pages/user/settings/login-record.vue     | 65 ++++++++++++++++++++
 3 files changed, 145 insertions(+)
 create mode 100644 components/common/user/login-records.vue
 create mode 100644 pages/user/settings/login-record.vue

diff --git a/components/common/user/login-records.vue b/components/common/user/login-records.vue
new file mode 100644
index 0000000..0f9354c
--- /dev/null
+++ b/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>
diff --git a/pages/user/settings.vue b/pages/user/settings.vue
index 96020fd..b76ef4a 100644
--- a/pages/user/settings.vue
+++ b/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>
diff --git a/pages/user/settings/login-record.vue b/pages/user/settings/login-record.vue
new file mode 100644
index 0000000..07ad80c
--- /dev/null
+++ b/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>