<template>
|
<div class="params-container">
|
<el-tree :data="data" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current
|
:props="defaultProps" :default-checked-keys="select">
|
</el-tree>
|
<div class="form-footer">
|
<three-btn @click="undateMenu">完成</three-btn>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import ThreeBtn from '@/components/ThreeBtn.vue'
|
import {
|
searchRoleMenu,
|
updateRoleMenu
|
} from '../js/api';
|
export default {
|
props: ["authorityId"],
|
components: {
|
ThreeBtn
|
},
|
data() {
|
return {
|
data: [],
|
defaultProps: {
|
children: 'subMenus',
|
label: 'name'
|
},
|
select: []
|
}
|
},
|
methods: {
|
// 选中子节点，默认选中父节点
|
checkeTree(data) {
|
let thisNode = this.$refs.tree.getNode(data.id) // 获取当前节点
|
const keys = this.$refs.tree.getCheckedKeys() // 获取已勾选节点的key值
|
if (thisNode.checked) { // 当前节点若被选中
|
for (let i = thisNode.level; i > 1; i--) { // 判断是否有父级节点
|
if (!thisNode.parent.checked) { // 父级节点未被选中，则将父节点替换成当前节点，往上继续查询，并将此节点key存入keys数组
|
thisNode = thisNode.parent
|
keys.push(thisNode.data.id)
|
}
|
}
|
}
|
this.$refs.tree.setCheckedKeys(keys) // 将所有keys数组的节点全选中
|
},
|
undateMenu() {
|
let params = {
|
roleId: this.authorityId
|
}
|
let postData = this.$refs.tree.getCheckedKeys();
|
updateRoleMenu(params, postData).then((res) => {
|
if (res.data.code == 1) {
|
this.$message.success("添加成功！")
|
this.$emit("success", false)
|
} else {
|
this.$message.error(res.data.msg)
|
}
|
}).catch((err) => {
|
console.log(err)
|
});
|
},
|
loadRoleMenu(id) {
|
let postData = {
|
roleId: id
|
}
|
searchRoleMenu(postData).then((res) => {
|
this.data = res.data;
|
this.data.map(item => {
|
if (item.selected) {
|
this.select.push(item.id)
|
}
|
if (item.subMenus && item.subMenus.length > 0) {
|
item.subMenus.map(jtem => {
|
if (jtem.selected) {
|
this.select.push(jtem.id)
|
}
|
if (jtem.subMenus && jtem.subMenus.length > 0) {
|
jtem.subMenus.map(ktem => {
|
if (ktem.selected) {
|
this.select.push(ktem.id)
|
}
|
})
|
}
|
})
|
}
|
})
|
}).catch((err) => {
|
console.log(err)
|
});
|
}
|
},
|
mounted() {
|
this.loadRoleMenu(this.authorityId);
|
}
|
}
|
</script>
|
|
<style scoped>
|
.params-container {
|
width: 100%;
|
background-color: #222767;
|
max-height: 600px;
|
overflow-y: auto;
|
}
|
|
.table-layout {
|
margin-top: 16px;
|
}
|
|
.bg-white .table-cell {
|
color: #000000;
|
}
|
|
.el-form-item.inline {
|
display: flex;
|
align-items: center;
|
margin-top: 10px;
|
margin: 15px 4px 8px;
|
}
|
|
.el-form-item.inline /deep/ .el-form-item__content {
|
display: flex;
|
align-items: center;
|
flex: 1;
|
}
|
|
.el-form-item.inline /deep/ .el-input {
|
flex: 1;
|
}
|
|
.el-form-item.inline /deep/ .el-input:first-of-type {
|
margin-left: 0;
|
}
|
|
.el-form-item.inline /deep/ .el-form-item__label {
|
width: 110px;
|
white-space: nowrap;
|
text-align: right;
|
padding-right: 8px;
|
}
|
|
.params-container /deep/ .el-radio__label {
|
color: #333333;
|
}
|
</style>
|
