| | |
| | | <div class="mainContent"> |
| | | <div class="my-tree"> |
| | | <div class="my-tree__wrap"> |
| | | <!-- @node-click="handleNodeClick" --> |
| | | <el-tree ref="tree" :data="roleList" :props="defaultProps" show-checkbox |
| | | @check="handleCheck" :default-checked-keys="checkedIds" 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> |
| | |
| | | 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({ |
| | |
| | | this.roleList = res.data; |
| | | }) |
| | | }, |
| | | // 点击树节点 |
| | | handleNodeClick({ title, id }) { |
| | | // console.log(obj); |
| | | this.role.sort = title; |
| | | this.treeLabel = title; |
| | | this.treeId = id; |
| | | |
| | | }, |
| | | // 树形控件复选框点击事件 |
| | | handleCheck(data, checked) { |
| | | console.log(checked.checkedKeys); |
| | |
| | | // 保存role |
| | | saveRole() { |
| | | this.resCheckedIds = []; |
| | | const {userInfo} = this; |
| | | const { userInfo } = this; |
| | | this.resCheckedIds = this.checkedIds; |
| | | this.$axios({ |
| | | method:'post', |
| | | url:'sccg/role/allocMenu?roleId='+userInfo.id + '&menuIds=' + this.checkedIds, |
| | | 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); |
| | | }else{ |
| | | this.$message({ |
| | | type:'warning', |
| | | message:res.message |
| | | }) |
| | | } |
| | | }) |
| | | .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}); |
| | | this.$emit('changeDialog', { dialogUpdate: false }); |
| | | }, |
| | | // 获取角色菜单 |
| | | getRoleMenus(roleId){ |
| | | getRoleMenus(roleId) { |
| | | this.$axios({ |
| | | method:'get', |
| | | url:`sccg/role/listMenu/${roleId}` |
| | | method: 'get', |
| | | url: `sccg/role/listMenu/${roleId}` |
| | | }) |
| | | .then(res=>{ |
| | | this.checkedIds = []; |
| | | res.data.forEach(item=>{ |
| | | this.checkedIds.push(item.id); |
| | | .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{ |
| | | |
| | | .my-tree__wrap { |
| | | overflow: 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; |