11.28

标签：11.28 console alert error var document data

今天实现职员的功能。

staff.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 = "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 = "update1.html?username=" + encodeURIComponent(username);
    });
    document.getElementById('daily').addEventListener('click', function () {
        window.location.href = "daily.html?username=" + encodeURIComponent(username);
    });
    document.getElementById("low").addEventListener("click", function () {
        window.location.href = "low.html?username=" + encodeURIComponent(username);
    });

</script>
</html>

daily.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>

<script>
    function getShanghaiTime() {
        var options = {timeZone: 'Asia/Shanghai'};
        return new Date().toLocaleString('en-US', options);
    }

    function formatDate(dateString) {
        var date = new Date(dateString);
        var hours = date.getHours();
        var minutes = date.getMinutes();

        hours = (hours < 10) ? "0" + hours : hours;
        minutes = (minutes < 10) ? "0" + minutes : minutes;

        return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " +
            hours + ":" + minutes;
    }

    function checkIn() {
        var attendanceTime = getShanghaiTime();
        var currentTime = new Date(attendanceTime);
        var hours = currentTime.getHours();
        if (hours >= 8 && hours < 9) {
            alert("打卡成功，已上班");
            document.getElementById("status").innerHTML = "已上班";
            document.getElementById("attendanceTime").innerHTML = "考勤时间：" + formatDate(attendanceTime);
            deal1(0, attendanceTime);
        } else {
            alert("已过上班打卡时间点，打卡无效");
        }
    }

    function checkOut() {
        var attendanceTime = getShanghaiTime();
        var currentTime = new Date(attendanceTime);
        var hours = currentTime.getHours();

        if (hours >= 17) {
            alert("打卡成功，已下班");
            document.getElementById("status").innerHTML = "已下班";
            document.getElementById("attendanceTime").innerHTML = "考勤时间：" + formatDate(attendanceTime);
            deal1(1, formatDate(attendanceTime));
            console.log(formatDate(attendanceTime));
        } else {
            alert("未到下班打卡时间点，打卡无效");
        }
    }
