| | |
| | | <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 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 class="my-tree__bottom"></div> --> |
| | | <!-- <div class="my-tree__right"></div> --> |
| | | </div> |
| | | <div class="selection"> |
| | | <el-button class="cancel" @click="resetRole">取消</el-button> |
| | |
| | | }, |
| | | created() { |
| | | const that = this; |
| | | this.getRoleMenus(this.userInfo.id); |
| | | 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({ |
| | |
| | | }) |
| | | .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); |
| | | } |
| | | // 树形控件复选框点击事件 |
| | | 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.$emit('changeDialog',{dialogUpdate:false}); |
| | | 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.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'] |
| | |
| | | .updateUser { |
| | | border-radius: 1px; |
| | | background-color: #09152f; |
| | | |
| | | main { |
| | | text-align: left; |
| | | padding: 50px 55px; |
| | | background-color: #09152f; |
| | | |
| | | .mainContent { |
| | | .my-tree { |
| | | height: 200px; |
| | |
| | | background-color: #17324c; |
| | | position: relative; |
| | | border-radius: 4px; |
| | | .my-tree__wrap{ |
| | | overflow: scroll; |
| | | |
| | | .my-tree__wrap { |
| | | overflow-y: scroll; |
| | | height: 200px; |
| | | } |
| | | .my-tree__bottom{ |
| | | |
| | | .my-tree__bottom { |
| | | position: absolute; |
| | | left: 0px; |
| | | bottom: 0px; |
| | | background-color: #17324c; |
| | | background-color: #09152f; |
| | | width: 100%; |
| | | height: 20px; |
| | | border-bottom-left-radius: 4px; |
| | | } |
| | | .my-tree__right{ |
| | | |
| | | .my-tree__right { |
| | | position: absolute; |
| | | right: 0px; |
| | | top: 0px; |
| | | background-color: #17324c; |
| | | background-color: #09152f; |
| | | width: 20px; |
| | | height: 100%; |
| | | } |
| | |
| | | margin-top: 10px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | |
| | | .el-button { |
| | | padding: 10px 20px; |
| | | border-radius: 4px; |