demo_form.jsp

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title></title>
    <meta name="decorator" content="represent"/>
<style type="text/css">
/** 改变弹出框的按钮颜色***/
body .layui-layer-lan .layui-layer-btn0 {
    border-color: #D7000F;
    background-color: #D7000F;
    color: white;
}

body .layui-layer-lan .layui-layer-btn .layui-layer-btn1 {
    border-color: #CCCCCC;
    background: white;
    color: black;
}

.td-nowrap{
    max- 200px!important;
    text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align:left!important;
}

#delegationButton{
    color: #555;
    background: #eee;
    border: 1px solid #ccc;
}

input[type="file"]{
    height: auto;
}
.jbox-bottom-text{
    line-height:20px!important;
    padding: 0 20px 20px;
}
.jbox-button{
    position: absolute!important;bottom:10px!important;right:10px!important;
}
button:focus{
    outline: none;
}
.jbox-button-panel{
    420px!important;height:100px!important;
    line-height:30px!important;
    text-align: left!important;
}
div.jbox .jbox-bottom-text{
    color: red;
}
</style>
    <script type="text/javascript">
    //是否是批量的模板
    var flag=[true,false]
    $(function(){
        
        //导入
        $("#saveImpl").click(function() {
            var url = "${ctx}/erep/elePreselectorInfo/repImpl?flag="+flag[0];
            var title = "批量导入预选人信息";
            openWindow(url, title);
        });
        //弹出批量导入层
        function openWindow(url, title) {
            layer.open({
                type : 2,
                title : [ title, 'background-color:#D7000F;' ],
                shadeClose : false,
                skin : 'layui-layer-lan',
                offset : '35px',
                shade : false,
                area : [ '500px', '300px' ],
                content : url,
                btn : [ '保存', '取消' ],
                yes : function(index, layero) {
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    if (iframeWin.validate()) {
                        var body = layer.getChildFrame('body', index);
                        var formData = new FormData();
                        var data = body.find("#inputForm")
                        .find("#articleImageFile")[0].files[0];
                        formData.append("file", data);
                        var loadIndex = '';
                        $.ajax({
                            type : 'POST',
                            async : true,
                            processData : false,
                            contentType : false,
                            url : '${ctx}/erep/elePreselectorInfo/repImplOneSave?type=${elePreselectorInfo.type}',
                            data : formData,
                            dataType : "json",
                            beforeSend : function() {
                                loadIndex = layer.load(1, {
                                    shade : [ 0.5, 'gray' ],
                                    content : '导入中……',
                                    success : function(layero) {
                                        layero.find('.layui-layer-content').css({
                                            'padding-top' : '39px',
                                            'width' : '60px'
                                        });
                                    }
                                });
                            },
                            complete : function() {
                                layer.close(loadIndex);
                            },
                            success : function(data) {
                                layer.open({
                                    title : '导入预选人信息结果',
                                    area : [ '500px', '300px' ],
                                    content : data.message+",点确定刷新列表",
                                    btn : [ '确定'],
                                    yes : function(index, layero) {
                                        layer.close(index);
                                        layer.close(1);
                                        location="${ctx}/erep/elePreselectorInfo/list?type=${elePreselectorInfo.type}"
                                    }
                                })
                            }
                        }, 'json');
                    }
                },
                btn2 : function(index, layero) {
                    layer.close(index);
                }
            });
        }
        
        
        
        
    })
    
    
    //审核
    function resultState(id){
        var url = "${ctx}/erep/elePreselectorInfo/resultState?id="+id;
        var title = "审核中";
        state(url, title);
    }
    //弹出批量导入层
    function state(url, title) {
        layer.open({
            type : 2,
            title : [ title, 'background-color:#D7000F;' ],
            shadeClose : false,
            skin : 'layui-layer-lan',
            offset : '35px',
            shade : false,
            area : [ '500px', '300px' ],
            content : url,
            btn : [ '保存', '取消' ],
            yes : function(index, layero) {
                var iframeWin = window[layero.find('iframe')[0]['name']];
                if (iframeWin.validate()) {
                    var body = layer.getChildFrame('body', index);
                    var formData = new FormData();
                    var state = body.find("#inputForm").find("#state")[0].value;
                    var colB = body.find("#inputForm").find("#colB")[0].value;
                    var id = body.find("#inputForm").find("#id")[0].value;
                    formData.append("state", state);
                    formData.append("colB", colB);
                    formData.append("id", id);
                    var loadIndex = '';
                    $.ajax({
                        type : 'POST',
                        async : true,
                        processData : false,
                        contentType : false,
                        url : '${ctx}/erep/elePreselectorInfo/stateResult',
                        data : formData,
                        dataType : "json",
                        beforeSend : function() {
                            loadIndex = layer.load(1, {
                                shade : [ 0.5, 'gray' ],
                                content : '导入中……',
                                success : function(layero) {
                                    layero.find('.layui-layer-content').css({
                                        'padding-top' : '39px',
                                        'width' : '60px'
                                    });
                                }
                            });
                        },
                        complete : function() {
                            layer.close(loadIndex);
                        },
                        success : function(data) {
                            location = "${ctx}/erep/elePreselectorInfo/list?type=${elePreselectorInfo.type}";
                        }
                    }, 'json');
                }
            },
            btn2 : function(index, layero) {
                layer.close(index);
            }
        });
    }
    
    // 撤回、通过数据
    function withdrawData(id,state){
        var titleMsg="撤回";
        /* if(state=='2'){
            titleMsg="撤回";
        }else if(state=='0'){
            titleMsg="通过";
        } */
        
        layer.confirm('确定要'+titleMsg+'数据吗', {
            title :['是否'+titleMsg+'','background-color:#D7000F;'],
            skin : 'layui-layer-lan',
            btn: ['确定','取消'] //按钮
            }, function(){
                var loadIndex ='';
                 $.ajax({
                    type : 'POST',
                    url : '${ctx}/erep/elePreselectorInfo/stateResult',//result
                    data : {"id":id,"state":state},
                    dataType: "json",
                    beforeSend : function() {
                        loadIndex=showLoad('正在提交,请稍等...');
                    },
                    complete: function () {
                        layer.close(loadIndex);
                    },
                    success : function(data) {
                        if(data.success==true){
                            location = "${ctx}/erep/elePreselectorInfo/list?type=${elePreselectorInfo.type}";
                            layer.msg(data.msg, {icon: 1,time:2000});
                        }else{
                            layer.msg(data.msg, {icon: 2,time:2000});
                        }
                        layer.close(loadIndex);
                    }
                }, 'json');  
            });
    }
    
    //批量删除
       function batchDeleteData(){
        
        if($("input[name='check']:checked").length == 0){
           layer.msg('请勾选一条记录',{icon:2,time:1000});
           return false;
        } 
        
        var list = $("input[name='check']:checked");
        var ids =[];
        for(var i=0;i<list.length;i++){
           var tr=$(list[i]).parents("tr").find("td");
           var state=tr.eq(4).find("input[type='hidden'][name='state']").val()
           if('1'== state || '2'== state){
              ids.push($(list[i]).attr("rowid"));
           }else{
            layer.msg('通过的数据不能删除,请进行调整',{icon:2,time:2000});
            return ;
           }
        }
        
        
        layer.confirm('确定要删除数据吗', {
        title :['是否删除','background-color:#D7000F;'],
        skin : 'layui-layer-lan',
        btn: ['确定','取消'] //按钮
        }, function(){
            var loadIndex ='';
             $.ajax({
                type : 'POST',
                url : '${ctx}/erep/elePreselectorInfo/delete',
                data : {"ids":ids},
                dataType: "json",
                beforeSend : function() {
                    loadIndex=showLoad('正在提交,请稍等...');
                },
                complete: function () {
                    layer.close(loadIndex);
                },
                success : function(data) {
                    if(data.success==true){
                        location = "${ctx}/erep/elePreselectorInfo/list?type=${elePreselectorInfo.type}";
                        layer.msg(data.msg, {icon: 1,time:2000});
                    }else{
                        layer.msg(data.msg, {icon: 2,time:2000});
                    }
                    layer.close(loadIndex);
                }
            }, 'json');  
        });
   }
   
    // 批量通过
    function  batchPassData(){
        
        if($("input[name='check']:checked").length == 0){
            layer.msg('请勾选一条记录',{icon:2,time:1000});
            return false;
        } 
        var list = $("input[name='check']:checked");
        var ids =[];
        for(var i=0;i<list.length;i++){
             var tr=$(list[i]).parents("tr").find("td");
             var state=tr.eq(4).find("input[type='hidden'][name='state']").val();
             debugger;
             if('1'== state || '2'== state){
                ids.push($(list[i]).attr("rowid"));
             }else{
                layer.msg('存在已通过的数据不能重复提交,请进行调整',{icon:2,time:2000});
                return ;
             }
         }
            
            
        layer.confirm('确定要通过审核吗', {
        title :['是否通过审核','background-color:#D7000F;'],
        skin : 'layui-layer-lan',
        btn: ['确定','取消'] //按钮
        }, function(){
            var loadIndex ='';
             $.ajax({
                type : 'POST',
                url : '${ctx}/erep/elePreselectorInfo/batchPassData',
                data : {"ids":ids},
                dataType: "json",
                beforeSend : function() {
                    loadIndex=showLoad('正在提交,请稍等...');
                },
                complete: function () {
                    layer.close(loadIndex);
                },
                success : function(data) {
                    if(data.success==true){
                        location = "${ctx}/erep/elePreselectorInfo/list?type=${elePreselectorInfo.type}";
                        layer.msg(data.msg, {icon: 1,time:2000});
                    }else{
                        layer.msg(data.msg, {icon: 2,time:2000});
                    }
                    layer.close(loadIndex);
                }
            }, 'json');  
        });
    }
    </script>
