提交 | 用户 | 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> |