添加按钮权限

2025-05-26 14:25:23 +08:00
parent ea912c878c
commit 6843cacf81
4 changed files with 110 additions and 15 deletions
@@ -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)
+        }
+    }
+} 
@@ -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");
@@ -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]
        },
      },
    ],
@@ -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="danger" link size="small" @click.stop="handleDelete(scope.row)">删除</el-button>
+              <el-button type="primary" link size="small" @click.stop="handleEdit(scope.row)"
+                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,19 +72,28 @@
                <el-table-column prop="name" label="姓名" show-overflow-tooltip />
                <el-table-column label="角色" align="center">
                  <template #default="scope">
-                    <el-select v-model="scope.row.role" placeholder="选择角色" size="small"
-                      @change="(value) => handleRoleChange(scope.row, value)">
-                      <el-option label="普通员工" :value="0" />
-                      <el-option label="部门主管" :value="1" />
-                      <el-option label="综合部" :value="2" />
-                      <el-option label="财务部" :value="3" />
-                    </el-select>
+                    <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" />
+                        <el-option label="部门主管" :value="1" />
+                        <el-option label="综合部" :value="2" />
+                        <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="danger" link size="small" @click="handleRemoveUser(scope.row)">移除</el-button>
+                    <el-button type="primary" link size="small" @click="handleViewSalary(scope.row)"
+                      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();