SCRUM7

今天的成就：
今天结合了组员的代码，再加上自己的改进和对我的编码工具的适配，完成了企业信息和组织架构模块（组织架构有些功能未完成）
相关代码：

// 加载部门管理内容
function loadDepartmentManagement(container) {
    container.innerHTML = `
        <div class="department-management">
            <h3 style="font-size: 1.5rem;">部门管理</h3>
            <div id="departmentContent"></div>
        </div>
    `;

    // 获取部门数据
    fetch('/api/department/all')
        .then(response => response.json())
        .then(departments => {
            // 获取小部门数据
            fetch('/api/subdepartments/all')
                .then(response => response.json())
                .then(subDepartments => {
                    renderOrganizationChart(container, departments, subDepartments);
                })
                .catch(error => {
                    console.error('获取小部门数据失败:', error);
                    document.getElementById('departmentContent').innerHTML = '<p style="color: red; font-size: 1.2rem;">获取小部门数据失败，请刷新重试</p>';
                });
        })
        .catch(error => {
            console.error('获取部门数据失败:', error);
            document.getElementById('departmentContent').innerHTML = '<p style="color: red; font-size: 1.2rem;">获取部门数据失败，请刷新重试</p>';
        });
}

// 渲染组织架构图
function renderOrganizationChart(container, departments, subDepartments) {
    const departmentContent = document.getElementById('departmentContent');
    departmentContent.innerHTML = '';

    // 创建组织架构图的 HTML 结构
    let orgChartHTML = `
        <div class="org-chart">
            <div class="level">
                <div class="department-box">公司</div>
            </div>
            <div class="level" id="departmentLevel"></div>
            <div class="level" id="subDepartmentLevel"></div>
        </div>
    `;

    departmentContent.innerHTML = orgChartHTML;

    // 填充部门数据
    const departmentLevel = document.getElementById('departmentLevel');
    departments.forEach(dept => {
        departmentLevel.innerHTML += `
            <div class="department-box" data-department-id="${dept.departmentId}">
                ${dept.departmentName}
            </div>
        `;
    });

    // 填充小部门数据
    const subDepartmentLevel = document.getElementById('subDepartmentLevel');
    subDepartments.forEach(subDept => {
        subDepartmentLevel.innerHTML += `
            <div class="sub-department-box" data-department-id="${subDept.departmentId}">
                ${subDept.name}
            </div>
        `;
    });

    // 添加连线
    addConnections();
}

// 添加连线
function addConnections() {
    // 为每个小部门添加连线到对应的部门
    const subDepartmentBoxes = document.querySelectorAll('.sub-department-box');
    subDepartmentBoxes.forEach(box => {
        const departmentId = box.getAttribute('data-department-id');
        const departmentBox = document.querySelector(`.department-box[data-department-id="${departmentId}"]`);

        if (departmentBox) {
            // 创建连线
            const connection = document.createElement('div');
            connection.className = 'connection';
            connection.style.position = 'absolute';
            connection.style.top = `${box.offsetTop - 10}px`;
            connection.style.left = `${box.offsetLeft + box.offsetWidth / 2}px`;
            connection.style.width = '1px';
            connection.style.height = '10px';
            connection.style.backgroundColor = '#ccc';
            connection.style.zIndex = '-1';

            document.getElementById('departmentContent').appendChild(connection);
        }
    });
}

// 加载企业信息管理内容
function loadEnterpriseInfoManagement(container) {
    container.innerHTML = `
        <div class="enterprise-info-management">
            <h3 style="font-size: 1.5rem;">企业信息管理</h3>
            <div id="enterpriseInfoContent"></div>
        </div>
    `;

    const enterpriseInfoContent = document.getElementById('enterpriseInfoContent');
    enterpriseInfoContent.innerHTML = `
        <div id="formContainer" class="form-container"></div>
    `;

    // 初始加载时显示企业信息
    loadEnterpriseInfo();
}

