<template>
|
<div class="updateUser">
|
<main>
|
<div class="mainContent">
|
<div class="my-tree">
|
<div class="my-tree__wrap">
|
<el-tree :data="roleList" :props="defaultProps" @node-click="handleNodeClick" show-checkbox
|
@check-change="handleCheckChange" 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.getMenuList();
|
},
|
methods: {
|
handleUser() {
|
this.$refs.user.validate((valid) => {
|
if (valid) {
|
const { role } = this;
|
console.log(role);
|
this.$axios.post('/sccg/role/update/' + role.id, {
|
id: role.id,
|
status: role.status,
|
description: role.description,
|
name: role.name,
|
sort: 0
|
}).then(res => {
|
this.$emit('changeDialog', { dialogUpdate: false });
|
this.getUserList();
|
})
|
} else {
|
return false;
|
}
|
})
|
},
|
// 获取系统菜单
|
getMenuList() {
|
this.$axios({
|
method: 'get',
|
url: 'sccg/menu/treeList',
|
})
|
.then(res => {
|
this.roleList = res.data;
|
console.log(res);
|
})
|
},
|
// 点击树节点
|
handleNodeClick({ title, id }) {
|
// console.log(obj);
|
this.role.sort = title;
|
this.treeLabel = title;
|
this.treeId = id;
|
|
},
|
// 树形控件选中更改
|
handleCheckChange(data, checked, indeterminate) {
|
// console.log(data,checked,indeterminate);
|
if (checked) {
|
this.checkedIds.push(data.id);
|
} else {
|
let index = 0;
|
this.checkedIds.forEach((item, idx) => {
|
if (item.id === data.id) {
|
index = idx;
|
}
|
})
|
this.checkedIds.splice(index, 1);
|
}
|
console.log(this.checkedIds);
|
},
|
// 保存role
|
saveRole() {
|
this.resCheckedIds = [];
|
this.resCheckedIds = this.checkedIds;
|
this.$emit('changeDialog',{dialogUpdate:false});
|
},
|
// 消除role
|
resetRole() {
|
this.resCheckedIds = []
|
}
|
},
|
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: #17324c;
|
width: 100%;
|
height: 20px;
|
border-bottom-left-radius: 4px;
|
}
|
.my-tree__right{
|
position: absolute;
|
right: 0px;
|
top: 0px;
|
background-color: #17324c;
|
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>
|
