介绍

如上图，领导在待办列表中，点击 审批 按钮，显示详细信息功能，如下图：

本文实现该功能

Controller

需要传入 qingjia 表主键

在 QingjiaController 类中增加下面代码：

@RequestMapping(value="/showDetail")
public JsonResult showDetail(String id) {
    Qingjia qingjia = qingjiaService.showById(id);
    return JsonResult.success(null,qingjia);
}

Service

根据 id 查询 qingjia 表，在 QingjiaService 类增加下面代码：

public Qingjia showById(String id){
    return qingjiaMapper.selectByPrimaryKey(id);
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script>
        function getParam(name)
        {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == name){return pair[1];}
            }
            return(false);
        }
        function init(){
            const id = getParam("id")
            const actPid = getParam("actPid")
            console.log(id,actPid)
            $.ajax({
                url:'/qingjia/showDetail',//请求的url
                type:'POST', //请求方式，GET或POST
                data:{ //发送服务器的数据
                    id:id,
                },
                dataType:'json',  //返回的数据格式：json/xml/html/script/jsonp/text
                success:function(data,textStatus,jqXHR){ //statusCode是2xx 或 304时，执行该函数

                    console.log(data)
                    $("#emp").val(data.data.emp)
                    $("#desc").val(data.data.desc)
                    $("#day").val(data.data.day)
                },
                error:function(xhr,textStatus){ //statusCode是 2xx 或 304 以外的值时，执行该函数
                    console.log('错误')
                    console.log(xhr)
                    console.log(textStatus)
                }
            })

        }
        function doSubmit(e){
            console.log("e::",e)
            const id = getParam("id")
            const actPid = getParam("actPid")

            var approved_txt = $("#approved_txt").val()
            if(approved_txt == ''){
                alert("请输入审批意见！")
                return
            }

            $.ajax({
                url:'/qingjia/deal',//请求的url
                type:'POST', //请求方式，GET或POST
                data:{ //发送服务器的数据
                    id:id,
                    actPid:actPid,
                    approvedTxt:approved_txt,
                    approved:e.data,
                },
                dataType:'json',  //返回的数据格式：json/xml/html/script/jsonp/text
                success:function(data,textStatus,jqXHR){ //statusCode是2xx 或 304时，执行该函数
                    alert(data.msg)
                    console.log(data)
                    console.log(textStatus)
                    console.log(jqXHR)
                },
                error:function(xhr,textStatus){ //statusCode是 2xx 或 304 以外的值时，执行该函数
                    console.log('错误')
                    console.log(xhr)
                    console.log(textStatus)
                }
            })

        }
        window.onload = function () {
            init()
            $("#sbt1").click(1,doSubmit);
            $("#sbt2").click(2,doSubmit);
        }
    </script>
</head>
<body>
请假人：<input type="text" id="emp" readonly><br>
请假原因：<input type="text" id="desc" readonly><br>
请假天数：<input type="text" id="day" readonly><br>
审批意见：<input id="approved_txt"><br>
<input type="button" value="同意" id="sbt1">
<input type="button" value="拒绝" id="sbt2">


</body>
</html>

提示： 审批意见 应该使用 <textarea> 控件，但本编辑器会显示不正常，所以改为 <input> 控件

测试

访问 http://localhost:8080/qingjia_daiban.html ，显示下图：

点击 审批 显示下图：

原文出处：/show_1IX5jN7cP2vI.html