SCRUM5
昨天的成就:
昨天我完成了员工管理模块的最后一部分:调动管理。本项目的的web端的员工管理模块完成。
相关代码:
// 加载调动管理内容
function loadTransferManagement(container) {
container.innerHTML = `
<div class="transfer-management">
<h3 style="font-size: 1.5rem;">调动管理</h3>
<div id="transferContent"></div>
</div>
`;
// 获取当前用户信息以判断是否可以使用调动功能
fetch('/api/user/current-user-info')
.then(response => {
if (!response.ok) {
throw new Error('网络响应失败');
}
return response.json();
})
.then(data => {
const transferContent = document.getElementById('transferContent');
const permissionLevel = data.permissionLevel;
const departmentId = data.departmentId;
// 检查权限和部门
if (permissionLevel === 3 && departmentId === 4) {
// 加载所有部门
fetch('/api/department/all')
.then(response => {
if (!response.ok) {
throw new Error('网络响应失败');
}
return response.json();
})
.then(departments => {
// 渲染部门列表
let departmentsHtml = '<div style="display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px;">';
departments.forEach(dept => {
departmentsHtml += `
<button onclick="selectDepartment(${dept.departmentId})" style="padding: 8px 15px; background-color: #e6f2ff; border: 1px solid #bbdefb; border-radius: 4px; cursor: pointer;">
${dept.departmentName}
</button>
`;
});
departmentsHtml += '</div>';
transferContent.innerHTML = departmentsHtml + '<div id="departmentEmployees"></div><div id="transferForm" style="display: none; margin-top: 20px;"></div>';
})
.catch(error => {
console.error('获取部门数据出错:', error);
transferContent.innerHTML = '<p style="color: red; font-size: 1.2rem;">获取部门数据失败,请重试</p>';
});
} else {
// 权限不足
transferContent.innerHTML = `
<p style="font-size: 1.2rem; color: #666;">您没有权限进行调动操作。</p>
`;
}
})
.catch(error => {
console.error('获取当前用户信息出错:', error);
document.getElementById('transferContent').innerHTML = '<p style="color: red; font-size: 1.2rem;">获取用户信息失败,请刷新重试</p>';
});
}
// 选择部门并加载该部门的员工
function selectDepartment(departmentId) {
// 获取部门名称
const departmentName = event.target.textContent;
// 加载该部门的员工(排除permission_level为3的员工)
fetch(`/api/user/department/${departmentId}/employees`)
.then(response => {
if (!response.ok) {
throw new Error('网络响应失败');
}
return response.json();
})
.then(employees => {
const departmentEmployees = document.getElementById('departmentEmployees');
let employeesHtml = `<h4 style="margin-top: 20px; font-size: 1.3rem;">${departmentName} 的员工</h4>`;
employeesHtml += '<ul style="list-style-type: none; padding: 0; margin-top: 10px;">';
employees.forEach(employee => {
employeesHtml += `
<li style="padding: 10px; border-bottom: 1px solid #eee; font-size: 1.1rem; display: flex; justify-content: space-between; align-items: center;">
<span>员工ID ${employee.id},职位:${employee.position}</span>
<button onclick="showTransferForm(${employee.id}, '${departmentName}')" style="padding: 5px 10px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">调动</button>
</li>
`;
});
employeesHtml += '</ul>';
departmentEmployees.innerHTML = employeesHtml;
})
.catch(error => {
console.error('获取员工数据出错:', error);
document.getElementById('departmentEmployees').innerHTML = '<p style="color: red; font-size: 1.2rem;">获取员工数据失败,请重试</p>';
});
}
// 显示调动表单
function showTransferForm(employeeId, departmentName) {
// 加载所有目标部门(排除当前部门)
fetch('/api/department/all')
.then(response => {
if (!response.ok) {
throw new Error('网络响应失败');
}
return response.json();
})
.then(departments => {
const transferForm = document.getElementById('transferForm');
let departmentsHtml = '<label for="targetDepartment" style="display: block; margin-bottom: 5px; font-size: 1.1rem;">目标部门:</label>';
departmentsHtml += '<select id="targetDepartment" style="width: 100%; padding: 8px; font-size: 1rem; margin-bottom: 15px;">';
departments.forEach(dept => {
if (dept.departmentName !== departmentName) { // 排除当前部门
departmentsHtml += `
<option value="${dept.departmentId}">${dept.departmentName}</option>
`;
}
});
departmentsHtml += '</select>';
transferForm.innerHTML = `
<h4 style="margin-top: 0; font-size: 1.3rem;">调动员工</h4>
<p style="font-size: 1.1rem; margin-bottom: 15px;">您正在调动来自 ${departmentName} 的员工ID ${employeeId}</p>
${departmentsHtml}
<button onclick="submitTransfer(${employeeId})" style="font-size: 1.1rem; padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">确认调动</button>
`;
transferForm.style.display = 'block';
})
.catch(error => {
console.error('获取部门数据出错:', error);
document.getElementById('transferForm').innerHTML = '<p style="color: red; font-size: 1.2rem;">获取部门数据失败,请重试</p>';
});
}
// 提交调动请求
function submitTransfer(employeeId) {
const targetDepartmentId = document.getElementById('targetDepartment').value;
fetch('/api/user/transfer', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
employeeId: employeeId,
targetDepartmentId: targetDepartmentId
})
})
.then(response => {
if (!response.ok) {
throw new Error('网络响应失败');
}
return response.json();
})
.then(data => {
alert('员工调动成功!');
// 刷新页面以显示新状态
location.reload();
})
.catch(error => {
console.error('提交调动请求出错:', error);
alert('调动操作失败,请重试');
});
}
遇到了的困难:
这次编程的过程中没有太大的困难,在我编程完运行时发现项目和之前一样,调用开发者工具发现页面代码与之前一样,没有加入我刚写好的代码,这个不是大问题,清理缓存即可。
今天的任务:
将小组成员负责的企业管理模块与我的项目对接。