CRM

1. 学习目标

2. 营销管理表结构分析

3. 营销机会管理功能实现

3.1. 准备工作

3.1.1. 生成代码

通过 mybatis-generator 生成代码。能够生成 JavaBean对象、mapper 映射文件以及 mapper 接口。

<table tableName="t_sale_chance" domainObjectName="SaleChance"enableCountByExample="false" enableUpdateByExample="false"enableDeleteByExample="false" enableSelectByExample="false" selectByExampleQueryId="false"></table>

3.1.2. IDEA创建MYSQL链接

点击右侧的菜单栏 “DataBase”

3.2. 营销机会数据查询

3.2.1. 页面效果

3.2.2. 后端代码实现

layui 框架通过表格展示后端表数据，数据格式见官网测试数据地址。

3.2.2.1. 查询条件

SaleChanceQuery.java

在 crm 包下创建 query 包，新建 SaleChanceQuery.java 查询类，设置对应的查询条件

package com.xxxx.crm.query;import com.xxxx.crm.base.BaseQuery;/*** 营销机会管理多条件查询条件*/
public class SaleChanceQuery extends BaseQuery {private String customerName; // 客户名称private String createMan; // 创建人private String state; // 分配状态public String getCustomerName() {return customerName;}public void setCustomerName(String customerName) {this.customerName = customerName;}public String getCreateMan() {return createMan;}public void setCreateMan(String createMan) {this.createMan = createMan;}public String getState() {return state;}public void setState(String state) {this.state = state;}
}

3.2.2.2. 设置SQL

SaleChanceMapper.xml

