CRM项目记录（十一）

（1）交易功能实现

（2）交易添加功能

（3）交易添加功能实现可能性配置

（4）交易添加功能实现客户名称自动补全

（5）交易添加功能实现

（6）交易添加功能实现2

（7）交易明细

（1）交易功能实现

需求：

用户在交易主页面，点击”创建”按钮，跳转到创建交易的页面；

用户在创建交易的页面填写表单，点击”保存”按钮，完成创建交易的功能。

*所有者、阶段、类型、来源都是动态的

*市场活动源是可搜索的

*联系人也是可搜索的

*可能性是可配置的

*客户名称支持自动补全

*表单验证

*保存成功之后，跳转到交易主页面

*保存失败，提示信息，页面不跳转

创建交易流程分析：

创建TranController：

//跳转交易页面请求@RequestMapping("/workbench/transaction/index.do")public String index(HttpServletRequest request) {List<DicValue> stageList = dicValueService.queryDicValueByTypeCode("stage");List<DicValue> transactionTypeList = dicValueService.queryDicValueByTypeCode("transactionType");List<DicValue> sourceList = dicValueService.queryDicValueByTypeCode("source");request.setAttribute("stageList", stageList);request.setAttribute("transactionTypeList", transactionTypeList);request.setAttribute("sourceList", sourceList);return "workbench/transaction/index";}

把index.html改为index.jsp：修改内容，删固定的内容，换成使用EL表达式动态获取数据

更改主页面index.jsp左侧的a标签连接

（2）交易添加功能

在TranController：添加方法

 //跳转添加交易页面请求@RequestMapping("/workbench/transaction/toSavePage.do")public String toSavePage(HttpServletRequest request) {List<User> userList = userService.queryAllUsers();List<DicValue> stageList = dicValueService.queryDicValueByTypeCode("stage");List<DicValue> transactionTypeList = dicValueService.queryDicValueByTypeCode("transactionType");List<DicValue> sourceList = dicValueService.queryDicValueByTypeCode("source");request.setAttribute("userList",userList);request.setAttribute("stageList",stageList);request.setAttribute("transactionTypeList",transactionTypeList);request.setAttribute("sourceList",sourceList);return "workbench/transaction/save";}

修改添加交易页面save.html修改为save.jsp：修改动态获取下拉列表的数据

在交易主页面给创建按钮添加js事件：

点击穿件：

数据是动态的：

（3）交易添加功能实现可能性配置

创建阶段对应的配置文件possibllity.properties

资质审查=10
需求分析=20
价值建议=30
确定决策者=50
提案/报价=70
谈判/复审=90
成交=100
丢失的线索=0
因竞争丢失关闭=0

在TranController：添加

//获取阶段可能性请求@RequestMapping("/workbench/transaction/getPossibilityByStage.do")@ResponseBodypublic Object getPossibilityByStage(String stageValue){// 解析properties配置文件，根据阶段获取可能性ResourceBundle bundle = ResourceBundle.getBundle("possibility");String possibility = bundle.getString(stageValue);// 返回响应信息return possibility;}

在save.jsp给阶段下拉框添加下拉点击事件

// 给"阶段"下拉框添加change事件$("#create-stage").change(function () {// 收集参数// alert($(this).find("option:selected").text());var stageValue = $("#create-stage option:selected").text();// 表单验证if(stageValue == ""){// 清空可能性输入框$("#create-possibility").val("");return;}// 发送请求$.ajax({url:'workbench/transaction/getPossibilityByStage.do',data:{stageValue:stageValue},type:'post',dataType:'json',success:function (data) {// 把可能性显示在输入框中$("#create-possibility").val(data);}});});

（4）交易添加功能实现客户名称自动补全

先写一个简单的例子，演示一下bs_typeahead插件：

首先引入开发包：

