页面鉴权组件按钮控制

src/router/modules/organization.ts

@@ -18,6 +18,7 @@ const routes: RouteRecordRaw = {
       redirect: '/organizationManagement/organization/organizationlist',
       meta: {
         title: '租户列表',
+        auth: ['organizationlist.add', 'organizationlist.view', 'organizationlist.delete', 'organizationlist.edit']
       },
       children: [
         {
@@ -27,8 +28,6 @@ const routes: RouteRecordRaw = {
             title: '租户列表',
             menu: false,
             breadcrumb: false,
-        auth:['organizationlist.add','organizationlist.view','organizationlist.delete','organizationlist.edit']
-
           },
         },
         {
@@ -69,7 +68,7 @@ const routes: RouteRecordRaw = {
       component: () => import('@/views/organizationManagement/tenantPermissions.vue'),
       meta: {
         title: '租户权限',
-        auth:['tenantPermissions.add','tenantPermissions.view','tenantPermissions.delete','tenantPermissions.edit']
+        auth: ['tenantPermissions.edit']
       },
     },
   ],

src/views/organizationManagement/organization/organizationlist.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <PageMain class="vh100">
+
       <ElForm :inline="false" :model="formInline" class="demo-form-inline" label-width="100px">
         <ElRow :gutter="20">
           <ElCol :md="8">
@@ -29,18 +30,19 @@
           <ElCol :md="6" :offset="10">
             <ElFormItem>
               <div class="flex j-end" style="width: 100%;">
-                <el-button type="primary" @click="roleQuery">查询</el-button>
-                <el-button type="primary" @click="resetForm">重置</el-button>
+                <el-button type="primary" v-auth="'organizationlist.view'" @click="roleQuery">查询</el-button>
+                <el-button type="primary" v-auth="'organizationlist.view'" @click="resetForm">重置</el-button>
               </div>
             </ElFormItem>
           </ElCol>
         </ElRow>
       </ElForm>
       <Table :tableData="tableData" :columns="columns" :showIndex="false" :columnheight="200" :showSelect="true"
-        :pageInfo="pageInfo" @getList="getList" @selectAllChange="handleSelectionChange">
+        :pageInfo="pageInfo" @getList="getList" @selectAllChange="handleSelectionChange"
+        @selectionChange="selectionChange">
         <template v-slot:table-title-btn>
           <RouterLink :to="{ name: 'OrganizationAdd' }">
-            <el-button type="primary">
+            <el-button type="primary" v-auth="'organizationlist.add'">
               添加机构
               <template #icon>
                 <el-icon>
@@ -49,7 +51,7 @@
               </template>
             </el-button>
           </RouterLink>
-          <el-dropdown placement="bottom-start">
+          <el-dropdown placement="bottom-start" v-auth="'organizationlist.delete'">
             <el-button> 批量操作<el-icon>
                 <arrow-down />
               </el-icon>
@@ -64,17 +66,22 @@
           </el-dropdown>
         </template>
         <template v-slot:operation="scope">
-          <el-button type="primary" link @click="tenantUpdate(scope.operationData)"> 编辑 </el-button>
+          <el-button type="primary" link @click="tenantUpdate(scope.operationData)" v-auth="'organizationlist.edit'"> 编辑
+          </el-button>
           <el-dropdown placement="bottom-start">
             <span class="el-dropdown-link">
               更 多
             </span>
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item @click="del(scope.operationData.id)">删除</el-dropdown-item>
-                <el-dropdown-item @click="disable(scope.operationData.id)">禁用</el-dropdown-item>
-                <el-dropdown-item @click="enable(scope.operationData.id)">启用</el-dropdown-item>
-                <el-dropdown-item @click="subOrganizationAdd(scope.operationData.sysCode)">添加子机构</el-dropdown-item>
+                <Auth :value="'organizationlist.delete'">
+                  <el-dropdown-item @click="del(scope.operationData.id)">删除</el-dropdown-item>
+                  <el-dropdown-item @click="disable(scope.operationData.id)">禁用</el-dropdown-item>
+                  <el-dropdown-item @click="enable(scope.operationData.id)">启用</el-dropdown-item>
+                </Auth>
+                <Auth :value="'organizationlist.add'">
+                  <el-dropdown-item @click="subOrganizationAdd(scope.operationData.sysCode)">添加子机构</el-dropdown-item>
+                </Auth>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
@@ -95,8 +102,9 @@ import { h } from 'vue'
 import { RouterLink, useRouter } from "vue-router";
 import ImagePreview from '@/components/ImagePreview/index.vue';
 import { regionData, codeToText } from "element-china-area-data";
-import { ElMessage, ElMessageBox } from 'element-plus'
-
+import { ElMessage, ElMessageBox, ElTag } from 'element-plus'
+import useAuth from '@/utils/composables/useAuth'
+const { auth, authAll } = useAuth()
 interface PageInfo {
   pageNum: number;
   pageSize: number;
@@ -159,7 +167,9 @@ const formInline = reactive({
 })
 const tableData = ref([]);
 onBeforeMount(() => {
-  findpage();
+  if (auth('organizationlist.view')) {
+    findpage();
+  }
 });
 function findpage() {
   api.tenantApi.sysList({ pageNum: pageInfo.value.pageNum, pageSize: pageInfo.value.pageSize, ...formInline }).then((res: any) => {
@@ -176,17 +186,18 @@ const deptCountformatter = (row: any, column: any, cellValue: any) => {
   return () => h('div', {}, [
     row.id
       ? h(RouterLink, {
-        to: { name: 'OrganizationDetail', query: { id: row.id, code: row.sysCode,typeName:'organization'} },
+        to: { name: auth('organizationlist.view') ? 'OrganizationDetail' : '', query: { id: row.id, code: row.sysCode, typeName: 'organization' } },
         style: { color: '#3498db', textDecoration: 'none' },
       }, { default: () => row.deptCount || 'N/A' })
       : h('span', { style: { color: 'gray' } }, 'Loading...') // 加载状态或占位符
   ]);
+
 };
 const sysNameformatter = (row: any, column: any, cellValue: any) => {
   return () => h('div', {}, [
     row.id
       ? h(RouterLink, {
-        to: { name: 'OrganizationDetail', query: { id: row.id, code: row.sysCode,typeName:'tenantInfo' } },
+        to: { name: auth('organizationlist.view') ? 'OrganizationDetail' : '', query: { id: row.id, code: row.sysCode, typeName: 'tenantInfo' } },
         style: { color: '#3498db', textDecoration: 'none' },
       }, { default: () => row.sysName || 'N/A' })
       : h('span', { style: { color: 'gray' } }, 'Loading...') // 加载状态或占位符
@@ -221,9 +232,9 @@ const cityformatter = (row: any, column: any, cellValue: any) => {
 const statusformatter = (row: any, column: any, cellValue: any) => {
   let available = row.available;
   if (available) {
-    return () => h('div', {}, '启用');
+    return () => h(ElTag, { type: 'primary' }, '启用');
   } else {
-    return () => h('div', {}, '禁用');
+    return () => h(ElTag, { type: 'danger' }, '禁用');
   }
 };
 const columns = [
@@ -253,6 +264,9 @@ function tenantUpdate(item: any) {
 const handleSelectionChange = (val: any) => {
   sysUpAndDownList.value = val;
 }
+const selectionChange = (val: any) => {
+  sysUpAndDownList.value = val;
+}
 //删除
 const del = (value: string) => {
   ElMessageBox.confirm(
@@ -262,6 +276,7 @@ const del = (value: string) => {
       confirmButtonText: '确定删除',
       cancelButtonText: '取消',
       type: 'error',
+      center:true,
     }
   )
     .then(() => {
@@ -289,8 +304,8 @@ const disable = (value: string) => {
     '禁用租户',
     {
       confirmButtonText: '确定禁用',
-      cancelButtonText: '取消',
-      type: 'error',
+      type: 'warning',
+      center: true,
     }
   )
     .then(() => {
@@ -314,6 +329,7 @@ const batchDel = () => {
       confirmButtonText: '确定删除',
       cancelButtonText: '取消',
       type: 'error',
+      center:true,
     }
   )
     .then(() => {
@@ -343,6 +359,7 @@ const batchdisable = () => {
       confirmButtonText: '确定禁用',
       cancelButtonText: '取消',
       type: 'error',
+      center:true,
     }
   )
     .then(async () => {

src/views/personnel/memberManagement.vue

@@ -20,8 +20,8 @@
           <ElCol :md="8">
             <ElFormItem>
               <div class="flex j-end" style="width: 100%;">
-                <el-button type="primary" @click="memberQuery" @keydown.enter="handleEnter">查询</el-button>
-                <el-button type="default" @click="resetForm">重置</el-button>
+                <el-button type="primary" @click="memberQuery" v-auth="'member.view'" @keydown.enter="handleEnter">查询</el-button>
+                <el-button type="default" @click="resetForm" v-auth="'member.view'">重置</el-button>
               </div>
             </ElFormItem>
           </ElCol>
@@ -29,9 +29,9 @@
       </ElForm>
       <ElDivider border-style="dashed"></ElDivider>
       <Table :tableData="tableData" :columns="columns" :showIndex="false" :columnheight="200" :showSelect="true"
-        :pageInfo="pageInfo" @getList="getList" @selectAllChange="handleSelectionChange" @selectChange="selectChange">
+        :pageInfo="pageInfo" @getList="getList" @selectAllChange="handleSelectionChange" @selectionChange="selectionChange">
         <template v-slot:table-title-btn>
-          <el-button type="primary" @click="userAdd">
+          <el-button type="primary" @click="userAdd" v-auth="'member.add'">
             添加成员
             <template #icon>
               <el-icon>
@@ -39,7 +39,7 @@
               </el-icon>
             </template>
           </el-button>
-          <el-dropdown placement="bottom-start">
+          <el-dropdown placement="bottom-start" v-auth="'member.delete'">
             <el-button> 批量管理<el-icon>
                 <arrow-down />
               </el-icon>
@@ -54,8 +54,8 @@
           </el-dropdown>
         </template>
         <template v-slot:operation="scope">
-          <el-button type="primary" link @click="tenantUpdate(scope.operationData.id)"> 编辑 </el-button>
-          <el-dropdown placement="bottom-start">
+          <el-button type="primary" link @click="tenantUpdate(scope.operationData.id)" v-auth="'member.edit'"> 编辑 </el-button>
+          <el-dropdown placement="bottom-start" v-auth="'member.delete'">
             <span class="el-dropdown-link">
               更 多
             </span>
@@ -99,7 +99,6 @@
           </ElCol>
         </el-form>
       </ElRow>
-
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="UpdatedialogVisible = false">取消</el-button>
@@ -303,7 +302,7 @@ function tenantUpdate(id: string) {
 const handleSelectionChange = (val: any) => {
   sysUpAndDownList.value = val;
 }
-const selectChange = (val: any) => {
+const selectionChange = (val: any) => {
   sysUpAndDownList.value = val;
 
 }
@@ -316,7 +315,7 @@ const del = (value: string) => {
       confirmButtonText: '确认删除',
       cancelButtonText: '取消',
       type: 'error',
-      customClass: 'ElMessageBoxClass'
+      center:true,
     }
   )
     .then(() => {
@@ -352,7 +351,7 @@ const disable = (value: string) => {
       confirmButtonText: '确认禁用',
       cancelButtonText: '取消',
       type: 'error',
-      customClass: 'ElMessageBoxClass'
+      center:true,
     }
   )
     .then(() => {
@@ -376,7 +375,8 @@ const batchDel = () => {
       confirmButtonText: '确认删除',
       cancelButtonText: '取消',
       type: 'error',
-      customClass: 'ElMessageBoxClass'
+      confirmButtonClass: 'el-button--danger',
+      center:true,
     }
   )
     .then(() => {
@@ -411,7 +411,7 @@ const batchdisable = () => {
       confirmButtonText: '确认禁用',
       cancelButtonText: '取消',
       type: 'error',
-      customClass: 'ElMessageBoxClass'
+      center:true,
     }
   )
     .then(async () => {

src/views/personnel/roleManagement.vue

@@ -9,8 +9,8 @@
                 <template #prefix>
                   <SvgIcon name="i-ri:user-3-fill" />
                 </template>
-                <template #append>
-                  <el-button :icon="Search" class="ElInputSearch" @click="rolequery" />
+                <template #append >
+                  <el-button :icon="Search" class="ElInputSearch" @click="rolequery" v-auth="'role.view'" />
                 </template>
               </ElInput>
             </ElFormItem>
@@ -22,7 +22,7 @@
               </div>
             </div>
             <div class="flex a-c j-c footer">
-              <el-button type="primary" plain style="margin: auto;" @click="resetForm">
+              <el-button type="primary" plain style="margin: auto;" @click="resetForm" v-auth="'role.add'">
                 <el-icon>
                   <Plus />
                 </el-icon>
@@ -37,12 +37,13 @@
           <div class="flex j-s a-c">
             <span class="strong">角色管理</span>
             <div>
-              <ElButton type="default" @click="roleSubmit">保存</ElButton>
-              <ElButton v-if="roleInfo.id" type="default" @click="roleDelClick">删除</ElButton>
+              <ElButton v-if="roleInfo.id" type="primary" @click="roleSubmit" v-auth="'role.add'">编辑</ElButton>
+              <ElButton v-else type="default" @click="roleSubmit" v-auth="'role.add'">保存</ElButton>
+              <ElButton v-if="roleInfo.id" type="default" @click="roleDelClick" v-auth="'role.delete'">删除</ElButton>
             </div>
           </div>
           <ElDivider style="margin-top: 10px;"></ElDivider>
-          <div v-show="roleId || identifier">
+          <div v-if="roleInfo.id || identifier">
             <span style="font-size: 16px;font-weight: bold;">基本信息</span>
             <ElForm :model="roleInfo" :rules="roleRules" label-width="auto" size="" class="m-top-20"
               style="max-width: 500px;">
@@ -63,7 +64,7 @@
                 @check="handleCheckChange" />
             </div>
           </div>
-
+          <el-empty v-else  image="../../../src/assets/images/empty.png" />
         </ElCol>
       </ElRow>
 
@@ -91,13 +92,13 @@ import { preprocessRoutes, convertToTreeData, TreeNode } from '@/utils/composabl
 import { Search } from '@element-plus/icons-vue'
 import api from '@/api'
 import Message from 'vue-m-message'
-
+import useAuth from '@/utils/composables/useAuth'
+const { auth, authAll } = useAuth()
 onBeforeMount(() => {
   rolequery()//角色列表
   // 对 asyncRoutes 进行预处理并转换为树形结构
   const processedRoutes = preprocessRoutes(asyncRoutes);
   treeData.value = convertToTreeData(0, processedRoutes);
-  console.log(treeData.value)
 });
 interface roleList {
   id: string,
@@ -111,11 +112,9 @@ interface Perm {
 const treeRef = ref<InstanceType<typeof ElTree>>();
 const roleName = ref<string>("");
 const roleId = ref<string>("");
-
 const PageNum = ref<number>(1);
 const PageSize = ref<number>(20);
 const checkedKeys = ref<string[]>([])
-const totalSize = ref(0)
 const identifier = ref(false)
 const roleInfo = reactive<{
   name: string;
@@ -198,6 +197,7 @@ function roleDelClick() {
           cancelButtonText: '取消',
           type: 'error',
           draggable: true,
+          center:true,
         }
       )
         .then(async () => {
@@ -215,10 +215,6 @@ function roleDelClick() {
 
         })
     } else {
-      ElMessageBox.alert('删除角色前，请先移除角色内的所有成员', '无法删除', {
-        confirmButtonText: '知道了',
-
-      })
     }
   })
 
@@ -232,7 +228,8 @@ function sizeChange(val: number) {
   PageSize.value = val;
 }
 async function roleitemClick(item: { id: string }) {
-  await api.roleApi.roleGet({ roleId: item.id }).then((res: any) => {
+  if(auth('role.add')){
+    await api.roleApi.roleGet({ roleId: item.id }).then((res: any) => {
     if (res.code === 200) {
       checkedKeys.value = res.data.perms.map((val: Perm) => val.id);
       roleInfo.permsId = res.data.perms.map((val: Perm) => val.id);
@@ -243,6 +240,14 @@ async function roleitemClick(item: { id: string }) {
       roleId.value = res.data.id;
     }
   })
+  }else{
+    ElMessage({
+          type: 'success',
+          message: '没有权限获取角色数据',
+          plain: true,
+        })
+  }
+
 }
 async function rolequery() {
   await api.roleApi.roleList({  name: roleName.value }).then((res: any) => {
@@ -257,6 +262,7 @@ function resetForm() {
   roleInfo.permsId = [];
   roleInfo.perms = [];
   roleInfo.id = '';
+  roleId.value='';
   if (treeRef.value) {
     treeRef.value.setCheckedKeys([]);
   }