查看线索详情_h259077的博客-爱代码爱编程
点击线索列表 数据行
htmlString += "<td><a style=\"text-decoration: none; cursor: pointer;\" οnclick=\"window.location.href='workbench/clue/detailClue.do?id="+obj.id+"'\">"+obj.fullname+""+obj.appellation+"</a></td>"; 页面跳转 到详情页面需要线索信息 线索备注信息 市场活动信息
Controller层 (根据传入的线索id 查询线索 线索备注 市场活动) 把数据存放到request域页面跳转到详情页 通过el表达式动态获取 该线索id的信息
@RequestMapping("/workbench/clue/detailClue") public String detailClue(String id,HttpServletRequest request){ //调用service层方法 查询数据 Clue clue=clueService.selectClueForDetailById(id); List<ClueRemark> remarkList =clueRemarkService.selectClueRemarkForDetailByClueId(id); List<Activity> activityList=activityService.selectActivityForDetailByClueId(id); //把数据保存到request中 request.setAttribute("clue",clue); request.setAttribute("remarkList",remarkList); request.setAttribute("activityList",activityList); //请求转发 return "workbench/clue/detail"; }
mapper层
ClueMapper
/*根据id来查询线索的明细信息 详情 Clue*/ Clue selectClueForDetailById(String id);
<!--========== Clue selectClueForDetailById(String id);===============--> <select id="selectClueForDetailById" parameterType="string" resultMap="BaseResultMap"> select c.id,c.fullname,dv1.value as appellation,u1.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 dv1 on c.appellation=dv1.id join tbl_user u1 on c.owner=u1.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
List<ClueRemark> selectClueRemarkForDetailByClueId(String clueId);
<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
/*根据clueId查询该线索相关联的市场活动明细信息*/ List<Activity> selectActivityForDetailByClueId(String clueId);<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>
三张表两外键 根据线索的id 查询关联的市场活动
service层 接口和实现类省略了
controller层接受到数据id 查询出clue clueRemarkList activityList 请求转发workbench/clue/detail.jsp页面
分为三部分
线索 (通过el表达式把作用域中的clue信息写到页面)
<!-- 大标题 -->
<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" id="convertClueBtn"><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>
线索备注(el表达式遍历出线索备注列表 )
<!-- 备注 -->
<div style="position: relative; top: 40px; left: 40px;">
<div class="page-header">
<h4>备注</h4>
</div>
<c:forEach items="${remarkList}" 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>
${remark.editFlag=='0'?remark.createTime:remark.editTime} 由${remark.editFlag=='0'?remark.createBy:remark.editBy}${remark.editFlag=='0'?'创建':'修改'}</small> 根据editFlag 为1被修改过 为0创建
给每一条备注的div设置一个id和备注id相关联 <div class="remarkDiv" id="div_${remark.id}"> 每一条备注id为 div_123 |div_456
给修改和删除图标添加自定义id 为备注的id remarkId=${remark.id} name="editA |deleteA"
市场活动
<!-- 市场活动 -->
<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>
<div>
<a href="javascript:void(0);" id="bundActivityBtn" style="text-decoration: none;"><span class="glyphicon glyphicon-plus"></span>关联市场活动</a>
</div>
</div>
</div>
<tr id="tr_${act.id}"> 给每一行市场活动的tr id绑定一个 和市场活动id相关联的id