<view class="container"> <view class='class bgFFF' bindtap='isDep'>  <view class='class-text'>    <text class='red'> </text>    <text>開放部門</text>   </view>  <view class='class-choose'>   <text class='color333 perItem' wx:if="{{checkValue.length>0}}">    <block wx:for="{{checkValue}}" wx:key="index"> {{item}} </block>   </text>   <text wx:else>默認(rèn)全部</text>   <image src='/images/right-icon.png' mode="widthFix"></image>  </view> </view> <view class='class bgFFF' bindtap='isPer'>  <view class='class-text'>    <text class='red'> </text>    <text>開放成員</text>   </view>  <view class='class-choose'>   <text class='color333 perItem' wx:if="{{depValue.length>0}}">    <block wx:for="{{depValue}}" wx:key="index"> {{item}} </block>   </text>   <text wx:else>默認(rèn)全部</text>   <image src='/images/right-icon.png' mode="widthFix"></image>  </view> </view></view><!-- 部門列表 --><view class='typeListBox' wx:if="{{isDep}}"> <view class='wrap'>  <view class='nav'>   <text class='active'>部門</text>   <!-- <text class='{{navId==2?"active":""}}' data-id='2' bindtap='getNav'>人員</text> -->  </view>  <view class='checkbox-con'>   <scroll-view scroll-y style="height: 700rpx;" scroll-top="{{scrollTop}}">    <checkbox-group bindchange="checkboxChange" class="checkbox-group">     <view wx:for="{{checkboxArr}}" wx:key="item.name">      <label class="{{item.checked?'checkbox checked':'checkbox'}}" bindtap='checkbox' data-index="{{index}}">       <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.name}}      </label>     </view>    </checkbox-group>   </scroll-view>  </view>  <view class='btn1'>   <button class='bgFFF' bindtap='cancel'>取消</button>   <button class='' bindtap='confirm'>確定</button>  </view> </view></view><!-- 成員列表 --><view class='typeListBox' wx:if="{{isPer}}"> <view class='wrap'>   <!-- 字母錨點(diǎn) -->   <view class='anchor'>    <view bindtap="jumpTo" wx:for="{{words}}" wx:key="i" data-opt="{{item}}">{{item}}</view>   </view>  <view class='nav'>   <text class='active'>人員</text>  </view>  <view class='checkbox-con'>   <scroll-view scroll-y style="height: 700rpx;" scroll-with-animation='true' scroll-top="{{scrollTop}}" scroll-into-view="{{toView}}">    <view class='typeList'>     <checkbox-group class="radio-group" bindchange="checkBoxPer">      <view wx:for="{{personnelArr}}" wx:key="index" wx:for-item="itemName" wx:for-index="itemNameInd">       <view class='typeList-item-title' id="{{itemName.name}}">{{itemName.name}}</view>       <label class='typeList-item' data-itemnameind='{{itemNameInd}}' bindtap="checkPer" wx:for="{{itemName.a}}" wx:key="a" wx:for-item="item" data-index="{{index}}">        <checkbox value="{{item.name}}" checked="{{item.checked}}" color='#3eace2'/>        <text>{{item.name}}</text>       </label>      </view>     </checkbox-group>    </view>   </scroll-view>  </view>  <view class='btn1'>   <button class='bgFFF' bindtap='cancel'>取消</button>   <button class='' bindtap='confirmPer'>確定</button>  </view> </view></view>

