11.23

标签：username console 11.23 employeeLeaveInfo const data employeeName

今天实现前端的主页登录和管理员代码

index.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style>
        button {
            display: block;
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .centered-form {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .bordered-form {
            border: 2px solid #000; /* 边框样式 */
            padding: 20px; /* 可选的内边距 */
            background-color: #f0f0f0; /* 可选的背景颜色 */
        }
    </style>
</head>
<body>
<div class="centered-form">
    <div class="bordered-form">
        <h1>用户登录</h1>
        <form id="login">
            <label for="username">用户名:</label><input type="text" id="username">
            <br>
            <label for="password">密码:</label><input type="password" id="password">
            <br>
            <div class="centered-buttons">
                <button type="submit" style="display: block; margin: 0 auto;">登录</button>
                <br>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    document.getElementById("login").addEventListener("submit", function (event) {
        event.preventDefault();
        const username = document.getElementById("username").value;
        const password = document.getElementById("password").value;
        // const loginUser = document.querySelectorAll('input[name="loginUser"]');
        // let l;
        //
        // loginUser.forEach(radio => {
        //   if (radio.checked) {
        //     l = radio.value;
        //   }
        // });
        const url = `user/getByUser?username=${username}&password=${password}`;
        fetch(url, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success' && data.data != null) {
                    alert("登录成功");
                    if (data.data.role === '管理员') {
                        window.location.href = "ROOT/root.html?username=" + encodeURIComponent(username);
                    } else if (data.data.role === '员工') {
                        window.location.href = "STAFF/staff.html?username=" + encodeURIComponent(username);
                    } else if (data.data.role === '经理') {
                        window.location.href = "MANAGE/manage.html?username=" + encodeURIComponent(username);
                    }
                } else {
                    alert("登录失败");
                    console.log(data);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    });
</script>
</html>

MANAGE.manage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>经理页面</title>
    <style>
        .form {
            width: 600px;
            margin: 0 auto;
            /*border: 1px solid red;*/
        }

        .form table {
            margin: 0 auto;
        }

        .form table tr td {
            width: 100px;
            height: 30px;
            border: 1px solid #000;
            text-align: center;
        }

        button {
            display: block;
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h1 style="text-align: center">经理系统</h1>
<script>
    // 获取URL中的用户名参数
    var urlParams = new URLSearchParams(window.location.search);
    var username = urlParams.get('username');
    console.log(username);
</script>
<div class="form">
    <table border="1px" cellspacing="0" width="600px">
        <tr>
            <th>编号</th>
            <th>功能</th>
        </tr>
        <tr>
            <td>1</td>
            <td>
                <button id="select">查看个人信息</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>
                <button id="update">修改信息</button>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>
                <button id="update2">修改个人密码</button>
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td>
                <button id="daily">统计部门考勤情况</button>
            </td>
        </tr>
        <tr>
            <td>5</td>
            <td>
                <button id="low">审批请假</button>
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    document.getElementById("select").addEventListener("click", function () {
        window.location.href = "../STAFF/select.html?username=" + encodeURIComponent(username);
    });
    document.getElementById('update').addEventListener('click', function () {
        window.location.href = "../ROOT/update2.html?username=" + encodeURIComponent(username);
    });
    document.getElementById("update2").addEventListener("click", function () {
        window.location.href = "../STAFF/update1.html?username=" + encodeURIComponent(username);
    });
    document.getElementById('daily').addEventListener('click', function () {
        window.location.href = "count.html?username=" + encodeURIComponent(username);
    });
    document.getElementById("low").addEventListener("click", function () {
        window.location.href = "pass.html?username=" + encodeURIComponent(username);
    });

</script>
</html>

pass.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>审批请假</title>
</head>
<body>
<div id="container">

</div>
<div id="summaryContainer">

</div>
</body>
<script>
    var urlParams = new URLSearchParams(window.location.search);
    var id = urlParams.get('username');
    console.log(id);
    const requestUrl = `http://localhost:8080/staff/low`;
    fetch(requestUrl,
        {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
        })
        .then(res => res.json())
        .then(data => {
            if (data.msg === 'success') {
                console.log(data);
                generateSummary(data.data);
                // generateTable(data.data);
            } else {
                alert("查询失败  " + data.msg);
            }
        })
        .catch(error => {
            alert("请求失败，请重试");
            console.error(error);
        });
</script>
<script>
    function generateSummary(data) {
        const summaryContainer = document.getElementById("summaryContainer");

        // Clear all child nodes in summaryContainer
        while (summaryContainer.hasChildNodes()) {
            summaryContainer.removeChild(summaryContainer.firstChild);
        }

        // Use an object to store employee names as keys and corresponding leave information as values
        const employeeLeaveInfo = {};

        // Iterate through the original data and group data by employee name
        for (let i = 0; i < data.length; i++) {
            const employeeName = data[i].name;
            if (!employeeLeaveInfo[employeeName]) {
                employeeLeaveInfo[employeeName] = {
                    gender: data[i].sex,
                    startDate: data[i].attendanceTime,
                    endDate: data[i].attendanceTime,
                    leaveType: data[i].attendanceType,
                    reasons: [data[i].notes],
                };
            } else {
                employeeLeaveInfo[employeeName].endDate = data[i].attendanceTime;
                employeeLeaveInfo[employeeName].reasons.push(data[i].notes);
            }
        }

        // Generate summary information and add it to summaryContainer
        for (const employeeName in employeeLeaveInfo) {
            const summary = document.createElement("div");
            summary.innerHTML = `<p>员工姓名: ${employeeName}</p>
                             <p>性别: ${employeeLeaveInfo[employeeName].gender}</p>
                             <p>请假开始日期: ${employeeLeaveInfo[employeeName].startDate}</p>
                             <p>结束日期: ${employeeLeaveInfo[employeeName].endDate}</p>
                             <p>请假类型: ${employeeLeaveInfo[employeeName].leaveType}</p>
                             <p>请假事由: ${employeeLeaveInfo[employeeName].reasons.join(', ')}</p>`;

            // Create approve and reject buttons
            const approveButton = document.createElement("button");
            approveButton.textContent = "批准";
            approveButton.addEventListener("click", () => handleApproval(employeeName, employeeLeaveInfo[employeeName].leaveType));

            const rejectButton = document.createElement("button");
            rejectButton.textContent = "驳回";
            rejectButton.addEventListener("click", () => handleRejection(employeeName, employeeLeaveInfo[employeeName].leaveType));
            // Append buttons to the summary
            summary.appendChild(approveButton);
            summary.appendChild(rejectButton);
            // Append the summary to the container
            summaryContainer.appendChild(summary);
        }

        // Handle approval logic
        function handleApproval(name, type) {
            // Implement logic for approving leave for the specified employee
            console.log(`Leave approved for ${name}`);
            const i = 1;
            console.log(name + " " + type + " " + i);
            const requestUrl = `http://localhost:8080/staff/approve/${name}/${type}/${i}`;
            fetch(requestUrl,
                {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                })
                .then(res => res.json())
                .then(data => {
                    if (data.msg === 'success') {
                        console.log(data);
                        alert("申请批准！")
                    } else {
                        alert("查询失败  " + data.msg);
                    }
                })
                .catch(error => {
                    alert("请求失败，请重试");
                    console.error(error);
                });
        }

        // Handle rejection logic
        function handleRejection(name, type) {
            // Implement logic for rejecting leave for the specified employee
            console.log(`Leave approved for ${name}`);
            const i = -1;
            console.log(name + " " + type + " " + i);
            const requestUrl = `http://localhost:8080/staff/approve/${name}/${type}/${i}`;
            fetch(requestUrl,
                {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                })
                .then(res => res.json())
                .then(data => {
                    if (data.msg === 'success') {
                        console.log(data);
                        alert("申请驳回！")
                    } else {
                        alert("查询失败  " + data.msg);
                    }
                })
                .catch(error => {
                    alert("请求失败，请重试");
                    console.error(error);
                });
        }
    }

</script>

</html>

标签：username,console,11.23,employeeLeaveInfo,const,data,employeeName
From： https://www.cnblogs.com/zzqq1314/p/17910890.html

相关文章

赞助商

阅读排行