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

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="" >
</div>
</div>
{{# if(typeof(d.title) == 'string' && !d.title.match(RegExp(/\"/g))) { }}
<div class="layui-form-item">
<label class="layui-form-label">title<span style="color: red">*</span></label>
<div class="layui-input-block">
<input type="text" id="title" name="title" class="layui-input title" value="{{d.title}}" placeholder="请输入标题" >
</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">
<b style="color: red">模块data对象参数</b>
</div>
{{# for(let key in d.data) { }}
{{# if(typeof(d.data[key]) == 'string') { }}
<div class="layui-form-item">
<label class="layui-form-label">{{key}}<span style="color: red">*</span></label>
<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="" >
{{# if(key.indexOf('color') != -1 || key.indexOf('Color') != -1 ) { }}
<div style="height:38px;width:5%;float:left;background-color:{{d.data[key]}};"></div>
{{# } }}
</div>
</div>
{{# if(typeof(d.data[key]) == 'string' && !d.data[key].match(RegExp(/\"/g))) { }}
<div class="layui-form-item">
<label class="layui-form-label">{{key}}<span style="color: red">*</span></label>
<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="" >
{{# if(key.indexOf('color') != -1 || key.indexOf('Color') != -1 ) { }}
<div style="height:38px;width:5%;float:left;background-color:{{d.data[key]}};"></div>
{{# } }}
</div>
</div>
{{# } else if(typeof(d.data[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="data_{{key}}" name="data_{{key}}" class="layui-input dataInputRowFilter" value="{{d.data[key]}}" placeholder="" >
</div>
</div>
<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="data_{{key}}" name="data_{{key}}" class="layui-input dataInputRowFilter" value="{{d.data[key]}}" placeholder="" >
</div>
</div>
{{# } else if(typeof(d.data[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="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 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="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>
{{# } 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; }}
@ -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>
</div>
{{# var mData = mList[i]; }}
{{# if(typeof(mData) == 'string') { }}
<div class="layui-form-item">
<label class="layui-form-label">字符<span style="color: red">*</span></label>
<div class="layui-input-block">
<input type="text" id="list_{{i}}" name="list_{{i}}" class="layui-input dataInputRowFilter" value="{{mData}}" placeholder="" >
</div>
{{# if(typeof(mData) == 'string' && !mData.match(RegExp(/\"/g))) { }}
<div class="layui-form-item">
<label class="layui-form-label">字符<span style="color: red">*</span></label>
<div class="layui-input-block">
<input type="text" id="list_{{i}}" name="list_{{i}}" class="layui-input dataInputRowFilter" value="{{mData}}" placeholder="" >
</div>
{{# } else if(typeof(mData) == 'boolean') { }}
<div class="layui-form-item" pane>
<label class="layui-form-label">布尔<span style="color: red">*</span></label>
<div class="layui-input-block">
<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) == 'boolean') { }}
<div class="layui-form-item" pane>
<label class="layui-form-label">布尔<span style="color: red">*</span></label>
<div class="layui-input-block">
<input type="checkbox" id="list_{{i}}" name="list_{{i}}" value="{{mData}}" lay-filter="dataSwitchRowFilter" {{mData == true ? 'checked="checked"' : ''}} lay-skin="switch" lay-text="开|关">
</div>
{{# } else if(typeof(mData) == 'number') { }}
<div class="layui-form-item">
<label class="layui-form-label">数值<span style="color: red">*</span></label>
<div class="layui-input-block">
<input type="number" id="list_{{i}}" name="list_{{i}}" class="layui-input dataInputRowFilter" value="{{mData}}" placeholder="" >
</div>
</div>
{{# } else if(typeof(mData) == 'number') { }}
<div class="layui-form-item">
<label class="layui-form-label">数值<span style="color: red">*</span></label>
<div class="layui-input-block">
<input type="number" id="list_{{i}}" name="list_{{i}}" class="layui-input dataInputRowFilter" value="{{mData}}" placeholder="" >
</div>
{{# } else if(typeof(mData) == 'object') { }}
{{# for(let key in mData) { }}
{{# if(typeof(mData[key]) == 'string') { }}
<div class="layui-form-item">
<label class="layui-form-label">{{key}}<span style="color: red">*</span></label>
<div class="layui-input-block">
<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="" >
{{# 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>
{{# } else if(typeof(mData) == 'object') { }}
{{# for(let key in mData) { }}
{{# if(typeof(mData[key]) == 'string' && !mData[key].match(RegExp(/\"/g))) { }}
<div class="layui-form-item">
<label class="layui-form-label">{{key}}<span style="color: red">*</span></label>
<div class="layui-input-block">
<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="" >
{{# 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 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>
@ -380,16 +406,16 @@
var loadIndex = top.layer.load(1,{shade:0.5});
querySql = Encrypt(querySql);
top.restAjax.get(top.restAjax.path('app/bigdatatemplate/querysqlrelease?querySql={querySql}', [querySql]), {}, null, function(code, data) {
if(code == 200 && data) {
if(data.state == 200) {
top.dialog.msg("语句校验通过");
}else{
top.dialog.msg("语句校验未通过");
}
}else{
top.dialog.msg("语句校验不通过");
}
top.layer.close(loadIndex);
if(code == 200 && data) {
if(data.state == 200) {
top.dialog.msg("语句校验通过");
}else{
top.dialog.msg("语句校验未通过");
}
}else{
top.dialog.msg("语句校验不通过");
}
top.layer.close(loadIndex);
}, function(code, data) {
top.dialog.msg(data.msg);
top.layer.close(loadIndex);
@ -402,7 +428,8 @@
var loadLayerIndex;
top.restAjax.get(top.restAjax.path('api/bigdatatemplatearea/getbigdatatemplateareabyid/{bigdataTemplateAreaId}', [bigdataTemplateAreaId]), {}, null, function(code, data) {
areaData = data;
templateAreaModuleData = eval("("+ data.templateAreaModuleData+")");
templateAreaModuleData = eval("("+ data.templateAreaModuleData +")");
console.log(templateAreaModuleData)
laytpl(document.getElementById('templateAreaModuleDataScript').innerHTML).render(templateAreaModuleData, function(html) {
document.getElementById('templateAreaModuleDataDiv').innerHTML = html;
form.render();
@ -453,17 +480,17 @@
}
// 对象
if(keySplit.length == 3) {
var obj = moduleMap.get(index);
if(obj) {
if(fieldData[key] == "true" || fieldData[key] == "false") {
obj[keySplit[2]] = fieldData[key].indexOf("true") != -1 ? true : false;
} else if(/^\d+(?=\.{0,1}\d+$|$)/ .test(fieldData[key])){
obj[keySplit[2]] = Number(fieldData[key]);
} else {
obj[keySplit[2]] = fieldData[key];
}
}else {
obj = {};
var obj = moduleMap.get(index);
if(obj) {
if(fieldData[key] == "true" || fieldData[key] == "false") {
obj[keySplit[2]] = fieldData[key].indexOf("true") != -1 ? true : false;
} else if(/^\d+(?=\.{0,1}\d+$|$)/ .test(fieldData[key])){
obj[keySplit[2]] = Number(fieldData[key]);
} else {
obj[keySplit[2]] = fieldData[key];
}
}else {
obj = {};
var ke = keySplit[2];
if(fieldData[key] == "true" || fieldData[key] == "false") {
obj[ke] = fieldData[key].indexOf("true") != -1 ? true : false;
@ -472,7 +499,7 @@
} else {
obj[ke] = fieldData[key];
}
}
}
moduleMap.set(index, obj);
}
}
@ -488,7 +515,16 @@
dataList.push(data);
}
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.dialog.close(index);
// window.location.reload();

View File

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