</head>
<body>
    <div id="importBox" style="display: none;">
        <form action="${ctx}/erep/elePreselectorInfo/uploadBatch"
            class="form-search" style="padding-left: 20px; text-align: center;"
            onsubmit="loading('正在导入,请稍等...');" method="post" id="uploadBatchForm"
            enctype="multipart/form-data">
            &emsp;<input type="file" name="file" accept=".zip" /> <br> <input
                id="btnImportSubmit" class="btn btn-primary" type="submit"
                value="   导    入   " />
        </form>
    </div>
    
    <div id="jerichotab" class="jericho_container">
        <form action="${ctx}/erep/elePreselectorInfo/" method="post" class="form-horizontal" id="searchForm">
            <input type="hidden" name="type" value="${elePreselectorInfo.type}">
            <input type="hidden" name="orderBy" value="">
            <div class="agency_search">
                <div class="col-sm-12 padding-none">
                    <div class="fh-inline">
                        <div class="col-sm-3 padding-none">
                            <div class="form-group">
                                <label class="control-label col-sm-4 msg_label">
                                    姓名:
                                </label>
                                <div class="form_input col-sm-8">
                                    <input name="name" type="text" value="${elePreselectorInfo.name}" class="form-control">
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3 padding-none">
                            <div class="form-group">
                                <label class="control-label col-sm-4 msg_label">
                                    民族:
                                </label>
                                <div class="form_input col-sm-8">
                                    <%-- <input name="nation" type="text" value="${elePreselectorInfo.nation}" class="form-control"> --%>
                                    <select name="nation" class="form-select col-sm-9 padding-none w100" >
                                        <option value="">请选择</option>
                                        <c:forEach items="${fns:getDictList('rep_nation')}" var="dict">
                                            <option value="${dict.value }"
                                            <c:if test="${null != elePreselectorInfo.nation && elePreselectorInfo.nation eq dict.value }">selected = "selected"</c:if>
                                            >${dict.label }</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3 padding-none">
                            <div class="form-group">
                                <label class="control-label col-sm-4 msg_label">
                                    党派:
                                </label>
                                <div class="form_input col-sm-8">
                                    <select name="party" class="form-select col-sm-12 padding-none">
                                        <option value="">请选择</option>
                                        <c:forEach items="${fns:getDictList('political')}" var="dict">
                                            <option value="${dict.value }"
                                            <c:if test="${null != elePreselectorInfo.party && elePreselectorInfo.party eq dict.value }">selected = "selected"</c:if>
                                            >${dict.label }</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="agncy_btn_area">
                                <input id="btnSubmit" class="btn btn-danger search_btn" type="submit" value="查询"/>
                                <input id="btn-reset" class="btn btn-reset" type="button" value="重置"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        
        <!-- 分割线 -->
        <div class="division_line"></div>
        <div class="col-sm-12 batch_btn fh-inline form-horizontal padding-none">
            <shiro:hasPermission name="erep:elePreselectorInfo:edit">
                <div class="jumpBtn"> <a href="${ctx}/erep/elePreselectorInfo/form?type=${page.list[0].type}">添加</a></div>
                <input id="saveImpl" class="btn report_batch" type="button" value="导入"/>
                <input id="all-export" class="btn report_batch" type="button" value="导出预选人名单"/>
                <input id="orderByName" class="btn report_batch" type="button" value="姓名排序"/>
                <input id="" class="btn report_batch" type="button" value="批量通过"onclick="batchPassData()" />
                <input id="" class="btn report_batch" type="button" value="批量删除" onclick="batchDeleteData()"/>
            </shiro:hasPermission>
        </div> 
        
        
        <!-- 表格list -->
        <div class="deputy_list vr_table col-sm-12">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>
                                <div class="checkbox checkbox-danger">
                                    <input type="checkbox" name="all-checks" class="styled"/>
                                    <label class="checkbox-inline"></label>
                                </div>
                            </th>
                            <th>代表团</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <%-- <th>出生年月</th>
                            <c:if test="${page.list[0].type ne '自治区级' }">
                                <th>代表构成</th>
                            </c:if> --%>
                            <th>职务</th>
                            <th>审查状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <c:forEach items="${page.list}" var="elePreselectorInfo">
                            <tr>
                            <th scope="row">
                                <div class="checkbox checkbox-danger">
                                    <input type="checkbox" name="check" class="styled" rowid="${elePreselectorInfo.id}"/>
                                    <label class="checkbox-inline"></label>
                                </div>
                            </th>
                            <td>${elePreselectorInfo.constiyuencyName }</td>
                            <td>${elePreselectorInfo.name }</td>
                            <td>${fns:getDictLabels(elePreselectorInfo.sex, "sex", "未填写")}</td>
                            <td>${elePreselectorInfo.technicalTitle }</td>
                            <td>
                                <input type="hidden" name="state" id="state" value="${elePreselectorInfo.state}">
                                    <c:if test="${elePreselectorInfo.state =='0' }">
                                        <span style="font-family:'Lucida Grande Normal', 'Lucida Grande';text-decoration:none;color:#04F21C;">●</span><span style="font-family:'Microsoft Tai Le';text-decoration:none;color:rgba(0, 0, 0, 0.427450980392157);"></span>
                                    </c:if>
                                    <c:if test="${elePreselectorInfo.state =='1' }">
                                        <span style="font-family:'Lucida Grande Normal', 'Lucida Grande';text-decoration:none;color:#F62626;">●</span><span style="font-family:'Microsoft Tai Le';text-decoration:none;color:rgba(0, 0, 0, 0.427450980392157);"></span>
                                    </c:if>
                                    <c:if test="${elePreselectorInfo.state =='2' }">
                                        <span style="font-family:'Lucida Grande Normal', 'Lucida Grande';text-decoration:none;color:#F59A23;">●</span><span style="font-family:'Microsoft Tai Le';text-decoration:none;color:rgba(0, 0, 0, 0.427450980392157);"></span>
                                    </c:if>
                                ${fns:getDictLabels(elePreselectorInfo.state, "reviewStatus", "")}
                            </td>
                            <td>
                                <!-- <a href="#">详情</a> -->
                                <shiro:hasPermission name="erep:elePreselectorInfo:edit">
                                    <c:choose>
                                    <c:when test="${null != elePreselectorInfo.state && elePreselectorInfo.state eq 0}">
                                        <a href="javascript:void(0)" onclick="withdrawData('${elePreselectorInfo.id}','2')">撤回</a>
                                        <a href="${ctx}/erep/elePreselectorInfo/form?id=${elePreselectorInfo.id}&flag=true">详情</a>
                                    </c:when>
                                    <c:when test="${null != elePreselectorInfo.state && elePreselectorInfo.state eq 1}">
                                        <a href="${ctx}/erep/elePreselectorInfo/form?id=${elePreselectorInfo.id}">修改</a>
                                        <a href="javascript:void(0)" onclick="resultState('${elePreselectorInfo.id}')">审核</a>
                                    </c:when>
                                    <c:when test="${null != elePreselectorInfo.state && elePreselectorInfo.state eq 2}">
                                        <a href="${ctx}/erep/elePreselectorInfo/form?id=${elePreselectorInfo.id}">修改</a>
                                        <a href="javascript:void(0)" onclick="resultState('${elePreselectorInfo.id}')">审核</a>
                                    </c:when>
                                </c:choose>
                                </shiro:hasPermission>
                            </td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
                <div class="pagination">${page}</div>
            </div>
        </div>
    </div>
    
    <script type="text/javascript">
    //重置查询
    $("#btn-reset").click(function(){
        $(".form-control").val('');
        $("select").val('');
    })
    //全选的操作
    $("input[name='all-checks']").click(function() {
        $("input[name='all-check']").attr('checked', false)
        if (this.checked) {
            $("input[name='check']").attr('checked', true)
        } else {
            $("input[name='check']").attr('checked', false)
        }
    })

    //    每个check的操作
    $('input[name=check]').each(function() {
        $(this).click(function() {
            $("input[name='all-check']").attr('checked', false)
            $("input[name='all-checks']").attr('checked', false)
        })
    })
    
    
    //姓名排序
    $("#orderByName").click(function(){
        $(":input[name='orderBy']").val("name");
        $("#searchForm").submit();
    })
    
    
    //导出预选人名单
    $("#all-export").click(function(){
        // 获取选中的复选框
        var list = $("input[name='check']:checked");
        var ids =[];
        for(var i=0;i<list.length;i++){
           var tr=$(list[i]).parents("tr").find("td");
           var state=tr.eq(4).find("input[type='hidden'][name='state']").val()
           if('0'== state){
              ids.push($(list[i]).attr("rowid"));
           }else{
            layer.msg('导出的数据含有未通过的,请进行调整',{icon:2,time:2000});
            return false;
           }
        }
        var url = "${ctx}/erep/elePreselectorInfo/export?type=${elePreselectorInfo.type}&state=0&ids="+ids;
        window.location.href=url;
    })
    
    
    </script>
</body>
</html>
原文地址:https://www.cnblogs.com/mxggx/p/13600710.html