当前位置：网站首页>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
边栏推荐
- Excel 打开包含汉字的 csv 文件出现乱码该怎么办？
- 如何在多御安全浏览器中自定义新标签页？
- 2022.7.27-----leetcode.592
- 千万不要把Request传递到异步线程里面，有坑
- Prevent repeated clicks
- Related function records about string processing (long-term update)
- 关于高并发，我想聊一聊。
- 响应式织梦模板装修设计类网站
- The financing demand of 129 million yuan was released, and the roadshow of the Dake city project continued to irrigate the "good seedlings" of scientific innovation
- Thermistor temperature calculation formula program
猜你喜欢
Responsive dream weaving template hotel room website
响应式织梦模板户外露营类网站
C语言提高篇(一)
The first of the five tips for using browsers efficiently is the most practical
STM32 DMA receives serial port data
npm install 报错 Error: EPERM: operation not permitted, rename
MySQL stores JSON format data
数据安全与隐私计算峰会-安全求交集在隐私计算中的发展和应用：学习
Responsive Zhimeng template decoration design website
Rgbd point cloud down sampling
随机推荐
Day 14: continued day 13 label related knowledge
Click back to the top JS
Rgbd point cloud down sampling
物联网开发--MQTT消息服务器EMQX
Complete collection of common error handling in MySQL installation
Prometheus + AlertManager 消息预警
Jetpack -- navigation realizes page Jump
Installation guide for proftpd Secure FTP server with TLS encryption enabled
[simple implementation and extension of one · data | array heap]
【RT学习笔记1】RT-Thread外设例程——控制Led灯闪烁
响应式织梦模板化妆美妆类网站
如果非要在多线程中使用 ArrayList 会发生什么？
Responsive dream weaving template home decoration building materials website
Responsive dream weaving template hotel room website
Feynman learning method (symbol table)
How much is the report development cost in the application system?
Object based real-time spatial audio rendering - Dev for dev column
Data security and privacy computing summit - development and application of security intersection in privacy Computing: Learning
[RT learning note 1] RT thread peripheral routine - control LED light flashing
WebView attack