• 客户管理系统（SSM版）：查看交易明细

    客户需求：

    用户在交易主页面，点击交易名称超级链接，跳转到交易明细页面，完成查看交易明细的功能。

    *显示交易的基本信息

    *显示交易的备注信息

    *显示交易的历史信息

    *显示交易的阶段图标信息

    功能实现：

    1.Tran

    TranMapper接口

    TranMapper.xml文件

    1.   <select id="selectTranForDetailById" parameterType="string" resultMap="BaseResultMap">
    2.     select
    3.     tt.id, u1.name as owner, tt.money, tt.name, tt.expected_date,tc.name as customer_id,
    4.     tdv.value as stage,tdv2.value as type,tdv3.value as source,ta.name as activity_id,
    5.     tc1.fullname as contacts_id,u2.name as create_by, tt.create_time,u3.name as edit_by, tt.edit_time,
    6.     tt.description, tt.contact_summary,tt.next_contact_time
    7.     from tbl_tran tt
    8.     join tbl_user u1 on tt.owner=u1.id
    9.     join tbl_customer tc on tt.customer_id=tc.id
    10.     join tbl_dic_value tdv on tt.stage=tdv.id
    11.     left join tbl_dic_value tdv2 on tt.type=tdv2.id
    12.     left join tbl_dic_value tdv3 on tt.source=tdv3.id
    13.     left join tbl_activity ta on tt.activity_id=ta.id
    14.     left join tbl_contacts tc1 on tt.contacts_id=tc1.id
    15.     join tbl_user u2 on tt.create_by=u2.id
    16.     left join tbl_user u3 on tt.edit_by=u3.id
    17.     where tt.id=#{id}
    18.   select>

    TranService接口

    TranServiceImpl实现类

    2.TranRemark

    TranRemarkMapper接口

    TranRemarkMapper.xml文件

    1. <select id="selectTranRemarkForDetailByTranId" parameterType="string" resultMap="BaseResultMap">
    2.     select trr.id,trr.note_content,u1.name as create_by,trr.create_time,u2.name as edit_by,
    3.     trr.edit_time,trr.edit_flag,tr.name as tran_id
    4.     from tbl_tran_remark trr
    5.     join tbl_user u1 on trr.create_by=u1.id
    6.     left join tbl_user u2 on trr.edit_by=u2.id
    7.     join tbl_tran  tr on trr.tran_id=tr.id
    8.     where trr.tran_id=#{tranId}
    9.   select>

    TranRemarkService接口

    TranRemarkServiceImpl实现类

    3.TranHistory

    TranHistoryMapper接口

    TranHistoryMapper.xml文件

    1.   <select id="selectTranHistoryForDetailByTranId" parameterType="string" resultMap="BaseResultMap">
    2.     select tth.id,tdv.value as stage,tth.money,tth.expected_date,tth.create_time,
    3.     u1.name as create_by,tt.name as tran_id
    4.     from tbl_tran_history tth
    5.     join tbl_dic_value tdv on tth.stage=tdv.id
    6.     join tbl_user u1 on tth.create_by=u1.id
    7.     join tbl_tran tt on tth.tran_id=tt.id
    8.     where tth.tran_id=#{id}
    9.   select>

    TranHistoryService接口

    TranHistoryServiceImpl实现类

    4.TransactionController类

    1. @RequestMapping("/workbench/transaction/tranDetail.do")
    2.     public String queryTranDetail(String id,HttpServletRequest request){
    3.         //调用service方法，查询数据
    4.         Tran tran = tranService.queryTranForDetailById(id);
    5.         List tranRemarkList = tranRemarkService.queryTranRemarkForDetailById(id);
    6.         List tranHistories = tranHistoryService.queryTranHistoryForDetailByTranId(id);
    7.        //根据交易所处阶段的名称查询可能性
    8.  
    9.         ResourceBundle possibility = ResourceBundle.getBundle("possibility");
    10.         String string = possibility.getString(tran.getStage());
    11.         //把数据保存到request中
    12.         request.setAttribute("tran",tran);
    13.         request.setAttribute("tranRemarkList",tranRemarkList);
    14.         request.setAttribute("tranHistories",tranHistories);
    15.         request.setAttribute("string",string);
    16.         return "workbench/transaction/detail";
    17.     }

    5.index.jsp

    <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='workbench/transaction/tranDetail.do?id=${tran.id}';">${tran.name}a>td>

    detail.jsp

    1. <%@page contentType="text/html; charset=UTF-8" language="java" %>
    2. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    3. <%
    4. String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
    5. %>
    6. <html>
    7. <head>
    8. 	<meta charset="UTF-8">
    9. 	<base href="<%=basePath%>">
    10. <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    11.  
    12. <style type="text/css">
    13. .mystage{
    14. 	font-size: 20px;
    15. 	vertical-align: middle;
    16. 	cursor: pointer;
    17. }
    18. .closingDate{
    19. 	font-size : 15px;
    20. 	cursor: pointer;
    21. 	vertical-align: middle;
    22. }
    23. style>
    24. 	
    25. <script type="text/javascript" src="jquery/jquery-1.11.1-min.js">script>
    26. <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js">script>
    27.  
    28. <script type="text/javascript">
    29.  
    30. 	//默认情况下取消和保存按钮是隐藏的
    31. 	var cancelAndSaveBtnDefault = true;
    32. 	
    33. 	$(function(){
    34. 		$("#remark").focus(function(){
    35. 			if(cancelAndSaveBtnDefault){
    36. 				//设置remarkDiv的高度为130px
    37. 				$("#remarkDiv").css("height","130px");
    38. 				//显示
    39. 				$("#cancelAndSaveBtn").show("2000");
    40. 				cancelAndSaveBtnDefault = false;
    41. 			}
    42. 		});
    43. 		
    44. 		$("#cancelBtn").click(function(){
    45. 			//显示
    46. 			$("#cancelAndSaveBtn").hide();
    47. 			//设置remarkDiv的高度为130px
    48. 			$("#remarkDiv").css("height","90px");
    49. 			cancelAndSaveBtnDefault = true;
    50. 		});
    51. 		
    52. 		$(".remarkDiv").mouseover(function(){
    53. 			$(this).children("div").children("div").show();
    54. 		});
    55. 		
    56. 		$(".remarkDiv").mouseout(function(){
    57. 			$(this).children("div").children("div").hide();
    58. 		});
    59. 		
    60. 		$(".myHref").mouseover(function(){
    61. 			$(this).children("span").css("color","red");
    62. 		});
    63. 		
    64. 		$(".myHref").mouseout(function(){
    65. 			$(this).children("span").css("color","#E6E6E6");
    66. 		});
    67. 		
    68. 		
    69. 		//阶段提示框
    70. 		$(".mystage").popover({
    71.             trigger:'manual',
    72.             placement : 'bottom',
    73.             html: 'true',
    74.             animation: false
    75.         }).on("mouseenter", function () {
    76.                     var _this = this;
    77.                     $(this).popover("show");
    78.                     $(this).siblings(".popover").on("mouseleave", function () {
    79.                         $(_this).popover('hide');
    80.                     });
    81.                 }).on("mouseleave", function () {
    82.                     var _this = this;
    83.                     setTimeout(function () {
    84.                         if (!$(".popover:hover").length) {
    85.                             $(_this).popover("hide")
    86.                         }
    87.                     }, 100);
    88.                 });
    89. 	});
    90. 	
    91. 	
    92. 	
    93. script>
    94.  
    95. head>
    96. <body>
    97. 	
    98. 	
    99. 	<div style="position: relative; top: 35px; left: 10px;">
    100. 		<a href="javascript:void(0);" onclick="window.history.back();"><span class="glyphicon glyphicon-arrow-left" style="font-size: 20px; color: #DDDDDD">span>a>
    101. 	div>
    102. 	
    103. 	
    104. 	<div style="position: relative; left: 40px; top: -30px;">
    105. 		<div class="page-header">
    106. 			<h3>${tran.name} <small>${tran.money}small>h3>
    107. 		div>
    108. 		
    109. 	div>
    110.  
    111. 	<br/>
    112. 	<br/>
    113. 	<br/>
    114.  
    115. 	
    116. 	<div style="position: relative; left: 40px; top: -50px;">
    117. 		阶段      
    118. 		<span class="glyphicon glyphicon-ok-circle mystage" data-toggle="popover" data-placement="bottom" data-content="资质审查" style="color: #90F790;">span>
    119. 		-----------
    120. 		<span class="glyphicon glyphicon-ok-circle mystage" data-toggle="popover" data-placement="bottom" data-content="需求分析" style="color: #90F790;">span>
    121. 		-----------
    122. 		<span class="glyphicon glyphicon-ok-circle mystage" data-toggle="popover" data-placement="bottom" data-content="价值建议" style="color: #90F790;">span>
    123. 		-----------
    124. 		<span class="glyphicon glyphicon-ok-circle mystage" data-toggle="popover" data-placement="bottom" data-content="确定决策者" style="color: #90F790;">span>
    125. 		-----------
    126. 		<span class="glyphicon glyphicon-map-marker mystage" data-toggle="popover" data-placement="bottom" data-content="提案/报价" style="color: #90F790;">span>
    127. 		-----------
    128. 		<span class="glyphicon glyphicon-record mystage" data-toggle="popover" data-placement="bottom" data-content="谈判/复审">span>
    129. 		-----------
    130. 		<span class="glyphicon glyphicon-record mystage" data-toggle="popover" data-placement="bottom" data-content="成交">span>
    131. 		-----------
    132. 		<span class="glyphicon glyphicon-record mystage" data-toggle="popover" data-placement="bottom" data-content="丢失的线索">span>
    133. 		-----------
    134. 		<span class="glyphicon glyphicon-record mystage" data-toggle="popover" data-placement="bottom" data-content="因竞争丢失关闭">span>
    135. 		-----------
    136. 		<span class="closingDate">${tran.expectedDate}span>
    137. 	div>
    138. 	
    139. 	
    140. 	<div style="position: relative; top: 0px;">
    141. 		<div style="position: relative; left: 40px; height: 30px;">
    142. 			<div style="width: 300px; color: gray;">所有者div>
    143. 			<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${tran.owner}b>div>
    144. 			<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">金额div>
    145. 			<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${tran.money}b>div>
    146. 			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;">div>
    147. 			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;">div>
    148. 		div>
    149. 		<div style="position: relative; left: 40px; height: 30px; top: 10px;">
    150. 			<div style="width: 300px; color: gray;">名称div>
    151. 			<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${tran.name}b>div>
    152. 			<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">预计成交日期div>
    153. 			<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${tran.expectedDate}b>div>
    154. 			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;">div>
    155. 			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;">div>
    156. 		div>
    157. 		<div style="position: relative; left: 40px; height: 30px; top: 20px;">
    158. 			<div style="width: 300px; color: gray;">客户名称div>
    159. 			<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${tran.customerId}b>div>
    160. 			<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">阶段div>
    161. 			<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${tran.stage}b>div>
    162. 			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;">div>
    163. 			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;">div>
    164. 		div>
    165. 		<div style="position: relative; left: 40px; height: 30px; top: 30px;">
    166. 			<div style="width: 300px; color: gray;">类型div>
    167. 			<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${tran.type}b>div>
    168. 			<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">可能性div>
    169. 			<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${string}b>div>
    170. 			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;">div>
    171. 			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;">div>
    172. 		div>
    173. 		<div style="position: relative; left: 40px; height: 30px; top: 40px;">
    174. 			<div style="width: 300px; color: gray;">来源div>
    175. 			<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${tran.source}b>div>
    176. 			<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">市场活动源div>
    177. 			<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${tran.activityId}b>div>
    178. 			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;">div>
    179. 			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;">div>
    180. 		div>
    181. 		<div style="position: relative; left: 40px; height: 30px; top: 50px;">
    182. 			<div style="width: 300px; color: gray;">联系人名称div>
    183. 			<div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>${tran.contactsId}b>div>
    184. 			<div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;">div>
    185. 		div>
    186. 		<div style="position: relative; left: 40px; height: 30px; top: 60px;">
    187. 			<div style="width: 300px; color: gray;">创建者div>
    188. 			<div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>${tran.createBy}  b><small style="font-size: 10px; color: gray;">${tran.createTime}small>div>
    189. 			<div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;">div>
    190. 		div>
    191. 		<div style="position: relative; left: 40px; height: 30px; top: 70px;">
    192. 			<div style="width: 300px; color: gray;">修改者div>
    193. 			<div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>${tran.editBy}  b><small style="font-size: 10px; color: gray;">${tran.editTime}small>div>
    194. 			<div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;">div>
    195. 		div>
    196. 		<div style="position: relative; left: 40px; height: 30px; top: 80px;">
    197. 			<div style="width: 300px; color: gray;">描述div>
    198. 			<div style="width: 630px;position: relative; left: 200px; top: -20px;">
    199. 				<b>
    200. 					${tran.description}
    201. 				b>
    202. 			div>
    203. 			<div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;">div>
    204. 		div>
    205. 		<div style="position: relative; left: 40px; height: 30px; top: 90px;">
    206. 			<div style="width: 300px; color: gray;">联系纪要div>
    207. 			<div style="width: 630px;position: relative; left: 200px; top: -20px;">
    208. 				<b>
    209. 					 ${tran.contactSummary}
    210. 				b>
    211. 			div>
    212. 			<div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;">div>
    213. 		div>
    214. 		<div style="position: relative; left: 40px; height: 30px; top: 100px;">
    215. 			<div style="width: 300px; color: gray;">下次联系时间div>
    216. 			<div style="width: 500px;position: relative; left: 200px; top: -20px;"><b> ${tran.nextContactTime}b>div>
    217. 			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -20px;">div>
    218. 		div>
    219. 	div>
    220. 	
    221. 	
    222. 	<div style="position: relative; top: 100px; left: 40px;">
    223. 		<div class="page-header">
    224. 			<h4>备注h4>
    225. 		div>
    226. 		
    227. 		
    228. 		<c:forEach items="${tranRemarkList}" var="remark">
    229. 			<div class="remarkDiv" id="div_${remark.id}" style="height: 60px;">
    230. 				<img title="${remark.createBy}" src="image/user-thumbnail.png" style="width: 30px; height:30px;">
    231. 				<div style="position: relative; top: -40px; left: 40px;" >
    232. 					<h5>${remark.noteContent}h5>
    233. 					<font color="gray">交易font> <font color="gray">-font> <b>${tran.name}b> <small style="color: gray;"> ${remark.editFlag=='0'?remark.createTime:remark.editTime} 由${remark.editFlag=='0'?remark.createBy:remark.editBy}${remark.editFlag=='0'?"创建":"修改"}small>
    234. 					<div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">
    235. 						<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>
    236. 						    
    237. 						<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>
    238. 					div>
    239. 				div>
    240. 			div>
    241. 		c:forEach>
    242.  
    243.  
    244. 		
    245. 		<div id="remarkDiv" style="background-color: #E6E6E6; width: 870px; height: 90px;">
    246. 			<form role="form" style="position: relative;top: 10px; left: 10px;">
    247. 				<textarea id="remark" class="form-control" style="width: 850px; resize : none;" rows="2"  placeholder="添加备注...">textarea>
    248. 				<p id="cancelAndSaveBtn" style="position: relative;left: 737px; top: 10px; display: none;">
    249. 					<button id="cancelBtn" type="button" class="btn btn-default">取消button>
    250. 					<button type="button" class="btn btn-primary">保存button>
    251. 				p>
    252. 			form>
    253. 		div>
    254. 	div>
    255. 	
    256. 	
    257. 	<div>
    258. 		<div style="position: relative; top: 100px; left: 40px;">
    259. 			<div class="page-header">
    260. 				<h4>阶段历史h4>
    261. 			div>
    262. 			<div style="position: relative;top: 0px;">
    263. 				<table id="activityTable" class="table table-hover" style="width: 900px;">
    264. 					<thead>
    265. 						<tr style="color: #B3B3B3;">
    266. 							<td>阶段td>
    267. 							<td>金额td>
    268. 							<td>预计成交日期td>
    269. 							<td>创建时间td>
    270. 							<td>创建人td>
    271. 						tr>
    272. 					thead>
    273. 					<tbody>
    274. 						<c:forEach items="${tranHistories}" var="th">
    275. 							<tr>
    276. 								<td>${th.stage}td>
    277. 								<td>${th.money}td>
    278. 								<td>${th.expectedDate}td>
    279. 								<td>${th.createTime}td>
    280. 								<td>${th.createBy}td>
    281. 							tr>
    282. 						c:forEach>
    283. 					tbody>
    284. 				table>
    285. 			div>
    286. 			
    287. 		div>
    288. 	div>
    289. 	
    290. 	<div style="height: 200px;">div>
    291. 	
    292. body>
    293. html>

    功能测试

     

     

     

  • 相关阅读:
    什么是等效焦距
    星际争霸之小霸王之小蜜蜂（十三）--接着奏乐接着舞
    AtCoder abc140
    书写Prompt的经验总结
    六、阻塞队列与源码分析（上）
    快速修复“找不到xinput1_3.dll无法继续执行此代码的”问题的5个方法
    【Vue】鼠标悬浮卡片展示可点击按钮
    端口转发及防火墙过滤设置
    一些杂七杂八的笔记
    m在simulink进行DS-CDMA建模,然后通过MATLAB调用simulink模型进行误码率仿真
  • 原文地址：https://blog.csdn.net/weixin_59334478/article/details/127377256