二十六:交易详细信息

功能需求

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

*显示交易的基本信息

*显示交易的备注信息

*显示交易的历史信息

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

流程图

 

后端代码实现

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?"&nbsp":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?"&nbsp":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?"&nbsp":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?"&nbsp":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}&nbsp;&nbsp;</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?"&nbsp":tran.editBy}&nbsp;&nbsp;</b><small
                style="font-size: 10px; color: gray;">${tran.editTime==null?"&nbsp":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?"&nbsp":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?"&nbsp":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?"&nbsp":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>
                    &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>


    <!-- 备注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;">
    阶段&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值