当前位置：网站首页>Chapter 3 business function development (deletion and modification of clue remarks)
Chapter 3 business function development (deletion and modification of clue remarks)
2022-07-29 02:23:00 【Make a light】
1. Delete the note according to the clue note id, Pass in the value , The return type is int; The parameter passed by the update clue note is the same entity , So it is encapsulated into the same entity class object to pass values .
2.ClueRemarkMapper Interface
/**
* Delete thread notes
* @param id
* @return
*/
int deleteClueRemarkById(String id);
/**
* Update lead notes
* @param clueRemark
* @return
*/
int updateClueRemarkById(ClueRemark clueRemark);ClueRemarkMapper.xml file
<delete id="deleteClueRemarkById" parameterType="string">
delete from tbl_clue_remark
where id=#{id}
</delete>
<update id="updateClueRemarkById" parameterType="com.it.crm.workbench.entity.ClueRemark">
update tbl_clue_remark
set note_content=#{noteContent},edit_by=#{editBy},edit_time=#{editTime},edit_flag=#{editFlag}
where id=#{id}
</update>3.ClueRemarkService Interface
ClueRemarkServiceImpl Implementation class
@Override
public int removeClueRemarkById(String id) {
return clueRemarkMapper.deleteClueRemarkById(id);
}
@Override
public int saveEditClueRemarkById(ClueRemark clueRemark) {
return clueRemarkMapper.updateClueRemarkById(clueRemark);
}4.ClueRemarkController class
@RequestMapping(value = "/workbench/clue/removeClueRemarkById.do")
@ResponseBody
public Object removeClueRemarkById(String id){
ReturnObject returnObject=new ReturnObject();
try{
// call service Layer method , Return result information
int i = clueRemarkService.removeClueRemarkById(id);
// Based on the returned results , Generate response information
if (i>0){
returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);
}else {
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage(" The system is busy , Please try again later ！");
}
}catch (Exception e){
e.printStackTrace();
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage(" The system is busy , Please try again later ！");
}
return returnObject;
}
@RequestMapping(value = "/workbench/clue/saveEditClueRemark.do")
@ResponseBody
public Object saveEditClueRemark(ClueRemark clueRemark,HttpSession httpSession){
ReturnObject returnObject=new ReturnObject();
User user= (User) httpSession.getAttribute(Contants.SESSION_USER);
// Package parameters
clueRemark.setEditTime(DateUtils.formateDateTime(new Date()));
clueRemark.setEditBy(user.getId());
clueRemark.setEditFlag(Contants.REMARK_EDIT_FLAG_YES_EDITED);
try{
// call service Layer method , Generate return information
int i = clueRemarkService.saveEditClueRemarkById(clueRemark);
if (i>0){
returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);
returnObject.setReturnData(clueRemark);
}else {
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage(" The system is busy , Please try again later ！");
}
}catch (Exception e){
e.printStackTrace();
returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
returnObject.setMessage(" The system is busy , Please try again later ！");
}
return returnObject;
}5.clue Of detail.jsp page
<%@page contentType="text/html; charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
<meta charset="UTF-8">
<base href="<%=basePath%>">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
// By default, the cancel and save buttons are hidden
var cancelAndSaveBtnDefault = true;
$(function(){
$("#remark").focus(function(){
if(cancelAndSaveBtnDefault){
// Set up remarkDiv The height of 130px
$("#remarkDiv").css("height","130px");
// Show
$("#cancelAndSaveBtn").show("2000");
cancelAndSaveBtnDefault = false;
}
});
$("#cancelBtn").click(function(){
// Show
$("#cancelAndSaveBtn").hide();
// Set up remarkDiv The height of 130px
$("#remarkDiv").css("height","90px");
cancelAndSaveBtnDefault = true;
});
$("#remarkList").on("mouseover",".remarkDiv",function () {
$(this).children("div").children("div").show();
});
$("#remarkList").on("mouseout",".remarkDiv",function () {
$(this).children("div").children("div").hide();
});
$("#remarkList").on("mouseover",".myHref",function () {
$(this).children("span").css("color","red");
});
$("#remarkList").on("mouseout",".myHref",function () {
$(this).children("span").css("color","#E6E6E6");
});
// Add a click event to the Save button
$("#saveCreateClueRemarkBtn").click(function () {
// Collection parameters
var noteContent=$.trim($("#remark").val());
var clueId='${clue.id}';
// validate form
if (noteContent==""){
alert(" Remarks cannot be empty !");
return;
}
// Send a request
$.ajax({
url:"workbench/clue/saveCreateClueRemark.do",
type:'post',
data:{
noteContent:noteContent,
clueId:clueId
},
dataType:'json',
success:function (data) {
if (data.code=="1"){
// Empty the filled form
$("#remark").val("");
// Splicing data
var htmlStr="";
htmlStr+="<div class=\"remarkDiv\" id=\"div_"+data.returnData.id+"\" style=\"height: 60px;\">";
htmlStr+="<img title=\"${sessionScope.sessionUser.name}\" src=\"image/user-thumbnail.png\" style=\"width: 30px; height:30px;\">";
htmlStr+="<div style=\"position: relative; top: -40px; left: 40px;\" >";
htmlStr+="<h5>"+data.returnData.noteContent+"</h5>";
htmlStr+="<font color=\"gray\"> clue </font> <font color=\"gray\">-</font> <b>${clue.fullname}${clue.appellation}-${clue.company}</b> <small style=\"color: gray;\">"+data.returnData.createTime+" from ${sessionScope.sessionUser.name} establish </small>";
htmlStr+="<div style=\"position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;\">";
htmlStr+="<a class=\"myHref\" name=\"editA\" remarkId=\""+data.returnData.id+"\" href=\"javascript:void(0);\"><span class=\"glyphicon glyphicon-edit\" style=\"font-size: 20px; color: #E6E6E6;\"></span></a>";
htmlStr+=" ";
htmlStr+="<a class=\"myHref\" name=\"deleteA\" remarkId=\""+data.returnData.id+"\" href=\"javascript:void(0);\"><span class=\"glyphicon glyphicon-remove\" style=\"font-size: 20px; color: #E6E6E6;\"></span></a>";
htmlStr+="</div></div></div>";
$("#remarkDiv").before(htmlStr);
} else {
alert(data.message);
}
}
});
});
// Add a click event to the delete button
$("#remarkList").on("click","a[name='deleteA']",function () {
// Collection parameters
var id=$(this).attr("remarkId");
// Send a request
$.ajax({
url:"workbench/clue/removeClueRemarkById.do",
type: 'post',
data: {
id:id
},
dataType: 'json',
success:function (data) {
if (data.code=="1"){
// Delete the current data , Refresh form
$("#div_"+id).remove();
} else {
alert(data.message);
}
}
});
});
// Add a click event to the modify icon
$("#remarkList").on("click","a[name='editA']",function () {
var id=$(this).attr("remarkId");
var noteContent=$("#div_"+id+" h5").text();
// Set the value of the modal window
$("#noteContent").val(noteContent);
$("#edit-id").val(id);
$("#editRemarkModal").modal("show");
});
// Add a click event to the update button
$("#updateRemarkBtn").click(function () {
// Collection parameters
var id=$("#edit-id").val();
var noteContent=$.trim($("#noteContent").val());
// validate form
if (noteContent==""){
alert(" The content cannot be empty ！");
return;
}
// Send a request
$.ajax({
url:"workbench/clue/saveEditClueRemark.do",
type:'post',
dataType:'json',
data:{
id:id,
noteContent:noteContent
},
success:function (data) {
if (data.code=="1"){
$("#editRemarkModal").modal("hide");
// Refresh the notes list
$("#div_"+data.returnData.id+" h5").text(data.returnData.noteContent);
$("#div_"+data.returnData.id+" small").text(" "+data.returnData.editTime+" from ${sessionScope.sessionUser.name} modify ")
}else {
alert(data.message);
$("#editRemarkModal").modal("show");
}
}
});
});
});
</script>
</head>
<body>
<!-- Modify the modal window of campaign notes -->
<div class="modal fade" id="editRemarkModal" role="dialog">
<%-- Remarks id --%>
<input type="hidden" id="remarkId">
<div class="modal-dialog" role="document" style="width: 40%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel"> Revise notes </h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<input type="hidden" id="edit-id">
<div class="form-group">
<label for="noteContent" class="col-sm-2 control-label"> Content </label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="noteContent"></textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"> close </button>
<button type="button" class="btn btn-primary" id="updateRemarkBtn"> to update </button>
</div>
</div>
</div>
</div>
<!-- Modal window of related market activities -->
<div class="modal fade" id="bundModal" role="dialog">
<div class="modal-dialog" role="document" style="width: 80%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title"> Related market activities </h4>
</div>
<div class="modal-body">
<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
<form class="form-inline" role="form">
<div class="form-group has-feedback">
<input type="text" class="form-control" style="width: 300px;" placeholder=" Please enter the campaign name , Support fuzzy query ">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</div>
<table id="activityTable" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
<thead>
<tr style="color: #B3B3B3;">
<td><input type="checkbox"/></td>
<td> name </td>
<td> Start date </td>
<td> End date </td>
<td> owner </td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td> Distributing leaflets </td>
<td>2020-10-10</td>
<td>2020-10-20</td>
<td>zhangsan</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td> Distributing leaflets </td>
<td>2020-10-10</td>
<td>2020-10-20</td>
<td>zhangsan</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"> Cancel </button>
<button type="button" class="btn btn-primary" data-dismiss="modal"> relation </button>
</div>
</div>
</div>
</div>
<!-- Return button -->
<div style="position: relative; top: 35px; left: 10px;">
<a href="javascript:void(0);" onclick="window.history.back();"><span class="glyphicon glyphicon-arrow-left" style="font-size: 20px; color: #DDDDDD"></span></a>
</div>
<!-- Headline -->
<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" onclick="window.location.href='convert.html';"><span class="glyphicon glyphicon-retweet"></span> transformation </button>
</div>
</div>
<br/>
<br/>
<br/>
<!-- Details -->
<div style="position: relative; top: -70px;">
<div style="position: relative; left: 40px; height: 30px;">
<div style="width: 300px; color: gray;"> name </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;"> owner </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;"> company </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;"> Position </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;"> mailbox </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;"> Company line </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;"> The company's web site </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;"> mobile phone </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;"> Clue status </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;"> Source of clues </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;"> The creator </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;"> Reviser </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;"> describe </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;"> Contact minutes </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;"> Next contact time </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;"> Detailed address </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>
<!-- remarks -->
<div id="remarkList" style="position: relative; top: 40px; left: 40px;">
<div class="page-header">
<h4> remarks </h4>
</div>
<c:forEach items="${clueRemarks}" 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"> clue </font> <font color="gray">-</font> <b>${clue.fullname}${clue.appellation}-${clue.company}</b> <small style="color: gray;"> ${remark.editFlag=='0'?remark.createTime:remark.editTime} from ${remark.editFlag=='0'?remark.createBy:remark.editBy}${remark.editFlag=='0'?" establish ":" modify "}</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>
<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=" Add notes ..."></textarea>
<p id="cancelAndSaveBtn" style="position: relative;left: 737px; top: 10px; display: none;">
<button id="cancelBtn" type="button" class="btn btn-default"> Cancel </button>
<button type="button" class="btn btn-primary" id="saveCreateClueRemarkBtn"> preservation </button>
</p>
</form>
</div>
</div>
<!-- Marketing activities -->
<div>
<div style="position: relative; top: 60px; left: 40px;">
<div class="page-header">
<h4> Marketing activities </h4>
</div>
<div style="position: relative;top: 0px;">
<table class="table table-hover" style="width: 900px;">
<thead>
<tr style="color: #B3B3B3;">
<td> name </td>
<td> Start date </td>
<td> End date </td>
<td> owner </td>
<td></td>
</tr>
</thead>
<tbody>
<c:forEach items="${activityList}" var="activity">
<tr>
<td>${activity.name}</td>
<td>${activity.startDate}</td>
<td>${activity.endDate}</td>
<td>${activity.owner}</td>
<td><a href="javascript:void(0);" activityId="${activity.id}" style="text-decoration: none;"><span class="glyphicon glyphicon-remove"></span> Disassociate </a></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<div>
<a href="javascript:void(0);" data-toggle="modal" data-target="#bundModal" style="text-decoration: none;"><span class="glyphicon glyphicon-plus"></span> Related market activities </a>
</div>
</div>
</div>
<div style="height: 200px;"></div>
</body>
</html>A functional test
Enter the clue remarks page
Select the note information to delete , Click delete , Delete directly
Select the data item to modify , Click Modify
Modify data content , Click Update
边栏推荐
- 如果时间不够，无法进行充分的测试怎么办？
- Kubesphere multi node installation
- Navigation--实现Fragment之间数据传递和数据共享
- Opencv image sharpness evaluation (camera autofocus)
- 【ONE·Data || 链式二叉树】
- The first of the five tips for using browsers efficiently is the most practical
- Responsive Zhimeng template decoration design website
- Awvs cannot start problem
- 第十四天：续第十三天标签相关知识
- 网络安全漏洞管理的探索与实践
猜你喜欢
How to customize a new tab in Duoyu security browser?
Practice and experience of security compliance in instant messaging scenarios
Responsive dream weaving template home decoration building materials website
「活动推荐」冲冲冲！2022 国际开源节有新内容
Internet of things development -- mqtt message server emqx
第十四天：续第十三天标签相关知识
Custom MVC principle and framework implementation
![[simple implementation and extension of one · data | array heap]](/img/47/6f2c0d5c85cf05a24ba7adbd61e014.png)
[simple implementation and extension of one · data | array heap]
第3章业务功能开发（线索备注的删除和修改）
DevOps 团队如何抵御 API 攻击？
随机推荐
“蔚来杯“2022牛客暑期多校训练营3，签到题CAJHF
[cloud native and 5g] micro services support 5g core network
awvs无法启动问题
Pointer - golden stage
MySQL stores JSON format data
Leetcode 242. valid anagram
How to customize a new tab in Duoyu security browser?
如何在多御安全浏览器中自定义新标签页？
【RT学习笔记1】RT-Thread外设例程——控制Led灯闪烁
[one · data | chained binary tree]
[cloud native] what is the microservice architecture
应用系统中的报表开发成本值多少？
[circuit design] peak voltage and surge current
The first of the five tips for using browsers efficiently is the most practical
Kubesphere-多节点安装
PS + PL heterogeneous multicore case development manual for Ti C6000 tms320c6678 DSP + zynq-7045 (2)
QT learning notes -37.qregex and regular expressions
Prometheus + AlertManager 消息预警
2022.7.28-----leetcode.1331
Work queue_ queue