修改分组管理
This commit is contained in:
1147680382@qq.com
@@ -79,3 +79,36 @@ export function obtainUserInformationApi(groupId, userid) {
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
// 获取用户工资配置
|
||||
export function getUserSalaryConfig(userid) {
|
||||
return service({
|
||||
url: `/user/salary/config/${userid}`,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
// 更新用户工资配置
|
||||
export function updateUserSalaryConfig(data) {
|
||||
return service({
|
||||
url: "/user/salary/config",
|
||||
method: "put",
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 添加用户到组
|
||||
export function addUserToGroup(groupId, userid, role) {
|
||||
return service({
|
||||
url: `/group/${groupId}/user/${userid}/role/${role}`,
|
||||
method: 'post'
|
||||
});
|
||||
}
|
||||
|
||||
// 同步钉钉成员
|
||||
export function syncUsers() {
|
||||
return service({
|
||||
url: "/user/sync",
|
||||
method: "post"
|
||||
});
|
||||
}
|
||||
|
||||
+648
-119
@@ -5,30 +5,46 @@
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>组别管理</span>
|
||||
<el-button type="primary" @click="handleAdd">添加组别</el-button>
|
||||
<span class="title">组别管理</span>
|
||||
<div class="header-right">
|
||||
<el-input
|
||||
v-model="groupSearchKeyword"
|
||||
placeholder="请输入组别名称搜索"
|
||||
clearable
|
||||
@input="handleGroupSearch"
|
||||
style="width: 200px; margin-right: 8px;"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-button type="primary" size="small" @click="handleAdd">添加组别</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-table
|
||||
:data="groupList"
|
||||
style="width: 100%"
|
||||
@row-click="handleGroupSelect"
|
||||
:row-class-name="tableRowClassName"
|
||||
height="calc(100vh - 280px)"
|
||||
>
|
||||
<el-table-column prop="groupId" label="组别ID" width="180" />
|
||||
<el-table-column prop="groupName" label="组别名称" />
|
||||
<el-table-column prop="createTime" label="创建时间">
|
||||
<el-table-column prop="groupId" label="组别" width="100" align="center" />
|
||||
<el-table-column prop="groupName" label="组别名称" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="createTime" label="创建时间" width="180" align="center" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
{{ scope.row.createTime || "暂无" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180">
|
||||
<el-table-column label="操作" width="180" fixed="right" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click.stop="handleEdit(scope.row)"
|
||||
<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
|
||||
>
|
||||
@@ -43,26 +59,46 @@
|
||||
<el-card v-if="currentGroup">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ currentGroup.groupName }} - 成员管理</span>
|
||||
<span class="title">{{ currentGroup.groupName }} - 成员管理</span>
|
||||
<div class="header-right">
|
||||
<el-input
|
||||
v-model="memberSearchKeyword"
|
||||
placeholder="请输入姓名搜索"
|
||||
clearable
|
||||
@input="handleMemberSearch"
|
||||
style="width: 200px; margin-right: 8px;"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-button type="primary" size="small" @click="handleAddUser">添加成员</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="user-management">
|
||||
<div class="user-container">
|
||||
<!-- 组内人员列表 -->
|
||||
<div class="user-section">
|
||||
<h3>组内成员</h3>
|
||||
<el-table :data="groupUsers" style="width: 100%" height="500">
|
||||
<el-table-column label="头像" width="80">
|
||||
<el-table
|
||||
:data="groupUsers"
|
||||
style="width: 100%"
|
||||
height="calc(100vh - 280px)"
|
||||
border
|
||||
stripe
|
||||
>
|
||||
<el-table-column label="头像" width="100" align="center">
|
||||
<template #default="scope">
|
||||
<el-avatar :size="40" :src="scope.row.avatar" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" />
|
||||
<el-table-column label="角色" width="120">
|
||||
<el-table-column prop="name" label="姓名" width="100" 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" />
|
||||
@@ -72,46 +108,21 @@
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<el-table-column label="操作" width="220" fixed="right" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="danger"
|
||||
link
|
||||
@click="handleRemoveUser(scope.row)"
|
||||
>移除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 未分组人员列表 -->
|
||||
<div class="user-section">
|
||||
<h3>未分组人员</h3>
|
||||
<el-table :data="nonGroupUsers" style="width: 100%" height="500">
|
||||
<el-table-column label="头像" width="80">
|
||||
<template #default="scope">
|
||||
<el-avatar :size="40" :src="scope.row.avatar" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" />
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<el-select
|
||||
v-model="scope.row.selectedRole"
|
||||
placeholder="选择角色"
|
||||
style="width: 120px"
|
||||
>
|
||||
<el-option label="普通员工" :value="0" />
|
||||
<el-option label="部门主管" :value="1" />
|
||||
<el-option label="综合部" :value="2" />
|
||||
<el-option label="财务部" :value="3" />
|
||||
</el-select>
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
@click="handleAddUser(scope.row)"
|
||||
>添加</el-button
|
||||
size="small"
|
||||
@click="handleViewSalary(scope.row)"
|
||||
>查看工资配置</el-button
|
||||
>
|
||||
<el-button
|
||||
type="danger"
|
||||
link
|
||||
size="small"
|
||||
@click="handleRemoveUser(scope.row)"
|
||||
>移除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -129,8 +140,13 @@
|
||||
:title="dialogType === 'add' ? '添加组别' : '编辑组别'"
|
||||
width="500px"
|
||||
>
|
||||
<el-form :model="groupForm" label-width="80px">
|
||||
<el-form-item label="组别名称" required>
|
||||
<el-form
|
||||
:model="groupForm"
|
||||
:rules="groupRules"
|
||||
ref="groupFormRef"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="组别名称" prop="groupName" required>
|
||||
<el-input
|
||||
v-model="groupForm.groupName"
|
||||
placeholder="请输入组别名称"
|
||||
@@ -144,6 +160,155 @@
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 工资配置对话框 -->
|
||||
<el-dialog
|
||||
v-model="salaryDialogVisible"
|
||||
title="工资配置"
|
||||
width="600px"
|
||||
>
|
||||
<el-form
|
||||
:model="salaryForm"
|
||||
:rules="salaryRules"
|
||||
ref="salaryFormRef"
|
||||
label-width="140px"
|
||||
>
|
||||
<el-form-item label="基本工资" prop="baseSalary" required>
|
||||
<el-input-number
|
||||
v-model="salaryForm.baseSalary"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="100"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="总经理补贴" prop="managerAllowance" required>
|
||||
<el-input-number
|
||||
v-model="salaryForm.managerAllowance"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="100"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="交通补贴" prop="transportationAllowance" required>
|
||||
<el-input-number
|
||||
v-model="salaryForm.transportationAllowance"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="100"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="其他补贴" prop="otherAllowance" required>
|
||||
<el-input-number
|
||||
v-model="salaryForm.otherAllowance"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="100"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="工龄工资" prop="senioritySalary" required>
|
||||
<el-input-number
|
||||
v-model="salaryForm.senioritySalary"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="100"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="年度绩效奖金" prop="annualPerformanceBonus" required>
|
||||
<el-input-number
|
||||
v-model="salaryForm.annualPerformanceBonus"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="100"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="月度绩效奖金" prop="monthlyPerformanceBonus" required>
|
||||
<el-input-number
|
||||
v-model="salaryForm.monthlyPerformanceBonus"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="100"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="其他奖金" prop="otherBonus" required>
|
||||
<el-input-number
|
||||
v-model="salaryForm.otherBonus"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="100"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="salaryDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSalarySubmit">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 添加成员对话框 -->
|
||||
<el-dialog
|
||||
v-model="addUserDialogVisible"
|
||||
title="添加成员"
|
||||
width="800px"
|
||||
>
|
||||
<div class="dialog-header">
|
||||
<div class="left">
|
||||
<el-button type="primary" @click="handleSyncUsers">
|
||||
<el-icon><Refresh /></el-icon>
|
||||
同步钉钉成员
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="请输入姓名搜索"
|
||||
clearable
|
||||
@input="handleSearch"
|
||||
style="width: 200px"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="nonGroupUsers"
|
||||
style="width: 100%"
|
||||
height="400px"
|
||||
border
|
||||
stripe
|
||||
>
|
||||
<el-table-column label="头像" width="80" align="center">
|
||||
<template #default="scope">
|
||||
<el-avatar :size="40" :src="scope.row.avatar" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" min-width="100" />
|
||||
<el-table-column label="操作" width="100" fixed="right" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
size="small"
|
||||
@click="handleAddToGroup(scope.row)"
|
||||
>
|
||||
<el-icon><Plus /></el-icon>
|
||||
添加
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -155,33 +320,98 @@ import {
|
||||
addGroup,
|
||||
updateGroup,
|
||||
deleteGroup,
|
||||
getNonGroupUsers,
|
||||
updateGroupUserRole,
|
||||
getGroupUsers,
|
||||
deleteGroupUser,
|
||||
getUserSalaryConfig,
|
||||
updateUserSalaryConfig,
|
||||
getNonGroupUsers,
|
||||
addUserToGroup,
|
||||
syncUsers,
|
||||
} from "../../api/modules/index";
|
||||
import { Refresh, Search, Plus } from '@element-plus/icons-vue';
|
||||
|
||||
// 组别列表数据
|
||||
const groupList = ref([]);
|
||||
const currentGroup = ref(null);
|
||||
const groupSearchKeyword = ref('');
|
||||
const originalGroupList = ref([]); // 用于存储原始数据
|
||||
|
||||
// 对话框相关
|
||||
const dialogVisible = ref(false);
|
||||
const dialogType = ref("add"); // add 或 edit
|
||||
const groupFormRef = ref(null);
|
||||
const groupForm = ref({
|
||||
groupId: null,
|
||||
groupName: "",
|
||||
});
|
||||
|
||||
// 成员管理相关
|
||||
const nonGroupUsers = ref([]);
|
||||
const groupUsers = ref([]);
|
||||
const memberSearchKeyword = ref('');
|
||||
const originalGroupUsers = ref([]); // 用于存储原始数据
|
||||
|
||||
// 工资配置相关
|
||||
const salaryDialogVisible = ref(false);
|
||||
const salaryFormRef = ref(null);
|
||||
const salaryForm = ref({
|
||||
userid: '',
|
||||
baseSalary: 0,
|
||||
managerAllowance: 0,
|
||||
transportationAllowance: 0,
|
||||
otherAllowance: 0,
|
||||
senioritySalary: 0,
|
||||
annualPerformanceBonus: 0,
|
||||
monthlyPerformanceBonus: 0,
|
||||
otherBonus: 0
|
||||
});
|
||||
|
||||
// 添加成员相关
|
||||
const addUserDialogVisible = ref(false);
|
||||
const nonGroupUsers = ref([]);
|
||||
const searchKeyword = ref('');
|
||||
|
||||
// 表单校验规则
|
||||
const salaryRules = {
|
||||
baseSalary: [
|
||||
{ required: true, message: '请输入基本工资', trigger: 'blur' }
|
||||
],
|
||||
managerAllowance: [
|
||||
{ required: true, message: '请输入总经理补贴', trigger: 'blur' }
|
||||
],
|
||||
transportationAllowance: [
|
||||
{ required: true, message: '请输入交通补贴', trigger: 'blur' }
|
||||
],
|
||||
otherAllowance: [
|
||||
{ required: true, message: '请输入其他补贴', trigger: 'blur' }
|
||||
],
|
||||
senioritySalary: [
|
||||
{ required: true, message: '请输入工龄工资', trigger: 'blur' }
|
||||
],
|
||||
annualPerformanceBonus: [
|
||||
{ required: true, message: '请输入年度绩效奖金', trigger: 'blur' }
|
||||
],
|
||||
monthlyPerformanceBonus: [
|
||||
{ required: true, message: '请输入月度绩效奖金', trigger: 'blur' }
|
||||
],
|
||||
otherBonus: [
|
||||
{ required: true, message: '请输入其他奖金', trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
|
||||
// 组别表单校验规则
|
||||
const groupRules = {
|
||||
groupName: [
|
||||
{ required: true, message: '请输入组别名称', trigger: 'blur' }
|
||||
]
|
||||
};
|
||||
|
||||
// 获取组别列表
|
||||
const fetchGroupList = async () => {
|
||||
try {
|
||||
const res = await getGroupList();
|
||||
if (res.errcode === 0) {
|
||||
originalGroupList.value = res.result;
|
||||
groupList.value = res.result;
|
||||
if (groupList.value && groupList.value.length) {
|
||||
handleGroupSelect(groupList.value[0]);
|
||||
@@ -192,25 +422,21 @@ const fetchGroupList = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 搜索组别
|
||||
const handleGroupSearch = () => {
|
||||
if (!groupSearchKeyword.value) {
|
||||
groupList.value = originalGroupList.value;
|
||||
return;
|
||||
}
|
||||
groupList.value = originalGroupList.value.filter(group =>
|
||||
group.groupName.toLowerCase().includes(groupSearchKeyword.value.toLowerCase())
|
||||
);
|
||||
};
|
||||
|
||||
// 选择组别
|
||||
const handleGroupSelect = async (row) => {
|
||||
currentGroup.value = row;
|
||||
await Promise.all([fetchNonGroupUsers(), fetchGroupUsers(row.groupId)]);
|
||||
};
|
||||
|
||||
// 获取未分组人员列表
|
||||
const fetchNonGroupUsers = async () => {
|
||||
try {
|
||||
const res = await getNonGroupUsers();
|
||||
if (res.errcode === 0) {
|
||||
nonGroupUsers.value = res.result.map((user) => ({
|
||||
...user,
|
||||
selectedRole: 0,
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error("获取未分组人员列表失败");
|
||||
}
|
||||
await fetchGroupUsers(row.groupId);
|
||||
};
|
||||
|
||||
// 获取组内人员列表
|
||||
@@ -218,6 +444,7 @@ const fetchGroupUsers = async (groupId) => {
|
||||
try {
|
||||
const res = await getGroupUsers(groupId);
|
||||
if (res.errcode === 0) {
|
||||
originalGroupUsers.value = res.result;
|
||||
groupUsers.value = res.result;
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -225,24 +452,15 @@ const fetchGroupUsers = async (groupId) => {
|
||||
}
|
||||
};
|
||||
|
||||
// 添加成员
|
||||
const handleAddUser = async (user) => {
|
||||
try {
|
||||
const res = await updateGroupUserRole(
|
||||
currentGroup.value.groupId,
|
||||
user.userid,
|
||||
user.selectedRole
|
||||
);
|
||||
if (res.errcode === 0) {
|
||||
ElMessage.success("添加成功");
|
||||
await Promise.all([
|
||||
fetchNonGroupUsers(),
|
||||
fetchGroupUsers(currentGroup.value.groupId),
|
||||
]);
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error("添加失败");
|
||||
// 搜索成员
|
||||
const handleMemberSearch = () => {
|
||||
if (!memberSearchKeyword.value) {
|
||||
groupUsers.value = originalGroupUsers.value;
|
||||
return;
|
||||
}
|
||||
groupUsers.value = originalGroupUsers.value.filter(user =>
|
||||
user.name.toLowerCase().includes(memberSearchKeyword.value.toLowerCase())
|
||||
);
|
||||
};
|
||||
|
||||
// 修改成员角色
|
||||
@@ -267,10 +485,7 @@ const handleRemoveUser = async (user) => {
|
||||
const res = await deleteGroupUser(currentGroup.value.groupId, user.userid);
|
||||
if (res.errcode === 0) {
|
||||
ElMessage.success("移除成功");
|
||||
await Promise.all([
|
||||
fetchNonGroupUsers(),
|
||||
fetchGroupUsers(currentGroup.value.groupId),
|
||||
]);
|
||||
fetchGroupUsers(currentGroup.value.groupId);
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error("移除失败");
|
||||
@@ -321,35 +536,163 @@ const handleDelete = (row) => {
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
if (!groupForm.value.groupName) {
|
||||
ElMessage.warning("请输入组别名称");
|
||||
return;
|
||||
}
|
||||
if (!groupFormRef.value) return;
|
||||
|
||||
try {
|
||||
if (dialogType.value === "add") {
|
||||
const res = await addGroup({ groupName: groupForm.value.groupName });
|
||||
if (res.errcode === 0) {
|
||||
ElMessage.success("添加成功");
|
||||
dialogVisible.value = false;
|
||||
fetchGroupList();
|
||||
}
|
||||
} else {
|
||||
const res = await updateGroup({
|
||||
groupId: groupForm.value.groupId,
|
||||
groupName: groupForm.value.groupName,
|
||||
});
|
||||
if (res.errcode === 0) {
|
||||
ElMessage.success("修改成功");
|
||||
dialogVisible.value = false;
|
||||
fetchGroupList();
|
||||
await groupFormRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
if (dialogType.value === "add") {
|
||||
const res = await addGroup({ groupName: groupForm.value.groupName });
|
||||
if (res.errcode === 0) {
|
||||
ElMessage.success("添加成功");
|
||||
dialogVisible.value = false;
|
||||
fetchGroupList();
|
||||
}
|
||||
} else {
|
||||
const res = await updateGroup({
|
||||
groupId: groupForm.value.groupId,
|
||||
groupName: groupForm.value.groupName,
|
||||
});
|
||||
if (res.errcode === 0) {
|
||||
ElMessage.success("修改成功");
|
||||
dialogVisible.value = false;
|
||||
fetchGroupList();
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(dialogType.value === "add" ? "添加失败" : "修改失败");
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 查看工资配置
|
||||
const handleViewSalary = async (user) => {
|
||||
try {
|
||||
const res = await getUserSalaryConfig(user.userid);
|
||||
if (res.errcode === 0) {
|
||||
const result = res.result;
|
||||
salaryForm.value = {
|
||||
userid: user.userid,
|
||||
baseSalary: result.baseSalary,
|
||||
managerAllowance: result.managerAllowance,
|
||||
transportationAllowance: result.transportationAllowance,
|
||||
otherAllowance: result.otherAllowance,
|
||||
senioritySalary: result.senioritySalary,
|
||||
annualPerformanceBonus: result.annualPerformanceBonus,
|
||||
monthlyPerformanceBonus: result.monthlyPerformanceBonus,
|
||||
otherBonus: result.otherBonus
|
||||
};
|
||||
salaryDialogVisible.value = true;
|
||||
} else {
|
||||
ElMessage.error('获取工资配置失败');
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error(dialogType.value === "add" ? "添加失败" : "修改失败");
|
||||
ElMessage.error('获取工资配置失败');
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
// 提交工资配置
|
||||
const handleSalarySubmit = async () => {
|
||||
if (!salaryFormRef.value) return;
|
||||
|
||||
await salaryFormRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
const data = {
|
||||
userid: salaryForm.value.userid,
|
||||
baseSalary: salaryForm.value.baseSalary,
|
||||
managerAllowance: salaryForm.value.managerAllowance,
|
||||
transportationAllowance: salaryForm.value.transportationAllowance,
|
||||
otherAllowance: salaryForm.value.otherAllowance,
|
||||
senioritySalary: salaryForm.value.senioritySalary,
|
||||
annualPerformanceBonus: salaryForm.value.annualPerformanceBonus,
|
||||
monthlyPerformanceBonus: salaryForm.value.monthlyPerformanceBonus,
|
||||
otherBonus: salaryForm.value.otherBonus
|
||||
};
|
||||
const res = await updateUserSalaryConfig(data);
|
||||
if (res.errcode === 0) {
|
||||
ElMessage.success('保存成功');
|
||||
salaryDialogVisible.value = false;
|
||||
} else {
|
||||
ElMessage.error('保存失败');
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('保存失败');
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 表格行样式
|
||||
const tableRowClassName = ({ row }) => {
|
||||
if (currentGroup.value && row.groupId === currentGroup.value.groupId) {
|
||||
return 'selected-row';
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
// 打开添加成员对话框
|
||||
const handleAddUser = async () => {
|
||||
addUserDialogVisible.value = true;
|
||||
await fetchNonGroupUsers();
|
||||
};
|
||||
|
||||
// 获取不在组内的用户列表
|
||||
const fetchNonGroupUsers = async () => {
|
||||
try {
|
||||
const res = await getNonGroupUsers();
|
||||
if (res.errcode === 0) {
|
||||
nonGroupUsers.value = res.result;
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error("获取用户列表失败");
|
||||
}
|
||||
};
|
||||
|
||||
// 添加用户到组
|
||||
const handleAddToGroup = async (user) => {
|
||||
try {
|
||||
const res = await addUserToGroup(currentGroup.value.groupId, user.userid, 0); // 默认角色为普通员工
|
||||
if (res.errcode === 0) {
|
||||
ElMessage.success("添加成功");
|
||||
addUserDialogVisible.value = false;
|
||||
fetchGroupUsers(currentGroup.value.groupId);
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error("添加失败");
|
||||
}
|
||||
};
|
||||
|
||||
// 同步钉钉成员
|
||||
const handleSyncUsers = async () => {
|
||||
try {
|
||||
const res = await syncUsers();
|
||||
if (res.errcode === 0) {
|
||||
ElMessage.success("同步成功");
|
||||
await fetchNonGroupUsers(); // 重新获取未加入成员列表
|
||||
} else {
|
||||
ElMessage.error("同步失败");
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error("同步失败");
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
// 搜索用户
|
||||
const handleSearch = () => {
|
||||
if (!searchKeyword.value) {
|
||||
fetchNonGroupUsers();
|
||||
return;
|
||||
}
|
||||
nonGroupUsers.value = nonGroupUsers.value.filter(user =>
|
||||
user.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
|
||||
);
|
||||
};
|
||||
|
||||
// 页面加载时获取组别列表
|
||||
onMounted(() => {
|
||||
fetchGroupList();
|
||||
@@ -362,21 +705,121 @@ onMounted(() => {
|
||||
gap: 20px;
|
||||
height: calc(100vh - 120px);
|
||||
padding: 20px;
|
||||
background-color: var(--el-bg-color-page);
|
||||
|
||||
.left-panel {
|
||||
width: 40%;
|
||||
min-width: 500px;
|
||||
|
||||
:deep(.el-card) {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
|
||||
.el-card__body {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
flex: 1;
|
||||
|
||||
.el-table__body-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-table__cell {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.el-table__header {
|
||||
th {
|
||||
background-color: var(--el-bg-color);
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__row {
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
flex: 1;
|
||||
min-width: 600px;
|
||||
|
||||
:deep(.el-card) {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
|
||||
.el-card__body {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
flex: 1;
|
||||
|
||||
.el-table__body-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-table__cell {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.el-table__header {
|
||||
th {
|
||||
background-color: var(--el-bg-color);
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__row {
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
background-color: var(--el-bg-color);
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -384,17 +827,103 @@ onMounted(() => {
|
||||
.user-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.user-section {
|
||||
flex: 1;
|
||||
min-width: 0; // 防止flex子项溢出
|
||||
|
||||
h3 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.selected-row) {
|
||||
background-color: #f1f1f1 !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__row .current-row) {
|
||||
background-color: #f1f1f1 !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__row:hover) {
|
||||
background-color: #f1f1f1 !important;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
.el-button {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.el-avatar {
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding: 0 20px;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-button) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-weight: 500;
|
||||
|
||||
&.el-button--primary {
|
||||
--el-button-hover-bg-color: var(--el-color-primary-light-3);
|
||||
--el-button-hover-border-color: var(--el-color-primary-light-3);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
box-shadow: 0 0 0 1px var(--el-border-color) inset;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px var(--el-border-color-hover) inset;
|
||||
}
|
||||
|
||||
&.is-focus {
|
||||
box-shadow: 0 0 0 1px var(--el-color-primary) inset;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
:deep(.el-dialog__header) {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
background-color: var(--el-bg-color);
|
||||
}
|
||||
|
||||
:deep(.el-dialog__footer) {
|
||||
padding: 20px;
|
||||
border-top: 1px solid var(--el-border-color-light);
|
||||
background-color: var(--el-bg-color);
|
||||
}
|
||||
|
||||
:deep(.el-dialog) {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user