线索-模块的的主要功能

一.跳转到线索的详情页

特殊的是要查出与之关联的市场活动根据clueId

<!-- 根据clueId 三表 查出 一个clue下的多个市场活动   -->
    <select id="selectByClueId" parameterType="string" resultMap="BaseResultMap">
select a.id,a.name,a.start_date,a.end_date,u1.name as owner
    from tbl_activity a
   join tbl_user u1 on a.owner=u1.id
  join tbl_clue_activity_relation r1 on a.id=r1.activity_id
where r1.clue_id=#{clueId}


    </select>

//到详情页面
    @RequestMapping("/workbench/clue/toDetail.do")
    public String toDetail(String clueId,HttpServletRequest request){
        //根据clueId查出想要的数据
        Clue clue = clueService.queryById(clueId);
        List<MarketingActivities> activityList = activityService.queryByClueId(clueId);
        List<ClueRemark> clueRemarkList = clueRemarkService.queryByClueId(clueId);
        //放到request域中
        request.setAttribute("clue",clue);
        request.setAttribute("activityList",activityList);
        request.setAttribute("clueRemarkList",clueRemarkList);
     return "workbench/clue/detail";


    }

前端

<!-- 市场活动 -->
<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="relationedTBody">
                <c:forEach items="${activityList}" var="act">
                    <tr id="tr_${act.id}">
                        <td>${act.name}</td>
                        <td>${act.startDate}</td>
                        <td>${act.endDate}</td>
                        <td>${act.owner}</td>
                        <td><a href="javascript:void(0);" activityId="${act.id}" style="text-decoration: none;"><span
                                class="glyphicon glyphicon-remove"></span>解除关联</a></td>
                    </tr>
                </c:forEach>


                <%--                  <tr>--%>
                <%--                     <td>发传单</td>--%>
                <%--                     <td>2020-10-10</td>--%>
                <%--                     <td>2020-10-20</td>--%>
                <%--                     <td>zhangsan</td>--%>
                <%--                     <td><a href="javascript:void(0);"  style="text-decoration: none;"><span class="glyphicon glyphicon-remove"></span>解除关联</a></td>--%>
                <%--                  </tr>--%>
                <%--                  <tr>--%>
                <%--                     <td>发传单</td>--%>
                <%--                     <td>2020-10-10</td>--%>
                <%--                     <td>2020-10-20</td>--%>
                <%--                     <td>zhangsan</td>--%>
                <%--                     <td><a href="javascript:void(0);"  style="text-decoration: none;"><span class="glyphicon glyphicon-remove"></span>解除关联</a></td>--%>
                <%--                  </tr>--%>
                </tbody>
            </table>

<!-- 备注 -->
<div id="remarkDivList" style="position: relative; top: 40px; left: 40px;">
    <div class="page-header">
        <h4>备注</h4>
    </div>


    <c:forEach items="${clueRemarkList}" var="remark">
        <div class="remarkDiv" id="div_${remark.id}" style="height: 60px;">
            <img title="${remark.createBy}" src="image/user-thumbnail.png" style="width: 30px; height:30px;">
            <div style="position: relative; top: -40px; left: 40px;">
                <h5>${remark.noteContent}</h5>
                <font color="gray">线索</font> <font color="gray">-</font>
                <b>${clue.fullname}${clue.appellation}-${clue.company}</b> <small
                    style="color: gray;"> ${remark.editFlag=='0'?remark.createTime:remark.editTime}
                由${remark.editFlag=='0'?remark.createBy:remark.editBy}${remark.editFlag=='0'?'创建':'修改'}</small>
                <div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">
                    <a class="myHref" name="editA" remarkId="${remark.id}" href="javascript:void(0);"><span
                            class="glyphicon glyphicon-edit" style="font-size: 20px; color: #E6E6E6;"></span></a>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a class="myHref" name="deleteA" remarkId="${remark.id}" href="javascript:void(0);"><span
                            class="glyphicon glyphicon-remove" style="font-size: 20px; color: #E6E6E6;"></span></a>
                </div>
            </div>
        </div>
    </c:forEach>

详情页显示出与之关联的市场活动 解除关联上绑定 的是他的市场活动id 此页面request狱中有clue该线索对象

二.关联市场活动

点击关联市场活动 弹起模态窗口 可以根据搜索框模糊查询还没有关联的市场活动根据clueId和activityName来查市场活动

 <select id="selectByClueIdAndActivityNameApartReal" parameterType="map" resultMap="BaseResultMap">
select a.id,a.name,a.start_date,a.end_date,u1.name as owner
    from tbl_activity a
     join tbl_user u1 on a.owner=u1.id
where a.name like '%' #{activityName} '%'
and a.id not in
( select activity_id   from
tbl_clue_activity_relation
where clue_id = #{clueId}

)

 //线索关联市场活动的查询
    @RequestMapping("/workbench/clue/queryNotRelation.do")
    @ResponseBody
    public Object queryNotRelation(String activityName,String clueId){
        HashMap<String, Object> map = new HashMap<>();
        map.put("activityName",activityName);
        map.put("clueId",clueId);
        List<MarketingActivities> activityList = activityService.queryNotRelation(map);
      return activityList;


    }

//给关联市场活动 绑定单击事件
            $(" #relationQuery").click(function () {
                //初始化工作

                //1.弹出模态窗口
                $("#bundModal").modal("show");
            });

 //给市场活动搜索框添加键盘弹起事件
            $("#searchActivityTxt").keyup(function () {
                //收集参数
                var activityName = this.value;
                var clueId = '${clue.id}';
                //发送请求
                $.ajax({
                    url: 'workbench/clue/queryNotRelation.do',
                    data: {
                        activityName: activityName,
                        clueId: clueId
                    },
                    type: 'post',
                    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);
                    }


                });


            });

