<el-tree
:data="data"
show-checkbox
node-key="module_id"
ref="tree"
highlight-current
:props="defaultProps"
@check="nodeClick"
:check-strictly="ISstrictly"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ data.module_name }}</span>
<!-- <span>
<el-button type="text" size="mini" style="margin-left: 5px">({{ data.module }})</el-button>
</span> -->
</span>
</el-tree>
data() { return { ISstrictly: true, //编辑的时候 获取数据时候父子级不关联 获取完毕勾选的时候父子级再关联 防止获取数据的时候 子级部分是部分选中 却 显示 全部选中 checkAll: false, //全选 反选 select_box: [], data: [], //tree defaultProps: { children: 'child', label: 'module_name' }, treeLength: '' //所有的子级加起来的长度 用来判断全选 和 已选的长度 是否一致 }; },
// 全选
handleCheckAllChange(val) { if (this.checkAll) {
// 判断true 或者 false this.$nextTick(function () { this.$refs.tree.setCheckedNodes(this.data); }); } else { this.$nextTick(function () { this.$refs.tree.setCheckedKeys([]); }); } this.$nextTick(function () {
// 把勾选的id存起来 console.log(this.$refs.tree.getCheckedNodes(), 'console.log(this.$refs.tree.getCheckedNodes());'); let select_box = []; this.$refs.tree.getCheckedNodes().forEach((item) => { select_box.push(item.module_id); }); this.select_box = select_box; // console.log(this.select_box, 'select_box888'); }); },
//当用户点击的时候
nodeClick(data, node, e) {
// 把一进来的状态 父子级是否关联给取消 this.ISstrictly = false; let select_box = [];
// 获取到所有已选择的id 存到数组里面 select_box = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
//子级为全选时 为了获取父级id做法 (备用做法)
this.$refs.tree.getHalfCheckedNodes().forEach((item) => {
select_box.push(item.module_id)
})
//获取选中的子级id
this.$refs.tree.getCheckedNodes().forEach((item) => {
select_box.push(item.module_id)
})
console.log(select_box, 'select_box'); this.select_box = select_box;
// 判断是否全选了 if (this.select_box.length != this.treeLength) { this.checkAll = false; } else { this.checkAll = true; } },
//获取当前用户的权限列表 getUserAuthList() { this.$axios .post('/platformapi/Auth/getUserAuthList') .then(({ data }) => { console.log(data, '获取当前用户的权限列表'); if (data.code == 1) { this.data = data.data; this.$nextTick(function () {
// this.treeLength = this.$refs.tree.getCheckedNodes().length;
//这个函数是计算出所有子节点的个数 this.treeLength = this.getTreeNodeIDList(this.data); console.log(this.treeLength, '888777'); }); this.$nextTick(function () {this.getSystemUserGroupDetail(); }); } }) .catch((res) => { console.log(res, 'catch'); }); }, //获取树列表的所有节点 ==> 这里是计算出所有子节点的个数 getTreeNodeIDList(data) { var str = 0; const getStr = function (list) { list.forEach(function (row) { if (row.child) { getStr(row.child); str += 1; } else { str += 1; } }); }; getStr(data); this.treeLength = str; return this.treeLength; console.log(this.treeLength, 'this.treeLength'); }, //获取当前用户组详情 getSystemUserGroupDetail() { this.$axios .post('/platformapi/Auth/getSystemUserGroupDetail', { group_id: this.group_id }) .then(({ data }) => { console.log(data, '获取当前用户组详情'); if (data.code == 1) { this.group_name = data.data.group_name; this.desc = data.data.desc; this.select_box = data.data.module_id_array.split(','); this.select_box.forEach((item) => { // console.log(item); item = parseInt(item); });
//这里是让返回的id项 默认选中 this.$refs.tree.setCheckedKeys(this.select_box); this.select_box = this.select_box.map((item) => { return +item; }); console.log(this.select_box, '11');
// 是否全选 if (this.select_box.length == this.treeLength) { this.checkAll = true; } else { this.checkAll = false; this.$nextTick(function () {
//这里是获取详情数据完毕过后 则父子级是否关联 this.ISstrictly = false; }); } } }) .catch((res) => { console.log(res, 'catch'); }); },
// 保存 save() { this.nodeClick(); this.$axios .post('/platformapi/Auth/addUserGroup', { group_id: this.group_id, select_box: this.select_box.join(','), group_name: this.group_name, desc: this.desc }) .then(({ data }) => { console.log(data, '保存'); if (data.code == 1) { this.$message.success(data.message); this.$router.go(-1); } else { this.$message.warning(data.message); } }) .catch((res) => { console.log(res, 'catch'); }); }
懒加载
//动态渲染子级部门
loadNode(node, resolve) {
let id = node.data.id
let postData = {
page: 1,
page_size: 999,
type: 0, //部门列表传0 子账号关联传1
pid: id, //部门id 根部门传0
}
this.$axios
.post('/brandapi/Staff/getSectionList', postData)
.then(({ data }) => {
console.log(data, '获取子级部门')
if (node.level == 0) {
return resolve([this.rootNode]);
} else {
var children = data.data.data
resolve(children);
}
})
},
