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('调动操作失败,请重试');
    });
}

遇到了的困难:
这次编程的过程中没有太大的困难,在我编程完运行时发现项目和之前一样,调用开发者工具发现页面代码与之前一样,没有加入我刚写好的代码,这个不是大问题,清理缓存即可。

今天的任务:
将小组成员负责的企业管理模块与我的项目对接。

posted @ 2025-04-25 19:43  老汤姆233  阅读(11)  评论(0)    收藏  举报