客户管理功能
- 新增客户
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);
}
扫一扫
406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
