代码编织梦想

 点击线索列表 数据行 

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}&nbsp;&nbsp;</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}&nbsp;&nbsp;</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>
						&nbsp;&nbsp;&nbsp;&nbsp;
						<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

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/h259077/article/details/127990921

记一次Gitlab Runner卡顿的详情分析-爱代码爱编程

记一次Gitlab Runner卡顿的详情分析 原创 lyonger 网易游戏运维平台      lyonger 18 年加入网易,先后负责过多个游戏产品的运维工作,多年运维生涯。负责小游戏 CI/CD、事件处理平台开发、游戏 Nomad 运维模式探索、gitlab 平台维护等工作。主要关注 Linux 性能优化、DevOps、云原生

[Pyhon疫情大数据分析] 四.微博话题抓取及新冠肺炎疫情文本挖掘和情感分析-爱代码爱编程

思来想去,虽然很忙,但还是挤时间针对这次肺炎疫情写个Python大数据分析系列博客,包括网络爬虫、可视化分析、GIS地图显示、情感分析、舆情分析、主题挖掘、威胁情报溯源、知识图谱、预测预警及AI和NLP应用等。希望该系列线上远程教学对您有所帮助,也希望早点战胜病毒,武汉加油、湖北加油、全国加油。待到疫情结束樱花盛开,这座英雄的城市等你们来。 首先说声抱歉

在线教育大数据营销平台实战(四):CRM线索生命周期及用户画像构建-爱代码爱编程

来源:一个数据人的自留地 作者:@TigerHu 数据化运营理念的落地不能只停留在对系统的盲目构建上,让企业内部用户会用、用好也至关重要,感兴趣的小伙伴可以查看《在线教育大数据营销平台实战(三):数据产品实施推广实战》。从本篇开始我会从我负责的另一条营销CRM产品线角度,结合在线教育的营销业务场景,总结梳理数据如何赋能营销业务线。本篇先从CR

html查看详情,查看详情.html-爱代码爱编程

查看详情 $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; }; $axure.utils.getOtherPath = function() { return 'resources/Other.html'; }

Python趣题三解:根据线索计算违章逃逸的车牌号-爱代码爱编程

封面图片:《Python程序设计实验指导书》(ISBN:9787302525790),董付国,清华大学出版社 图书详情(京东): 本书81个实验项目可与董付国老师的《Python程序设计(第2版)》、《Python程序设计基础(第2版)》、《Python程序设计基础与应用》、《Python程序设计实例教程》等教材配合使用,用书老师可以联系董老师获

怎么寻找企业联系信息?如何找到精准的客户线索_巨准拓客crm的博客-爱代码爱编程

  在情报为王的背景下,商机是项目的来源。查询建筑企业资质证书,快速获取建筑企业联系方式,是促进合作进而实现项目的重要环节。谁能快一步,谁就能赢得第一个机会。   事实上,发现企业信息并不难。随着互联网的发展,市场上出现了许多国家建筑企业资质查询平台,但在寻找企业联系信息时会出现以下情况:   1.无法进行筛选,在了解是否包括联系方式之前,需要逐一查看企业