function deal1(type,attendanceTime)
{
    const requestUrl = `http://localhost:8080/staff/count`;
    fetch(requestUrl,
        {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
        })
        .then(res => res.json())
        .then(data => {
            deal(data+1,type,attendanceTime);
        })
        .catch(error => {
            alert("请求失败，请重试");
            console.error(error);
        });
}
    function deal(count,type, attendanceTime) {
        var urlParams = new URLSearchParams(window.location.search);
        var id = urlParams.get('username');
        console.log(id);
        const requestUrl = `http://localhost:8080/user/selectById/${id}`;
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    console.log(data);
                    add(count,data.data, type, attendanceTime);
                } else {
                    alert("查询失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }

    function add(count,data, type, attendanceTime) {
        const requestUrl = `http://localhost:8080/staff/add`;
        fetch(requestUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                id:count,
                attendanceTime: attendanceTime,
                jobID: data.jobID,
                name: data.name,
                sex: data.sex,
                department: data.department,
                attendanceType: type
            })
        })
            .then(response => response.json())
            .then(data => {
                if (data.msg === 'success') {
                    alert("打卡信息已添加");
                    console.log(data);
                } else {
                    alert("修改失败");
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
<div class="centered-form">
    <div class="bordered-form">
        <h2>日常考勤管理</h2>
        <br>
        <br>
        <p id="attendanceTime"></p>
        <button onclick="checkIn()" style="display: block; margin: 0 auto;">上班</button>
        <br>
        <br>
        <button onclick="checkOut()" style="display: block; margin: 0 auto;">下班</button>
        <p id="status">考勤状态未知</p>
    </div>
</div>

</body>
</html>

low.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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="leaveForm">
            <label for="startDate">开始时间:</label>
            <input type="date" id="startDate" required><br>

            <label for="endDate">结束时间:</label>
            <input type="date" id="endDate" required><br>

            <label for="leaveType">请假类型:</label>
            <select id="leaveType" required>
                <option value="病假">病假</option>
                <option value="事假">事假</option>
            </select><br>
            <label for="reason">请假原因:</label>
            <textarea id="reason" required></textarea><br>
            <button type="button" onclick="submitLeave()" style="display: block; margin: 0 auto;">提交</button>
        </form>
    </div>
</div>

<script>
    function submitLeave() {
        // Get form data
        var startDate = document.getElementById('startDate').value;
        var endDate = document.getElementById('endDate').value;
        var leaveType = document.getElementById('leaveType').value;
        var reason = document.getElementById('reason').value;
        const requestUrl = `http://localhost:8080/staff/count`;
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(res => res.json())
            .then(data => {
                deal(data + 1, startDate, endDate, leaveType, reason);
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
<script>
    function deal(count, startDate, endDate, leaveType, reason) {
        var urlParams = new URLSearchParams(window.location.search);
        var id = urlParams.get('username');
        console.log(id);
        const requestUrl = `http://localhost:8080/user/selectById/${id}`;
        fetch(requestUrl,
            {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    console.log(data);
                    add(count, data.data, startDate, endDate, leaveType, reason);
                } else {
                    alert("查询失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
<script>
    function add(count, data, startDate, endDate, leaveType, reason) {
        let s;
        if (leaveType === "事假") {
            s = 2;
        } else if (leaveType === "病假") {
            s = 3;
        }

        // Convert start and end dates to JavaScript Date objects
        const start = new Date(startDate);
        const end = new Date(endDate);

        // Iterate through the date range
        while (start <= end) {
            var leaveRequest = {
                id: count++,
                jobID: data.jobID,
                name: data.name,
                sex: data.sex,
                attendanceTime: start.toISOString().split('T')[0], // Format date as YYYY-MM-DD
                department: data.department,
                attendanceType: s,
                notes: reason,
                approvedType: 0,
            };

            // Send a separate request for each day
            const requestUrl = `http://localhost:8080/staff/add`;
            fetch(requestUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(leaveRequest),
            })
                .then(response => response.json())
                .then(data => {
                    console.log(`Leave record for ${start.toISOString().split('T')[0]} created`);
                })
                .catch(error => {
                    console.error('Error:', error);
                });

            // Move to the next day
            start.setDate(start.getDate() + 1);
        }

        alert("请假成功，请等待审批");
    }
</script>

</body>
</html>

select.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询个人信息</title>
</head>
<body>
<div id="container">

</div>
</body>
<script>
    // 获取URL中的用户名参数
    var urlParams = new URLSearchParams(window.location.search);
    var id = urlParams.get('username');
    console.log(id);
    const requestUrl = `http://localhost:8080/user/selectById/${id}`;
    fetch(requestUrl,
        {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
        })
        .then(res => res.json())
        .then(data => {
            if (data.msg === 'success') {
                console.log(data);
                generateTable(data.data);
            } else {
                alert("查询失败  " + data.msg);
            }
        })
        .catch(error => {
            alert("请求失败，请重试");
            console.error(error);
        });
</script>
<script>
    function generateTable(data) {
        const tableContainer = document.getElementById("container");
        // 清空 tableContainer 中的所有子节点
        while (tableContainer.hasChildNodes()) {
            tableContainer.removeChild(tableContainer.firstChild);
        }
        const table = document.createElement("table");
        const tableBody = document.createElement("tbody");
        let row = document.createElement("tr");
        row.innerHTML = '<td>工号</td><td>姓名</td><td>性别</td><td>出生日期</td><td>部门</td><td>角色</td><td>密码</td>';
        tableBody.appendChild(row);
        row = document.createElement("tr");
        row.innerHTML = `<td>${data.jobID}</td><td>${data.name}</td><td>${data.sex}</td><td>${data.birthday}</td><td>${data.department}</td><td>${data.role}</td><td>${data.password}</td>`;
        tableBody.appendChild(row);
        table.appendChild(tableBody);
        tableContainer.appendChild(table);
    }
</script>
</html>

update1.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>
<h1 style="text-align: center">修改密码</h1>
<div class="centered-form">
    <div class="bordered-form">

        <label for="old">旧密码</label>
        <input type="text" id="old" required>
        <br>
        <label for="new1">新密码</label>
        <input type="text" id="new1" required>
        <br>
        <label for="new2">确认新密码</label>
        <input type="text" id="new2" required>
        <div id="match"></div>
        <br>
        <button id="update" style="display: block; margin: 0 auto;">更改密码</button>
    </div>
</div>
</body>
<script>
    const newPassword1 = document.getElementById("new1");
    const newPassword2 = document.getElementById("new2");
    const passwordMatchMessage = document.getElementById("match");

    function checkPasswordMatch() {
        const password1 = newPassword1.value;
        const password2 = newPassword2.value;

        if (password1 === password2) {
            passwordMatchMessage.textContent = "两次密码一致";
            passwordMatchMessage.style.color = "green";
        } else {
            passwordMatchMessage.textContent = "两次密码不一致";
            passwordMatchMessage.style.color = "red";
        }
    }

    newPassword1.addEventListener("input", checkPasswordMatch);
    newPassword2.addEventListener("input", checkPasswordMatch);
</script>
<script>
    var urlParams = new URLSearchParams(window.location.search);
    var id = urlParams.get('username');
    console.log("用户名为:" + id);
    document.getElementById('update').addEventListener('click', function () {
        const requestUrl = `http://localhost:8080/user/selectById/${id}`;
        fetch(requestUrl, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
        })
            .then(response => response.json())
            .then(data => {
                if (data.msg === 'success') {
                    console.log(data);
                    deal(data.data);
                } else {
                    alert("此结果不存在");
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    })
</script>
<script>
    function deal(data) {
        const old = document.getElementById('old').value;
        const new1 = document.getElementById('new1').value;
        const new2 = document.getElementById('new2').value;
        const password = data.password;
        console.log("密码为   " + password);
        if (old !== password) {
            alert("您输入的旧密码有误");
        } else if (old !== password && new1 !== new2) {
            alert("输入的两次密码不一致");
        } else if (old === password && new1 === new2) {
            const requestUrl = `http://localhost:8080/user/update/${id}/${new1}`;
            fetch(requestUrl, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
            })
                .then(response => response.json())
                .then(data => {
                    if (data.msg === 'success') {
                        alert("修改成功,请您重新登陆");
                        window.location.href = "http://localhost:8080/index.html";
                    } else {
                        alert("修改失败");
                    }
                })
                .catch(error => {
                    alert("请求失败，请重试");
                    console.error(error);
                });
        }
    }
</script>
</html>

标签：11.28,console,alert,error,var,document,data
From： https://www.cnblogs.com/zzqq1314/p/17910901.html

相关文章

赞助商

阅读排行