客户管理功能

新增客户

html和JS

<!-- 模态框 --> <div class="modal fade" id="myModal" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">客户资料</h4> </div> <div class="modal-body"> <form id="clientForm" name="clientForm"> <table style="width: 100%"> <tr class="formTr"> <input type="hidden" id="pk" name="pk" value="0"> <td style="width: 30%; text-align: right"><label class="col-lg-2 control-label">姓名</label></td> <td style="width: 70%"> <div class="col-lg-2"> <input type="text" id="name" name="name" class="form-control" placeholder="姓名"> </div> </td> </tr> <tr class="formTr"> <td style="width: 30%; text-align: right"><label class="col-lg-2 control-label">性别</label></td> <td style="width: 70%;padding-top: 10px" > <div class="square-red single-row" > <div class="radio "> <input tabindex="3" type="radio" id="sex" value="男" name="sex" checked="checked"> <div style= " position: relative; left: 50px; top: -20px;"> <label>男</label></div> </div> </div> <div class="square-green single-row" > <div class="radio "> <input tabindex="3" type="radio" id="sex" value="女" name="sex"> <div style= " position: relative; left: 50px; top: -20px;"> <label>女</label></div> </div> </div> </td> </tr> <tr class="formTr"> <td style="width: 30%; text-align: right"><label class="col-lg-2 control-label">出生日期</label></td> <td style="width: 70%"> <div class="col-sm-10"> <input type="text" id="birthday" name="birthday" placeholder="" data-mask="9999-99-99" class="form-control" value="2016-12-12"> <span class="help-inline">yyyy-dd-mm</span> </div> </td> </tr> <tr class="formTr"> <td style="width: 30%; text-align: right"><label class="col-lg-2 control-label">婚姻状况</label></td> <td style="width: 70%;padding-top: 20px" > <select class="form-control m-bot15" id="maritalStatus" name="maritalStatus"> <option value="未婚">未婚</option> <option value="已婚">已婚</option> </select> </td> </tr> <tr> <td style="width: 30%; text-align: right"><label class="col-lg-2 control-label">文化程度</label></td> <td style="width: 70%"> <select class="form-control m-bot15" id="education" name="education"> <option value="初中及以下">初中及以下</option> <option value="高中或中专">高中或中专</option> <option value="大专">大专</option> <option value="本科">本科</option> <option value="硕士及以上">硕士及以上</option> </select> </td> </tr> <tr> <td style="width: 30%; text-align: right"><label class="col-lg-2 control-label">月收入</label></td> <td style="width: 70%"> <div class="col-lg-2"> <input type="number" id="income" name="income" class="form-control" placeholder="月收入"> </div> </td> </tr> <tr> <td style="width: 30%; text-align: right"><label class="col-lg-2 control-label">手机号码</label></td> <td style="width: 70%;padding-top: 10px"> <div class="col-lg-2"> <input type="tel" id="phone" name="phone" class="form-control" placeholder="联系方式"> </div> </td> </tr> <tr> <td style="width: 30%; text-align: right"><label class="col-lg-2 control-label">地址</label></td> <td style="width: 70%;padding-top: 10px"> <div class="col-lg-2"> <input type="text" id="address" name="address" class="form-control" placeholder="地址"> </div> </td> </tr> <tr> <td style="width: 30%; text-align: right"><label class="col-lg-2 control-label">职业</label></td> <td style="width: 70%;padding-top: 10px"> <div class="col-lg-2"> <input id="profession" name="profession" type="text" class="form-control" placeholder="职业"> </div> </td> </tr> <tr> <td style="width: 30%; text-align: right"><label class="col-lg-2 control-label">信用级别</label></td> <td style="width: 70%;padding-top: 10px"> <div id="spinner3"> <div class="input-group" style="width:150px;"> <input type="text" id="level" name="level" class="spinner-input form-control" maxlength="5" readonly> <div class="spinner-buttons input-group-btn"> <button type="button" class="btn btn-default spinner-up"> <i class="fa fa-angle-up"></i> </button> <button type="button" class="btn btn-default spinner-down"> <i class="fa fa-angle-down"></i> </button> </div> </div> </td> </tr> </table> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary" onclick="updClient()">保存</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> function updClient(){ $.ajax({ url : "saveClient.do", dataType : "json", contentType : "application/x-www-form-urlencoded; charset=utf-8", type : "post", data : $('#clientForm').serialize(), success : function(data) { alert("操作"+data.result); $('#myModal').modal('hide'); table.ajax.reload( null, false ); // 刷新表格数据，分页信息不会重置 } }); }

点击新增或者修改按钮，弹出新增客户模态框，填写表单完成后，点击保存。触发JS函数，利用ajax技术，异步提交表单到后台。

后台java代码

@ResponseBody @RequestMapping(value = "/saveClient.do") public Map<String,String> saveClient(Client c){ List<Map<String, Object>> list = clientService.getIncomeLevel(); String incomeStr = c.getIncome(); double income=Double.parseDouble(incomeStr); if(list!=null){ for(int i = 0;i<list.size();i++){ //判断工资属于用户等级 Map<String, Object> map = list.get(i); int LEVEL = (int) map.get("LEVEL"); Double min = (Double) map.get("min"); Double max = (Double) map.get("LEVEL"); if(income>=min&&income<max){ c.setLevel(LEVEL); break; } } } clientService.savaClient(c); Map<String,String> map=new HashMap<String,String>(); map.put("result", "成功"); return map; }

修改成功后，会提示成功。

客户列表

客户列表展示，通过表格方式展示客户信息。 用户列表，展示用户数据，可进行修改或删除操作。修改操作仿照新增功能客户功能。 HTML和JS代码

var table=$('#editable-sample').DataTable( { language: { "sProcessing": "处理中...", "sLengthMenu": "显示 _MENU_ 项结果", "sZeroRecords": "没有匹配结果", "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项", "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项", "sInfoFiltered": "(由 _MAX_ 项结果过滤)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中数据为空", "sLoadingRecords": "载入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } }, searching: false, ordering: false, columns: [ { data: 'name',"title": "客户姓名","targets": 0 },//data :数据名，title 别名 { data: 'address',"title": "家庭地址","targets": 3 }, { data: 'birthday',"title":"出生日期" }, { data: 'education',"title":"文化程度" }, { data: 'income',"title":"月收入" }, { data: 'level',"title":"信用级别" }, { data: 'maritalStatus',"title":"婚姻状况" }, { data: 'phone',"title":"联系方式" }, { data: 'profession',"title":"职业" }, { data: 'sex',"title":"性别" }, { data: 'pk',"title":"操作","render": function ( data, type, row, meta ) { var html= " <button class='btn btn-info'"+ "onclick='editClient(\""+row.name+"\",\""+row.address+"\",\""+row.birthday+"\",\""+row.education+"\",\""+row.income+"\",\""+row.level+"\",\""+row.maritalStatus+"\",\""+row.phone+"\",\""+row.profession+"\",\""+row.sex+"\",\""+row.pk+"\")' "+ "type='button'>修改</button> <button onclick='delClient(\""+row.pk+"\")' class='btn btn-danger' type='button'>删除</button>"; return html; }} ], // autoWidth: false, //禁用自动调整列宽 // STRIPECLASSES: ["ODD", "EVEN"],//为奇偶行加上样式，兼容不支持CSS伪类的场合 // order: [], //取消默认排序查询,否则复选框一列会出现小箭头 // processing: false, //隐藏加载提示,自行处理 // serverSide: true, //启用服务器端分页 serverSide: true, ajax: { url: 'getClientList.do', type: 'POST', dataType:'json', contentType : "application/x-www-form-urlencoded; charset=UTF-8", } // searching: false //禁用原生搜索 } );

后台代码

@ResponseBody @RequestMapping(value = "/getClientList.do") public Grid getClientList(Grid grid) { List list = clientService.list(grid); grid.setData(list); return grid; } @Override public List list(Grid g) { String sql="SELECT * FROM client limit ?,?"; List<Map<String, Object>> list = jdbcDao.queryForList(sql, g.getStart(),g.getStart()+g.getLength()); int count = jdbcDao.queryForInt("SELECT count(pk) FROM client"); g.setRecordsTotal(count); g.setRecordsFiltered(count); // String str = ""; // for (Client u : li) { // str += u.toString(); // } return list; }

删除客户数据

在客户列表，点击删除后，即删除客户数据。通过ajax技术，异步删除客户数据。 以下是HTML 和 JS代码

function delClient(pk){ $.ajax({ url : "delClient.do", dataType : "json", contentType : "application/x-www-form-urlencoded; charset=utf-8", type : "post", data : {"pk":pk}, success : function(data) { alert("删除"+data.result); table.ajax.reload( null, false ); // 刷新表格数据，分页信息不会重置 } }); }

后台代码

@ResponseBody @RequestMapping(value = "/delClient.do") public Map<String,String> delClient(int pk){ clientService.delClient(pk); Map<String,String> map=new HashMap<String,String>(); map.put("result", "成功"); return map; }

信用管理

有信用级别管理和贷款额度管理

信用级别管理

通过选择级别和填写收入范围，修改客户信用级别评定。 html和JS代码

<div class="wrapper"> <div class="row"> <div class="col-sm-12"> <div class="panel"> <header class="panel-heading"> 信用级别管理 <span class="tools pull-right"> <a href="javascript:;" class="fa fa-chevron-down"></a> <a href="javascript:;" class="fa fa-times"></a> </span> </header> <div class="panel-body"> <table class="table"> <thead> <tr> <th>级别</th> <th>月收入（小）</th> <th>月收入（大）</th> </tr> </thead> <tbody> #foreach($incomeLevel in $list) <tr> #foreach( $item in $incomeLevel.entrySet()) <td> $item.value</td> #end </tr> #end </tbody> </table> <table width="100%"> <tr> <td width="40%"> <select class="form-control m-bot15" id="incomeLevel"> <option value="1">级别1</option> <option value="2">级别2</option> <option value="3">级别3</option> <option value="4">级别4</option> <option value="5">级别5</option> </select> </td> <td><input type="text" class="form-control round-input" id="min"> 至 <input type="text" class="form-control round-input" id="max"></td> </tr> <tr> <td colspan="2" style="text-align: center"><button type="button" onclick="updIncomeLevel()" class="btn btn-primary btn-lg btn-block">确定保存</button></td> </tr> </table> </div> </div> function updIncomeLevel(){ var result=confirm("确定修改收入等级?将修改客户等级评定!"); if(result!=true)return false; var incomeLevel=$("#incomeLevel").val(); var min=$("#min").val(); var max=$("#max").val(); $.ajax({ url : "updIncomeLevel.do", dataType : "json", contentType : "application/x-www-form-urlencoded; charset=utf-8", type : "post", data : {"incomeLevel":incomeLevel,"min":min,"max":max}, success : function(data) { alert("更新"+data.result); location.reload(); } }); }

后台代码

@ResponseBody @RequestMapping(value = "/updIncomeLevel.do") public Map<String,String> updIncomeLevel(String incomeLevel, String min, String max){ clientService.updIncomeLevel(incomeLevel, min, max); Map<String,String> map=new HashMap<String,String>(); map.put("result", "成功"); return map; } @Override public void updIncomeLevel(String level, String min, String max) { String sql="UPDATE incomelevel SET max=?, min=? WHERE level=?"; String sql1="UPDATE client set level=? where income BETWEEN ? and ?"; jdbcDao.update(sql, max, min, level); jdbcDao.update(sql1,level,min,max); }

贷款额度管理

选择级别 修改贷款额度范围。点击确定后保存数据。 HTML和JS

<section class="panel"> <header class="panel-heading"> 贷款范围管理 <span class="tools pull-right"> <a href="javascript:;" class="fa fa-chevron-down"></a> <a href="javascript:;" class="fa fa-times"></a> </span> </header> <div class="panel-body"> <table class="table slider-table"> <tr><td colspan="2" style="text-align: center">信用级别的贷款范围</td></tr> <tr><td colspan="2"> <div class="input-group m-bot15"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">级别 <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a onclick="updRange(1)" href="javascript:;">级别1</a></li> <li><a onclick="updRange(2)" href="javascript:;">级别2</a></li> <li><a onclick="updRange(3)" href="javascript:;">级别3</a></li> <li><a onclick="updRange(4)" href="javascript:;">级别4</a></li> <li><a onclick="updRange(5)" href="javascript:;">级别5</a></li> </ul> </div> <input type="number" id="min" step="1000" class="form-control"><p>至</p> <input id="max" type="number" step="1000" class="form-control" > </div></td></tr> <form id="levleForm" name=""levleForm""> <tr><td style="width:10%"> 级别1 </td> <td> <input id="level1" type="text" name="level1" value="$!{level1}" data-type="double" /> </td> </tr> <tr><td style="width:10%">级别2</td> <td> <input id="level2" type="text" name="level2" value="$!{level2}" data-type="double" /> </td> </tr> <tr><td style="width:10%">级别3</td> <td> <input id="level3" type="text" name="level3" value="$!{level3}" data-type="double" /> </td> </tr> <tr><td style="width:10%">级别4</td> <td> <input id="level4" type="text" name="level4" value="$!{level4}" data-type="double" /> </td> </tr> <tr><td style="width:10%">级别5</td> <td> <input id="level5" type="text" name="level5" value="$!{level5}" data-type="double" /> </td> </tr> <tr><td colspan="2" style="text-align: center"><button onclick="updLevle()" class="btn btn-success btn-lg btn-block" type="button">提交</button></td></tr> </form> </table> </div> </section> function updLevle(){ var level1=$('#level1').val(); var level2=$('#level2').val(); var level3=$('#level3').val(); var level4=$('#level4').val(); var level5=$('#level5').val(); $.ajax({ url : "updLevel.do", dataType : "json", contentType : "application/x-www-form-urlencoded; charset=utf-8", type : "post", data : {"level1":level1,"level2":level2,"level3":level3,"level4":level4,"level5":level5,}, success : function(data) { alert("更新"+data.result); location.reload(); } }); }

后台代码

@ResponseBody @RequestMapping(value = "/updLevel.do") public Map<String,String> updLevel(String level1, String level2, String level3, String level4, String level5){ clientService.updLevel(level1, level2, level3, level4, level5); Map<String,String> map=new HashMap<String,String>(); map.put("result", "成功"); return map; } @Override public void updLevel(String level1, String level2, String level3, String level4, String level5) { String sql="UPDATE creditlevel SET level1=?, level2=?, level3=?, level4=?, level5=? WHERE (id=?)"; jdbcDao.update(sql, level1, level2, level3, level4, level5,1); }

贷款管理模块

每一步骤都要按照贷款规则填写，填写完毕当前步骤后，点击下一步。 最后点击提交，将生成贷款订单。 后台代码

@ResponseBody @RequestMapping(value = "/saveLoan.do") public Map<String,String> saveLoan(Loan l){ l.setState("申请中"); Date date=new Date(); SimpleDateFormat dateFormater = new SimpleDateFormat("yyyy-MM-dd"); l.setApplyTime(dateFormater.format(date)); loanService.savaLoan(l); Map<String,String> map=new HashMap<String,String>(); map.put("result", "成功"); return map; }

贷款列表展示功能

新增的贷款可以在此页面查看，将所有贷款都在这个功能展示。 后台代码

@ResponseBody @RequestMapping(value = "/getLoanList.do") public Grid getClientList(Grid grid) { List list = loanService.list(grid); grid.setData(list); return grid; } @Override public List list(Grid g) { String sql="SELECT * FROM loan limit ?,?"; List<Map<String, Object>> list = jdbcDao.queryForList(sql, g.getStart(),g.getStart()+g.getLength()); int count = jdbcDao.queryForInt("SELECT count(id) FROM loan"); g.setRecordsTotal(count); g.setRecordsFiltered(count); return list; }

修改贷款订单状态功能

通过在订单列表点击操作按钮，可以修改订单状态，如 审核，修改，通过，发款，归档等状态 后台代码

@ResponseBody @RequestMapping(value = "/examineLoan.do") public Map<String,String> examineLoan(String id, String state, String examineRemark){ loanService.examineLoan(id,state,examineRemark); Map<String,String> map=new HashMap<String,String>(); map.put("result", "成功"); return map; } @ResponseBody @RequestMapping(value = "/grant.do") public Map<String,String> grant(String id,String grantRemark){ loanService.grant(id,grantRemark); Map<String,String> map=new HashMap<String,String>(); map.put("result", "成功"); return map; } @ResponseBody @RequestMapping(value = "/complete.do") public Map<String,String> complete(String id){ loanService.complete(id); Map<String,String> map=new HashMap<String,String>(); map.put("result", "成功"); return map; } @ResponseBody @RequestMapping(value = "/updLoan.do") public Map<String, String> updLoan(String id, String applyTotal, String guarantee, String repaymentTime, String repaymentType, String remark){ loanService.updLoan(id,applyTotal,guarantee,repaymentTime,repaymentType,remark); Map<String,String> map=new HashMap<String,String>(); map.put("result", "成功"); return map; } @Override public void examineLoan(String id, String state, String examineRemark) { String sql="UPDATE loan set state=? ,examineRemark=? where id=?"; jdbcDao.update(sql, state,examineRemark,id); } @Override public void grant(String id, String grantRemark) { String sql="UPDATE loan set state='确认发款' ,grantRemark=? where id=?"; jdbcDao.update(sql,grantRemark,id); } @Override public void complete(String id) { String sql="UPDATE loan set state='确认归档' where id=?"; jdbcDao.update(sql,id); }