<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org" lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <head> <meta charset="UTF-8"> <title>预算汇总</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="../../../Styles/themes/default/style.css" media="all"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href="/Scripts/libs/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css"/> <script th:src="@{/Scripts/jquery-1.9.0.min.js}" charset="utf-8"></script> <script th:src="@{/Scripts/date2format.js}" charset="utf-8"></script> <script src="/Scripts/libs/ligerUI/js/ligerui.all.js" type="text/javascript"></script> <script src="../../../Scripts/main.js" charset="utf-8"></script> <script src="../../../Scripts/module/eui.js" charset="utf-8"></script> <script src="../../../Scripts/main.js" charset="utf-8"></script> <script th:src="@{/Scripts/plugins/jquery.validate.js}"></script> <script th:src="@{/Scripts/pack.ajax.js}" charset="utf-8"></script> </head> <body> <!--导入弹框--> <div class="eui-form" id="openExcel" align="center" style="display: none;margin-top: 20px;"> <!--<a οnclick="dowloadTemp()" class="eui-btn eui-btn-primary">下载模版</a>--> <div class="eui-col-6" style="padding-left:0px;"> <form enctype="multipart/form-data" id="batchUpload" action="" method="post" style="padding-left:0px;"> <!--<button class="btn btn-success btn-xs" id="uploadEventBtn" style="height:26px;" type="button" >选择文件</button>--> <button type="button" class="eui-btn eui-btn-normal" id="uploadEventBtn">选择文件</button> <input type="file" name="file" style="width:0px;height:0px;" id="uploadEventFile"> <input id="uploadEventPath" disabled="disabled" type="text" placeholder="请选择excel表" style="border: 1px solid #e6e6e6; height: 26px;width: 200px;" > <button type="button" class="eui-btn" οnclick="uploadBtn()" >开始上传</button> </form> <!--<button type="button" οnclick="uploadBtn()" >上传</button>--> </div> </div> <div class="eui-bg-lightGray"> <!--搜索开始--> <from id="alloteSearch"> <blockquote class="eui-elem-quote eui-quote-search eui-form"> <div class="eui-form-item"> <label class="eui-form-label">预算年度：</label> <div class="eui-input-inline"> <input type="text" name="budgetyear" placeholder="请输入年度" class="eui-input"> </div> <label class="eui-form-label">预算版本：</label> <div class="eui-input-inline"> <input type="text" name="budgetname" placeholder="请输入版本" class="eui-input"> </div> <div class="eui-input-inline"> <span class="eui-btn" οnclick="doSearch()">查询</span> <span class="eui-btn eui-btn-primary" οnclick="resetForm()">重置</span> </div> </div> </blockquote> </from> <!--搜索结束--> <!--列表显示开始--> <div class="eui-row eui-padding10 eui-borderB"> <div class="eui-col-md6 eui-font18"> <i class='eui-icon eui-font24'></i> 固定预算管理 </div> <div class="eui-col-md6 eui-textAlignR"> <a href="###" class="eui-btn eui-btn-small" οnclick="Export()"><i class="eui-icon" ></i>模板下载</a> <a class="eui-btn eui-btn-small" id="Import2" οnclick="openExcel(1)"><i class="eui-icon"></i>预算导入</a> <a class="eui-btn eui-btn-small" id="Import" οnclick="openExcel(2)"><i class="eui-icon"></i>转结导入</a> </div> </div> <div class="eui-row eui-paddingLR10"> <div class="eui-col-md12"> <div class="eui-form"> <table class="eui-table" id="versionList" e-filter="versionList"></table> </div> </div> </div> <!--列表显示结束--> </div> <!--查询条件结束--> <script type="text/html" id="barNotice"> <a class="eui-btn eui-btn-mini" e-event="detail">查看详情</a> </script> <script> $("#uploadEventBtn").unbind("click").bind("click",function(){ $("#uploadEventFile").click(); }); $("#uploadEventFile").bind("change",function(){ $("#uploadEventPath").attr("value",$("#uploadEventFile").val()); }); //打开上传模态框 var types; function openExcel(type) { types=type; eui.use(['layer', 'form'], function () { var form = eui.form, layer = eui.layer; layer.open({ title: '选择处置类型', type: 1, content: $('#openExcel'), move: false,//禁止拖拽 shade: [0.3, '#f8f8f8'],//遮罩 area: ['560px', '240px'], btnAlign: 'c', btn: [ '取消'], btn2: function (index, layero) { layer.closeAll(); } }); }); } //导出数据 function Export() { window.open("/Summary/excelExport"); } //点击上传按钮事件 function uploadBtn() { var uploadEventFile = $("#uploadEventFile").val(); if(uploadEventFile == ''){ layer.msg("请选择excel,再上传"); }else if(uploadEventFile.lastIndexOf(".xls")<0){//可判断以.xls和.xlsx结尾的excel layer.msg("只能上传Excel文件"); }else{ var url; if(types=="2"){ url= '/Summary/Transfer'; }else{ url= '/Summary/Budget'; } var formData = new FormData($('form')[0]); sendAjaxRequest(url,'POST',formData); } } function sendAjaxRequest(url,type,data) { eui.use(["layer"],function () { var layer = eui.layer; $.ajax({ url : url, type : type, dataType:"json", data : data, success : function(result) { if(result.errorMsg==""){ layer.msg("上传成功!"); setTimeout("layer.closeAll()",1000) } doSearch(); }, error : function() { layer.msg( "excel上传失败"); }, cache : false, contentType : false, processData : false }); }); } // **************************************************************************** $(function () { doSearch(); }); function doSearch() { var params = $('#alloteSearch').serializeObject(); params.budgetyear = $('[name="budgetyear"]').val(); params.budgetname = $('[name="budgetname"]').val(); //表单 eui.use(['form', 'layedit', 'laydate', 'table', 'element'], function () { var form = eui.form , layer = eui.layer , layedit = eui.layedit , laydate = eui.laydate , element = eui.element ,table = eui.table; table.render({ id: 'versionId', elem: '#versionList' // , height: 475 , url: '/Summary/AllVersion?budgetyear' //数据接口 , method: 'post' ,where:{params:JSON.stringify(params)} , cols: [[ //表头 {checkbox: true, fixed: 'left'} , {field: 'num', title: '序号', width: 80, sort: true} , {field: 'VERSION_CODE', title: '版本号', width: 200, sort: true} , {field: 'BUDGET_YEAR', title: '预算年度', width: 200} // , {field: 'BUDGET_NAME', title: '预算名称', width: 200} // , {field: 'UPDATE_DETAIL', title: '修改记录', width: 200} , {field: 'IS_LATEST', title: '是否最新', width: 200} // , {field: 'IS_FINAL', title: '是否最终', width: 200} , {field: 'CREATE_TIME', title: '创建时间', width: 200, sort: true, templet: '<div>{{new Date(d.CREATE_TIME).Format("yyyy-MM-dd hh:mm:ss")}}</div>'} , {fixed: 'right', title: '操作', width: 125, toolbar: '#barNotice',right:true} ]] , response: { statusName: 'code' //数据状态的字段名称，默认：code , statusCode: 200 //成功的状态码，默认：0 , msgName: 'message' //状态信息的字段名称，默认：msg , countName: 'count' //数据总数的字段名称，默认：count , dataName: 'data' //数据列表的字段名称，默认：data } , skin: 'row' //表格风格 , even: true , loading: true , page: true //是否显示分页 , limits: [10, 20, 30] , limit: 10 //每页默认显示的数量 , done: function (res, curr, count) { } }); //监听工具条 table.on('tool(versionId)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值） var tr = obj.tr; //获得当前行 tr 的DOM对象 if (layEvent === 'detail') { //查看 window.open('/Summary/Details?VersionID='+data.ID_); } }); }); } // function versionDetail(VersionID) { // layer.open({ // type: 2 //此处以iframe举例 // ,title: '版本明细' // ,area: ['100%', '100%'] // ,shade: 0 // ,maxmin: true // ,content: '/Summary/Details?VersionID='+VersionID // //,data:{VersionID:VersionID} // //,btn: ['确认', '关闭'] //只是为了演示 // ,yes: function(){ // layer.msg("这里是确认操作!"); // } // ,btn2: function(){ // layer.closeAll(); // } // // ,zIndex: layer.zIndex //重点1 // ,success: function(layero){ // layer.setTop(layero); //重点2 // } // }); // } </script> </body> </html>
以上是前端代码：界面效果如下
控制器：
//查询所有预算版本 @RequestMapping(value = "/AllVersion",method =RequestMethod.POST) @ResponseBody public Result AllVersion(Integer page,Integer limit,String params) { Map<String,Object> map=JSON.parseObject(params,Map.class); List<Map<String,Object>> VersionList=budgetVersionService.findVersionMapList(map,page,limit); PageInfo pageInfo=new PageInfo(VersionList); return ResultGenerator.genSuccessResult(pageInfo.getList()).setCount(pageInfo.getTotal()).setCode(0); }
service层；
List<Map<String,Object>> findVersionMapList(Map<String, Object> map, Integer page, Integer limit);Mapper
impl层
@Override public List<Map<String, Object>> findVersionMapList(Map<String, Object> map, Integer page, Integer limit) { try { PageHelper.startPage(page, limit); List<Map<String, Object>> list = budgetVersionMapper.findVersionMapList(map); return list; } catch (Exception e) { e.printStackTrace(); return null; } }
Mapper层
//查询预算所有版本 List<Map<String,Object>> findVersionMapList(Map<String, Object> map);
xml
<!--根据条件查询版本-->
<select id="findVersionMapList" parameterType="java.util.Map" resultType="java.util.Map">
SELECT (@rowNO := @rowNo+1) num,ID_,VERSION_CODE,BUDGET_YEAR,
(CASE WHEN IS_LATEST=1 THEN '是' else '否' END) AS IS_LATEST,CREATE_TIME
FROM budget_version a ,(select @rowNO := 0) b
<if test="(budgetyear != null and budgetyear != '') and (budgetname != null and budgetname != '')">
where BUDGET_YEAR LIKE "%"#{budgetyear}"%"
and BUDGET_NAME LIKE "%"#{budgetname}"%"
</if>
<if test="(budgetyear != null and budgetyear != '') and (budgetname == null or budgetname == '')">
where BUDGET_YEAR LIKE "%"#{budgetyear}"%"
</if>
<if test="(budgetyear == null or budgetyear == '') and (budgetname != null and budgetname != '')">
where VERSION_CODE LIKE "%"#{budgetname}"%"
</if>
order by CONVERT(VERSION_CODE,SIGNED) desc
</select>
6480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
