添加按钮权限

src/directives/auth.js

@@ -0,0 +1,53 @@
+import { ElMessage } from 'element-plus'
+
+// 角色权限映射
+const roleMap = {
+    0: '普通员工',
+    1: '部门主管',
+    2: '综合部',
+    3: '财务部'
+}
+
+// 权限配置
+const authConfig = {
+    // 工资条管理
+    'payroll:view': [0, 1, 2, 3], // 查看工资条
+    'payroll:edit': [1, 2, 3],    // 编辑工资条
+    'payroll:delete': [2, 3],     // 删除工资条
+    'payroll:show': [1, 2, 3],    // 展示给员工
+
+    // 组别管理
+    'group:view': [0, 1, 2, 3],   // 查看组别
+    'group:add': [2],             // 添加组别
+    'group:edit': [2],            // 编辑组别
+    'group:delete': [2],          // 删除组别
+
+    // 成员管理
+    'member:view': [0, 1, 2, 3],  // 查看成员
+    'member:add': [2],            // 添加成员
+    'member:edit': [2],           // 编辑成员
+    'member:delete': [2],         // 删除成员
+    'member:role': [2],           // 修改成员角色
+    'member:salary': [2],         // 修改成员工资
+}
+
+export default {
+    mounted(el, binding) {
+        const { value } = binding
+        const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
+        const userRole = userInfo.role || 0
+
+        // 如果没有权限配置，默认显示
+        if (!value) {
+            return
+        }
+
+        // 检查权限
+        const hasAuth = authConfig[value]?.includes(userRole)
+
+        if (!hasAuth) {
+            // 移除元素
+            el.parentNode?.removeChild(el)
+        }
+    }
+} 

src/main.js

@@ -15,6 +15,7 @@ import vuepressTheme from "@kangc/v-md-editor/lib/theme/vuepress.js";
 import "@kangc/v-md-editor/lib/style/base-editor.css";
 import "@kangc/v-md-editor/lib/theme/style/vuepress.css";
 import VConsole from "vconsole";
+import authDirective from './directives/auth'
 // 或者使用配置参数来初始化，详情见文档
 const vConsole = new VConsole({ theme: "dark" });
 VMdEditor.use(vuepressTheme);
@@ -30,4 +31,7 @@ app.use(router).use(store).use(directives).use(VMdEditor).use(ElementPlus, {
   locale: zhCn,
 });
 
+// 注册自定义指令
+app.directive('auth', authDirective)
+
 app.mount("#app");

src/router/originalRoutingTable.js

@@ -37,6 +37,7 @@ const routerList = [
       requiresAuth: true, //有一些页面是否登录才能进去
       name: "组别管理",
       icon: "Notebook",
+      roles: [2, 3]
     },
     children: [
       {
@@ -47,6 +48,7 @@ const routerList = [
           requiresAuth: true,
           name: "组别管理",
           icon: "Notebook",
+          roles: [2, 3]
         },
       },
     ],

src/views/groupManagement/index.vue

@@ -15,7 +15,7 @@
                   </el-icon>
                 </template>
               </el-input>
-              <el-button type="primary" size="small" @click="handleAdd">添加组别</el-button>
+              <el-button type="primary" size="small" @click="handleAdd" v-auth="'group:add'">添加组别</el-button>
             </div>
           </div>
         </template>
@@ -28,10 +28,12 @@
               {{ scope.row.createTime || "暂无" }}
             </template>
           </el-table-column>
-          <el-table-column label="操作" width="180" fixed="right" align="center">
+          <el-table-column label="操作" width="180" fixed="right" align="center" v-if="userRole === 2">
             <template #default="scope">
-              <el-button type="primary" link size="small" @click.stop="handleEdit(scope.row)">编辑</el-button>
+              <el-button type="primary" link size="small" @click.stop="handleEdit(scope.row)"
-              <el-button type="danger" link size="small" @click.stop="handleDelete(scope.row)">删除</el-button>
+                v-auth="'group:edit'">编辑</el-button>
+              <el-button type="danger" link size="small" @click.stop="handleDelete(scope.row)"
+                v-auth="'group:delete'">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -53,7 +55,7 @@
                   </el-icon>
                 </template>
               </el-input>
-              <el-button type="primary" size="small" @click="handleAddUser">添加成员</el-button>
+              <el-button type="primary" size="small" @click="handleAddUser" v-auth="'member:add'">添加成员</el-button>
             </div>
           </div>
         </template>
@@ -70,6 +72,7 @@
                 <el-table-column prop="name" label="姓名" show-overflow-tooltip />
                 <el-table-column label="角色" align="center">
                   <template #default="scope">
+                    <template v-if="userRole === 2">
                       <el-select v-model="scope.row.role" placeholder="选择角色" size="small"
                         @change="(value) => handleRoleChange(scope.row, value)">
                         <el-option label="普通员工" :value="0" />
@@ -78,11 +81,19 @@
                         <el-option label="财务部" :value="3" />
                       </el-select>
                     </template>
+                    <template v-else>
+                      <el-tag :type="getRoleTagType(scope.row.role)">
+                        {{ getRoleName(scope.row.role) }}
+                      </el-tag>
+                    </template>
+                  </template>
                 </el-table-column>
-                <el-table-column label="操作" width="220" fixed="right" align="center">
+                <el-table-column label="操作" width="220" fixed="right" align="center" v-if="userRole === 2">
                   <template #default="scope">
-                    <el-button type="primary" link size="small" @click="handleViewSalary(scope.row)">查看工资配置</el-button>
+                    <el-button type="primary" link size="small" @click="handleViewSalary(scope.row)"
-                    <el-button type="danger" link size="small" @click="handleRemoveUser(scope.row)">移除</el-button>
+                      v-auth="'member:salary'">查看工资配置</el-button>
+                    <el-button type="danger" link size="small" @click="handleRemoveUser(scope.row)"
+                      v-auth="'member:delete'">移除</el-button>
                   </template>
                 </el-table-column>
               </el-table>
@@ -281,6 +292,9 @@ const groupRules = {
 
 const router = useRouter();
 
+const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
+const userRole = userInfo.role || 0
+
 // 获取组别列表
 const fetchGroupList = async () => {
   try {
@@ -578,6 +592,28 @@ const handleSearch = () => {
   );
 };
 
+// 获取角色名称
+const getRoleName = (role) => {
+  const roleMap = {
+    0: '普通员工',
+    1: '部门主管',
+    2: '综合部',
+    3: '财务部'
+  }
+  return roleMap[role] || '未知角色'
+}
+
+// 获取角色标签类型
+const getRoleTagType = (role) => {
+  const typeMap = {
+    0: 'info',
+    1: 'success',
+    2: 'warning',
+    3: 'danger'
+  }
+  return typeMap[role] || 'info'
+}
+
 // 页面加载时获取组别列表
 onMounted(() => {
   fetchGroupList();