本文详细解析了一段HTML前端代码和对应的JavaScript实现，涉及到动态行添加、控件信息展示、数据验证以及提交流程。前端部分包括 accordion 组件、数据网格编辑和身份证重复验证，后端涉及获取性别和案件类型等数据模型。提交流程中，不仅有基本信息的保存，还包括嫌疑人信息的处理。整个交互过程展示了前端与后端如何协同工作以确保数据的准确性和一致性。
1、前端html代码如下：
<body>
<div class="page-loading"></div>
<div class="fui-toolbar">
<div class="uc-handlecontrols" id="handlecontrols" action="handlecontrolsaction.handleCtrl" style="width: 100%"></div>
</div>
<div class="fui-content">
<div id="fui-form" class="fui-form">
<div class="fui-accordions">
<div role="accordion" opened="true">
<div role="head" title="表单填写"></div>
<div role="body">
<div class="hidden">
<a class="mini-button" id="btnSaveFrom" onclick="eputil.saveWorkflowForm">保存</a>
<a class="mini-button" id="btnSubmit" onclick="eputil.submitWorkflow">提交</a>
</div>
<div role="form">
<div role="row">
<div role="control" label="案件名称" starred="true">
<input id="casename" class="mini-textbox" bind="dataBean.casename" required="true" />
</div>
<div role="control" label="应约办案区" starred="true">
<input id="handleareaname" class="mini-buttonedit" bind="text:handleAreaName,value:dataBean.handleareaguid"
allowInput="false" onbuttonclick="eputil.openFrameOuAreaTreeSingle" required="true" showClose="true"
oncloseclick="epoint.clear('handleareaname');" />
</div>
</div>
<div role="row">
<div role="control" label="案件编号">
<input id="casecode" class="mini-textbox" bind="dataBean.casecode" />
</div>
<div role="control" label="案件类型" starred="true">
<input id="casetype" required="true" class="mini-combobox" bind="dataBean.casetype" allowInput="false"
action="getCasetypeModel" />
</div>
</div>
<div role="row">
<div role="control" label="简要案情">
<input id="casebrief" class="mini-textarea" bind="dataBean.casebrief" maxlength="500" />
</div>
</div>
</div>
</div>
</div>
<div role="accordion">
<div role="head" title="嫌疑人信息"></div>
<div role="body">
<div role="form">
<div class="mb5">
<a class="mini-button" id="addSuspect" onclick="addSuspect">添加嫌疑人</a>
</div>
<div id="datagrid" class="mini-datagrid" idField="rowguid" action="getDataGridData" sortOrder="desc" showPager="false"
allowResize="false" multiSelect="true" allowCellEdit="false" allowCellSelect="true">
<div property="columns">
<div type="indexcolumn" width="50" headerAlign="center">序</div>
<div field="suspectname" width="100" headerAlign="center">
嫌疑人姓名
<input property="editor" class="mini-textbox " style="width: 100%;" />
</div>
<div field="idcardnumber" name="idcardnumber" width="170" headerAlign="center">
身份证号码
<input property="editor" class="mini-textbox" vtype="idCard" style="width: 100%;"
onvalidation="onIdCardNumberRepeatValidation" />
</div>
<div field="sex" name="sex" width="100" headerAlign="center" type="comboboxcolumn">
性别
<input property="editor" class="mini-combobox" textField="text" valueField="value" style="width: 100%;"
allowInput="false" />
</div>
<div field="birthdate" width="150" headerAlign="center" dataFormat="yyyy-MM-dd"
data-options="{'format':'yyyy-mm-dd'}">
出生日期
<input property="editor" class="mini-datepicker" style="width: 100%;" allowInput="false" />
</div>
<div field="livingaddress" width="100%" headerAlign="center">
现住址
<input property="editor" class="mini-textbox" style="width: 100%;" />
</div>
<div field="ordernumber" width="100" headerAlign="center">
排序号
<input property="editor" class="mini-textbox " inputStyle="text-align:center;" vtype="int" style="width: 100%;" />
</div>
<div width="60" align="center" headerAlign="center" renderer="onEditRowRenderer">修改</div>
<!-- 这种删除时针对行编辑设计的 -->
<div width="60" align="center" headerAlign="center" renderer="eputil.onDeleteRowRenderer">删除</div>
</div>
</div>
</div>
</div>
</div>
<div role="accordion">
<div role="head" title="签署意见"></div>
<div role="body">
<div role="form">
<div class="uc-workflowopinion" id="workflowopinion" action="workflowopinionaction.opinionCtrl"
data-options="{'showmode' : 1}" style="width: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../../rest/resource/jsboot"></script>
<script src="../../../frame/pages/epointworkflow/js/workflowjsboot.js"></script>
<script src="../../../frame/pages/epointworkflow/js/tableproperty.js"></script>
<script src="./trainzfbaorderinfoworkflow.js"></script>
<script>
epoint.initPage('trainzfbaorderinfoapplyworkflowaction', '', function(data) {
setControlsAccessRight(data);
eputil.initEditTable('datagrid');
});
var datagrid = mini.get('datagrid');
eputil.beforeValidate = function() {
if (datagrid.data.length == 0) {
epoint.alert("请添加嫌疑人信息！");
return false;
}
}
</script>
</body>2、JAVASCRIPT代码为：
var datagrid = mini.get("datagrid");
var sexModel = [];
epoint.initPage('trainzfbaorderinfoapplyworkflowaction', '', function(data) {
setControlsAccessRight(data);
eputil.initEditTable('datagrid');
});
var datagrid = mini.get('datagrid');
eputil.beforeValidate = function() {
if (datagrid.data.length == 0) {
epoint.alert("请添加嫌疑人信息！");
return false;
}
}
/**
* 性别下拉框
*/
datagrid.on("load", function() {
datagrid.on("update", function() {
console.log("update", "执行update啦")
epoint.execute("getSexModel", "@none", null, function(data) {
sexModel = data;
for (var i = 0, length = datagrid.data.length; i < length; i++) {
datagrid.getCellEditor("sex", i).setData(data);
// datagrid.getCellEditor("sex", i).setAllowInput(true);
// datagrid.getCellEditor("sex", i).setValueFromSelect(true);
}
})
})
});
/**
* 新增嫌疑人
*/
function addSuspect() {
var newRow = {};
datagrid.addRow(newRow);
// 需要先开启行编辑
datagrid.beginEditRow(newRow);
// 再将model信息塞进单元格
datagrid.getCellEditor("sex", newRow).setData(sexModel);
}
/**
* 绘制行编辑按钮
*
* @param e
*/
function onEditRowRenderer(e) {
return epoint.renderCell(e, "action-icon icon-edit", "openEdit", "epoint_total");
}
/**
* 修改嫌疑人信息
*
* @param e
*/
function openEdit(e) {
epoint.openTopDialog("修改嫌疑人信息", 'gatrain/zfba/order/trainzfbaordersuspectedit', editSuspectCallBack, {
'width' : eputil.dialogWidth,
'height' : eputil.dialogHeight,
'param' : {
suspectname : e.suspectname,
idcardnumber : e.idcardnumber,
sex : e.sex,
birthdate : e.birthdate,
address : e.address
}
});
}
function editSuspectCallBack(e) {
if (e && e != "close") {
// 行信息修改步骤：需先提交-->更新-->开启行编辑-->特殊行信息处理
datagrid.commitEditRow(datagrid.getSelected())
datagrid.updateRow(datagrid.getSelected(), e);
datagrid.beginEditRow(datagrid.getSelected(), e);
datagrid.getCellEditor("sex", datagrid.getSelected()).setData(sexModel);
}
}
/**
* 身份证判重复
*
* @param e
* e存储了当前单元格信息
*/
function onIdCardNumberRepeatValidation(e) {
// 判断当前单元格是否单元格验证
if (e.isValid) {
// 如果单元格值为空，无需判断
if (!e.value) {
return;
}
// 循环表格行信息
for (var i = 0, length = datagrid.data.length; i < length; i++) {
// 如果是当前行，无需进行比较
if (e.sender.ownerRowID == i + 1) {
continue;
}
// 如果当前单元格的值 和 查找表格i行idcardnumber列的值相同，则返回验证不通过
if (e.value == datagrid.getCellEditor("idcardnumber", i).getValue()) {
e.errorText = '身份证不能重复！';
e.isValid = false;
}
}
}
}
3、 控件的信息展示与输入
3.1、有动态行添加或其他的关联表model
前端与后端关联（在上面html代码嫌疑人部分里面找）
action="getDataGridData"
/**
* 嫌疑人model，注意修改
*/
protected DataGridModel<TrainZfbaOrderSuspect> model = null;
public DataGridModel<TrainZfbaOrderSuspect> getDataGridData() {
if (model == null) {
model = new DataGridModel<TrainZfbaOrderSuspect>()
{
@Override
public List<TrainZfbaOrderSuspect> fetchData(int first, int pageSize, String sortField, String sortOrder) {
if (StringUtil.isBlank(rowGuid)) {
return new ArrayList<>();
}
TrainSqlCondition condition = TrainSqlCondition.getSearchCondition(getRequestContext().getComponents());
condition.exact("orderguid", rowGuid);
this.setRowCount(zfbaOrderSuspectService.getPZfbaOrderSuspectCount(condition));
return zfbaOrderSuspectService.getPZfbaOrderSuspectList(0, 0, sortField, sortOrder, condition);
}
};
}
return model;
}3.2、有代码项的model
后端代码：
/**
* 案件类型
*/
protected List<SelectItem> caseTypeModel = null;
/**
* 性别类型
*/
protected List<SelectItem> sexModel = null;
public List<SelectItem> getSexModel() {
if (sexModel == null) {
sexModel = DataUtil.convertMap2ComboBox(CodeModalFactory.factory(TrainCommonConstValue.SELECTITEM_TYPE_NAME, TrainCodeNameConstValue.SEX, null, false));
}
return this.sexModel;
}
public List<SelectItem> getCasetypeModel() {
if (caseTypeModel == null) {
caseTypeModel = DataUtil.convertMap2ComboBox(CodeModalFactory.factory(TrainCommonConstValue.SELECTITEM_TYPE_NAME, TrainCodeNameConstValue.YY_CASE_TYPE, null, false));
}
return this.caseTypeModel;
}动态行（在此为性别）需要添加前端javascript代码代码赋值
var datagrid = mini.get("datagrid");
var sexModel = [];
/**
* 性别下拉框
*/
datagrid.on("load", function() {
datagrid.on("update", function() {
console.log("update", "执行update啦")
/*查询的到sexmodel的值，给datagrid的属性为sex的列赋值*/
epoint.execute("getSexModel", "@none", null, function(data) {
sexModel = data;
for (var i = 0, length = datagrid.data.length; i < length; i++) {
datagrid.getCellEditor("sex", i).setData(data);
// datagrid.getCellEditor("sex", i).setAllowInput(true);
// datagrid.getCellEditor("sex", i).setValueFromSelect(true);
}
})
})
});其它的在input标签上绑定获取后端model的 action="getCasetypeModel"
3.3、有点击树需要展示文本信息的
html页面输入框代码如下：
/*bind是文本信息绑定后端的handleAreaName*/
<input id="handleareaname" class="mini-buttonedit" bind="text:handleAreaName,value:dataBean.handleareaguid"
allowInput="false" onbuttonclick="eputil.openFrameOuAreaTreeSingle" required="true" showClose="true"
oncloseclick="epoint.clear('handleareaname');" />后端代码如下：
protected String handleAreaName = "";
/**在pageload方法里获取具体的值**/
@Override
public void trainPageLoad() {
trainOrderPageLoad();
// 获取应约办案区名称
if (StringUtil.isNotBlank(dataBean.getHandleareaguid())) {
TrainBasicArea pBasicArea = basicAreaService.findTrainBasicArea(dataBean.getHandleareaguid());
if (pBasicArea != null) {
handleAreaName = pBasicArea.getAreaname();
}
}
}
public String getHandleAreaName() {
return handleAreaName;
}
public void setHandleAreaName(String handleAreaName) {
this.handleAreaName = handleAreaName;
}4、我们一定需要做的完善的提交流程代码
4.1、pageload
@Override
public void trainOrderPageLoad() {
if (StringUtil.isBlank(rowGuid)) {
dataBean = new TrainZfbaOrderinfo();
}
else {
dataBean = zfbaOrderinfoService.findPZfbaOrderinfo(rowGuid);
if (dataBean == null) {
addCallBackDataError();
}
}
}4.2、save时需要做的（重点）
public boolean save() {
GaOperateInfo operateInfo = GaOperateInfo.build(this);
GaEntityDto<TrainZfbaOrder> dto = null;
dataBean.setOperateuserguid(userSession.getUserGuid());
dataBean.setOperateusername(userSession.getDisplayName());
dataBean.setPviguid(currentWorkItem.getProcessVersionInstanceGuid());
if (StringUtil.isBlank(rowGuid)) {
dataBean.setRowguid(UUID.randomUUID().toString());
dto = trainZfbaOrderService.insertTrainZfbaOrder(dataBean, operateInfo);
}
else {
dto = trainZfbaOrderService.updateTrainZfbaOrder(dataBean, operateInfo);
}
rowGuid = dataBean.getRowguid();
wfInstanceAPI9.createOrUpdateContext(pvi, getSQLTableName(), rowGuid, 2);
// 嫌疑人信息处理
List<Map<String, Object>> list = getDataGridData().getFeedbackdata();
if (list != null && !list.isEmpty()) {
trainZfbaOrderSuspectService.deleteTrainZfbaOrderSuspect(dataBean.getRowguid(), operateInfo);
}
List<TrainZfbaOrderSuspect> pZfbaOrderSuspectList = new ArrayList<>();
for (Map<String, Object> map : list) {
TrainZfbaOrderSuspect suspectinfo = new TrainZfbaOrderSuspect();
suspectinfo.setRowguid(UUID.randomUUID().toString());
suspectinfo.setOrderguid(dataBean.getRowguid());
suspectinfo.setSuspectname((String) map.get("suspectname"));
suspectinfo.setIdcardnumber((String) map.get("idcardnumber"));
suspectinfo.setSex((String) map.get("sex"));
suspectinfo.setLiveaddress((String) map.get("address"));
if (StringUtil.isNotBlank(map.getOrDefault("birthday", ""))) {
suspectinfo.setBirthday(
EpointDateUtil.convertString2Date((String) map.get("birthday"), EpointDateUtil.DATE_FORMAT));
}
trainZfbaOrderSuspectService.insertTrainZfbaOrderSuspect(suspectinfo, operateInfo);
pZfbaOrderSuspectList.add(suspectinfo);
}
// 如果满足业务逻辑返回true,msg为空
addCallbackParam("msg", "");
return true;
}4.3、submit提交时
protected FrameOuService9 frameOuService9 = new FrameOuService9();
protected WFAPI9 wfAPI = new WFAPI9();
/**
* 提交流程
*/
public void submit() {
if (save()) {
FrameOu ou = frameOuService9.getOuByOuGuid(dataBean.getRowguid());
wfAPI.getWFInstanceAPI().createOrUpdateContext(currentWorkItem.getProcessVersionInstanceGuid(), "WaitHandleTitle", "【预约审核通过】" + ou == null ? "" : ou.getOuname() + " + " + dataBean.getCasename(), 2);
wfAPI.getWFInstanceAPI().singlematerialSubmit(getSQLTableName(), rowGuid, currentWorkItem.getProcessVersionInstanceGuid(), userSession.getUserGuid());
}
}其它的都会生成，看需求改
3913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
