修改角色为多角色

src/api/modules/index.js

@@ -49,12 +49,13 @@ export function getNonGroupUsers() {
   });
 }
 
-// 添加/修改组内人员角色
+// 更新组内用户角色
-export function updateGroupUserRole(groupId, userid, role) {
+export const updateGroupUserRole = (data) => {
   return service({
-    url: `/group/${groupId}/user/${userid}/role/${role}`,
+    url: '/group/user',
-    method: "post",
+    method: 'post',
-  });
+    data
+  })
 }
 
 // 获取组内人员列表

src/directives/auth.js

@@ -35,7 +35,7 @@ export default {
     mounted(el, binding) {
         const { value } = binding
         const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
-        const userRole = userInfo.role || 0
+        const userRole = userInfo.roles || 0
 
         // 如果没有权限配置，默认显示
         if (!value) {

src/layout/menu/index.vue

@@ -44,7 +44,7 @@ const themeConfig = store.getters.themeConfig;
 onMounted(() => {
   // 权限检查
   const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
-  const menuTable = generateMenu(routerList, userInfo.role)
+  const menuTable = generateMenu(routerList, userInfo.roles)
   // 获取本地菜单表渲染
   menuList.value = menuTable;
 });

src/router/generateMenu.js

@@ -1,5 +1,5 @@
 // 递归处理路由列表生成菜单数据
-export const generateMenu = (routes, userRole) => {
+export const generateMenu = (routes, userRoles) => {
     const menuList = [];
 
     // 递归处理路由
@@ -7,9 +7,16 @@ export const generateMenu = (routes, userRole) => {
         // 检查路由是否需要权限验证
         if (route.meta && route.meta.requiresAuth) {
             // 检查用户角色是否有权限访问
-            if (route.meta.roles && !route.meta.roles.includes(userRole)) {
+            if (route.meta.roles) {
-                return null;
+                const hasPermission = userRoles.some(role =>
+                    route.meta.roles.includes(Number(role))
+                );
+                if (!hasPermission) {
+                    return null
                 }
+            }
+
+
 
             const menuItem = {
                 title: route.meta.name,
@@ -61,7 +68,7 @@ export const generateMenu = (routes, userRole) => {
 
 // 使用示例
 /*
-const userRole = 2; // 用户角色
+const userRoles = [2]; // 用户角色
-const menuList = generateMenu(routerList, userRole);
+const menuList = generateMenu(routerList, userRoles);
 console.log(menuList);
 */ 

src/views/groupManagement/index.vue

@@ -15,7 +15,7 @@
                   </el-icon>
                 </template>
               </el-input>
-              <el-button type="primary" size="small" @click="handleAdd" v-auth="'group:add'">添加组别</el-button>
+              <el-button type="primary" size="small" @click="handleAdd" v-if="canAdd">添加组别</el-button>
             </div>
           </div>
         </template>
@@ -28,12 +28,12 @@
               {{ scope.row.createTime || "暂无" }}
             </template>
           </el-table-column>
-          <el-table-column label="操作" width="180" fixed="right" align="center" v-if="userRole === 2">
+          <el-table-column label="操作" width="180" fixed="right" align="center" v-if="canEdit || canDelete">
             <template #default="scope">
               <el-button type="primary" link size="small" @click.stop="handleEdit(scope.row)"
-                v-auth="'group:edit'">编辑</el-button>
+                v-if="canEdit">编辑</el-button>
               <el-button type="danger" link size="small" @click.stop="handleDelete(scope.row)"
-                v-auth="'group:delete'">删除</el-button>
+                v-if="canDelete">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -55,7 +55,7 @@
                   </el-icon>
                 </template>
               </el-input>
-              <el-button type="primary" size="small" @click="handleAddUser" v-auth="'member:add'">添加成员</el-button>
+              <el-button type="primary" size="small" @click="handleAddUser" v-if="canAddMember">添加成员</el-button>
             </div>
           </div>
         </template>
@@ -72,31 +72,37 @@
                 <el-table-column prop="name" label="姓名" show-overflow-tooltip />
                 <el-table-column label="角色" align="center">
                   <template #default="scope">
-                    <template v-if="userRole === 2">
+                    <template v-if="canManageRole">
-                      <el-select v-model="scope.row.role" placeholder="选择角色" size="small"
+                      <el-select v-model="scope.row.roles" placeholder="选择角色" size="small" multiple
                         @change="(value) => handleRoleChange(scope.row, value)">
-                        <el-option label="普通员工" :value="0" />
+                        <el-option label="普通员工" value="0" />
-                        <el-option label="部门主管" :value="1" />
+                        <el-option label="部门主管" value="1" />
-                        <el-option label="综合部" :value="2" />
+                        <el-option label="综合部" value="2" />
-                        <el-option label="财务部" :value="3" />
+                        <el-option label="财务部" value="3" />
                       </el-select>
                     </template>
                     <template v-else>
-                      <el-tag :type="getRoleTagType(scope.row.role)">
+                      <div class="role-tags">
-                        {{ getRoleName(scope.row.role) }}
+                        <el-tag v-for="role in scope.row.roles" :key="role" :type="getRoleTagType(role)"
+                          class="role-tag">
+                          {{ getRoleName(role) }}
                         </el-tag>
+                      </div>
                     </template>
                   </template>
                 </el-table-column>
                 <el-table-column label="操作" width="220" fixed="right" align="center"
-                  v-if="userRole === 2 || userRole === 3">
+                  v-if="canViewSalary || canRemoveUser">
                   <template #default="scope">
-                    <template v-if="userRole === 3">
+                    <template v-if="canViewSalary">
-                      <el-button type="primary" link size="small" @click="handleViewSalary(scope.row)"
+                      <el-button type="primary" link size="small" @click="handleViewSalary(scope.row)">
-                        v-auth="'member:salary'">查看工资配置</el-button>
+                        查看工资配置
+                      </el-button>
                     </template>
                     <el-button type="danger" link size="small" @click="handleRemoveUser(scope.row)"
-                      v-auth="'member:delete'">移除</el-button>
+                      v-if="canRemoveUser">
+                      移除
+                    </el-button>
                   </template>
                 </el-table-column>
               </el-table>
@@ -203,7 +209,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import {
   getGroupList,
@@ -296,7 +302,21 @@ const groupRules = {
 const router = useRouter();
 
 const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
-const userRole = userInfo.role || 0
+const userRoles = userInfo.roles || []
+
+// 检查是否有权限
+const hasPermission = (requiredRoles) => {
+  return userRoles.some(role => requiredRoles.includes(Number(role)))
+}
+
+// 按钮权限判断
+const canAdd = computed(() => hasPermission([2])) // 角色1和2可以添加
+const canEdit = computed(() => hasPermission([2])) // 角色1和2可以编辑
+const canDelete = computed(() => hasPermission([2])) // 只有角色1可以删除
+const canManageRole = computed(() => hasPermission([2])) // 只有角色2可以管理角色
+const canViewSalary = computed(() => hasPermission([3])) // 只有角色3可以查看工资
+const canRemoveUser = computed(() => hasPermission([2])) // 只有角色2可以删除成员
+const canAddMember = computed(() => hasPermission([2])) // 只有角色2可以添加成员
 
 // 获取组别列表
 const fetchGroupList = async () => {
@@ -355,14 +375,14 @@ const handleMemberSearch = () => {
   );
 };
 
-// 修改成员角色
+// 修改角色变更处理函数
-const handleRoleChange = async (user, role) => {
+const handleRoleChange = async (user, roles) => {
   try {
-    const res = await updateGroupUserRole(
+    const res = await updateGroupUserRole({
-      currentGroup.value.groupId,
+      groupId: currentGroup.value.groupId,
-      user.userid,
+      userid: user.userid,
-      role
+      roles: roles
-    );
+    });
     if (res.errcode === 0) {
       ElMessage.success("修改成功");
       const userInfo = JSON.parse(sessionStorage.getItem("userInfo")) || {}
@@ -376,11 +396,6 @@ const handleRoleChange = async (user, role) => {
     ElMessage.error("修改失败");
   }
 };
-const gotoLogin = () => {
-  sessionStorage.removeItem("token");
-  sessionStorage.removeItem("userInfo");
-  router.push("/login");
-};
 
 // 移除成员
 const handleRemoveUser = async (user) => {
@@ -554,10 +569,10 @@ const fetchNonGroupUsers = async () => {
   }
 };
 
-// 添加用户到组
+// 修改添加用户到组的函数
 const handleAddToGroup = async (user) => {
   try {
-    const res = await addUserToGroup(currentGroup.value.groupId, user.userid, 0); // 默认角色为普通员工
+    const res = await addUserToGroup(currentGroup.value.groupId, user.userid, ["0"]); // 默认角色为普通员工
     if (res.errcode === 0) {
       ElMessage.success("添加成功");
       addUserDialogVisible.value = false;
@@ -598,10 +613,10 @@ const handleSearch = () => {
 // 获取角色名称
 const getRoleName = (role) => {
   const roleMap = {
-    0: '普通员工',
+    "0": '普通员工',
-    1: '部门主管',
+    "1": '部门主管',
-    2: '综合部',
+    "2": '综合部',
-    3: '财务部'
+    "3": '财务部'
   }
   return roleMap[role] || '未知角色'
 }
@@ -609,10 +624,10 @@ const getRoleName = (role) => {
 // 获取角色标签类型
 const getRoleTagType = (role) => {
   const typeMap = {
-    0: 'info',
+    "0": 'info',
-    1: 'success',
+    "1": 'success',
-    2: 'warning',
+    "2": 'warning',
-    3: 'danger'
+    "3": 'danger'
   }
   return typeMap[role] || 'info'
 }
@@ -621,6 +636,12 @@ const getRoleTagType = (role) => {
 onMounted(() => {
   fetchGroupList();
 });
+
+const gotoLogin = () => {
+  sessionStorage.removeItem("token");
+  sessionStorage.removeItem("userInfo");
+  router.push("/login");
+};
 </script>
 
 <style lang="scss" scoped>
@@ -909,4 +930,15 @@ onMounted(() => {
   border-top: 1px solid var(--el-border-color-light);
   background-color: var(--el-bg-color);
 }
+
+.role-tags {
+  display: flex;
+  gap: 4px;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  .role-tag {
+    margin: 2px;
+  }
+}
 </style>

src/views/payroll/sheets/index.vue

@@ -5,24 +5,14 @@
         <div class="card-header">
           <span class="title">工资条列表</span>
           <div class="header-right">
-            <el-date-picker
+            <el-date-picker v-model="dateRange" type="month" placeholder="选择月份" :default-time="defaultTime"
-              v-model="dateRange"
+              :shortcuts="dateShortcuts" @change="handleDateChange" style="width: 200px; margin-right: 8px;" />
-              type="month"
+            <el-input v-model="searchKeyword" placeholder="请输入姓名搜索" clearable @input="handleSearch"
-              placeholder="选择月份"
+              style="width: 200px; margin-right: 8px;">
-              :default-time="defaultTime"
-              :shortcuts="dateShortcuts"
-              @change="handleDateChange"
-              style="width: 200px; margin-right: 8px;"
-            />
-            <el-input
-              v-model="searchKeyword"
-              placeholder="请输入姓名搜索"
-              clearable
-              @input="handleSearch"
-              style="width: 200px; margin-right: 8px;"
-            >
               <template #prefix>
-                <el-icon><Search /></el-icon>
+                <el-icon>
+                  <Search />
+                </el-icon>
               </template>
             </el-input>
             <el-button type="success" @click="handleBatchShowToEmployee">批量展示给员工</el-button>
@@ -30,24 +20,15 @@
         </div>
       </template>
 
-      <el-table
+      <el-table :data="payrollList" style="width: 100%" height="calc(100vh - 280px)" border stripe :header-cell-style="{
-        :data="payrollList"
-        style="width: 100%"
-        height="calc(100vh - 280px)"
-        border
-        stripe
-        :header-cell-style="{
         background: '#f5f7fa',
         color: '#606266',
         fontWeight: 'bold',
         textAlign: 'center',
         padding: '12px 0'
-        }"
+      }" :cell-style="{
-        :cell-style="{
           padding: '8px 0'
-        }"
+        }" @selection-change="handleSelectionChange">
-        @selection-change="handleSelectionChange"
-      >
         <el-table-column type="selection" width="55" />
         <el-table-column label="头像" width="80" align="center" fixed="left">
           <template #default="scope">
@@ -105,12 +86,14 @@
             {{ formatMoney(scope.row.grossPaySummary) }}
           </template>
         </el-table-column>
-        <el-table-column prop="annualPerformanceDeduction" label="年度绩效扣款" width="120" align="right" show-overflow-tooltip>
+        <el-table-column prop="annualPerformanceDeduction" label="年度绩效扣款" width="120" align="right"
+          show-overflow-tooltip>
           <template #default="scope">
             {{ formatMoney(scope.row.annualPerformanceDeduction) }}
           </template>
         </el-table-column>
-        <el-table-column prop="monthlyPerformanceDeduction" label="月度绩效扣款" width="120" align="right" show-overflow-tooltip>
+        <el-table-column prop="monthlyPerformanceDeduction" label="月度绩效扣款" width="120" align="right"
+          show-overflow-tooltip>
           <template #default="scope">
             {{ formatMoney(scope.row.monthlyPerformanceDeduction) }}
           </template>
@@ -130,7 +113,8 @@
             {{ formatMoney(scope.row.lateEarlyDeduction) }}
           </template>
         </el-table-column>
-        <el-table-column prop="missedCheckInOutDeduction" label="签到签退扣款" width="120" align="right" show-overflow-tooltip>
+        <el-table-column prop="missedCheckInOutDeduction" label="签到签退扣款" width="120" align="right"
+          show-overflow-tooltip>
           <template #default="scope">
             {{ formatMoney(scope.row.missedCheckInOutDeduction) }}
           </template>
@@ -155,7 +139,8 @@
             {{ formatMoney(scope.row.basicPensionDeduction) }}
           </template>
         </el-table-column>
-        <el-table-column prop="unemploymentInsuranceDeduction" label="失业保险" width="120" align="right" show-overflow-tooltip>
+        <el-table-column prop="unemploymentInsuranceDeduction" label="失业保险" width="120" align="right"
+          show-overflow-tooltip>
           <template #default="scope">
             {{ formatMoney(scope.row.unemploymentInsuranceDeduction) }}
           </template>
@@ -197,20 +182,10 @@
         </el-table-column>
         <el-table-column label="操作" width="180" fixed="right" align="center">
           <template #default="scope">
-            <el-button
+            <el-button type="primary" link size="small" @click="handleEdit(scope.row)">
-              type="primary"
-              link
-              size="small"
-              @click="handleEdit(scope.row)"
-            >
               修改
             </el-button>
-            <el-button
+            <el-button type="success" link size="small" @click="handleShowToEmployee(scope.row)">
-              type="success"
-              link
-              size="small"
-              @click="handleShowToEmployee(scope.row)"
-            >
               展示给员工
             </el-button>
           </template>
@@ -218,44 +193,24 @@
       </el-table>
 
       <div class="pagination-container">
-        <el-pagination
+        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
-          v-model:current-page="currentPage"
+          :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
-          v-model:page-size="pageSize"
+          @current-change="handleCurrentChange" />
-          :page-sizes="[10, 20, 50, 100]"
-          :total="total"
-          layout="total, sizes, prev, pager, next, jumper"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
       </div>
     </el-card>
 
     <!-- 修改工资条对话框 -->
     <div class="edit-payroll-dialog">
-      <el-dialog
+      <el-dialog v-model="editDialogVisible" title="修改工资条" width="900px">
-        v-model="editDialogVisible"
-        title="修改工资条"
-        width="900px"
-      >
         <div class="edit-form">
-          <el-form
+          <el-form ref="editFormRef" :model="editForm" :rules="editRules" label-width="140px">
-            ref="editFormRef"
-            :model="editForm"
-            :rules="editRules"
-            label-width="140px"
-          >
             <!-- 仅保留可编辑字段 -->
             <div class="form-section">
               <div class="section-title">违纪扣款</div>
               <div class="form-grid">
                 <el-form-item label="违纪扣款" prop="violationDeduction">
-                  <el-input-number
+                  <el-input-number v-model="editForm.violationDeduction" :precision="2" :step="100" :min="0"
-                    v-model="editForm.violationDeduction"
+                    controls-position="right" />
-                    :precision="2"
-                    :step="100"
-                    :min="0"
-                    controls-position="right"
-                  />
                 </el-form-item>
               </div>
             </div>
@@ -263,49 +218,24 @@
               <div class="section-title">社保公积金</div>
               <div class="form-grid">
                 <el-form-item label="基本养老保险" prop="basicPensionDeduction">
-                  <el-input-number
+                  <el-input-number v-model="editForm.basicPensionDeduction" :precision="2" :step="100" :min="0"
-                    v-model="editForm.basicPensionDeduction"
+                    controls-position="right" />
-                    :precision="2"
-                    :step="100"
-                    :min="0"
-                    controls-position="right"
-                  />
                 </el-form-item>
                 <el-form-item label="失业保险" prop="unemploymentInsuranceDeduction">
-                  <el-input-number
+                  <el-input-number v-model="editForm.unemploymentInsuranceDeduction" :precision="2" :step="100" :min="0"
-                    v-model="editForm.unemploymentInsuranceDeduction"
+                    controls-position="right" />
-                    :precision="2"
-                    :step="100"
-                    :min="0"
-                    controls-position="right"
-                  />
                 </el-form-item>
                 <el-form-item label="基本医疗保险" prop="basicMedicalDeduction">
-                  <el-input-number
+                  <el-input-number v-model="editForm.basicMedicalDeduction" :precision="2" :step="100" :min="0"
-                    v-model="editForm.basicMedicalDeduction"
+                    controls-position="right" />
-                    :precision="2"
-                    :step="100"
-                    :min="0"
-                    controls-position="right"
-                  />
                 </el-form-item>
                 <el-form-item label="补充医疗保险" prop="medicalDeductionAmount">
-                  <el-input-number
+                  <el-input-number v-model="editForm.medicalDeductionAmount" :precision="2" :step="100" :min="0"
-                    v-model="editForm.medicalDeductionAmount"
+                    controls-position="right" />
-                    :precision="2"
-                    :step="100"
-                    :min="0"
-                    controls-position="right"
-                  />
                 </el-form-item>
                 <el-form-item label="住房公积金" prop="housingFundDeduction">
-                  <el-input-number
+                  <el-input-number v-model="editForm.housingFundDeduction" :precision="2" :step="100" :min="0"
-                    v-model="editForm.housingFundDeduction"
+                    controls-position="right" />
-                    :precision="2"
-                    :step="100"
-                    :min="0"
-                    controls-position="right"
-                  />
                 </el-form-item>
               </div>
             </div>
@@ -313,22 +243,12 @@
               <div class="section-title">其他扣款</div>
               <div class="form-grid">
                 <el-form-item label="个人所得税" prop="individualTaxDeduction">
-                  <el-input-number
+                  <el-input-number v-model="editForm.individualTaxDeduction" :precision="2" :step="100" :min="0"
-                    v-model="editForm.individualTaxDeduction"
+                    controls-position="right" />
-                    :precision="2"
-                    :step="100"
-                    :min="0"
-                    controls-position="right"
-                  />
                 </el-form-item>
                 <el-form-item label="其他扣款" prop="otherDeduction">
-                  <el-input-number
+                  <el-input-number v-model="editForm.otherDeduction" :precision="2" :step="100" :min="0"
-                    v-model="editForm.otherDeduction"
+                    controls-position="right" />
-                    :precision="2"
-                    :step="100"
-                    :min="0"
-                    controls-position="right"
-                  />
                 </el-form-item>
               </div>
             </div>
@@ -358,7 +278,7 @@ import {
 
 // 权限检查
 const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
-// if (userInfo.role !== 3) {
+// if (userInfo.roles !== 3) {
 //   ElMessage.error("您没有权限访问此页面");
 //   window.history.back();
 // }
@@ -854,7 +774,7 @@ onMounted(() => {
     background-color: #f8fafd;
     border-radius: 8px;
     padding: 20px 24px 8px 24px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
 
     &:last-child {
       margin-bottom: 0;
@@ -879,14 +799,17 @@ onMounted(() => {
 
   :deep(.el-form-item) {
     margin-bottom: 0;
+
     .el-form-item__label {
       font-weight: 500;
       color: #333;
       font-size: 15px;
     }
+
     .el-input-number {
       width: 100%;
       min-width: 120px;
+
       .el-input__wrapper {
         padding-right: 40px;
       }

src/views/performance/attendance/finance/index.vue

@@ -226,10 +226,6 @@ const formatMoney = (value) => {
 
 // 权限检查
 const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
-// if (userInfo.role !== 3) {
-//   ElMessage.error("您没有权限访问此页面");
-//   window.history.back();
-// }
 
 // 列表数据
 const attendanceList = ref([]);

src/views/performance/attendance/general/index.vue

@@ -278,10 +278,7 @@ import {
 
 // 权限检查
 const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
-// if (userInfo.role !== 2) {
+
-//   ElMessage.error("您没有权限访问此页面");
-//   window.history.back();
-// }
 
 // 列表数据
 const attendanceList = ref([]);

src/views/performance/attendance/manager/index.vue

@@ -165,10 +165,7 @@ import {
 
 // 权限检查
 const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
-// if (userInfo.role !== 2) {
+
-//   ElMessage.error("您没有权限访问此页面");
-//   window.history.back();
-// }
 
 // 列表数据
 const attendanceList = ref([]);

src/views/performance/attendance/reviewed/index.vue

@@ -164,10 +164,7 @@ import {
 
 // 权限检查
 const userInfo = JSON.parse(sessionStorage.getItem("userInfo") || "{}");
-// if (userInfo.role !== 2) {
+
-//   ElMessage.error("您没有权限访问此页面");
-//   window.history.back();
-// }
 
 // 列表数据
 const attendanceList = ref([]);