Tenlion/wg-basic
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善动态表单组件

Browse Source
This commit is contained in:
wanggeng 2022-04-11 20:31:31 +08:00
parent b15e71c77b
commit 26f16d5743
12 changed files with 544 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
module-form/src/main/java/ink/wgink/module/form/template/page/app/app-form-save.ftl Normal file
View File

@ -0,0 +1,126 @@
<!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>
<body>
<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">
${formFieldHtml}
<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>
<input type="hidden" id="formCode" value="${formCode}">,
<input type="hidden" id="formVersion" value="${formVersion}">,
</div>
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script>
layui.config({
base: 'assets/layuiadmin/'
}).extend({
index: 'lib/index'
}).use(['index', 'form', 'laydate', 'laytpl', 'upload', 'restajax', 'datamessage', 'dialog'], function () {
var $ = layui.$;
var form = layui.form;
var laytpl = layui.laytpl;
var laydate = layui.laydate;
var upload = layui.upload;
window.dialog = layui.dialog;
window.restAjax = layui.restajax;
window.dataMessage = layui.datamessage;
var viewerObj = {};
// 刷新下载模板',
function refreshDownloadTemplet(fileName, file) {
var dataRander = {};
dataRander[fileName] = file;
laytpl(document.getElementById(fileName + 'FileDownload').innerHTML).render(dataRander, function (html) {
document.getElementById(fileName + 'FileBox').innerHTML = html;
});
}
// 初始化文件列表',
function initFileList(fileName, ids, callback) {
var dataForm = {};
dataForm[fileName] = ids;
form.val('dataForm', dataForm);
if (!ids) {
refreshDownloadTemplet(fileName, []);
if (callback) {
callback(fileName, []);
}
return;
}
restAjax.get(restAjax.path('app/file/list-release', []), {
ids: ids
}, null, function (code, data) {
refreshDownloadTemplet(fileName, data);
if (callback) {
callback(fileName, data);
}
}, function (code, data) {
dialog.msg(data.msg);
});
}
${initSaveFunctions}
// 初始化内容
function initData() {
${initSaveScript}
}
initData();
// 关闭页面',
$('.close').on('click', function () {
// 这里写返回按钮的逻辑，默认是关闭',
parent.layer.close(parent.layer.getFrameIndex(window.name));
});
// 提交表单',
form.on('submit(submitForm)', function (formData) {
dialog.confirm('确定提交吗？', function (index) {
dialog.close(index);
var loadLayerIndex;
${submitSaveScript}
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();
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>
</html>

126
module-form/src/main/java/ink/wgink/module/form/template/page/app/app-form-update.ftl Normal file
View File

@ -0,0 +1,126 @@
<!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>
<body>
<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">
${formFieldHtml}
<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>
<input type="hidden" id="formCode" value="${formCode}">,
<input type="hidden" id="formVersion" value="${formVersion}">,
</div>
<script src="assets/js/vendor/viewer/viewer.min.js"></script>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script>
layui.config({
base: 'assets/layuiadmin/'
}).extend({
index: 'lib/index'
}).use(['index', 'form', 'laydate', 'laytpl', 'upload', 'restajax', 'datamessage', 'dialog'], function () {
var $ = layui.$;
var form = layui.form;
var laytpl = layui.laytpl;
var laydate = layui.laydate;
var upload = layui.upload;
window.dialog = layui.dialog;
window.restAjax = layui.restajax;
window.dataMessage = layui.datamessage;
var viewerObj = {};
// 刷新下载模板',
function refreshDownloadTemplet(fileName, file) {
var dataRander = {};
dataRander[fileName] = file;
laytpl(document.getElementById(fileName + 'FileDownload').innerHTML).render(dataRander, function (html) {
document.getElementById(fileName + 'FileBox').innerHTML = html;
});
}
// 初始化文件列表',
function initFileList(fileName, ids, callback) {
var dataForm = {};
dataForm[fileName] = ids;
form.val('dataForm', dataForm);
if (!ids) {
refreshDownloadTemplet(fileName, []);
if (callback) {
callback(fileName, []);
}
return;
}
restAjax.get(restAjax.path('app/file/list-release', []), {
ids: ids
}, null, function (code, data) {
refreshDownloadTemplet(fileName, data);
if (callback) {
callback(fileName, data);
}
}, function (code, data) {
dialog.msg(data.msg);
});
}
${initSaveFunctions}
// 初始化内容
function initData() {
${initSaveScript}
}
initData();
// 关闭页面',
$('.close').on('click', function () {
// 这里写返回按钮的逻辑，默认是关闭',
parent.layer.close(parent.layer.getFrameIndex(window.name));
});
// 提交表单',
form.on('submit(submitForm)', function (formData) {
dialog.confirm('确定提交吗？', function (index) {
dialog.close(index);
var loadLayerIndex;
${submitSaveScript}
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();
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>
</html>

28
module-form/src/main/resources/static/form-design/modules/components/checkbox.js
View File

@ -4,6 +4,16 @@ layui.define(['jquery', 'form', 'formUtils'], function(exports) {
var utils = layui.formUtils;
var formField = layui.formField;
var HTML_ARRAY = [
'<div id="{0}" class="layui-form-item {2}" data-id="{0}" data-tag="{1}" data-index="{3}">',
' <label class="layui-form-label {0}" style="width: {3}px"><span style="color:red;">{2}</span>{1}:</label>',
' <div class="layui-input-block" style="width:calc({0} - {1}px);margin-left: {1}px;">',
' <input type="checkbox" name="{0}[{1}]" title="{2}" checked {3} {4}>',
' <input type="checkbox" name="{0}[{1}]" title="{2}" {3} {4}>',
' </div>',
'</div>'
]
var checkbox = {
/**
* 根据json对象生成html对象
@ -16,18 +26,18 @@ layui.define(['jquery', 'form', 'formUtils'], function(exports) {
}
var _disabled = json.disabled ? 'disabled=""' : '';
var _required = json.required ? 'lay-verify="otherReq"' : '';
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);
var _html = HTML_ARRAY[0].format(json.id, json.tag, selected ? 'active' : '', json.index);
_html += HTML_ARRAY[1].format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth);
_html += HTML_ARRAY[2].format(json.width, json.labelWidth);
for (var i = 0; i < json.options.length; i++) {
if (json.options[i].checked) {
_html += '<input type="checkbox" name="{0}[{1}]" title="{2}" checked="" {3} {4}>'.format(json.id, json.options[i].value, json.options[i].text, _disabled, _required);
_html += HTML_ARRAY[3].format(json.id, json.options[i].value, json.options[i].text, _disabled, _required);
} else {
_html += '<input type="checkbox" name="{0}[{1}]" title="{2}" {3} {4}>'.format(json.id, json.options[i].value, json.options[i].text, _disabled, _required);
_html += HTML_ARRAY[4].format(json.id, json.options[i].value, json.options[i].text, _disabled, _required);
}
}
_html += '</div>';
_html += '</div>';
_html += HTML_ARRAY[5];
_html += HTML_ARRAY[6];
return _html;
},
update: function (json) {
@ -41,9 +51,9 @@ layui.define(['jquery', 'form', 'formUtils'], function(exports) {
//重绘设计区改id下的所有元素
for (var i = 0; i < json.options.length; i++) {
if (json.options[i].checked) {
_html += '<input type="checkbox" name="{0}[{1}]" title="{2}" checked="" {3} {4}>'.format(json.id, json.options[i].value, json.options[i].text, _disabled, _required);
_html += HTML_ARRAY[3].format(json.id, json.options[i].value, json.options[i].text, _disabled, _required);
} else {
_html += '<input type="checkbox" name="{0}[{1}]" title="{2}" {3} {4}>'.format(json.id, json.options[i].value, json.options[i].text, _disabled, _required);
_html += HTML_ARRAY[4].format(json.id, json.options[i].value, json.options[i].text, _disabled, _required);
}
}
$block.append(_html);

23
module-form/src/main/resources/static/form-design/modules/components/date.js
View File

@ -4,6 +4,15 @@ layui.define(['jquery', 'laydate', 'formUtils'], function(exports) {
var utils = layui.formUtils;
var formField = layui.formField;
var HTML_ARRAY = [
'<div id="{0}" class="layui-form-item {2}" data-id="{0}" data-tag="{1}" data-index="{3}">',
' <label class="layui-form-label {0}" style="width: {3}px;"><span style="color:red;">{2}</span>{1}:</label>',
' <div class="layui-input-block" style="width:calc({0} - {1}px);margin-left: {1}px;">',
' <input id="{1}{0}" name="{0}" lay-verify="{4}" class="layui-input icon-date widget-date {2}" style="line-height: 40px;{2}"></input>',
' </div>',
'</div>'
];
var date = {
/**
* 根据json对象生成html对象
@ -17,12 +26,12 @@ layui.define(['jquery', 'laydate', 'formUtils'], function(exports) {
var _disabledClass = json.disabled ? ' layui-disabled' : '';
var _disabledStyle = json.disabled ? ' pointer-events: none;' : '';
var _required = json.required ? 'required' : '';
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="{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>';
var _html = HTML_ARRAY[0].format(json.id, json.tag, selected ? 'active' : '', json.index);
_html += HTML_ARRAY[1].format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth);
_html += HTML_ARRAY[2].format(json.width, json.labelWidth);
_html += HTML_ARRAY[3].format(json.id, json.tag, _disabledClass, _disabledStyle, _required);
_html += HTML_ARRAY[4];
_html += HTML_ARRAY[5];
return _html;
},
update: function (json) {
@ -42,7 +51,7 @@ layui.define(['jquery', 'laydate', 'formUtils'], function(exports) {
$block.css({
width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth)
});
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);
var _html = HTML_ARRAY[3].format(json.id, json.tag, _disabledClass, _disabledStyle, _required);
$block.append(_html);
laydate.render({
elem: '#' + json.tag + json.id,

26
module-form/src/main/resources/static/form-design/modules/components/input.js
View File

@ -3,6 +3,15 @@ layui.define(['jquery', 'formField', 'formUtils'], function(exports) {
var formField = layui.formField;
var utils = layui.formUtils;
var HTML_ARRAY = [
'<div id="{0}" class="layui-form-item {2}" data-id="{0}" data-tag="{1}" data-index="{3}">',
' <label class="layui-form-label {0}" style="width: {3}px;"><span style="color:red;">{2}</span>{1}:</label>',
' <div class="layui-input-block" style="margin-left: {0}px">',
' <input name="{0}" value="{1}" placeholder="{3}" class="layui-input{7}" lay-vertype="tips" lay-verify="{6}" {4} {5} style="width:{2}">',
' </div>',
'</div>'
]
var input = {
/**
* 根据json对象生成html对象
@ -22,15 +31,12 @@ layui.define(['jquery', 'formField', 'formUtils'], function(exports) {
_required = _required + '|' + json.expression;
}
}
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="margin-left: {0}px">'.format(json.labelWidth);
_html += '<input name="{0}" value="{1}" placeholder="{3}" class="layui-input{7}" lay-vertype="tips" lay-verify="{6}" {4} {5} style="width:{2}">'.format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _readonly, _disabled, _required, _disabledClass);
_html += '</div>';
// if(selected){
// _html +='<div class="widget-view-action"><i class="layui-icon layui-icon-file"></i><i class="layui-icon layui-icon-delete"></i></div><div class="widget-view-drag"><i class="layui-icon layui-icon-screen-full"></i></div>';
// }
_html += '</div>';
var _html = HTML_ARRAY[0].format(json.id, json.tag, selected ? 'active' : '', json.index);
_html += HTML_ARRAY[1].format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth);
_html += HTML_ARRAY[2].format(json.labelWidth);
_html += HTML_ARRAY[3].format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _readonly, _disabled, _required, _disabledClass);
_html += HTML_ARRAY[4];
_html += HTML_ARRAY[5];
return _html;
},
update: function (json) {
@ -55,7 +61,7 @@ layui.define(['jquery', 'formField', 'formUtils'], function(exports) {
$label.append(json.label + ":");
var _html = '';
//重绘设计区改id下的所有元素
_html += '<input name="{0}" value="{1}" placeholder="{3}" class="layui-input{7}" lay-vertype="tips" lay-verify="{6}" {4} {5} style="width:{2}">'.format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _readonly, _disabled, _required, _disabledClass);
_html += HTML_ARRAY[3].format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _readonly, _disabled, _required, _disabledClass);
$block.append(_html);
},
/* 获取对象 */

23
module-form/src/main/resources/static/form-design/modules/components/numberInput.js
View File

@ -3,6 +3,15 @@ layui.define(['jquery', 'formUtils', 'formField'], function(exports) {
var utils = layui.formUtils;
var formField = layui.formField;
var HTML_ARRAY = [
'<div id="{0}" class="layui-form-item {2}" data-id="{0}" data-tag="{1}" data-index="{3}">',
' <label class="layui-form-label" style="width: {1};">{0}:</label>',
' <div class="layui-input-block" style="width:calc({0} - {1}px);margin-left: {1}px;">',
' <input name="{0}" id="{9}" value="{1}" type="number" placeholder="{3}" class="layui-input{5}" lay-vertype="tips" min="{6}" max="{7}" step="{8}" {4} style="width:{2}">',
' </div>',
'</div>'
];
var numberInput = {
/**
* 根据json对象生成html对象
@ -16,12 +25,12 @@ layui.define(['jquery', 'formUtils', 'formField'], function(exports) {
var _disabled = json.disabled ? 'disabled=""' : '';
var _disabledClass = json.disabled ? ' layui-disabled' : '';
var _required = json.required ? 'required' : '';
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" style="width: {1};">{0}:</label>'.format(json.label, 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 name="{0}" id="{9}" value="{1}" type="number" placeholder="{3}" class="layui-input{5}" lay-vertype="tips" min="{6}" max="{7}" step="{8}" {4} style="width:{2}">'.format(json.id, json.defaultValue ? json.defaultValue : '0', json.width, json.placeholder, _disabled, _disabledClass, json.minValue, json.maxValue, json.stepValue, json.tag + json.id);
_html += '</div>';
_html += '</div>';
var _html = HTML_ARRAY[0].format(json.id, json.tag, selected ? 'active' : '', json.index);
_html += HTML_ARRAY[1].format(json.label, json.labelWidth);
_html += HTML_ARRAY[2].format(json.width, json.labelWidth);
_html += HTML_ARRAY[3].format(json.id, json.defaultValue ? json.defaultValue : '0', json.width, json.placeholder, _disabled, _disabledClass, json.minValue, json.maxValue, json.stepValue, json.tag + json.id);
_html += HTML_ARRAY[4];
_html += HTML_ARRAY[5];
return _html;
},
update: function (json) {
@ -39,7 +48,7 @@ layui.define(['jquery', 'formUtils', 'formField'], function(exports) {
});
var _html = '';
//重绘设计区改id下的所有元素
_html += '<input name="{0}" id="{9}" value="{1}" type="number" placeholder="{3}" class="layui-input{5}" lay-vertype="tips" min="{6}" max="{7}" step="{8}" {4} style="width:{2}">'.format(json.id, json.defaultValue ? json.defaultValue : '0', json.width, json.placeholder, _disabled, _disabledClass, json.minValue, json.maxValue, json.stepValue, json.tag + json.id);
_html += HTML_ARRAY[3].format(json.id, json.defaultValue ? json.defaultValue : '0', json.width, json.placeholder, _disabled, _disabledClass, json.minValue, json.maxValue, json.stepValue, json.tag + json.id);
$block.append(_html);
var _width = json.width.replace(/[^\d]/g, '');
if ('' != _width) {

23
module-form/src/main/resources/static/form-design/modules/components/password.js
View File

@ -3,6 +3,15 @@ layui.define(['jquery', 'formUtils', 'formField'], function (exports) {
var utils = layui.formUtils;
var formField = layui.formField;
var HTML_ARRAY = [
'<div id="{0}" class="layui-form-item {2}" data-id="{0}" data-tag="{1}" data-index="{3}">',
' <label class="layui-form-label {0}" style="width: {3}px"><span style="color:red;">{2}</span>{1}:</label>',
' <div class="layui-input-block" style="margin-left: {0}px">',
' <input type="password" name="{0}" placeholder="{3}" value="{1}" autocomplete="off" style="width:{2}" {4} {5} {6} class="layui-input{7}">',
' </div>',
'</div>'
]
var password = {
/**
* 根据json对象生成html对象
@ -17,12 +26,12 @@ layui.define(['jquery', 'formUtils', 'formField'], function (exports) {
var _readonly = json.readonly ? 'readonly=""' : '';
var _required = json.required ? 'lay-verify="required"' : '';
var _disabledClass = json.disabled ? ' layui-disabled' : '';
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="margin-left: {0}px">'.format(json.labelWidth);
_html += '<input type="password" name="{0}" placeholder="{3}" value="{1}" autocomplete="off" style="width:{2}" {4} {5} {6} class="layui-input{7}">'.format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _readonly, _disabled, _required, _disabledClass);
_html += '</div>';
_html += '</div>';
var _html = HTML_ARRAY[0].format(json.id, json.tag, selected ? 'active' : '', json.index);
_html += HTML_ARRAY[1].format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth);
_html += HTML_ARRAY[2].format(json.labelWidth);
_html += HTML_ARRAY[3].format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _readonly, _disabled, _required, _disabledClass);
_html += HTML_ARRAY[4];
_html += HTML_ARRAY[4];
return _html;
},
update: function (json) {
@ -42,7 +51,7 @@ layui.define(['jquery', 'formUtils', 'formField'], function (exports) {
$label.append(json.label + ":");
var _html = '';
//重绘设计区改id下的所有元素
_html += '<input type="password" name="{0}" placeholder="{3}" value="{1}" autocomplete="off" style="width:{2}" {4} {5} {6} class="layui-input{7}">'.format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _readonly, _disabled, _required, _disabledClass);
_html += HTML_ARRAY[3].format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _readonly, _disabled, _required, _disabledClass);
$block.append(_html);
},
/* 获取对象 */

28
module-form/src/main/resources/static/form-design/modules/components/radio.js
View File

@ -4,6 +4,16 @@ layui.define(['jquery', 'form', 'formUtils'], function(exports) {
var utils = layui.formUtils;
var formField = layui.formField;
var HTML_ARRAY = [
'<div id="{0}" class="layui-form-item {2}" data-id="{0}" data-tag="{1}" data-index="{3}">',
' <label class="layui-form-label" style="width: {1}px;">{0}:</label>',
' <div class="layui-input-block" style="margin-left: {0}px">',
' <input type="radio" name="{0}" value="{1}" title="{2}" checked="" {3}>',
' <input type="radio" name="{0}" value="{1}" title="{2}" {3}>',
' </div>',
'</div>'
];
var radio = {
/**
* 根据json对象生成html对象
@ -15,18 +25,18 @@ layui.define(['jquery', 'form', 'formUtils'], function(exports) {
selected = false;
}
var _disabled = json.disabled ? 'disabled=""' : '';
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" style="width: {1}px;">{0}:</label>'.format(json.label, json.labelWidth);
_html += '<div class="layui-input-block" style="margin-left: {0}px">'.format(json.labelWidth);
var _html = HTML_ARRAY[0].format(json.id, json.tag, selected ? 'active' : '', json.index);
_html += HTML_ARRAY[1].format(json.label, json.labelWidth);
_html += HTML_ARRAY[2].format(json.labelWidth);
for (var i = 0; i < json.options.length; i++) {
if (json.options[i].checked) {
_html += '<input type="radio" name="{0}" value="{1}" title="{2}" checked="" {3}>'.format(json.id, json.options[i].value, json.options[i].text, _disabled);
_html += HTML_ARRAY[3].format(json.id, json.options[i].value, json.options[i].text, _disabled);
} else {
_html += '<input type="radio" name="{0}" value="{1}" title="{2}" {3}>'.format(json.id, json.options[i].value, json.options[i].text, _disabled);
_html += HTML_ARRAY[4].format(json.id, json.options[i].value, json.options[i].text, _disabled);
}
}
_html += '</div>';
_html += '</div>';
_html += HTML_ARRAY[5];
_html += HTML_ARRAY[6];
return _html;
},
update: function (json) {
@ -45,9 +55,9 @@ layui.define(['jquery', 'form', 'formUtils'], function(exports) {
//重绘设计区改id下的所有元素
for (var i = 0; i < json.options.length; i++) {
if (json.options[i].checked) {
_html += '<input type="radio" name="{0}" value="{1}" title="{2}" checked="" {3}>'.format(json.id, json.options[i].value, json.options[i].text, _disabled);
_html += HTML_ARRAY[3].format(json.id, json.options[i].value, json.options[i].text, _disabled);
} else {
_html += '<input type="radio" name="{0}" value="{1}" title="{2}" {3}>'.format(json.id, json.options[i].value, json.options[i].text, _disabled);
_html += HTML_ARRAY[4].format(json.id, json.options[i].value, json.options[i].text, _disabled);
}
}
$block.append(_html);

41
module-form/src/main/resources/static/form-design/modules/components/select.js
View File

@ -4,6 +4,18 @@ layui.define(['jquery', 'form', 'formUtils'], function(exports) {
var utils = layui.formUtils;
var formField = layui.formField;
var HTML_ARRAY = [
'<div id="{0}" class="layui-form-item {2}" data-id="{0}" data-tag="{1}" data-index="{3}">',
' <label class="layui-form-label {0}" style="width: {3}px;"><span style="color:red;">{2}</span>{1}:</label>',
' <div class="layui-input-block layui-form" lay-filter="{0}" style="margin-left: {1}px">',
' <select name="{0}" lay-verify="{2}" {1} >',
' <option value="{0}" selected="">{1}</option>',
' <option value="{0}">{1}</option>',
' </select>',
' </div>',
'</div>'
];
var select = {
/**
* 根据json对象生成html对象
@ -16,23 +28,20 @@ layui.define(['jquery', 'form', 'formUtils'], function(exports) {
}
var _disabled = json.disabled ? 'disabled=""' : '';
var _required = json.required ? 'required' : '';
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 layui-form" lay-filter="{0}" style="margin-left: {1}px">'.format(json.id, json.labelWidth);
_html += '<select name="{0}" lay-verify="{2}" {1} >'.format(json.id, _disabled, _required);
/*if (json.defaultValue === undefined) {
_html += '<option value="{0}" selected="">{1}</option>'.format('', '请选择');
}*/
var _html = HTML_ARRAY[0].format(json.id, json.tag, selected ? 'active' : '', json.index);
_html += HTML_ARRAY[1].format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth);
_html += HTML_ARRAY[2].format(json.id, json.labelWidth);
_html += HTML_ARRAY[3].format(json.id, _disabled, _required);
for (var i = 0; i < json.options.length; i++) {
if (json.options[i].checked) {
_html += '<option value="{0}" selected="">{1}</option>'.format(json.options[i].value, json.options[i].text);
_html += HTML_ARRAY[4].format(json.options[i].value, json.options[i].text);
} else {
_html += '<option value="{0}">{1}</option>'.format(json.options[i].value, json.options[i].text);
_html += HTML_ARRAY[5].format(json.options[i].value, json.options[i].text);
}
}
_html += '</select>'
_html += '</div>';
_html += '</div>';
_html += HTML_ARRAY[6]
_html += HTML_ARRAY[7];
_html += HTML_ARRAY[8];
return _html;
},
update: function (json) {
@ -44,15 +53,11 @@ layui.define(['jquery', 'form', 'formUtils'], function(exports) {
$label.empty();
var _html = '';
_html += '<select name="{0}" lay-verify="{2}" {1}>'.format(json.id, _disabled, _required);
//重绘设计区改id下的所有元素
/* if (json.defaultValue === undefined) {
_html += '<option value="{0}" selected="">{1}</option>'.format('', '请选择');
}*/
for (var i = 0; i < json.options.length; i++) {
if (json.options[i].checked) {
_html += '<option value="{0}" selected="">{1}</option>'.format(json.options[i].value, json.options[i].text);
_html += HTML_ARRAY[4].format(json.options[i].value, json.options[i].text);
} else {
_html += '<option value="{0}">{1}</option>'.format(json.options[i].value, json.options[i].text);
_html += HTML_ARRAY[5].format(json.options[i].value, json.options[i].text);
}
}
_html += '</select>'

23
module-form/src/main/resources/static/form-design/modules/components/textarea.js
View File

@ -3,6 +3,15 @@ layui.define(['jquery', 'formUtils', 'formField'], function (exports) {
var utils = layui.formUtils;
var formField = layui.formField;
var HTML_ARRAY = [
'<div id="{0}" class="layui-form-item layui-form-text {2}" data-id="{0}" data-tag="{1}" data-index="{3}">',
' <label class="layui-form-label {0}" style="width: {3};"><span style="color:red;">{2}</span>{1}:</label>',
' <div class="layui-input-block" style="width: {0}">',
' <textarea name="{0}" placeholder="{3}" width="{2}" class="layui-textarea{6}" {4} {5} {7}>{1}</textarea>',
' </div>',
'</div>'
]
var textarea = {
/**
* 根据json对象生成html对象
@ -17,12 +26,12 @@ layui.define(['jquery', 'formUtils', 'formField'], function (exports) {
var _required = json.required ? 'lay-verify="required"' : '';
var _readonly = json.readonly ? 'readonly=""' : '';
var _disabledClass = json.disabled ? ' layui-disabled' : '';
var _html = '<div id="{0}" class="layui-form-item layui-form-text {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};"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.width);
_html += '<div class="layui-input-block" style="width: {0}">'.format(json.width);
_html += '<textarea name="{0}" placeholder="{3}" width="{2}" class="layui-textarea{6}" {4} {5} {7}>{1}</textarea>'.format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _disabled, _required, _disabledClass, _readonly);
_html += '</div>';
_html += '</div>';
var _html = HTML_ARRAY[0].format(json.id, json.tag, selected ? 'active' : '', json.index);
_html += HTML_ARRAY[1].format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.width);
_html += HTML_ARRAY[2].format(json.width);
_html += HTML_ARRAY[3].format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _disabled, _required, _disabledClass, _readonly);
_html += HTML_ARRAY[4];
_html += HTML_ARRAY[5];
return _html;
},
update: function (json) {
@ -35,7 +44,7 @@ layui.define(['jquery', 'formUtils', 'formField'], function (exports) {
$block.empty();
$label.empty();
var _html = '';
_html += '<textarea name="{0}" placeholder="{3}" width="{2}" class="layui-textarea{6}" {4} {5} {7}>{1}</textarea>'.format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _disabled, _required, _disabledClass, _readonly);
_html += HTML_ARRAY[3].format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _disabled, _required, _disabledClass, _readonly);
$('#' + json.id + ' .layui-input-block').append(_html);
$label.css({
width: '{0}'.format(json.width)

4
module-form/src/main/resources/static/form-design/modules/components/uploadFile.js
View File

@ -6,6 +6,10 @@ layui.define(['jquery', 'upload', 'dialog', 'restajax', 'formUtils'], function(e
var restAjax = layui.restajax;
var formField = layui.formField;
var HTML_ARRAY = [
];
var uploadFile = {
/**
* 根据json对象生成html对象

147
module-form/src/main/resources/static/form-design/modules/formDesigner.js
View File

@ -2095,6 +2095,12 @@ layui.config({
options.htmlCode.script.init.update = [];
options.htmlCode.script.submit = [];
var fieldArray = [];
that.generateFieldHtml(options.data, fieldArray);
return;
var _htmlelem = $('<div id="app" style="height:100%;width:100%;"></div>');
that.generateHtml(options.data, _htmlelem);
@ -2331,6 +2337,147 @@ layui.config({
// }
});
};
Class.prototype.generateFieldHtml = function (jsondata, elem) {
var that = this,
options = that.config;
// elem.append($('#formDesignerForm').clone(false));
$.each(jsondata, function (index, item) {
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 +'();');
// }
});
};
/* 重新渲染设计区*/
Class.prototype.renderForm = function () {
var that = this,