第3章业务功能开发（线索关联市场活动，插入数据并查询）

客户需求

用户在线索明细页面,点击"关联市场活动"按钮,弹出线索关联市场活动的模态窗口;

用户在线索关联市场活动的模态窗口,输入搜索条件,每次键盘弹起,根据名称模糊查询市场活动,把所有符合条件的市场活动显示到列表中;

用户选择要关联的市场活动,点击"关联"按钮,完成线索关联市场活动的功能.

*每次至少关联一个市场活动

*同一个市场活动只能跟同一个线索关联一次

*关联成功之后,关闭模态窗口,刷新已经关联过的市场活动列表

*关联失败,提示信息,模态窗口不关闭,已经关联过的市场活动列表也不刷新

功能实现

插入市场活动可以单选或多选，参数为集合类型，集合中的每个数据封装为一个实体类。

如果成功插入一条或多条数据，则根据市场活动的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>

功能测试

搜索出市场活动后，选择需要与该线索关联的市场活动，

选中活动项，点击关联，关闭窗口，页面拼接出选中的市场活动，并显示出来