243 lines
5.0 KiB
Vue
243 lines
5.0 KiB
Vue
<template>
|
||
<view class="content">
|
||
<m-search
|
||
:show="false"
|
||
placeholder="搜索"
|
||
button="none"
|
||
backgroundColor="#efecec"
|
||
v-model="searchStr"
|
||
></m-search>
|
||
<view class="all-select" @tap="allSelect(isAllSelect)">
|
||
{{isAllSelect ? '全选' : '不选'}}
|
||
</view>
|
||
<view class="noData" v-if="noData === true">
|
||
<noData :custom="true"><view class="title">暂无数据,点击重新加载</view></noData>
|
||
</view>
|
||
<view class="list cu-card article dynamic" v-else-if="noData === false">
|
||
<view class="cu-item one" style="padding:0" v-for="(item,index) in peopleListQuery" :key="index" @tap="checkboxChange(item)">
|
||
<view class="one-left-two">
|
||
<view class="checkbox">
|
||
<icon type="success" size="26" v-if="item.checked"/>
|
||
<view class="not-selected" v-if="!item.checked"></view>
|
||
</view>
|
||
<avatar :userName="item.real_name" size="40"></avatar>
|
||
<view class="one-right">
|
||
<view class="name">
|
||
{{item.real_name}}
|
||
<text class="name-right">
|
||
（{{item.user_type}})
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '@/util/request.js';
|
||
import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';
|
||
import noData from '@/components/noData/noData.vue';
|
||
import { sortBy } from '@/static/js/public.js';
|
||
import avatar from "@/pages/components/avatar/avatar.vue";
|
||
export default {
|
||
components: {
|
||
mSearch,
|
||
noData,
|
||
avatar
|
||
},
|
||
data() {
|
||
return {
|
||
//无数据
|
||
noData: false,
|
||
//搜索关键字
|
||
searchStr: '',
|
||
//关注列表
|
||
followList: [],
|
||
flag: true,
|
||
}
|
||
},
|
||
computed: {
|
||
// 模糊查询
|
||
peopleListQuery(){
|
||
return this.followList.filter(people => {
|
||
return people.real_name.indexOf(this.searchStr) != -1;
|
||
})
|
||
},
|
||
//是否全选
|
||
isAllSelect() {
|
||
let result = false;
|
||
this.followList.forEach(item => {
|
||
if (item.checked === false) {
|
||
result = true;
|
||
}
|
||
})
|
||
return result;
|
||
}
|
||
|
||
},
|
||
onNavigationBarButtonTap() {
|
||
let peopleList = [];
|
||
this.followList.forEach(item => {
|
||
if (item.checked === true) {
|
||
peopleList.push(item.user_id)
|
||
}
|
||
})
|
||
console.log(peopleList)
|
||
},
|
||
onPullDownRefresh () {
|
||
this.getFollowPeopleList();
|
||
},
|
||
onShow() {
|
||
this.getFollowPeopleList();
|
||
},
|
||
mounted() {
|
||
this.getFollowPeopleList();
|
||
},
|
||
methods: {
|
||
/**
|
||
* 全选
|
||
*/
|
||
allSelect(isAllSelect) {
|
||
if (isAllSelect) {
|
||
this.followList.forEach(item => {
|
||
item.checked = true;
|
||
})
|
||
} else {
|
||
this.followList.forEach(item => {
|
||
item.checked = false;
|
||
})
|
||
}
|
||
},
|
||
/**
|
||
* 多选框选择
|
||
* @param {Object} e
|
||
*/
|
||
checkboxChange(item) {
|
||
if (item.checked === true) {
|
||
this.$set(item,'checked',false);
|
||
} else {
|
||
this.$set(item,'checked',true);
|
||
}
|
||
},
|
||
/**
|
||
* 获取人员管理列表
|
||
*/
|
||
getFollowPeopleList() {
|
||
request.post("/admin/getPersonnelManagement",{
|
||
userId: uni.getStorageSync("userInfo").user_id
|
||
}).then(res => {
|
||
console.log("人员管理列表",res);
|
||
uni.startPullDownRefresh();
|
||
this.followList = res.data;
|
||
this.noData = this.followList.length === 0 ? true : false;
|
||
if (this.followList.length > 0) {
|
||
this.followList.forEach(item => {
|
||
this.$set(item,"checked",false);
|
||
})
|
||
}
|
||
},err => {
|
||
console.log("err",err)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.all-select{
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 20px;
|
||
color: #0081FF;
|
||
}
|
||
.not-selected{
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
border: 1rpx solid #0081FF;
|
||
border-radius: 50%;
|
||
}
|
||
.checkbox{
|
||
padding: 20rpx 20rpx 20rpx 40rpx;
|
||
}
|
||
.name-right{
|
||
font-weight: normal;
|
||
font-size: 30rpx;
|
||
color: #999;
|
||
}
|
||
.other-info-middle{
|
||
padding: 0 20rpx;
|
||
}
|
||
.other-info{
|
||
display: flex;
|
||
color: #9a9a9a;
|
||
font-size: 30rpx;
|
||
}
|
||
.one-right{
|
||
margin-left: 20rpx;
|
||
}
|
||
.one-left-two{
|
||
display: flex;
|
||
flex-flow: nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.follow-flag{
|
||
border-radius: 10rpx;
|
||
background-color: #afafaf;
|
||
color: #FFFFFF;
|
||
font-size: 30rpx;
|
||
padding: 6rpx 14rpx;
|
||
}
|
||
.ed{
|
||
background-color: #269FDE;
|
||
color: #FFFFFF;
|
||
font-size: 30rpx;
|
||
}
|
||
.one-right .grade{
|
||
font-size: 34rpx;
|
||
color: #909090;
|
||
}
|
||
.one-right .name{
|
||
padding-bottom: 12rpx;
|
||
font-weight: bold;
|
||
}
|
||
.one-right .grade-right{
|
||
margin-left: 16rpx;
|
||
}
|
||
.one-left{
|
||
font-size: 80rpx;
|
||
font-family: 'Courier New', Courier, monospace;
|
||
color: #1296DB;
|
||
border: 5rpx solid #1296DB;
|
||
border-radius: 50%;
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
text-align: center;
|
||
line-height: 140rpx;
|
||
margin: 20rpx;
|
||
}
|
||
.one{
|
||
padding-right: 24rpx!important;
|
||
}
|
||
.one, .grade{
|
||
display: flex!important;
|
||
flex-flow: nowrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.grade .r, .grade .l{
|
||
font-size: 14rpx;
|
||
padding: 5rpx;
|
||
border-radius: 5rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.grade .l{
|
||
background-color: #9DC75F;
|
||
}
|
||
.grade .r{
|
||
background-color: #2D5315;
|
||
}
|
||
</style>
|