第3章业务功能开发（添加线索备注，自动刷新添加内容）

1.添加线索备注，返回类型为int,通过判断Int是否大于0来确定语句是否执行成功。

因为添加的内容同属于一个实体类，所以封装成一个实体类,下面是具体实施

2.ClueRemarkMapper接口

 

ClueRemarkMapper.xml文件

<insert id="insertClueRemark" parameterType="com.it.crm.workbench.entity.ClueRemark">
  insert into tbl_clue_remark(id, note_content, create_by, create_time, edit_flag, clue_id)
  values (#{id},#{noteContent} ,#{createBy} , #{createTime}, #{editFlag}, #{clueId})
  </insert>

3.ClueRemarkService接口

 

ClueRemarkServiceImpl

4.ClueRemarkController

@RequestMapping(value = "/workbench/clue/saveCreateClueRemark.do")
    @ResponseBody
    public Object saveCreateClueRemark(ClueRemark clueRemark, HttpSession httpSession){
        ReturnObject returnObject=new ReturnObject();
        User user = (User) httpSession.getAttribute(Contants.SESSION_USER);
        //封装参数
        clueRemark.setId(UUIDUtils.getUUID());
        clueRemark.setCreateBy(user.getId());
        clueRemark.setCreateTime(DateUtils.formateDateTime(new Date()));
        clueRemark.setEditFlag(Contants.REMARK_EDIT_FLAG_NO_EDITED);
        try{
            //调用service层方法，返回结果
            int i = clueRemarkService.saveCreateClueRemark(clueRemark);
            //根据返回结果，生成响应信息
            if (i>0){
                returnObject.setCode(Contants.RETURN_OBJECT_CODE_SUCCESS);
                returnObject.setReturnData(clueRemark);
            }else {
                returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
                returnObject.setMessage("系统忙，请稍后重试！");
            }
        }catch (Exception e){
            e.printStackTrace();
            returnObject.setCode(Contants.RETURN_OBJECT_CODE_FAIL);
            returnObject.setMessage("系统忙，请稍后重试！");
        }
        return returnObject;
    }

5.clue的deatil.jsp页面

js

		//给保存按钮添加单击事件
		$("#saveCreateClueRemarkBtn").click(function () {
			//收集参数
			var noteContent=$.trim($("#remark").val());
			var clueId='${clue.id}';
			//验证表单
			if (noteContent==""){
				alert("备注内容不能为空!");
				return;
			}
			//发送请求
			$.ajax({
				url:"workbench/clue/saveCreateClueRemark.do",
				type:'post',
				data:{
					noteContent:noteContent,
					clueId:clueId
				},
				dataType:'json',
				success:function (data) {
					if (data.code=="1"){
						//清空填写的表单
						$("#remark").val("");
						//拼接数据
						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\">线索</font> <font color=\"gray\">-</font> <b>${clue.fullname}${clue.appellation}-${clue.company}</b> <small style=\"color: gray;\">\""+data.returnData.createTime+"由${sessionScope.sessionUser.name}创建\"</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+="&nbsp;&nbsp;&nbsp;&nbsp;";
						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);
					}
				}
			});
		});

html

<!-- 备注 -->
	<div style="position: relative; top: 40px; left: 40px;">
		<div class="page-header">
			<h4>备注</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">线索</font> <font color="gray">-</font> <b>${clue.fullname}${clue.appellation}-${clue.company}</b> <small style="color: gray;"> ${remark.editFlag=='0'?remark.createTime:remark.editTime} 由${remark.editFlag=='0'?remark.createBy:remark.editBy}${remark.editFlag=='0'?"创建":"修改"}</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>
						&nbsp;&nbsp;&nbsp;&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>

		
		<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="saveCreateClueRemarkBtn">保存</button>
				</p>
			</form>
		</div>
	</div>

功能测试

在线索备注页面，点击备注保存按钮

 输入内容后点击保存按钮，自动添加到数据库，并在页面自动刷新显示