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

5.16

Browse Source
This commit is contained in:
hezhidong
2025-05-16 08:55:13 +08:00
parent e62c3fce70
commit 839703dc1a
66 changed files with 5029 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/groupManagement/index.vue
+377
View File
@@ -0,0 +1,377 @@
<template>
<div class="group-management-container">
<!-- 左侧组别管理 -->
<div class="left-panel">
<el-card>
<template #header>
<div class="card-header">
<span>组别管理</span>
<el-button type="primary" @click="handleAdd">添加组别</el-button>
</div>
</template>
<el-table :data="groupList" style="width: 100%" @row-click="handleGroupSelect">
<el-table-column prop="groupId" label="组别ID" width="180" />
<el-table-column prop="groupName" label="组别名称" />
<el-table-column prop="createTime" label="创建时间">
<template #default="scope">
{{ scope.row.createTime || "暂无" }}
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template #default="scope">
<el-button type="primary" link @click.stop="handleEdit(scope.row)"
>编辑</el-button
>
<el-button type="danger" link @click.stop="handleDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
<!-- 右侧成员管理 -->
<div class="right-panel">
<el-card v-if="currentGroup">
<template #header>
<div class="card-header">
<span>{{ currentGroup.groupName }} - 成员管理</span>
</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">
<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">
<template #default="scope">
<el-select
v-model="scope.row.role"
placeholder="选择角色"
@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>
</el-table-column>
<el-table-column label="操作" width="100">
<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
>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</el-card>
<el-empty v-else description="请选择左侧组别进行管理" />
</div>
<!-- 添加/编辑组别对话框 -->
<el-dialog
v-model="dialogVisible"
:title="dialogType === 'add' ? '添加组别' : '编辑组别'"
width="500px"
>
<el-form :model="groupForm" label-width="80px">
<el-form-item label="组别名称" required>
<el-input v-model="groupForm.groupName" placeholder="请输入组别名称" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
getGroupList,
addGroup,
updateGroup,
deleteGroup,
getNonGroupUsers,
updateGroupUserRole,
getGroupUsers,
deleteGroupUser,
} from "../../api/modules/index";
// 组别列表数据
const groupList = ref([]);
const currentGroup = ref(null);
// 对话框相关
const dialogVisible = ref(false);
const dialogType = ref("add"); // add 或 edit
const groupForm = ref({
groupId: null,
groupName: "",
});
// 成员管理相关
const nonGroupUsers = ref([]);
const groupUsers = ref([]);
// 获取组别列表
const fetchGroupList = async () => {
try {
const res = await getGroupList();
if (res.errcode === 0) {
groupList.value = res.result;
}
} catch (error) {
ElMessage.error("获取组别列表失败");
}
};
// 选择组别
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("获取未分组人员列表失败");
}
};
// 获取组内人员列表
const fetchGroupUsers = async (groupId) => {
try {
const res = await getGroupUsers(groupId);
if (res.errcode === 0) {
groupUsers.value = res.result;
}
} catch (error) {
ElMessage.error("获取组内人员列表失败");
}
};
// 添加成员
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 handleRoleChange = async (user, role) => {
try {
const res = await updateGroupUserRole(currentGroup.value.groupId, user.userid, role);
if (res.errcode === 0) {
ElMessage.success("修改成功");
}
} catch (error) {
ElMessage.error("修改失败");
}
};
// 移除成员
const handleRemoveUser = async (user) => {
try {
const res = await deleteGroupUser(currentGroup.value.groupId, user.userid);
if (res.errcode === 0) {
ElMessage.success("移除成功");
await Promise.all([
fetchNonGroupUsers(),
fetchGroupUsers(currentGroup.value.groupId),
]);
}
} catch (error) {
ElMessage.error("移除失败");
}
};
// 添加组别
const handleAdd = () => {
dialogType.value = "add";
groupForm.value = {
groupId: null,
groupName: "",
};
dialogVisible.value = true;
};
// 编辑组别
const handleEdit = (row) => {
dialogType.value = "edit";
groupForm.value = {
groupId: row.groupId,
groupName: row.groupName,
};
dialogVisible.value = true;
};
// 删除组别
const handleDelete = (row) => {
ElMessageBox.confirm("确认删除该组别吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(async () => {
try {
const res = await deleteGroup(row.groupId);
if (res.errcode === 0) {
ElMessage.success("删除成功");
if (currentGroup.value?.groupId === row.groupId) {
currentGroup.value = null;
}
fetchGroupList();
}
} catch (error) {
ElMessage.error("删除失败");
}
});
};
// 提交表单
const handleSubmit = async () => {
if (!groupForm.value.groupName) {
ElMessage.warning("请输入组别名称");
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();
}
}
} catch (error) {
ElMessage.error(dialogType.value === "add" ? "添加失败" : "修改失败");
}
};
// 页面加载时获取组别列表
onMounted(() => {
fetchGroupList();
});
</script>
<style lang="scss" scoped>
.group-management-container {
display: flex;
gap: 20px;
height: calc(100vh - 120px);
padding: 20px;
.left-panel {
width: 40%;
min-width: 500px;
}
.right-panel {
flex: 1;
min-width: 600px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
}
.user-management {
.user-container {
display: flex;
gap: 20px;
}
.user-section {
flex: 1;
min-width: 0; // 防止flex子项溢出
h3 {
margin-bottom: 10px;
font-size: 16px;
font-weight: 500;
}
}
}
</style>