(1)【阅读权限控制】点击阅读权限按钮,弹窗默认加载第一个群组,但是选中该群组,下方不展示。
(2)【阅读权限控制】选中的群组/机构/省区,再次点击群组/机构/省区的时候是非选中状态。
(3)【阅读权限控制】选中的群组/机构/省区,没有按时间先后顺序排序

1.思路 右边tree默认第一个,然后在调用tree的时候判断左边的树到底是哪一个,非选中的问题
2.按顺序,只能是数据扩展运算符,... arr=[...arr1,...arr2]
按照 ref="treeOrg",默认选中 :default-checked-keys="treeOrg",把第一个数据塞进treeOrg数据中,在data中设置treeOrg数组中
<el-tree
ref="treeOrg"
:data="data"
:props="defaultPropsGroup"
highlight-current
node-key="orgCode"
default-expand-all
@node-click="handleNodeClick"
:default-checked-keys="treeOrg"
></el-tree>
默认加载树
//默认加载组织架构tree
getDeptList() {
contentMngAddEditApi
.deptTree()
.then((res) => {
if (res.status === 0) {
this.data = [
{
id: 0,
orgName: "组织架构",
children: res.data.map((item) => {
return item;
}),
},
];
this.treeOrg.push(res.data[0].orgCode);//第一个值放到默认的数组中
} else {
this.$message.error(res.message);
}
})
.catch((error) => {
console.log("/announce/dept/auth/tree默认加载组织架构tree", error);
});
},
加载树左边的数据
// 加载树型组织部门信息
loadNode(node, resolve, data) {
let params = {};
if (data && data.id === 0) {
return;
}
if (data === undefined && node.data === undefined) {
// params={//默认是集团
// deptType:1,
// orgCode:"FIRST"
// }
params = {
//默认常用群组
deptType: 2,
orgCode: "1",
};
} else if (data === undefined) {
params = {
deptType: node.data.deptType,
orgCode: node.data.orgCode,
};
} else {
params = {
//点击传参数
deptType: data.deptType,
orgCode: data.orgCode,
};
}
contentMngAddEditApi.organizationsTree(params).then((res) => {
if (res.status == 0) {
if (node.level === 0) {
//必须判断一下,否则Tree树形控件节点一旦展开,就不再重新加载节点数据
this.node = node;
this.resolve = resolve;
this.node.childNodes = []; // 把子节点清空,否则下次加载时会直接往里push子节点导致重复
if (this.authType == 1) {
console.log("deptCheckData===", this.deptCheckData);
this.deptCheckData.map((item1, index1) => {
this.$nextTick(() => {
this.$refs.tree.setChecked(item1.deptCode, true); //并且把选中tree
});
});
}
if (this.authType == 2) {
console.log("proCheckData===", this.proCheckData);
this.proCheckData.map((item1, index1) => {
this.$nextTick(() => {
this.$refs.tree.setChecked(item1.deptCode, true); //并且把选中tree(只能是全部选中的时候记录的选中,但是不能回显下级的,因为树用的懒加载)
});
});
}
if (this.authType == 3) {
console.log("groupCheckData===", this.groupCheckData);
this.groupCheckData.map((item1, index1) => {
this.$nextTick(() => {
this.$refs.tree.setChecked(item1.deptCode, true); //并且把选中tree
});
});
}
}
return resolve(res.data);
} else {
return this.$message.error(res.message);
}
});
},
右边的tree,点击的时候,判断是左边那个树的节点html以及js
以下是html @check-change="handleCheckChange"
<el-tree
accordion
class="org_div"
@check-change="handleCheckChange"
@check="handleCheckedDept"
:render-content="renderContentCont"
:props="props"
:load="loadNode"
:lazy="lazy"
show-checkbox
node-key="deptCode"
ref="tree"
>
</el-tree>
右边change的时候,合并数据 有顺序的
handleCheckChange() {
if (this.authType == 1) {
//机构/部门
this.deptCheckData = this.getOrgList(); //只有父节点
this.deptCheckData.map((item1, index1) => {
if (this.searchCheckData.length) {
this.searchCheckData.map((item2) => {
if (item1.deptCode == item2.deptCode) {
this.deptCheckData.splice(index1, 1);
}
});
}
});
} else if (this.authType == 2) {
//管省区
this.proCheckData = this.getOrgList(); //只有父节点
this.proCheckData.map((item1, index1) => {
if (this.searchCheckData.length) {
this.searchCheckData.map((item2) => {
if (item1.deptCode == item2.deptCode) {
this.proCheckData.splice(index1, 1);
}
});
}
});
} else if (this.authType == 3) {
//常用群组
this.groupCheckData = this.getOrgList(); //只有父节点
this.groupCheckData.map((item1, index1) => {
if (this.searchCheckData.length) {
this.searchCheckData.map((item2) => {
if (item1.deptCode == item2.deptCode) {
this.groupCheckData.splice(index1, 1);
}
});
}
});
}
//重点来了,合并数据,扩展运算符
this.checkedNodes = [...this.groupCheckData, ...this.deptCheckData, ...this.proCheckData]
},
网友评论