{
  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: '學科',
      parentId: 'teacher',
      checked: false,
      isPeople: false,
      children: []
    },
    {
      id: TEACHER_GRADECLASS_ID,
      name: '年級班級',
      parentId: 'teacher',
      checked: false,
      isPeople: false,
      children: []
    },
  ]
}

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: '學科',
      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: '學生',
  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: [], //當前展示的列表
    selectList: [],  //已選擇的元素列表
    originalList: [], //最原始的數據列表
    indexList: [],  //存儲目錄層級的數組，用于準確的返回上一層
    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, //當前展示的列表
      originalList: ORIGINAL_DATA, //最原始的數據列表
    })
  },

  clickItem(res){
    console.log(res)
    let index = res.currentTarget.id;
    let item = this.data.currentList[index]

    console.log("item", item)

    if (!item.isPeople) {
      //點擊教師，下一層數據是寫死的，不用請求接口
      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時，請求服務器
        if(item.children.length === 0){
          this._getUserByGroup(item)
        }else{
          //children的長度不為0時，更新 currentList
          this.setData({
            currentList: item.children
          })
        }
      }

      //將當前的索引存入索引目錄中。索引多一個表示目錄多一級
      let indexes = this.data.indexList
      indexes.push(index)
      //是目錄不是具體的用戶
      this.setData({
        indexList: indexes
      })
      //清空上次選中的元素列表，并設置上一層的選中狀態給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 {
        //循環將當前索引的對應數組賦值給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
        })
      }
      //清空上次選中的元素列表，并設置上一層的選中狀態給lastTimeSelect
      this.setLastTimeSelectList();
    }
  },

  //清空上次選中的元素列表，并設置上一層的選中狀態給lastTimeSelect
  setLastTimeSelectList(){
    this.lastTimeSelect = []
    this.data.currentList.forEach(item => {
      if (item.checked) {
        this.lastTimeSelect.push(item)
      }
    })
  },

  //獲取教師部門數據
  _getTeacherDepartmentData() {
    this._commonRequestMethod(2, 'department')
  },

  //請求教師的學科數據
  _getTeacherSubjectData(){
    this._commonRequestMethod(2, 'subject')
  },

  //請求教師的年級班級
  _getTeacherGradeClassData() {
    this._commonRequestMethod(2, 'gradeclass')
  },

  //請求學生的年級班級
  _getStudentGradeClassData() {
    this._commonRequestMethod(1, 'gradeclass')
  },

  //請求家長的年級班級
  _getParentGradeClassData() {
    this._commonRequestMethod(3, 'gradeclass')
  },

  //根據部門查詢人
  _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()
      //清空上次選中的元素列表，并設置上一層的選中狀態給lastTimeSelect。寫在這里防止異步請求時執行順序問題
      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();
      //清空上次選中的元素列表，并設置上一層的選中狀態給lastTimeSelect。寫在這里防止異步請求時執行順序問題
      this.setLastTimeSelectList();
    })
  },

  //將請求的數據轉化為需要的格式
  transformData(list, parentId){
    //先將數據轉化為固定的格式
    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;
  },

  //將當前列表掛載在原數據樹上, 目前支持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)
  },

  //選框變化回調
  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)
    
    //將本次選擇的與上次選擇的比對，本次比上次多說明新增了，本次比上次少說明刪除了，找出被刪除的那條數據，在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 選中狀態并重新掛載在數據樹上，以保存選擇狀態
    this.updateCurrentList(this.data.currentList, this.data.selectList)
  },

  //footer點擊刪除回調
  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 的確定按鈕提交數據
  submitData(res){
    let selectList = this.data.selectList
    //通過 WxNotificationCenter 發送選擇的結果通知
    EventBus.postNotificationName("SelectPeopleDone", selectList)
    //將選擇結果存入 app.js 的 globalData
    getApp().globalData.selectPeopleList = selectList
    //返回
    wx.navigateBack({
      delta: 1
    })
    console.log("selectdone", selectList)
  },

  //更新 currentList 并將更新后的列表掛載在數據樹上
  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()
  }
})
復制代碼

