<style scoped>
|
.title {
|
height: 60px;
|
line-height: 60px;
|
}
|
|
.search {
|
background-color: #fff;
|
height: 80px;
|
display: flex;
|
align-items: center;
|
}
|
|
.search_thing {
|
width: 350px;
|
display: flex;
|
align-items: center;
|
}
|
|
.search_label {
|
width: 110px;
|
font-size: 14px;
|
text-align: right;
|
}
|
|
.search_input {
|
width: calc(100% - 110px);
|
}
|
|
.table {
|
margin-top: 10px;
|
background-color: #fff;
|
width: calc(100% - 40px);
|
height: calc(100% - 60px - 80px - 10px - 40px);
|
padding: 20px;
|
overflow-y: auto;
|
}
|
|
.card {
|
list-style-type: none;
|
display: grid;
|
grid-template-columns: repeat(auto-fit, 320px);
|
/* justify-content: center; */
|
grid-gap: 16px;
|
min-height: 200px;
|
}
|
.card li{
|
width: 320px;
|
/* height: 170px; */
|
border-radius: 8px 8px 8px 8px;
|
box-shadow: 4px 4px 8px 0px rgba(51,51,51,0.04);
|
border: 1px solid #EEEEEE;
|
margin: 0 !important;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
box-sizing: border-box;
|
padding: 26px 16px 16px;
|
font-size: 14px;
|
position: relative;
|
overflow: show;
|
}
|
li .title{
|
width: 147px;
|
height: 20px;
|
background: url(../../../static/img/renyuan-title.svg) no-repeat;
|
position: absolute;
|
top: -6px;
|
left: 50%;
|
transform: translateX(-50%);
|
text-align: center;
|
line-height: 20px;
|
color: #fff;
|
}
|
</style>
|
|
<template>
|
<div class="role_manage">
|
<div>
|
<el-row class="title">
|
<el-col :span="12" style="padding-left: 20px;">人员总览</el-col>
|
</el-row>
|
</div>
|
<div class="search">
|
<div class="search_thing">
|
<div class="search_label">人员名称：</div>
|
<div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="entity.name"></el-input></div>
|
</div>
|
<div class="search_thing" style="padding-left: 30px;">
|
<el-button size="small" @click="refresh()">重 置</el-button>
|
<el-button size="small" type="primary" @click="currentPage= 1,list=[],finishLoding = false,refreshTable()">查 询</el-button>
|
</div>
|
</div>
|
<div class="table" @scroll="scrollFn">
|
<ul v-loading="loading" class="card">
|
<li v-for="(m,i) in list" :key="i">
|
<el-image style="width: 80px;
|
height: 112px;" :src="javaApi+'/img/'+m.pictureUrl">
|
<div slot="error" class="image-error" style="width: 79px;
|
height: 110px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border: 1px solid #EEEEEE;">
|
<i class="el-icon-picture-outline" style="font-size:30px;color:#666666;"></i>
|
</div>
|
</el-image>
|
<el-image style="width: 195px;
|
height: 112px;" :src="javaApi+'/img/'+m.signatureUrl">
|
<div slot="error" class="image-error" style="width: 194px;
|
height: 110px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border: 1px solid #EEEEEE;">
|
<i class="el-icon-picture-outline" style="font-size:30px;color:#666666;"></i>
|
</div>
|
</el-image>
|
<div class="title">{{ m.name }}</div>
|
</li>
|
</ul>
|
<div v-if="list.length<1&&!loading&&!isLoding" style="color:#909399;font-size:14px;text-align: center;margin-top:200px" >暂无数据</div>
|
<div v-if="list.length>0">
|
<el-button
|
v-if="isLoding"
|
type="text"
|
style="display: flex; margin: 0 auto; color: #909399"
|
><i class="el-icon-loading" style="font-size:20px"></i
|
></el-button>
|
<el-button
|
type="text"
|
v-if="finishLoding"
|
style="display: flex; margin: 0 auto; color: #909399"
|
>已经没有更多啦~</el-button
|
>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
entity:{
|
name: null,
|
state:1,
|
orderBy: {field: "id", order: "asc"}
|
},
|
list:[],
|
currentPage: 1, // 当前页
|
pageSize: 16, // 一页16条
|
total: '',
|
loading: true, // 组件loading的展示,默认为true
|
isLoding: false, // 加载中，loading图标,默认为true
|
finishLoding: false // 加载完成，显示已经没有更多了
|
}
|
},
|
created() {
|
this.currentPage = 1;
|
this.list = [];
|
this.refreshTable();
|
},
|
methods: {
|
refreshTable() {
|
if(this.currentPage>1){
|
this.isLoding = true
|
}else{
|
this.loading = true
|
}
|
if(this.list.length==0){
|
window.addEventListener("scroll", this.throttle(this.scrollFn, 20000));
|
}
|
this.$axios.post(this.$api.user.selectUserList,{
|
page: {
|
current: this.currentPage,
|
size: this.pageSize
|
},
|
entity: this.entity
|
}, {
|
headers: {
|
'Content-Type': 'application/json'
|
}
|
}).then(res => {
|
if(res.code==200){
|
this.total = res.data.body.total
|
let list = res.data.body.records;
|
if(list.length==0){
|
this.finishLoding = true;
|
}else{
|
if(list.length<this.pageSize){
|
this.finishLoding = true;
|
}
|
this.list = this.list.concat(list)
|
if(this.total==this.list.length){
|
this.finishLoding = true;
|
}
|
}
|
}
|
this.loading = false
|
this.isLoding = false;
|
})
|
},
|
refresh() {
|
this.currentPage= 1;
|
this.list=[];
|
this.finishLoding = false;
|
this.entity={
|
name: null,
|
state:1,
|
orderBy: {field: "id", order: "asc"}
|
};
|
this.refreshTable()
|
},
|
// 滚动触底加载
|
scrollFn() {
|
let clientHeight = document.documentElement.clientHeight - 18; //可视区域
|
let scrollHeight = document.body.scrollHeight; // 滚动文档高度
|
let scrollTop = parseInt(document.documentElement.scrollTop); // 已滚动的高度
|
let height = 300;
|
if (
|
scrollTop + clientHeight >= scrollHeight - height &&
|
scrollHeight != 0
|
) {
|
if (!this.finishLoding&&this.currentPage*this.pageSize<this.total) {
|
this.currentPage = this.currentPage + 1;
|
this.refreshTable();
|
}
|
} else {
|
return false;
|
}
|
},
|
throttle(fn, wait) {
|
// 封装函数进行节流
|
var timer = null;
|
return function () {
|
var context = this;
|
var args = arguments;
|
if (!timer) {
|
timer = setTimeout(function () {
|
fn.apply(context, args);
|
timer = null;
|
}, wait);
|
}
|
};
|
},
|
},
|
destroyed() {
|
window.removeEventListener("scroll", this.throttle(), false);
|
},
|
}
|
</script>
|
