| | |
| | | <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%; |