import API from '../../../utils/API.js'
import ArrayUtils from '../../../utils/ArrayUtils.js'
import EventBus from '../../../components/NotificationCenter/WxNotificationCenter.js'
let TEACHER_ID = 'teacher';
let TEACHER_DEPARTMENT_ID = 't_department';
let TEACHER_SUBJECT_ID = 't_subject';
let TEACHER_GRADECLASS_ID = 't_gradeclass';
let STUDENT_ID = 'student';
let PARENT_ID = 'parent'
let TEACHER = {
id: TEACHER_ID,
name: '教師',
parentId: '',
checked: false,
isPeople: false,
children: [
{
id: TEACHER_DEPARTMENT_ID,
name: '部門',
parentId: 'teacher',
checked: false,
isPeople: false,
children: []
},
{
id: TEACHER_SUBJECT_ID,
name: '學(xué)科',
parentId: 'teacher',
checked: false,
isPeople: false,
children: []
},
{
id: TEACHER_GRADECLASS_ID,
name: '年級班級',
parentId: 'teacher',
checked: false,
isPeople: false,
children: []
},
]
}
let STUDENT = {
id: STUDENT_ID,
name: '學(xué)生',
parentId: '',
checked: false,
isPeople: false,
children: []
}
let PARENT = {
id: PARENT_ID,
name: '家長',
parentId: '',
checked: false,
isPeople: false,
children: []
}
let ORIGINAL_DATA = [
TEACHER, STUDENT, PARENT
]
Page({
data: {
currentList: [], //當(dāng)前展示的列表
selectList: [], //已選擇的元素列表
originalList: [], //最原始的數(shù)據(jù)列表
indexList: [], //存儲目錄層級的數(shù)組，用于準(zhǔn)確的返回上一層
selectList: [], //已選中的人員列表
},
onLoad: function (options) {
wx.setNavigationBarTitle({
title: '選人控件'
})
this.init();
},
init(){
//用戶的單位id
this.unitId = getApp().globalData.userInfo.unitId;
//用戶類型
this.userType = 0;
//上次選中的列表，用于判斷是不是取消選中了
this.lastTimeSelect = []
this.setData({
currentList: ORIGINAL_DATA, //當(dāng)前展示的列表
originalList: ORIGINAL_DATA, //最原始的數(shù)據(jù)列表
})
},
clickItem(res){
console.log(res)
let index = res.currentTarget.id;
let item = this.data.currentList[index]
console.log("item", item)
if (!item.isPeople) {
//點擊教師，下一層數(shù)據(jù)是寫死的，不用請求接口
if (item.id === TEACHER_ID) {
this.userType = 2;
this.setData({
currentList: item.children
})
} else if (item.id === TEACHER_SUBJECT_ID) {
if (item.children.length === 0){
this._getTeacherSubjectData()
}else{
//children的長度不為0時，更新 currentList
this.setData({
currentList: item.children
})
}
} else if (item.id === TEACHER_DEPARTMENT_ID) {
if (item.children.length === 0) {
this._getTeacherDepartmentData()
} else {
//children的長度不為0時，更新 currentList
this.setData({
currentList: item.children
})
}
} else if (item.id === TEACHER_GRADECLASS_ID) {
if (item.children.length === 0) {
this._getTeacherGradeClassData()
} else {
//children的長度不為0時，更新 currentList
this.setData({
currentList: item.children
})
}
} else if (item.id === STUDENT_ID) {
this.userType = 1;
if (item.children.length === 0) {
this._getStudentGradeClassData()
} else {
//children的長度不為0時，更新 currentList
this.setData({
currentList: item.children
})
}
} else if (item.id === PARENT_ID) {
this.userType = 3;
if (item.children.length === 0) {
this._getParentGradeClassData()
} else {
//children的長度不為0時，更新 currentList
this.setData({
currentList: item.children
})
}
} else{
//children的長度為0時，請求服務(wù)器
if(item.children.length === 0){
this._getUserByGroup(item)
}else{
//children的長度不為0時，更新 currentList
this.setData({
currentList: item.children
})
}
}
//將當(dāng)前的索引存入索引目錄中。索引多一個表示目錄多一級
let indexes = this.data.indexList
indexes.push(index)
//是目錄不是具體的用戶
this.setData({
indexList: indexes
})
//清空上次選中的元素列表，并設(shè)置上一層的選中狀態(tài)給lastTimeSelect
this.setLastTimeSelectList();
}
},
//返回按鈕
goBack() {
let indexList = this.data.indexList
if (indexList.length > 0) {
//返回時刪掉最后一個索引
indexList.pop()
if (indexList.length == 0) {
//indexList長度為0說明回到了最頂層
this.setData({
currentList: this.data.originalList,
indexList: indexList
})
} else {
//循環(huán)將當(dāng)前索引的對應(yīng)數(shù)組賦值給currentList
let list = this.data.originalList
for (let i = 0; i < indexList.length; i++) {
let index = indexList[i]
list = list[index].children
}
this.setData({
currentList: list,
indexList: indexList
})
}
//清空上次選中的元素列表，并設(shè)置上一層的選中狀態(tài)給lastTimeSelect
this.setLastTimeSelectList();
}
},
//清空上次選中的元素列表，并設(shè)置上一層的選中狀態(tài)給lastTimeSelect
setLastTimeSelectList(){
this.lastTimeSelect = []
this.data.currentList.forEach(item => {
if (item.checked) {
this.lastTimeSelect.push(item)
}
})
},
//獲取教師部門數(shù)據(jù)
_getTeacherDepartmentData() {
this._commonRequestMethod(2, 'department')
},
//請求教師的學(xué)科數(shù)據(jù)
_getTeacherSubjectData(){
this._commonRequestMethod(2, 'subject')
},
//請求教師的年級班級
_getTeacherGradeClassData() {
this._commonRequestMethod(2, 'gradeclass')
},
//請求學(xué)生的年級班級
_getStudentGradeClassData() {
this._commonRequestMethod(1, 'gradeclass')
},
//請求家長的年級班級
_getParentGradeClassData() {
this._commonRequestMethod(3, 'gradeclass')
},
//根據(jù)部門查詢?nèi)?
_getUserByGroup(item){
let params = {
userType: this.userType,
unitId: this.unitId,
groupType: item.type,
groupId: item.id
}
console.log('params', params)
getApp().get(API.selectUserByGroup(), params, result => {
console.log('result', result)
let list = this.transformData(result.data.data, item.id)
this.setData({
currentList: list
})
this.addList2DataTree()
//清空上次選中的元素列表，并設(shè)置上一層的選中狀態(tài)給lastTimeSelect。寫在這里防止異步請求時執(zhí)行順序問題
this.setLastTimeSelectList();
})
},
//通用的請求部門方法
_commonRequestMethod(userType, groupType){
wx.showLoading({
title: '',
})
let params = {
userType: userType,
unitId: this.unitId,
groupType: groupType
}
console.log('params', params)
getApp().get(API.selectUsersByUserGroupsTree(), params, result => {
console.log('result', result)
wx.hideLoading()
let data = result.data.data
this.setData({
currentList: data
})
this.addList2DataTree();
//清空上次選中的元素列表，并設(shè)置上一層的選中狀態(tài)給lastTimeSelect。寫在這里防止異步請求時執(zhí)行順序問題
this.setLastTimeSelectList();
})
},
//將請求的數(shù)據(jù)轉(zhuǎn)化為需要的格式
transformData(list, parentId){
//先將數(shù)據(jù)轉(zhuǎn)化為固定的格式
let newList = []
for(let i=0; i<list.length; i++){
let item = list[i]
newList.push({
id: item.id,
name: item.realName,
parentId: parentId,
checked: false,
isPeople: true,
userType: item.userType,
gender: item.gender,
children: []
})
}
return newList;
},
//將當(dāng)前列表掛載在原數(shù)據(jù)樹上, 目前支持5層目錄，如需更多接著往下寫就好
addList2DataTree(){
let currentList = this.data.currentList;
let originalList = this.data.originalList;
let indexes = this.data.indexList
switch (indexes.length){
case 1:
originalList[indexes[0]].children = currentList
break;
case 2:
originalList[indexes[0]].children[indexes[1]].children = currentList
break;
case 3:
originalList[indexes[0]].children[indexes[1]].children[indexes[2]].children = currentList
break;
case 4:
originalList[indexes[0]].children[indexes[1]].children[indexes[2]].children[indexes[3]].children = currentList
break;
case 5:
originalList[indexes[0]].children[indexes[1]].children[indexes[2]].children[indexes[3]].children[indexes[4]].children = currentList
break;
}
this.setData({
originalList: originalList
})
console.log("originalList", originalList)
},
//選框變化回調(diào)
checkChange(res){
console.log(res)
let values = res.detail.value
let selectItems = []
//將值取出拼接成 id，name 格式
values.forEach(value => {
let arrs = value.split(",")
selectItems.push({id: arrs[0], name: arrs[1]})
})
console.log("selectItems", selectItems)
console.log("lastTimeSelect", this.lastTimeSelect)
//將本次選擇的與上次選擇的比對，本次比上次多說明新增了，本次比上次少說明刪除了，找出被刪除的那條數(shù)據(jù)，在footer中也刪除
if (selectItems.length > this.lastTimeSelect.length){
//將 selectList 與 selectItems 拼接并去重
let newList = this.data.selectList.concat(selectItems)
newList = ArrayUtils.checkRepeat(newList)
this.setData({
selectList: newList
})
}else{
//找出取消勾選的item，從selectList中刪除
//比對出取消勾選的是哪個元素
let diffItem = {}
this.lastTimeSelect.forEach(item => {
let flag = false;
selectItems.forEach(item2 => {
if(item.id === item2.id){
flag = true
}
})
if(!flag){
diffItem = item
console.log("diff=", item)
}
})
//找出被刪除的元素在 selectList 中的位置
let list = this.data.selectList
let delIndex = 0;
for(let i=0; i<list.length; i++){
if (list[i].id === diffItem.id){
delIndex = i;
break;
}
}
//從list中刪除這個元素
list.splice(delIndex, 1)
this.setData({
selectList: list
})
}
console.log("selectList", this.data.selectList)
//更新 currentList 選中狀態(tài)并重新掛載在數(shù)據(jù)樹上，以保存選擇狀態(tài)
this.updateCurrentList(this.data.currentList, this.data.selectList)
},
//footer點擊刪除回調(diào)
footerDelete(res){
console.log(res)
this.setData({
selectList: res.detail.selectList
})
console.log('selectList', this.data.selectList)
this.updateCurrentList(this.data.currentList, res.detail.selectList)
},
//點擊 footer 的確定按鈕提交數(shù)據(jù)
submitData(res){
let selectList = this.data.selectList
//通過 WxNotificationCenter 發(fā)送選擇的結(jié)果通知
EventBus.postNotificationName("SelectPeopleDone", selectList)
//將選擇結(jié)果存入 app.js 的 globalData
getApp().globalData.selectPeopleList = selectList
//返回
wx.navigateBack({
delta: 1
})
console.log("selectdone", selectList)
},
//更新 currentList 并將更新后的列表掛載在數(shù)據(jù)樹上
updateCurrentList(currentList, selectList){
let newList = []
currentList.forEach(item => {
let flag = false;
selectList.forEach(item2 => {
if (item.id === item2.id) {
flag = true
}
})
if (flag) {
item.checked = true
} else {
item.checked = false
}
newList.push(item)
})
this.setData({
currentList: newList
})
this.addList2DataTree()
this.setLastTimeSelectList()
}
})
復(fù)制代碼
|
