From 026dd3762cd2d970f512146f261732bde98b10d0 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Sun, 6 Oct 2024 16:41:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=A7=9F=E6=88=B7/=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E5=8F=AA=E6=9C=89=E7=AE=A1=E7=90=86=E5=91=98=E6=89=8D=E8=83=BD?=
 =?UTF-8?q?=E8=AE=BF=E9=97=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/system/menu/index.vue | 20 ++++++++++++++++++-
 .../src/views/system/tenant/index.vue         | 16 ++++++++++++---
 .../src/views/system/tenantPackage/index.vue  | 16 ++++++++++++---
 3 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/apps/web-antd/src/views/system/menu/index.vue b/apps/web-antd/src/views/system/menu/index.vue
index 54525ed4..cce6e0af 100644
--- a/apps/web-antd/src/views/system/menu/index.vue
+++ b/apps/web-antd/src/views/system/menu/index.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
+import { computed } from 'vue';
+
+import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
+import { Fallback } from '@vben/common-ui';
 import { listToTree } from '@vben/utils';
 
 import { Popconfirm, Space } from 'ant-design-vue';
@@ -83,10 +87,23 @@ function expandAll() {
 function collapseAll() {
   tableApi.grid?.setAllTreeExpand(false);
 }
+
+/**
+ * 与后台逻辑相同
+ * 只有租户管理和超级管理能访问菜单管理
+ */
+const { hasAccessByRoles } = useAccess();
+const isAdmin = computed(() => {
+  return hasAccessByRoles(['admin', 'superadmin']);
+});
+
+/**
+ * 不要问为什么有两个根节点 v-if会控制只会渲染一个
+ */
 </script>
 
 <template>
-  <Page :auto-content-height="true">
+  <Page v-if="isAdmin" :auto-content-height="true">
     <BasicTable>
       <template #toolbar-actions>
         <span class="pl-[7px] text-[16px]">菜单权限列表</span>
@@ -136,4 +153,5 @@ function collapseAll() {
     </BasicTable>
     <MenuDrawer @reload="tableApi.query()" />
   </Page>
+  <Fallback v-else description="您没有菜单管理的访问权限" status="403" />
 </template>
diff --git a/apps/web-antd/src/views/system/tenant/index.vue b/apps/web-antd/src/views/system/tenant/index.vue
index 2344f0ca..26b57b0f 100644
--- a/apps/web-antd/src/views/system/tenant/index.vue
+++ b/apps/web-antd/src/views/system/tenant/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
+import { Fallback } from '@vben/common-ui';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 import dayjs from 'dayjs';
@@ -131,11 +132,19 @@ function handleMultiDelete() {
     },
   });
 }
-const { hasAccessByCodes } = useAccess();
+/**
+ * 与后台逻辑相同
+ * 只有超级管理员能访问租户相关
+ */
+const { hasAccessByCodes, hasAccessByRoles } = useAccess();
+
+const isSuperAdmin = computed(() => {
+  return hasAccessByRoles(['superadmin']);
+});
 </script>
 
 <template>
-  <Page :auto-content-height="true">
+  <Page v-if="isSuperAdmin" :auto-content-height="true">
     <BasicTable>
       <template #toolbar-actions>
         <span class="pl-[7px] text-[16px]">租户列表 </span>
@@ -202,4 +211,5 @@ const { hasAccessByCodes } = useAccess();
     </BasicTable>
     <TenantDrawer @reload="tableApi.query()" />
   </Page>
+  <Fallback v-else description="您没有租户的访问权限" status="403" />
 </template>
diff --git a/apps/web-antd/src/views/system/tenantPackage/index.vue b/apps/web-antd/src/views/system/tenantPackage/index.vue
index cc3619dc..2dadde00 100644
--- a/apps/web-antd/src/views/system/tenantPackage/index.vue
+++ b/apps/web-antd/src/views/system/tenantPackage/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
+import { Fallback } from '@vben/common-ui';
 
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
 import dayjs from 'dayjs';
@@ -126,11 +127,19 @@ function handleMultiDelete() {
   });
 }
 
-const { hasAccessByCodes } = useAccess();
+/**
+ * 与后台逻辑相同
+ * 只有超级管理员能访问租户相关
+ */
+const { hasAccessByCodes, hasAccessByRoles } = useAccess();
+
+const isSuperAdmin = computed(() => {
+  return hasAccessByRoles(['superadmin']);
+});
 </script>
 
 <template>
-  <Page :auto-content-height="true">
+  <Page v-if="isSuperAdmin" :auto-content-height="true">
     <BasicTable>
       <template #toolbar-actions>
         <span class="pl-[7px] text-[16px]">租户套餐列表</span>
@@ -197,4 +206,5 @@ const { hasAccessByCodes } = useAccess();
     </BasicTable>
     <TenantPackageDrawer @reload="tableApi.query()" />
   </Page>
+  <Fallback v-else description="您没有租户的访问权限" status="403" />
 </template>