<template>
<div class="box">
<div class="headBox">
<div class="btn-back" v-on:click="closeAddress"></div>
<div class="mc-title">
通讯录
</div>
<div class="mc-right" v-on:click="sureBtn"></div>
</div>
<div class="relatedInstance">
<ul>
<li :class="{'noStaff':entity.child.length==0}" v-for="(entity,index) in entities"
@click="handleTit(index)">
<h3>{{entity.title}}
<b :class="{'checked':allState[index]}" @click.stop="handleTitAll(entity,index)"></b>
</h3>
<ul v-show="entitiesState[index]" @click.stop>
<li v-for="(list,listIndex) in entity.child" @click="childHandle(listIndex,index)">
<b :class="{'checked':childState[index][listIndex]}"></b>
<span>{{list.name}}</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
userCode: localStorage.userCode || '',//用户code
entitiesState: [],//列表展开关闭
childState: [],//选中状态
allState: [],//全选状态
listLen: 0,
onTextState: [],//选中的文本
addressState: [],//选中的职工
entities: [],//data数据
department: [],//部门
}
},
methods: {
closeAddress() {
let state = false;
this.$emit('closeAddress', state)//select事件触发后，自动触发showCityName事件
},
sureBtn() {//确定
let _this = this
_this.onTextState = [];
_this.addressState = [];
for (var i = 0; i < _this.childState.length; i++) {
for (var j = 0; j < _this.childState[i].length; j++) {
if (_this.childState[i][j] === true) {
_this.onTextState.push(_this.entities[i].child[j].name)
_this.addressState.push(_this.entities[i].child[j])
}
}
}
let dataList = {
nameData: _this.onTextState,
addressState: _this.addressState,
showState: false
};
this.$emit('showName', dataList)
},
handleTit(i) {//点击父级
var _this = this;
let state = this.entitiesState;
this.$set(state, i, !state[i]);
/*for(let a in this.entitiesState){
if(a!=i){
this.$set(state,a,false);
}
}*///增加判断，改变同级的展开状态
},
childHandle(i, pi) {//单选
let child = this.childState;
if (child[pi][i]) this.allState[pi] = false;
this.$set(child[pi], i, !child[pi][i]);
if (this.childState[pi][i]) this.checkList(this.childState[pi], pi);
},
handleTitAll(item, pi) {//全选
var _this = this;
this.listLen = item.child.length;
if (this.listLen == 0) {
_this.$alert("本部门暂无成员");
} else {
let child = this.childState[pi],
allState = this.allState;
for (let i = 0; i < this.listLen; i++) {
this.$set(child, i, !allState[pi]);
}
this.$set(allState, pi, !allState[pi]);
}
},
checkList(child, pi) {
let allState = this.allState,
len = this.entities[pi].child.length;
for (let i = 0; i < len; i++) {
if (!child[i]) return;
}
this.$set(allState, pi, true);
}
},
created() {
var _this = this;
var deptN = 0;
var deptL = 0;
//根据用户code获取用户所在学校所有的部门
var userCode = _this.userCode;
ContactsService.getTeachers(userCode, function (res) {
var deptList = JSON.parse(res.responseText).rows;
deptL = deptList.length;
//获取用户成员
function getUsers() {
var deptCode = deptList[deptN].field2;
var deptName = deptList[deptN].field3;
ContactsService.getUsersByDepartment(deptCode, function (res) {
if (res.responseCode == 0) {
deptN++
var staff = JSON.parse(res.responseText).rows;
var child = [];
for (var i = 0; i < staff.length; i++) {
let children = {
name: staff[i].field4,
code: staff[i].field12
}
child.push(children)
}
let entities = _this.entities || new Array();
let deptItem = {
deptCode: deptCode,
title: deptName,
child: child,
}
entities.push(deptItem);
_this.entities = entities;
let len = _this.entities.length;
_this.listLen = len;
for (let i = 0; i < len; i++) {
_this.$set(_this.childState, i, [])
}
if (deptN < deptL) {
getUsers()
}
} else {
// _this.$alert(res.responseText)
}
});
}
if (deptL > 0) getUsers();
});
}
}
</script>
<style scoped>
.box {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1000;
background: #f6f6f6;
}
/*返回*/
.box .headBox {
height: 40px;
line-height: 40px;
background-color: #3DA3F7;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
}
.box .btn-back {
width: 15%;
height: 40px;
float: left;
background: url('../assets/images/iconfont-fanhui.png') no-repeat 50% 10px;
background-size: 20px auto;
}
.box .mc-title {
width: 70%;
height: 40px;
float: left;
color: #fff;
text-align: center;
font-size: 16px
}
.box .mc-title span {
text-align: center;
}
.box .mc-right {
width: 15%;
height: 40px;
float: right;
background: url('../assets/images/iconfont-duihao.png') no-repeat 50% 10px;
background-size: 20px auto;
}
.box .relatedInstance {
width: 100%;
height: 100%;
padding-top: 40px;
position: static;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.box .relatedInstance ul {
padding: 0;
margin: 0;
list-style: none;
}
.box .relatedInstance > ul > li {
border-bottom: 1px solid #e3e3e3;
overflow-y: auto;
}
.box .relatedInstance > ul > li > h3 {
background: #eeeeee;
color: #000;
font-weight: normal;
font-size: 14px;
line-height: 40px;
text-indent: 14px;
}
.box .noStaff > h3 {
color: #999 !important;
}
.box .relatedInstance > ul > li > ul > li {
padding-left: 22px;
overflow: hidden;
width: 100%;
font-size: 14px;
color: #666;
line-height: 40px;
min-height: 40px;
border-bottom: 1px solid rgb(243, 234, 234);
}
.box .relatedInstance > ul > li > ul > li {
word-wrap: break-word;
}
.box .relatedInstance li h3 span {
float: right;
line-height: 26px;
margin-right: 5px;
}
.box .relatedInstance li ul {
overflow: hidden;
}
.box .relatedInstance li h3 {
position: relative;
}
.box .relatedInstance li li {
position: relative;
}
.box .relatedInstance li h3 b, .relatedInstance li li b {
position: absolute;
top: 13px;
right: 5px;
vertical-align: middle;
width: 18px;
height: 18px;
background: url(../assets/images/iconfont-xuanzhong-inactive.png) no-repeat;
background-size: 14px auto;
border: none;
cursor: pointer;
margin-right: 5px;
}
.box .relatedInstance li h3 b.checked, .relatedInstance li li b.checked {
background: url(../assets/images/iconfont-xuanzhong-active.png) no-repeat;
background-size: 14px auto;
}
</style>
网友评论