<view class='container'>
  <view class='btn-wrapper'>
    <button bindtap='goBack'>返回上一層</button>
  </view>

  <view class='people-wrapper'>
    <scroll-view scroll-y class='scrollview'>
      <checkbox-group bindchange="checkChange">
        <view class='item' wx:for='{{currentList}}' wx:key='{{item.id}}'>
          <checkbox checked='{{item.checked}}' value='{{item.id + "," + item.name}}'>
          </checkbox>
          <view id='{{index}}' class='item-content' bindtap='clickItem'>
            <image class='img' wx:if='{{!item.isPeople}}' src='../../../assets/file.png'></image>
            <image class='avatar' wx:if='{{item.isPeople}}' src='../../../assets/avatar.png'></image>
            <text class='itemtext'>{{item.name}}</text>
          </view>
        </view>
      </checkbox-group>
      <view class='no-data' wx:if='{{currentList.length===0}}'>暫無數據</view>
    </scroll-view>
  </view>
  <view class='footer'>
    <footer list='{{selectList}}' binddelete='footerDelete' bindsubmit="submitData"/>
  </view>
</view>
復制代碼
userSelect.wxss

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  overflow-x: hidden;
  box-sizing: border-box;
  background-color: #fff;
}

.btn-wrapper {
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.btn {
  font-size: 24rpx;
  width: 100%;
}

.people-wrapper {
  width: 100%;
  margin-top: 10rpx;
  margin-bottom: 100rpx;
}

.scrollview {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.item {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 30rpx 0;
  margin: 0 20rpx;
  border-bottom: 1rpx solid rgba(7, 17, 27, 0.1);
}

.item-content {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 20rpx;
}

.itemtext {
  font-size: 36rpx;
  color: #333;
  margin-left: 20rpx;
  text-align: center;
}

.img {
  width: 50rpx;
  height: 40rpx;
}

.avatar {
  width: 50rpx;
  height: 50rpx;
}

.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.no-data{
  width: 100%;
  font-size: 32rpx;
  text-align: center;
  padding: 40rpx 0;
}

{
  "usingComponents": {
    "footer": "footer/footer"
  }
}

Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    list: {
      type: Array
    }
  },

  /**
   * 組件的初始數據
   */
  data: {
    
  },

  /**
   * 組件的方法列表
   */
  methods: {
    delete(res){
      console.log(res)
      let index = res.currentTarget.id
      let list = this.data.list
      list.splice(index,1)
      this.setData({list: list})
      this.triggerEvent("delete", {selectList: list})
    },

    /**
     * 點擊確定按鈕
     */
    confirm(){
      this.triggerEvent("submit", "")
    }
  }
})
復制代碼

<view class='container'>
  <view class='scroll-wrapper'>
    <scroll-view scroll-x style='scroll'>
      <text id='{{index}}' class='text' wx:for='{{list}}' wx:key='{{index}}' bindtap='delete'>{{item.name}}</text>
    </scroll-view>
  </view>
  <text class='btn' bindtap='confirm'>確定</text>
</view>

.container {
  width: 100%;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  align-items: center;
  overflow-x: hidden;
  white-space: nowrap;
  border-top: 2rpx solid rgba(7, 17, 27, 0.1)
}

.scroll-wrapper {
  flex: 1;
  overflow-x: hidden;
  white-space: nowrap;
}

.scroll {
  width: 100%;

}

.text {
  font-size: 32rpx;
  color: #333;
  padding: 40rpx 20rpx;
  margin-right: 10rpx;
  background-color: #f5f5f5;
}

.btn {
  padding: 10rpx 20rpx;
  background-color: rgb(26, 173, 25);
  border-radius: 10rpx;
  font-size: 32rpx;
  color: #fff;
}
復制代碼

{
  "component": true,
  "usingComponents": {}
}
復制代碼

export default{

  /**
     * 給數組去重
     */
  checkRepeat(list) {
    let noRepList = [list[0]]
    for (let i = 0; i < list.length; i++) {
      let repeat = false
      for (let j = 0; j < noRepList.length; j++) {
        if (noRepList[j].id === list[i].id) {
          repeat = true
          break
        }
      }
      if (!repeat) {
        noRepList.push(list[i])
      }
    }
    return noRepList
  },

  //刪除list中id為 delId 的元素
  deleteItemById(list, delId){
    for (let i = 0; i < list.length; i++) {
      if (list[i].id == delId) {
        list.splice(i, 1)
        return list;
      }
    }
    return list;
  }

}
復制代碼