|  |  | 
 |  |  | <template> | 
 |  |  |   <GlobalWindow :visible.sync="visible" :confirm-working="isWorking" width="80%" title="配置角色权限" @confirm="confirm"> | 
 |  |  |     <p class="tip" v-if="role != null">为角色 <em>{{ role.name }}</em> 配置权限</p> | 
 |  |  |     <p class="tip-warn"><i class="el-icon-warning"></i>提醒:权限配置后需重新登录后生效</p> | 
 |  |  |     <el-transfer ref="permissionTransfer" v-model="selectedIds" filterable class="transfer" | 
 |  |  |       :filter-method="filterPermissions" :titles="['未授权权限', '已授权权限']" :props="{ | 
 |  |  |         key: 'id', | 
 |  |  |         label: 'name' | 
 |  |  |       }" :data="permissions"> | 
 |  |  |     </el-transfer> | 
 |  |  |   <GlobalWindow | 
 |  |  |     class="permission-config-dialog" | 
 |  |  |     :visible.sync="visible" | 
 |  |  |     :confirm-working="isWorking" | 
 |  |  |     width="576px" | 
 |  |  |     title="授权权限" | 
 |  |  |     @confirm="confirm" | 
 |  |  |   > | 
 |  |  |     <p class="tip" v-if="role != null">为角色 <em>{{role.name}}</em> 配置权限</p> | 
 |  |  |     <el-tree | 
 |  |  |       ref="tree" | 
 |  |  |       :data="permissions" | 
 |  |  |       show-checkbox | 
 |  |  |       node-key="id" | 
 |  |  |       default-expand-all | 
 |  |  |       :default-checked-keys="selectedIds" | 
 |  |  |       :expand-on-click-node="false" | 
 |  |  |       :check-on-click-node="true" | 
 |  |  |       :props="{children: 'children',label: 'name'}"> | 
 |  |  |     </el-tree> | 
 |  |  |   </GlobalWindow> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  | import GlobalWindow from '@/components/common/GlobalWindow' | 
 |  |  | import { createRolePermission } from '@/api/system/role' | 
 |  |  | import { fetchAll } from '@/api/system/permission' | 
 |  |  | import { fetchTree } from '@/api/system/permission' | 
 |  |  | export default { | 
 |  |  |   name: 'PermissionConfigWindow', | 
 |  |  |   components: { GlobalWindow }, | 
 |  |  |   data() { | 
 |  |  |   data () { | 
 |  |  |     return { | 
 |  |  |       visible: false, | 
 |  |  |       isWorking: false, | 
 |  |  | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     /** | 
 |  |  |      * @role 角色对象 | 
 |  |  |      * 打开窗口 | 
 |  |  |      * | 
 |  |  |      * @param role 目标角色 | 
 |  |  |      */ | 
 |  |  |     open(role) { | 
 |  |  |       if (this.$refs.permissionTransfer) { | 
 |  |  |         this.$refs.permissionTransfer.clearQuery('left') | 
 |  |  |         this.$refs.permissionTransfer.clearQuery('right') | 
 |  |  |       } | 
 |  |  |       fetchAll() | 
 |  |  |     open (role) { | 
 |  |  |       fetchTree() | 
 |  |  |         .then(records => { | 
 |  |  |           this.role = role | 
 |  |  |           this.permissions = records | 
 |  |  |           // 如果为固定角色,则固定权限不可更改 | 
 |  |  |           if (this.role.fixed) { | 
 |  |  |             for (const perm of this.permissions) { | 
 |  |  |               if (perm.fixed) { | 
 |  |  |                 perm.disabled = true | 
 |  |  |               } | 
 |  |  |             } | 
 |  |  |             this.__handleFixedPermissions(this.permissions) | 
 |  |  |           } | 
 |  |  |           this.selectedIds = role.permissions.map(r => r.id) | 
 |  |  |           this.visible = true | 
 |  |  | 
 |  |  |           this.$tip.apiFailed(e) | 
 |  |  |         }) | 
 |  |  |     }, | 
 |  |  |     // 确认选择权限 | 
 |  |  |     confirm() { | 
 |  |  |     /** | 
 |  |  |      * 确认选择权限 | 
 |  |  |      */ | 
 |  |  |     confirm () { | 
 |  |  |       const selectedPermissions = this.$refs.tree.getCheckedNodes(false, true).filter(item => item.type !== 'module').map(item => item.id) | 
 |  |  |       this.isWorking = true | 
 |  |  |       createRolePermission({ | 
 |  |  |         roleId: this.role.id, | 
 |  |  |         permissionIds: this.selectedIds | 
 |  |  |         permissionIds: selectedPermissions | 
 |  |  |       }) | 
 |  |  |         .then(() => { | 
 |  |  |           this.$tip.apiSuccess('权限配置成功,用户重新登录后生效') | 
 |  |  |           this.visible = false | 
 |  |  |           this.$emit('success') | 
 |  |  |           setTimeout(() => { | 
 |  |  |             this.$dialog.attentionConfirm('权限配置成功,用户需重新登录后生效').then(() => {}) | 
 |  |  |           }, 300) | 
 |  |  |         }) | 
 |  |  |         .catch(e => { | 
 |  |  |           this.$tip.apiFailed(e) | 
 |  |  | 
 |  |  |           this.isWorking = false | 
 |  |  |         }) | 
 |  |  |     }, | 
 |  |  |     // 搜索权限 | 
 |  |  |     filterPermissions(query, item) { | 
 |  |  |       const lowerCaseQuery = query.toLowerCase() | 
 |  |  |       return item.code.toLowerCase().indexOf(lowerCaseQuery) > -1 || item.name.toLowerCase().indexOf(lowerCaseQuery) > -1 | 
 |  |  |     /** | 
 |  |  |      * 处理固定权限 | 
 |  |  |      * | 
 |  |  |      * @param permissions 权限列表 | 
 |  |  |      * @param module 所属模块 | 
 |  |  |      * @private | 
 |  |  |      */ | 
 |  |  |     __handleFixedPermissions (permissions, module) { | 
 |  |  |       if (permissions == null) { | 
 |  |  |         return | 
 |  |  |       } | 
 |  |  |       for (const permission of permissions) { | 
 |  |  |         if (permission.type !== 'module') { | 
 |  |  |           if (permission.fixed) { | 
 |  |  |             permission.disabled = true | 
 |  |  |             if (module != null) { | 
 |  |  |               module.disabled = true | 
 |  |  |             } | 
 |  |  |           } | 
 |  |  |           continue | 
 |  |  |         } | 
 |  |  |         this.__handleFixedPermissions(permission.children, permission) | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | 
 |  |  |  | 
 |  |  | <style scoped lang="scss"> | 
 |  |  | @import "@/assets/style/variables.scss"; | 
 |  |  |  | 
 |  |  | .global-window { | 
 |  |  |   .tip { | 
 |  |  |     em { | 
 |  |  | 
 |  |  |       color: $primary-color; | 
 |  |  |       font-weight: bold; | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |   .tip-warn { | 
 |  |  |     margin: 4px 0 12px 0; | 
 |  |  |     font-size: 12px; | 
 |  |  |     color: #999; | 
 |  |  |  | 
 |  |  |     i { | 
 |  |  |       color: orange; | 
 |  |  |       margin-right: 4px; | 
 |  |  |       font-size: 14px; | 
 |  |  |       position: relative; | 
 |  |  |       top: 1px; | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .transfer { | 
 |  |  |   height: 600px; | 
 |  |  |   width: 100%; | 
 |  |  |   display: flex; | 
 |  |  |   justify-content: center; | 
 |  |  |   align-items: center; | 
 |  |  |  | 
 |  |  |   ::v-deep .el-transfer-panel { | 
 |  |  |     flex: 1; | 
 |  |  |     height: 100%; | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |   ::v-deep .el-transfer-panel__body { | 
 |  |  |     height: 500px; | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |   ::v-deep .el-transfer-panel__list.is-filterable { | 
 |  |  |     height: 480px; | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | </style> |