<template>
|
<div class="user-list">
|
<van-nav-bar title="人员列表" @click-left="$router.back()" left-arrow fixed safe-area-inset-top placeholder>
|
</van-nav-bar>
|
<van-empty description="暂无人员" v-if='Object.keys(frindslist)==""' />
|
<div v-else>
|
<van-index-bar :sticky="false" highlight-color="#4B88F9">
|
<div v-for="(item,key) in frindslist" :key='key'>
|
<van-index-anchor :index="key" />
|
<div v-if="item">
|
<van-cell class="cell" v-for="(user,index) in item" :key='index' @click="selectUser(user)">
|
<div class="friends-name">{{user.UName}}</div>
|
</van-cell>
|
</div>
|
</div>
|
</van-index-bar>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getUserInfoByStationId,
|
} from '@/assets/js/api'
|
export default {
|
data() {
|
return {
|
frindslist: {}, //存储排序后的人员列表
|
}
|
},
|
methods: {
|
loadUserList() {
|
let stationId = this.$route.query.stationId;
|
let postData = {
|
StationId: stationId
|
}
|
getUserInfoByStationId(postData).then((res) => {
|
let resData = JSON.parse(res.data.result)
|
if (resData.code == 1) {
|
this.sortUserData(resData.data);
|
}
|
}).catch((err) => {
|
console.log(err)
|
});
|
},
|
//把返回的数据整理成列表需要的数据
|
sortUserData(data) {
|
var list = data || [];
|
/******通讯录成员排序按字母 start******/
|
const Letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
let obj = {}; //存储好友数据 {"A":[{},{}],"Y":[{},{}]}
|
//1.给数据中添加pinyin(拼音)和initial(首字母)字段，将数据根据首字母归类在obj中
|
for (var i = 0; i < list.length; i++) {
|
list[i].pinyin = this.$units.convertToPinyin.pinyin.getFullChars(list[i].UName); // 名称转换为拼音
|
var initial = list[i].pinyin.substr(0, 1).toUpperCase(); //首字母
|
list[i].initial = Letters.indexOf(initial) > -1 ? initial : '#'; //首字母不为汉字或字母时归到#中
|
if (!obj[initial]) obj[initial] = [];
|
obj[initial].push(list[i]);
|
}
|
var initialArr = Object.keys(obj).sort(); //获取到key值并对key值排序 (3) ["H", "L", "Y"]
|
var result = [];
|
//2.给values[]排序
|
for (var i = 0; i < initialArr.length; i++) {
|
var thisInitial = initialArr[i]; // "H"
|
result = obj[thisInitial].sort(this.compare('UName')); //排序
|
obj[thisInitial] = result; //排序后重新把值赋给键值对
|
}
|
//3.根据排序后的key遍历对象并重新赋值
|
initialArr.forEach(function (key) {
|
obj[key]
|
})
|
this.frindslist = this.objKeySort(obj);
|
// console.log("obj:" + JSON.stringify(this.frindslist));
|
/******通讯录成员排序按字母 end******/
|
},
|
//字母类中每个排序
|
compare(property) {
|
return function (a, b) {
|
var arr = [a[property], b[property]].sort();
|
return arr[0] != a[property] ? 1 : -1;
|
}
|
},
|
//对象整体根据字母顺序排序排序
|
objKeySort(obj) { //排序的函数
|
var newkey = Object.keys(obj).sort();
|
//先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组
|
var newObj = {}; //创建一个新的对象，用于存放排好序的键值对
|
for (var i = 0; i < newkey.length; i++) { //遍历newkey数组
|
newObj[newkey[i]] = obj[newkey[i]]; //向新创建的对象中按照排好的顺序依次增加键值对
|
}
|
return newObj; //返回排好序的新对象
|
},
|
//选择人员
|
selectUser(user) {
|
sessionStorage.setItem('assignUser', JSON.stringify(user))
|
this.$router.back();
|
}
|
},
|
mounted() {
|
this.loadUserList()
|
},
|
}
|
</script>
|
|
<style scoped>
|
.user-list {
|
width: 100%;
|
min-height: 100%;
|
background: #F5F5F5;
|
}
|
</style>
|
