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://127.0.0.1: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 = () => {
        editUser(user);
    };

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

    // 处理修改密码按钮点击
    document.getElementById("resetPasswordButton").onclick = () => {
        resetUserPassword(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) {
    console.log("Edit user", user);
    // 在这里实现修改用户逻辑
}

function deleteUser(user) {
    console.log("Delete user", user);
    // 在这里实现删除用户逻辑
}

function resetUserPassword(user) {
    console.log("Reset password for user", user);
    // 在这里实现修改密码逻辑
}






// 保存新用户
// 保存新用户的函数，并在适当的时候打开和关闭模态框
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://127.0.0.1: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'); // 即使请求失败也可以选择关闭模态框
    });
}