.container { display: flex; flex-direction: column; box-sizing: border-box; background-color: #f5f5f5; padding-top: 20rpx;} .class{ display: flex; flex-direction: row; padding: 20rpx 0; background-color: #fff; margin-bottom: 20rpx;}.class view.class-text{ flex: 1; padding-left: 30rpx; font-size: 14px;}.red{ margin-right: 10rpx; color: #ff0000;}.class-choose{ max-width: 60%; display: flex; flex-direction: row; text-align: right;}.class-choose-item{ display: flex; flex-direction: column; padding-right: 40rpx;}.class-choose text{ flex: 1; font-size: 14px; color: #999;}.class-choose text.color333{ color: #333;}.class-choose image{ width: 16px; margin: 6rpx 20rpx 0;}/* 部門列表樣式 */.typeListBox{ z-index: 101; position: fixed; top: 0; left: 0; right: 0; bottom: 0; padding: 50rpx; background: rgba(0,0,0,0.3);}.typeList{ /* margin-top: 200rpx; */ padding: 0 30rpx; border-radius: 5px; font-size: 13px; background-color: #fff;}.typeList .radio-group{ display: flex; flex-direction: column;}.typeList-item{ display: flex; flex-direction: row; padding: 20rpx 0; border-bottom: 1rpx solid #f5f5f5;}.typeList-item text{ margin-left: 10rpx; line-height: 48rpx;}.radio{ padding: 0 20rpx 0 0;}.engineer{ padding: 0 20rpx 0 0;}.engineer-text{ line-height: 46rpx;}.engineer-item{ padding: 10rpx 0;}.nav{ display: flex; flex-direction: row; border-bottom: 1rpx solid #f5f5f5;}.nav text{ padding: 20rpx; flex: 1; text-align: center; font-size: 16px;}.nav text.active{ color: #3eace2; border-bottom: 1rpx solid #3eace2;}.wrap{ padding: 20rpx 30rpx; border-radius: 5px; font-size: 13px; background-color: #fff; position: relative;} .checkbox-con{ margin: 50rpx auto; text-align: center; position: relative;}.checkbox-group view{ float: left; width: 50%; display: flex; flex-direction: column; padding: 0 20rpx 40rpx; box-sizing: border-box;}.checkbox{ flex: 1; height: 72rpx; line-height: 72rpx; font-size: 28rpx; color: #888888; border: 1rpx solid #CECECE; border-radius: 5rpx; /* display: inline-block; */ /* margin: 0 10rpx 30rpx 0; */ position: relative;}/* .checkbox-group{ display: flex; flex-direction: row;} */.checked{ color: #3eace2; background: rgba(49,165,253,0.08); border: 1rpx solid #3eace2;}.checkbox checkbox{ display: none}.checked-img{ width: 28rpx; height: 28rpx; position: absolute; top: 0; right: 0}.btn1{ display: flex; flex-direction: row;}.btn1 button{ flex: 1; background-color: #3eace2; color: #fff;}.btn1 button.bgFFF{ margin-right: 20rpx; color: #666; background-color: #fff;}.perItem{ box-sizing: border-box; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}.anchor{ z-index: 101; position: absolute; top: 150rpx; right: 20rpx; font-size: 12px;}.anchor view{ padding: 0 5rpx; text-align: center;}.typeList-item-title{ padding: 10rpx 10rpx 5rpx; color: #666; background-color: #f5f5f5; text-align: left;}

const app = getApp()Page({ data: {  checkboxArr: [   {    checked: false,//是否選中    id: "1",//部門能id    name: "部門1",   },   {    checked: false,//是否選中    id: "2",//部門能id    name: "部門2",   },   {    checked: false,//是否選中    id: "3",//部門能id    name: "部門3",   },   {    checked: false,//是否選中    id: "4",//部門能id    name: "部門4",   },   {    checked: false,//是否選中    id: "5",//部門能id    name: "部門5",   },   {    checked: false,//是否選中    id: "6",//部門能id    name: "部門6",   },   {    checked: false,//是否選中    id: "7",//部門能id    name: "部門7",   },   {    checked: false,//是否選中    id: "8",//部門能id    name: "部門8",   },   {    checked: false,//是否選中    id: "9",//部門能id    name: "部門9",   },   {    checked: false,//是否選中    id: "10",//部門能id    name: "部門10",   },   {    checked: false,//是否選中    id: "11",//部門能id    name: "部門11",   },   {    checked: false,//是否選中    id: "12",//部門能id    name: "部門12",   },   {    checked: false,//是否選中    id: "13",//部門能id    name: "部門13",   },   {    checked: false,//是否選中    id: "14",//部門能id    name: "部門14",   },   {    checked: false,//是否選中    id: "15",//部門能id    name: "部門15",   },  ],//部門列表  personnelArr: null,//人員列表  checkValue: [],//部門  depValue: [],//部門  isDep: false,//部門顯隱  isPer: false,//成員顯隱  d_id: [],//部門id集合  u_id: [],//人員集合  words: null,//成員名稱的手寫字母 }, //控制部門的顯隱 isDep: function () {  this.setData({   isDep: true,  }) },  //控制人員顯隱 isPer: function () {  this.setData({   isPer: true,  }) }, //取消按鈕 cancel: function () {  this.setData({   isDep: false,   isPer: false  }) }, //人員 checkPer: function (e) {  var index = e.currentTarget.dataset.index;//獲取當(dāng)前點(diǎn)擊的下標(biāo)  var ind = e.currentTarget.dataset.itemnameind;//獲取當(dāng)前點(diǎn)擊的下標(biāo)  var personnelArr = this.data.personnelArr;//選項(xiàng)集合  personnelArr[ind].a[index].checked = !personnelArr[ind].a[index].checked;//改變當(dāng)前選中的checked值  // var u_id = this.data.u_id;//獲取data中的成員id集合  // var id = personnelArr[ind].a[index].id;//獲取選中的成員id  // //判斷，當(dāng)前選中的這個(gè)值的checked是不是已經(jīng)選中，如果是則將id放入選中成員id集合，反之則移除  // if (personnelArr[ind].a[index].checked) {  //  u_id.push(id);  // } else {  //  this.removeByValue(u_id, id);  // }  this.setData({   personnelArr: personnelArr  }); }, checkBoxPer: function (e) {  var depValue = e.detail.value;  this.setData({   depValue: depValue  }); }, confirmPer: function () {// 提交  this.setData({   isPer: false,  }) }, //部門 checkbox: function (e) {  var index = e.currentTarget.dataset.index;//獲取當(dāng)前點(diǎn)擊的下標(biāo)  var checkboxArr = this.data.checkboxArr;//選項(xiàng)集合  checkboxArr[index].checked = !checkboxArr[index].checked;//改變當(dāng)前選中的checked值  //如果需要部門聯(lián)動(dòng)成員  // var d_id = this.data.d_id;//獲取data中的部門id集合  // var id = checkboxArr[index].id;//獲取選中的部門id  // //判斷，當(dāng)前選中的這個(gè)值的checked是不是已經(jīng)選中，如果是則將id放入選中部門id集合，反之則移除  // if (checkboxArr[index].checked) {  //  d_id.push(id);  // } else {  //  this.removeByValue(d_id, id);  // }  this.setData({   checkboxArr: checkboxArr  }); }, checkboxChange: function (e) {  var checkValue = e.detail.value;  this.setData({   checkValue: checkValue  }); }, confirm: function () {// 確定  this.setData({   isDep: false,   // depValue: []如果是聯(lián)動(dòng)，選中部門后需要清除選中的成員  })  // this.getUser();//通過選中部門來獲取不通的部門成員，將獲取到的數(shù)據(jù)存入checkboxArr中 },  onLoad: function () {  //模擬測試人員數(shù)據(jù)  var arr = {   data: [    {     checked: false,     id: "83",     name: "張三",     word: "Z",    }, {     checked: false,     id: "22",     name: "張三豐",     word: "Z",    }, {     checked: false,     id: "23",     name: "張無忌",     word: "Z",    }, {     checked: false,     id: "83",     name: "李四",     word: "L",    }, {     checked: false,     id: "83",     name: "王五",     word: "W",    }, {     checked: false,     id: "83",     name: "測試",     word: "C",    },   ],//成員數(shù)組   words: ["C", "L", "W", "Z"],//成員字母集合  };  this.setData({   words: arr.words,  })  this.integration(arr) }, // 整合人員字母 integration: function (list) {  // console.log(list)  var arr = [];  for (var j = 0; j < list.words.length; j++) {   var aa = {    name: null,    a: []   };   aa.name = list.words[j];   for (var k = 0; k < list.data.length; k++) {    if (list.words[j] == list.data[k].word) {     aa.a.push(list.data[k]);    }   }   arr.push(aa)  }  this.setData({   personnelArr: arr,  })  // console.log(arr) },})