先看實現(xiàn)的功能縮略圖
IMG_2259.JPG
業(yè)務需求：
(１) 省行政區(qū)域?qū)蛹夗撛黾印叭珖弊侄?，支持全選和全不選設備權限
(２) 若子層級的設備權限全部選中，則上級組織展示選中狀態(tài)，如圖1
(３) 若子層級的設備權限有部分選中，則上級組織展示為半選中狀態(tài)，如圖3，4
(４) 若子層級的設備權限全部未選中，則上級組織展示為非選中狀態(tài)，如圖2
( 5 ) 可直觀定位和追溯當前組織所擁有的攝像機權限信息
( 6 ) 各層級展示已選數(shù)量/全部數(shù)量（例：已選2/10），用于展示在各地區(qū)已選的設備權限情況，展示格式：已選X/Y，其中X表示當前行政區(qū)域內(nèi)已選擇的設備數(shù)量，Y表示當前行政區(qū)域內(nèi)全部設備數(shù)量
實現(xiàn)思路
每一個單元格item都有3種狀態(tài)標識，selecteTag分為0，1，2。0是未選中，1是半選中，2是選中狀態(tài)。點擊復選框選中和非選中的方法里，同時向上和向下遞歸處理，向上拿著該item的上級組織的id遞歸遍歷所有上級組織，同時根據(jù)012的邏輯給上級組織selecteTag賦值；向下如果該item的存在子級，就把所有子級遞歸賦值selecteTag為0或者2。同時只對設備進行處理，在選中的數(shù)組newCheckList中進行添加或刪除操作。
實現(xiàn)代碼
核心代碼
/** 選中當前的值
* @param {Object} e
* @param {Object} item 當前項
* @param {Object} index 索引
*/
checkboxChange(e, item, index) {
uni.showLoading({
title: '正在加載,請稍候'
});
console.log('點擊chechckBox', e.detail.value, item);
let that = this;
var data = that.newCheckList;
let findIdex = -1; //that.newCheckList.indexOf(item)
for (let i in data) {
if (data[i].deviceCode == item.deviceCode) {
findIdex = i;
break;
}
}
console.log('選中的數(shù)組中的第幾個', findIdex);
if (e.detail.value && e.detail.value > 0) {
// 點擊選中
if (!item.children && !item.deviceCode) {
console.log('選中第一級', item);
// 遍歷找到item的上級，賦值選中
this.partRadioEach(this.parent_data, item.id, 1);
//第一級的選中
this.parentSelected(item.id, 1);
} else {
that.tree[index].selecteTag = 2
if (item.deviceCode && findIdex < 0) {
that.newCheckList.push(that.tree[index]);
}
console.log('選中de', that.newCheckList);
var childrendata = that.tree[index].children;
if (childrendata && childrendata.length > 0) {
that.selectedDown(childrendata);
}
}
} else {
// 點擊不選
if (!item.children && !item.deviceCode) {
console.log('取消選中第一級', item);
// 遍歷找到item的上級，賦值不選中
this.partRadioEach(this.parent_data, item.id, 0);
//第一級的不選中
this.parentSelected(item.id, 0);
} else {
if (item.deviceCode) {
that.newCheckList.splice(findIdex, 1);
}
that.tree[index].selecteTag = 0
var cancledata = that.tree[index].children;
console.log('取消刪除', cancledata);
if (Array.isArray(cancledata) && cancledata.length > 0) {
that.deleteDown(cancledata);
}
}
}
that.parentforEach(that.parent_data, item.pid);
console.log('最后的選中數(shù)組', this.newCheckList, item.pid);
that.checckNewList();
this.topSelString = this.getTopChooseItem();
that.$forceUpdate(); //強制更新數(shù)據(jù)
uni.hideLoading();
},
第一個item的選中和非選中事件，因為第一個item在上級也存在
//遍歷找到選中的item，賦值選中或不選中
partRadioEach(arr, itemid, tag) {
for (let i = 0; i < arr.length; i++) {
if (arr[i].id == itemid) {
if (tag == 1) {
arr[i].selecteTag = 2;
} else {
arr[i].selecteTag = 0;
}
}
if (Array.isArray(arr[i].children) && arr[i].children.length > 0) {
this.partRadioEach(arr[i].children, itemid, tag);
}
}
},
只對設備進行處理，在選中的數(shù)組newCheckList中進行添加或刪除操作
//第一個item的選中和非選中，只對設備進行處理，在選中的數(shù)組newCheckList中進行添加或刪除操作
parentSelected(pid, tag) {
for (let i in this.tree) {
var treechildata = this.tree[i].children;
if (tag == 1) {
let item = this.tree[i];
item.selecteTag = 2;
//判斷是否是設備
if (item.deviceCode) {
let findIdex = -1;
for (let i in this.newCheckList) {
if (this.newCheckList[i].deviceCode == item.deviceCode) {
findIdex = i;
break;
}
}
if (findIdex < 0) {
this.newCheckList.push(item);
}
}
if (treechildata && treechildata.length > 0) {
this.selectedDown(treechildata);
}
} else {
this.tree[i].selecteTag = 0;
var List = this.newCheckList;
console.log('刪除第一、選中的數(shù)組', this.newCheckList);
let Idex = -1;
for (let j in List) {
if (List[j].deviceCode) {
if (List[j].deviceCode == this.tree[i].deviceCode) {
Idex = j;
this.newCheckList.splice(Idex, 1);
break;
}
}
}
if (treechildata && treechildata.length > 0) {
this.deleteDown(treechildata);
}
}
};
},
向下遞歸選中
//向下遞歸選中最底層設備
selectedDown(arr) {
for (let i = 0; i < arr.length; i++) {
let item = arr[i];
item.selecteTag = 2;
//如果是設備的話，才加入選中的數(shù)組
if (item.deviceCode) {
let findIdex = -1;
for (let i in this.newCheckList) {
if (this.newCheckList[i].deviceCode == item.deviceCode) {
findIdex = i;
break;
}
}
if (findIdex < 0) {
this.newCheckList.push(item);
}
}
if (Array.isArray(arr[i].children) && arr[i].children.length > 0) {
this.selectedDown(arr[i].children);
}
}
},
向下遞歸刪除
//向下遞歸刪除
deleteDown(data) {
var List = this.newCheckList;
console.log('刪除、選中的數(shù)組', this.newCheckList);
for (let i in data) {
if (Array.isArray(data) && data.length > 0) {
let Idex = -1;
for (let j in List) {
if (List[j].deviceCode) {
if (List[j].deviceCode == data[i].deviceCode) {
Idex = j;
this.newCheckList.splice(Idex, 1);
break;
}
}
}
data[i].selecteTag = 0;
if (Array.isArray(data[i].children) && data[i].children.length > 0) {
this.deleteDown(data[i].children);
}
}
};
console.log('向下刪除循環(huán)后的選中數(shù)組', this.newCheckList);
},
根據(jù)上級組織id，遞歸遍歷所有上級，根據(jù)子層級的設備權限是否選中，給上級組織狀態(tài)賦值
//遍歷所有上級賦值
parentforEach(arr, itempid) {
for (let i = 0; i < arr.length; i++) {
//是上級的處理
if (arr[i].id == itempid) {
var sum = 0;
var subdata = arr[i].children //.splice(0, 1);
for (let j in subdata) {
sum += subdata[j].selecteTag ? subdata[j].selecteTag : 0;
}
sum = sum - (subdata[0].selecteTag ? subdata[0].selecteTag : 0);
console.log('遍歷父級', sum, arr[i].children.length);
if (sum >= (arr[i].children.length - 1) * 2) {
// 子級全部選中時上級組織也選中
arr[i].selecteTag = 2;
if (arr[i].children[0]) {
arr[i].children[0].selecteTag = 2;
console.log('選中上級', arr[i]);
}
} else if (sum == 0) {
// 子級全部不選中時上級組織也不選中
console.log('不選中', arr[i]);
arr[i].selecteTag = 0
if (Array.isArray(arr[i].children) && arr[i].children.length > 0) {
arr[i].children[0].selecteTag = 0;
}
} else {
// 子級有選中且非全部選中的時候，上級組織時半選中
console.log('半選中', arr[i]);
arr[i].selecteTag = 1;
if (Array.isArray(arr[i].children) && arr[i].children.length > 0) {
arr[i].children[0].selecteTag = 1;
}
}
this.$forceUpdate(); //強制更新數(shù)據(jù)
if (arr[i].pid && Number(arr[i].pid) != 0) {
this.parentforEach(this.parent_data, arr[i].pid);
}
return;
}
if (Array.isArray(arr[i].children) && arr[i].children.length > 0) {
this.parentforEach(arr[i].children, itempid);
}
}
},
