Crm-客户管理
这里主要涉及表:
t_customer 客户表、t_customer_contact 客户交往记录表、t_customer_linkman 客户联系人表、t_customer_order 客户订单表、t_order_details 订单详情表
t_customer客户信息表字段字段类型字段限制字段描述主键idint(11)自增id主键khnovarchar(20)可空客户编号namevarchar(20)可空客户姓名areavarchar(20)可空客户所属地区cus_managervarchar(20)可空客户经理levelvarchar(30)可空客户级别mydvarchar(30)可空客户满意度xydvarchar(30)可空客户信用度addressvarchar(500)可空客户地址post_codevarchar(50)可空邮编phonevarchar(20)可空联系电话faxvarchar(20)可空传真web_sitevarchar(20)可空网址yyzzzchvarchar(50)可空营业执照注册号frvarchar(20)可空法人代表zczjvarchar(20)可空注册资金nyyevarchar(20)可空年营业额khyhvarchar(50)可空开户银行khzhvarchar(50)可空开户账号dsdjhvarchar(50)可空地税登记号gsdjhvarchar(50)可空国税登记号stateint(11)可空流失状态is_validint(4)可空有效状态create_datedatetime可空创建时间update_datedatetime可空更新时间
t_customer_contact客户交往记录表字段字段类型字段限制字段描述主键idint(11)自增id主键cus_idint(11)可空客户idcontact_timedatetime可空交往时间addressvarchar(500)可空交往地址overviewvarchar(100)可空地址create_datedatetime可空创建时间update_datedatetime可空更新时间is_validint(4)可空有效状态
t_customer_linkman客户联系人表字段字段类型字段限制字段描述主键idint(11)自增id主键cus_idint(11)可空客户idlink_namevarchar(20)可空联系人姓名sexvarchar(20)可空性别zhiweivarchar(50)可空职位office_phonevarchar(50)可空办公电话phonevarchar(20)可空手机号is_validint(4)可空有效状态ceate_datedatetime可空创建时间update_datedatetime可空更新时间
t_customer_order客户订单字段字段类型字段限制字段描述主键idint(11)自增id主键cus_idint(11)可空客户idorder_novarchar(40)可空订单编号order_datedatetime可空下单时间addressvarchar(200)可空地址stateint(11)可空状态create_datedatetime可空创建时间update_datedatetime可空更新时间is_validint(4)可空有效状态
t_order_details订单详情表字段字段类型字段限制字段描述主键idint(11)自增id主键order_idint(11)可空订单idgoods_namevarchar(100)可空商品名称goods_numint(11)可空商品数量unitvarchar(20)可空商品单位pricefloat可空单价sumfloat可空总金额is_validint(4)可空有效状态create_datedatetime可空创建时间update_datedatetime可空更新时间
客户流失管理模块表结构
这里主要涉及表有
t_customer_loss 客户流失表
t_customer_reprieve 客户流失暂缓表
t_customer_loss客户流失表字段字段类型字段限制字段描述主键idint(11)自增id主键cus_novarchar(40)可空客户编号cus_namevarchar(20)可空客户姓名cus_managervarchar(20)可空客户经理last_order_timedate可空最后下单时间confirm_loss_timedate可空确认流失时间stateint(11)可空流失状态loss_reasonvarchar(1000)可空流失原因is_validtinyint(4)可空有效状态create_datedatetime可空创建时间update_datedatetime可空更新时间
t_customer_reprieve客户流失暂缓表字段字段类型字段限制字段描述主键idint(11)自增id主键loss_idint(11)可空流失idmeasurevarchar(500)可空措施is_validtinyint(4)可空有效状态create_datedatetime可空创建时间update_datedatetime可空更新时间
客户信息管理模块实现客户信息管理查询客户信息管理页面效果客户信息查询后端代码实现
layui 框架通过表格展示后端表数据,数据格式见官网测试数据地址。
CustomerMapper 接口定义与Sql配置
CustomerMapper .java
public interface CustomerMapperextends BaseMapperCustomer,Integer {/*由于考虑到多个模块均涉及多条件查询这里对于多条件分页查询方法由父接口BaseMapper定义*/}
CustomerMapper .xml
select id=selectByParams parameterType=com.xxxx.crm.query.CustomerQuery resultMap=BaseResultMapselectinclude refid=Base_Column_List/from t_customerwhereis_valid=1!--state流失状态0未流失1已流失--and state =0if test=null !=cusName and cusName !=and name like concat(%,#{cusName},%)/ifif test=null !=cusNo and cusNo !=and khno =#{cusNo}/ifif test=null !=level and level !=and level =#{level}/ifif test=null !=myd and myd !=and myd =#{myd}/if/where/select
CustomerQuery.java
在crm.query 包下创建CustomerQuery.java 查询类，设置查询条件
public class CustomerQuery extends BaseQuery {private String cusName;private String cusNo;private String level;}
CustomerService 定义
CustomerService .java
@Servicepublic class CustomerServiceextends BaseServiceCustomer, Integer {/*由于考虑到多个模块均涉及多条件查询这里对于多条件分页查询方法由父类BaseService定义并实现*/}
BaseService.java 分页查询方法定义与实现
public MapString, Object queryByParamsForTable(BaseQuery baseQuery) {MapString,Object result = new HashMapString,Object();PageHelper.startPage(baseQuery.getPage(),baseQuery.getLimit());PageInfoT pageInfo =new PageInfoT(selectByParams(baseQuery));result.put(count,pageInfo.getTotal());result.put(data,pageInfo.getList());result.put(code,0);result.put(msg,);return result;}
CustomerController.java
@Controller@RequestMapping(customer)public class CustomerController extends BaseController {@Resourceprivate CustomerService customerService;@Resourceprivate CustomerOrderService orderService;@RequestMapping(index)public String index(){return customer/customer;}@RequestMapping(list)@ResponseBodypublic MapString,Object queryCustomersByParams(CustomerQuery customerQuery){return customerService.queryByParamsForTable(customerQuery);}
客户信息管理前端核心代码客户信息管理主页面模板
resources/views/customer目录创建customer.ftl 模块文件,模板内容如下(模板依赖的layui文件由common.ftl 文件提供),layui表格数据展示模板文件实现参考该地址
customer.ftl
!DOCTYPE htmlhtmlheadtitle客户管理/title#include ../common.ftl/headbody class=childrenBodyform class=layui-form blockquote class=layui-elem-quote quoteBoxform class=layui-formp> class=layui-inlinep> class=layui-input-inlineinput type=text name=nameclass=layui-inputsearchVal placeholder=客户名 //p>p> class=layui-input-inlineinput type=text name=khno class=layui-inputsearchVal placeholder=客户编号 //p>p> class=layui-input-inlineselect name=levelid=leveloption value=请选择.../optionoption value=战略合作伙伴战略合作伙伴/optionoption value=大客户大客户/optionoption value=重点开发客户重点开发客户/option/select/p>a class=layui-btn search_btn data-type=reloadiclass=layui-icon#xe615;/i 搜索/a/p>/form/blockquotetable id=customerList class=layui-tablelay-filter=customers/table!--操作--script id=customerListBar type=text/htmla class=layui-btn layui-btn-xs id=edit lay-event=edit编辑/aa class=layui-btn layui-btn-xs layui-btn-danger lay-event=del删除/a/script/formscript type=text/javascript src=${ctx}/static/js/customer/customer.js/script/body/html
客户信息管理主页面模板核心js
static/js/customer目录下创建customer.js 文件,初始化layui表格数据,layui表格数据展示模板文件实现参考该地址
customer.js
layui.use([table,layer,form],function(){var layer = parent.layer === undefined ? layui.layer : top.layer,$ = layui.jquery,table = layui.table,form = layui.form;//客户列表展示vartableIns = table.render({elem: #customerList,url : ctx+/customer/list,cellMinWidth : 95,page : true,height : full-125,limits : [10,15,20,25],limit : 10,toolbar: #toolbarDemo,id : customerListTable,cols : [[{type: checkbox, fixed:center},{field: id, title:编号,fixed:true},{field: name, title: 客户名,align:center},{field: fr, title: 法人,align:center},{field: khno, title: 客户编号, align:center},{field: area, title: 地区, align:center},{field: cusManager, title: 客户经理,align:center},{field: myd, title: 满意度, align:center},{field: level, title: 客户级别, align:center},{field: xyd, title: 信用度, align:center},{field: address, title: 详细地址, align:center},{field: postCode, title: 邮编, align:center},{field: phone, title: 电话, align:center},{field: webSite, title: 网站, align:center},{field: fax, title: 传真, align:center},{field: zczj, title: 注册资金, align:center},{field: yyzzzch, title: 营业执照, align:center},{field: khyh, title: 开户行, align:center},{field: khzh, title: 开户账号, align:center},{field: gsdjh, title: 国税, align:center},{field: dsdjh, title: 地税, align:center},{field: createDate, title: 创建时间, align:center},{field: updateDate, title: 更新时间, align:center},{title: 操作, templet:#customerListBar,fixed:right,align:center, minWidth:150}]]});});
客户信息多条件查询事件添加
客户信息数据表格数据展示成功后,接下来考虑添加多条件查询点击事件,这里使用layui表格reload重载基础方法实现，点击这里参考官网介绍。
script type=text/html id=toolbarDemop>class=layui-btn-containera class=layui-btn layui-btn-normal addNews_btn lay-event=addi class=layui-icon#xe608;/i添加/aa class=layui-btn layui-btn-normallay-event=linki class=layui-icon#xe608;/i联系人管理/aa class=layui-btn layui-btn-normal addNews_btn lay-event=recodei class=layui-icon#xe608;/i交往记录/aa class=layui-btn layui-btn-normal addNews_btn lay-event=orderi class=layui-icon#xe608;/i订单查看/a/p>/script
customer.js 添加搜索点击事件
// 多条件搜索$(.search_btn).on(click,function(){table.reload(customerListTable,{page: {curr: 1 //重新从第 1 页开始},where: {cusName: $(input[name=name]).val(),//客户名cusNo: $(input[name=khno]).val(),//客户编号level: $(#level).val()//客户等级}})});
搜索效果
客户管理数据添加机会管理后端添加机会数据添加实现思路
/*** 1.参数校验*客户名称 name 非空不可重复*phone 联系电话非空格式符合规范*法人非空* 2.默认值设置*isValidstatecteaetDateupdadteDate*khno 系统生成 唯一(uuid| 时间戳 | 年月日时分秒雪花算法)*3.执行添加判断结果*/
机会数据添加核心代码
@Transactional(propagation = Propagation.REQUIRED)public void saveCustomer(Customer customer){checkParams(customer.getName(),customer.getPhone(),customer.getFr());AssertUtil.isTrue(null!=customerMapper.queryCustomerByName(customer.getName()),该客户已存在!);customer.setIsValid(1);customer.setState(0);customer.setCreateDate(new Date());customer.setUpdateDate(new Date());String khno = KH_+new SimpleDateFormat(yyyyMMddHHmmss).format(new Date());customer.setKhno(khno);AssertUtil.isTrue(insertSelective(customer)1,客户添加失败!);}private void checkParams(String name, String phone, String fr) {AssertUtil.isTrue(StringUtils.isBlank(name),请指定客户名称!);AssertUtil.isTrue(!(PhoneUtil.isMobile(phone)),手机号格式非法！);AssertUtil.isTrue(StringUtils.isBlank(fr),请指定公司法人!);}
客户管理数据添加后端页面转发添加方法调用
对于机会数据添加与更新表单页可以实现共享,这里在转发机会数据添加与更新页面时共用一套代码即可(考虑更新时涉及到机会数据显示操作，这里根据机会id查询机会记录并放入到请求域中)。
@RequestMapping(addOrUpdateSaleChancePage)public String addOrUpdateSaleChancePage(Integer id,Model model){model.addAttribute(customer,customerService.selectByPrimaryKey(id)) ;return customer/add_update;}@RequestMapping(save)@ResponseBodypublic ResultInfo saveCustomer(Customer customer){customerService.saveCustomer(customer);return success(客户添加成功);}
客户管理添加前台模板与核心js客户数据添加工具栏事件
这里对于对话框打开方法代码请参考官网页面
//头工具栏事件table.on(toolbar(customers), function(obj){var checkStatus = table.checkStatus(obj.config.id);switch(obj.event){case add:openAddOrUpdateCustomerDialog();break;};}); // 打开添加客户数据页面function openAddOrUpdateCustomerDialog(id){var url=ctx+/customer/addOrUpdateSaleChancePage;var title=客户管理-添加;if(id){url = url+?id=+id;title=客户管理-更新;}layui.layer.open({title : title,type : 2,area:[700px,500px],maxmin:true,content : url});}
add_update.ftl 表单模板文件
views/customer目录下添加add_update.ftl 表单模板
!DOCTYPE htmlhtmlhead#include ../common.ftl/headbody class=childrenBodyform class=layui-form style=width:80%;input name=id type=hidden value=${(customer.id)!}/p> class=layui-form-item layui-rowp> class=layui-col-xs6label class=layui-form-label客户名称/labelp> class=layui-input-blockinput type=text class=layui-inputname=name id=namelay-verify=required value=${(customer.name)!} placeholder=请输入客户名/p>/p>p> class=layui-col-xs6label class=layui-form-label法人/labelp> class=layui-input-blockinput type=text class=layui-inputname=fr id=fr lay-verify=required value=${(customer.fr)!} placeholder=请输入法人/p>/p>/p>p> class=layui-form-item layui-rowp> class=layui-col-xs6label class=layui-form-label区域/labelp> class=layui-input-blockinput type=text class=layui-inputname=arealay-verify=requiredvalue=${(customer.area)!} placeholder=请输入区域/p>/p>p> class=layui-col-xs6label class=layui-form-label客户经理/labelp> class=layui-input-blockinput type=text class=layui-inputname=cusManager value=${(customer.cusManager)!} placeholder=请输入客户经理/p>/p>/p>p> class=layui-form-item layui-rowp> class=layui-col-xs6label class=layui-form-label客户级别/labelp> class=layui-input-blockselect name=levelid=leveloption value= 请选择/optionoption value=普通客户普通客户/optionoption value=重点开发客户 重点开发客户/optionoption value=大客户 大客户/optionoption value=合作伙伴 合作伙伴/option/select/p>/p>p> class=layui-col-xs6label class=layui-form-label信用度/labelp> class=layui-input-blockinput type=text class=layui-inputname=xyd value=${(customer.xyd)!}placeholder=请输入客户信用级别/p>/p>/p>p> class=layui-form-item layui-rowp> class=layui-col-xs6label class=layui-form-label邮编/labelp> class=layui-input-blockinput type=text class=layui-inputname=postCode value=${(customer.postCode)!}placeholder=请输入客户邮编/p>/p>p> class=layui-col-xs6label class=layui-form-label联系电话/labelp> class=layui-input-blockinput type=text class=layui-inputname=phone value=${(customer.phone)!}placeholder=请输入客户联系电话/p>/p>/p>p> class=layui-form-item layui-rowp> class=layui-col-xs6label class=layui-form-label客户地址/labelp> class=layui-input-blockinput type=text class=layui-inputname=address value=${(customer.address)!}placeholder=请输入客户地址/p>/p>p> class=layui-col-xs6label class=layui-form-label传真/labelp> class=layui-input-blockinput type=text class=layui-inputname=fax value=${(customer.fax)!}placeholder=请输入客户传真/p>/p>/p>p> class=layui-form-item layui-rowp> class=layui-col-xs6label class=layui-form-label网站/labelp> class=layui-input-blockinput type=text class=layui-inputname=webSite value=${(customer.webSite)!}placeholder=请输入客户网站地址/p>/p>p> class=layui-col-xs6label class=layui-form-label注册资金/labelp> class=layui-input-blockinput type=text class=layui-inputname=zczj value=${(customer.zczj)!}placeholder=请输入注册资金/p>/p>/p>p> class=layui-form-item layui-rowp> class=layui-col-xs6label class=layui-form-label开户行/labelp> class=layui-input-blockinput type=text class=layui-inputname=khyh value=${(customer.khyh)!}placeholder=请输入客户开户行/p>/p>p> class=layui-col-xs6label class=layui-form-label开户账号/labelp> class=layui-input-blockinput type=text class=layui-inputname=khzh value=${(customer.khzh)!}placeholder=请输入开户账号/p>/p>/p>p> class=layui-form-item layui-rowp> class=layui-col-xs6label class=layui-form-label国税/labelp> class=layui-input-blockinput type=text class=layui-inputname=gsdjh value=${(customer.gsdjh)!}placeholder=请输入国税/p>/p>p> class=layui-col-xs6label class=layui-form-label地税/labelp> class=layui-input-blockinput type=text class=layui-inputname=dsdjh value=${(customer.dsdjh)!}placeholder=请输入地税/p>/p>/p>p> class=layui-form-item layui-rowp> class=layui-col-xs6label class=layui-form-label年营业额/labelp> class=layui-input-blockinput type=text class=layui-inputname=nyye value=${(customer.nyye)!}placeholder=请输入客户年营业额/p>/p>/p>br/p> class=layui-form-item layui-row layui-col-xs12p> class=layui-input-blockbutton class=layui-btn layui-btn-lg lay-submit=lay-filter=addOrUpdateCustomer确认/buttonbutton class=layui-btn layui-btn-lg layui-btn-normal取消/button/p>/p>/formscript type=text/javascript src=${ctx}/static/js/customer/add.update.js/script/body/html
add.update.js 文件添加
js/customer目录下添加add.update.js 文件,完成机会数据添加与更新表单提交操作
layui.use([form, layer], function () {var form = layui.form,layer = parent.layer === undefined ? layui.layer : top.layer,$ = layui.jquery;form.on(submit(addOrUpdateCustomer), function (data) {var index = top.layer.msg(数据提交中，请稍候, {icon: 16, time: false, shade: 0.8});//弹出loadingvar url=ctx + /customer/save;if($(input[name=id]).val()){url=ctx + /customer/update;}$.post(url, data.field, function (res) {if (res.code == 200) {setTimeout(function () {top.layer.close(index);top.layer.msg(操作成功！);layer.closeAll(iframe);//刷新父页面parent.location.reload();}, 500);} else {layer.msg(res.msg, {icon: 5});}});return false;});});
客户信息数据更新客户信息数据后端更新客户信息后端更新实现思路
/*** 1.参数校验*记录存在校验*客户名称 name 非空不可重复*phone 联系电话非空格式符合规范*法人非空* 2.默认值设置*updadteDate*3.执行更新判断结果*/
客户信息数据更新核心代码
@Transactional(propagation = Propagation.REQUIRED)public void updateCustomer(Customer customer){ AssertUtil.isTrue(null==customer.getId()||null==selectByPrimaryKey(customer.getId()),待更新记录不存在!);checkParams(customer.getName(),customer.getPhone(),customer.getFr());Customer temp =customerMapper.queryCustomerByName(customer.getName());AssertUtil.isTrue(null !=temp!(temp.getId().equals(customer.getId())),该客户已存在!);customer.setUpdateDate(new Date());AssertUtil.isTrue(updateByPrimaryKeySelective(customer)1,客户更新失败!);}
客户信息数据更新后端页面转发更新方法调用
这里客户信息数据更新页面视图与添加操作实现视图代码共用。
@RequestMapping(update)@ResponseBodypublic ResultInfo updateCustomer(Customer customer){customerService.updateCustomer(customer);return success(客户更新成功);}
客户信息数据前端模板与核心js客户信息数据表格行监听事件添加
sale.chance.js
表格添加行监听事件,行监听事件参考这里
/*** 行监听*/table.on(tool(customers), function(obj){var layEvent = obj.event;if(layEvent === edit) {openAddOrUpdateCustomerDialog(obj.data.id);}}); // 打开添加客户数据页面function openAddOrUpdateCustomerDialog(id){var url=ctx+/customer/addOrUpdateSaleChancePage;var title=客户管理-添加;if(id){url = url+?id=+id;title=客户管理-更新;}layui.layer.open({title : title,type : 2,area:[700px,500px],maxmin:true,content : url});}
客户信息管理数据删除客户信息数据后端删除
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EEjdZB6v-1612166184684)(images\image-20200227221545509.jpg)]
客户信息后端删除核心代码
CustomerService.java
@Transactional(propagation = Propagation.REQUIRED)public void deleteCustomer(Integer cid){Customer customer= selectByPrimaryKey(cid);AssertUtil.isTrue(null==cid||null==cid,待删除记录不存在!);/*** 如果客户被删除*级联 客户联系人 客户交往记录 客户订单被删除** 如果客户被删除*如果子表存在记录不支持删除*/customer.setIsValid(0);AssertUtil.isTrue(updateByPrimaryKeySelective(customer)1,客户删除失败!);}
CustomerController.java
@RequestMapping(delete)@ResponseBodypublic ResultInfo deleteCustomer(Integer id){customerService.deleteCustomer(id);return success(客户删除成功);}
客户信息删除前端核心js
行监听添加删除事件
/*** 行监听*/table.on(tool(customers), function(obj){var layEvent = obj.event;if(layEvent === edit) {openAddOrUpdateCustomerDialog(obj.data.id);}else if(layEvent === del) {layer.confirm(确定删除当前数据？, {icon: 3, title: 客户管理}, function (index) {$.post(ctx+/customer/delete,{id:obj.data.id},function (data) {if(data.code==200){layer.msg(操作成功！);tableIns.reload();}else{layer.msg(data.msg, {icon: 5});}});})}});
客户订单查看客户订单数据查询客户订单页面效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rPYIee2m-1612166184685)(images\image-20200227222856436.jpg)]
客户订单展示前端js 事件添加
当点击订单查看时,此时添加客户信息表头工具栏事件
//头工具栏事件table.on(toolbar(customers), function(obj){var checkStatus = table.checkStatus(obj.config.id);switch(obj.event){case add:openAddOrUpdateCustomerDialog();break;case order:openOrderInfoDialog(checkStatus.data);break;};});// 打开订单查看页面function openOrderInfoDialog(datas) {if(datas.length==0){layer.msg(请选择待查看订单对应客户!, {icon: 5});return;}if(datas.length1){layer.msg(暂不支持批量查看!, {icon: 5});return;}var url=ctx+/customer/orderInfoPage?cid=+datas[0].id;layui.layer.open({title : 客户管理-订单信息展示,type : 2,area:[700px,500px],maxmin:true,content : url});}
客户信息管理控制器添加页面转发方法
@RequestMapping(orderInfoPage)public String showOrderInfo(Integer cid, Model model){model.addAttribute(customer,customerService.selectByPrimaryKey(cid));return customer/customer_order;}
客户订单列表查询后端实现
CustomerOrderMapper.xml
select id=selectByParams parameterType=com.xxxx.crm.query.CustomerOrderQueryresultType=com.xxxx.crm.vo.CustomerOrderselectinclude refid=Base_Column_List/from t_customer_orderwhereis_valid=1 and cus_id=#{cid}if test=null != orderNo and orderNo !=and order_no=#{orderNo}/ifif test=null !=stateand state=#{state}/if/where/select
CustomerOrderController.java
@RequestMapping(list)@ResponseBodypublic MapString,ObjectqueryCustomerOrdersByParams(CustomerOrderQuery customerOrderQuery){return customerOrderService.queryByParamsForTable(customerOrderQuery);
以上就是（Crm-客户管理）全部内容，收藏起来下次访问不迷路！
