功能需求
用户在交易主页面,点击交易名称超级链接,跳转到交易明细页面,完成查看交易明细的功能。
*显示交易的基本信息
*显示交易的备注信息
*显示交易的历史信息
*显示交易的阶段图标信息
流程图
后端代码实现
1.tran
TranMapper
/**
* 根据id查询详细信息
*/
Tran selectTranFortranId(String tranId);
<select id="selectTranFortranId" resultMap="BaseResultMap">
select t.id,u.name owner,t.money,t.name,t.expected_date,c.name as customer_id,dic1.value stage,dic2.value type,dic3.value source,
a.name activity_id,co.fullname contacts_id,t.description,t.contact_summary,t.next_contact_time,
u2.name create_by,t.create_time,u3.name edit_by,t.edit_time
from tbl_tran t
join tbl_user u on t.owner = u.id
left join tbl_user u2 on t.create_by = u2.id
left join tbl_user u3 on t.edit_by = u3.id
left join tbl_dic_value dic1 on t.stage = dic1.id
left join tbl_dic_value dic2 on t.type = dic2.id
left join tbl_dic_value dic3 on t.source = dic3.id
left join tbl_activity a on t.activity_id=a.id
left join tbl_contacts co on t.contacts_id=co.id
left join tbl_customer c on t.customer_id = c.id
where t.id=#{tranId}
</select>
TranService
/**
* 详细信息:根据id
*/
Tran queryTranFortranId(String tranId);
@Override
public Tran queryTranFortranId(String tranId) {
return tranMapper.selectTranFortranId(tranId);
}
2.tranRemarkList
TranRemarkMapper
/**
* 根据交易id查询交易评论
*/
List<TranRemark> selectTranHistoryForTranid(String tranId);
<!-- List<TranRemark> selectTranHistoryForTranid(String tranId);-->
<select id="selectTranHistoryForTranid" resultMap="BaseResultMap">
select tr.id,
tr.note_content,
tr.create_time,
u1.name as create_by,
tr.edit_time,
u2.name as edit_by,
tr.edit_flag
from tbl_tran_remark tr
join tbl_user u1 on tr.create_by = u1.id
left join tbl_user u2 on tr.edit_by = u2.id
where tr.tran_id = #{tranId}
</select>
TranRemarkService
/**
* 根据交易id查询交易评论
*/
List<TranRemark> queryTranHistoryForTranid(String tranId);
@Service
public class TranRemarkServiceImpl implements TranRemarkService {
@Autowired
private TranRemarkMapper tranRemarkMapper;
@Override
public List<TranRemark> queryTranHistoryForTranid(String tranId) {
return tranRemarkMapper.selectTranHistoryForTranid(tranId);
}
}
3.tranHistoryList
TranHistoryMapper
/**
* 根据交易id查询阶段历史
*/
List<TranHistory> selectTranHistoryForTranid(String tranId);
<select id="selectTranHistoryForTranid" resultMap="BaseResultMap">
select th.id, dic1.value stage, th.money, th.expected_date, th.create_time, u.name create_by
from tbl_tran_history th
left join tbl_user u on th.create_by = u.id
left join tbl_dic_value dic1 on th.stage = dic1.id
where th.tran_id = #{tranId}
</select>
TranHistoryService
/**
* 根据交易id查询阶段历史
*/
List<TranHistory> queryTranHistoryForTranid(String tranId);
@Service
public class TranHistoryServiceImpl implements TranHistoryService {
@Autowired
private TranHistoryMapper tranHistoryMapper;
@Override
public List<TranHistory> queryTranHistoryForTranid(String tranId) {
return tranHistoryMapper.selectTranHistoryForTranid(tranId);
}
}
4.stageList
DicValueMapper
/**
* 根据type-code查询字典
*/
List<DicValue> selectDicValueByTypeCode(String typeCode);
<!-- List<DicValue> queryDicValueByTypeCode(String typeCode); -->
<select id="selectDicValueByTypeCode" resultMap="BaseResultMap">
select
<include refid="Base_Column_List"></include>
from tbl_dic_value
where type_code=#{typeCode}
order by order_no asc
</select>
DicValueService
/**
* 根据typecode查询字典
*/
List<DicValue> queryDicValueByTypeCode(String typeCode);
@Autowired
private DicValueMapper dicValueMapper;
@Override
public List<DicValue> queryDicValueByTypeCode(String typeCode) {
return dicValueMapper.selectDicValueByTypeCode(typeCode);
}
5.nowStageNo
DicValueMapper
/**
* 根据id查询所在的OrderNo
*/
int selectDicToOrderNo(Map<String,Object> map);
<!-- int selectDicToOrderNo(String typeCode, String dicValue);-->
<select id="selectDicToOrderNo" resultType="java.lang.Integer">
select order_no
from tbl_dic_value
where type_code=#{typeCode} and value=#{dicValue}
</select>
DicValueService
/**
* 根据类型的值,返回一个数字
*/
int queryDicToOrderNo(Map<String,Object> map);
@Override
public int queryDicToOrderNo(Map<String,Object> map) {
return dicValueMapper.selectDicToOrderNo(map);
}
6. TranController
/**
* 查看交易详情
*/
@RequestMapping("/workbench/transaction/queryTranFortranId.do")
public String queryTranFortranId(HttpServletRequest request,String tranId){
// 调用Service
Tran tran = tranService.queryTranFortranId(tranId);
List<TranRemark> tranRemarkList = tranRemarkService.queryTranHistoryForTranid(tranId);
List<TranHistory> tranHistoryList = tranHistoryService.queryTranHistoryForTranid(tranId);
List<DicValue> stageList = dicValueService.queryDicValueByTypeCode("stage");
// 查询阶段所在的order_no
Map<String,Object> map = new HashMap<>();
map.put("typeCode","stage");
map.put("dicValue",tran.getStage());
int nowStageNo = dicValueService.queryDicToOrderNo(map);
// 保存请求域
request.setAttribute("tran",tran);
request.setAttribute("tranRemarkList",tranRemarkList);
request.setAttribute("tranHistoryList",tranHistoryList);
request.setAttribute("nowStageNo",nowStageNo);
request.setAttribute("stageList",stageList);
return "workbench/transaction/detail";
}
前端代码实现
*显示交易的基本信息
<div style="position: relative; top: 0px;">
<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>${tran.owner}</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>${tran.money}</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>${tran.name}</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>${tran.expectedDate}</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>${tran.customerId}</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>${tran.stage}</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>${tran.type==null?" ":tran.type}</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>${tran.contactsId==null?" ":tran.contactsId}</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>${tran.source==null?" ":tran.source}</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>${tran.activityId==null?" ":tran.activityId}</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: 60px;">
<div style="width: 300px; color: gray;">创建者</div>
<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>
<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: 500px;position: relative; left: 200px; top: -20px;">
<b>${tran.editBy==null?" ":tran.editBy} </b><small
style="font-size: 10px; color: gray;">${tran.editTime==null?" ":tran.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: 80px;">
<div style="width: 300px; color: gray;">描述</div>
<div style="width: 630px;position: relative; left: 200px; top: -20px;">
<b>
${tran.description==null?" ":tran.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: 90px;">
<div style="width: 300px; color: gray;">联系纪要</div>
<div style="width: 630px;position: relative; left: 200px; top: -20px;">
<b>
${tran.contactSummary==null?" ":tran.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: 100px;">
<div style="width: 300px; color: gray;">下次联系时间</div>
<div style="width: 500px;position: relative; left: 200px; top: -20px;">
<b> ${tran.nextContactTime==null?" ":tran.nextContactTime}</b></div>
<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -20px;"></div>
</div>
</div>
*显示交易的备注信息
<div id="remarkDivList" style="position: relative; top: 100px; left: 40px;">
<div class="page-header">
<h4>备注</h4>
</div>
<!-- 备注1 -->
<c:forEach items="${tranRemarkList}" var="remark">
<div id="div_${remark.id}" class="remarkDiv" 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;">
<small style="color: gray;">@${remark.editFlag=='1'?remark.editBy:remark.createBy}:${remark.editFlag=='1'?remark.editTime:remark.createTime}${remark.editFlag=='1'?'修改':'创建'}</small>
<p>${remark.noteContent}</p>
<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>
<!-- 备注2 -->
<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" id="saveClueRemarkBtn">保存</button>
</p>
</form>
</div>
</div>
*显示交易的历史信息
<div>
<div style="position: relative; top: 100px; left: 40px;">
<div class="page-header">
<h4>阶段历史</h4>
</div>
<div style="position: relative;top: 0px;">
<table id="activityTable" 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="${tranHistoryList}" var="history">
<tr>
<td>${history.stage}</td>
<td>${history.money}</td>
<td>${history.expectedDate}</td>
<td>${history.createBy}</td>
<td>${history.createTime}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
*显示交易的阶段图标信息
<div style="position: relative; left: 40px; top: -50px;">
阶段
<c:forEach items="${stageList}" var="stage">
<%--当前阶段--%>
<c:if test="${stage.orderNo==nowStageNo}">
<!--如果stage就是当前交易所处阶段,则图标显示为map-marker,颜色显示为绿色-->
<span class="glyphicon glyphicon-map-marker mystage" data-toggle="popover" data-placement="bottom" data-content="${stage.value}" style="color: #90F790;"></span>
-----------
</c:if>
<%--后面的--%>
<c:if test="${stage.orderNo>nowStageNo}">
<span class="glyphicon glyphicon-record mystage" data-toggle="popover" data-placement="bottom" data-content="${stage.value}"></span>
-----------
</c:if>
<%--前面的--%>
<c:if test="${stage.orderNo<nowStageNo}">
<span class="glyphicon glyphicon-ok-circle mystage" data-toggle="popover" data-placement="bottom" data-content="${stage.value}" style="color: #90F790;"></span>
-----------
</c:if>
</c:forEach>
<span class="closingDate">${tran.expectedDate}</span>
</div>