vben
2020-10-31 2407b3368c3fc5128bbfced98a1d2c70fa3e02e0
提交 | 用户 | age
2f6253 1 <template>
03b602 2   <div class="p-4 m-4 demo">
2f6253 3     <Alert
4       message="由于刷新的时候会请求用户信息接口,会根据接口重置角色信息,所以刷新后界面会恢复原样,如果不需要,可以注释 src/layout/default/index内的获取用户信息接口"
5       show-icon
6     />
7     <CurrentPermissionMode />
8
9     <p>
10       当前角色: <a> {{ userStore.getRoleListState }} </a>
11     </p>
12     <Alert class="mt-4" type="info" message="点击后请查看左侧菜单变化" show-icon />
13
14     <div class="mt-4">
15       权限切换(请先切换权限模式为前端角色权限模式):
16       <a-button-group>
2407b3 17         <a-button @click="changeRole(RoleEnum.SUPER)" :type="isSuper ? 'primary' : 'default'">
2f6253 18           {{ RoleEnum.SUPER }}
19         </a-button>
2407b3 20         <a-button @click="changeRole(RoleEnum.TEST)" :type="isTest ? 'primary' : 'default'">
2f6253 21           {{ RoleEnum.TEST }}
22         </a-button>
23       </a-button-group>
24     </div>
25   </div>
26 </template>
27 <script lang="ts">
28   import { computed, defineComponent } from 'vue';
29   import { Alert } from 'ant-design-vue';
30   import CurrentPermissionMode from '../CurrentPermissionMode.vue';
31   import { userStore } from '/@/store/modules/user';
32   import { RoleEnum } from '/@/enums/roleEnum';
33   import { usePermission } from '/@/hooks/web/usePermission';
34
35   export default defineComponent({
36     components: { Alert, CurrentPermissionMode },
37     setup() {
38       const { changeRole } = usePermission();
39       return {
40         userStore,
41         RoleEnum,
42         isSuper: computed(() => userStore.getRoleListState.includes(RoleEnum.SUPER)),
43         isTest: computed(() => userStore.getRoleListState.includes(RoleEnum.TEST)),
44         changeRole,
45       };
46     },
47   });
48 </script>
03b602 49 <style lang="less" scoped>
N 50   .demo {
51     background: #fff;
52   }
53 </style>