1

src/views/test/index.vue

@@ -1,44 +1,42 @@
 <template>
-    <!-- content="目前mock了两组数据， id为1 和 2 具体返回的菜单可以在mock/sys/menu.ts内查看" -->
-
-  <PageWrapper
-    title="后台权限示例"
-    contentBackground
-    contentClass="p-4"
-  >
-    <CurrentPermissionMode />
-
-    <!-- <Alert class="mt-4" type="info" message="点击后请查看左侧菜单变化" show-icon /> -->
-
-    <!-- <div class="mt-4">
-      权限切换(请先切换权限模式为后台权限模式):
-      <a-button-group>
-        <a-button @click="changeMenu('1')"> 获取用户id为1的菜单 </a-button>
-        <a-button @click="changeMenu('2')"> 获取用户id为2的菜单 </a-button>
-      </a-button-group>
-    </div> -->
+    <PageWrapper
+        title="后台权限示例"
+        contentBackground
+        contentClass="p-4"
+    >
+    <div class="mt-2">
+        当前权限模式：
+        <a-button type="link">
+            {{ permissionMode === PermissionModeEnum.BACK ? '后台权限模式' : '前端角色权限模式' }}
+        </a-button>
+        <a-button class="ml-4" @click="togglePermissionMode" type="primary"> 切换权限模式 </a-button>
+        <Divider />
+    </div>
   </PageWrapper>
+
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
-  import CurrentPermissionMode from '../CurrentPermissionMode.vue';
-  import { RoleEnum } from '/@/enums/roleEnum';
+  import { defineComponent, computed } from 'vue';
+  import { appStore } from '/@/store/modules/app';
+  import { PermissionModeEnum } from '/@/enums/appEnum';
+  import { Divider } from 'ant-design-vue';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { PageWrapper } from '/@/components/Page';
-  import { Alert } from 'ant-design-vue';
+
   export default defineComponent({
-    components: { Alert, CurrentPermissionMode, PageWrapper },
+    name: 'CurrentPermissionMode',
+    components: { Divider, PageWrapper },
     setup() {
-      const { changeMenu } = usePermission();
+      const permissionMode = computed(() => {
+        return appStore.getProjectConfig.permissionMode;
+      });
+      const { togglePermissionMode } = usePermission();
+
       return {
-        RoleEnum,
-        changeMenu,
+        permissionMode,
+        PermissionModeEnum,
+        togglePermissionMode,
       };
     },
   });
 </script>
-<style lang="less" scoped>
-  .demo {
-    background: #fff;
-  }
-</style>