<!--多条件分页查询数据--><select id="queryByParams" parameterType="com.xxxx.crm.query.SaleChanceQuery" resultType="saleChance">select*fromt_sale_chance<where>is_valid = 1<if test="customerName != null and customerName != ''">and  customer_name like concat("%",#{customerName},"%")</if><if test="createMan != null and createMan != ''">and  create_man = #{createMan}</if><if test="state != null and state != ''">and  state = #{state}</if></where></select>

3.2.2.3. 接口定义

SaleChanceMapper.java

package com.xxxx.crm.dao;import com.xxxx.crm.base.BaseMapper;
import com.xxxx.crm.query.SaleChanceQuery;
import com.xxxx.crm.vo.SaleChance;import java.util.List;
import java.util.Map;public interface SaleChanceMapper extends BaseMapper<SaleChance,Integer> {//多条件分页查询数据public List<SaleChance> queryByParams(SaleChanceQuery query);//查询所有销售人员数据//public List<Map<String,Object>> queryAllSales();
}

3.2.2.4. Service

SaleChanceService.java

package com.xxxx.crm.service;import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.xxxx.crm.base.BaseService;
import com.xxxx.crm.dao.SaleChanceMapper;
import com.xxxx.crm.query.SaleChanceQuery;
import com.xxxx.crm.utils.AssertUtil;
import com.xxxx.crm.utils.PhoneUtil;
import com.xxxx.crm.vo.SaleChance;
import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Service;import javax.annotation.Resource;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;@Service
public class SaleChanceService extends BaseService<SaleChance,Integer> {@Resourceprivate SaleChanceMapper saleChanceMapper;/*** 多条件查询数据* @param saleChanceQuery* @return*/public Map<String, Object> queryByParams(SaleChanceQuery saleChanceQuery){Map<String, Object> map = new HashMap<>();//开启分页PageHelper.startPage(saleChanceQuery.getPage(),saleChanceQuery.getLimit());List<SaleChance> saleChances = saleChanceMapper.queryByParams(saleChanceQuery);//按照分页条件，格式化数据PageInfo<SaleChance> saleChancePageInfo = new PageInfo<>(saleChances);map.put("code",0);map.put("msg","");map.put("count",saleChancePageInfo.getTotal());map.put("data",saleChancePageInfo.getList());return map;}
}

3.2.2.5. Controller

SaleChanceController.java

package com.xxxx.crm.controller;import com.xxxx.crm.base.BaseController;
import com.xxxx.crm.base.ResultInfo;
import com.xxxx.crm.query.SaleChanceQuery;
import com.xxxx.crm.service.SaleChanceService;
import com.xxxx.crm.utils.AssertUtil;
import com.xxxx.crm.utils.CookieUtil;
import com.xxxx.crm.vo.SaleChance;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import java.util.List;
import java.util.Map;@Controller
@RequestMapping("sale_chance")
public class SaleChanceController extends BaseController {@Resourceprivate SaleChanceService saleChanceService;/*** 多条件分页查询数据* @param saleChanceQuery* @return*/@GetMapping("list")@ResponseBodypublic Map<String, Object> queryByParams(SaleChanceQuery saleChanceQuery){return saleChanceService.queryByParams(saleChanceQuery);}
}

3.2.2.6. 时间格式化

在 SaleChance 实体类中的时间字段上添加注解，用来格式化时间

@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8") 
private Date assignTime; 
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8") 
private Date createDate;
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
private Date updateDate;

3.2.3. 前端核心代码

3.2.3.1. 页面模板

在 resources/views/saleChance 目录创建 sale_chance.ftl 模块文件，模板内容如下 (模板依赖的 layui

文件由 common.ftl 文件提供)，layui 表格数据展示模板文件实现参考该地址。

sale_chance.ftl

<!DOCTYPE html>
<html>
<head><title>营销机会管理</title><#include "../common.ftl">
</head>
<body class="childrenBody"><form class="layui-form" ><blockquote class="layui-elem-quote quoteBox"><form class="layui-form"><div class="layui-inline"><div class="layui-input-inline"><input type="text" name="customerName" class="layui-input searchVal" placeholder="客户名" /></div><div class="layui-input-inline"><input type="text" name="createMan" class="layui-inputsearchVal" placeholder="创建人" /></div><div class="layui-input-inline"><select name="state"  id="state"><option value="" >分配状态</option><option value="0">未分配</option><option value="1" >已分配</option></select></div><a class="layui-btn search_btn" id="btnSearch" data-type="reload"><i class="layui-icon">&#xe615;</i> 搜索</a></div></form></blockquote><!-- 数据表格 --><table id="saleChanceList" class="layui-table"  lay-filter="saleChances"></table><#--头部工具栏--><script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><a class="layui-btn layui-btn-normal addNews_btn" lay-event="add"><i class="layui-icon">&#xe608;</i>添加</a><a class="layui-btn layui-btn-normal delNews_btn" lay-event="del"><i class="layui-icon">&#xe608;</i>删除</a></div></script><!--操作 行工具栏--><script id="saleChanceListBar" type="text/html"><a class="layui-btn layui-btn-xs" id="edit" lay-event="edit">编辑</a><a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a></script></form><script type="text/javascript" src="${ctx}/js/saleChance/sale.chance.js"></script>
</body>
</html>

3.2.3.2. 页面入口

点击左侧的菜单，进入对应的页面

SaleChanceController 后台设置对应的接口

 /*** 打开营销机会管理页面* @return*/@GetMapping("index")public String index(){return "saleChance/sale_chance";}

3.2.3.3. 核心 JS

public/js/saleChance 目录下创建 sale.chance.js 文件，初始化 layui 表格数据，layui 表格数据展示模

板文件实现参考该地址。

sale.chance.js

layui.use(['table','layer'],function(){var layer = parent.layer === undefined ? layui.layer : top.layer,$ = layui.jquery,table = layui.table;/*** 营销机会列表展示*/var  tableIns = table.render({  //返回表格渲染的唯一标识elem: '#saleChanceList', // 表格绑定的IDurl : ctx + '/sale_chance/list', // 访问数据的地址cellMinWidth : 95,page : true, // 开启分页height : "full-125",limits : [10,15,20,25],limit : 10,toolbar: "#toolbarDemo",id : "saleChanceListTable",cols : [[{type: "checkbox", fixed:"center"},{field: "id", title:'编号',fixed:"true"},{field: 'chanceSource', title: '机会来源',align:"center"},{field: 'customerName', title: '客户名称',  align:'center'},{field: 'cgjl', title: '成功几率', align:'center'},{field: 'overview', title: '概要', align:'center'},{field: 'linkMan', title: '联系人',  align:'center'},{field: 'linkPhone', title: '联系电话', align:'center'},{field: 'description', title: '描述', align:'center'},{field: 'createMan', title: '创建人', align:'center'},{field: 'createDate', title: '创建时间', align:'center'},{field: 'uname', title: '指派人', align:'center'},{field: 'assignTime', title: '分配时间', align:'center'},{field: 'state', title: '分配状态', align:'center',templet:function(d){return formatterState(d.state);}},{field: 'devResult', title: '开发状态', align:'center',templet:function (d) {return formatterDevResult(d.devResult);}},{title: '操作', templet:'#saleChanceListBar',fixed:"right",align:"center", minWidth:150}]]});/*** 格式化分配状态*  0 - 未分配*  1 - 已分配*  其他 - 未知* @param state* @returns {string}*/function formatterState(state){if(state==0) {return "<div style='color: yellow'>未分配</div>";} else if(state==1) {return "<div style='color: green'>已分配</div>";} else {return "<div style='color: red'>未知</div>";}}/*** 格式化开发状态*  0 - 未开发*  1 - 开发中*  2 - 开发成功*  3 - 开发失败* @param value* @returns {string}*/function formatterDevResult(value){if(value == 0) {return "<div style='color: yellow'>未开发</div>";} else if(value==1) {return "<div style='color: #00FF00;'>开发中</div>";} else if(value==2) {return "<div style='color: #00B83F'>开发成功</div>";} else if(value==3) {return "<div style='color: red'>开发失败</div>";} else {return "<div style='color: #af0000'>未知</div>"}}});

这里涉及到 layui 列值格式化问题，机会数据分配状态与机会数据开发结果格式化实现参考官网

template 模板使用介绍。

3.2.3.4. 多条件查询

表格数据展示成功后，接下来考虑添加多条件查询点击事件，这里使用 layui 表格 reload 重载基础方法

实现，点击这里参考官网介绍

sale_chance.ftl

<a class="layui-btn search_btn" id="btnSearch" data-type="reload"><i class="layui-icon">&#xe615;</i> 搜索</a>

sale.chance.js 添加搜索点击事件

//这里以搜索为例$("#btnSearch").click(function (){tableIns.reload({where: { //设定异步数据接口的额外参数，任意设customerName:$('[name="customerName"]').val(),createMan:$('[name="createMan"]').val(),state:$('[name="state"]').val()},page: {curr: 1 //重新从第 1 页开始}});});

3.3. 营销机会数据添加

3.3.1. 后端代码实现

3.3.1.1. 实现思路

      添加数据1.校验参数customerName   客户名称 非空linkMan       联系人   非空linkPhone      手机号码 非空  手机号11位正则校验2.设置默认值is_valid     数据有效   0无效 1有效create_date  数据创建时间update_date  数据修改时间create_man   数据的创建人  当前登录用户（交给controller层从cookie获取）直接设置到 salechance对象中判断用户是否设置了分配人如果分配了assign_man   分配人assign_time  分配时间state        已分配 分配状态  0未分配 1已分配dev_result   开发中 开发状态  0-未开发 1-开发中 2-开发成功 3-开发失败如果未分配state        未分配 分配状态  0未分配 1已分配dev_result   未开发 开发状态  0-未开发 1-开发中 2-开发成功 3-开发失败3.执行添加操作，判断是否添加成功

3.3.1.2. 核心代码

SaleChanceService.java

public void addSlaChance(SaleChance saleChance){//校验参数checkParams(saleChance.getCustomerName(),saleChance.getLinkMan(),saleChance.getLinkPhone());//设置默认值saleChance.setIsValid(1);saleChance.setUpdateDate(new Date());saleChance.setCreateDate(new Date());//判断用户是否设置了分配人if(StringUtils.isBlank(saleChance.getAssignMan())){//未分配状态saleChance.setState(0);saleChance.setDevResult(0);}else{//分配了人员saleChance.setAssignTime(new Date());saleChance.setState(1);saleChance.setDevResult(1);}//执行添加操作，判断是否添加成功AssertUtil.isTrue(saleChanceMapper.insertSelective(saleChance) < 1,"营销机会数据添加失败");}/*** 校验添加数据customerName   客户名称 非空*          linkMan       联系人   非空*          linkPhone      手机号码 非空  手机号11位正则校验* @param customerName* @param linkMan* @param linkPhone*/private void checkParams(String customerName, String linkMan, String linkPhone) {AssertUtil.isTrue(StringUtils.isBlank(customerName),"客户名称不能为空");AssertUtil.isTrue(StringUtils.isBlank(linkMan),"联系人不能为空");AssertUtil.isTrue(StringUtils.isBlank(linkPhone),"手机号码不能为空");//校验手机号是否符合规范AssertUtil.isTrue(!PhoneUtil.isMobile(linkPhone),"手机号不符合规范");}

3.3.1.3. 方法调用

SaleChanceController.java

 /*** 添加数据* @return*/@PostMapping("save")@ResponseBodypublic ResultInfo save(HttpServletRequest request, SaleChance saleChance){//获取创建人String userName = CookieUtil.getCookieValue(request, "userName");saleChance.setCreateMan(userName);saleChanceService.addSlaChance(saleChance);return success();}

3.3.1.4. 页面转发

对于机会数据添加与更新表单页可以实现共享，这里在转发机会数据添加与更新页面时共用一套代码即

可 (考虑更新时涉及到机会数据显示操作，这里根据机会id查询机会记录并放入到请求域中)。

@RequestMapping("toAddUpdatePage")public String toAddUpdatePage(){//如果是修改操作那么需要将修改的数据映射在页面中return "saleChance/add_update";}

3.3.2. 前端核心代码

3.3.2.1. 页面效果

点击"添加"按钮，打开对应的对话框

3.3.2.2. 页面模板

views/saleChance 目录下添加 add_update.ftl 页面模板

<!DOCTYPE html>
<html>
<head><#include "../common.ftl">
</head>
<body class="childrenBody">
<form class="layui-form" style="width:80%;"><input type="hidden" name="id" id="hidId" value="${(saleChance.id)!}"><input type="hidden" id="assignId" value="${(saleChance.assignMan)!}"><#--获取当前数据的指派人id--><div class="layui-form-item layui-row layui-col-xs12"><label class="layui-form-label">客户名称</label><div class="layui-input-block"><input type="text" class="layui-input" lay-verify="required"name="customerName" id="customerName"  value="${(saleChance.customerName)!}" placeholder="请输入客户名称"></div></div><div class="layui-form-item layui-row layui-col-xs12"><label class="layui-form-label">机会来源</label><div class="layui-input-block"><input type="text" class="layui-input"  name="chanceSource"id="chanceSource" value="${(saleChance.chanceSource)!}" placeholder="请输入机会来源"></div></div><div class="layui-form-item layui-row layui-col-xs12"><label class="layui-form-label">联系人</label><div class="layui-input-block"><input type="text" class="layui-input" name="linkMan"lay-verify="required"  value="${(saleChance.linkMan)!}" placeholder="请输入联系人"></div></div><div class="layui-form-item layui-row layui-col-xs12"><label class="layui-form-label">联系电话</label><div class="layui-input-block"><input type="text" class="layui-input" lay-verify="phone"name="linkPhone" value="${(saleChance.linkPhone)!}" id="phone" placeholder="请输入联系电话"></div></div><div class="layui-form-item layui-row layui-col-xs12"><label class="layui-form-label">概要</label><div class="layui-input-block"><input type="text" class="layui-input"name="overview" value="${(saleChance.overview)!}" id="phone" placeholder="请输入概要"></div></div><div class="layui-form-item layui-row layui-col-xs12"><label class="layui-form-label">成功几率(%)</label><div class="layui-input-block"><input type="text" class="layui-input" name="cgjl" value="${(saleChance.cgjl)!}"placeholder="请输入成功几率"></div></div><div class="layui-form-item layui-row layui-col-xs12"><label class="layui-form-label">机会描述</label><div class="layui-input-block"><textarea placeholder="请输入机会描述信息" name="description" class="layui-textarea">${(saleChance.description)!}</textarea></div></div><div class="layui-form-item layui-row layui-col-xs12"><label class="layui-form-label">指派给</label><div class="layui-input-block"><select name="assignMan" id="assignMan"><option value="">请选择</option></select></div></div><br/><div class="layui-form-item layui-row layui-col-xs12"><div class="layui-input-block"><button class="layui-btn layui-btn-lg" lay-submit="" lay-filter="addOrUpdateSaleChance">确认</button><button class="layui-btn layui-btn-lg layui-btn-normal">取消</button></div></div>
</form>
<script type="text/javascript" src="${ctx}/js/saleChance/add.update.js"></script>
</body>
</html>

3.3.2.3. 工具栏事件

sale_chance.ftl

这里对于对话框打开方法代码，请参考官网页面。

 <#--头部工具栏--><script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><a class="layui-btn layui-btn-normal addNews_btn" lay-event="add"><i class="layui-icon">&#xe608;</i>添加</a><a class="layui-btn layui-btn-normal delNews_btn" lay-event="del"><i class="layui-icon">&#xe608;</i>删除</a></div></script>

sale_chancel.js

监听头部工具栏事件，参考官网页面。

/*** 监听表格的头部工具栏*///监听事件table.on('toolbar(saleChances)', function(obj){console.log(obj);switch(obj.event){case 'add':openAddOrUpdateDialog();//打开添加修改的窗口页面break;case 'del':layer.msg('删除');break;};});/*** 打开添加修改的窗口页面*/function openAddOrUpdateDialog(id){var title = "<h2>营销机会管理 - 机会添加</h2>";var url = ctx + "/sale_chance/toAddUpdatePage";//通过参数id判断目前是修改还是添加操作/*if(id){title = "<h2>营销机会管理 - 机会修改</h2>";url += "?id="+id;}*///打开修改添加页面layer.open({type:2,   //ifametitle:title,content: url,   //页面的内容area:['500px','620px'], //设置宽高maxmin:true //可以伸缩页面大小});}

3.3.2.4. 核心 JS

js/saleChance 目录下添加 add.update.js 文件，完成机会数据添加与更新表单提交操作。监听submit

提交，参考官网页面。

layui.use(['form','jquery','jquery_cookie'], function () {var form = layui.form,layer = layui.layer,$ = layui.jquery,$ = layui.jquery_cookie($);//加载下拉框  指派人/* $.post(ctx+"/sale_chance/queryAllSales",function (data){//获取下拉框var am = $("#assignMan");// <#--获取当前数据的指派人id-->var aid = $("#assignId").val();if(data != null){for(var i = 0; i < data.length; i++){//回显当前数据的指派人if(aid == data[i].id){var opt = "<option selected value="+data[i].id+">"+data[i].name+"</option>";}else{var opt = "<option value="+data[i].id+">"+data[i].name+"</option>";}am.append(opt);}}// 重新渲染下拉框内容layui.form.render("select");});*//*** 监听表单的提交*     on监听 submit事件*/form.on('submit(addOrUpdateSaleChance)',function (data){// 提交数据时的加载层 （/）var index = layer.msg("数据提交中,请稍后...",{icon:16, // 图标time:false, // 不关闭shade:0.8 // 设置遮罩的透明度});var url= ctx + "/sale_chance/save";//判断当前页面中是否有id值，如果有则是修改if($("#hidId").val()){url= ctx + "/sale_chance/update";}console.log(data.field);//发送请求$.post(url,data.field,function (data){if(data.code == 200){//关闭弹出框layer.close(index);//关闭iframe层layer.closeAll("iframe");//刷新父页面，将添加的新数据展示parent.location.reload();}else{layer.msg(data.msg,{icon:5})}});return false;//阻止表单提交})
});

3.3.2.5. 关闭弹出层

add_update.ftl

给按钮设置 id 属性值，通过 id 绑定点击事件

 <button class="layui-btn layui-btn-lg layui-btn-normal">取消</button>

add.update.js

/*** 关闭弹出层 */
$("#closeBtn").click(function () {// 先得到当前iframe层的索引 var index = parent.layer.getFrameIndex(window.name); // 再执行关闭 parent.layer.close(index);
});

3.4. 营销机会数据更新

3.4.1. 后端代码实现

3.4.1.1. 实现思路

 /*** 修改数据*      1.校验参数*          id属性是必须存在的，查询数据库校验*          customerName   客户名称 非空*          linkMan       联系人   非空*          linkPhone      手机号码 非空  手机号11位正则校验*      2.默认值*          update_date  修改时间**          判断是否指派了工作人员*              1.修改前没有分配人*                  修改后没有分配人*                      不做任何操作*                  修改后有分配人*                      dev_result  开发状态*                      assign_time 分配时间*                      state       分配状态**              2.修改前有分配人*                  修改后没有分配人*                      assign_time 分配时间 null*                      dev_result  开发状态*                      state       分配状态 0*                  修改后有分配人*                      判断更改后的人员和更改前的人员有没有变动*                          没有变动不做操作*                          有变动，assign_time最新的时间*     3.执行修改操作，判断是否修改成功** @param saleChance*/

3.4.1.2. 核心代码

SaleChanceService.java

public void updateSaleChance(SaleChance saleChance){//判断id是否存在AssertUtil.isTrue(saleChance.getId() == null,"数据异常，请重试");//校验非空参数checkParams(saleChance.getCustomerName(),saleChance.getLinkMan(),saleChance.getLinkPhone());//设置默认值saleChance.setUpdateDate(new Date());//通过现有的id查询修改之前的数据SaleChance dbSaleChance = saleChanceMapper.selectByPrimaryKey(saleChance.getId());AssertUtil.isTrue(dbSaleChance == null,"数据异常，请重试");//判断原有数据中是否有分配人if(StringUtils.isBlank(dbSaleChance.getAssignMan())){//进入当前判断说明修改前没有分配人//判断修改后是否有分配人if(!StringUtils.isBlank(saleChance.getAssignMan())){//修改后有分配人saleChance.setAssignTime(new Date());saleChance.setState(1);saleChance.setDevResult(1);}//修改后没有分配人，什么都不做}else{//进入当前判断说明修改前有分配人//判断修改后是否有分配人if(StringUtils.isBlank(saleChance.getAssignMan())){//修改后没有分配人saleChance.setAssignTime(null);saleChance.setState(0);saleChance.setDevResult(0);}else{//修改后有分配人//判断前后的分配人是否有变化if(!dbSaleChance.getAssignMan().equals(saleChance.getAssignMan())){//不是一个人，有变化saleChance.setAssignTime(new Date());}else{//相同的分配人  那么前台后台都没有设置分配的时间，那么结合刚修改的sql条件，那么原有的数据机会被更改saleChance.setAssignTime(new Date());}}}//执行修改操作AssertUtil.isTrue(saleChanceMapper.updateByPrimaryKeySelective(saleChance) < 1,"营销数据修改失败");}

3.4.1.3. 方法调用

这里机会数据更新与添加操作实现代码共用，修改原有的添加方法。

SaleChanceController.java

/*** 添加数据* @return*/@PostMapping("update")@ResponseBodypublic ResultInfo update(SaleChance saleChance){saleChanceService.updateSaleChance(saleChance);return success();}

3.4.1.4. 页面转发

SaleChanceController.java

/*** 打开营销机会修改/添加的页面* @return*//* @RequestMapping("toAddUpdatePage")public String toAddUpdatePage(){//如果是修改操作那么需要将修改的数据映射在页面中return "saleChance/add_update";}*/@RequestMapping("toAddUpdatePage")public String toAddUpdatePage(Integer id,HttpServletRequest request){//如果是修改操作那么需要将修改的数据映射在页面中if(id != null){SaleChance saleChance = saleChanceService.selectByPrimaryKey(id);AssertUtil.isTrue(saleChance == null,"数据异常，请重试");request.setAttribute("saleChance",saleChance);}return "saleChance/add_update";}

3.4.2. 前端核心代码

3.4.2.1. 页面效果

3.4.2.2. 表格行事件

sale_chance.ftl

<!--操作 行工具栏--><script id="saleChanceListBar" type="text/html"><a class="layui-btn layui-btn-xs" id="edit" lay-event="edit">编辑</a><a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a></script>

sale.chance.js

表格添加行监听事件，行监听事件参考这里。

 /*** 监听表格的行工具栏*///监听事件table.on('tool(saleChances)', function(obj){if(obj.event == "edit"){openAddOrUpdateDialog(obj.data.id);}});

openAddOrUpdateDialog方法参考数据添加操作。

/*** 打开添加修改的窗口页面*/function openAddOrUpdateDialog(id){var title = "<h2>营销机会管理 - 机会添加</h2>";var url = ctx + "/sale_chance/toAddUpdatePage";//通过参数id判断目前是修改还是添加操作if(id){title = "<h2>营销机会管理 - 机会修改</h2>";url += "?id="+id;}//打开修改添加页面layer.open({type:2,   //ifametitle:title,content: url,   //页面的内容area:['500px','620px'], //设置宽高maxmin:true //可以伸缩页面大小});}

add_update.ftl

在页面中通过EL表达式获取作用域中的数据。 value里面

<input type="text" class="layui-input" name="cgjl" value="${(saleChance.cgjl)!}"placeholder="请输入成功几率">

添加隐藏域，存放营销机会的ID

<input type="hidden" name="id" id="hidId" value="${(saleChance.id)!}">

3.4.2.3. 核心 JS

修改操作的 JS 与添加操作的可共用，通过隐藏域中存放的营销机会ID，来判断当前的操作行为。

/*** 监听表单的提交*     on监听 submit事件*/form.on('submit(addOrUpdateSaleChance)', function (data) {// 提交数据时的加载层 （/）var index = layer.msg("数据提交中,请稍后...", {icon: 16, // 图标time: false, // 不关闭shade: 0.8 // 设置遮罩的透明度});var url = ctx + "/sale_chance/save";//判断当前页面中是否有id值，如果有则是修改if ($("#hidId").val()) {url = ctx + "/sale_chance/update";}console.log(data.field);//发送请求$.post(url, data.field, function (data) {if (data.code == 200) {//关闭弹出框layer.close(index);//关闭iframe层layer.closeAll("iframe");//刷新父页面，将添加的新数据展示parent.location.reload();} else {layer.msg(data.msg, {icon: 5})}});return false;//阻止表单提交})

3.4.2.4. 加载下拉框

SaleChanceMapper.java

//查询所有销售人员数据public List<Map<String,Object>> queryAllSales();

SaleChanceMapper.xml.xml

 <!--查询所有销售人员--><select id="queryAllSales" resultType="map">SELECTu.id id,u.user_name nameFROMt_user uLEFT JOIN t_user_role ur ON ur.user_id = u.idLEFT JOIN t_role r ON ur.role_id = r.idWHEREu.is_valid = 1 and r.is_valid = 1 and role_name = "销售"</select>

SaleChanceService.java

 //查询所有销售人员public List<Map<String,Object>> queryAllSales(){return saleChanceMapper.queryAllSales();}

SaleChanceController.java

/*** 查询所有销售人员*/@PostMapping("queryAllSales")@ResponseBodypublic List<Map<String,Object>> queryAllSales(){return saleChanceService.queryAllSales();}

add_update.ftl

  <input type="hidden" id="assignId" value="${(saleChance.assignMan)!}"><#--获取当前数据的指派人id-->

add.update.js

//加载下拉框  指派人$.post(ctx+"/sale_chance/queryAllSales",function (data){//获取下拉框var am = $("#assignMan");// <#--获取当前数据的指派人id-->var aid = $("#assignId").val();if(data != null){for(var i = 0; i < data.length; i++){//回显当前数据的指派人if(aid == data[i].id){var opt = "<option selected value="+data[i].id+">"+data[i].name+"</option>";}else{var opt = "<option value="+data[i].id+">"+data[i].name+"</option>";}am.append(opt);}}// 重新渲染下拉框内容layui.form.render("select");});

显示指派人

修改查询的SQL语句（ SaleChanceMapper.xml ）

<select id="queryByParams" parameterType="com.xxxx.crm.query.SaleChanceQuery" resultType="saleChance">selectsc.*,u.user_name unamefromt_sale_chance scleft join t_user u on sc.assign_man = u.id<where>sc.is_valid = 1<if test="customerName != null and customerName != ''">and  customer_name like concat("%",#{customerName},"%")</if><if test="createMan != null and createMan != ''">and  create_man = #{createMan}</if><if test="state != null and state != ''">and  state = #{state}</if></where></select>

JavaBean中添加属性字段 ( SaleChance.java )

private String uname;// 指派人public String getUname() {return uname;}public void setUname(String uname) {this.uname = uname;}

3.5. 营销机会数据删除

3.5.1. 后端代码实现

3.5.1.1. 设置SQL

SaleChanceMapper.xml

这里机会数据支持数据批量删除操作，后端接收前端数组参数借助 mybatis 动态标签 foreach 实现记录

批量删除。

<!--批量删除--><update id="deleteBatch" >UPDATE t_sale_chanceSET is_valid = 0WHEREidIN<foreach collection="array" open="(" close=")" item="id" separator=",">#{id}</foreach></update>

3.5.1.2. 接口定义

在 BaseMapper 中定义了删除的方法，无须在 SaleChanceMapper 类中再定义。

/*** 批量删除* @param ids* @return*/public Integer deleteBatch(ID[] ids) throws DataAccessException;

3.5.1.3. Service

SaleChanceService.java

/*** 逻辑删除* @param ids*/@Transactionalpublic void deleteBatchs(Integer[] ids){AssertUtil.isTrue(ids == null || ids.length < 1,"未选中删除数据");saleChanceMapper.deleteBatch(ids);}

3.5.1.4. Controller

SaleChanceController.java

 /*** 逻辑删除* @param ids*/@RequestMapping("deleteBatch")@ResponseBodypublic ResultInfo deleteBatchs(Integer[] ids){saleChanceService.deleteBatchs(ids);return success("删除成功");}

3.5.2. 前端核心代码

3.5.2.1. 工具栏事件

sale_chance.ftl

    <#--头部工具栏--><script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><a class="layui-btn layui-btn-normal addNews_btn" lay-event="add"><i class="layui-icon">&#xe608;</i>添加</a><a class="layui-btn layui-btn-normal delNews_btn" lay-event="del"><i class="layui-icon">&#xe608;</i>删除</a></div></script>

sale_chancel.js

 /*** 监听表格的头部工具栏*///监听事件table.on('toolbar(saleChances)', function(obj){console.log(obj);switch(obj.event){case 'add':openAddOrUpdateDialog();//打开添加修改的窗口页面break;case 'del':layer.msg('删除');break;};});//批量删除function deleteBatch(data){//判断是否选中数据if(data.length == 0){layer.msg("请至少选中一条数据");return;}//向用户确认删除行为layer.confirm("您确定要删除选中的记录吗？",{btn:["确认","取消"],},function (index) {//关闭弹出框layer.close(index);//拼接后台需要的id数组  ids=1&ids=2var str = "ids=";for(var i = 0; i < data.length; i++){//判断是否是倒数第二个if(i < data.length - 1){str += data[i].id + "&ids=";}else{str += data[i].id;}}console.log(str);$.ajax({type:"post",url: ctx+"/sale_chance/deleteBatch",data:str,dataType:"json",success:function(data){if(data.code == 200){//刷新数据表格tableIns.reload();}else{layer.msg(data.msg,{icon:5})}}});})}/*** 打开添加修改的窗口页面*/function openAddOrUpdateDialog(id){var title = "<h2>营销机会管理 - 机会添加</h2>";var url = ctx + "/sale_chance/toAddUpdatePage";//通过参数id判断目前是修改还是添加操作if(id){title = "<h2>营销机会管理 - 机会修改</h2>";url += "?id="+id;}//打开修改添加页面layer.open({type:2,   //ifametitle:title,content: url,   //页面的内容area:['500px','620px'], //设置宽高maxmin:true //可以伸缩页面大小});}

3.5.2.2. 表格行事件

  <!--操作 行工具栏--><script id="saleChanceListBar" type="text/html"><a class="layui-btn layui-btn-xs" id="edit" lay-event="edit">编辑</a><a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a></script>

sale.chance.js

 /*** 监听表格的行工具栏*///监听事件table.on('tool(saleChances)', function(obj){if(obj.event == "edit"){openAddOrUpdateDialog(obj.data.id);}else if(obj.event == "del"){// 询问是否确认删除layer.confirm("确定要删除这条记录吗？", {icon: 3, title:"营销机会数据管理"}, function (index) {// 关闭窗口layer.close(index);// 发送ajax请求，删除记录$.ajax({type:"post",url: ctx + "/sale_chance/deleteBatch",data:{ids:obj.data.id},dataType:"json",success:function (result) {if (result.code == 200) {// 加载表格tableIns.reload();} else {layer.msg(result.msg, {icon: 5});}}});});}});

4. 客户开发计划功能实现

4.1. 开发计划数据查询

4.1.1. 页面效果

4.1.2. 后端代码实现

这里展示开发计划项数据为已分配给当前登录用户的营销机会数据后续对客户进行下一步的开发操

作，所以在数据展示上查询的机会数据分配状态为已分配状态。

4.1.2.1. 查询条件

SaleChanceQuery.java

新增分配人assignMan，开发状态devResult查询条件。

package com.xxxx.crm.query;import com.xxxx.crm.base.BaseQuery;/*** 营销机会管理多条件查询条件*/
public class SaleChanceQuery extends BaseQuery {private String customerName; // 客户名称private String createMan; // 创建人private String state; // 分配状态private Integer assignMan; //指派人private Integer devResult; //开发状态public Integer getAssignMan() {return assignMan;}public void setAssignMan(Integer assignMan) {this.assignMan = assignMan;}public Integer getDevResult() {return devResult;}public void setDevResult(Integer devResult) {this.devResult = devResult;}public String getCustomerName() {return customerName;}public void setCustomerName(String customerName) {this.customerName = customerName;}public String getCreateMan() {return createMan;}public void setCreateMan(String createMan) {this.createMan = createMan;}public String getState() {return state;}public void setState(String state) {this.state = state;}
}

4.1.2.2. 设置SQL

SaleChanceMapper.xml

查询语句中添加分配人与开发状态查询条件。

 <select id="queryByParams" parameterType="com.xxxx.crm.query.SaleChanceQuery" resultType="saleChance">selectsc.*,u.user_name unamefromt_sale_chance scleft join t_user u on sc.assign_man = u.id<where>sc.is_valid = 1<if test="customerName != null and customerName != ''">and  customer_name like concat("%",#{customerName},"%")</if><if test="createMan != null and createMan != ''">and  create_man = #{createMan}</if><if test="state != null and state != ''">and  state = #{state}</if><if test="assignMan != null">and  assign_man = #{assignMan}</if><if test="devResult != null">and  dev_result = #{devResult}</if></where></select>

4.1.2.3. Controller

SaleChanceController.java

添加开发计划项数据查询标识 flag，如果前端页面查询参数 flag=1，代表当前查询为开发计划数据，设

置查询分配人参数。

@GetMapping("list")@ResponseBodypublic Map<String, Object> queryByParams(SaleChanceQuery saleChanceQuery,Integer flag,HttpServletRequest request){//判断lfag参数是否存在区分 客户开发计划和营销机会的页面if(flag != null && flag == 1){int id = LoginUserUtil.releaseUserIdFromCookie(request);saleChanceQuery.setAssignMan(id);}return saleChanceService.queryByParams(saleChanceQuery);}

4.1.3. 前端核心代码

4.1.3.1. 页面模板

cus_dev_plan.ftl

views/cusDevPlan 目录下创建 cus_dev_plan.ftl 文件，展示已分配计划项列表数据，这里对于机

会数据展示行操作有两种状态

详情：机会数据已开发结束，点击详情展示计划项相关数据

开发：机会数据处于开发中，点击开发添加计划项数据

<!DOCTYPE html>
<html><head><title>客户开发计划管理</title><#include "../common.ftl"></head><body class="childrenBody"><form class="layui-form" ><blockquote class="layui-elem-quote quoteBox"><form class="layui-form" ><div class="layui-inline"><div class="layui-input-inline"><input type="text" name="customerName"class="layui-inputsearchVal" placeholder="客户名" /></div><div class="layui-input-inline"><input type="text" name="createMan" class="layui-inputsearchVal" placeholder="创建人" /></div><div class="layui-input-inline"><select name="devResult"  id="devResult"  ><option value="" >请选择</option><option value="0">未开发</option><option value="1" >开发中</option><option value="2" >开发成功</option><option value="3" >开发失败</option></select></div><a class="layui-btn search_btn" data-type="reload" id="btnSearch"><i class="layui-icon">&#xe615;</i> 搜索</a></div></form></blockquote><#--数据表格--><table id="saleChanceList" class="layui-table"  lay-filter="saleChances"></table><script type="text/html" id="toolbarDemo"></script><!--操作--><script id="op" type="text/html" >{{# if (d.devResult=== 0 || d.devResult==1) { }}<a href="javascript:;"  class="layui-btn layui-btn-warm layui-btn-xs"  lay-event="dev">开发</a>{{# } else { }}<a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-xs"  lay-event="info">详情</a>{{# } }}</script></form><script type="text/javascript" src="${ctx}/js/cusDevPlan/cus.dev.plan.js"></script></body>
</html>

4.1.3.2. 页面入口

点击左侧的菜单，进入对应的页面

<dd><a href="javascript:;" class="layui-menu-tips" data-type="tabAdd" data-tab-mpi="m-p-i-2" data-tab="cus_dev_plan/index" target="_self"><i class="fa fa-ellipsis-h"></i><span class="layui-left-nav"> 客户开发计划</span></a></dd>

CusDevPlanController 后台设置对应的接口

 @RequestMapping("index")public String toIndex(){return "cusDevPlan/cus_dev_plan";}

4.1.3.3. 核心 JS

js/cusDevPlan 目录下新建 cus.dev.plan.js 文件

cus.dev.plan.js

layui.use(['table','layer'],function(){var layer = parent.layer === undefined ? layui.layer : top.layer,$ = layui.jquery,table = layui.table;/*** 客户开发数据列表*/var  tableIns = table.render({elem: '#saleChanceList',url : ctx+'/sale_chance/list?flag=1&state=1',cellMinWidth : 95,page : true,height : "full-125",limits : [10,15,20,25],limit : 10,toolbar: "#toolbarDemo",id : "saleChanceListTable",cols : [[{type: "checkbox", fixed:"center"},{field: "id", title:'编号',fixed:"true"},{field: 'chanceSource', title: '机会来源',align:"center"},{field: 'customerName', title: '客户名称',  align:'center'},{field: 'cgjl', title: '成功几率', align:'center'},{field: 'overview', title: '概要', align:'center'},{field: 'linkMan', title: '联系人',  align:'center'},{field: 'linkPhone', title: '联系电话', align:'center'},{field: 'description', title: '描述', align:'center'},{field: 'createMan', title: '创建人', align:'center'},{field: 'createDate', title: '创建时间', align:'center'},{field: 'devResult', title: '开发状态', align:'center',templet:function (d) {return formatterDevResult(d.devResult);}},{title: '操作',fixed:"right",align:"center", minWidth:150,templet:"#op"}]]});/*** 格式化开发状态* @param value* @returns {string}*/function formatterDevResult(value){/*** 0-未开发* 1-开发中* 2-开发成功* 3-开发失败*/if(value==0){return "<div style='color: yellow'>未开发</div>";}else if(value==1){return "<div style='color: #00FF00;'>开发中</div>";}else if(value==2){return "<div style='color: #00B83F'>开发成功</div>";}else if(value==3){return "<div style='color: red'>开发失败</div>";}else {return "<div style='color: #af0000'>未知</div>"}}
});

列模板template对应的配置 cus_dev_plan.ftl

这里涉及的{{# }} 语法参考官网介绍

<!--操作--><script id="op" type="text/html" >{{# if (d.devResult=== 0 || d.devResult==1) { }}<a href="javascript:;"  class="layui-btn layui-btn-warm layui-btn-xs"  lay-event="dev">开发</a>{{# } else { }}<a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-xs"  lay-event="info">详情</a>{{# } }}</script>

4.1.3.4. 多条件查询

添加多条件查询点击事件

cus_dev_plan.ftl

</div><a class="layui-btn search_btn" data-type="reload" id="btnSearch"><i class="layui-icon">&#xe615;</i> 搜索
</a>

cus.dev.plan.js 添加搜索点击事件

 //数据表格重载$("#btnSearch").click(function (){tableIns.reload({where: { //设定异步数据接口的额外参数，任意设customerName:$('[name="customerName"]').val(),createMan:$('[name="createMan"]').val(),devResult:$('[name="devResult"]').val()},page: {curr: 1 //重新从第 1 页开始}});});

4.2. 营销机会数据开发与详情

<!--营销机会数据开发与详情--><table tableName="t_cus_dev_plan" domainObjectName="CusDevPlan"enableCountByExample="false" enableUpdateByExample="false"enableDeleteByExample="false" enableSelectByExample="false" selectByExampleQueryId="false"></table>

4.2.1. 行监听事件

cus_dev_plan.ftl

<!--操作-->
<script id="op" type="text/html" >{{# if (d.devResult=== 0 || d.devResult==1) { }}<a href="javascript:;"  class="layui-btn layui-btn-warm layui-btn-xs"  lay-event="dev">开发</a>{{# } else { }}<a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-xs"  lay-event="info">详情</a>{{# } }}
</script>

cus.dev.plan.js

/*** 监听表格的行工具栏*/table.on('tool(saleChances)', function(obj){if(obj.event == "dev"){openDevOrInfoDialog("计划项数据开发",obj.data.id);}else if(obj.event == "info"){openDevOrInfoDialog("计划项数据维护",obj.data.id);}});//打开客户开发计划的窗口function openDevOrInfoDialog(title,sId){layui.layer.open({title:title,type: 2,  //iframe层area:["750px","550px"],maxmin: true,content:ctx + "/cus_dev_plan/toCusDevPlanDataPage?sId="+sId});}

4.2.2. 视图转发方法

CusDevPlanController.java

前端点击开发|详情按钮，后端提供转发到开发计划项数据视图页面，转发时获取当前点击的机会数据的

id，便于在视图中显示机会数据信息。

 /*** 打开客户计划详情页* @param sId* @param request* @return*/@RequestMapping("toCusDevPlanDataPage")public String toCusDevPlanDataPage(Integer sId, HttpServletRequest request){AssertUtil.isTrue(sId == null,"数据异常，请重试");SaleChance saleChance = saleChanceService.selectByPrimaryKey(sId);//将数据存在作用域中if(saleChance != null){request.setAttribute("saleChance",saleChance);}return "cusDevPlan/cus_dev_plan_data";}

4.2.3. 视图添加

cus_dev_plan_data.ftl

在 views/cusDevPlan 目录下添加 cus_dev_plan_data.ftl 视图模板，显示机会数据与计划项列表数据。

这里是否显示视图中表格头工具栏与行按钮信息由机会数据开发状态决定。

<!DOCTYPE html>
<html><head><title>客户开发计划管理</title><#include "../common.ftl"></head><body class="childrenBody"><div class="layui-col-md12"><div class="layui-card"><div class="layui-card-body"><form class="layui-form" ><#-- 营销机会的ID --><input name="id" type="hidden" value="${(saleChance.id)!}"/><div class="layui-form-item layui-row"><div class="layui-col-xs6"><label class="layui-form-label">客户名称</label><div class="layui-input-block"><input type="text" class="layui-input"name="customerName" id="customerName"  value="${(saleChance.customerName)!}" readonly="readonly"></div></div><div class="layui-col-xs6"><label class="layui-form-label">机会来源</label><div class="layui-input-block"><input type="text" class="layui-input"name="chanceSource" id="chanceSource" value="${(saleChance.chanceSource)!}" readonly="readonly"></div></div></div><div class="layui-form-item layui-row"><div class="layui-col-xs6"><label class="layui-form-label">联系人</label><div class="layui-input-block"><input type="text" class="layui-input"name="linkMan"  lay-verify="required"  value="${(saleChance.linkMan)!}" readonly="readonly"></div></div><div class="layui-col-xs6"><label class="layui-form-label">联系电话</label><div class="layui-input-block"><input type="text" class="layui-input"lay-verify="phone" name="linkPhone" value="${(saleChance.linkPhone)!}" id="phone" readonly="readonly"></div></div></div><div class="layui-form-item layui-row"><div class="layui-col-xs6"><label class="layui-form-label">概要</label><div class="layui-input-block"><input type="text" class="layui-input"name="overview" value="${(saleChance.overview)!}" id="phone"  readonly="readonly"></div></div><div class="layui-col-xs6"><label class="layui-form-label">成功几率(%)</label><div class="layui-input-block"><input type="text" class="layui-input"name="cgjl" value="${(saleChance.cgjl)!}"  readonly="readonly"></div></div></div></form></div></div></div><#--数据表格--><div class="layui-col-md12"><table id="cusDevPlanList" class="layui-table"  lay-filter="cusDevPlans"></table></div><#-- 如果开发状态是 0=未开发 和 1=开发中，则显示头部工具栏和行工具栏 --><#if saleChance?? && saleChance.devResult==0 || saleChance.devResult==1><script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><a class="layui-btn layui-btn-normal addNews_btn" lay-event="add"><i class="layui-icon">&#xe608;</i>添加计划项</a><a class="layui-btn layui-btn-normal addNews_btn" lay-event="success"><i class="layui-icon">&#xe608;</i>开发成功</a><a class="layui-btn layui-btn-normal addNews_btn" lay-event="failed"><i class="layui-icon">&#xe608;</i>开发失败</a></div></script><!--操作--><script id="cusDevPlanListBar" type="text/html"><a class="layui-btn layui-btn-xs" id="edit" lay-event="edit">编辑</a><a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a></script></#if><script type="text/javascript" src="${ctx}/js/cusDevPlan/cus.dev.plan.data.js"></script></body>
</html>

4.2.3.1. 添加 JS 文件

cus.dev.plan.data.js

在 js/cusDevPlan 目录下添加 cus.dev.plan.data.js

layui.use(['table','layer'],function(){var layer = parent.layer === undefined ? layui.layer : top.layer,$ = layui.jquery,table = layui.table;/*** 计划项数据展示*/var  tableIns = table.render({elem: '#cusDevPlanList',url : ctx+'/cus_dev_plan/list?sId='+$('[name="id"]').val(),cellMinWidth : 95,page : true,height : "full-125",limits : [10,15,20,25],limit : 10,toolbar: "#toolbarDemo",id : "cusDevPlanListTable",cols : [[{type: "checkbox", fixed:"center"},{field: "id", title:'编号',fixed:"true"},{field: 'planItem', title: '计划项',align:"center"},{field: 'exeAffect', title: '执行效果',align:"center"},{field: 'planDate', title: '执行时间',align:"center"},{field: 'createDate', title: '创建时间',align:"center"},{field: 'updateDate', title: '更新时间',align:"center"},{title: '操作',fixed:"right",align:"center", minWidth:150,templet:"#cusDevPlanListBar"}]]});});

4.2.4. 计划项数据列表查询

4.2.4.1. 接口定义

CusDevPlanQuery.java 查询类定义

package com.xxxx.crm.query;import com.xxxx.crm.base.BaseQuery;public class CusDevPlanQuery extends BaseQuery {private Integer sId;public Integer getsId() {return sId;}public void setsId(Integer sId) {this.sId = sId;}
}

4.2.4.2. 设置SQL

CusDevPlanMapper.xml 核心 SQL 配置

<!--多条件分页查询客户计划表--><select id="queryByParams" parameterType="int" resultType="cusDevPlan">select*fromt_cus_dev_planwhereis_valid = 1andsale_chance_id = #{sId}</select>

4.2.4.3. Service

CusDevPlanService.java

/*多条件分页查询客户计划表*/public Map<String, Object> queryByParams(CusDevPlanQuery query){Map<String, Object> map = new HashMap<>();//开启分页PageHelper.startPage(query.getPage(),query.getLimit());List<CusDevPlan> cusDevPlans = cusDevPlanMapper.queryByParams(query);//按照分页条件，格式化数据PageInfo<CusDevPlan> cusDevPlanPageInfo = new PageInfo<>(cusDevPlans);map.put("code",0);map.put("msg","");map.put("count",cusDevPlanPageInfo.getTotal());map.put("data",cusDevPlanPageInfo.getList());return map;}

4.2.4.4. Controller

CusDevPlanController.java 列表方法

 /*多条件分页查询客户计划表*/@RequestMapping("list")@ResponseBodypublic Map<String, Object> queryByParams(CusDevPlanQuery query){return cusDevPlanService.queryByParams(query);}

4.3. 开发计划项添加与更新

4.3.1. 页面效果

4.3.2. 计划项添加

4.3.2.1. 实现思路

    /*** 添加数据*      1.数据校验*          saleChanceId   营销机会的id  非空 / 数据存在*          计划内容         非空*          计划时间         非空*      2.设置默认值*          is_valid     数据是否有效*          create_date*          update_date*      3.执行添加操作，判断*/

4.3.2.2. 核心代码

CusDevPlanService.java

@Transactionalpublic void addCusDevPan(CusDevPlan cusDevPlan){// 数据校验checkParams(cusDevPlan.getSaleChanceId(),cusDevPlan.getPlanItem(),cusDevPlan.getPlanDate());//设置默认值cusDevPlan.setIsValid(1);cusDevPlan.setCreateDate(new Date());cusDevPlan.setUpdateDate(new Date());//执行添加操作，判断AssertUtil.isTrue(cusDevPlanMapper.insertSelective(cusDevPlan) < 1,"计划添加失败");}/*** 校验添加和修改的数据*      saleChanceId   营销机会的id  非空 / 数据存在*      计划内容         非空*      计划时间         非空* @param saleChanceId* @param planItem* @param planDate*/private void checkParams(Integer saleChanceId, String planItem, Date planDate) {AssertUtil.isTrue(null == saleChanceId ||null == saleChanceMapper.selectByPrimaryKey(saleChanceId),"营销机会数据不存在");AssertUtil.isTrue(StringUtils.isBlank(planItem),"计划内容不能为空");AssertUtil.isTrue(null == planDate,"计划日期不能为空");}

CusDevPlanController.java

 /*** 计划项数据的添加* @param cusDevPlan* @return*/@PostMapping("save")@ResponseBodypublic ResultInfo addCusDevPan(CusDevPlan cusDevPlan){cusDevPlanService.addCusDevPan(cusDevPlan);return success("计划添加成功");}

4.3.3. 计划项更新

4.3.3.1. 实现思路

  /*** 修改数据*      1.数据校验*          计划项 id       非空/数据存在*          saleChanceId   营销机会的id  非空 / 数据存在*          计划内容         非空*          计划时间         非空*      2.设置默认值*          update_date*      3.执行添加操作，判断*/

4.3.3.2. 核心代码

CusDevPlanService.java

 @Transactionalpublic void updateCusDevPan(CusDevPlan cusDevPlan){AssertUtil.isTrue(cusDevPlan.getId() == null || null == cusDevPlanMapper.selectByPrimaryKey(cusDevPlan.getId()),"计划项数据异常");// 数据校验checkParams(cusDevPlan.getSaleChanceId(),cusDevPlan.getPlanItem(),cusDevPlan.getPlanDate());//设置默认值cusDevPlan.setUpdateDate(new Date());//执行添加操作，判断AssertUtil.isTrue(cusDevPlanMapper.updateByPrimaryKeySelective(cusDevPlan) < 1,"计划修改失败");}

CusDevPlanController.java

 @PostMapping("update")@ResponseBodypublic ResultInfo updateCusDevPan(CusDevPlan cusDevPlan){cusDevPlanService.updateCusDevPan(cusDevPlan);return success("计划修改成功");}

CusDevPlan.java

设置参数为Date类型时，想要传入的时间格式

 @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")@DateTimeFormat(pattern = "yyyy-MM-dd")private Date planDate;

4.3.4. 前端核心代码

4.3.4.1. 工具栏与行监听事件

cus.dev.plan.data.js

 /*** 监听头部工具栏*/table.on('toolbar(cusDevPlans)', function(obj){var checkStatus = table.checkStatus(obj.config.id);console.log(checkStatus.data);switch(obj.event){case 'add':addOrUpdateCusDevPlanDialog();break;case 'success':updateDevResult(2);break;case 'failed':updateDevResult(3);break;};});/*** 监听行工具栏*/table.on('tool(cusDevPlans)', function(obj){//编辑/修改功能if(obj.event == "edit"){addOrUpdateCusDevPlanDialog(obj.data.id);}else if(obj.event == "del"){// 询问用户是否确认删除layer.confirm("确定删除当前数据？", {icon:3, title:"开发计划管理"}, function (index) {$.post(ctx+"/cus_dev_plan/delete",{id:obj.data.id},function (data){if(data.code == 200){//关闭确认框layer.close(index);//刷新页面window.location.reload();//关闭// tableIns.reload();}else{layer.msg(data.msg,{icon:5});}});});}});//打开计划项修改添加窗口function addOrUpdateCusDevPlanDialog(id){//添加操作var title = "<h2>计划项管理-添加计划项</h2>";var url = ctx+"/cus_dev_plan/toAddOrUpdatePage?sId="+$('[name="id"]').val(); //jquery获取salechanceId//修改操作有id值if(id){title = "<h2>计划项管理-修改计划项</h2>";url += "&id="+id;}//通过layui iframe打开layer.open({type:2,title:title,content:url,maxmin:true,area:["500px","300px"]});}

4.3.4.2. 视图转发方法

CusDevPlanController.java

添加updateCusDevPan 转发计划项添加与更新表单页面

    /*** 转发跳转到计划数据项页面* @return*/@RequestMapping("toAddOrUpdatePage")public String updateCusDevPan(Integer id,Integer sId,HttpServletRequest request){//修改操作有idif(id != null){CusDevPlan cusDevPlan = cusDevPlanService.selectByPrimaryKey(id);AssertUtil.isTrue(null == cusDevPlan,"计划项数据异常请重试");request.setAttribute("cusDevPlan",cusDevPlan);}request.setAttribute("sId",sId);return "cusDevPlan/add_update";}

4.3.4.3. 页面

add_update.ftl

views/cusDevPlan 目录下添加 add_update.ftl 文件

<!DOCTYPE html>
<html><head><#include "../common.ftl"></head><body class="childrenBody"><form class="layui-form" style="width:80%;"><input name="id" type="hidden" value="${(cusDevPlan.id)!}"/><input name="saleChanceId" type="hidden" value="${sId!}"/><div class="layui-form-item layui-row layui-col-xs12"><label class="layui-form-label">计划项内容</label><div class="layui-input-block"><input type="text" class="layui-input userName" lay-verify="required" name="planItem"id="planItem" value="${(cusDevPlan.planItem)!}" placeholder="请输入计划项内容"></div></div><div class="layui-form-item layui-row layui-col-xs12"><label class="layui-form-label">计划时间</label><div class="layui-input-block"><#if (cusDevPlan.planDate)??><input type="date" class="layui-input userName" lay-verify="required" name="planDate"id="planDate" placeholder="请输入计划项时间" value="${(cusDevPlan.planDate)?string("yyyy-MM-dd")}" ><#else><input type="date" class="layui-input userName" lay-verify="required" name="planDate"id="planDate"  placeholder="请输入计划项时间"></#if></div></div><div class="layui-form-item layui-row layui-col-xs12"><label class="layui-form-label">执行效果</label><div class="layui-input-block"><input type="text" class="layui-input userEmail" lay-verify="required" name="exeAffect"value="${(cusDevPlan.exeAffect)!}" id="exeAffect" placeholder="请输入执行效果"></div></div><br/><div class="layui-form-item layui-row layui-col-xs12"><div class="layui-input-block"><button class="layui-btn layui-btn-lg" lay-submit="" lay-filter="addOrUpdateCusDevPlan">确认</button><button class="layui-btn layui-btn-lg layui-btn-normal" id="closeBtn">取消</button></div></div></form><script type="text/javascript" src="${ctx}/js/cusDevPlan/add.update.js"></script></body>
</html>

4.3.4.4. JS文件

add.update.js

js/cusDevPlan 目录下添加 add.update.js 文件，实现计划项数据添加与更新表单提交

layui.use(['form', 'layer','laydate'], function () {var form = layui.form,laydate = layui.laydate,layer = parent.layer === undefined ? layui.layer : top.layer,$ = layui.jquery;//常规用法laydate.render({elem: '#planDate'});/*** 添加或更新计划项*/form.on("submit(addOrUpdateCusDevPlan)", function (data) {// 弹出loading层var index = top.layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});var url = ctx+"/cus_dev_plan/save";if($('[name="id"]').val()){url = ctx+"/cus_dev_plan/update";}$.post(url,data.field,function (data){if(data.code == 200){//关闭弹出框layer.close(index);//关闭iframe层layer.closeAll("iframe");//刷新父页面，将添加的新数据展示parent.location.reload();}else{layer.msg(data.msg,{icon:5})}});return false; //阻止表单提交});/*** 关闭弹出层*/$("#closeBtn").click(function () {var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引parent.layer.close(index); //再执行关闭});});

4.3.4.5. 关闭弹出层

add_update.ftl

给按钮设置 id 属性值，通过 id 绑定点击事件

 <div class="layui-input-block"><button class="layui-btn layui-btn-lg" lay-submit="" lay-filter="addOrUpdateCusDevPlan">确认</button><button class="layui-btn layui-btn-lg layui-btn-normal" id="closeBtn">取消</button></div>

add.update.js

 /*** 关闭弹出层*/$("#closeBtn").click(function () {var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引parent.layer.close(index); //再执行关闭});

4.4. 开发计划项删除

4.4.1. 后端代码实现

CusDevPlanService.java

 /*** 删除时计划项* @param id*/@Transactionalpublic void delete(Integer id) {CusDevPlan cusDevPlan = cusDevPlanMapper.selectByPrimaryKey(id);AssertUtil.isTrue(id == null || null == cusDevPlan,"待删除计划项不存在");//设置数据失效cusDevPlan.setIsValid(0);AssertUtil.isTrue(cusDevPlanMapper.updateByPrimaryKeySelective(cusDevPlan) < 1,"计划项删除失败");}

CusDevPlanController.java

 @PostMapping("delete")@ResponseBodypublic ResultInfo delete(Integer id){cusDevPlanService.delete(id);return success();}

4.4.2. 前端核心代码

cus.dev.plan.data.js

修改 js/cusDevPlan 目录下 cus.dev.plan.data.js，添加删除行监听事件

 /*** 监听行工具栏*/table.on('tool(cusDevPlans)', function(obj){//编辑/修改功能if(obj.event == "edit"){addOrUpdateCusDevPlanDialog(obj.data.id);}else if(obj.event == "del"){// 询问用户是否确认删除layer.confirm("确定删除当前数据？", {icon:3, title:"开发计划管理"}, function (index) {$.post(ctx+"/cus_dev_plan/delete",{id:obj.data.id},function (data){if(data.code == 200){//关闭确认框layer.close(index);//刷新页面window.location.reload();//关闭// tableIns.reload();}else{layer.msg(data.msg,{icon:5});}});});}});

4.5. 营销机会数据开发状态更新

4.5.1. 后端代码实现

状态更新的设计表为 t_sale_chance 营销机会表，所以更新的核心代码在营销机会模块。

SaleChanceService.java

/*** 更新开发状态*  1.校验参数*      非空*  2.更新的数据必须存在* @param id* @param devResult*/@Transactionalpublic void updateDevResult(Integer id,Integer devResult){SaleChance saleChance = saleChanceMapper.selectByPrimaryKey(id);AssertUtil.isTrue(id == null || null == saleChance,"更新数据不存在");AssertUtil.isTrue(null == devResult,"更新状态状态不存在");//设置状态saleChance.setDevResult(devResult);saleChance.setUpdateDate(new Date());AssertUtil.isTrue(saleChanceMapper.updateByPrimaryKeySelective(saleChance) < 1,"状态更新失败");}

SaleChanceController.java

 /*** 更新开发状态* @param id* @param devResult* @return*/@PostMapping("updateDevResult")@ResponseBodypublic ResultInfo updateDevResult(Integer id,Integer devResult){saleChanceService.updateDevResult(id,devResult);return success();}

4.5.2. 前端核心代码

修改cus.dev.plan.data.js 添加表格头监听事件(开发成功，开发失败)

  /*** 监听头部工具栏*/table.on('toolbar(cusDevPlans)', function(obj){var checkStatus = table.checkStatus(obj.config.id);console.log(checkStatus.data);switch(obj.event){case 'add':addOrUpdateCusDevPlanDialog();break;case 'success':updateDevResult(2);break;case 'failed':updateDevResult(3);break;};});//更新营销机会的开发状态function updateDevResult(devResult){var id = $('[name="id"]').val();$.post(ctx+"/sale_chance/updateDevResult",{id:id,devResult:devResult},function (data){if(data.code == 200){//刷新页面parent.location.reload();//关闭// tableIns.reload();}else{layer.msg(data.msg,{icon:5});}});}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

CRM

1. 学习目标

2. 营销管理表结构分析

3. 营销机会管理功能实现

3.1. 准备工作

3.1.1. 生成代码

3.1.2. IDEA创建MYSQL链接

3.2. 营销机会数据查询

3.2.1. 页面效果

3.2.2. 后端代码实现

3.2.2.1. 查询条件

3.2.2.2. 设置SQL

3.2.2.4. Service

3.2.2.5. Controller

3.2.2.6. 时间格式化

3.2.3. 前端核心代码

3.2.3.1. 页面模板

3.2.3.2. 页面入口

3.2.3.3. 核心 JS

3.2.3.4. 多条件查询

3.3. 营销机会数据添加

3.3.1. 后端代码实现

3.3.1.1. 实现思路

3.3.1.2. 核心代码

3.3.1.3. 方法调用

3.3.1.4. 页面转发

3.3.2. 前端核心代码

3.3.2.1. 页面效果

3.3.2.2. 页面模板

3.3.2.3. 工具栏事件

3.3.2.4. 核心 JS

3.3.2.5. 关闭弹出层

3.4. 营销机会数据更新

3.4.1. 后端代码实现

3.4.1.1. 实现思路

3.4.1.2. 核心代码

3.4.1.3. 方法调用

3.4.1.4. 页面转发

3.4.2. 前端核心代码

3.4.2.1. 页面效果

3.4.2.2. 表格行事件

3.4.2.3. 核心 JS

3.4.2.4. 加载下拉框

3.5. 营销机会数据删除

3.5.1. 后端代码实现

3.5.1.1. 设置SQL

3.5.1.2. 接口定义

3.5.1.3. Service

3.5.1.4. Controller

3.5.2. 前端核心代码

3.5.2.1. 工具栏事件

3.5.2.2. 表格行事件

4. 客户开发计划功能实现

4.1. 开发计划数据查询

4.1.1. 页面效果

4.1.2. 后端代码实现

4.1.2.1. 查询条件

4.1.2.2. 设置SQL

4.1.2.3. Controller

4.1.3. 前端核心代码

4.1.3.1. 页面模板

4.1.3.2. 页面入口

4.1.3.3. 核心 JS

4.1.3.4. 多条件查询

4.2. 营销机会数据开发与详情

4.2.1. 行监听事件

4.2.2. 视图转发方法

4.2.3. 视图添加

4.2.3.1. 添加 JS 文件

4.2.4. 计划项数据列表查询

4.2.4.1. 接口定义

4.2.4.2. 设置SQL

4.2.4.3. Service

4.2.4.4. Controller

4.3. 开发计划项添加与更新

4.3.1. 页面效果

4.3.2. 计划项添加

4.3.2.1. 实现思路

4.3.2.2. 核心代码