hzd/salaryAccountingBackend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加按钮权限

Browse Source
This commit is contained in:
1147680382@qq.com
2025-05-26 14:25:23 +08:00
parent ea912c878c
commit 6843cacf81
4 changed files with 110 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/directives/auth.js
+53
View File
@@ -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
+4
View File
@@ -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
+2
View File
@@ -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
+44 -8
View File
@@ -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,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="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();