typeaheadtest.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head><base href="<%=basePath%>"><!--  JQUERY --><script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script><!--  BOOTSTRAP --><link rel="stylesheet" type="text/css" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css"><script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script><!--TYPEAHEAD--><script type="text/javascript" src="jquery/bs_typeahead/bootstrap3-typeahead.min.js"></script><title>演示自动补全插件</title><script type="text/javascript">$(function () {//当容器加载完成之后，对容器调用工具函数$("#customerName").typeahead({//这里数据不是从数据库获取的，而是自己写死了source:['京东商城','阿里巴巴','百度网络科技公司','字节跳动','动力节点']});});</script>
</head>
<body>
<input type="text" id="customerName">
</body>
</html>

输入京东关键字，它就去数据源比对：

回车：

当数据源是动态的时候：

typeaheadtest2.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head><base href="<%=basePath%>"><!--  JQUERY --><script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script><!--  BOOTSTRAP --><link rel="stylesheet" type="text/css" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css"><script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script><!--TYPEAHEAD--><script type="text/javascript" src="jquery/bs_typeahead/bootstrap3-typeahead.min.js"></script><title>演示自动补全插件2</title><script type="text/javascript">$(function () {//当容器加载完成之后，对容器调用工具函数$("#customerName").typeahead({source:function (jquery,process) {//每次键盘弹起，都自动触发本函数；我们可以向后台送请求，查询客户表中所有的名称，把客户名称以[]字符串形式返回前台，赋值给source//process：是个函数，能够将['xxx','xxxxx','xxxxxx',.....]字符串赋值给source，从而完成自动补全//jquery：在容器中输入的关键字//var customerName=$("#customerName").val();//发送查询请求$.ajax({url:'workbench/transaction/queryCustomerNameByFuzzyName.do',data:{customerName:jquery},type:'post',dataType:'json',success:function (data) {//['xxx','xxxxx','xxxxxx',.....]process(data);}});}});});</script>
</head>
<body>
<input type="text" id="customerName">
</body>
</html>

TranController：

 //通过客户姓名模糊查询客户全名@RequestMapping("/workbench/transaction/queryCustomerNameByFuzzyName.do")@ResponseBodypublic Object queryCustomerNameByFuzzyName(String customerName) {List<String> customerNames = customerService.queryCustomerNameByFuzzyName(customerName);return customerNames;}

在CustomerMapper接口：添加

CustomerMapper.xml：

<!--通过客户姓名模糊查询客户全名--><select id="selectCustomerNameByFuzzyName" parameterType="string" resultType="string">select namefrom tbl_customerwhere name like '%' #{customerName} '%'</select>

创建CustomerService接口

实现类：

运行项目首先需要登录一下因为用到了Controller：在访问测试页面:

回车

下来把插件用到项目中：save.jsp：

引入：

// 当容器加载完成之后，对容器调用工具函数  实现名字自动补全$("#create-customerName").typeahead({source:function (jquery,process) {// 每次键盘弹起，都自动触发本函数；向后台送请求，查询客户表中所有的名称，把客户名称以[]字符串形式返回前台，赋值给source// process：是个函数，能够将['xxx','xxxxx','xxxxxx',.....]字符串赋值给source，从而完成自动补全// jquery：在容器中输入的关键字// 发送查询请求$.ajax({url:'workbench/transaction/queryCustomerNameByFuzzyName.do',data:{customerName:jquery},type:'post',dataType:'json',success:function (data) {//['xxx','xxxxx','xxxxxx',.....]process(data); // 将后端查询的名称字符串通过process传给source}});}});

调用

TranController：

 //通过客户姓名模糊查询客户全名@RequestMapping("/workbench/transaction/queryCustomerNameByFuzzyName.do")@ResponseBodypublic Object queryCustomerNameByFuzzyName(String customerName) {List<String> customerNames = customerService.queryCustomerNameByFuzzyName(customerName);return customerNames;}

创建CustomerService接口

实现类：

在CustomerMapper接口：添加

CustomerMapper.xml：

<!--通过客户姓名模糊查询客户全名--><select id="selectCustomerNameByFuzzyName" parameterType="string" resultType="string">select namefrom tbl_customerwhere name like '%' #{customerName} '%'</select>

（5）交易添加功能实现

在客户的CusomerMapper：添加一个方法：

