|  |  |  | 
|---|
|  |  |  | <GlobalWindow | 
|---|
|  |  |  | :visible.sync="visible" | 
|---|
|  |  |  | :confirm-working="isWorking" | 
|---|
|  |  |  | width="620px" | 
|---|
|  |  |  | width="582px" | 
|---|
|  |  |  | title="配置用户角色" | 
|---|
|  |  |  | @confirm="confirm" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <p class="tip" v-if="user != null">为用户 <em>{{user.realname}}</em> 配置角色</p> | 
|---|
|  |  |  | <p class="tip-warn"><i class="el-icon-warning"></i>提醒:角色配置后需重新登录后生效</p> | 
|---|
|  |  |  | <div class="df_center"> | 
|---|
|  |  |  | <el-transfer | 
|---|
|  |  |  | <el-transfer | 
|---|
|  |  |  | v-model="selectedIds" | 
|---|
|  |  |  | class="transfer" | 
|---|
|  |  |  | :titles="['未授权角色', '已授权角色']" | 
|---|
|  |  |  | :props="{ | 
|---|
|  |  |  | key: 'id', | 
|---|
|  |  |  | 
|---|
|  |  |  | }" | 
|---|
|  |  |  | :data="roles"> | 
|---|
|  |  |  | </el-transfer> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </GlobalWindow> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | /** | 
|---|
|  |  |  | * 打开窗口 | 
|---|
|  |  |  | * | 
|---|
|  |  |  | * @param user 目标用户 | 
|---|
|  |  |  | */ | 
|---|
|  |  |  | open (user) { | 
|---|
|  |  |  | fetchAllRoles() | 
|---|
|  |  |  | .then(records => { | 
|---|
|  |  |  | 
|---|
|  |  |  | this.$tip.apiFailed(e) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 确认选择角色 | 
|---|
|  |  |  | /** | 
|---|
|  |  |  | * 确认选择角色 | 
|---|
|  |  |  | */ | 
|---|
|  |  |  | confirm () { | 
|---|
|  |  |  | if (this.isWorking) { | 
|---|
|  |  |  | return | 
|---|
|  |  |  | 
|---|
|  |  |  | roleIds: this.selectedIds | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .then(() => { | 
|---|
|  |  |  | this.$tip.apiSuccess('角色配置成功,用户重新登录后生效') | 
|---|
|  |  |  | this.visible = false | 
|---|
|  |  |  | this.$emit('success') | 
|---|
|  |  |  | setTimeout(() => { | 
|---|
|  |  |  | this.$dialog.attentionConfirm('角色配置成功,用户需重新登录后生效').then(() => {}) | 
|---|
|  |  |  | }, 300) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .catch(e => { | 
|---|
|  |  |  | this.$tip.apiFailed(e) | 
|---|
|  |  |  | 
|---|
|  |  |  | 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> | 
|---|