|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <GlobalWindow | 
|---|
|  |  |  | :visible.sync="visible" | 
|---|
|  |  |  | :confirm-working="isWorking" | 
|---|
|  |  |  | width="582px" | 
|---|
|  |  |  | title="配置角色权限" | 
|---|
|  |  |  | @confirm="confirm" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <p class="tip" v-if="role != null">为角色 <em>{{role.name}}</em> 配置权限</p> | 
|---|
|  |  |  | <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="{ | 
|---|
|  |  |  | <el-transfer ref="permissionTransfer" v-model="selectedIds" filterable class="transfer" | 
|---|
|  |  |  | :filter-method="filterPermissions" :titles="['未授权权限', '已授权权限']" :props="{ | 
|---|
|  |  |  | key: 'id', | 
|---|
|  |  |  | label: 'name' | 
|---|
|  |  |  | }" | 
|---|
|  |  |  | :data="permissions"> | 
|---|
|  |  |  | }" :data="permissions"> | 
|---|
|  |  |  | </el-transfer> | 
|---|
|  |  |  | </GlobalWindow> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | name: 'PermissionConfigWindow', | 
|---|
|  |  |  | components: { GlobalWindow }, | 
|---|
|  |  |  | data () { | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | visible: false, | 
|---|
|  |  |  | isWorking: false, | 
|---|
|  |  |  | 
|---|
|  |  |  | /** | 
|---|
|  |  |  | * @role 角色对象 | 
|---|
|  |  |  | */ | 
|---|
|  |  |  | open (role) { | 
|---|
|  |  |  | open(role) { | 
|---|
|  |  |  | if (this.$refs.permissionTransfer) { | 
|---|
|  |  |  | this.$refs.permissionTransfer.clearQuery('left') | 
|---|
|  |  |  | this.$refs.permissionTransfer.clearQuery('right') | 
|---|
|  |  |  | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 确认选择权限 | 
|---|
|  |  |  | confirm () { | 
|---|
|  |  |  | confirm() { | 
|---|
|  |  |  | this.isWorking = true | 
|---|
|  |  |  | createRolePermission({ | 
|---|
|  |  |  | roleId: this.role.id, | 
|---|
|  |  |  | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 搜索权限 | 
|---|
|  |  |  | filterPermissions (query, item) { | 
|---|
|  |  |  | filterPermissions(query, item) { | 
|---|
|  |  |  | const lowerCaseQuery = query.toLowerCase() | 
|---|
|  |  |  | return item.code.toLowerCase().indexOf(lowerCaseQuery) > -1 || item.name.toLowerCase().indexOf(lowerCaseQuery) > -1 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style scoped lang="scss"> | 
|---|
|  |  |  | @import "@/assets/style/variables.scss"; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .global-window { | 
|---|
|  |  |  | .tip { | 
|---|
|  |  |  | em { | 
|---|
|  |  |  | 
|---|
|  |  |  | font-weight: bold; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .tip-warn { | 
|---|
|  |  |  | margin: 4px 0 12px 0; | 
|---|
|  |  |  | font-size: 12px; | 
|---|
|  |  |  | color: #999; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | i { | 
|---|
|  |  |  | color: orange; | 
|---|
|  |  |  | margin-right: 4px; | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .transfer { | 
|---|
|  |  |  | height: 600px; | 
|---|
|  |  |  | width: 100%; | 
|---|