删除了复杂的组件,调整了模板代码,处理了表单设计器发现问题

This commit is contained in:
wanggeng 2022-03-15 23:12:46 +08:00
parent 1ffa72f336
commit 47cead7dae
11 changed files with 452 additions and 236 deletions

View File

@ -46,7 +46,7 @@ public class FormReportController extends DefaultBaseController {
@PutMapping("update/code/{formCode}/version/{formVersion}/uid/{uid}")
public SuccessResult update(@PathVariable("formCode") String formCode, @PathVariable("formVersion") Integer formVersion, @PathVariable("uid") String uid, @RequestBody Map<String, Object> params) {
checkParams(params);
formReportService.update(uid, params);
formReportService.update(formCode, formVersion, uid, params);
return new SuccessResult();
}

View File

@ -27,7 +27,7 @@ public enum FormFieldTypeEnum {
DATE("date", "日期"),
RATE("rate", "评分"),
CAROUSEL("carousel", "轮播图"),
IMAGE("image", "上传图片"),
UPLOAD_IMAGE("uploadImage", "上传图片"),
FILE("file", "上传文件"),
TEXTAREA("textarea", "多行文本"),
EDITOR("editor", "编辑器"),

View File

@ -178,7 +178,7 @@ public class FormDesignServiceImpl extends DefaultBaseService implements IFormDe
return "VARCHAR(300)";
} else if (StringUtils.equals(FormFieldTypeEnum.FILE.getType(), fieldTag)) {
return "VARCHAR(300)";
} else if (StringUtils.equals(FormFieldTypeEnum.IMAGE.getType(), fieldTag)) {
} else if (StringUtils.equals(FormFieldTypeEnum.UPLOAD_IMAGE.getType(), fieldTag)) {
return "VARCHAR(300)";
} else if (StringUtils.equals(FormFieldTypeEnum.RATE.getType(), fieldTag)) {
return "DOUBLE(11,2)";

View File

@ -19,7 +19,7 @@ public interface IFormReportService {
void remove(String formCode, Integer formVersion, List<String> uids);
void update(String uid, Map<String, Object> params);
void update(String formCode, Integer formVersion, String uid, Map<String, Object> params);
Map<String, Object> get(String formCode, Integer formVersion, String uid);

View File

@ -14,6 +14,7 @@ import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.Map;
@ -73,20 +74,24 @@ public class FormReportServiceImpl extends DefaultBaseService implements IFormRe
}
@Override
public void update(String uid, Map<String, Object> params) {
List<Object[]> kvList = new ArrayList<>();
public void update(String formCode, Integer formVersion, String uid, Map<String, Object> params) {
List<List<String>> kvList = new ArrayList<>();
for (Map.Entry<String, Object> kv : params.entrySet()) {
Object[] kvArray = new Object[]{kv.getKey(), kv.getValue()};
kvList.add(kvArray);
if (kv.getValue() == null) {
continue;
}
kvList.add(Arrays.asList(new String[]{kv.getKey(), "" + kv.getValue()}));
}
kvList.add(new Object[]{"gmt_modified", DateUtil.getTime()});
kvList.add(new Object[]{"modifier", securityComponent.getCurrentUser().getUserId()});
kvList.add(Arrays.asList(new String[]{"gmt_modified", DateUtil.getTime()}));
kvList.add(Arrays.asList(new String[]{"modifier", securityComponent.getCurrentUser().getUserId()}));
Map<String, Object> updateParams = getHashMap((params.size() + 3) * 2);
updateParams.put("uid", uid);
updateParams.put("kvList", kvList);
updateParams.put("formCode", formCode);
updateParams.put("formVersion", formVersion);
formReportDao.update(params);
formReportDao.update(updateParams);
}
@Override

View File

@ -35,8 +35,8 @@
UPDATE
df_${formCode}_v${formVersion}
SET
<foreach collection="kvList" index="index" open="" separator="," close="">
${kvList[${index}][0]} = #{kvList[${index}][1]}
<foreach collection="kvList" item="item" index="index" open="" separator="," close="">
${item[0]} = '${item[1]}'
</foreach>
WHERE
uid = #{uid}

View File

@ -75,6 +75,30 @@ layui.define(['jquery', 'form', 'formUtils'], function(exports) {
}
}
$('#columnProperty').append(_html);
},
genScript: function(item) {
return {
func: {
save: '',
update: ''
},
init: {
save: '',
update: [
' var ' + item.id + ' = data.' + item.id + '.split(\',\');',
' var '+ item.id +'Obj = {};',
' for(var i = 0, item = ' + item.id + '[i]; item = ' + item.id + '[i++];) {',
' '+ item.id +'Obj[\'' + item.id + '[\'+ item +\']\'] = true;',
' }',
' form.val(\'dataForm\', '+ item.id +'Obj);',
].join('\n')
},
commit: [
' var ' + item.id + ' = top.restAjax.checkBoxToString(formData.field, \'' + item.id + '\');',
' formData.field.' + item.id + ' = ' + item.id + ';'
].join('\n'),
}
}
}

View File

@ -20,7 +20,7 @@ layui.define(['jquery', 'laydate', 'formUtils'], function(exports) {
var _html = '<div id="{0}" class="layui-form-item {2}" data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
_html += '<label class="layui-form-label {0}" style="width: {3}px;"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth);
_html += '<div class="layui-input-block" style="width:calc({0} - {1}px);margin-left: {1}px;">'.format(json.width, json.labelWidth);
_html += '<input id="{0}" name="{0}" lay-verify="{3}" class="layui-input icon-date widget-date {1}" style="line-height: 40px;{2}"></input>'.format(json.tag + json.id, _disabledClass, _disabledStyle, _required);
_html += '<input id="{1}{0}" name="{0}" lay-verify="{4}" class="layui-input icon-date widget-date {2}" style="line-height: 40px;{2}"></input>'.format(json.id, json.tag, _disabledClass, _disabledStyle, _required);
_html += '</div>';
_html += '</div>';
return _html;
@ -42,7 +42,7 @@ layui.define(['jquery', 'laydate', 'formUtils'], function(exports) {
$block.css({
width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth)
});
var _html = '<input id="{0}" name="{0}" lay-verify="{3}" class="layui-input icon-date widget-date {1}" style="line-height: 40px;{2}"></input>'.format(json.tag + json.id, _disabledClass, _disabledStyle, _required);
var _html = '<input id="{1}{0}" name="{0}" lay-verify="{4}" class="layui-input icon-date widget-date {2}" style="line-height: 40px;{3}"></input>'.format(json.id, json.tag, _disabledClass, _disabledStyle, _required);
$block.append(_html);
laydate.render({
elem: '#' + json.tag + json.id,
@ -84,6 +84,42 @@ layui.define(['jquery', 'laydate', 'formUtils'], function(exports) {
min: item.dataMinValue,
max: item.dataMaxValue,
});
},
genScript: function(item) {
return {
func: {
save: [
' function init'+ item.id + '() {',
' laydate.render({',
' elem: \'#' + item.tag + item.id + '\' ,',
' type: \'' + item.datetype + '\',',
' format: \'' + item.dateformat + '\',',
' value: \'' + item.dateDefaultValue + '\',',
' min: \'' + item.dataMinValue + '\',',
' max: \'' + item.dataMaxValue + '\',',
' trigger: \'click\'',
' });',
' }'
].join('\n'),
update: [
' function init'+ item.id + '() {',
' laydate.render({',
' elem: \'#' + item.tag + item.id + '\' ,',
' type: \'' + item.datetype + '\',',
' format: \'' + item.dateformat + '\',',
' min: \'' + item.dataMinValue + '\',',
' max: \'' + item.dataMaxValue + '\',',
' trigger: \'click\'',
' });',
' }'
].join('\n')
},
init: {
save: ' init'+ item.id + '();',
update: ' init'+ item.id + '();'
},
commit: '',
}
}
};

View File

@ -117,10 +117,21 @@ layui.define(['jquery', 'upload', 'dialog', 'restajax', 'formUtils'], function(e
files = files.substring(0, files.length - 1);
}
utils.initFileList(name, files, function(fileName) {
// viewerObj[fileName].update();
viewerObj[fileName].update();
initUpload();
});
});
},
code: {
html: [],
script: {
func: [],
init: {
save: [],
update: []
},
submit: [],
}
}
};

View File

@ -256,7 +256,17 @@ layui.config({
htmlCode: {
css: '',
html: '',
script: ''
script: {
func: {
save: [],
update: []
},
init: {
save: [],
update: []
},
submit: [],
},
}
};
/* 自动生成ID 当前页面自动排序*/
@ -1215,23 +1225,59 @@ layui.config({
options.data[oldIndex] = newData;
}
/**
* header 代码
* @returns {string}
*/
function getPageHeaderCode() {
var TP_HEADER_CODE = [
'<head>',
' <base href="${contextPath}"/>',
' <meta charset="utf-8">',
' <title>${formName}</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, maximum-scale=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="assets/layuiadmin/layui/css/layui.css" media="all">',
' <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">',
' <link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">',
'</head>',
].join('\n');
return TP_HEADER_CODE;
}
/**
* app header 代码
* @returns {string}
*/
function getAppPageHeaderCode() {
var TP_HEADER_CODE = [
'<head>',
' <base href="${contextPath}"/>',
' <meta charset="utf-8">',
' <title>${formName}</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, maximum-scale=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="assets/layuiadmin/layui/css/layui.css" media="all">',
' <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">',
' <link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">',
'</head>',
].join('\n');
return TP_HEADER_CODE;
}
// 生成HTML代码
function getSavePageCode(_htmlelem) {
options.htmlCode.script = '';
var tabsize = 4;
var tabchar = ' ';
if (tabsize == 1) {
tabchar = '\t';
}
var TP_FORM_CODE = [
'<div class="layui-anim layui-anim-fadein">',
' <div class="layui-card">',
' <div class="layui-card-body" style="padding: 15px;">',
' <form class="layui-form layui-form-pane" lay-filter="dataForm">',
_htmlelem.html(),
' <div class="layui-form-item layui-layout-admin">',
' <div class="layui-form-item layui-layout-admin">',
' <div class="layui-input-block">',
' <div class="layui-footer" style="left: 0;">',
' <button type="button" id="submitFormBtn" class="layui-btn" lay-submit lay-filter="submitForm">提交</button>',
@ -1246,24 +1292,13 @@ layui.config({
' <input type="hidden" id="formVersion" value="${formVersion}">',
'</div>',
].join('');
TP_FORM_CODE = style_html(TP_FORM_CODE, tabsize, tabchar, 2000);
TP_FORM_CODE = style_html(TP_FORM_CODE, 1, '\t', 2000);
//构件 html
var TP_HTML_CODE = [
'<!DOCTYPE html>',
'<html>',
'<head>',
' <base href="${contextPath}"/>',
' <meta charset="utf-8">',
' <title>${formName}</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, maximum-scale=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="assets/layuiadmin/layui/css/layui.css" media="all">',
' <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">',
' <link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">',
'</head>',
getPageHeaderCode(),
'<body>',
TP_FORM_CODE,
'<script src="assets/js/vendor/viewer/viewer.min.js"></script>',
@ -1317,10 +1352,13 @@ layui.config({
' });',
' }',
options.htmlCode.script,
options.htmlCode.script.func.save.join('\n'),
' // 初始化内容',
' function initData() {',
options.htmlCode.script.init.save.join('\n'),
' }',
' initData();',
' // 关闭页面',
@ -1333,7 +1371,10 @@ layui.config({
' dialog.confirm(\'确定提交吗?\', function(index) {',
' dialog.close(index);',
' var loadLayerIndex;',
' restAjax.post(restAjax.path(\'app/coal-appointment/save-release/{userId}\', [userId]), formData.field, null, function(code, data) {',
options.htmlCode.script.submit.join('\n'),
' restAjax.post(restAjax.path(\'api/form-report/save/code/{formCode}/version/{formVersion}\', [$(\'#formCode\').val(), $(\'#formVersion\').val()]), formData.field, null, function(code, data) {',
' // 这里手动添加操作成功后的操作',
' }, function(code, data) {',
' $(\'#submitFormBtn\').show();',
@ -1357,21 +1398,13 @@ layui.config({
// 生成HTML代码
function getUpdatePageCode(_htmlelem) {
options.htmlCode.script = '';
var tabsize = 4;
var tabchar = ' ';
if (tabsize == 1) {
tabchar = '\t';
}
var TP_FORM_CODE = [
'<div class="layui-anim layui-anim-fadein">',
' <div class="layui-card">',
' <div class="layui-card-body" style="padding: 15px;">',
' <form class="layui-form layui-form-pane" lay-filter="dataForm">',
_htmlelem.html(),
' <div class="layui-form-item layui-layout-admin">',
' <div class="layui-form-item layui-layout-admin">',
' <div class="layui-input-block">',
' <div class="layui-footer" style="left: 0;">',
' <button type="button" id="submitFormBtn" class="layui-btn" lay-submit lay-filter="submitForm">提交</button>',
@ -1386,24 +1419,13 @@ layui.config({
' <input type="hidden" id="formVersion" value="${formVersion}">',
'</div>',
].join('');
TP_FORM_CODE = style_html(TP_FORM_CODE, tabsize, tabchar, 2000);
TP_FORM_CODE = style_html(TP_FORM_CODE, 1, '\t', 2000);
//构件 html
var TP_HTML_CODE = [
'<!DOCTYPE html>',
'<html>',
'<head>',
' <base href="${contextPath}"/>',
' <meta charset="utf-8">',
' <title>${formName}</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, maximum-scale=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="assets/layuiadmin/layui/css/layui.css" media="all">',
' <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">',
' <link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">',
'</head>',
getPageHeaderCode(),
'<body>',
TP_FORM_CODE,
'<script src="assets/js/vendor/viewer/viewer.min.js"></script>',
@ -1422,6 +1444,7 @@ layui.config({
' window.dialog = layui.dialog;',
' window.restAjax = layui.restajax;',
' window.dataMessage = layui.datamessage;',
' var uid = restAjax.params(window.location.href).uid;',
' var viewerObj = {};',
' // 刷新下载模板',
@ -1457,10 +1480,29 @@ layui.config({
' });',
' }',
options.htmlCode.script,
options.htmlCode.script.func.update.join('\n'),
' // 初始化内容',
' function initData() {',
' var self = this;',
' var loadLayerIndex;',
' top.restAjax.get(restAjax.path(\'api/form-report/get/code/{formCode}/version/{formVersion}/uid/{uid}\', [$(\'#formCode\').val(), $(\'#formVersion\').val(), uid]), {}, null, function(code, data) {',
' var dataFormData = {};',
' for(var i in data) {',
' dataFormData[i] = data[i] +\'\';',
' }',
' form.val(\'dataForm\', dataFormData);',
' form.render(null, \'dataForm\');',
options.htmlCode.script.init.update.join('\n'),
' }, function(code, data) {',
' top.dialog.msg(data.msg);',
' }, function() {',
' loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});',
' }, function() {',
' top.dialog.close(loadLayerIndex);',
' });',
' }',
' initData();',
' // 关闭页面',
@ -1473,7 +1515,10 @@ layui.config({
' dialog.confirm(\'确定提交吗?\', function(index) {',
' dialog.close(index);',
' var loadLayerIndex;',
' restAjax.post(restAjax.path(\'app/coal-appointment/save-release/{userId}\', [userId]), formData.field, null, function(code, data) {',
options.htmlCode.script.submit.join('\n'),
' restAjax.post(restAjax.path(\'api/form-report/update/code/{formCode}/version/{formVersion}/uid/{uid}\', [$(\'#formCode\').val(), $(\'#formVersion\').val(), uid]), formData.field, null, function(code, data) {',
' // 这里手动添加操作成功后的操作',
' }, function(code, data) {',
' $(\'#submitFormBtn\').show();',
@ -1497,28 +1542,12 @@ layui.config({
// 生成HTML代码
function getShowPageCode(_htmlelem) {
options.htmlCode.script = '';
var tabsize = 4;
var tabchar = ' ';
if (tabsize == 1) {
tabchar = '\t';
}
var TP_FORM_CODE = [
'<div class="layui-anim layui-anim-fadein">',
' <div class="layui-card">',
' <div class="layui-card-body" style="padding: 15px;">',
' <form class="layui-form layui-form-pane" lay-filter="dataForm">',
_htmlelem.html(),
' <div class="layui-form-item layui-layout-admin">',
' <div class="layui-input-block">',
' <div class="layui-footer" style="left: 0;">',
' <button type="button" id="submitFormBtn" class="layui-btn" lay-submit lay-filter="submitForm">提交</button>',
' <button type="button" class="layui-btn layui-btn-primary close">返回</button>',
' </div>',
' </div>',
' </div>',
' </form>' +
' </div>',
' </div>',
@ -1526,24 +1555,13 @@ layui.config({
' <input type="hidden" id="formVersion" value="${formVersion}">',
'</div>',
].join('');
TP_FORM_CODE = style_html(TP_FORM_CODE, tabsize, tabchar, 2000);
TP_FORM_CODE = style_html(TP_FORM_CODE, 1, '\t', 2000);
//构件 html
var TP_HTML_CODE = [
'<!DOCTYPE html>',
'<html>',
'<head>',
' <base href="${contextPath}"/>',
' <meta charset="utf-8">',
' <title>${formName}</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, maximum-scale=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="assets/layuiadmin/layui/css/layui.css" media="all">',
' <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">',
' <link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">',
'</head>',
getPageHeaderCode(),
'<body>',
TP_FORM_CODE,
'<script src="assets/js/vendor/viewer/viewer.min.js"></script>',
@ -1562,6 +1580,7 @@ layui.config({
' window.dialog = layui.dialog;',
' window.restAjax = layui.restajax;',
' window.dataMessage = layui.datamessage;',
' var uid = restAjax.params(window.location.href).uid;',
' var viewerObj = {};',
' // 刷新下载模板',
@ -1597,10 +1616,29 @@ layui.config({
' });',
' }',
options.htmlCode.script,
options.htmlCode.script.func.update.join('\n'),
' // 初始化内容',
' function initData() {',
' var self = this;',
' var loadLayerIndex;',
' top.restAjax.get(restAjax.path(\'api/form-report/get/code/{formCode}/version/{formVersion}/uid/{uid}\', [$(\'#formCode\').val(), $(\'#formVersion\').val(), uid]), {}, null, function(code, data) {',
' var dataFormData = {};',
' for(var i in data) {',
' dataFormData[i] = data[i] +\'\';',
' }',
' form.val(\'dataForm\', dataFormData);',
' form.render(null, \'dataForm\');',
options.htmlCode.script.init.update.join('\n'),
' }, function(code, data) {',
' top.dialog.msg(data.msg);',
' }, function() {',
' loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});',
' }, function() {',
' top.dialog.close(loadLayerIndex);',
' });',
' }',
' initData();',
' // 关闭页面',
@ -1608,25 +1646,6 @@ layui.config({
' // 这里写返回按钮的逻辑,默认是关闭',
' parent.layer.close(parent.layer.getFrameIndex(window.name));',
' });',
' // 提交表单',
' form.on(\'submit(submitForm)\', function(formData) {',
' dialog.confirm(\'确定提交吗?\', function(index) {',
' dialog.close(index);',
' var loadLayerIndex;',
' restAjax.post(restAjax.path(\'app/coal-appointment/save-release/{userId}\', [userId]), formData.field, null, function(code, data) {',
' // 这里手动添加操作成功后的操作',
' }, function(code, data) {',
' $(\'#submitFormBtn\').show();',
' dialog.msg(data.msg);',
' }, function() {',
' $(\'#submitFormBtn\').hide();',
' loadLayerIndex = dialog.msg(dataMessage.committing, {icon: 16, time: 0, shade: 0.3});',
' }, function() {',
' dialog.close(loadLayerIndex);',
' });',
' });',
' return false;',
' });',
' });',
'</script>',
'</body>',
@ -1637,21 +1656,13 @@ layui.config({
// 生成HTML代码
function getAppSavePageCode(_htmlelem) {
options.htmlCode.script = '';
var tabsize = 4;
var tabchar = ' ';
if (tabsize == 1) {
tabchar = '\t';
}
var TP_FORM_CODE = [
'<div class="layui-anim layui-anim-fadein">',
' <div class="layui-card">',
' <div class="layui-card-body" style="padding: 15px;">',
' <form class="layui-form layui-form-pane" lay-filter="dataForm">',
_htmlelem.html(),
' <div class="layui-form-item layui-layout-admin">',
' <div class="layui-form-item layui-layout-admin">',
' <div class="layui-input-block">',
' <div class="layui-footer" style="left: 0;">',
' <button type="button" id="submitFormBtn" class="layui-btn" lay-submit lay-filter="submitForm">提交</button>',
@ -1666,24 +1677,13 @@ layui.config({
' <input type="hidden" id="formVersion" value="${formVersion}">',
'</div>',
].join('');
TP_FORM_CODE = style_html(TP_FORM_CODE, tabsize, tabchar, 2000);
TP_FORM_CODE = style_html(TP_FORM_CODE, 1, '\t', 2000);
//构件 html
var TP_HTML_CODE = [
'<!DOCTYPE html>',
'<html>',
'<head>',
' <base href="${contextPath}"/>',
' <meta charset="utf-8">',
' <title>${formName}</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, maximum-scale=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="assets/layuiadmin/layui/css/layui.css" media="all">',
' <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">',
' <link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">',
'</head>',
getPageHeaderCode(),
'<body>',
TP_FORM_CODE,
'<script src="assets/js/vendor/viewer/viewer.min.js"></script>',
@ -1702,6 +1702,7 @@ layui.config({
' window.dialog = layui.dialog;',
' window.restAjax = layui.restajax;',
' window.dataMessage = layui.datamessage;',
' var token = restAjax.params(window.location.href).token;',
' var viewerObj = {};',
' // 刷新下载模板',
@ -1725,9 +1726,13 @@ layui.config({
' }',
' return;',
' }',
' restAjax.get(restAjax.path(\'app/file/list-release\', []), {',
' restAjax.get(restAjax.path(\'app/file/list\', []), {',
' ids: ids',
' }, null, function(code, data) {',
' }, {',
' headers: {',
' token: token',
' }',
' }, function(code, data) {',
' refreshDownloadTemplet(fileName, data);',
' if(callback) {',
' callback(fileName, data);',
@ -1737,10 +1742,13 @@ layui.config({
' });',
' }',
options.htmlCode.script,
options.htmlCode.script.func.save.join('\n'),
' // 初始化内容',
' function initData() {',
options.htmlCode.script.init.save.join('\n'),
' }',
' initData();',
' // 关闭页面',
@ -1753,7 +1761,14 @@ layui.config({
' dialog.confirm(\'确定提交吗?\', function(index) {',
' dialog.close(index);',
' var loadLayerIndex;',
' restAjax.post(restAjax.path(\'app/coal-appointment/save-release/{userId}\', [userId]), formData.field, null, function(code, data) {',
options.htmlCode.script.submit.join('\n'),
' restAjax.post(restAjax.path(\'app/form-report/save/code/{formCode}/version/{formVersion}\', [$(\'#formCode\').val(), $(\'#formVersion\').val()]), formData.field, {',
' headers: {',
' token: token',
' }',
' }, function(code, data) {',
' // 这里手动添加操作成功后的操作',
' }, function(code, data) {',
' $(\'#submitFormBtn\').show();',
@ -1777,21 +1792,13 @@ layui.config({
// 生成HTML代码
function getAppUpdatePageCode(_htmlelem) {
options.htmlCode.script = '';
var tabsize = 4;
var tabchar = ' ';
if (tabsize == 1) {
tabchar = '\t';
}
var TP_FORM_CODE = [
'<div class="layui-anim layui-anim-fadein">',
' <div class="layui-card">',
' <div class="layui-card-body" style="padding: 15px;">',
' <form class="layui-form layui-form-pane" lay-filter="dataForm">',
_htmlelem.html(),
' <div class="layui-form-item layui-layout-admin">',
' <div class="layui-form-item layui-layout-admin">',
' <div class="layui-input-block">',
' <div class="layui-footer" style="left: 0;">',
' <button type="button" id="submitFormBtn" class="layui-btn" lay-submit lay-filter="submitForm">提交</button>',
@ -1806,24 +1813,13 @@ layui.config({
' <input type="hidden" id="formVersion" value="${formVersion}">',
'</div>',
].join('');
TP_FORM_CODE = style_html(TP_FORM_CODE, tabsize, tabchar, 2000);
TP_FORM_CODE = style_html(TP_FORM_CODE, 1, '\t', 2000);
//构件 html
var TP_HTML_CODE = [
'<!DOCTYPE html>',
'<html>',
'<head>',
' <base href="${contextPath}"/>',
' <meta charset="utf-8">',
' <title>${formName}</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, maximum-scale=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="assets/layuiadmin/layui/css/layui.css" media="all">',
' <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">',
' <link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">',
'</head>',
getPageHeaderCode(),
'<body>',
TP_FORM_CODE,
'<script src="assets/js/vendor/viewer/viewer.min.js"></script>',
@ -1842,6 +1838,9 @@ layui.config({
' window.dialog = layui.dialog;',
' window.restAjax = layui.restajax;',
' window.dataMessage = layui.datamessage;',
' var queryParams = restAjax.params(window.location.href);',
' var uid = queryParams.uid;',
' var token = queryParams.token;',
' var viewerObj = {};',
' // 刷新下载模板',
@ -1865,9 +1864,13 @@ layui.config({
' }',
' return;',
' }',
' restAjax.get(restAjax.path(\'app/file/list-release\', []), {',
' restAjax.get(restAjax.path(\'app/file/list\', []), {',
' ids: ids',
' }, null, function(code, data) {',
' }, {',
' headers: {',
' token: token',
' }',
' }, function(code, data) {',
' refreshDownloadTemplet(fileName, data);',
' if(callback) {',
' callback(fileName, data);',
@ -1877,10 +1880,33 @@ layui.config({
' });',
' }',
options.htmlCode.script,
options.htmlCode.script.func.update.join('\n'),
' // 初始化内容',
' function initData() {',
' var self = this;',
' var loadLayerIndex;',
' top.restAjax.get(restAjax.path(\'app/form-report/get/code/{formCode}/version/{formVersion}/uid/{uid}\', [$(\'#formCode\').val(), $(\'#formVersion\').val(), uid]), {}, {',
' headers: {',
' token: token',
' }',
' }, function(code, data) {',
' var dataFormData = {};',
' for(var i in data) {',
' dataFormData[i] = data[i] +\'\';',
' }',
' form.val(\'dataForm\', dataFormData);',
' form.render(null, \'dataForm\');',
options.htmlCode.script.init.update.join('\n'),
' }, function(code, data) {',
' top.dialog.msg(data.msg);',
' }, function() {',
' loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});',
' }, function() {',
' top.dialog.close(loadLayerIndex);',
' });',
' }',
' initData();',
' // 关闭页面',
@ -1893,7 +1919,14 @@ layui.config({
' dialog.confirm(\'确定提交吗?\', function(index) {',
' dialog.close(index);',
' var loadLayerIndex;',
' restAjax.post(restAjax.path(\'app/coal-appointment/save-release/{userId}\', [userId]), formData.field, null, function(code, data) {',
options.htmlCode.script.submit.join('\n'),
' restAjax.post(restAjax.path(\'api/form-report/update/code/{formCode}/version/{formVersion}/uid/{uid}\', [$(\'#formCode\').val(), $(\'#formVersion\').val(), uid]), formData.field, {',
' headers: {',
' token: token',
' }',
' }, function(code, data) {',
' // 这里手动添加操作成功后的操作',
' }, function(code, data) {',
' $(\'#submitFormBtn\').show();',
@ -1917,28 +1950,12 @@ layui.config({
// 生成HTML代码
function getAppShowPageCode(_htmlelem) {
options.htmlCode.script = '';
var tabsize = 4;
var tabchar = ' ';
if (tabsize == 1) {
tabchar = '\t';
}
var TP_FORM_CODE = [
'<div class="layui-anim layui-anim-fadein">',
' <div class="layui-card">',
' <div class="layui-card-body" style="padding: 15px;">',
' <form class="layui-form layui-form-pane" lay-filter="dataForm">',
_htmlelem.html(),
' <div class="layui-form-item layui-layout-admin">',
' <div class="layui-input-block">',
' <div class="layui-footer" style="left: 0;">',
' <button type="button" id="submitFormBtn" class="layui-btn" lay-submit lay-filter="submitForm">提交</button>',
' <button type="button" class="layui-btn layui-btn-primary close">返回</button>',
' </div>',
' </div>',
' </div>',
' </form>' +
' </div>',
' </div>',
@ -1946,24 +1963,13 @@ layui.config({
' <input type="hidden" id="formVersion" value="${formVersion}">',
'</div>',
].join('');
TP_FORM_CODE = style_html(TP_FORM_CODE, tabsize, tabchar, 2000);
TP_FORM_CODE = style_html(TP_FORM_CODE, 1, '\t', 2000);
//构件 html
var TP_HTML_CODE = [
'<!DOCTYPE html>',
'<html>',
'<head>',
' <base href="${contextPath}"/>',
' <meta charset="utf-8">',
' <title>${formName}</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, maximum-scale=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="assets/layuiadmin/layui/css/layui.css" media="all">',
' <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">',
' <link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">',
'</head>',
getPageHeaderCode(),
'<body>',
TP_FORM_CODE,
'<script src="assets/js/vendor/viewer/viewer.min.js"></script>',
@ -1982,6 +1988,9 @@ layui.config({
' window.dialog = layui.dialog;',
' window.restAjax = layui.restajax;',
' window.dataMessage = layui.datamessage;',
' var queryParams = restAjax.params(window.location.href);',
' var uid = queryParams.uid;',
' var token = queryParams.token;',
' var viewerObj = {};',
' // 刷新下载模板',
@ -2005,9 +2014,13 @@ layui.config({
' }',
' return;',
' }',
' restAjax.get(restAjax.path(\'app/file/list-release\', []), {',
' restAjax.get(restAjax.path(\'app/file/list\', []), {',
' ids: ids',
' }, null, function(code, data) {',
' }, {',
' headers: {',
' token: token',
' }',
' }, function(code, data) {',
' refreshDownloadTemplet(fileName, data);',
' if(callback) {',
' callback(fileName, data);',
@ -2017,10 +2030,33 @@ layui.config({
' });',
' }',
options.htmlCode.script,
options.htmlCode.script.func.update.join('\n'),
' // 初始化内容',
' function initData() {',
' var self = this;',
' var loadLayerIndex;',
' top.restAjax.get(restAjax.path(\'app/form-report/get/code/{formCode}/version/{formVersion}/uid/{uid}\', [$(\'#formCode\').val(), $(\'#formVersion\').val(), uid]), {}, {',
' headers: {',
' token: token',
' }',
' }, function(code, data) {',
' var dataFormData = {};',
' for(var i in data) {',
' dataFormData[i] = data[i] +\'\';',
' }',
' form.val(\'dataForm\', dataFormData);',
' form.render(null, \'dataForm\');',
options.htmlCode.script.init.update.join('\n'),
' }, function(code, data) {',
' top.dialog.msg(data.msg);',
' }, function() {',
' loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});',
' }, function() {',
' top.dialog.close(loadLayerIndex);',
' });',
' }',
' initData();',
' // 关闭页面',
@ -2028,25 +2064,6 @@ layui.config({
' // 这里写返回按钮的逻辑,默认是关闭',
' parent.layer.close(parent.layer.getFrameIndex(window.name));',
' });',
' // 提交表单',
' form.on(\'submit(submitForm)\', function(formData) {',
' dialog.confirm(\'确定提交吗?\', function(index) {',
' dialog.close(index);',
' var loadLayerIndex;',
' restAjax.post(restAjax.path(\'app/coal-appointment/save-release/{userId}\', [userId]), formData.field, null, function(code, data) {',
' // 这里手动添加操作成功后的操作',
' }, function(code, data) {',
' $(\'#submitFormBtn\').show();',
' dialog.msg(data.msg);',
' }, function() {',
' $(\'#submitFormBtn\').hide();',
' loadLayerIndex = dialog.msg(dataMessage.committing, {icon: 16, time: 0, shade: 0.3});',
' }, function() {',
' dialog.close(loadLayerIndex);',
' });',
' });',
' return false;',
' });',
' });',
'</script>',
'</body>',
@ -2072,6 +2089,12 @@ layui.config({
return;
}
options.htmlCode.script.func.save = [];
options.htmlCode.script.func.update = [];
options.htmlCode.script.init.save = [];
options.htmlCode.script.init.update = [];
options.htmlCode.script.submit = [];
var _htmlelem = $('<div id="app" style="height:100%;width:100%;"></div>');
that.generateHtml(options.data, _htmlelem);
@ -2167,28 +2190,145 @@ layui.config({
}
});
};
/* 生成 Html 代码 */
Class.prototype.generateHtml = function (jsondata, elem) {
var that = this,
options = that.config;
elem.append($('#formDesignerForm').clone(false));
// elem.append($('#formDesignerForm').clone(false));
$.each(jsondata, function (index, item) {
if (item.tag === 'slider') {
//定义初始值
options.htmlCode.script += ['slider.render({', , 'elem: "#' + item.tag + item.id + '" ,', 'value: ' + item.defaultValue + ',', 'min: ' + item.minValue + ',', 'max: ' + item.maxValue + ',', 'step: ' + item.stepValue + ',', 'input:' + item.isInput + ',', 'change: function(value){', '$("#' + item.id + '").find("input[name="' + item.id + '"]").val(value);', ' }', '});'].join('');
} else if (item.tag === 'date') {
options.htmlCode.script += ['laydate.render({', 'elem: "#' + item.tag + item.id + '" ,', 'type:"' + item.datetype + '",', 'format:"' + item.dateformat + '",', 'value:"' + item.dateDefaultValue + '",', 'min:"' + item.dataMinValue + '",', 'max:"' + item.dataMaxValue + '"});'].join('');
} else if (item.tag === 'rate') {
options.htmlCode.script += ['rate.render({', 'elem: "#' + item.tag + item.id + '" ,', 'value: ' + item.defaultValue + ',', 'text: ' + item.text + ',', 'length: ' + item.rateLength + ',', 'half: ' + item.half + ',', 'readonly: ' + item.readonly + ',', 'choose: function(value){', '$("#' + item.id + '").find("input[name="' + item.id + '"]").val(value);', '}', '});'].join('');
} else if (item.tag === 'carousel') {
options.htmlCode.script += ['carousel.render({', 'elem: "#' + item.tag + item.id + '" ', ',width: "' + item.width + '"', ',height: "' + item.height + '"', ',arrow: "' + item.arrow + '"', ',interval: "' + item.interval + '"', ',anim: "' + item.anim + '"', ',autoplay: "' + item.autoplay + '"', '});'].join('');
} else if (item.tag === 'uploadFile') {
options.htmlCode.script += ['upload.render({', 'elem: "#' + item.tag + item.id + '" ', ', url: "' + item.uploadUrl + '"', ' ,elemList: $("#list-' + item.id + '")', ',accept: "file"', ',multiple: true', ',number: 3', ',auto: false', ',bindAction: "#listAction-' + item.id + '"', ',choose: function(obj){', 'var that = this;', 'var files = this.files = obj.pushFile();', 'obj.preview(function(index, file, result){', 'var tr = $(["<tr id="upload-"+ index +"">"', ',"<td>"+ file.name +"</td>"', ',"<td>"+ (file.size/1014).toFixed(1) +"kb</td>"', ',"<td><div class="layui-progress" lay-filter="progress-demo-"+ index +""><div class="layui-progress-bar" lay-percent=""></div></div></td>"', ',"<td>","<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>","<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>","</td>"', ',"</tr>"].join(""));', 'tr.find(".demo-reload").on("click", function(){obj.upload(index, file);});', 'tr.find(".demo-delete").on("click", function(){delete files[index];tr.remove();uploadListIns.config.elem.next()[0].value = ""; });', 'that.elemList.append(tr);', 'element.render("progress");}', ',done: function(res, index, upload)', '{var that = this;if(res.code == 0){var tr = that.elemList.find("tr#upload-"+ index),tds = tr.children();tds.eq(3).html("");delete this.files[index];return;}this.error(index, upload);}', ',allDone: function(obj){console.log(obj)}', ',error: function(index, upload){var that = this;var tr = that.elemList.find("tr#upload-"+ index),', 'tds = tr.children();tds.eq(3).find(".demo-reload").removeClass("layui-hide");}', ',progress: function(n, elem, e, index){element.progress("progress-demo-"+ index, n + "%");}', '});'].join('');
} else if (item.tag === 'uploadImage') {
options.htmlCode.script += ['upload.render({', 'elem: "#' + item.tag + item.id + '" ', ', url: "' + item.uploadUrl + '"', ', multiple: true', ', before: function (obj) {', 'layer.msg("图片上传中...", {', 'icon: 16,', 'shade: 0.01,', 'time: 0', '})', '}', ', done: function (res) {', 'layer.close(layer.msg());', '$("#uploader-list-' + item.id + '").append(', '\'<div class="file-iteme"><div class="handle"><i class="layui-icon layui-icon-delete"></i></div><img style="width: 100px;height: 100px;" src="\'+ res.data.src + \'">', '<div class="info">\'+ res.data.title+\'</div>', '</div>\'', ');', '}', '});'].join('');
} else if (item.tag === 'checkbox') {
options.htmlCode.script += ['form.verify({otherReq: function(value,item){' + 'var verifyName=$(item).attr("name"), verifyType=$(item).attr("type")' + ',formElem=$(item).parents(".layui-form"),verifyElem=formElem.find("input[name=\'"+verifyName+"\']")' + ',verifyElems = formElem.find("input"),isTrue= verifyElem.is(":checked"),focusElem = verifyElem.next().find("i.layui-icon");' + 'for (let i = 0; i < verifyElems.length; i++) {if (verifyElems[i].checked) {return false;}}' + 'if(!isTrue || !value){' + 'focusElem.css(verifyType=="radio"?{"color":"#FF5722"}:{"border-color":"#FF5722"});' + 'focusElem.first().attr("tabIndex","1").css("outline","0").blur(function() {' + 'focusElem.css(verifyType==\'radio\'?{"color":""}:{"border-color":""});' + '}).focus();' + 'return "必填项不能为空";}}});'].join('');
var subElem = $(that.components[item.tag].render(item, false));
elem.append(subElem);
if (item.tag === 'grid') {
$.each(item.columns, function (index2, item2) {
var colElem = subElem.find('.column'+ index2);
//获取当前的 DOM 对象
if (item2.list.length > 0) {
that.generateHtml(item2.list, colElem);
}
});
}
if(item.tag === 'date') {
var script = date.genScript(item);
options.htmlCode.script.func.save.push(script.func.save);
options.htmlCode.script.func.update.push(script.func.update);
options.htmlCode.script.init.save.push(script.init.save);
options.htmlCode.script.init.update.push(script.init.update);
} else if (item.tag === 'checkbox') {
var script = checkbox.genScript(item);
options.htmlCode.script.submit.push(script.commit);
options.htmlCode.script.init.update.push(script.init.update);
}
// if (item.tag === 'slider') {
// //定义初始值
// options.htmlCode.script.func.push([
// 'function init'+ item.id + '() {',
// ' slider.render({',
// ' elem: "#' + item.tag + item.id + '" ,',
// ' value: ' + item.defaultValue + ',',
// ' min: ' + item.minValue + ',',
// ' max: ' + item.maxValue + ',',
// ' step: ' + item.stepValue + ',',
// ' input:' + item.isInput + ',',
// ' change: function(value) {',
// ' $("#' + item.id + '").find("input[name="' + item.id + '"]").val(value);',
// ' }',
// ' });',
// '}'
// ].join('\n'));
// options.htmlCode.script.init.save.push(' function init'+ item.id + '();');
// options.htmlCode.script.init.update.push('function init'+ item.id + '();');
// } else if (item.tag === 'rate') {
// options.htmlCode.script.func.push([
// 'function init'+ item.id + '() {',
// ' rate.render({',
// ' elem: "#' + item.tag + item.id + '" ,',
// ' value: ' + item.defaultValue + ',',
// ' text: ' + item.text + ',',
// ' length: ' + item.rateLength + ',',
// ' half: ' + item.half + ',',
// ' readonly: ' + item.readonly + ',',
// ' choose: function(value) {',
// ' $("#' + item.id + '").find("input[name="' + item.id + '"]").val(value);',
// ' }',
// ' });',
// '}'
// ].join('\n'));
// options.htmlCode.script.init.save.push(' function init'+ item.id + '();');
// options.htmlCode.script.init.update.push('function init'+ item.id + '();');
// } else if (item.tag === 'carousel') {
// options.htmlCode.script.func.push([
// 'function init'+ item.id + '() {',
// ' carousel.render({',
// ' elem: "#' + item.tag + item.id + '",',
// ' width: "' + item.width + '",',
// ' height: "' + item.height + '",',
// ' arrow: "' + item.arrow + '",',
// ' interval: "' + item.interval + '",',
// ' anim: "' + item.anim + '",',
// ' autoplay: "' + item.autoplay + '"',
// ' });',
// '}'
// ].join('\n'));
// options.htmlCode.script.init.save.push(' function init'+ item.id + '();');
// options.htmlCode.script.init.update.push('function init'+ item.id + '();');
// } else if (item.tag === 'uploadFile') {
//
// } else if (item.tag === 'uploadImage') {
// console.log(item.tag);
// options.htmlCode.script.func.push([
// ' function init'+ item.id +'(){',
// ' var files = $(\'#'+ item.id +'File\').val();',
// ' initFileList(\''+ item.id +'\', files, function(fileName) {',
// ' var viewer = new Viewer(document.getElementById(fileName +\'FileBox\'), {navbar: false});',
// ' viewerObj[fileName] = viewer;',
// ' });',
// ' function initUpload(){',
// ' upload.render({',
// ' elem: \'#' + item.id +'FileUpload\',',
// ' url: restAjax.path(\''+ item.uploadUrl +'\', []),',
// ' field: \'image\',',
// ' done: function(res) {',
// ' var dataset = this.item[0].dataset;',
// ' var name = dataset.name;',
// ' var files = $(\'#\'+ name).val();',
// ' if(files.length > 0) {',
// ' files += \',\';',
// ' }',
// ' files += res.data;',
// ' initFileList(name, files, function(fileName) {',
// ' viewerObj[fileName].update();',
// ' });',
// ' },',
// ' error: function() {',
// ' dialog.msg(\'图片上传异常\')',
// ' }',
// ' });',
// ' }',
// ' initUpload();',
// ' $(\'.'+ item.id +'\remove-image\').on(\'click\', function(){',
// ' var name = this.dataset.name;',
// ' var id = this.dataset.id;',
// ' var files = $(\'#\'+ name).val().replace(id, \'\');',
// ' files = files.replace(/\,+/g, \',\');',
// ' if(files.charAt(0) == \',\') {',
// ' files = files.substring(1);',
// ' }',
// ' if(files.charAt(files.length - 1) == \',\') {',
// ' files = files.substring(0, files.length - 1);',
// ' }',
// ' initFileList(name, files, function(fileName) {',
// ' viewerObj[fileName].update();',
// ' initUpload();',
// ' });',
// ' });',
// ' }',
// ].join('\n'));
// options.htmlCode.script.init.save.push(' init'+ item.id +'();');
// options.htmlCode.script.init.update.push('init'+ item.id +'();');
// }
});
};
/* 重新渲染设计区*/

View File

@ -427,7 +427,7 @@ layui.define(['layer'], function (exports) {
},
c2: {
name: "选择型组件",
list: ['select', 'radio', 'checkbox', 'switch', 'slider', 'date', 'rate', 'carousel']
list: ['select', 'radio', 'checkbox', 'switch', 'date'/*, 'slider', 'rate', 'carousel'*/]
},
c3: {
name: "布局型组件",
@ -435,11 +435,11 @@ layui.define(['layer'], function (exports) {
},
c4: {
name: "上传组件",
list: ['uploadImage', 'uploadFile']
list: [/*'uploadImage', 'uploadFile'*/]
},
c5: {
name: "扩展组件",
list: ['laySign']
list: [/*'laySign'*/]
}
};
exports('formField', field);