Chapter 3 business function development (check the details of market activities)

customer demand ：

Users are on the main page of marketing activities , Click the hyperlink of the campaign name , Jump to the details page , Complete the function of viewing the details of marketing activities .

* On the campaign details page , Exhibition :

  - Basic information of marketing activities

- All remarks under the campaign

Knowledge points of function development

1. The relationship between marketing activities and marketing activities is one to many

View campaign details ：
  tbl_activity                   tbl_activity_remark
  id    name                     id      note_content    activity_id
  1001  act1                     111     remark1         1001
  1002  act2                     222     remark2         1001
                                 333     remark3         1002
  // Inquire about act1 All comments under
  select *
  from tbl_activity_remark
  where activity_id=1001

2. Use tags to save data , So that these data can be obtained when needed :
   
   Add attributes to tags ：
       If it is a form component label , priority of use value attribute , Only value When inconvenient to use , Use custom properties ;
       If it's not a form component tag , It is not recommended to use value, Custom attributes are recommended .

   When getting property values ：
       If you get the label of the form component value Property value ：dom object .value
                                          jquery object .val()
       If the custom attribute , Whatever the label , Only use ：jquery object .attr(" Property name ");

       <a style="text-decoration: none; cursor: pointer;" οnclick="">ii test 03_2</a>

       window.location.href='workbench/activity/detailActivity.do?id=74f60cc6f64c452fbf02c1aaa3b7e2fb

Function development :

1. Draw a picture to view the details of market activities according to customer needs UML Sequence diagram

2.activityMapper Interface

  /**
     *  according to id Query the detailed information of the market activity 
     * @param id
     * @return
     */
    Activity selectActivityForDetailById(String id);

activityMapper.xml file

<select id="selectActivityForDetailById" 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=#{id}
  </select>

3.activityService Interface

activityServiceImpl class

4.activityController class

    @RequestMapping(value = "/workbench/activity/detailActivity.do")
    public String detailActivity(String id,HttpServletRequest request){
        // call service layer 
        Activity activity = activityService.queryActivityForDetailById(id);
        List<ActivityRemark> remarkList = activityRemarkService.queryActivityRemarkForDetailByActivityId(id);
        // Save the data to request in 
        request.setAttribute("activity",activity);
        request.setAttribute("remarkList",remarkList);
        // Request forwarding 
        return "workbench/activity/detail";
    }

5.activity Of index.jsp page

$.each(data.activityList,function (index,obj) {
					htmlStr+="<tr class=\"active\">";
					htmlStr+="<td><input type=\"checkbox\" value=\""+obj.id+"\" /></td>";
					htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='workbench/activity/detailActivity.do?id="+obj.id+"'\">"+obj.name+"</a></td>";
					htmlStr+="<td>"+obj.owner+"</td>";
					htmlStr+="<td>"+obj.startDate+"</td>";
					htmlStr+="<td>"+obj.endDate+"</td>";
					htmlStr+="</tr>";
				});

6.activityRemarkMapper Interface

/**
     *  according to activityId Query the details of all notes under the campaign 
     * @param activityId
     * @return
     */
    List<ActivityRemark> selectActivityRemarkForDetailByActivityId(String activityId);

activityRemarkMapper.xml file

 <select id="selectActivityRemarkForDetailByActivityId" parameterType="string" resultMap="BaseResultMap">
    select ar.id,ar.note_content,ar.create_time,u1.name as create_by,ar.edit_time,u2.name as edit_by,ar.edit_flag
    from tbl_activity_remark ar
    join tbl_user u1 on ar.create_by=u1.id
    left join  tbl_user u2 on ar.edit_by=u2.id
    where ar.activity_id=#{activityId}
  </select>

7.activityRemarkService Interface

activityRemarkServiceImpl class

package com.it.crm.workbench.service.impl;

import com.it.crm.settings.mapper.UserMapper;
import com.it.crm.workbench.entity.ActivityRemark;
import com.it.crm.workbench.mapper.ActivityRemarkMapper;
import com.it.crm.workbench.service.ActivityRemarkService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service("activityRemarkService")
public class ActivityRemarkServiceImpl implements ActivityRemarkService {

    @Autowired
    private ActivityRemarkMapper activityRemarkMapper;

    @Override
    public List<ActivityRemark> queryActivityRemarkForDetailByActivityId(String activityId) {
        return activityRemarkMapper.selectActivityRemarkForDetailByActivityId(activityId);
    }
}

9.activity Of detail.jsp page

<%@page contentType="text/html; charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
	<meta charset="UTF-8">
	<base href="<%=basePath%>">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>

