OA系统二十三：请假审批四：【请假审批】这个内嵌界面的前台文件；显示【点击“审批”后的审批弹出框】；（包括$(““)[0].reset()；layui表格的设置，layui中弹出框附带数据的技巧等）

最新推荐文章于 2023-07-28 17:22:28 发布

小懒羊爱吃草

最新推荐文章于 2023-07-28 17:22:28 发布

阅读量1.8k

点赞数 2

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

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

版权

（12）慕课OA系统（Mybatis项目案例，比较重要！）专栏收录该内容

40 篇文章 74 订阅

订阅专栏

本篇博客的主要内容是：【请假审批内嵌页面】，【审批弹出框】的前端部分

说明：

（1）目前阶段，前端部分基本是使用layui开发的；而layui又内置了jQuery；可是，目前来看layui在行业内使用的比较少，jQuery正在被成熟的前端框架所替代；所以，对于目前阶段所使用的前端知识（layui和jQuery），没必要过于深入，OK。

首先，本篇博客的layui内容（目前阶段，前端的内容也都是使用layui开发的），没必要太过沉迷；

● 目前来说，在实际项目中，前端使用layui“框架”的很少；所以，本篇博客的关于layui的使用，不必太过沉迷；但可以从layui的使用中，多少感受下前端框架的使用技巧和策略；

● 前端框架最重要的还是Angular（React、Vue）；目前接触的layui和这些主流前端框架肯定会有很大区别，但layui多少可以让我感受下所谓前端框架的感觉；

然后，jQuery基本算过时了~~~

最后，但是也不能否认layui易上手的特性（模块化开发，像插件一样。而不必像复杂的框架那样需要负责的配置，layui“即插即用”的特点，很容易上手），非常适合非专业的前端开发者来使用，所以layui某种程度上可以看成是后端程序员的前端框架。

（2）而且，目前来说，为了测试后台编写的代码（或者说是，测试Controller（这儿的Controller是Servlet）中的方法，其实就是处理请求的get方法和post方法了），我们都是通过浏览器在前台页面上向后台程序发起请求，通过观测请求的返回值来判断【后台程序是否OK】；；；；；但是，在实际开发中，对于后台程序来说，一般使用postman等工具来模拟前台请求，从而测试后台的post或get方法是否OK，，，以前在做项目的时候，也是这样做的。

（3）所以，通过（1）和（2）两点，应该明确，目前接触到的前端的内容，没必要太过深究，重点核心还是放在后台开发上，随着以后工作的深入和需要，在逐步、系统性的了解前端的知识。

一.引入前台文件，情况初介绍

（1）引入【请假审批】这个内嵌界面的前台文件，发布项目观察效果

（2）上面中表格是使用layui表格实现的；layui表格简介

二.前台文件audit.ftl详述

（0）对比着audit.ftl在浏览器上的显示，能辅助理解audit.ftl的内容

（1）首先，添加一个基础组件：table；（这个table后续会被转化为数据表格）

（2）然后，初始化数据表格（对（1）中的table进行处理）：此处主要是，初始化表格，设置表的列和数据的对应关系

（3.1）然后，设置表格最后一列的【审批】按钮：自定义属性的方式，将本行数据附加到【审批】按钮这个组件中

（3.2）然后，设置【审批】的单击事件：编写单击事件函数

（4）然后，设置弹出对话框中的【确认提交】按钮

一.引入前台文件，情况初介绍

（1）引入【请假审批】这个内嵌界面的前台文件，发布项目观察效果

发布项目，并访问【请假审批】，观察效果：

关于XHR和Network等内容，参考Chrome浏览器开发者工具介绍；（包括，Network面板介绍，XHR等等）。

（2）上面中表格是使用layui表格实现的；layui表格简介

上面在layui的表格中显示数据的过程都是layui自动的帮我们完成的，我们只需要确保后台返回的数据格式满足【“code”，“msg”，“count”，“data”】这种格式就行。（PS：layui这种“框架”就是这么规定的，没什么好说的）具体layui数据表格的详细用法，可以参考layui的官网：https://www.layui.com/；

