当前位置：网站首页>第3章业务功能开发（查看线索明细）
第3章业务功能开发（查看线索明细）
2022-07-27 12:54:00 【做一道光】
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>功能测试
线索首页面
选择任意一条数据，点击数据的名称，跳转到数据的详细页面
备注和市场活动暂时没有数据，所以查询不出来，但查询语句已经写好了
边栏推荐
- Wechat campus laundry applet graduation design finished product of applet completion work (8) graduation design thesis template
- Construction and application of industrial knowledge atlas (I): overview of industrial knowledge atlas
- 看看有没有你，各赛区入围名单
- JS 模块、闭包应用
- Keras深度学习实战——推荐系统数据编码
- Interview secrets are widely distributed, and the exclusive secrets of editing, testing and learning are leaked?!
- Futures Commission Standard and margin ratio
- 2022acm summer training weekly report (IV)
- Creation and destruction of "C language" function stack frame -- (internal skill)
- We should learn to check the documented instructions of technical details
猜你喜欢
Zhishang technology IPO meeting: annual revenue of 600million, book value of accounts receivable of 270Million
Design of LR1 compiler based on C language
Interview secrets are widely distributed, and the exclusive secrets of editing, testing and learning are leaked?!
English grammar_ Personal pronoun
西测测试深交所上市：年营收2.4亿募资9亿 市值47亿
Software system architecture designer concise tutorial | software system modeling
Wechat campus laundry applet graduation design finished product (4) opening report
期货开户的条件和流程
Wechat campus laundry applet graduation design finished product of applet completion work (3) background function
纯c手写线程池
随机推荐
redis集群搭建-使用docker快速搭建一个测试redis集群
特征工程中的缩放和编码的方法总结
Swiftui map encyclopedia use mapkit to search
For.. of can be used to traverse which data
The most complete collection of strategies! Super AI painting tool midjourney open beta! Come and build your fantasy metauniverse
关于max做动画的一些关键信息（shift+v）
建议收藏，PMP应战篇（2）之易混淆知识点
Wechat campus laundry applet graduation design finished product (7) Interim inspection report
new的多种使用方法
MySQL startup options and configuration files
Creation and destruction of "C language" function stack frame -- (internal skill)
期货手续费标准和保证金比例
在灯塔工厂点亮5G，宁德时代抢先探路中国智造
C＃测量工具示意图
NoSQL —— NoSQL 三大理论基石 —— CAP —— BASE—— 最终一致性
List map basic notes
The salary level of programmers in various countries is a little miserable
Conditions and procedures of futures account opening
WPF visifire.charts4.6.1 tutorial with source code
Converter registration of easyexcel