要实现效果如下:
当数据库已存在该用户信息时,对其进行修改,保存;用户点击新增时,后台对其进行添加保存到数据库。之前分别使用数组接收报错,最后使用封装方式统一接收
前台代码:JSP+LayerUI
<!--联系方式-->
<div class="layui-tab-item">
<form class="layui-form form" action="" id="contactsList">
<c:if test="${!empty contactsList }">
<c:forEach items="${contactsList }" var="contacts" varStatus="co">
<div class="layui-form-item">
<label class="layui-form-label">联系人<span class="redPoint">*</span></label>
<div class="layui-input-block">
<input type="text" value="${contacts.realName }" name="realName[${co.count-1}]" lay-verify="required" placeholder="客户名称" autocomplete="off" class="layui-input form-input-half" >
<input type="hidden" value="${contacts.contactsId }" name="contactsId[${co.count-1}]">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">电话 </label>
<div class="layui-input-block">
<input type="text" name="phone[${co.count-1}]" lay-verify="tel" placeholder="电话" value="${contacts.phone }" autocomplete="off" class="layui-input form-input-half" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">微信 </label>
<div class="layui-input-block">
<input type="text" name="wechat[${co.count-1}]" value="${contacts.wechat }" placeholder="微信" autocomplete="off" class="layui-input form-input-half" >
</div>
</div>
<hr>
</c:forEach>
</c:if>
<c:if test="${empty contactsList }">
<div class="layui-form-item">
<label class="layui-form-label">联系人<span class="redPoint"></span></label>
<div class="layui-input-block">
<input type="text" value="" name="realName[0]" lay-verify="required" placeholder="联系人" autocomplete="off" class="layui-input form-input-half" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">电话 </label>
<div class="layui-input-block">
<input type="text" name="phone[0]" lay-verify="tel" placeholder="电话" value="" autocomplete="off" class="layui-input form-input-half" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">微信 </label>
<div class="layui-input-block">
<input type="text" name="wechat[0]" value="" placeholder="微信" autocomplete="off" class="layui-input form-input-half" >
</div>
</div>
</c:if>
<div class="layui-form-item" style="padding-left: 110px;" id="contactBox">
<a href="javascript:void(0);" class="layui-btn layui-btn-primary" id="createContacts"><i class="layui-icon layui-icon-add-circle"></i> 新建联系人</a>
</div>
<div class="layui-form-item" style="padding-left: 110px;">
<button class="layui-btn" lay-submit lay-filter="contactsList">保存</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
<input type="hidden" value="${enterprise.enterpriseId}" name="enterpriseId"/>
</form>
</div>
JS:关于新增联系人
$('#createContacts').click(function(){
var i = $("input[name^='realName']").length;
let contactBox = '<div class="layui-form-item">'+
'<label class="layui-form-label">联系人<span class="redPoint">*</span></label>'+
'<div class="layui-input-block">'+
'<input type="text" name="realName['+i+']" value="" lay-verify="required" placeholder="姓名" autocomplete="off" class="layui-input form-input-half">'+
'</div>'+
'</div>'+
'<div class="layui-form-item">'+
'<label class="layui-form-label">电话 </label>'+
'<div class="layui-input-block">'+
'<input type="text" name="phone['+i+']" lay-verify="tel" value="" placeholder="电话" autocomplete="off" class="layui-input form-input-half">'+
'</div>'+
'</div>'+
'<div class="layui-form-item">'+
'<label class="layui-form-label">微信 </label>'+
'<div class="layui-input-block">'+
'<input type="text" name="wechat['+i+']" placeholder="微信" autocomplete="off" class="layui-input form-input-half" value="">'+
'</div>'+
'</div><hr/>';
$('#contactBox').before(contactBox);
form.render();//layerui重新渲染
});
//后台处理
// 保存企业联系方式
@RequestMapping("/modifyContacts")
@OperateAnnotation(operateName = "进行了编辑企业联系方式操作,企业名称:")
public @ResponseBody String modifyContacts(Integer enterpriseId, ContactsModel contactsModel,
String operateObject) {
UserOnlineBean userOnlineBean = getUserOnlineBean();
if (null != userOnlineBean) {
try {
List<Contacts> list = new ArrayList<Contacts>();
List<Integer> contactsId = contactsModel.getContactsId();
List<String> realName = contactsModel.getRealName();
List<String> phone = contactsModel.getPhone();
List<String> wechat = contactsModel.getWechat();
if (null != contactsId && contactsId.size() > 0) {
for (int i = 0; i < contactsId.size(); i++) {
Contacts contact = contactsService.getEntity(contactsId.get(i));
contact.setContactsId(contactsId.get(i));
contact.setPhone(phone.get(i));
contact.setRealName(realName.get(i));
contact.setWechat(wechat.get(i));
list.add(contact);
}
// 用户新增联系人信息
if (contactsId.size() < realName.size()) {
for (int i = contactsId.size(); i < realName.size(); i++) {
if (StringUtils.isNotBlank(realName.get(i)) || StringUtils.isNotBlank(wechat.get(i))
|| StringUtils.isNotBlank(phone.get(i))) {
Contacts contact = new Contacts();
contact.setCreateDate(new Date());
contact.setEnterpriseId(enterpriseId);
contact.setPhone(phone.get(i));
contact.setRealName(realName.get(i));
contact.setWechat(wechat.get(i));
list.add(contact);
}
}
}
} else {
// 纯新添加
for (int i = 0; i < realName.size(); i++) {
Contacts contact = new Contacts();
contact.setCreateDate(new Date());
contact.setEnterpriseId(enterpriseId);
contact.setPhone(phone.get(i));
contact.setRealName(realName.get(i));
contact.setWechat(wechat.get(i));
list.add(contact);
}
}
contactsService.modifyContacts(list);
Map<String, Object> map = new HashMap<String, Object>(0);
map.put("code", "200");
map.put("message", "修改联系人信息成功!");
Gson gson = new Gson();
return gson.toJson(map);
} catch (ServiceException e) {
// TODO Auto-generated catch block
} catch (Exception e) {
log.error("修改客户集发生错误!", e);
}
}
return null;
}
//ContactsModel:
public class ContactsModel {
List<Integer> contactsId;
List<String> realName;
List<String> phone;
List<String> wechat;
public List<Integer> getContactsId() {
return contactsId;
}
public void setContactsId(List<Integer> contactsId) {
this.contactsId = contactsId;
}
public List<String> getRealName() {
return realName;
}
public void setRealName(List<String> realName) {
this.realName = realName;
}
public List<String> getPhone() {
return phone;
}
public void setPhone(List<String> phone) {
this.phone = phone;
}
public List<String> getWechat() {
return wechat;
}
public void setWechat(List<String> wechat) {
this.wechat = wechat;
}
}