<template>
<el-dialog
title="菜单权限"
:visible.sync="isShow"
width="500px"
:before-close="handleClose"
:destroy-on-close="true"
>
<div>
<el-tree :data="setTree" show-checkbox node-key="id" :props="defaultProps">
</el-tree>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="close()">取 消</el-button>
<el-button :loading="isLoading.changeForm" type="primary" @click="verifyForm"
>确认</el-button
>
</span>
</el-dialog>
</template>
<script>
export default {
name: "roleManageChangeDialog",
data() {
return {
isShow: false,
form: {
},
setTree: [],
defaultProps: {
children: "childs",
label: "menuName",
},
isLoading: {
changeForm: false,
},
uidList: [], //菜单id列表
};
},
created() {
},
methods: {
handleClose(done) {
this.$emit("close");
done();
},
// 按钮关闭
close() {
this.$emit("close");
this.isShow = false;
},
// 显示
setShow(item) {
this.form = {
};
console.log("显示");
if (item && item.id) {
this.$set(this.form, "id", item.id);
/* this.getForm(item,tyep);*/
this.getTreeData();
this.getTreeModel();
}
this.isShow = true;
},
// 获取树形控件数据
getTreeData() {
let params = {
};
this.$http
.request("getAllMenuList", params)
.then((data) => {
this.setTree = data.data;
console.log(this.setTree);
// 递归及选中、更改菜单id（防止菜单id和按钮id重复）
this.uidList = [];
this.disposeTree(this.setTree);
})
.catch((err) => {
console.log(err);
});
},
// 处理菜单
// children: "childs", label: "menuName", 【{b}，{}《{}】
disposeTree(list, isBtns = false) {
let f = this.uidList; //菜单列表id
if (!isBtns) {
// 菜单
for (let i in list) {
if (list[i].childs && list[i].childs.length > 0) {
// 菜单 --并且有子菜单
list[i].id = "z_" + list[i].id;
f.push(list[i].id);
this.disposeTree(list[i].childs, false);
} else {
// 菜单 无子菜单
list[i].id = "z_" + list[i].id;
f.push(list[i].id);
if (list[i].btns) {
let childs = [];
let btns = list[i].btns;
console.log(btns);
for (let j in btns) {
childs.push({
id: btns[j].id,
menuName: btns[j].btnName,
});
}
list[i].childs = childs;
}
}
}
}
this.$forceUpdate();
},
// 获取树形控件选中数据
getTreeModel() {
this.modelKey = [];
},
// 验证
verifyForm() {
this.changePermission();
},
//更改权限
changePermission() {
let params = {
roleId: this.form.id,
// menus:this.$refs.tree.getTree(),
};
this.$set(this.isLoading, "changeForm", true);
this.$http
.request("roleEditRoleMenu", params)
.then((data) => {
this.$set(this.isLoading, "changeForm", false);
this.$message({
type: "success",
message: `更改角色权限成功！`,
});
this.isShow = false;
this.$emit("changeReturn");
this.$emit("close");
})
.catch((err) => {
this.$set(this.isLoading, "changeForm", false);
});
},
// 修改
modifyForm() {
},
},
components: {
},
props: [],
// 监听
watch: {
},
};
</script>
<style></style>
树形结构图：
数据结构：
