增加动态表单自动排版配置界面的保存回显逻辑

This commit is contained in:
cuibaocheng 2021-08-13 19:26:23 +08:00
parent c1212fb799
commit 11a3cb425e
2 changed files with 136 additions and 100 deletions

View File

@ -42,41 +42,57 @@
<input type="text" id="id" name="id" disabled="disabled" class="layui-input" value="{{d.id}}" placeholder="" > <input type="text" id="id" name="id" disabled="disabled" class="layui-input" value="{{d.id}}" placeholder="" >
</div> </div>
</div> </div>
{{# if(typeof(d.title) == 'string' && !d.title.match(RegExp(/\"/g))) { }}
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">title<span style="color: red">*</span></label> <label class="layui-form-label">title<span style="color: red">*</span></label>
<div class="layui-input-block"> <div class="layui-input-block">
<input type="text" id="title" name="title" class="layui-input title" value="{{d.title}}" placeholder="请输入标题" > <input type="text" id="title" name="title" class="layui-input title" value="{{d.title}}" placeholder="请输入标题" >
</div> </div>
</div> </div>
{{# } else { }}
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">title<span style="color: red">*</span></label>
<div class="layui-input-block">
<textarea id="title" name="title" placeholder="请输入标题" class="layui-input title layui-textarea">{{ d.title}}</textarea>
</div>
</div>
{{# } }}
<div class="layui-formitem" style="text-align: center;width:100% !important;font-size: 17px"> <div class="layui-formitem" style="text-align: center;width:100% !important;font-size: 17px">
<b style="color: red">模块data对象参数</b> <b style="color: red">模块data对象参数</b>
</div> </div>
{{# for(let key in d.data) { }} {{# for(let key in d.data) { }}
{{# if(typeof(d.data[key]) == 'string') { }} {{# if(typeof(d.data[key]) == 'string' && !d.data[key].match(RegExp(/\"/g))) { }}
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">{{key}}<span style="color: red">*</span></label> <label class="layui-form-label">{{key}}<span style="color: red">*</span></label>
<div class="layui-input-block"> <div class="layui-input-block">
<input type="text" id="data_{{key}}" name="data_{{key}}" class="layui-input dataInputRowFilter {{(key.indexOf('color') != -1 || key.indexOf('Color') != -1 ) ? 'selectColor' : '' }}" value="{{d.data[key]}}" placeholder="" > <input type="text" id="data_{{key}}" name="data_{{key}}" class="layui-input dataInputRowFilter {{(key.indexOf('color') != -1 || key.indexOf('Color') != -1 ) ? 'selectColor' : '' }}" value="{{d.data[key]}}" placeholder="" >
{{# if(key.indexOf('color') != -1 || key.indexOf('Color') != -1 ) { }} {{# if(key.indexOf('color') != -1 || key.indexOf('Color') != -1 ) { }}
<div style="height:38px;width:5%;float:left;background-color:{{d.data[key]}};"></div> <div style="height:38px;width:5%;float:left;background-color:{{d.data[key]}};"></div>
{{# } }} {{# } }}
</div> </div>
</div> </div>
{{# } else if(typeof(d.data[key]) == 'number') { }} {{# } else if(typeof(d.data[key]) == 'number') { }}
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">{{key}}<span style="color: red">*</span></label> <label class="layui-form-label">{{key}}<span style="color: red">*</span></label>
<div class="layui-input-block"> <div class="layui-input-block">
<input type="number" id="data_{{key}}" name="data_{{key}}" class="layui-input dataInputRowFilter" value="{{d.data[key]}}" placeholder="" > <input type="number" id="data_{{key}}" name="data_{{key}}" class="layui-input dataInputRowFilter" value="{{d.data[key]}}" placeholder="" >
</div> </div>
</div> </div>
{{# } else if(typeof(d.data[key]) == 'boolean') { }} {{# } else if(typeof(d.data[key]) == 'boolean') { }}
<div class="layui-form-item" pane> <div class="layui-form-item" pane>
<label class="layui-form-label">{{key}}<span style="color: red">*</span></label> <label class="layui-form-label">{{key}}<span style="color: red">*</span></label>
<div class="layui-input-block"> <div class="layui-input-block">
<input type="checkbox" id="data_{{key}}" name="data_{{key}}" lay-filter="dataSwitchRowFilter" value="{{d.data[key]}}" {{d.data[key] == true ? 'checked="checked"' : ''}} lay-skin="switch" lay-text="开|关"> <input type="checkbox" id="data_{{key}}" name="data_{{key}}" lay-filter="dataSwitchRowFilter" value="{{d.data[key]}}" {{d.data[key] == true ? 'checked="checked"' : ''}} lay-skin="switch" lay-text="开|关">
</div> </div>
</div> </div>
{{# } else { }}
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">{{key}}<span style="color: red">*</span></label>
<div class="layui-input-block">
<textarea id="data_{{key}}" name="data_{{key}}" placeholder="" class="layui-input dataInputRowFilter layui-textarea">{{d.data[key]}}</textarea>
</div>
</div>
{{# } }} {{# } }}
{{# } }} {{# } }}
{{# var mList = d.list; }} {{# var mList = d.list; }}
@ -93,60 +109,70 @@
<botton class="layui-btn layui-btn-xs layui-btn-danger removeRow" style="margin-left: 10px;margin-bottom: 5px;" listIndex="{{i}}" >删除本行</botton> <botton class="layui-btn layui-btn-xs layui-btn-danger removeRow" style="margin-left: 10px;margin-bottom: 5px;" listIndex="{{i}}" >删除本行</botton>
</div> </div>
{{# var mData = mList[i]; }} {{# var mData = mList[i]; }}
{{# if(typeof(mData) == 'string') { }} {{# if(typeof(mData) == 'string' && !mData.match(RegExp(/\"/g))) { }}
<div class="layui-form-item"> <div class="layui-form-item">
<label class="layui-form-label">字符<span style="color: red">*</span></label> <label class="layui-form-label">字符<span style="color: red">*</span></label>
<div class="layui-input-block"> <div class="layui-input-block">
<input type="text" id="list_{{i}}" name="list_{{i}}" class="layui-input dataInputRowFilter" value="{{mData}}" placeholder="" > <input type="text" id="list_{{i}}" name="list_{{i}}" class="layui-input dataInputRowFilter" value="{{mData}}" placeholder="" >
</div>
</div> </div>
{{# } else if(typeof(mData) == 'boolean') { }} </div>
<div class="layui-form-item" pane> {{# } else if(typeof(mData) == 'boolean') { }}
<label class="layui-form-label">布尔<span style="color: red">*</span></label> <div class="layui-form-item" pane>
<div class="layui-input-block"> <label class="layui-form-label">布尔<span style="color: red">*</span></label>
<input type="checkbox" id="list_{{i}}" name="list_{{i}}" value="{{mData}}" lay-filter="dataSwitchRowFilter" {{mData == true ? 'checked="checked"' : ''}} lay-skin="switch" lay-text="开|关"> <div class="layui-input-block">
</div> <input type="checkbox" id="list_{{i}}" name="list_{{i}}" value="{{mData}}" lay-filter="dataSwitchRowFilter" {{mData == true ? 'checked="checked"' : ''}} lay-skin="switch" lay-text="开|关">
</div> </div>
{{# } else if(typeof(mData) == 'number') { }} </div>
<div class="layui-form-item"> {{# } else if(typeof(mData) == 'number') { }}
<label class="layui-form-label">数值<span style="color: red">*</span></label> <div class="layui-form-item">
<div class="layui-input-block"> <label class="layui-form-label">数值<span style="color: red">*</span></label>
<input type="number" id="list_{{i}}" name="list_{{i}}" class="layui-input dataInputRowFilter" value="{{mData}}" placeholder="" > <div class="layui-input-block">
</div> <input type="number" id="list_{{i}}" name="list_{{i}}" class="layui-input dataInputRowFilter" value="{{mData}}" placeholder="" >
</div> </div>
{{# } else if(typeof(mData) == 'object') { }} </div>
{{# for(let key in mData) { }} {{# } else if(typeof(mData) == 'object') { }}
{{# if(typeof(mData[key]) == 'string') { }} {{# for(let key in mData) { }}
<div class="layui-form-item"> {{# if(typeof(mData[key]) == 'string' && !mData[key].match(RegExp(/\"/g))) { }}
<label class="layui-form-label">{{key}}<span style="color: red">*</span></label> <div class="layui-form-item">
<div class="layui-input-block"> <label class="layui-form-label">{{key}}<span style="color: red">*</span></label>
<input type="text" id="list_{{i}}_{{key}}" name="list_{{i}}_{{key}}" class="layui-input dataInputRowFilter {{(key.indexOf('color') != -1 || key.indexOf('Color') != -1 ) ? 'selectColor' : '' }}" value="{{mData[key]}}" placeholder="" > <div class="layui-input-block">
{{# if(key.indexOf('color') != -1 || key.indexOf('Color') != -1 ) { }} <input type="text" id="list_{{i}}_{{key}}" name="list_{{i}}_{{key}}" class="layui-input dataInputRowFilter {{(key.indexOf('color') != -1 || key.indexOf('Color') != -1 ) ? 'selectColor' : '' }}" value="{{mData[key]}}" placeholder="" >
<div style="height:38px;width:5%;float:left;background-color:{{mData[key]}};"></div> {{# if(key.indexOf('color') != -1 || key.indexOf('Color') != -1 ) { }}
{{# } }} <div style="height:38px;width:5%;float:left;background-color:{{mData[key]}};"></div>
</div>
</div>
{{# } else if(typeof(mData[key]) == 'number') { }}
<div class="layui-form-item">
<label class="layui-form-label">{{key}}<span style="color: red">*</span></label>
<div class="layui-input-block">
<input type="number" id="list_{{i}}_{{key}}" name="list_{{i}}_{{key}}" class="layui-input dataInputRowFilter" value="{{mData[key]}}" placeholder="" >
</div>
</div>
{{# } else if(typeof(mData[key]) == 'boolean') { }}
<div class="layui-form-item" pane>
<label class="layui-form-label">{{key}}<span style="color: red">*</span></label>
<div class="layui-input-block">
<input type="checkbox" id="list_{{i}}_{{key}}" name="list_{{i}}_{{key}}" lay-filter="dataSwitchRowFilter" value="{{mData[key]}}" {{mData[key] == true ? 'checked="checked"' : ''}} lay-skin="switch" lay-text="开|关">
</div>
</div>
{{# } }}
{{# } }}
{{# } else { }}
<div class="layui-form-item">
<label class="layui-form-label">{{typeof(mData) }}<span style="color: red">*</span></label>
</div>
{{# } }} {{# } }}
</div>
</div>
{{# } else if(typeof(mData[key]) == 'number') { }}
<div class="layui-form-item">
<label class="layui-form-label">{{key}}<span style="color: red">*</span></label>
<div class="layui-input-block">
<input type="number" id="list_{{i}}_{{key}}" name="list_{{i}}_{{key}}" class="layui-input dataInputRowFilter" value="{{mData[key]}}" placeholder="" >
</div>
</div>
{{# } else if(typeof(mData[key]) == 'boolean') { }}
<div class="layui-form-item" pane>
<label class="layui-form-label">{{key}}<span style="color: red">*</span></label>
<div class="layui-input-block">
<input type="checkbox" id="list_{{i}}_{{key}}" name="list_{{i}}_{{key}}" lay-filter="dataSwitchRowFilter" value="{{mData[key]}}" {{mData[key] == true ? 'checked="checked"' : ''}} lay-skin="switch" lay-text="开|关">
</div>
</div>
{{# } else { }}
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">{{key}}<span style="color: red">*</span></label>
<div class="layui-input-block">
<textarea id="list_{{i}}_{{key}}" name="list_{{i}}_{{key}}" placeholder="" class="layui-input dataInputRowFilter layui-textarea">{{mData[key]}}</textarea>
</div>
</div>
{{# } }}
{{# } }}
{{# } else { }}
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">{{key}}<span style="color: red">*</span></label>
<div class="layui-input-block">
<textarea id="list_{{i}}" name="list_{{i}}" placeholder="" class="layui-input dataInputRowFilter layui-textarea">{{mData}}</textarea>
</div>
</div>
{{# } }}
{{# } }} {{# } }}
</script> </script>
@ -380,16 +406,16 @@
var loadIndex = top.layer.load(1,{shade:0.5}); var loadIndex = top.layer.load(1,{shade:0.5});
querySql = Encrypt(querySql); querySql = Encrypt(querySql);
top.restAjax.get(top.restAjax.path('app/bigdatatemplate/querysqlrelease?querySql={querySql}', [querySql]), {}, null, function(code, data) { top.restAjax.get(top.restAjax.path('app/bigdatatemplate/querysqlrelease?querySql={querySql}', [querySql]), {}, null, function(code, data) {
if(code == 200 && data) { if(code == 200 && data) {
if(data.state == 200) { if(data.state == 200) {
top.dialog.msg("语句校验通过"); top.dialog.msg("语句校验通过");
}else{ }else{
top.dialog.msg("语句校验未通过"); top.dialog.msg("语句校验未通过");
} }
}else{ }else{
top.dialog.msg("语句校验不通过"); top.dialog.msg("语句校验不通过");
} }
top.layer.close(loadIndex); top.layer.close(loadIndex);
}, function(code, data) { }, function(code, data) {
top.dialog.msg(data.msg); top.dialog.msg(data.msg);
top.layer.close(loadIndex); top.layer.close(loadIndex);
@ -402,7 +428,8 @@
var loadLayerIndex; var loadLayerIndex;
top.restAjax.get(top.restAjax.path('api/bigdatatemplatearea/getbigdatatemplateareabyid/{bigdataTemplateAreaId}', [bigdataTemplateAreaId]), {}, null, function(code, data) { top.restAjax.get(top.restAjax.path('api/bigdatatemplatearea/getbigdatatemplateareabyid/{bigdataTemplateAreaId}', [bigdataTemplateAreaId]), {}, null, function(code, data) {
areaData = data; areaData = data;
templateAreaModuleData = eval("("+ data.templateAreaModuleData+")"); templateAreaModuleData = eval("("+ data.templateAreaModuleData +")");
console.log(templateAreaModuleData)
laytpl(document.getElementById('templateAreaModuleDataScript').innerHTML).render(templateAreaModuleData, function(html) { laytpl(document.getElementById('templateAreaModuleDataScript').innerHTML).render(templateAreaModuleData, function(html) {
document.getElementById('templateAreaModuleDataDiv').innerHTML = html; document.getElementById('templateAreaModuleDataDiv').innerHTML = html;
form.render(); form.render();
@ -453,17 +480,17 @@
} }
// 对象 // 对象
if(keySplit.length == 3) { if(keySplit.length == 3) {
var obj = moduleMap.get(index); var obj = moduleMap.get(index);
if(obj) { if(obj) {
if(fieldData[key] == "true" || fieldData[key] == "false") { if(fieldData[key] == "true" || fieldData[key] == "false") {
obj[keySplit[2]] = fieldData[key].indexOf("true") != -1 ? true : false; obj[keySplit[2]] = fieldData[key].indexOf("true") != -1 ? true : false;
} else if(/^\d+(?=\.{0,1}\d+$|$)/ .test(fieldData[key])){ } else if(/^\d+(?=\.{0,1}\d+$|$)/ .test(fieldData[key])){
obj[keySplit[2]] = Number(fieldData[key]); obj[keySplit[2]] = Number(fieldData[key]);
} else { } else {
obj[keySplit[2]] = fieldData[key]; obj[keySplit[2]] = fieldData[key];
} }
}else { }else {
obj = {}; obj = {};
var ke = keySplit[2]; var ke = keySplit[2];
if(fieldData[key] == "true" || fieldData[key] == "false") { if(fieldData[key] == "true" || fieldData[key] == "false") {
obj[ke] = fieldData[key].indexOf("true") != -1 ? true : false; obj[ke] = fieldData[key].indexOf("true") != -1 ? true : false;
@ -472,7 +499,7 @@
} else { } else {
obj[ke] = fieldData[key]; obj[ke] = fieldData[key];
} }
} }
moduleMap.set(index, obj); moduleMap.set(index, obj);
} }
} }
@ -488,7 +515,16 @@
dataList.push(data); dataList.push(data);
} }
templateAreaModuleJsonData.list = dataList; templateAreaModuleJsonData.list = dataList;
var newtTemplateAreaModuleData = JSON.stringify(templateAreaModuleJsonData).replace(/\"/g,"'"); var newtTemplateAreaModuleData = JSON.stringify(templateAreaModuleJsonData)
if(newtTemplateAreaModuleData.indexOf("\'") > 1) {
layer.msg("不允许使用单引号");
return;
}
console.log(newtTemplateAreaModuleData);
newtTemplateAreaModuleData = newtTemplateAreaModuleData.replace(/\"/g,"'");
console.log(newtTemplateAreaModuleData);
newtTemplateAreaModuleData = newtTemplateAreaModuleData.replace(/\\'/g,"\"");
console.log(newtTemplateAreaModuleData);
top.restAjax.put(top.restAjax.path('api/bigdatatemplatearea/updatebigdatatemplateareapointmoduledata/{bigdataTemplateAreaId}?templateAreaModuleData={newtTemplateAreaModuleData}', [bigdataTemplateAreaId]), newtTemplateAreaModuleData, null, function(code, data) { top.restAjax.put(top.restAjax.path('api/bigdatatemplatearea/updatebigdatatemplateareapointmoduledata/{bigdataTemplateAreaId}?templateAreaModuleData={newtTemplateAreaModuleData}', [bigdataTemplateAreaId]), newtTemplateAreaModuleData, null, function(code, data) {
top.dialog.close(index); top.dialog.close(index);
// window.location.reload(); // window.location.reload();

View File

@ -43,7 +43,7 @@ public class PicturesTemplateAreaBuildingDTO {
@ApiModelProperty(name = "templateAreaFontColor", value = "文字颜色") @ApiModelProperty(name = "templateAreaFontColor", value = "文字颜色")
private String templateAreaFontColor; private String templateAreaFontColor;
@ApiModelProperty(name = "templateAreaFontSize", value = "文字大小") @ApiModelProperty(name = "templateAreaFontSize", value = "文字大小")
private String templateAreaFontSize; private Integer templateAreaFontSize;
@ApiModelProperty(name = "templateAreaFontLength", value = "字体长度限制") @ApiModelProperty(name = "templateAreaFontLength", value = "字体长度限制")
private Integer templateAreaFontLength = 0; private Integer templateAreaFontLength = 0;
@ApiModelProperty(name = "templateAreaFontBold", value = "文字加粗0:正常,1:加粗,2:斜体") @ApiModelProperty(name = "templateAreaFontBold", value = "文字加粗0:正常,1:加粗,2:斜体")
@ -179,11 +179,11 @@ public class PicturesTemplateAreaBuildingDTO {
this.templateAreaFontColor = templateAreaFontColor; this.templateAreaFontColor = templateAreaFontColor;
} }
public String getTemplateAreaFontSize() { public Integer getTemplateAreaFontSize() {
return templateAreaFontSize == null ? "" : templateAreaFontSize; return templateAreaFontSize == null ? 0 : templateAreaFontSize;
} }
public void setTemplateAreaFontSize(String templateAreaFontSize) { public void setTemplateAreaFontSize(Integer templateAreaFontSize) {
this.templateAreaFontSize = templateAreaFontSize; this.templateAreaFontSize = templateAreaFontSize;
} }