第3章业务功能开发（线索关联市场活动，动态搜索）

客户需求

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

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

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

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

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

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

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

功能实现

查询一条或多条市场活动数据，传递的参数为市场活动的名字和线索的id，这两个参数不属于同一个实体类，因此把他们封装为map集合进行传参

1. ActivityMapper接口

/**
     * 根据name模糊查询市场活动，并且把已经和clueId关联过的市场活动排除
     * @param map
     * @return
     */
    List<Activity> selectActivityForDetailByNameClueId(Map<String,Object> map);

ActivityMapper.xml文件

<select id="selectActivityForDetailByNameClueId" parameterType="map" 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.name like '%' #{activityName} '%' and a.id not in (
    select activity_id
    from tbl_clue_activity_relation
    where clue_id=#{clueId}
    )
  </select>

2.ActivityService接口

ActivityServiceImpl类

 @Override
    public List<Activity> queryActivityForDetailByNameClueId(Map<String, Object> map) {
        return activityMapper.selectActivityForDetailByNameClueId(map);
    }

3.ClueController

    @RequestMapping(value = "/workbench/clue/detailClue.do")
    public String detailClue(String id,HttpServletRequest request){
        //调用service层方法，查询数据
        Clue clue = clueService.queryClueForDetailById(id);
        List<ClueRemark> clueRemarks = clueRemarkService.queryClueRemarkForDetilByClueId(id);
        List<Activity> activityList = activityService.queryActivityForDetailByClueId(id);
        //把数据保存到作用域中
        request.setAttribute("clue",clue);
        request.setAttribute("clueRemarks",clueRemarks);
        request.setAttribute("activityList",activityList);
        return "workbench/clue/detail";
    }

4.clue的detail.jsp页面

js

//给关联市场活动按钮添加单击事件
		$("#bundActivityBtn").click(function () {
			//初始化工作

			//弹出线索关联市场活动的模态窗口
			$("#bundModal").modal("show");
		});

		//给市场活动搜索框添加键盘弹起事件
		$("#searchActivityTxt").keyup(function () {
			//收集参数
			var activityName=this.value;
			var clueId='${clue.id}';
			//发送请求
			$.ajax({
				url:"workbench/clue/queryActivityForDetailByNameClueId.do",
				type:'post',
				data:{
					activityName:activityName,
					clueId:clueId
				},
				dataType:'json',
				success:function (data) {
					//遍历data,显示搜索到的市场活动列表
					var htmlStr="";
					$.each(data,function (index,obj) {
						htmlStr+="<tr>";
						htmlStr+="<td><input type=\"checkbox\" value='"+obj.id+"'/></td>";
						htmlStr+="<td>"+obj.name+"</td>";
						htmlStr+="<td>"+obj.startDate+"</td>";
						htmlStr+="<td>"+obj.endDate+"</td>";
						htmlStr+="<td>"+obj.owner+"</td>";
						htmlStr+="</tr>";
					});
					$("#tBody").html(htmlStr);
				}
			});
		});

html

<!-- 关联市场活动的模态窗口 -->
	<div class="modal fade" id="bundModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 80%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">关联市场活动</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
						<form class="form-inline" role="form">
						  <div class="form-group has-feedback">
						    <input type="text" id="searchActivityTxt" class="form-control" style="width: 300px;" placeholder="请输入市场活动名称，支持模糊查询">
						    <span class="glyphicon glyphicon-search form-control-feedback"></span>
						  </div>
						</form>
					</div>
					<table id="activityTable" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
							<tr style="color: #B3B3B3;">
								<td><input type="checkbox"/></td>
								<td>名称</td>
								<td>开始日期</td>
								<td>结束日期</td>
								<td>所有者</td>
								<td></td>
							</tr>
						</thead>
						<tbody id="tBody">


						</tbody>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" id="saveBundActivityBtn">关联</button>
				</div>
			</div>
		</div>
	</div>

功能测试

进入线索详细备注页面

点击关联市场活动按钮，弹出市场活动搜索框，根据市场活动的名称来进行搜索，并且排除已经关联过该线索的市场活动

点击ctrl键，查询所有市场活动

输入具体的值，根据输入的值查询市场活动