// 加载企业信息
function loadEnterpriseInfo() {
    fetch('/api/enterprise/info')
        .then(response => {
            if (!response.ok) {
                throw new Error('网络响应失败');
            }
            return response.json();
        })
        .then(data => {
            const formContainer = document.getElementById('formContainer');
            if (!data) {
                // 显示新建按钮
                formContainer.innerHTML = `
                    <button onclick="showEmptyForm()" class="btn btn-primary">新建</button>
                `;
                return;
            }

            // 隐藏新建按钮，显示表单和按钮
            let infoHtml = `
                <form id="enterpriseInfoForm" class="enterprise-info-form" onsubmit="return false;">
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="companyName">公司名称</label>
                            <input type="text" id="companyName" class="form-control" value="${data.companyName || ''}">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="creditCode">统一信用代码</label>
                            <input type="text" id="creditCode" class="form-control" value="${data.creditCode || ''}">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="legalRepresentative">法人代表</label>
                            <input type="text" id="legalRepresentative" class="form-control" value="${data.legalRepresentative || ''}">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="registeredAddress">注册地址</label>
                            <input type="text" id="registeredAddress" class="form-control" value="${data.registeredAddress || ''}">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="establishmentDate">成立日期</label>
                            <input type="date" id="establishmentDate" class="form-control" value="${data.establishmentDate ? new Date(data.establishmentDate).toISOString().split('T')[0] : ''}">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="registeredCapital">注册资本</label>
                            <input type="text" id="registeredCapital" class="form-control" value="${data.registeredCapital || ''}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="businessScope">经营范围</label>
                        <textarea id="businessScope" class="form-control" rows="3">${data.businessScope || ''}</textarea>
                    </div>
                    <div class="button-container">
                        <button type="button" onclick="submitEnterpriseInfo()" class="btn btn-primary">更新</button>
                        <button type="button" onclick="showHistory(event)" class="btn btn-secondary">历史记录</button>
                    </div>
                </form>
            `;
            formContainer.innerHTML = infoHtml;
        })
        .catch(error => {
            console.error('获取企业信息出错:', error);
            document.getElementById('formContainer').innerHTML = '<p style="color: red; font-size: 1.2rem;">获取企业信息失败，请刷新重试</p>';
        });
}

// 显示历史记录
function showHistory(event) {
    event.stopPropagation(); // 阻止事件冒泡
    console.log("showHistory 被调用");
    fetch('/api/enterprise/history')
        .then(response => {
            if (!response.ok) {
                throw new Error('网络响应失败');
            }
            return response.json();
        })
        .then(data => {
            console.log("历史记录数据:", data);
            if (data.length === 0) {
                alert("没有历史记录");
                return;
            }
            const historyHtml = data.map(item => `
                <div style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;">
                    <p><strong>企业ID：</strong>${item.enterpriseId}</p>
                    <p><strong>公司名称：</strong>${item.companyName}</p>
                    <p><strong>统一信用代码：</strong>${item.creditCode}</p>
                    <p><strong>法人代表：</strong>${item.legalRepresentative}</p>
                    <p><strong>注册地址：</strong>${item.registeredAddress}</p>
                    <p><strong>成立日期：</strong>${item.establishmentDate}</p>
                    <p><strong>注册资本：</strong>${item.registeredCapital}</p>
                    <p><strong>经营范围：</strong>${item.businessScope}</p>
                    <p><strong>创建时间：</strong>${item.createTime}</p>
                    <p><strong>更新时间：</strong>${item.updateTime}</p>
                </div>
            `).join('');

            // 创建历史记录窗口
            const historyModal = document.createElement('div');
            historyModal.id = 'historyModal';
            historyModal.style.position = 'fixed';
            historyModal.style.top = '0';
            historyModal.style.left = '0';
            historyModal.style.width = '100%';
            historyModal.style.height = '100%';
            historyModal.style.background = 'rgba(0, 0, 0, 0.5)';
            historyModal.style.display = 'flex';
            historyModal.style.justifyContent = 'center';
            historyModal.style.alignItems = 'center';
            historyModal.style.zIndex = '1000';

            // 创建历史记录内容
            const historyContent = document.createElement('div');
            historyContent.style.background = 'white';
            historyContent.style.padding = '20px';
            historyContent.style.borderRadius = '8px';
            historyContent.style.width = '80%';
            historyContent.style.maxHeight = '80%';
            historyContent.style.overflowY = 'auto';

            // 添加标题和内容
            historyContent.innerHTML = `
                <h3>企业信息历史记录</h3>
                <div id="historyContent">${historyHtml}</div>
                <button onclick="closeHistoryModal()" class="btn btn-primary" style="margin-top: 20px;">关闭</button>
            `;

            // 将内容添加到窗口
            historyModal.appendChild(historyContent);
            document.body.appendChild(historyModal);
        })
        .catch(error => {
            console.error('获取企业信息历史记录失败:', error);
            alert('获取企业信息历史记录失败，请重试');
        });
}

