1.在线索首界面,点击线索的的名称,跳转到详细线索页面
$.each(data.clues,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/clue/detailClue.do?id="+obj.id+"'\">"+obj.fullname+"</a></td>";
htmlStr+="<td>"+obj.company+"</td>";
htmlStr+="<td>"+obj.phone+"</td>";
htmlStr+="<td>"+obj.mphone+"</td>";
htmlStr+="<td>"+obj.source+"</td>";
htmlStr+="<td>"+obj.owner+"</td>";
htmlStr+="<td>"+obj.state+"</td>";
htmlStr+="</tr>";
});
2.点击后跳转到ClueController类的detailClue方法中
@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";
}
3.该方法操作3个mapper层实现数据查询,分别查询出线索,线索详情,与线索关联的市场活动。
ClueMapper接口
ClueMapper.xml文件
<select id="selectClueForDetailById" parameterType="string" resultMap="BaseResultMap">
select c.id,c.fullname,dv.value as appellation,u.name as owner,c.company,c.job,c.email,c.phone,c.website,
c.mphone,dv2.value as state,dv3.value as source,u2.name as create_by,c.create_time,u3.name as edit_by,
c.edit_time,c.description,c.contact_summary,c.next_contact_time,c.address
from tbl_clue c
left join tbl_dic_value dv on c.appellation=dv.id
join tbl_user u on c.owner=u.id
left join tbl_dic_value dv2 on c.state=dv2.id
left join tbl_dic_value dv3 on c.source=dv3.id
join tbl_user u2 on c.create_by=u2.id
left join tbl_user u3 on c.edit_by=u3.id
where c.id=#{id}
</select>
ClueRemarkMapper接口
ClueRemarkMapper.xml文件
<select id="selectClueRemarkForDetailByClueId" parameterType="string" resultMap="BaseResultMap">
select cr.id,cr.note_content,u1.name as create_by,cr.create_time,u2.name as edit_by,
cr.edit_time,cr.edit_flag
from tbl_clue_remark cr
join tbl_user u1 on cr.create_by=u1.id
left join tbl_user u2 on cr.edit_by=u2.id
where cr.clue_id=#{clueId}
</select>
ActivityMapper接口
ActivityMapper.xml文件
<select id="selectActivityForDetailByClueId" 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
join tbl_clue_activity_relation car on a.id=car.activity_id
where car.clue_id=#{clueId}
</select>
3.service没有涉及到事务操作,只是调用mapper层的方法返回数据而已,这里不再进行描述
4.controller层调用service层的方法,获取到的数据封装在request作用域中,在detail.jsp页面进行取值。
<%@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">
//默认情况下取消和保存按钮是隐藏的
var cancelAndSaveBtnDefault = true;
$(function(){
$("#remark").focus(function(){
if(cancelAndSaveBtnDefault){
//设置remarkDiv的高度为130px
$("#remarkDiv").css("height","130px");
//显示
$("#cancelAndSaveBtn").show("2000");
cancelAndSaveBtnDefault = false;
}
});
$("#cancelBtn").click(function(){
//显示
$("#cancelAndSaveBtn").hide();
//设置remarkDiv的高度为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>
<!-- 关联市场活动的模态窗口 -->
<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" 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>
<tr>
<td><input type="checkbox"/></td>
<td>发传单</td>
<td>2020-10-10</td>
<td>2020-10-20</td>
<td>zhangsan</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>发传单</td>
<td>2020-10-10</td>
<td>2020-10-20</td>
<td>zhangsan</td>
</tr>
</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" data-dismiss="modal">关联</button>
</div>
</div>
</div>
</div>
<!-- 返回按钮 -->
<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>
<!-- 大标题 -->
<div style="position: relative; left: 40px; top: -30px;">
<div class="page-header">
<h3>${clue.fullname}${clue.appellation}<small>${clue.company}</small></h3>
</div>
<div style="position: relative; height: 50px; width: 500px; top: -72px; left: 700px;">
<button type="button" class="btn btn-default" onclick="window.location.href='convert.html';"><span class="glyphicon glyphicon-retweet"></span> 转换</button>
</div>
</div>
<br/>
<br/>
<br/>
<!-- 详细信息 -->
<div style="position: relative; top: -70px;">
<div style="position: relative; left: 40px; height: 30px;">
<div style="width: 300px; color: gray;">名称</div>
<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${clue.fullname}${clue.appellation}</b></div>
<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">所有者</div>
<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${clue.owner}</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;">公司</div>
<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${clue.company}</b></div>
<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">职位</div>
<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${clue.job}</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;">邮箱</div>
<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${clue.email}</b></div>
<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">公司座机</div>
<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${clue.phone}</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: 30px;">
<div style="width: 300px; color: gray;">公司网站</div>
<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${clue.website}</b></div>
<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">手机</div>
<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${clue.mphone}</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: 40px;">
<div style="width: 300px; color: gray;">线索状态</div>
<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${clue.state}</b></div>
<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">线索来源</div>
<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${clue.source}</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: 50px;">
<div style="width: 300px; color: gray;">创建者</div>
<div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>${clue.createBy} </b><small style="font-size: 10px; color: gray;">${clue.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: 60px;">
<div style="width: 300px; color: gray;">修改者</div>
<div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>${clue.editBy} </b><small style="font-size: 10px; color: gray;">${clue.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: 70px;">
<div style="width: 300px; color: gray;">描述</div>
<div style="width: 630px;position: relative; left: 200px; top: -20px;">
<b>
${clue.description}
</b>
</div>
<div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
</div>
<div style="position: relative; left: 40px; height: 30px; top: 80px;">
<div style="width: 300px; color: gray;">联系纪要</div>
<div style="width: 630px;position: relative; left: 200px; top: -20px;">
<b>
${clue.contactSummary}
</b>
</div>
<div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
</div>
<div style="position: relative; left: 40px; height: 30px; top: 90px;">
<div style="width: 300px; color: gray;">下次联系时间</div>
<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${clue.nextContactTime}</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: 100px;">
<div style="width: 300px; color: gray;">详细地址</div>
<div style="width: 630px;position: relative; left: 200px; top: -20px;">
<b>
${clue.address}
</b>
</div>
<div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
</div>
</div>
<!-- 备注 -->
<div style="position: relative; top: 40px; left: 40px;">
<div class="page-header">
<h4>备注</h4>
</div>
<c:forEach items="${clueRemarks}" 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>
<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>
<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="添加备注..."></textarea>
<p id="cancelAndSaveBtn" style="position: relative;left: 737px; top: 10px; display: none;">
<button id="cancelBtn" type="button" class="btn btn-default">取消</button>
<button type="button" class="btn btn-primary">保存</button>
</p>
</form>
</div>
</div>
<!-- 市场活动 -->
<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>
<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);" data-toggle="modal" data-target="#bundModal" style="text-decoration: none;"><span class="glyphicon glyphicon-plus"></span>关联市场活动</a>
</div>
</div>
</div>
<div style="height: 200px;"></div>
</body>
</html>
功能测试
线索首页面
选择任意一条数据,点击数据的名称,跳转到数据的详细页面
备注和市场活动暂时没有数据,所以查询不出来,但查询语句已经写好了