客户需求
用户在线索明细页面,点击"关联市场活动"按钮,弹出线索关联市场活动的模态窗口;
用户在线索关联市场活动的模态窗口,输入搜索条件,每次键盘弹起,根据名称模糊查询市场活动,把所有符合条件的市场活动显示到列表中;
用户选择要关联的市场活动,点击"关联"按钮,完成线索关联市场活动的功能.
*每次至少关联一个市场活动
*同一个市场活动只能跟同一个线索关联一次
*关联成功之后,关闭模态窗口,刷新已经关联过的市场活动列表
*关联失败,提示信息,模态窗口不关闭,已经关联过的市场活动列表也不刷新
功能实现
插入市场活动可以单选或多选,参数为集合类型,集合中的每个数据封装为一个实体类。
如果成功插入一条或多条数据,则根据市场活动的ids来查询市场活动表的信息,并把该信息拼接在tbody中,实时显示在页面上。
1.ClueActivityRelationMapper接口
/**
* 批量保存线索和市场活动的关联关系
* @param list
* @return
*/
int insertClueActivityRelationByList(List<ClueActivityRelation> list);
ClueActivityRelationMapperImpl.xml文件
<insert id="insertClueActivityRelationByList" parameterType="com.it.crm.workbench.entity.ClueActivityRelation">
insert into tbl_clue_activity_relation(id,clue_id,activity_id)
values
<foreach collection="list" item="obj" separator=",">
(#{obj.id},#{obj.clueId},#{obj.activityId})
</foreach>
</insert>
2.ClueActivityRelationService接口
ClueActivityRelationServiceImpl类
3.ActivityMapper接口
/**
* 根据ids查询市场活动的明细信息
* @param ids
* @return
*/
List<Activity> selectActivityForDetailByIds(String[] ids);
ActivityMapper.xml文件
<select id="selectActivityForDetailByIds" parameterType="String" resultMap="BaseResultMap">
select a.id,a.name,a.start_date,a.end_date,u.name as owner
from tbl_activity a
join tbl_user u on a.owner=u.id
where a.id in
<foreach collection="array" item="id" separator="," open="(" close=")">
#{id}
</foreach>
</select>
4.ActivityService接口
ActivityServiceImpl类
5.ClueController
@RequestMapping(value = "/workbench/clue/saveBund.do")
@ResponseBody
public Object saveBund(String[] activityId,String clueId){
//封装参数
ClueActivityRelation car=null;
List<ClueActivityRelation> relationList=new ArrayList<>();
for (String ai:activityId){
car=new ClueActivityRelation();
car.setActivityId(ai);
car.setClueId(clueId);
car.setId(UUIDUtils.getUUID());
relationList.add(car);
}
ReturnObject returnObject=new ReturnObject();
try{
//调用service方法,批量保存线索和市场活动的关联关系
int i = clueActivityRelationService.saveCreateClueActivityRelationByList(relationList);
if (i>0){
returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);
List<Activity> activityList = activityService.queryActivityForDetailByIds(activityId);
returnObject.setReturnData(activityList);
}else {
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage("系统忙,请稍后再试!");
}
}catch (Exception e){
e.printStackTrace();
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage("系统忙,请稍后再试!");
}
return returnObject;
}
6.clue的detail.jsp页面
js
//给关联按钮添加单击事件
$("#saveBundActivityBtn").click(function () {
//收集参数
//获取列表中所有被选择的checkbox
var checkIds=$("#tBody input[type='checkbox']:checked");
//表单验证
if (checkIds.size()==0){
alert("请选择要关联的市场活动!");
return;
}
var ids="";
$.each(checkIds,function () {
ids+="activityId="+this.value+"&";
});
ids+="clueId=${clue.id}";
//发送请求
$.ajax({
url:"workbench/clue/saveBund.do",
type:'post',
data:ids,
dataType:'json',
success:function (data) {
if (data.code=="1"){
//关闭模态窗口
$("#bundModal").modal("hide");
//刷新已经关联过的市场活动列表
var htmlStr="";
$.each(data.returnData,function (index,obj) {
htmlStr+="<tr>";
htmlStr+="<td>"+obj.name+"</td>";
htmlStr+="<td>"+obj.startDate+"</td>";
htmlStr+="<td>"+obj.endDate+"</td>";
htmlStr+="<td>"+obj.owner+"</td>";
htmlStr+="<td><a href=\"javascript:void(0);\" activityId=\""+obj.id+"\" style=\"text-decoration: none;\"><span class=\"glyphicon glyphicon-remove\"></span>解除关联</a></td>";
htmlStr+="</tr>";
});
$("#relationTbody").append(htmlStr);
}else {
//提示信息
alert(data.message);
$("#bundModal").modal("show");
}
}
});
});
html
<!-- 市场活动 -->
<div>
<div style="position: relative; top: 60px; left: 40px;">
<div class="page-header">
<h4>市场活动</h4>
</div>
<div style="position: relative;top: 0px;">
<table class="table table-hover" style="width: 900px;">
<thead>
<tr style="color: #B3B3B3;">
<td>名称</td>
<td>开始日期</td>
<td>结束日期</td>
<td>所有者</td>
<td></td>
</tr>
</thead>
<tbody id="relationTbody">
<c:forEach items="${activityList}" var="activity">
<tr>
<td>${activity.name}</td>
<td>${activity.startDate}</td>
<td>${activity.endDate}</td>
<td>${activity.owner}</td>
<td><a href="javascript:void(0);" activityId="${activity.id}" style="text-decoration: none;"><span class="glyphicon glyphicon-remove"></span>解除关联</a></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<div>
<a href="javascript:void(0);" id="bundActivityBtn" style="text-decoration: none;"><span class="glyphicon glyphicon-plus"></span>关联市场活动</a>
</div>
</div>
</div>
功能测试
搜索出市场活动后,选择需要与该线索关联的市场活动,
选中活动项,点击关联,关闭窗口,页面拼接出选中的市场活动,并显示出来