<template>
|
<div class="updateUser">
|
<main>
|
<div class="mainContent">
|
<div class="my-tree">
|
<div class="my-tree__wrap">
|
<el-tree
|
ref="tree"
|
:data="roleList"
|
:props="defaultProps"
|
show-checkbox
|
:default-checked-keys="checkedIds"
|
default-expand-all
|
node-key="id"
|
>
|
</el-tree>
|
</div>
|
<!-- <div class="my-tree__bottom"></div> -->
|
<!-- <div class="my-tree__right"></div> -->
|
</div>
|
<div class="selection">
|
<el-button class="cancel" @click="resetRole">取消</el-button>
|
<el-button class="save" @click="saveRole">保存</el-button>
|
</div>
|
</div>
|
</main>
|
</div>
|
</template>
|
<script>
|
export default {
|
data() {
|
return {
|
role: {
|
name: "",
|
sort: "",
|
description: "",
|
},
|
roleList: [],
|
defaultProps: {
|
children: "children",
|
label: "title",
|
},
|
treeLabel: "",
|
treeId: 23,
|
checkedIds: [],
|
resCheckedIds: [],
|
};
|
},
|
created() {
|
const that = this;
|
this.getRoleMenus(this.userInfo.id);
|
this.getMenuList();
|
},
|
methods: {
|
// 获取系统菜单
|
getMenuList() {
|
this.$axios({
|
method: "get",
|
url: "sccg/menu/treeList",
|
}).then((res) => {
|
this.roleList = res.data;
|
});
|
},
|
// 树形控件复选框点击事件
|
handleCheck(data, checked) {
|
// console.log(checked.checkedKeys);
|
// this.checkedIds = checked.checkedKeys;
|
// console.log(this.checkedIds);
|
},
|
// 保存role
|
saveRole() {
|
let nodes = this.$refs.tree.getCheckedNodes(false, true);
|
|
const { userInfo } = this;
|
this.checkedIds = nodes.map((n) => n.id);
|
|
this.$axios({
|
method: "post",
|
url:
|
"sccg/role/allocMenu?roleId=" +
|
userInfo.id +
|
"&menuIds=" +
|
this.checkedIds,
|
}).then((res) => {
|
if (res.code === 200) {
|
this.$message({
|
type: "success",
|
message: "修改角色权限成功",
|
});
|
this.getRoleMenus(userInfo.id);
|
this.$emit("changeDialog", { flag: false });
|
// this.getUserList();
|
} else {
|
this.$message({
|
type: "warning",
|
message: res.message,
|
});
|
}
|
});
|
// this.$emit('changeDialog',{dialogUpdate:false});
|
},
|
// 消除role
|
resetRole() {
|
this.resCheckedIds = [];
|
this.$emit("changeDialog", { dialogUpdate: false });
|
},
|
// 获取角色菜单
|
getRoleMenus(roleId) {
|
this.$axios({
|
method: "get",
|
url: `sccg/role/listMenu/${roleId}`,
|
}).then((res) => {
|
this.checkedIds = [];
|
res.data.forEach((item) => {
|
this.checkedIds.push(item.id);
|
});
|
});
|
},
|
},
|
props: ["userInfo", "updateFlag", "getUserList", "changeDialog"],
|
};
|
</script>
|
<style lang="scss" scoped>
|
.updateUser {
|
border-radius: 1px;
|
background-color: #09152f;
|
|
main {
|
text-align: left;
|
padding: 50px 55px;
|
background-color: #09152f;
|
|
.mainContent {
|
.my-tree {
|
height: 200px;
|
overflow: hidden;
|
background-color: #17324c;
|
position: relative;
|
border-radius: 4px;
|
|
.my-tree__wrap {
|
overflow-y: scroll;
|
height: 200px;
|
}
|
|
.my-tree__bottom {
|
position: absolute;
|
left: 0px;
|
bottom: 0px;
|
background-color: #09152f;
|
width: 100%;
|
height: 20px;
|
border-bottom-left-radius: 4px;
|
}
|
|
.my-tree__right {
|
position: absolute;
|
right: 0px;
|
top: 0px;
|
background-color: #09152f;
|
width: 20px;
|
height: 100%;
|
}
|
}
|
}
|
}
|
|
&::v-deep .el-textarea__inner {
|
background-color: #09152f;
|
border: 1px solid #17324c;
|
}
|
|
::v-deep .el-input__inner {
|
background-color: #09152f;
|
border: 1px solid #17324c;
|
}
|
}
|
|
.selection {
|
margin-top: 10px;
|
display: flex;
|
justify-content: space-between;
|
|
.el-button {
|
padding: 10px 20px;
|
border-radius: 4px;
|
}
|
|
.save {
|
background-color: #409eff;
|
color: #fff;
|
}
|
|
.cancel {
|
background-color: #09152f;
|
color: #4b9bb7;
|
}
|
}
|
</style>
|