// 关闭历史记录窗口
function closeHistoryModal() {
    const historyModal = document.getElementById('historyModal');
    if (historyModal) {
        document.body.removeChild(historyModal);
    }
}

// 显示空表单
function showEmptyForm() {
    const formContainer = document.getElementById('formContainer');
    formContainer.innerHTML = `
        <form id="enterpriseInfoForm" onsubmit="return false;">
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="companyName">公司名称</label>
                    <input type="text" id="companyName" class="form-control">
                </div>
                <div class="form-group col-md-6">
                    <label for="creditCode">统一信用代码</label>
                    <input type="text" id="creditCode" class="form-control">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="legalRepresentative">法人代表</label>
                    <input type="text" id="legalRepresentative" class="form-control">
                </div>
                <div class="form-group col-md-6">
                    <label for="registeredAddress">注册地址</label>
                    <input type="text" id="registeredAddress" class="form-control">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="establishmentDate">成立日期</label>
                    <input type="date" id="establishmentDate" class="form-control">
                </div>
                <div class="form-group col-md-6">
                    <label for="registeredCapital">注册资本</label>
                    <input type="text" id="registeredCapital" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label for="businessScope">经营范围</label>
                <textarea id="businessScope" class="form-control" rows="3"></textarea>
            </div>
            <button type="button" onclick="submitEnterpriseInfo()" class="btn btn-primary">提交</button>
        </form>
    `;
}

// 提交企业信息
function submitEnterpriseInfo() {
    const companyName = document.getElementById('companyName').value;
    const creditCode = document.getElementById('creditCode').value;
    const legalRepresentative = document.getElementById('legalRepresentative').value;
    const registeredAddress = document.getElementById('registeredAddress').value;
    const establishmentDate = document.getElementById('establishmentDate').value;
    const registeredCapital = document.getElementById('registeredCapital').value;
    const businessScope = document.getElementById('businessScope').value;

    fetch('/api/enterprise/save', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            companyName: companyName,
            creditCode: creditCode,
            legalRepresentative: legalRepresentative,
            registeredAddress: registeredAddress,
            establishmentDate: establishmentDate,
            registeredCapital: registeredCapital,
            businessScope: businessScope
        })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('网络响应失败');
        }
        return response.json();
    })
    .then(data => {
        alert('企业信息保存成功！');
        // 刷新页面以显示新状态
        location.reload();
    })
    .catch(error => {
        console.error('保存企业信息失败:', error);
        alert('保存企业信息失败，请重试');
    });
}

遇到的困难：
困难主要是在于我与组员的开发环境和配置版本不同，这导致我不能直接使用其代码，只能一边改，一边添加。
另外再编码的过程里也遇见困难，比如：再写企业信息的历史记录时，按计划是会出现个窗口显示，但当时出错，导致出现窗口后立即回到主界面，导致窗口被覆盖。在排查至少半小时后才解决这个问题。

今天的任务：
将组织架构剩下的内容全部按要求完成，再利用剩下的时间继续完成编制管理和部门管理模块。