<template>
|
<view class="container">
|
<search-bar @confirm="search" placeholder="输入员工姓名、手机号"></search-bar>
|
<view class="member-list flex align-center" v-for="(item, index) in list" @click="checkOnchange(item)">
|
<image :src="item.photo?item.photo:'../../static/images/default-avatar.png'" mode="" class="avatar"></image>
|
<view class="flex-1 flex align-center justify-between member-list-con">
|
<view class="flex flex-v">
|
<text>
|
<text>{{item.name}}</text>
|
<text class="vip-level" v-if="item.roleName">{{item.roleName.split(',')[0]}}</text>
|
</text>
|
<text class="font-13 gray mt-10" v-if="item.telphone">{{$utils.encryptAccount(item.telphone)}}</text>
|
</view>
|
<text class="iconfont"
|
:class="item.isCheck?'iconxuanzhong blue':'iconweixuanzhong gray'" ></text>
|
</view>
|
</view>
|
<no-record :isShow="!list.length"></no-record>
|
<view class="footer">
|
<text>已选：{{selectItems.length?selectItems.length:0}}人</text>
|
<button class="blue-btn btn mr-0" @click="confirm">确定</button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import searchBar from '../../components/searchBar/index.vue';
|
export default {
|
components:{
|
searchBar
|
},
|
data() {
|
return {
|
queryKey: '',
|
list: [],
|
selectIds: '',
|
selectItems: [],
|
multiSelect: false, //单选/多选，默认多选
|
};
|
},
|
onLoad(options) {
|
// 选中的id，逗号分隔
|
if(options.selectId!='null'){
|
this.selectIds = options.selectId
|
}
|
if(options.multiSelect){
|
this.multiSelect = new Boolean(options.multiSelect);
|
}
|
this.loadMemberList()
|
},
|
methods:{
|
search(val){
|
this.queryKey = val;
|
this.loadMemberList();
|
},
|
loadMemberList(){
|
let selectedArr = this.selectIds?this.selectIds.split(','):[];
|
this.$httpUtils.request('/api/user/findAllUsers', {
|
queryKey: this.queryKey
|
}, 'POST').then((res) => {
|
if(res.status == 200){
|
this.list = res.rows.map((item) => {
|
let index = this.selectItems.findIndex((op) => {
|
return op.id == item.id
|
});
|
if(this.selectIds && selectedArr.includes(item.id.toString())){
|
if(index == -1){
|
this.selectItems.push(item);
|
}
|
return Object.assign(item, {isCheck: true})
|
}
|
return Object.assign(item, {isCheck: false})
|
});
|
}
|
})
|
},
|
checkOnchange(item){
|
if(this.multiSelect){
|
this.multiChange(item)
|
}else{
|
this.singChange(item)
|
}
|
},
|
singChange(item){
|
if(!item.isCheck){
|
this.list.forEach((op) => {
|
op.isCheck = false;
|
});
|
item.isCheck = true;
|
this.selectItems = [item];
|
}else{
|
item.isCheck = false;
|
this.selectItems = [];
|
}
|
},
|
multiChange(item){
|
let index = this.selectItems.findIndex((op) => {
|
return op.id == item.id
|
});
|
if(!item.isCheck){
|
item.isCheck = true;
|
this.selectItems.push(item);
|
}else{
|
item.isCheck = false;
|
this.selectItems.splice(index,1);
|
}
|
},
|
confirm(){
|
let pages = getCurrentPages();
|
let prevPage = pages[ pages.length - 2 ];
|
if(this.selectItems.length){
|
prevPage.$vm.setData && prevPage.$vm.setData(this.selectItems);
|
}
|
uni.navigateBack()
|
}
|
},
|
filters:{
|
formatName(val){
|
if(!val){
|
return '无'
|
}
|
val = val.trim();
|
return val.substr(0, 1)
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.container{
|
padding: 10px 10px 64px;
|
}
|
.sort-wrap{
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
font-size: 13px;
|
}
|
.sort-wrap .iconfont{
|
font-size: 14px;
|
padding-left: 4px;
|
}
|
.avatar{
|
width: 38px;
|
height: 38px;
|
border-radius: 50%;
|
margin-right: 10px;
|
}
|
.first-name{
|
display: inline-block;
|
width: 38px;
|
height: 38px;
|
line-height: 38px;
|
margin-right: 10px;
|
border-radius: 50%;
|
text-align: center;
|
color: #FFFFFF;
|
font-size: 16px;
|
}
|
.member-list{
|
font-size: 14px;
|
border-bottom: 1px solid #EDEAF4;
|
}
|
.member-list-con{
|
padding: 15px 5px 15px 5px;
|
|
}
|
.member-list .iconfont{
|
font-size: 22px;
|
}
|
.member-list .vip-level{
|
border: 1px solid #666;
|
margin-left: 10px;
|
font-size: 12px;
|
border-radius: 12px;
|
padding: 2px 12px;
|
color: #666666;
|
}
|
.footer{
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
background: #FFFFFF;
|
padding: 10px 10px;
|
box-shadow: 0 6px 100px rgba(237,234,244,1);
|
}
|
.footer .btn{
|
border-radius: 20px;
|
line-height: 34px;
|
padding: 0 40px;
|
font-size: 14px;
|
}
|
|
</style>
|