2.勾选框框 来关联多个还未关联的市场活动 并且将所勾选的activity多个 返回到页面上 动态刷

  <select id="selectByIds" parameterType="string" resultMap="BaseResultMap">
        select a.id ,u1.name as owner,a.name,a.start_date,a.end_date,a.cost,a.description,a.create_time,
               u2.name as create_by,a.edit_time,u3.name as edit_by

        from tbl_activity a
                 join tbl_user u1 on a.owner=u1.id
                 join tbl_user u2 on a.create_by=u2.id
                 left join tbl_user u3 on a.edit_by=u3.id
where a.id in
<foreach collection="array" separator="," item="id" open="(" close=")">

#{id}

</foreach>

    </select>

 <insert id="insertClueActivityRelation" parameterType="com.bjpowernode.ssm.workbench.domain.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>

//批量添加市场活动
    @RequestMapping("/workbench/clue/detail/saveRelation.do")
@ResponseBody
    public Object saveRelation(String[] activityId,String clueId){
        //根据activityId[]查出要动态 拼接在关联列表后的数据
        List<MarketingActivities> activitiesList = activityService.selectByIds(activityId);

        ArrayList<ClueActivityRelation> relationList = new ArrayList<>();
        ClueActivityRelation clueActivityRelation;
        for (int i = 0; i < activityId.length; i++) {
            String actId = activityId[i];
            clueActivityRelation =  new ClueActivityRelation();
            clueActivityRelation.setId(UUIDUtils.getUUID());
            clueActivityRelation.setClueId(clueId);
            clueActivityRelation.setActivityId(actId);

            relationList.add(clueActivityRelation);
        }
        returnObject returnObject = new returnObject();
        try {
            int ret = clueActivityRelationService.saveClueActivityRelation(relationList);
            if (ret > 0) {
                returnObject.setCode(contant.RETURN_CODE_SUCCESS);
                //将新添加的市场活动返回
                returnObject.setRetData(activitiesList);


            } else {
                returnObject.setCode(contant.RETURN_CODE_FAIL);
                returnObject.setMessage("系统忙");
            }

        } catch (Exception e) {
            e.printStackTrace();
            returnObject.setCode(contant.RETURN_CODE_FAIL);
            returnObject.setMessage("系统忙");
        }

        return returnObject;

    }

            //给关联添加单击事件
            $("#saveRelation").click(function () {
                //收集参数
                //获取列表中所有被选中的checkbox
                var chckedIds = $("#tBody input[type='checkbox']:checked");
                //表单验证
                if (chckedIds.size() == 0) {
                    alert("请选择要关联的市场活动");
                    return;
                }
                var ids = "";

                $.each(chckedIds, function () {//activityId=xxxx&activityId=xxxx&....&activityId=xxxx&
                    ids += "activityId=" + this.value + "&";
                });
                ids += "clueId=${clue.id}";//activityId=xxxx&activityId=xxxx&....&activityId=xxxx&clueId=xxxxx
                //发送请求
                $.ajax({
                    url: 'workbench/clue/detail/saveRelation.do',
                    data: ids,
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == "1") {
                            //成功关闭模态窗口 动态添加 市场活动关联 列表
                            $("#bundModal").modal("hide");
                            //刷新已经关联过的市场活动列表
                            var htmlStr = "";
                            $.each(data.retData, function (index, obj) {
                                htmlStr+="<tr id=\"tr_"+obj.id+"\">";
                                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>";
                            });
                            $("#relationedTBody").append(htmlStr);


                        }else {
                            //提示信息
                            alert(data.message);
                            //模态窗口不关闭
                            $("#bundModal").modal("show");


                        }


                    }


                });


            });

三.解除市场活动关联关系表

<!--    //解除市场活动与线索之间的关联-->
  <delete id="deleteClueActivityRelation" parameterType="com.bjpowernode.ssm.workbench.domain.ClueActivityRelation">
delete from  tbl_clue_activity_relation where  clue_id = #{clueId} and activity_id = #{activityId}


  </delete>

//解除关系
    @RequestMapping("/workbench/clue/rescindActivityClueRelation.do")
    @ResponseBody
    public Object rescindActivityClueRelation(ClueActivityRelation clueActivityRelation){

        returnObject returnObject = new returnObject();
        try {
            int ret = clueActivityRelationService.rescindActivityClueRelation(clueActivityRelation);
            if (ret > 0) {
                returnObject.setCode(contant.RETURN_CODE_SUCCESS);



            } else {
                returnObject.setCode(contant.RETURN_CODE_FAIL);
                returnObject.setMessage("系统忙");
            }

        } catch (Exception e) {
            e.printStackTrace();
            returnObject.setCode(contant.RETURN_CODE_FAIL);
            returnObject.setMessage("系统忙");
        }

        return returnObject;




    }

  //给解除关联添加单击事件
            //父子选择器
            $("#relationedTBody").on("click", "a", function () {
           //1.收集参数
                var activityId =$(this).attr("activityId");
                var  clueId = '${clue.id}';
           //2.发送请求
                $.ajax({
                   url:'workbench/clue/rescindActivityClueRelation.do',
                    data: {
                        activityId:activityId,
                        clueId:clueId

                    },
                    type: 'post',
                    dataType: 'json',
                    success:function (data){
                       if (data.code=="1"){
                           //解除关联成功，前台动态刷新
                          $("#tr_"+activityId).remove();

                       }else {

                           alert(data.message);

                       }



                    }


                });




            });