OA系统十九：请假申请五：【请假申请】这个内嵌页面的前台文件；设置【点击左侧菜单栏的“请假申请”后】在首页的“功能区”显示【请假功能】这个内嵌页面；

最新推荐文章于 2022-09-01 14:05:08 发布

小懒羊爱吃草

最新推荐文章于 2022-09-01 14:05:08 发布

阅读量3k

点赞数

分类专栏：（12）慕课OA系统（Mybatis项目案例，比较重要！）

本文链接：https://blog.csdn.net/csucsgoat/article/details/117620970

版权

本篇博客的主要内容是：

本篇博客有几点特别说明下：

（1）前端的东西挺复杂的，感受到了【学会一个成熟的前端框架】的重要性。毕竟，框架可以提高前段文件的开发效率，简化开发步骤！

（2）前端的Ajax请求和非Ajax请求，需要及时总结；

（3）篇幅较长，内容难度还好，可以快速浏览；

（4）左侧功能栏点击不同的菜单，在功能区会显示不同的内嵌页面；为此，特地编写了一个跳转的功能Servlet：ForwardServlet；

前面几篇博客完成了【请假申请】底层的业务代码；本篇博客就是编写对应的前台界面，并和后台的业务代码进行联系，通过网页向后台服务提交请求，完成【请假申请】前台到后台的整体流程。

一：form.html：请假的前台页面

二：form.html分析和说明：

（1）需要修改的地方：form.html中引入layui的地方需要修改下

（2）引入SweetAlert弹出框js组件：让处理成功（或处理失败）时的弹出框更加美观

（3）form.html代码结构分析：静态HTML部分

（3.1）引入layui的css

（3.2）定义类来修饰【请假表单】在网页上的位置

（4）form.html代码结构分析：JavaScript代码部分

（4.1）获取layui对象的三个子对象：【laydate子对象】，【form子对象】，【$Ajax子对象】

（4.2）设置时间范围

（4.3）提交表单

三：将form.html改为form.ftl：以便能够使用FreeMarker模板引擎：使得【部门】和【申请人】信息变成动态的

四：页面跳转的设置：即点击【左边功能菜单的“请假申请”】后，会显示form.ftl请假表单的内容

1：第一步：设置【功能的url】

2：第二步：设置【请假申请】的跳转url

3：第三步：编写【专门用于页面跳转的“工具Servlet”】，实现向【请假申请的form.ftl的跳转】（这是一种设计的技巧！！！！！）

五：流程梳理

六：阶段性回顾和总结

将请假申请的前台文件form复制进webapp目录下：

一：form.html：请假的前台页面


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>请假申请</title>
    <link rel="stylesheet" href="/resources/layui/css/layui.css">
    <style>
        /*表单容器*/
        .ns-container {
            position: absolute;
            width: 500px;
            height: 450px;
            top: 150px;
            left: 50%;
            margin-left: -250px;
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #cccccc;
        }
    </style>
</head>
<body>
<div class="layui-row">
    <blockquote class="layui-elem-quote">
        <h2>请假申请</h2>
    </blockquote>
    <table id="grdNoticeList" lay-filter="grdNoticeList"></table>
</div>
<div class="ns-container">
    <h1 style="text-align: center;margin-bottom: 20px">请假申请单</h1>
    <form class="layui-form">
        <!--基本信息-->
        <div class="layui-form-item">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-block">
                <div class="layui-col-md12" style="padding-top: 10px;">
                    研发部
                </div>

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">申请人</label>
            <div class="layui-input-block">
                <div class="layui-col-md12" style="padding-top: 10px;">
                    齐紫陌[部门经理]
                </div>

            </div>
        </div>
        <!--请假类型下拉框-->
        <div class="layui-form-item">
            <label class="layui-form-label">请假类别</label>
            <div class="layui-input-block layui-col-space5">
                    <select name="formType" lay-verify="required" lay-filter="cityCode">
                        <option value="1">事假</option>
                        <option value="2">病假</option>
                        <option value="3">工伤假</option>
                        <option value="4">婚嫁</option>
                        <option value="5">产假</option>
                        <option value="6">丧假</option>
                    </select>
            </div>
        </div>
        
        <!--请假时长日期选择框-->
        <div class="layui-form-item">
            <label class="layui-form-label">请假时长</label>
            <div class="layui-input-block layui-col-space5">
                    <input name="leaveRange" type="text" class="layui-input" id="daterange" placeholder=" - ">
                    <input id="startTime" name="startTime" type="hidden">
                    <input id="endTime" name="endTime" type="hidden">
            </div>
        </div>

        <!--请假事由-->
        <div class="layui-form-item">
            <label class="layui-form-label">请假事由</label>
            <div class="layui-input-block layui-col-space5">
                    <input name="reason" type="text"  lay-verify="required|mobile" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>

        <!--提交按钮-->
        <div class="layui-form-item " style="text-align: center">
                <button class="layui-btn" type="button" lay-submit lay-filter="sub">立即申请</button>
        </div>
    </form>
</div>

<script src="/resources/layui/layui.js"></script>
<!--<script src="resources/sweetalert2.all.min.js"></script>-->
<script src="/resources/sweetalert2.js"></script>
<script>

        var layDate = layui.laydate; //Layui日期选择框JS对象
        var layForm = layui.form; //layui表单对象
        var $ = layui.$; //jQuery对象
        //日期时间范围
        layDate.render({
            elem: '#daterange'
            ,type: 'datetime'
            ,range: true
            ,format: 'yyyy年M月d日H时'
            ,done: function(value, start, end){
                //选择日期后出发的时间,设置startTime与endTime隐藏域
                var startTime = start.year + "-" + start.month + "-" + start.date + "-" + start.hours;
                var endTime = end.year + "-" + end.month + "-" + end.date + "-" + end.hours;
                console.info("请假开始时间",startTime);
                $("#startTime").val(startTime);
                console.info("请假结束时间",endTime);
                $("#endTime").val(endTime);
            }
        });

        //表单提交事件
        layForm.on('submit(sub)', function(data){
            console.info("向服务器提交的表单数据",data.field);
            $.post("/leave/create",data.field,function (json) {
                console.info(json);
                if(json.code == "0"){
                    /*SweetAlert2确定对话框*/
                    Swal.fire({
                        type: 'success',
                        html: "<h2>请假单已提交,等待上级审批</h2>",
                        confirmButtonText: "确定"
                    }).then(function (result) {
                        window.location.href="/forward/notice";
                    });
                }else{
                    Swal.fire({
                        type: 'warning',
                        html: "<h2>" + json.message + "</h2>",
                        confirmButtonText: "确定"
                    });
                }
            },"json");
            return false;
        });

</script>
</body>
</html>

发布项目，并访问：