<template>
|
<div class="sub-account">
|
<div class="search">
|
<div class="left">
|
<div class="id">
|
用户名/姓名/手机号
|
<el-input v-model="inputText" placeholder="请输入" clearable></el-input>
|
</div>
|
</div>
|
|
<div class="right">
|
<div class="button searchBtn" @click="lookUp">搜索</div>
|
</div>
|
</div>
|
<div class="table-area">
|
<el-table
|
id="multipleTable"
|
ref="multipleTable"
|
:data="dataList"
|
:fit="true"
|
:default-sort="{ prop: 'createTime', order: 'descending' }"
|
v-loading="tbLoading"
|
>
|
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
|
<el-table-column prop="username" label="用户名" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="trueName" label="姓名" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="phoneNum" label="手机号" show-overflow-tooltip></el-table-column>
|
<el-table-column label="登录结果" width="100">
|
<template slot-scope="scope">
|
<div v-if="scope.row.success" class="status green ">成功</div>
|
<div v-else class="status">失败</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createTime" label="登录时间" show-overflow-tooltip></el-table-column>
|
</el-table>
|
<div>
|
<el-pagination
|
@current-change="refrash"
|
@size-change="handleSizeChange"
|
:current-page="page"
|
:page-size="size"
|
layout="total, sizes, prev, pager, next, jumper"
|
:page-sizes="[5, 10, 15, 20, 25]"
|
:total="total"
|
background
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { findEntryLog } from "@/api/user"
|
|
export default {
|
data() {
|
return {
|
tbLoading: false,
|
dataList: [],
|
inputText: "",
|
page: 1,
|
size: 10, //分页相关
|
total: 0 //总数,
|
}
|
},
|
async created() {
|
this.lookUp()
|
},
|
mounted() {},
|
methods: {
|
handleSizeChange(size) {
|
this.size = size
|
this.lookUp()
|
},
|
//分页功能
|
refrash(page) {
|
this.page = page
|
this.lookUp()
|
},
|
reset() {
|
this.inputText = ""
|
this.timeLength = null
|
},
|
async lookUp() {
|
this.tbLoading = true
|
|
if (this.inputText.length) {
|
this.inputText = this.inputText.trim()
|
}
|
|
let res = await findEntryLog({ page: this.page, size: this.size, inputText: this.inputText })
|
this.dataList = res.data.list
|
this.total = res.data.total
|
|
setTimeout(() => {
|
this.tbLoading = false
|
}, 200)
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.sub-account {
|
padding: 20px;
|
.searchBtn {
|
width: 50px;
|
height: 25px;
|
line-height: 25px;
|
font-size: 14px;
|
text-align: center;
|
color: #fff;
|
background: #0065ff;
|
margin-right: 20px;
|
}
|
.right {
|
display: flex;
|
}
|
.search {
|
display: flex;
|
font-size: 14px;
|
border-bottom: 1px solid #e9ebee;
|
margin-top: 30px;
|
padding-bottom: 20px;
|
.left,
|
.right,
|
.id,
|
.time,
|
.cluster {
|
display: flex;
|
align-items: center;
|
.el-select {
|
width: auto;
|
}
|
}
|
|
.id .el-input ::v-deep {
|
width: 200px;
|
}
|
|
.cluster::v-deep .el-input {
|
width: 300px;
|
|
margin-left: 10px;
|
margin-right: 20px;
|
.el-input__icon {
|
line-height: 32px;
|
}
|
input {
|
border-radius: 0;
|
|
&::-webkit-input-placeholder {
|
color: #999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.el-input ::v-deep {
|
width: 200px;
|
margin-left: 10px;
|
margin-right: 20px;
|
height: 32px;
|
line-height: 32px;
|
input {
|
border-radius: 0;
|
height: 32px;
|
line-height: 32px;
|
&::-webkit-input-placeholder {
|
color: #999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.el-date-editor {
|
width: 318px;
|
height: 40px;
|
margin-left: 10px;
|
margin-right: 20px;
|
border-radius: 0;
|
|
&::-webkit-input-placeholder {
|
color: #999;
|
}
|
|
&.is-active {
|
border-color: #0065ff;
|
}
|
}
|
}
|
.el-table ::v-deep {
|
background-color: rgb(233, 235, 238);
|
padding: 1px;
|
|
&::after {
|
display: none;
|
}
|
|
td.index .cell {
|
padding-left: 16px;
|
padding-right: 4px;
|
}
|
|
.has-gutter tr th {
|
background: #f0f3f5;
|
font-size: 16px;
|
color: #3d3d3d;
|
font-weight: 700;
|
}
|
|
td .cell {
|
color: #3d3d3d;
|
}
|
|
tr:hover > td.el-table__cell {
|
background-color: #fff;
|
}
|
|
.el-table__row--striped .el-table__cell {
|
background-color: #f0f5fa !important;
|
}
|
tr:hover > td.el-table__cell {
|
background-color: #fff;
|
}
|
|
.el-table__row--striped .el-table__cell {
|
background-color: #f0f5fa !important;
|
}
|
|
.status {
|
color: #ff4b33;
|
|
&.green {
|
color: #36b24a;
|
}
|
}
|
|
.option {
|
margin-right: 10px;
|
font-size: 14px;
|
color: rgb(0, 101, 255);
|
cursor: pointer;
|
}
|
}
|
|
.el-pagination ::v-deep {
|
margin-top: 30px;
|
text-align: center;
|
height: 24px;
|
.el-pagination__sizes {
|
margin-right: 0;
|
}
|
|
button {
|
margin: 0;
|
background-color: #fff;
|
border: 1px solid #c0c5cc;
|
border-radius: 2px;
|
}
|
|
.number {
|
background-color: #fff;
|
|
&:not(.disabled):hover {
|
color: #0065ff;
|
}
|
|
&:not(.disabled).active {
|
background-color: #0065ff;
|
color: #fff;
|
}
|
}
|
|
.el-input .el-input__inner {
|
padding-left: 0;
|
|
&:hover,
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.el-select ::v-deep {
|
.el-select__tags-text {
|
color: #3d3d3d;
|
}
|
}
|
}
|
</style>
|
|
<style>
|
.el-date-table td.start-date span,
|
.el-date-table td.end-date span {
|
background-color: #0065ff;
|
}
|
|
.el-button--text span {
|
color: #0065ff;
|
}
|
|
.el-button.is-plain:hover,
|
.el-button.is-plain:focus {
|
color: #0065ff;
|
border-color: #0065ff;
|
}
|
</style>
|
