共计 13559 个字符，预计需要花费 34 分钟才能阅读完成。
表单中有一个接管明细的子列表，html:
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header" style="background-color: #e6e6e6"> 接管明细 </div>
<div class="layui-card-body" style="height: 200px;">
<table class="layui-hide" id="companyPaperRecordDetailListTable" lay-filter="companyPaperRecordDetailListTable"></table>
<script type="text/html" id="companyPaperRecordDetailListTable-toolbar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-xs" data-type="addRec"> 增加 </button>
</div>
</script>
<script type="text/html" id="companyPaperRecordDetailListTable-bar">
<a class="layui-btn layui-btn-xs" lay-event="editRec"> 编辑 </a>
<button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delRec"> 删除 </button>
</script>
</div>
</div>
</div>js :
var detailList = [];
var detailTable = table.render({
elem:'#companyPaperRecordDetailListTable'
,data:detailList
,cellMinWidth: 80
,toolbar: '#companyPaperRecordDetailListTable-toolbar'
,defaultToolbar: []
,cols: [[,{field:'licenceName', title: '证照名称', align: 'center',minWidth:150}
,{field:'certType', title: '证件类型', align: 'center',width:130,templet:tplCertType}
,{field:'cnt', title: '数量', align: 'center',width:130}
,{field:'attachment', title: '附件', align: 'center',width:160,templet:tplAttachment}
,{title:'操作', toolbar: '#companyPaperRecordDetailListTable-bar', width:150}
]]
,height: '200'
,done: function(res, curr, count){}});监听表格事件：
table.on('tool(companyPaperRecordDetailListTable)', function(obj){switch(obj.event){
case 'editRec':
active.editRec(obj);
break;
case 'showRec':
active.showRec(obj);
break;
case 'delRec':
active.delRec(obj);
break;
}
});对应的事件：
var active = {getSubData:function () {
var cnt = 0;
$.each(detailList,function (index,item) {cnt+=parseInt(item.cnt);
})
return {attachment:attachmentList.join(","),detailJson:JSON.stringify(detailList),detailLen:detailList.length,cnt:cnt}
},
addRec: function(){window.formData = {};
var dialog = layer.open({
type: 2
,title: '接管明细'
,content: 'companyPaperRecordDetailForm.jsp'
,maxmin: true
,area: ['95%','95%']
,offset:'t'
,btn: ['确定', '勾销']
,btnAlign: 'c'
,yes: function(index, layero){var iframeWindow = window['layui-layer-iframe'+ index]
,submit = layero.find('iframe').contents().find("#companyPaperRecordDetailForm-submit");
iframeWindow.layui.form.on('submit(companyPaperRecordDetailForm-submit)', function(data){
var field = data.field;
var certType = field.certType;
try{var subAttachment = window._active.getDetailAttachment();
if(certType==2){if(!subAttachment){return layer.msg('电子档要上传附件');
}
}
if(subAttachment){field = $.extend(field,subAttachment);
}
}catch (err){ }
detailList.push(field);
detailTable.reload({data:detailList});
layer.close(index);
});
submit.trigger('click');
}
});
// layer.full(dialog)
},
editRec:function(obj){var rowIndex = obj.tr.data('index');
var rec = obj.data;
window.formData = rec;
var dialog = layer.open({
type: 2
,title: '接管明细'
,content: 'companyPaperRecordDetailForm.jsp'
,maxmin: true
,area: ['95%','95%']
,offset:'t'
,btn: ['确定', '勾销']
,btnAlign: 'c'
,yes: function(index, layero){var iframeWindow = window['layui-layer-iframe'+ index]
,submit = layero.find('iframe').contents().find("#companyPaperRecordDetailForm-submit");
iframeWindow.layui.form.on('submit(companyPaperRecordDetailForm-submit)', function(data){
var field = data.field;
var certType = field.certType;
try{var subAttachment = window._active.getDetailAttachment();
if(certType==2){if(!subAttachment){return layer.msg('电子档要上传附件');
}
}
if(subAttachment){field = $.extend(field,subAttachment);
}
}catch (err){ }
obj.update($.extend({},field));
detailList = detailList.map(function (_item,_index) {if(_index==rowIndex){_item = $.extend({},field);
}
return _item;
})
layer.close(index);
});
submit.trigger('click');
}
});
// layer.full(dialog)
},
delRec:function (obj) {var rowIndex = obj.tr.data('index');
obj.del();
detailList.splice(rowIndex,1);
active.setDataList();},
reload: function(){detailTable.reload();
},
};页面相干按钮事件：
$("body").on('click','.layui-btn-container .layui-btn', function(){var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});子表单编辑页面内容：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/common/taglibs.jsp"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title> 公司证照记录明细 </title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="${ctxLayui}/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="${ctxLayui}/layuiadmin/style/myStyle.css" media="all">
</head>
<body>
<div class="layui-form" lay-filter="companyPaperRecordDetailForm" id="companyPaperRecordDetailForm" style="padding: 20px 10px 0 0;">
<div class="layui-form-item layui-form-item-45" >
<label class="layui-form-label"> 证照名称 <span style="color:red">*</span></label>
<div class="layui-input-block">
<div id="licenceSel"></div>
<input type="hidden" name="licenceId">
<input type="hidden" name="licenceName">
</div>
</div>
<div class="layui-form-item layui-form-item-45" >
<label class="layui-form-label"> 证件类型 <span style="color:red">*</span></label>
<div class="layui-input-block">
<select name="certType" lay-verify="required" id="certType" lay-filter="certType">
</select>
</div>
</div>
<div class="layui-form-item layui-form-item-45" >
<label class="layui-form-label"> 数量 <span style="color:red">*</span></label>
<div class="layui-input-block">
<input type="text" name="cnt" lay-verify="v_number|required" placeholder=""autocomplete="off"class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-item-90" >
<label class="layui-form-label"> 附件 </label>
<div class="layui-input-block">
<%--<input type="text" name="attachment" placeholder=""autocomplete="off"class="layui-input">--%>
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="attachment-upload"> 上传图片 </button>
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr><th> 文件名 </th>
<th> 状态 </th>
<th> 操作 </th>
</tr></thead>
<tbody id="attachmentList"></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="layui-form-item layui-hide">
<input type="button" lay-submit lay-filter="companyPaperRecordDetailForm-submit" id="companyPaperRecordDetailForm-submit" value="增加">
</div>
</div>
<script src="${ctxLayui}/layuiadmin/layui/layui.js"></script>
<script>
layui.config({base: '${ctxLayui}/layuiadmin/'
}).extend({index: 'lib/index'}).use(['index', 'form','dict','laydate','util','xmSelect','upload'], function(){
var $ = layui.$ ,form = layui.form;
var dict = layui.dict;
var laydate = layui.laydate;
var util = layui.util;
var admin = layui.admin;
var xmSelect = layui.xmSelect;
var upload = layui.upload;
var formData = window.parent.formData;
if(formData){form.val("companyPaperRecordDetailForm",$.extend({},formData))
}
dict.setSelect("certType","company_paper_certType",formData?formData.certType:1);
form.verify({v_number:admin.v_number,});
var url = ctx+'/base/licence/queryByAll'
var licenceData = [];
var rtnLicence = admin.syncReq(url,{parentId:0});
if(rtnLicence.code==0){licenceData = rtnLicence.data;}
//===================start ============
var licenceXmSelect = xmSelect.render({
el: '#licenceSel',
autoRow: true,
filterable: true,
remoteSearch:true,
remoteMethod:function (val,cb,show) {if(val){var rtnSearch = admin.syncReq(url,{name:val,sqlWhere:'and parentId!=0'});
cb(rtnSearch.data)
}else{cb([])
}
},
tree: {
show: true,
showFolderIcon: true,
showLine: true,
indent: 20,
expandedKeys: [],
strict: false,
lazy: true,
load:function (item,cb) {if(item.parentId!=0){cb([])
}else{if(!item.children || item.children.length==0){var _rtn=admin.syncReq(url,{parentId:item.id});
if(_rtn.data && _rtn.data.length>0){
var children = _rtn.data;
$.each(children,function (index,_item) {
_item.children = null;
var _parent = {name:item.name,id:item.id}
if(item.parent){_parent = $.extend(_parent,{parent:item.parent});
}
_item = $.extend(_item,{ parent:_parent});
})
cb(children);
}
}else{cb([])
}
}
}
},
prop:{
name:'name',
value:'id'
},
height: '350px',
radio:true,
clickClose:true,
data(){return licenceData;},
show:function () {licenceXmSelect.update();
},
on:function (data) {
var arr = data.arr;
if(arr && arr.length>0){var node = arr[0];
/*if(node.parentId!=0){licenceXmSelect.closed();
}else{ }*/
var parentId = node.parentId;
if(parentId!=0){
form.val('companyPaperRecordDetailForm',{
licenceName:node.name,
licenceId:node.id,
});
}
}
}
});
var licenceId = formData?(formData.licenceId?formData.licenceId:null):null;
if(licenceId){var _rtn=admin.syncReq(ctx+'/base/licence/queryById',{id:licenceId});
var selRec = _rtn.data;
if(selRec && selRec.parentId!=0){var rtn1 = admin.syncReq(url,{parentId:selRec.parentId});
var children = rtn1.data;
$.each(licenceData,function (index,item) {if(item.id==selRec.parentId){
item.children = children;
return false;
}
})
}
licenceXmSelect.reset();
licenceXmSelect.setValue([licenceId])
}else{licenceXmSelect.update();
}
//=======================end==================
var attachment = formData.attachment;
var attachmentList = [];
var attachmentListView = $('#attachmentList')
var uploadListIns = upload.render({
elem: '#attachment-upload'
,url: ctx+'/upload/uploadImages'
,accept: 'images'
,acceptMime: 'image/*'
,exts: 'jpg|jpeg|png|bmp|gif' // 只容许上传压缩文件
,multiple: true
,choose: function(obj){var files = this.files = obj.pushFile(); // 将每次抉择的文件追加到文件队列
// 读取本地文件
obj.preview(function(index, file, result){var tr = $(['<tr id="upload-'+ index +'">','<td><a href="#" style="color:#1E9FFF" id="img_open_'+index+'"data-url="">'+ file.name +'</a></td>','<td> 待上传 </td>','<td>','<button class="layui-btn layui-btn-mini test-upload-demo-reload layui-hide"> 重传 </button>','<button class="layui-btn layui-btn-mini layui-btn-danger test-upload-demo-delete"> 删除 </button>','</td>','</tr>'].join(''));
// 单个重传
tr.find('.test-upload-demo-reload').on('click', function(){obj.upload(index, file);
});
tr.find("a#img_open_"+index).on('click',function () {var url = $(this).attr("data-url");
if(url){window.open(url);
}
})
// 删除
tr.find('.test-upload-demo-delete').on('click', function(){delete files[index]; // 删除对应的文件
tr.remove();
attachmentList.splice(index,1);
uploadListIns.config.elem.next()[0].value = ''; // 清空 input file 值，免得删除后呈现同名文件不可选
});
attachmentListView.append(tr);
});
}
,done: function(res, index, upload){if(res.code == 0){ // 上传胜利
var tr = attachmentListView.find('tr#upload-'+ index)
,tds = tr.children();
var attachmentData = res.data;
tds.eq(0).find("a#img_open_"+index).attr("data-url",attachmentData.url);
tds.eq(1).html('<span style="color: #5FB878;"> 已上传 </span>');
tds.eq(2).find('.test-upload-demo-reload').addClass('layui-hide'); // 重传操作 hide
attachmentList.push(attachmentData.url);
return delete this.files[index]; // 删除文件队列曾经上传胜利的文件
}
this.error(index, upload);
}
,error: function(index, upload){var tr = attachmentListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(1).html('<span style="color: #FF5722;"> 上传失败 </span>');
tds.eq(2).find('.test-upload-demo-reload').removeClass('layui-hide'); // 显示重传
}
});
var active = {getDetailAttachment:function () {return {attachment:(attachmentList&&attachmentList.length>0)?attachmentList.join(","):null}
},
setAttachmentListView:function(_attachmentList){$.each(_attachmentList,function (index,item) {var tr = $(['<tr id="upload-'+ index +'">','<td><a style="color:#1E9FFF" href="#" style="color:#1E9FFF" id="img_open_'+index+'"data-url="'+item+'"> 附件'+(index+1)+'</a></td>'
,'<td> 已上传 </td>'
,'<td>'
,'<button class="layui-btn layui-btn-mini layui-btn-danger test-upload-demo-delete"> 删除 </button>'
,'</td>'
,'</tr>'].join(''));
// 单个重传
tr.find('.test-upload-demo-reload').on('click', function(){obj.upload(index, file);
});
tr.find("a#img_open_"+index).on('click',function () {var url = $(this).attr("data-url");
if(url){window.open(url);
}
})
// 删除
tr.find('.test-upload-demo-delete').on('click', function(){tr.remove();
attachmentList.splice(index,1);
uploadListIns.config.elem.next()[0].value = '';
});
attachmentListView.append(tr);
});
// active.setDataList();},
}
if(attachment){$.each(attachment.split(","),function (index,item) {attachmentList.push(item);
})
active.setAttachmentListView(attachmentList)
}
window.parent._active = active;
})
</script>
</body>
</html>
主页面增加记录（companyPaperRecordTabList.jsp）：
addRec: function(){window.formData = {companyId:id};
var dialog = layer.open({
type: 2
,title: '公司证照记录'
,content: 'companyPaperRecordForm.jsp'
,maxmin: true
,area: ['95%','95%']
,offset:'t'
,btn: ['确定', '勾销']
,btnAlign: 'c'
,yes: function(index, layero){var iframeWindow = window['layui-layer-iframe'+ index]
,submit = layero.find('iframe').contents().find("#companyPaperRecordForm-submit");
iframeWindow.layui.form.on('submit(companyPaperRecordForm-submit)', function(data){
var field = data.field;
field.companyId = id;
try{var subData = window._active.getSubData();
if(!subData.detailLen || subData.detailLen==0){return layer.msg('请增加接管明细！')
}
var cnt = field.cnt;
if(cnt!=subData.cnt){return layer.msg('填写的数量和接管明细的数量共计不相等！')
}
if(subData){field = $.extend(field,subData);
}
}catch (err){}
var rtn = admin.syncReq(ctx+"/company/companyPaperRecord/add",field);
if(rtn && rtn.code==0){layer.close(index);
layer.msg('操作胜利');
setTimeout(function () {active.reload() },0);
}else{layer.msg('操作失败');
}
});
submit.trigger('click');
}
});
// layer.full(dialog)
},后盾接管实体类，CompanyPaperRecordPo，要有一个如下属性：
private String detailJson;
public String getDetailJson() {return detailJson;}
public void setDetailJson(String detailJson) {this.detailJson = detailJson;}而后将 detailJson 转为 对应的实体子列表，并保留：
CommonJsonUtils jsonUtils = new CommonJsonUtils();
String detailJson = po.getDetailJson();
if(StringUtils.isNotEmpty(detailJson)){List<CompanyPaperRecordDetailPo> detailList = jsonUtils.toBeanList(detailJson, CompanyPaperRecordDetailPo.class);
if(detailList!=null && detailList.size()>0){for(CompanyPaperRecordDetailPo detail:detailList){detail.setRecordId(po.getId());
detail.setCreateTime(now);
detail.setModifyTime(now);
detail.setStatus(1);
detail.setCompanyId(po.getCompanyId());
detail.setAgentId(po.getAgentId());
detail.setBusinessId(po.getBusinessId());
detail.setId(IdUtils.id());
result+=savePaper(po,detail,insert);
}
result+=companyPaperRecordDetailMapper.insertByBatch(detailList);
}
}CommonJsonUtils 工具类，可在我博客其余文章找到：
工具类 CommonJsonUtils：json 与 bean 的转换
正文完