CusomerMapper.xml：添加sql

 <!--过客户姓名查询客户详细信息--><select id="selectCustomerByName" resultMap="BaseResultMap" parameterType="string">select<include refid="Base_Column_List"/>from tbl_customerwhere name=#{customerName}</select>

 <!--通过客户姓名查询客户id--><select id="selectCustomerIdByName" resultType="string" parameterType="string">select idfrom tbl_customerwhere name=#{customerName}</select>

保存客户已经写过了：

<!--插入新用户--><insert id="insertCustomer" parameterType="com.bjpowernode.crm.workbench.domain.Customer">insert into tbl_customer(id, owner, name, website, phone, create_by, create_time, contact_summary,next_contact_time, description, address)values (#{id}, #{owner}, #{name}, #{website}, #{phone}, #{createBy},#{createTime},#{contactSummary},#{nextContactTime},#{description}, #{address})</insert>

保存创建的交易，在线索转换的时候，往交易表添加交易也写过了

<!--新增一条交易记录--><insert id="insertTran" parameterType="com.bjpowernode.crm.workbench.domain.Tran">insert into tbl_tran(id, owner, money, name, expected_date, customer_id, stage, type, source, activity_id,contacts_id, create_by, create_time, description, contact_summary,next_contact_time)values (#{id}, #{owner}, #{money}, #{name}, #{expectedDate}, #{customerId}, #{stage}, #{type}, #{source}, #{activityId},#{contactsId}, #{createBy}, #{createTime}, #{description}, #{contactSummary}, #{nextContactTime})</insert>

这样Mapper层就写好了，那么在创建TranSertvice加一个方法：

实现类：

 //创建交易实现@Overridepublic void saveCreateTransaction(Tran tran) {// 获取前端传来的用户对应的id（前端传来的是用户名称：tran.getCustomerId()，而数据库需要存放该用户的id）String customerId = customerMapper.selectCustomerIdByName(tran.getCustomerId());//通过客户姓名查询客户id// 如果存在该用户，则将tran中的用户名改为对应的用户idif (customerId != null) {tran.setCustomerId(customerId);} else {// 不存在该用户，则新创建用户，并将tran中的用户名改为新创建的用户idCustomer customer = new Customer();customer.setOwner(tran.getCreateBy());customer.setName(tran.getCustomerId());customer.setId(UUIDUtils.getUUID());customer.setCreateTime(DateUtils.formateDateTime(new Date()));customer.setCreateBy(tran.getCreateBy());customerMapper.insertCustomer(customer); // 新增用户tran.setCustomerId(customer.getId()); // 修改联系人的用户为该用户id}// 新增交易tranMapper.insertTran(tran);}

在TranController：添加：

 //创建交易@RequestMapping("/workbench/transaction/saveCreateTransaction.do")@ResponseBodypublic Object saveCreateTransaction(Tran tran, HttpSession session) {User user = (User) session.getAttribute(Contants.SESSION_USER);// 封装参数tran.setId(UUIDUtils.getUUID());tran.setCreateTime(DateUtils.formateDateTime(new Date()));tran.setCreateBy(user.getId());ReturnObject returnObject = new ReturnObject();try {tranService.saveCreateTransaction(tran);returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);} catch (Exception e) {e.printStackTrace();returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);returnObject.setMessage("系统忙，请稍后重试....");}return returnObject;}

在save.jsp给保存按钮加点击事件：

// 给"保存"按钮添加单击事件$("#saveCreateTranBtn").click(function () {// 收集参数var owner = $("#create-owner").val();var money = $.trim($("#create-money").val());var name = $.trim($("#create-name").val());var expectedDate = $("#create-expectedDate").val();var customerName = $.trim($("#create-customerName").val());var stage = $("#create-stage").val();var type = $("#create-type").val();var source = $("#create-source").val();var activityId = $("#activityId").val();var contactsId = $("#contactsId").val();var description = $.trim($("#create-description").val());var contactSummary = $.trim($("#create-contactSummary").val());var nextContactTime = $("#create-nextContactTime").val();//表单验证if(name == "") {alert("名称不能为空")return;}if(expectedDate == "") {alert("预计成交日期不能为空")return;}if(customerName == "") {alert("客户名称不能为空")return;}if(stage == "" || stage == null) {alert("阶段不能为空")return;}//发送请求$.ajax({url:'workbench/transaction/saveCreateTransaction.do',data:{owner:owner,money:money,name:name,expectedDate:expectedDate,customerId:customerName,stage:stage,type:type,source:source,activityId:activityId,contactsId:contactsId,description:description,contactSummary:contactSummary,nextContactTime:nextContactTime},type:'post',dataType:'json',success:function (data) {if(data.code=="1"){// 跳转到交易主页面window.location.href="workbench/transaction/index.do";}else{// 提示信息alert(data.message);}}});});

点击保存：

（6）交易添加功能实现2

用户在交易主页面，点击交易名称超级链接，跳转到交易明细页面，完成查看交易明细的功能。

*显示交易的基本信息

*显示交易的备注信息

*显示交易的历史信息

*显示交易的阶段图标信息

当在第一次创建交易的时候，就有了交易历史了，把交易当前的阶段等信息，往交易表添加一条记录，当修改的时候，会再一次往交易表添加一条记录，知道阶段变成成交阶段，交易才会结束

上面创建交易明细的功能还未完全实现：

通过MyBatyis逆向工程生成交易历史表的相关代码：

交易历史的实体类：TranHistory、TranHistoryMapper、TranHistoryMapper.xml

在TranHistoryMapper接口添加：

在TranHistoryMapper.xml：中添加

 <!--新增交易历史记录--><insert id="insertTransactionHistory" parameterType="com.bjpowernode.crm.workbench.domain.TranHistory">insert into tbl_tran_history (id, stage, money, expected_date, create_time, create_by, tran_id)values (#{id,jdbcType=CHAR}, #{stage,jdbcType=VARCHAR}, #{money,jdbcType=VARCHAR},#{expectedDate,jdbcType=CHAR}, #{createTime,jdbcType=CHAR}, #{createBy,jdbcType=VARCHAR},#{tranId,jdbcType=CHAR})</insert>

在TranServiceImpl实现类中继续添加代码：

 //创建交易实现@Overridepublic void saveCreateTransaction(Tran tran) {// 获取前端传来的用户对应的id（前端传来的是用户名称：tran.getCustomerId()，而数据库需要存放该用户的id）String customerId = customerMapper.selectCustomerIdByName(tran.getCustomerId());//通过客户姓名查询客户id// 如果存在该用户，则将tran中的用户名改为对应的用户idif (customerId != null) {tran.setCustomerId(customerId);} else {// 不存在该用户，则新创建用户，并将tran中的用户名改为新创建的用户idCustomer customer = new Customer();customer.setOwner(tran.getCreateBy());customer.setName(tran.getCustomerId());customer.setId(UUIDUtils.getUUID());customer.setCreateTime(DateUtils.formateDateTime(new Date()));customer.setCreateBy(tran.getCreateBy());customerMapper.insertCustomer(customer); // 新增用户tran.setCustomerId(customer.getId()); // 修改联系人的用户为该用户id}// 新增交易tranMapper.insertTran(tran);// 新增线索历史记录TranHistory tranHistory = new TranHistory();tranHistory.setCreateBy(tran.getCreateBy());tranHistory.setCreateTime(DateUtils.formateDateTime(new Date()));tranHistory.setTranId(tran.getId());tranHistory.setExpectedDate(tran.getExpectedDate());tranHistory.setMoney(tran.getMoney());tranHistory.setStage(tran.getStage());tranHistory.setId(UUIDUtils.getUUID());// 新增历史记录tranHistoryMapper.insertTransactionHistory(tranHistory);}

这样添加交易的完整功能就实现了。

这样新创建的交易都会在交易历史表添加一条记录：

（7）交易明细

在TranMapper接口添加已给方法：

在TranMapper.xml：添加sql：

<select id="selectTranForDetailById" parameterType="string" resultMap="BaseResultMap">select t.id,u1.name as owner,t.money,t.name,t.expected_date,c.name as customer_id,dv1.value as stage,dv1.order_no,dv2.value as type,dv3.value as source,a.name as activity_id,co.fullname as contacts_id,u2.name as create_by,t.create_time,u3.name as edit_by,t.edit_time,t.description,t.contact_summary,t.next_contact_timefrom tbl_tran tjoin tbl_user u1 on t.owner=u1.idjoin tbl_customer c on t.customer_id=c.idjoin tbl_dic_value dv1 on t.stage=dv1.idleft join tbl_dic_value dv2 on t.type=dv2.idleft join tbl_dic_value dv3 on t.source=dv3.idleft join tbl_activity a on t.activity_id=a.idleft join tbl_contacts co on t.contacts_id=co.idjoin tbl_user u2 on t.create_by=u2.idleft join tbl_user u3 on t.edit_by=u3.idwhere t.id=#{id}</select>

在TranService接口：添加一个方法

实现类：

在交易备注的Mapper加一个方法：

TranRemarkMapper：

TranRemarkMapper.xml：

 <!--查看交易备注详细信息--><select id="selectTranRemarkForDetailByTranId" parameterType="string" resultMap="BaseResultMap">select tr.id,tr.note_content,u1.name as create_by,tr.create_time,u2.name as edit_by,tr.edit_time,tr.edit_flagfrom tbl_tran_remark trjoin tbl_user u1 on tr.create_by=u1.idleft join tbl_user u2 on tr.edit_by=u2.idwhere tr.tran_id=#{id}</select>

新建TranRemarkService接口添加方法：

实现类：

//查询交易备注的详细信息@Overridepublic List<TranRemark> queryTranRemarkForDetailByTranId(String id) {return tranRemarkMapper.selectTranRemarkForDetailByTranId(id);}

接下来在交易历史的Mapper：TranHistoryMapper：加一个方法：

TranHistoryMapper.xml：添加sql：

<!--//根据交易的id查询交易历史的详细信息--><select id="selectTranHistoryForDetailByTranId" parameterType="string" resultMap="BaseResultMap">select dv.value as stage,th.money,th.expected_date,th.create_time,u.name as create_byfrom tbl_tran_history thjoin tbl_dic_value dv on th.stage=dv.idjoin tbl_user u on th.create_by=u.idwhere th.tran_id=#{id}order by th.create_time asc</select>

新建TranHistoryService：添加方法：

实现类：

package com.bjpowernode.crm.workbench.service.impl;import com.bjpowernode.crm.workbench.domain.TranHistory;
import com.bjpowernode.crm.workbench.mapper.TranHistoryMapper;
import com.bjpowernode.crm.workbench.service.TranHistoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;@Service("tranHistoryService")
public class TranHistoryServiceImpl implements TranHistoryService {@AutowiredTranHistoryMapper tranHistoryMapper;//根据交易的id查询交易历史的详细信息@Overridepublic List<TranHistory> queryTranHistoryForDetailByTranId(String id) {return tranHistoryMapper.selectTranHistoryForDetailByTranId(id);}
}

在TranController：添加方法：

 //查看交易的详细信息请求@RequestMapping("/workbench/transaction/toDetailPage.do")public String toDetailPage(String id, HttpServletRequest request) {// 调用service层方法，查询数据Tran tran = tranService.queryTranForDetailById(id);List<TranRemark> remarkList = tranRemarkService.queryTranRemarkForDetailByTranId(id);List<TranHistory> historyList = tranHistoryService.queryTranHistoryForDetailByTranId(id);//根据tran所处阶段名称查询可能性ResourceBundle bundle = ResourceBundle.getBundle("possibility");String possibility = bundle.getString(tran.getStage());// 获取当前阶段阶段的stageNoString stageOrderNo = dicValueService.queryDicValueById(tranService.queryTransactionById(id).getStage()).getOrderNo();//把数据保存到request中request.setAttribute("tran",tran);request.setAttribute("remarkList",remarkList);request.setAttribute("historyList",historyList);request.setAttribute("possibility",possibility);request.setAttribute("stageOrderNo", stageOrderNo);// 调用service方法，查询交易所有的阶段List<DicValue> stageList = dicValueService.queryDicValueByTypeCode("stage");request.setAttribute("stageList",stageList);//请求转发return "workbench/transaction/detail";}

把交易详细datail.html修改为detail.jsp：修改页面内容动态获取数据

...

在交易主页面index.jsp ：修改点击a标签的跳转路径：

点击测试02：

2,java中的实体类是为了操作数据库表，所以，实体类要和数据库中的表相对应，实体类中的属性要和表中的字段相对应，属性的类型要和表字段的类型相对应。

java中的实体类不是只为了操作表，还有可能进行数据传输，所以，java中的实体类在数据库中不一定有表相对应，实体类中的属性在数据库表中也不一定有字段相对应；
但是，数据库一张表在java中一定有实体类相对应，数据库表中一个字段在实体类中一定有属性相对应。
java--------->table(不一定)
<---------(一定)

3,分析交易阶段的图标：
图标的数量：跟交易总的阶段数量一致
每一个阶段对应显示一个图标
图标的种类：三类
图标的颜色：绿色和黑色
图标的顺序：跟阶段的顺序一致
图标数量的变化：阶段的数量可能变化，图标的数量也可能变化
图标的实现：
<span class="glyphicon glyphicon-ok-circle" data-content="" style="color: #90F790;">
-----------

显示交易阶段的图标：
按照顺序查询交易所有的阶段：stageList
遍历stageList,显示每一个阶段对应图标，图标上显示的阶段的名称从遍历出的阶段中获取。

在TranController：添加：

detail.jsp：遍历显示图标

CRM项目记录（十一）相关推荐

CRM项目记录（二）
目录: (1)首页功能分析与设计 (2)登录功能分析与设计 (3)crm搭建Mybatis逆向工程环境 (4)CRM登录功能实现Mapper层和Service层 (5)crm实现回车登录 (6)cr ...
CRM项目记录（八）
目录: (1)crm删除市场备注活动 (2)crm实现删除市场活动备注实现M,apper层和Service层 (3)crm修改市场活动备注实现 (4)crm实现保存修改市场活动备注前台页面 (5)cr ...
CRM项目记录（七）
目录: (1)导入市场活动需求分析 (2)crm演示文件上传 (3)crm演示使用apache-poi解析excel文件 (4)crm设计导入市场活动 (5)crm实现导入市场活动Controlle ...
CRM项目记录（四）
目录: (1)介绍js日历插件及其使用 (2)crm给创建市场活动添加日历功能 (3)分页查询市场活动需求分析 (4)crm分页查询市场活动实现查询市场活动列表Mapper层 (5)crm分页查询市 ...
CRM项目记录（十）
目录: (1)线索转换-市场活动元可搜索 (2)点击搜索出来的市场活动名称单选按钮显示到页面实现 (3)转换功能实现43.44 (4)完善其他的功能45.46.47.48 (5)完善其他的功能49.5 ...
CRM项目记录（九）
目录: (1)线索关联市场活动 (2)crm线索关联市场活动设计 (3)关联市场活动实现: (4)解除关联市场活动 (5)线索转换 (1)线索关联市场活动 (2)crm线索关联市场活动设计在市 ...
CRM项目记录（五）
目录: (1)crm删除市场活动设计 (2)crm实现全选市场活动的全选和取消全选 (3)crm删除市场活动实现Mapper层和Sertvice层 (4) crm删除市场活动实现Controller层 ...
Java实现CRM项目过程中的细节记录(一)
CRM项目实现过程中的细节记录(一) 文章目录 CRM项目实现过程中的细节记录(一) 一.数据库相关细节 1. 表名 2. 表字段说明 3. 不使用主外键约束 4. 不使用主键自动增长 UUID 5. ...
动力节点crm项目中登录无响应记录
项目场景: 利用thymeleaf+ssm完成crm项目,使用jquery实现登录功能. 问题描述在到达登录页面后,点击登录,页面没有跳转,并且没有出现报错,但是没有填写账号点击登录和密码有弹窗提示 ...

CRM项目记录（十一）

CRM项目记录（十一）相关推荐

最新文章

热门文章