<script type="text/javascript">

	// By default, the cancel and save buttons are hidden 
	var cancelAndSaveBtnDefault = true;
	
	$(function(){
		$("#remark").focus(function(){
			if(cancelAndSaveBtnDefault){
				// Set up remarkDiv The height of 130px
				$("#remarkDiv").css("height","130px");
				// Show 
				$("#cancelAndSaveBtn").show("2000");
				cancelAndSaveBtnDefault = false;
			}
		});
		
		$("#cancelBtn").click(function(){
			// Show 
			$("#cancelAndSaveBtn").hide();
			// Set up remarkDiv The height of 130px
			$("#remarkDiv").css("height","90px");
			cancelAndSaveBtnDefault = true;
		});
		
		$(".remarkDiv").mouseover(function(){
			$(this).children("div").children("div").show();
		});
		
		$(".remarkDiv").mouseout(function(){
			$(this).children("div").children("div").hide();
		});
		
		$(".myHref").mouseover(function(){
			$(this).children("span").css("color","red");
		});
		
		$(".myHref").mouseout(function(){
			$(this).children("span").css("color","#E6E6E6");
		});
	});
	
</script>

</head>
<body>
	
	<!--  Modify the modal window of campaign notes  -->
	<div class="modal fade" id="editRemarkModal" role="dialog">
		<%--  Remarks id --%>
		<input type="hidden" id="remarkId">
        <div class="modal-dialog" role="document" style="width: 40%;">
            <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" id="myModalLabel"> Revise notes </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="noteContent" class="col-sm-2 control-label"> Content </label>
                            <div class="col-sm-10" style="width: 81%;">
                                <textarea class="form-control" rows="3" id="noteContent"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"> close </button>
                    <button type="button" class="btn btn-primary" id="updateRemarkBtn"> to update </button>
                </div>
            </div>
        </div>
    </div>

    

	<!--  Return button  -->
	<div style="position: relative; top: 35px; left: 10px;">
		<a href="javascript:void(0);" onclick="window.history.back();"><span class="glyphicon glyphicon-arrow-left" style="font-size: 20px; color: #DDDDDD"></span></a>
	</div>
	
	<!--  Headline  -->
	<div style="position: relative; left: 40px; top: -30px;">
		<div class="page-header">
			<h3> Marketing activities -${requestScope.activity.name} <small>${requestScope.activity.startDate} ~ ${requestScope.activity.endDate}</small></h3>
		</div>
		
	</div>
	
	<br/>
	<br/>
	<br/>

	<!--  Details  -->
	<div style="position: relative; top: -70px;">
		<div style="position: relative; left: 40px; height: 30px;">
			<div style="width: 300px; color: gray;"> owner </div>
			<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${requestScope.activity.owner}</b></div>
			<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;"> name </div>
			<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${requestScope.activity.name}</b></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
		</div>

		<div style="position: relative; left: 40px; height: 30px; top: 10px;">
			<div style="width: 300px; color: gray;"> Start date </div>
			<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${requestScope.activity.startDate}</b></div>
			<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;"> End date </div>
			<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${requestScope.activity.endDate}</b></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 20px;">
			<div style="width: 300px; color: gray;"> cost </div>
			<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${requestScope.activity.cost}</b></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -20px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 30px;">
			<div style="width: 300px; color: gray;"> The creator </div>
			<div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>${requestScope.activity.createBy}&nbsp;&nbsp;</b><small style="font-size: 10px; color: gray;">${requestScope.activity.createTime}</small></div>
			<div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 40px;">
			<div style="width: 300px; color: gray;"> Reviser </div>
			<div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>${requestScope.activity.editBy}&nbsp;&nbsp;</b><small style="font-size: 10px; color: gray;">${requestScope.activity.editTime}</small></div>
			<div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 50px;">
			<div style="width: 300px; color: gray;"> describe </div>
			<div style="width: 630px;position: relative; left: 200px; top: -20px;">
				<b>
					${requestScope.activity.description}
				</b>
			</div>
			<div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
		</div>
	</div>
	
	<!--  remarks  -->
	<div style="position: relative; top: 30px; left: 40px;">
		<div class="page-header">
			<h4> remarks </h4>
		</div>

		<%-- Traverse remarkList, Show all comments --%>
		<c:forEach items="${remarkList}" var="remark">
			<div class="remarkDiv" 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"> Marketing activities </font> <font color="gray">-</font> <b>${activity.name}</b> <small style="color: gray;">
					<c:if test="${remark.editFlag=='1'}">${remark.editTime}</c:if>
					<c:if test="${remark.editFlag!='1'}">${remark.createTime}</c:if>
					 from 
				${remark.editFlag=='1'?remark.editBy:remark.createBy}
					${remark.editFlag=='1'?' modify ':" establish "}
				</small>
					<div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">
						<a class="myHref" 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" 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>
        
		
		<div id="remarkDiv" style="background-color: #E6E6E6; width: 870px; height: 90px;">
			<form role="form" style="position: relative;top: 10px; left: 10px;">
				<textarea id="remark" class="form-control" style="width: 850px; resize : none;" rows="2"  placeholder=" Add notes ..."></textarea>
				<p id="cancelAndSaveBtn" style="position: relative;left: 737px; top: 10px; display: none;">
					<button id="cancelBtn" type="button" class="btn btn-default"> Cancel </button>
					<button type="button" class="btn btn-primary"> preservation </button>
				</p>
			</form>
		</div>
	</div>
	<div style="height: 200px;"></div>
</body>
</html>

A functional test ：

Enter the campaign list , Click the name of a piece of market activity data randomly