xugu_license/static/user/user.js

document.addEventListener('DOMContentLoaded', function() {
    // 确保在页面内容完全加载后执行
    console.log('user.js loaded');
    // 其他 JavaScript 代码
});


/*-------------------------------------------------- */

// 统一的打开模态框函数
function openModal(modalId) {
    const modal = document.getElementById(modalId);
    if (modal) {
        modal.style.display = "block"; // 显示模态框
    } else {
        console.error('模态框不存在，ID:', modalId);
    }
}

// 统一的关闭模态框函数
function closeModal(modalId) {
    const modal = document.getElementById(modalId);
    if (modal) {
        modal.style.display = "none"; // 隐藏模态框
    } else {
        console.error('模态框不存在，ID:', modalId);
    }
}

// 点击"新增用户"按钮时，打开添加用户的模态框
document.getElementById("addUserButton").addEventListener('click', function() {
    saveNewUserActionModal(); // 打开的是添加用户的模态框
});
/*-------------------------------------------------- */

fetchUsers();
function fetchUsers() {
    console.log('Fetching users...');
    fetch('http://10.28.20.105:8080/api/admin/userInfoAll', {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${authToken}`,
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        const cardsContainer = document.querySelector('#users-cards');
        cardsContainer.innerHTML = ''; // 清空旧的卡片内容
        data.data.forEach(user => {
            if (user.Account === 'admin') {
                return;
            }

            const card = document.createElement('div');
            card.classList.add('user-info-card');
            card.innerHTML = `
                <div class="user-info-card-content">
                    <p><strong>用户名:</strong> ${user.Username}</p>
                    <p><strong>电话:</strong> ${user.Telephone}</p>
                    <p><strong>邮箱:</strong> ${user.Email}</p>
                    <p><strong>权限:</strong> ${user.Role}</p>
                    <p><strong>账号:</strong> ${user.Account}</p>
                </div>
            `;

            card.addEventListener('click', (event) => {
                openUserActionModal(user);
            });

            cardsContainer.appendChild(card);
        });
    });
}

function openUserActionModal(user) {
    // 填充用户信息到模态框
    document.getElementById("modal-username").innerText = `用户名: ${user.Username}`;
    document.getElementById("modal-telephone").innerText = `电话: ${user.Telephone}`;
    document.getElementById("modal-email").innerText = `邮箱: ${user.Email}`;
    document.getElementById("modal-role").innerText = `权限: ${user.Role}`;
    document.getElementById("modal-account").innerText = `账号: ${user.Account}`;

    // 调用统一的 openModal 函数来显示模态框
    openModal('userActionModal');

    // 处理修改用户按钮点击
    document.getElementById("editUserButton").onclick = () => {
        closeModal("userActionModal"); // 先关闭用户信息模态框
        editUser(user); // 打开编辑用户模态框
    };

    // 处理删除用户按钮点击
    document.getElementById("deleteUserButton").onclick = () => {
        deleteUser(user);
    };



    // 关闭模态框的点击事件（右上角关闭按钮）
    document.querySelector(".user-info-close").onclick = function() {
        closeModal("userActionModal"); // 使用封装好的 closeModal 函数
    };

    // 点击模态框外部时关闭模态框
    window.onclick = function(event) {
        const modal = document.getElementById("userActionModal");
        if (event.target === modal) {
            closeModal("userActionModal"); // 使用封装好的 closeModal 函数
        }
    };
}



//修改用户
function editUser(user) {
    const modal = document.getElementById("editUserModal");
    const usernameInput = document.getElementById("username");
    const telephoneInput = document.getElementById("telephone");
    const emailInput = document.getElementById("email");
    const passwordInput = document.getElementById("password");
    const roleSelectDiv = document.getElementById("roleSelectDiv");
    const roleSelect = document.getElementById("role");

    // 填充用户信息
    usernameInput.value = user.Username;
    telephoneInput.value = user.Telephone;
    emailInput.value = user.Email;


    // 检查权限并填充角色选择框
    if (currentUserPermissions.includes('update_role')) {
        roleSelectDiv.style.display = "block";
        fetch('http://10.28.20.105:8080/api/admin/GetRoleNames', {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${authToken}`,
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            roleSelect.innerHTML = ''; // 清空选项
            data.roles.forEach(role => {
                const option = document.createElement('option');
                option.value = role;
                option.textContent = role;
                if (user.Role === role) {
                    option.selected = true;
                }
                roleSelect.appendChild(option);
            });
        })
        .catch(error => console.error('获取角色列表时出错:', error));
    } else {
        roleSelectDiv.style.display = "none";
    }

    // 显示编辑用户模态框
    modal.classList.add("show");

    // 关闭模态框事件
    document.getElementById("closeModalButton").onclick = () => {
        modal.classList.remove("show");
    };
    console.log("user",user);
    // 保存修改事件
    document.getElementById("saveChangesButton").onclick = () => {
        const updatedUser = {
            id: user.Id,
            unique_id : user.UniqueID,
            account: user.Account,
            username: usernameInput.value,
            telephone: telephoneInput.value,
            email: emailInput.value,
            password: passwordInput.value,
            role: roleSelect.value
        };

        // API 请求保存用户信息
        fetch('http://10.28.20.105:8080/api/admin/updateUser', {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${authToken}`,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(updatedUser)
        })
        .then(response => {
            if (response.ok) {
                console.log('用户信息保存成功');
                modal.classList.remove("show"); // 关闭模态框
                alert('用户信息修改成功！'); // 使用alert弹出提示
                fetchUsers(); 
                //window.location.reload(); // 刷新页面
                
                // 可以在这里添加成功提示
            } else {
                alert('用户信息修改失败:', response.statusText); // 使用alert弹出提示
                console.error('保存用户信息失败:', response.statusText);
            }
        })
        .catch(error => console.error('请求出错:', error));
    };
}
// 绑定按钮点击事件
document.getElementById("editUserButton").onclick = () => {
    editUser(user);
};




//删除用户
function deleteUser(user) {
    const uniqueID = user.UniqueID; // 获取用户的唯一ID
    fetch('http://10.28.20.105:8080/api/admin/deleteUser', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${authToken}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ UniqueID: uniqueID })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            closeModal("userActionModal"); // 使用封装好的 closeModal 函数
            alert('用户删除成功！');
            fetchUsers(); // 重新加载用户列表
        } else {
            closeModal("userActionModal"); // 使用封装好的 closeModal 函数
            alert('用户删除失败：' + data.error);
        }
    })
    .catch(error => {
        console.error('删除用户时发生错误:', error);
        alert('删除用户时发生错误，请稍后再试。');
    });
}







// 保存新用户
// 保存新用户的函数，并在适当的时候打开和关闭模态框
function saveNewUserActionModal(user) {
    openModal('user-info-addUserModal'); // 打开的是添加用户的模态框

    // 点击模态框外部时关闭模态框
    window.onclick = function(event) {
        const modal = document.getElementById("user-info-addUserModal");
        if (event.target === modal) {
            closeModal("user-info-addUserModal"); // 使用封装好的 closeModal 函数
        }
    };
}




function saveNewUser() {
 
    const username = document.getElementById('user-info-addUsername').value.trim();
    const password = document.getElementById('user-info-addPassword').value.trim();
    const account = document.getElementById('user-info-addAccount').value.trim();
    const telephone = document.getElementById('user-info-addTelephone').value.trim();
    const email = document.getElementById('user-info-addEmail').value.trim();

    // 验证每个字段都不能为空
    if (!username || !password || !account || !telephone || !email) {
        alert('有空选项未填写');
        return;
    }

    // 验证电话是否为11位数字
    const phonePattern = /^\d{11}$/;
    if (!phonePattern.test(telephone)) {
        alert('电话必须是11位数字');
        return;
    }

    // 验证密码长度是否至少为6位
    if (password.length < 6) {
        alert('密码长度必须至少为6位');
        return;
    }

    // 验证邮箱是否包含@符号
    if (!email.includes('@')) {
        alert('邮箱必须包含@符号');
        return;
    }

    // 验证账号长度是否至少为3位
    if (account.length < 3) {
        alert('账号长度必须至少为3位');
        return;
    }

    // 构造新用户对象
    const newUser = {
        Username: username,
        Password: password,
        Account: account,
        Telephone: telephone,
        Email: email
    };

    // 发起请求保存新用户
    fetch('http://10.28.20.105:8080/api/register', {  // 修改为实际的API路径
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${authToken}`,  // 确保 authToken 是有效的
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(newUser)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('用户创建成功！');
            fetchUsers(); // 重新加载用户列表
            closeModal('user-info-addUserModal'); // 关闭模态框
        } else {
            alert('用户创建失败：' + data.error);
        }
    })
    .catch(error => {
        alert('请求失败：' + error);
        closeModal('user-info-addUserModal'); // 即使请求失败也可以选择关闭模态框
    });
}