当前位置：网站首页>第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>功能测试
线索首页面
选择任意一条数据，点击数据的名称，跳转到数据的详细页面
备注和市场活动暂时没有数据，所以查询不出来，但查询语句已经写好了
边栏推荐
- 期货开户的条件和流程
- 关于max做动画的一些关键信息（shift+v）
- Futures Commission Standard and margin ratio
- 【2022-07-25】
- GoPro接入 - 根据GoPro官方文档/Demo，实现对GoPro的控制和预览
- Deep confidence network (DBN) [the classical DBN network structure is a deep neural network composed of several layers of RBM (restricted Boltzmann machine) and one layer of BP]
- RSS tutorial: aggregate your own information collection channels, rshub, freshrss, NetNewsWire
- Converter registration of easyexcel
- 软考 系统架构设计师 简明教程 | 系统设计
- MySQL高可用实战方案——MHA
猜你喜欢
基于C语言实现线性表的建立、插入、删除、查找等基本操作
RSS tutorial: aggregate your own information collection channels, rshub, freshrss, NetNewsWire
Motion attitude control system of DOF pan tilt based on stm32
宇宙没有尽头，UTONMOS能否将元宇宙照进现实？
Wechat campus laundry applet graduation design finished product of applet completion work (8) graduation design thesis template
![[training day3] reconstruction of roads [SPFA]](/img/eb/4729954bf5c6c0dc85daed9ca127f7.png)
[training day3] reconstruction of roads [SPFA]
期货开户的条件和流程
Wechat campus laundry applet graduation design finished product of applet completion work (3) background function
Wechat campus laundry applet graduation design finished product (5) assignment
深度置信网络（DBN）【经典的DBN网络结构是由若干层 RBM（受限波尔兹曼机）和一层 BP 组成的一种深层神经网络】
随机推荐
Zhishang technology IPO meeting: annual revenue of 600million, book value of accounts receivable of 270Million
小程序毕设作品之微信校园洗衣小程序毕业设计成品（5）任务书
Add index to the field of existing data (Damon database version)
Conditions and procedures of futures account opening
[training day4] sequence transformation [thinking]
2022acm summer training weekly report (IV)
2022ACM夏季集训周报（四）
[daily question] 1206. Design jump table
Dat.gui control custom placement and dragging
English grammar_ Personal pronoun
Application layer World Wide Web WWW
JS callback function (callback)
MySQL startup options and configuration files
SQL教程之 SQL 聚合函数入门教程
In the "meta cosmic space", utonmos will open the digital world of the combination of virtual and real
【2022-07-25】
Converter registration of easyexcel
达科为生物IPO过会：年营收8.37亿 吴庆军父女为实控人
使用RecyclerView，实现列表左滑菜单
我们要学会查看技术细节点的文档化说明