| | |
| | | <input |
| | | v-if="data.isEdit" |
| | | :ref="data.code" |
| | | v-model="node.label" |
| | | v-model="data.name" |
| | | type="text" |
| | | @click.stop |
| | | @blur="roleSave(data)" |
| | |
| | | </div> |
| | | |
| | | <div |
| | | style="margin-left: 15px;width:100%;position: relative" |
| | | style="margin-left: 10px;width:100%;position: relative" |
| | | > |
| | | |
| | | <el-button |
| | |
| | | <script> |
| | | import waves from '@/directive/waves' |
| | | import { |
| | | DataPermissions, |
| | | RoleAddUpdateSava, RoleDeleteSava, |
| | | RolePermissionSava, |
| | | RolePermissionSearchRole, |
| | | RolePermissionSearchRoleMenu, |
| | |
| | | } from '@/api/basicSettings' |
| | | import arrayToTree from 'array-to-tree' |
| | | import { throttle } from '@/utils/debounceAndThrottle' |
| | | import { DataPermissions } from '@/api/GeneralBasicData' |
| | | |
| | | export default { |
| | | name: 'RoleList', |
| | |
| | | // 获取菜单权限对应的按钮 |
| | | async getRolePermissionSearchRoleMenuButton(rolecode) { |
| | | const { data: res } = await RolePermissionSearchRoleMenuButton({ rolecode, type: this.activeName }) |
| | | this.allButtonData = JSON.parse(res[0].jsondate) |
| | | this.allButtonData = res.length > 0 ? JSON.parse(res[0].jsondate) : [] |
| | | }, |
| | | // 获取菜单权限 |
| | | async getRolePermissionSearchRoleMenu(rolecode) { |
| | |
| | | it.buttoncodelist.includes(j.buttoncode) |
| | | ) |
| | | |
| | | // let temp = this.allButtonData.filter(j => j.menucode === it.menucode).length > 0 ? this.allButtonData.filter(j => j.menucode === it.menucode)[0].buttoncode : [] |
| | | // temp = temp.length > 0 ? temp.split(',') : [] |
| | | |
| | | // it.buttonChecked = [] // 数据回显 |
| | | // it.buttoncodelist.forEach(j => { |
| | | // if (temp.includes(j.buttoncode)) { |
| | | // it.buttonChecked.push(j.buttonname) |
| | | // } |
| | | // }) |
| | | |
| | | it.buttoncodelist = it.buttoncodelist.map(j => j.buttonname) |
| | | } |
| | | |
| | |
| | | it.datacodelist.includes(j.datacode) |
| | | ).map(j => j.dataname) |
| | | } |
| | | // const datacode = this.allButtonData.filter(j => j.menucode === it.menucode).length > 0 ? this.allButtonData.filter(j => j.menucode === it.menucode)[0].datacode : '' |
| | | // it.dataChecked = datacode ? this.dataKeyValue.find(j => j.datacode === datacode).dataname : '' // 数据回显 |
| | | }) |
| | | |
| | | item.expanded = true |
| | |
| | | }, |
| | | // 单个按钮改变 |
| | | handleCheckedButtonChange(oldValue, index, code, newValue, flag) { |
| | | console.log(oldValue, index, code, newValue, 2) |
| | | // console.log(oldValue, index, code, newValue, 2) |
| | | // 判断是否包含在内 |
| | | if (!flag) { |
| | | if (!this.menuCheckedCodeArr.includes(code) && oldValue.length === 0 && newValue.length === 1) { // 否 |
| | |
| | | // 处理中间树形选中值改变 |
| | | handleTreeCenterCheckChange(obj, selfChecked, selfChildrenTreeCheck) { |
| | | // console.log(obj, selfChecked, selfChildrenTreeCheck, '王老吉') |
| | | console.log(selfChecked, 10) |
| | | if (!selfChildrenTreeCheck) { |
| | | if (!selfChecked) { // 从选中到不选中 |
| | | obj.buttonChecked = [] |
| | |
| | | this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== obj.menucode) |
| | | } |
| | | if (selfChecked) { // 从不选中到选中 |
| | | console.log(obj, 9) |
| | | obj.buttonCheckedCode = [] |
| | | this.treeCenter[0].children.forEach(item => { |
| | | if (item.children && item.children.length) { |
| | |
| | | }, |
| | | // 角色名称新增 |
| | | rolePlusClick() { |
| | | this.treeLeft[0].roles.push({ code: 1234, name: '', isEdit: true }) |
| | | this.treeLeft[0].roles.push({ code: '', name: '', isEdit: true }) |
| | | }, |
| | | // 角色名称修改 |
| | | roleEditClick(self, node, data) { |
| | |
| | | // 角色名称删除 |
| | | roleDeleteClick(self, node, data) { |
| | | // console.log(self, node, data) |
| | | // this.treeLeft[0].roles.forEach((item, index) => { |
| | | // if (item.code === data.code) { |
| | | // this.treeLeft[0].roles.splice(index, 1) // 暂时先写成前端删除,后期调用接口删除 |
| | | // } |
| | | // }) |
| | | this.$confirm('是否确认删除?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | const D = { |
| | | rolecode: data.code, |
| | | rolename: data.name, |
| | | type: this.activeName |
| | | } |
| | | RoleDeleteSava(D).then(res => { |
| | | if (res.code === '200') { |
| | | this.$notify.success('角色删除成功!') |
| | | } |
| | | this.getRolePermissionSearchRole() |
| | | }) |
| | | }).catch(() => { |
| | | this.$notify.info('已取消删除') |
| | | }) |
| | | }, |
| | | // 角色名称保存 采用防抖形式 |
| | | roleSave: throttle(function(data) { |
| | | data.isEdit = false |
| | | console.log('执行了!') |
| | | roleSave: throttle(function(val) { |
| | | val.isEdit = false |
| | | |
| | | if (val.name.trim().length === 0) { |
| | | this.getRolePermissionSearchRole() |
| | | return this.$notify.info('无效保存!') |
| | | } |
| | | |
| | | const data = { |
| | | rolecode: val.code, |
| | | rolename: val.name, |
| | | type: val.code === '' ? 'Add' : 'Update' |
| | | } |
| | | console.log(data, '执行了!') |
| | | RoleAddUpdateSava(data).then(res => { |
| | | if (res.code === '200') { |
| | | this.$notify.success(val.code === '' ? '角色新增成功!' : '角色修改成功!') |
| | | } |
| | | }) |
| | | this.getRolePermissionSearchRole() |
| | | }, 1000, true), |
| | | |
| | | // 页面勾选好保存事件 |
| | |
| | | } |
| | | }) |
| | | |
| | | console.log(arr, 'arr') |
| | | const rolecode = this.$refs.treeLeftRef.getCurrentKey() |
| | | const res = await RolePermissionSava(JSON.stringify(arr), rolecode, this.activeName) |
| | | if (res.code === '200') { |
| | | const rolename = this.treeLeft[0].roles.find(i => i.code === rolecode).name |
| | | this.$notify.success(rolename + '的角色权限提交成功!') |
| | | await this.getRolePermissionSearchRoleMenuButton(rolecode) |
| | | // await this.getRolePermissionSearchRoleMenu(rolecode) |
| | | } |
| | | // this.$forceUpdate() |
| | | }, |
| | | // 获取页面高度 |
| | | getHeight() { |
| | |
| | | width: 55px; |
| | | } |
| | | |
| | | .el-icon-plus:hover,.el-icon-edit:hover,.el-icon-delete:hover{ |
| | | .el-icon-plus:hover, .el-icon-edit:hover, .el-icon-delete:hover { |
| | | color: #000 !important; |
| | | } |
| | | </style> |