角色管理页面和组织管理页面添加按钮权限控制

src/views/auth/dept/dept.vue

@@ -3,7 +3,7 @@
     <el-card :bordered="false" class="proCard">
      <template #header>
         <el-space align="center">
-          <el-button type="primary" @click="openCreateDrawer">
+          <el-button type="primary" @click="openCreateDrawer" v-permission="{ action: [PERM_USER.DEPT_ADD] }">
             <template #icon>
               <el-icon>
                 <FileAddOutlined />
@@ -23,10 +23,10 @@
           <template #default="scope">
             <el-space>
               <div class="el-space el-space--horizontal">
-                <div class="el-space__item" @click="handleEdit(scope.row)">
+                <div class="el-space__item" @click="handleEdit(scope.row)" v-permission="{ action: [PERM_USER.DEPT_EDIT] }">
                   <div><img :src="editIcon" class="el-tooltip__trigger" /></div>
                 </div>
-                <div class="el-space__item" @click="handleDelete(scope.row)">
+                <div class="el-space__item" @click="handleDelete(scope.row)" v-permission="{ action: [PERM_USER.DEPT_DELETE] }">
                   <div><img :src="deleteIcon" class="el-tooltip__trigger" /></div>
                 </div>
               </div>
@@ -65,6 +65,7 @@
   import type { DeptTreeItem } from '@/types/dept/type';
   import editIcon from '@/assets/images/reportmessage/edit.png';
   import deleteIcon from '@/assets/images/reportmessage/delete.png';
+  import { PERM_USER } from '@/types/permission/constants';
 
   const globSetting = useGlobSetting();
   const disableDepartmentEdit = globSetting.disableDepartmentEdit;

src/views/system/role/role.vue

@@ -15,7 +15,9 @@
 
     <el-card>
       <template #header>
-        <el-button type="primary" @click="openDrawer()">添加角色</el-button>
+        <el-button type="primary" @click="openDrawer()" v-permission="{ action: [PERM_USER.ROLE_ADD] }">
+          添加角色
+        </el-button>
       </template>
 
       <el-table height="calc(100vh - 340px)" :data="roleList">
@@ -26,8 +28,8 @@
         <el-table-column label="操作" width="160">
           <template #default="{ row }">
             <el-space>
-              <el-button type="primary" :icon="Edit" text @click="openDrawer(row)" />
-              <el-button :icon="Delete" text @click="deleteRole(row.id)" />
+              <el-button type="primary" :icon="Edit" text @click="openDrawer(row)" v-permission="{ action: [PERM_USER.ROLE_EDIT] }" />
+              <el-button :icon="Delete" text @click="deleteRole(row.id)" v-permission="{ action: [PERM_USER.ROLE_DELETE] }"  />
             </el-space>
           </template>
         </el-table-column>
@@ -58,6 +60,7 @@
   import useRolesQuery from './hooks/useRolesQuery';
   import { Role } from '@/types/role/type';
   import { deleteRole as _deleteRole } from '@/api/system/role';
+  import { PERM_USER } from '@/types/permission/constants';
 
   const { roleList, total, queryRolesPage, requestParams } = useRolesQuery();