<template>
<div
v-show="showEdit"
style="display:flex;flex-direction:column;position: absolute;right: 30px;z-index: 3000;border-radius: 4px;border: 1px solid #A1E6D8;
top: 60px;width: 560px;height: 400px;background: white"
>
<header class="multimod-tpbar" style="padding: 0;margin: 0">
<div style="border-right: 1px solid var(--table-bdc);width: 55%;height: 100%;">
<span style="line-height: 48px;color: var(--green)" class="ml1e fz12">可选学生</span>
</div>
<div style="width: 45%">
<span class="ml1e fz12" style="color: var(--green)">已选学生({{checkedGroup.length}})</span>
</div>
</header>
<main style="flex: 1;">
<div
style="width: 55%; height: 100%;
border-right: 1px solid var(--table-bdc)"
class="fl-l"
>
<el-select
v-model="gradeValue"
style="margin: 0 13px"
popper-class="el_select"
placeholder="请选择"
>
<el-option
v-for="item in gradeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<div style="margin: 10px auto 0;height:280px;width: 300px;">
<div
class="fl-l list_index_div"
style="width: 20px;height:280px;color: var(--black);overflow-y: auto"
>
<ul class="list_index" ref="listIndex">
<!-- <li v-for="item in userIndex" @click="setScroll" @touchstart="setScroll">-->
<!-- -->
<!-- {{item}}-->
<!-- </li>-->
<li
ref="listIndexLi"
class="listIndexLi"
v-for="item in letters"
@click="setScroll"
:key="item"
>{{item}}</li>
</ul>
</div>
<div class="fl-l ml10" style="width: 260px;height:280px;">
<el-checkbox v-model="checkedAll" @change="handleCheckedChange">全选</el-checkbox>
<el-input placeholder="请输入内容" @change="inputChange" v-model="inputContent">
<i slot="suffix" class="el-input__icon el-icon-search"></i>
</el-input>
<div id="list" ref="list">
<ul class="list_user" ref="listUser" @touchmove="bMove=true">
<el-checkbox-group v-model="checkedGroup" ref="checkedGroup">
<li class="list_user_li" v-for="item in userData" :key="item">
<p
class="fz12"
style="padding:2px 0px;
color: var(--black)"
>{{item.index}}</p>
<el-checkbox
style="width: 30%"
:label="user.name"
v-for="user in item.users"
:key="user"
></el-checkbox>
</li>
</el-checkbox-group>
</ul>
</div>
</div>
</div>
</div>
<div style="width: 45%" class="fl-l">
<ul style="margin: 0 auto">
<li v-for="item in checkedGroup" :key="item">
<span
class="fl-l fz14"
style="border: 1px solid #ccc;width: 70px;margin-left: 2px;text-align: center"
>
{{item}}
<i
class="el-icon-circle-close"
style="line-height:21px;color: var(--blue);float: right;text-align: center"
@click="removeSelected(item)"
></i>
</span>
</li>
</ul>
</div>
</main>
<footer style="height: 48px;border-top: 1px solid var(--table-bdc);">
<button class="multimod-btbar-btn multimod-btbar-btn_op fl-r mr1e" @click="toggoleEdit">确认</button>
<button class="multimod-btbar-btn multimod-btbar-btn_op fl-r mr1e" @click="toggoleEdit">取消</button>
</footer>
</div>
</template>
<script>
export default {
data () {
return {
letters: ["#",
"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q",
"R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
showEdit: false,
checkedAll: false,
checkedGroup: [],
gradeOptions: [
{
value: '选项1',
label: '一年级'
}, {
value: '选项2',
label: '二年级'
}, {
value: '选项3',
label: '三年级'
}],
gradeValue: '',
userData: [
{
"index": "A",
"users": [
{ "name": "安以轩", "tel": "15538009230" },
{ "name": "哎哟喂", "tel": "15538009231" },
{ "name": "艾玛", "tel": "15538009232" }
]
},
{
"index": "B",
"users": [
{ "name": "边启立", "tel": "15538009233" },
{ "name": "波动", "tel": "15538009234" },
{ "name": "毕福剑", "tel": "15538009235" }
]
},
{
"index": "C",
"users": [
{ "name": "春晓", "tel": "15538009236" },
{ "name": "春苗", "tel": "15538009237" },
{ "name": "锄禾", "tel": "15538009238" }
]
},
{
"index": "D",
"users": [
{ "name": "电极", "tel": "15538009239" },
{ "name": "d", "tel": "15538009210" },
{ "name": "d3", "tel": "15538009211" }
]
},
{
"index": "E",
"users": [
{ "name": "e1", "tel": "15538009212" },
{ "name": "e2", "tel": "15538009213" },
{ "name": "e3", "tel": "15538009214" }
]
},
{
"index": "F",
"users": [
{ "name": "f1", "tel": "15538009215" },
{ "name": "f2", "tel": "15538009216" },
{ "name": "f3", "tel": "15538009217" }
]
}
],
}
},
methods: {
//将数组名字排序变成自己所需要的数据
data_letter_sort (data, field) {
var letter_reg = /^[A-Z]$/;
var list = [];
for (var i = 0; i < data.length; i++) {
// 添加 # 分组，用来 存放 首字母不能 转为 大写英文的 数据
list['#'] = [];
// 首字母 转 大写英文
var letter = (data[i][field]).substr(0, 1).toUpperCase();
// 是否 大写 英文 字母
if (!letter_reg.test(letter)) {
letter = '#';
}
// 创建 字母 分组
if (!(letter in list)) {
list[letter] = [];
}
// 字母 分组 添加 数据
list[letter].push(data[i]);
}
// 转换 格式 进行 排序；
var resault = [];
for (var key in list) {
resault.push({
index: key,
users: list[key]
});
}
// console.log(resault);
resault.sort(function (x, y) {
return x.index.charCodeAt(0) - y.index.charCodeAt(0);
});
return resault
// // # 号分组 放最后
// var last_arr = resault[0];
// resault.splice(0, 1);
// resault.push(last_arr);
//
// // 转换 数据 格式
// var json_sort = {}
// for (var i = 0; i < resault.length; i++) {
// json_sort[resault[i].index] = resault[i].list;
// }
// return json_sort;
},
// 点击时触发
setScroll: function (ev) {
var aP = this.$refs.listUser.getElementsByTagName("p");
console.log(ev, aP);
for (var i = 0; i < aP.length; i++) {
// console.log(aP[i].innerHTML)
// console.log(ev.target.innerHTML);
if (aP[i].innerHTML == ev.target.innerText) {
this.$refs.list.scrollTop = aP[i].offsetTop;
// document.body.scrollTop = aP[i].offsetTop;
console.log(this.$refs.list.scrollTop);
document.documentElement.scrollTop = aP[i].offsetTop;
}
}
},
inputChange (val) {
var strFirstUpCase = pinyin(val)[0][0].substr(0, 1).toUpperCase()
var aP = this.$refs.listUser.getElementsByTagName("p");
for (var i = 0; i < aP.length; i++) {
if (aP[i].innerHTML == strFirstUpCase) {
this.$refs.list.scrollTop = aP[i].offsetTop;
console.log(this.$refs.list.scrollTop);
document.documentElement.scrollTop = aP[i].offsetTop;
}
}
},
handleCheckedChange (val) {
if (this.checkedAll === true) {
for (var i = 0; i < this.userData.length; i++) {
var userData = this.userData[i].users
// console.log(userData);
for (var j = 0; j < userData.length; j++) {
if (this.checkedGroup.indexOf(userData[j].name) === -1) {
this.checkedGroup.push(userData[j].name)
}
}
}
} else {
this.checkedGroup = []
}
},
removeSelected (val) {
this.checkedGroup.splice(this.checkedGroup.indexOf(val), 1)
},
haveLetter () {
var userData = this.userData
var lis = this.$refs.listIndexLi
//所有li
for (var i = 0; i < lis.length; i++) {
// console.log(lis[i].innerText.replace(/\s*/g,""));
//所有用户数据
for (var j = 0; j < userData.length; j++) {
// console.log(userData[j].index);
if (lis[i].innerText.replace(/\s*/g, "") === userData[j].index) {
lis[i].setAttribute('class', 'has')
}
}
}
},
},
mounted () {
//界面渲染完事之后再去改变字母
this.haveLetter()
}
}
</script>
<style>
#list {
position: relative;
overflow-y: scroll;
top: 5px;
height: 245px;
}
#list::-webkit-scrollbar {
display: none;
}
.list_index_div::-webkit-scrollbar {
display: none;
}
#list .list_user ul {
padding: 5px 0;
}
#list .list_user ul li {
height: 20px;
display: inline-block;
width: 50%;
}
.list_index {
margin: 0 auto;
font-size: 12px;
}
.list_index li {
text-align: center;
margin-top: 5px;
color: #cccccc;
}
.list_index li.has {
color: var(--black);
}
.list_index li:hover {
color: var(--blue);
}
</style>