当前位置：网站首页>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
边栏推荐
- 第3章业务功能开发（线索备注的删除和修改）
- Problems encountered in special flow & properties property set instances and Solutions
- Excel 用countif 统计
- Prometheus + AlertManager 消息预警
- 进程间通信---对管道的详细讲解(图文案例讲解)
- 一文读懂Okaleido Tiger近期动态，挖掘背后价值与潜力
- The first of the five tips for using browsers efficiently is the most practical
- 千万不要把Request传递到异步线程里面，有坑
- Click the button to slide to the specified position
- STM32 DMA receives serial port data
猜你喜欢
Day 14: continued day 13 label related knowledge
Responsive dream weaving template home decoration website
应用系统中的报表开发成本值多少？
基于C51实现数码管的显示
Character flow comprehensive exercise problem solving process
C语言提高篇(一)
Complete collection of common error handling in MySQL installation
防止勒索软件攻击数据的十种方法
记一次 ERROR scheduler.AsyncEventQueue: Dropping event from queue shared导致OOM
Custom MVC principle and framework implementation
随机推荐
webview攻击
千万不要把Request传递到异步线程里面，有坑
Idea connection database
JVM内存溢出在线分析Dump文件以及在线分析打开.hprof文件得出JVM运行报告jvisualvm怎么在线分析
「活动推荐」冲冲冲！2022 国际开源节有新内容
RGBD点云降采样
费曼学习法（符号表）
数据安全与隐私计算峰会-安全求交集在隐私计算中的发展和应用：学习
Form verification hidden input box is displayed before verification
【RT学习笔记1】RT-Thread外设例程——控制Led灯闪烁
Cookies and sessions
2022.7.28-----leetcode.1331
Probability Density Reweight
Day 14: continued day 13 label related knowledge
自定义mvc原理和框架实现
[simple implementation and extension of one · data | array heap]
2022.7.27-----leetcode.592
网络安全漏洞管理的探索与实践
Ignore wechat font settings
【质量】代码质量评价标准