<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 @check="handleCheck"
|
: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() {
|
this.resCheckedIds = [];
|
const { userInfo } = this;
|
this.resCheckedIds = this.checkedIds;
|
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: 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>
|
