老年人能力评估系统即将验收:
这周更改了多条件查询功能(参考知网的查询页面)和简单做了可视化的展示。
知网的多条件查询:
功能展示如下:
整体页面
局部细节展示:
细节一:三个查询条件,每个查询条件可在下面的选择框中进行选择,选择对应条件后,在后面的输入框中输入要查询的内容
细节二:精确查询和模糊查询的分类,在每个查询条件对应的输入框后都有精确和模糊两种查询的匹配方式。
细节三:多条件并列和选择查询(and和or),主要是根据查询条件之间的关系进行查询。
页面源码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>能力评估数据查询</title> <link rel="stylesheet" href="../../plugins/layui-v2.7.6/layui/css/layui.css"> </head> <body> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo layui-hide-xs layui-bg-black">老年人能力评估系统</div> <!-- 头部区域(可配合layui 已有的水平导航) --> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item layui-hide layui-show-md-inline-block"> <a href="javascript:;"> <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img"> tester </a> <dl class="layui-nav-child"> <dd><a href="">Your Profile</a></dd> <dd><a href="">Settings</a></dd> <dd><a href="">Sign out</a></dd> </dl> </li> <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect> <a href="javascript:;"> <i class="layui-icon layui-icon-more-vertical"></i> </a> </li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域(可配合layui已有的垂直导航) --> <ul class="layui-nav layui-nav-tree"> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">信息导入</a> <dl class="layui-nav-child"> <dd> <a href="javascript:;">单个导入</a> <dl class="layui-nav-child"> <dd><a href="../importInfo/evaluate.html">评估基本信息表</a></dd> <dd><a href="../importInfo/oldpeople.html">被评估者基本信息表</a></dd> <dd><a href="../importInfo/linkman.html">信息提供者及联系人表</a></dd> </dl> </dd> <dd><a href="../importInfo/tableImport.html">批量导入</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">能力评估</a> <dl class="layui-nav-child"> <dd><a href="../evaluate/dayevaluate.html">日常生活活动评估</a></dd> <dd><a href="../evaluate/mindevaluate.html">精神状态评估</a></dd> <dd><a href="../evaluate/senseevaluate.html">感知觉与沟通评估</a></dd> <dd><a href="../evaluate/societyevaluate.html">社会参与评估</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">评估数据查询</a> <dl class="layui-nav-child"> <dd> <a href="query.html">多条件查询</a></dd> <dd><a href="queryByTree.html">树形结构查询</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="../count/count.html">能力数据统计</a> </li> <li class="layui-nav-item"> <a href="">评估结果导出</a> </li> </ul> </div> </div> <div class="layui-body"> <div style="padding: 15px;"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>老年人能力评估查询</legend> </fieldset> <div class="layui-row"> <div class="layui-panel" style="padding: 15px;margin-left: 10px"> <div class="layui-form" id="queryForm"> <div class="layui-row" style="margin-left: 10px"> <div class="layui-input-inline layui-col-md1" > </div> <div class="layui-input-inline layui-col-md2" style="padding: 6px"> <select name="condition1" lay-search lay-verify="title"> <option value="">请选择查询条件</option> <option value="eva_name">评估员</option> <option value="eva_status">评估状态</option> <option value="eva_grade">评估等级</option> <option value="peo_name">姓名</option> <option value="eva_kind">评估类别</option> <option value="eva_no">评估编号</option> </select> </div> <div class="layui-input-inline layui-col-md5" style="padding: 6px"> <input type="text" class="layui-input" name="text1"> </div> <div class="layui-input-inline layui-col-md1" style="padding: 6px"> <select name="standard1" lay-search lay-verify="title"> <option value="1">精确</option> <option value="0">模糊</option> </select> </div> </div> <div class="layui-row" style="margin-left: 10px"> <div class=" layui-input-inline layui-col-md1" style="padding: 6px"> <select name="op1" lay-search lay-verify="title"> <option value="2">AND</option> <option value="1">OR</option> </select> </div> <div class="layui-input-inline layui-col-md2" style="padding: 6px"> <select name="condition2" lay-search lay-verify="title"> <option value="">请选择查询条件</option> <option value="eva_name">评估员</option> <option value="eva_status">评估状态</option> <option value="eva_grade">评估等级</option> <option value="peo_name">姓名</option> <option value="eva_kind">评估类别</option> <option value="eva_no">评估编号</option> </select> </div> <div class="layui-input-inline layui-col-md5" style="padding: 6px"> <input type="text" class="layui-input" name="text2"> </div> <div class="layui-input-inline layui-col-md1" style="padding: 6px"> <select name="standard2" lay-search lay-verify="title"> <option value="1">精确</option> <option value="0">模糊</option> </select> </div> </div> <div class="layui-row" style="margin-left: 10px"> <div class=" layui-input-inline layui-col-md1" style="padding: 6px"> <select name="op2" lay-search lay-verify="title"> <option value="1">AND</option> <option value="2">OR</option> </select> </div> <div class="layui-input-inline layui-col-md2" style="padding: 6px"> <select name="condition3" lay-search lay-verify="title"> <option value="">请选择查询条件</option> <option value="eva_name">评估员</option> <option value="eva_status">评估状态</option> <option value="eva_grade">评估等级</option> <option value="peo_name">姓名</option> <option value="eva_kind">评估类别</option> <option value="eva_no">评估编号</option> </select> </div> <div class="layui-input-inline layui-col-md5" style="padding: 6px"> <input type="text" class="layui-input" name="text3"> </div> <div class="layui-input-inline layui-col-md1" style="padding: 6px"> <select name="standard3" lay-search lay-verify="title"> <option value="1">精确</option> <option value="0">模糊</option> </select> </div> <div class="layui-input-inline layui-col-md1" style="padding: 6px"> <button type="submit" class="layui-btn" lay-submit="" lay-filter="queryForm">立即提交</button> </div> </div> </div> </div> </div> <div class="layui-row"> <div class="layui-panel" style="margin-top: 10px"> <table id="test" lay-filter="test"></table> </div> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button> <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button> <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> </div> </script> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a> <!-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>--> </script> </div> </div> </div> <div class="layui-footer" style="text-align: center"> <!-- 底部固定区域 --> Copyright © 2022 信2005-2任赛航 </div> </div> <script src="../../plugins/layui-v2.7.6/layui/layui.js"></script> <script src="../../plugins/axios/axios.min.js"></script> <script> layui.use(['element', 'form','layedit', 'laydate', 'layer', 'util','table','tree'], function () { var element = layui.element, form = layui.form, layer = layui.layer ,layedit = layui.layedit ,laydate = layui.laydate ,util = layui.util ,table = layui.table ,$ = layui.$ ,tree = layui.tree; //头部事件 util.event('lay-header-event', { //左侧菜单事件 menuLeft: function(othis){ layer.msg('展开左侧菜单的操作', {icon: 0}); } ,menuRight: function(){ layer.open({ type: 1 ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>' ,area: ['260px', '100%'] ,offset: 'rt' //右上角 ,anim: 5 ,shadeClose: true }); } }); //一些事件触发 element.on('tab(demo)', function (data) { console.log(data); }); //监听提交 form.on('submit(queryForm)', function(data){ layer.alert(JSON.stringify(data.field), { title: '最终的提交信息' }) axios({ method:'POST', headers: { 'content-type': 'application/json;charset=UTF-8' }, data:JSON.stringify(data.field), url:'/query/queryForm1' }).then((res)=>{ data = res.data table.render({ elem: '#test' ,data:data ,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板 ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可 title: '提示' ,layEvent: 'LAYTABLE_TIPS' ,icon: 'layui-icon-tips' }] ,title: '用户数据表' ,cols: [[ {type: 'checkbox', fixed: 'left' } ,{field:'evaNo', title:'评估编号', width:130, fixed: 'left', unresize: true, sort: true} ,{field:'evaAgency', title:'评估机构', width:120, edit: 'text'} ,{field:'evaName', title:'评估员', width:100, edit: 'text', sort: true} ,{field:'peoName', title:'姓名',width:80,sort: true} ,{field:'peoAge', title:'年龄', width:80, sort: true} ,{field:'evaStatus', title:'评估状态', width:100, sort: true} ,{field:'evaKind', title:'评估类别', width:100, sort: true} ,{field:'evaGrade', title:'评估等级', width:100, sort: true} ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:100} ]] ,page:true ,limits:[5,6,7,8,10] ,limit:5 }); }) return false; }); //监听指定开关 form.on('switch(switchTest)', function(data){ layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), { offset: '6px' }); layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis) }); axios({ method:'GET', headers: { 'content-type': 'application/json;charset=UTF-8' }, url:'/query/list1' }).then((res)=>{ var data1 = res.data table.render({ elem: '#test' ,data:data1 ,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板 ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可 title: '提示' ,layEvent: 'LAYTABLE_TIPS' ,icon: 'layui-icon-tips' }] ,title: '用户数据表' ,cols: [[ {type: 'checkbox', fixed: 'left'} ,{field:'evaNo', title:'评估编号', width:130, fixed: 'left', unresize: true, sort: true} ,{field:'evaAgency', title:'评估机构', width:120, edit: 'text'} ,{field:'evaName', title:'评估员', width:100, edit: 'text', sort: true} ,{field:'peoName', title:'姓名',width:80,sort: true} ,{field:'peoAge', title:'年龄', width:80, sort: true} ,{field:'evaStatus', title:'评估状态', width:100, sort: true} ,{field:'evaKind', title:'评估类别', width:100, sort: true} ,{field:'evaGrade', title:'评估等级', width:100, sort: true} ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:100} ]] ,page:true ,limits:[5,6,7,8,10] ,limit:5 }); }) //监听行工具事件 table.on('tool(test)', function(obj){ var data = obj.data; //console.log(obj) if(obj.event === 'edit'){ layer.open({ title:'老年人日常生活评估', type: 1, content:$('#divlayer') }) } }); } ) </script> <div id="divlayer" style="display:none"> </div> </body> </html>
后台service层实现(只粘附关键代码):
public List<EvaPeople> getByQueryForm(QueryForm queryForm) { QueryWrapper<EvaPeople> queryWrapper = new QueryWrapper<>(); if(queryForm.getCondition1().equals("") && queryForm.getCondition2() .equals("") && !queryForm.getCondition3() .equals("")){ System.out.println("001"); if(queryForm.getStandard3() == 1){ queryWrapper.eq(queryForm.getCondition3(),queryForm.getText3()); }else { queryWrapper.like(queryForm.getCondition3(),queryForm.getText3()); } } else if (queryForm.getCondition1() .equals("") && !queryForm.getCondition2() .equals("") && queryForm.getCondition3() .equals("")) { System.out.println("010"); if(queryForm.getStandard2() == 1){ queryWrapper.eq(queryForm.getCondition2(),queryForm.getText2()); }else { queryWrapper.like(queryForm.getCondition2(),queryForm.getText2()); } }else if(queryForm.getCondition1() .equals("") && !queryForm.getCondition2() .equals("") && !queryForm.getCondition3() .equals("")){ System.out.println("011"); if(queryForm.getOp2() == 2){ if(queryForm.getStandard2() == 1 && queryForm.getStandard3() == 1){ queryWrapper.eq(queryForm.getCondition2(),queryForm.getText2()).eq(queryForm.getCondition3(),queryForm.getText3()); } else if (queryForm.getStandard2() == 1 && queryForm.getStandard3() == 0){ queryWrapper.eq(queryForm.getCondition2(),queryForm.getText2()).like(queryForm.getCondition3(),queryForm.getText3()); }else if(queryForm.getStandard2() == 0 && queryForm.getStandard3() == 1){ queryWrapper.like(queryForm.getCondition2(),queryForm.getText2()).eq(queryForm.getCondition3(),queryForm.getText3()); }else { queryWrapper.like(queryForm.getCondition2(),queryForm.getText2()).like(queryForm.getCondition3(),queryForm.getText3()); } }else { if(queryForm.getStandard2() == 1 && queryForm.getStandard3() == 1){ queryWrapper.eq(queryForm.getCondition2(),queryForm.getText2()).or(qw->qw.eq(queryForm.getCondition3(),queryForm.getText3())); } else if (queryForm.getStandard2() == 1 && queryForm.getStandard3() == 0){ queryWrapper.eq(queryForm.getCondition2(),queryForm.getText2()).or(qw->qw.like(queryForm.getCondition3(),queryForm.getText3())); }else if(queryForm.getStandard2() == 0 && queryForm.getStandard3() == 1){ queryWrapper.like(queryForm.getCondition2(),queryForm.getText2()).or(qw->qw.eq(queryForm.getCondition3(),queryForm.getText3())); }else { queryWrapper.like(queryForm.getCondition2(),queryForm.getText2()).or(qw->qw.like(queryForm.getCondition3(),queryForm.getText3())); } } }else if(!queryForm.getCondition1() .equals("") && queryForm.getCondition2() .equals("") && queryForm.getCondition3() .equals("")){ System.out.println("100"); if(queryForm.getStandard1() == 1){ queryWrapper.eq(queryForm.getCondition1(),queryForm.getText1()); }else { queryWrapper.like(queryForm.getCondition1(),queryForm.getText1()); } }else if(!queryForm.getCondition1() .equals("") && !queryForm.getCondition2() .equals("") && queryForm.getCondition3() .equals("")){ System.out.println("110"); if(queryForm.getOp1() == 2){ if(queryForm.getStandard1() == 1 && queryForm.getStandard2() == 1){ System.out.println("11"); queryWrapper.eq(queryForm.getCondition1(),queryForm.getText1()).eq(queryForm.getCondition2(),queryForm.getText2()); } else if (queryForm.getStandard1() == 1 && queryForm.getStandard2() == 0){ System.out.println("10"); queryWrapper.eq(queryForm.getCondition1(),queryForm.getText1()).like(queryForm.getCondition2(),queryForm.getText2()); }else if(queryForm.getStandard1() == 0 && queryForm.getStandard2() == 1){ System.out.println("01"); queryWrapper.like(queryForm.getCondition1(),queryForm.getText1()).eq(queryForm.getCondition2(),queryForm.getText2()); }else { System.out.println("00"); queryWrapper.like(queryForm.getCondition1(),queryForm.getText1()).like(queryForm.getCondition2(),queryForm.getText2()); } }else { if(queryForm.getStandard1() == 1 && queryForm.getStandard2() == 1){ queryWrapper.eq(queryForm.getCondition1(),queryForm.getText1()).or(qw->qw.eq(queryForm.getCondition2(),queryForm.getText2())); } else if (queryForm.getStandard1() == 1 && queryForm.getStandard2() == 0){ queryWrapper.eq(queryForm.getCondition1(),queryForm.getText1()).or(qw->qw.like(queryForm.getCondition2(),queryForm.getText2())); }else if(queryForm.getStandard1() == 0 && queryForm.getStandard2() == 1){ queryWrapper.like(queryForm.getCondition1(),queryForm.getText1()).or(qw->qw.eq(queryForm.getCondition2(),queryForm.getText2())); }else { queryWrapper.like(queryForm.getCondition1(),queryForm.getText1()).or(qw->qw.like(queryForm.getCondition2(),queryForm.getText2())); } } }else if(!queryForm.getCondition1().equals("") && queryForm.getCondition2().equals("") && !queryForm.getCondition3() .equals("")){ System.out.println("101"); if(queryForm.getOp2() == 2){ if(queryForm.getStandard1() == 1 && queryForm.getStandard3() == 1){ queryWrapper.eq(queryForm.getCondition1(),queryForm.getText1()).eq(queryForm.getCondition3(),queryForm.getText3()); } else if (queryForm.getStandard1() == 1 && queryForm.getStandard3() == 0){ queryWrapper.eq(queryForm.getCondition1(),queryForm.getText2()).like(queryForm.getCondition3(),queryForm.getText3()); }else if(queryForm.getStandard1() == 0 && queryForm.getStandard3() == 1){ queryWrapper.like(queryForm.getCondition1(),queryForm.getText1()).eq(queryForm.getCondition3(),queryForm.getText3()); }else { queryWrapper.like(queryForm.getCondition1(),queryForm.getText1()).like(queryForm.getCondition3(),queryForm.getText3()); } }else { if(queryForm.getStandard1() == 1 && queryForm.getStandard3() == 1){ queryWrapper.eq(queryForm.getCondition1(),queryForm.getText1()).or(qw->qw.eq(queryForm.getCondition3(),queryForm.getText3())); } else if (queryForm.getStandard1() == 1 && queryForm.getStandard3() == 0){ queryWrapper.eq(queryForm.getCondition1(),queryForm.getText1()).or(qw->qw.like(queryForm.getCondition3(),queryForm.getText3())); }else if(queryForm.getStandard1() == 0 && queryForm.getStandard3() == 1){ queryWrapper.like(queryForm.getCondition1(),queryForm.getText1()).or(qw->qw.eq(queryForm.getCondition3(),queryForm.getText3())); }else { queryWrapper.like(queryForm.getCondition1(),queryForm.getText1()).or(qw->qw.like(queryForm.getCondition3(),queryForm.getText3())); } } }else if(!queryForm.getCondition1() .equals("") && !queryForm.getCondition2() .equals("") && !queryForm.getCondition3() .equals("")){ System.out.println("111"); queryWrapper.like(queryForm.getCondition3(),queryForm.getText3()).like(queryForm.getCondition2(),queryForm.getText2()).like(queryForm.getCondition1(),queryForm.getText1()); } List<EvaPeople> people = evaPeopleMapper.selectList(queryWrapper); return people; }
简单的数据可视化(博客暂时展示为这样,具体效果将会再进行修改):
整体页面:
统计条件
进行查询统计:
根据评估员查询
根据评估状态查询:
树形结构的查询(初步实现):
为什么说是初步实现呢,首先有了左侧的树形结构展示栏,点击左侧不同机构各个年龄段的子节点,右侧对应表中的数据就会进行删选改变。但是还差点意思——就是再右侧对应的数据上添加一个查询框,进行子节点的数据的进一步查询。
app端的数据查询功能:
整体页面
查询功能:根据下拉选择条件进行进一步的数据查询
进一步改进打算:
老师要求要进行根据多条件统计。然后再进一步实现一下数据下钻的功能展示。
标签:总结,queryWrapper,like,每周,queryForm,&&,else,eq From: https://www.cnblogs.com/20203923rensaihang/p/16928090.html