首先，可以在【文档】中浏览layui数据表格的内容：

同时，也可以在【示例】中浏览layui数据表格的内容：

二.前台文件audit.ftl详述

audit.ftl文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>请假审批</title>
    <link rel="stylesheet" href="/resources/layui/css/layui.css">
    <style>
        .form-item{
            padding: 10px;
        }
        .form-item-value{
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="layui-row">
    <blockquote class="layui-elem-quote">
        <h1>请假审批</h1>
    </blockquote>
    <!--待审批列表-->
    <table id="grdFormList" lay-filter="grdFormList"></table>
</div>
<!--请假详情对话框-->
<div id="divDialog" style="display: none;padding: 10px">
    <form class="layui-form">

        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-xs2 form-item">部门</div>
                <div class="layui-col-xs4 form-item-value" id="dname"></div>
                <div class="layui-col-xs2 form-item">姓名</div>
                <div class="layui-col-xs4 form-item-value" id="name"></div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs2 form-item">起始时间</div>
                <div class="layui-col-xs4 form-item-value" id="startTime"></div>
                <div class="layui-col-xs2 form-item">结束时间</div>
                <div class="layui-col-xs4 form-item-value" id="endTime"></div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs2 form-item">请假原因</div>
                <div class="layui-col-xs10 form-item-value" id="reason"></div>
            </div>
            <!--表单Id-->
            <input type="hidden" name="formId" id="formId">
            <!--审批结果-->
            <select name="result" lay-verfity="required">
                <option value="approved">同意</option>
                <option value="refused">驳回</option>
            </select>
        </div>
        <div class="layui-form-item">
            <!--审批意见-->
            <input type="text" name="reason" placeholder="请输入审批意见"
                   autocomplete="off" class="layui-input"/>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid " lay-submit lay-filter="audit">确认提交</button>

        </div>
    </form>
</div>

<script src="/resources/layui/layui.js"></script>
<script src="/resources/sweetalert2.js"></script>

<script>
    var $ = layui.$;
    //将毫秒数转换为"yyyy-MM-dd HH时"字符串格式
    function formatDate(time){
        var newDate = new Date(time);
        return newDate.getFullYear() + "-" +
            (newDate.getMonth() + 1) + "-" + newDate.getDate()
            + " " + newDate.getHours() + "时";
    }
    // 将table渲染为数据表格
    layui.table.render({
        elem : "#grdFormList" , //选择器
        id : "grdFormList" , //id
        url : "/leave/list" , //ajax请求url
        page : false , //是否分页 true-是 false-否
        cols :[[ //列描述
            {title : "" , width:70 , style : "height:60px" , type:"numbers"}, // numbers代表序号列
            {field : "create_time" , title : "申请时间" , width : 150 , templet: function (d) {
                //templet代表对数据进行加工后再显示
                return formatDate(d.create_time)
            }},
            {field : "form_type" , title : "类型" , width : 100 , templet: function(d){
                switch (d.form_type) {
                    case 1:
                        return "事假";
                    case 2:
                        return "病假";
                    case 3:
                        return "工伤假";
                    case 4:
                        return "婚假";
                    case 5:
                        return "产假";
                    case 6:
                        return "丧假";
                }
            }},
            {field : "department_name" , title : "部门" , width : 100},
            {field : "name" , title : "员工" , width : 100},
            {field : "start_time" , title : "起始时间" , width : 150, templet: function (d) {
                    return formatDate(d.start_time)
                }},
            {field : "end_time" , title : "结束时间" , width : 150 , templet: function (d) {
                    return formatDate(d.end_time)
                }},
            {field : "reason" , title : "请假原因" , width : 350 },
            {title : "" , width:150 ,type:"space" , templet : function(d){
                var strRec = JSON.stringify(d);
                console.info("请假单数据", strRec);
                //将请假单数据存放至data-laf属性中
                return "<button class='layui-btn layui-btn-danger layui-btn-sm btn-audit' data-laf=" + strRec + " >审批</button>";
            }}
        ]]
    })

    // 绑定每一行的审批按钮
    $(document).on("click" , ".btn-audit" , function(){
        //初始化表单
        $("#divDialog form")[0].reset();
        $("#divDialog form .form-item-value").text("");
        //获取当前点击按钮的请假单数据,回填至显示项
        var laf = $(this).data("laf");
        $("#dname").text(laf.department_name);
        $("#name").text(laf.name);
        $("#startTime").text(formatDate(laf.start_time));
        $("#endTime").text(formatDate(laf.end_time));
        $("#reason").text(laf.reason);
        $("#formId").val(laf.form_id);
        //弹出layui对话框
        layui.layer.open({
            type : "1" , //页面层
            title : "请假审批" , //标题
            content : $("#divDialog") , //指定对话框容器对象
            area : ["500px" , "400px"] , //尺寸
            end : function(){ //销毁后触发事件
                $("#divDialog").hide();
            }
        })
    })
    /**
     * 提交审批数据
     */
    layui.form.on("submit(audit)" , function(data){
        $.ajax({
            url : "/leave/audit", //审核URL
            data : data.field ,
            type : "post" ,
            success: function (json) {
                //关闭所有layui对话框
                layui.layer.closeAll();
                //显示处理结果
                if(json.code == "ok"){
                    swal({
                        type: 'success',
                        html: "<h2>请假已审批完毕</h2>",
                        confirmButtonText: "确定"
                    }).then(function (result) {
                        window.location.href="/forward/notice";
                    });
                }else{
                    swal({
                        type: 'warning',
                        html: "<h2>" + json.msg + "</h2>",
                        confirmButtonText: "确定"
                    });
                }
            }
        })
        return false;
    })

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

说明：

（0）对比着audit.ftl在浏览器上的显示，能辅助理解audit.ftl的内容

（1）首先，添加一个基础组件：table；（这个table后续会被转化为数据表格）

（2）然后，初始化数据表格（对（1）中的table进行处理）：此处主要是，初始化表格，设置表的列和数据的对应关系

第一步，选择table，设置id，设置url，分页与否，列描述的title标题

…………………………

第二步，数据的读取和设置了：申请时间

即，具体后台返回的内容是：
{"msg":"","code":"0",
"data":
[{"start_time":1623254400000,"reason":"dfsdf","create_time":1623292061000,"department_id":2,"employee_id":3,"department_name":"研发部","form_id":121,"end_time":1625929200000,"name":"王美美","form_type":1,"state":"processing"},
{"start_time":1623614400000,"reason":"回家有事啦","create_time":1623495333000,"department_id":2,"employee_id":5,"department_name":"研发部","form_id":122,"end_time":1626213600000,"name":"欧阳锋","form_type":1,"state":"processing"}],
"count":2}
然后，在前台文件中，就会获取这些后台返回的数据，并和对应的列对应：

可以看到，后台返回的数据中data有两条数据，那么在表格实际显示中，也会有两行；

…………………………

第三步：设置form_type请假类型：

…………………………

第四步：设置部门名称；员工；起始时间；结束时间；请假原因。

（3.1）然后，设置表格最后一列的【审批】按钮：自定义属性的方式，将本行数据附加到【审批】按钮这个组件中

首先，可以看下本行数据的内容；

…………………………

然后，通过自定义属性的方式，将本行数据附加到【审批】按钮这个组件中（这是非常常见的开发技巧！！！！！）

（PS：重复啰嗦一下，JSON对象本来就是为JavaScript而开发的，JSON对象是JavaScript的内置对象，而浏览器则内置了JavaScript~~自然，浏览器内部也内置了JSON对象的各种处理方法）

（3.2）然后，设置【审批】的单击事件：编写单击事件函数

因为，点击【审批】按钮后，会弹出：“请假审批”弹出框，这个弹出框中里面也是一个form表单

首先，给【审批】按钮绑定单击事件

…………………………

然后，重置【“请假审批”弹出框中的那个form表单】

PS：

（1）关于，选择器的内容可以参考jQuery三：基本选择器；层叠选择器；属性选择器；（这三类选择器是比较常用的）及附近相关文章；

（2）关于【$("#divDialog form")[0].reset()】：这一点还是比较重要，虽然目前理解的不深，但对于目前需要来说，知道这些算勉强够了：

（注解：参考自：https://blog.csdn.net/Servlet905/article/details/78563694）

   ● $("选择器")的意思：就是获取当前HTML页面的所有DOM对象然后组成一个集合（也可以说是一个数组，它的特点就是这个集合或者数据有下标索引）；无论这里的的选择器是class还是id选择器，从理论上来说只要执行了这个操作，jQuery都会理解为获取了一个集合；

   ● $("选择器")[0]：这个就相对来说好理解多了:就是获取当前集合的第一个元素；

   ● $("选择器")[0] 得到的对象是一个DOM对象，他不是一个值，所以在使用过程中，如果你要获取这个DOM对象的值还需要进行一次jQuery封装： $($("选择器")[0]).val();

（注解：参考自：https://blog.csdn.net/weixin_40648117/article/details/78695817）

● $("#id")这是jquery获取通过juqery包装后的对象；juqery对象，可以使用juery方法

● 而$("#id")[0]是获取js原生的dom对象；原生的js对象，可以使用js方法

（注解：参考自：https://blog.csdn.net/lkl1314/article/details/75214637）

● $('#yigeform').reset()：这样写是不行的，因为reset()方法是jQuery对象的方法；reset()是js对象的方法；

● $('#yigeform')[0].reset()：通过获取原生的js的Dom对象，然后再调用js中的reset方法；

（注解：参考自：https://www.w3school.com.cn/jsref/met_form_reset.asp）

● reset() 方法可把表单中的元素重置为它们的默认值。

（3）很显然要重置表单；没什么好说的；

…………………………

然后，清空【“请假审批”弹出框中的那个form表单】中的所有【class=form-item-value】的项的值为“”

…………………………

然后，就是重新给【“请假审批”弹出框中的那个form表单】的项赋值：

其中，laf的值就是下面的data中的值：

{"msg":"","code":"0",
"data":
[{"start_time":1623254400000,"reason":"dfsdf","create_time":1623292061000,"department_id":2,"employee_id":3,"department_name":"研发部","form_id":121,"end_time":1625929200000,"name":"王美美","form_type":1,"state":"processing"},
{"start_time":1623614400000,"reason":"回家有事啦","create_time":1623495333000,"department_id":2,"employee_id":5,"department_name":"研发部","form_id":122,"end_time":1626213600000,"name":"欧阳锋","form_type":1,"state":"processing"}],
"count":2}

…………………………

然后，这个【“请假审批”弹出框中的那个form表单】准备好之后，就是弹出显示了：

（4）然后，设置弹出对话框中的【确认提交】按钮

其中，点击【确认提交】按钮后，这些数据将会发送到后台的"/leave/audit"这个url上，这个部分还没有编写；

小懒羊爱吃草

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
6
评论
OA系统二十三：请假审批四：【请假审批】这个内嵌界面的前台文件；显示【点击“审批”后的审批弹出框】；（包括$(““)[0].reset()；layui表格的设置，layui中弹出框附带数据的技巧等）

本篇博客的主要内容是：待写……一.引入前台文件，情况初介绍（1）引入【请假审批】这个内嵌界面的前台文件，发布项目观察效果发布项目，并访问【请假审批】，观察效果：至于XHR和Network的详细介绍见：该博客待写…………………………（2）上面中表格是使用layui表格实现的；layui表格简介上面在layui的表格中显示数据的过程都是layui自动的帮我们完成的，我们只需要确保后台返回的数据格式满足【“code”，“msg”，“count”，“data”】..
复制链接

扫一扫