huanghai
/
QingLong
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

'commit'

Browse Source
main
kgdxpr 1 year ago
parent 60b3b4666e
commit e9b2d3e86d
2 changed files with 125 additions and 84 deletions
Show Stats Download Patch File Download Diff File

105
WebRoot/view/tb/form/ayq/modules/formDesigner.js
Unescape View File

@ -17,7 +17,7 @@
+ 4.表单数据的获取与回显,禁用全表单
+------------------------------------------------------------------------------------+
*/
layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "element", "form", "slider", "laydate", "rate", "colorpicker", "layedit", "carousel", "upload", "formField", "staticField", "numberInput", "iconPicker", "cron", "labelGeneration"]
layui.config({ base: './ayq/modules/' }).define(["layer", 'flow', "laytpl", "element", "form", "slider", "laydate", "rate", "colorpicker", "layedit", "carousel", "upload", "formField", "staticField", "numberInput", "iconPicker", "cron", "labelGeneration"]
, function (exports) {
var $ = layui.jquery
, layer = layui.layer
@ -662,8 +662,8 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
_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);
$('#' + json.id + ' .layui-input-block').append(_html);
$label.css({width: '{0}'.format(json.width)});
$block.css({width: '{0}'.format(json.width)});
$label.css({ width: '{0}'.format(json.width) });
$block.css({ width: '{0}'.format(json.width) });
if (json.required) {
$label.append('<span style="color:red;">*</span>');
}
@ -796,15 +796,15 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
}
$label.append(json.label + ":");
form.render('select', json.id);
$('#' + json.id + ' .layui-input-block div.layui-unselect.layui-form-select').css({width: '{0}'.format(json.width)});
$('#' + json.id + ' .layui-input-block div.layui-unselect.layui-form-select').css({ width: '{0}'.format(json.width) });
if (json.hideLabel) {
$label.css("display", "none");
$block.css("margin-left", "0px");
$block.css({width: 'calc({0})'.format(json.width)});
$block.css({ width: 'calc({0})'.format(json.width) });
} else {
$label.css("display", "block");
$block.css("margin-left", json.labelWidth);
$block.css({width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth)});
$block.css({ width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) });
}
},
/**
@ -927,11 +927,11 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
if (json.hideLabel) {
$label.css("display", "none");
$block.css("margin-left", "0px");
$block.css({width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth)});
$block.css({ width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) });
} else {
$label.css("display", "block");
$block.css("margin-left", json.labelWidth);
$block.css({width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth)});
$block.css({ width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) });
}
var _html = '';
//重绘设计区改id下的所有元素
@ -1186,11 +1186,11 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
$label.css("display", "none");
$block.css("margin-left", "0px");
$block.css("border", "0px");
$block.css({width: 'calc({0})'.format(json.width)});
$block.css({ width: 'calc({0})'.format(json.width) });
} else {
$label.css("display", "block");
$block.css("margin-left", json.labelWidth);
$block.css({width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth)});
$block.css({ width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) });
}
$label.css("width", json.labelWidth);
form.render('checkbox');
@ -1301,11 +1301,11 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
if (json.hideLabel) {
$label.css("display", "none");
$block.css("margin-left", "0px");
$block.css({width: 'calc({0})'.format(json.width)});
$block.css({ width: 'calc({0})'.format(json.width) });
} else {
$label.css("display", "block");
$block.css("margin-left", json.labelWidth);
$block.css({width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth)});
$block.css({ width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) });
}
slider.render({
elem: '#' + json.tag + json.id,
@ -1439,11 +1439,11 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
if (json.hideLabel) {
$label.css("display", "none");
$block.css("margin-left", "0px");
$block.css({width: 'calc({0})'.format(json.width)});
$block.css({ width: 'calc({0})'.format(json.width) });
} else {
$label.css("display", "block");
$block.css("margin-left", json.labelWidth);
$block.css({width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth)});
$block.css({ width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) });
}
$label.css("width", json.labelWidth);
if (json.required) {
@ -1968,7 +1968,7 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
_html += '</div>';
elem.append(_html);
if (that.config.viewOrDesign) {
var data = {"select": json.tag + json.id, "uploadUrl": json.uploadUrl};
var data = { "select": json.tag + json.id, "uploadUrl": json.uploadUrl };
images.push(data);
}
},
@ -2093,7 +2093,7 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
_html += '</div>';
elem.append(_html);
if (that.config.viewOrDesign) {
var data = {"select": json.tag + json.id, "uploadUrl": json.uploadUrl};
var data = { "select": json.tag + json.id, "uploadUrl": json.uploadUrl };
files.push(data);
}
},
@ -2563,11 +2563,11 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
if (json.hideLabel) {
$label.css("display", "none");
$block.css("margin-left", "0px");
$block.css({width: 'calc({0})'.format(json.width)});
$block.css({ width: 'calc({0})'.format(json.width) });
} else {
$label.css("display", "block");
$block.css("margin-left", json.labelWidth);
$block.css({width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth)});
$block.css({ width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) });
}
$label.css("width", json.labelWidth);
$label.append(json.label + ":");
@ -2892,11 +2892,11 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
if (json.hideLabel) {
$label.css("display", "none");
$block.css("margin-left", "0px");
$block.css({width: 'calc({0})'.format(json.width)});
$block.css({ width: 'calc({0})'.format(json.width) });
} else {
$label.css("display", "block");
$block.css("margin-left", json.labelWidth);
$block.css({width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth)});
$block.css({ width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) });
}
$label.css("width", json.labelWidth);
if (json.required) {
@ -3068,11 +3068,11 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
if (json.hideLabel) {
$label.css("display", "none");
$block.css("margin-left", "0px");
$block.css({width: 'calc({0})'.format(json.width)});
$block.css({ width: 'calc({0})'.format(json.width) });
} else {
$label.css("display", "block");
$block.css("margin-left", json.labelWidth);
$block.css({width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth)});
$block.css({ width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) });
}
$label.css("width", json.labelWidth);
$label.append(json.label + ":");
@ -3623,7 +3623,7 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
, options = that.config;
$('#select-option-add').on('click', function () {
//添加html
json.options.splice(json.options.length + 1, 0, {text: 'option', value: 'value', checked: false});
json.options.splice(json.options.length + 1, 0, { text: 'option', value: 'value', checked: false });
var _htmloption = '';
_htmloption += '<div class="layui-form-item option select-options" data-index="{0}">'.format(json.options.length - 1);
_htmloption += ' <div class="layui-inline" style="width: 30px; margin-right: 0px;">';
@ -4366,6 +4366,7 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
case 'checkbox-value':
//找到 id=key 下的 option值
var _index = parseInt($(this).parent().parent().attr("data-index"));
alert(_index);
if (_key === 'select-text' || _key === 'radio-text' || _key === 'checkbox-text') {
_json.options[_index].text = $(this).val();
} else {
@ -4406,8 +4407,25 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
});
form.on('radio', function (data) {
var thisName = $(this).attr("name");
options.data.forEach(function (item, index) {
if (item.tag == "grid") {
item.columns.forEach(function (columnsItem, columnsIndex) {
columnsItem.list.forEach(function (listItem, listIndex) {
if (listItem.id === thisName) {
options.selectItem = listItem;
}
});
});
} else {
if (item.id === thisName) {
options.selectItem = item;
}
}
});
var _json = options.selectItem;
console.log(_json);
switch (_json.tag) {
case 'radio':
var _index = parseInt($("#" + _json.id + " .layui-input-block div.layui-form-radio").index(data.othis[0]));
@ -4439,7 +4457,10 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
default:
break;
}
})
});
form.on('checkbox', function (data) {
var _json = options.selectItem;
switch (_json.tag) {
@ -4460,6 +4481,7 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
break;
}
});
}
/*--------------------------------------------------以下属于非修改内容---------------------------------------------------------*/
@ -4513,13 +4535,20 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
var that = this
, options = that.config;
//增加于2024-02-02 黄海
options.data.forEach(function (item, index) {
if (index === 0) {
options.selectItem = item;
}
that.bindPropertyEvent(item);
});
// options.data.forEach(function (item, index) {
// if (item.tag == "grid") {
// item.columns.forEach(function (columnsItem, columnsIndex) {
// columnsItem.list.forEach(function (listItem, listIndex) {
// that.bindPropertyEvent(listItem);
// });
// });
// }
// if (index === 0) {
// options.selectItem = item;
// }
// that.bindPropertyEvent(item);
// });
if (options.viewOrDesign) {
var that = this
@ -4827,7 +4856,6 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
});
});
that.renderForm();
}
@ -4984,6 +5012,7 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
var json = form.val();
for (let key in iceEditorObjects) {
json[key] = iceEditorObjects[key].getHTML();
}
@ -5054,7 +5083,8 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
/* 重新渲染设计区*/
Class.prototype.renderForm = function () {
var that = this, options = that.config;
var that = this
, options = that.config;
if (options.viewOrDesign) {
var that = this
, options = that.config;
@ -5173,8 +5203,7 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
//显示当前的属性
that.components[tag].property(options.selectItem, that);
that.bindPropertyEvent(options.selectItem);
that.bindPropertyEvent();
//移除 #formDesignerForm .layui-form-item 下所有的 active
$('#formDesignerForm .layui-form-item').removeClass('active');
//给当前元素增加class
@ -5230,6 +5259,7 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
return undefined;
}
/* 复制json中的节点并返回上一个节点*/
Class.prototype.copyJsonAfterItem = function (json, id) {
var that = this,
@ -5350,5 +5380,6 @@ layui.config({base: './ayq/modules/'}).define(["layer", 'flow', "laytpl", "eleme
return result;
}
exports('formDesigner', formDesigner);
exports('formDesigner'
, formDesigner);
});

104
WebRoot/view/tb/form/designer.html
Unescape View File

@ -4,65 +4,75 @@
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=0,maximum-scale=0,user-scalable=yes,shrink-to-fit=no">
content="width=device-width,initial-scale=0,maximum-scale=0,user-scalable=yes,shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>表单设计器</title>
<link rel="stylesheet" href="./layui/css/layui.css"/>
<link rel="stylesheet" href="./ayq/modules/cron.css"/>
<link rel="stylesheet" href="./ayq/modules/labelGeneration.css"/>
<link rel="stylesheet" href="./ayq/modules/formDesigner.css"/>
<link rel="stylesheet" href="./layui/css/layui.css" />
<link rel="stylesheet" href="./ayq/modules/cron.css" />
<link rel="stylesheet" href="./ayq/modules/labelGeneration.css" />
<link rel="stylesheet" href="./ayq/modules/formDesigner.css" />
</head>
<body class="layui-layout-body">
<input type="hidden" th:value="${formId}" id="fromId">
<div style="height: 100%; width: 100%;" id="formdesigner">
<input type="hidden" th:value="${formId}" id="fromId">
<div style="height: 100%; width: 100%;" id="formdesigner">
</div>
<script type="text/javascript" src="./layui/layui.js"></script>
<script type="text/javascript" src="./ayq/js/config.js"></script>
<script type="text/javascript" src="./ayq/modules/Sortable/Sortable.js"></script>
<!--htmlformat 为js-beautify代码-->
<script type="text/javascript" src="./ayq/js/htmlformat.js"></script>
<script type="text/javascript" src="./ayq/js/jsformat.js"></script>
<script type="text/javascript" src="./ayq/modules/iceEditor/iceEditor.js"></script>
<script>
layui.config(
{base: './ayq/modules/'}).use(['layer', 'formDesigner'], function () {
var $ = layui.jquery;
var formDesigner = layui.formDesigner;
var data = [];
var jobId = GetQueryString("job_id");
if (jobId != null && jobId != "") {
window.localStorage.setItem('job_id', jobId);
$.ajax({
url: "/QingLong/collect/getJobBasic?job_id=" + jobId,
async: false,
type: 'GET',
dataType: "json",
success: function (res) {
data = JSON.parse(res.form_json);
</div>
<script type="text/javascript" src="./layui/layui.js"></script>
<script type="text/javascript" src="./ayq/js/config.js"></script>
<script type="text/javascript" src="./ayq/modules/Sortable/Sortable.js"></script>
<!--htmlformat 为js-beautify代码-->
<script type="text/javascript" src="./ayq/js/htmlformat.js"></script>
<script type="text/javascript" src="./ayq/js/jsformat.js"></script>
<script type="text/javascript" src="./ayq/modules/iceEditor/iceEditor.js"></script>
<script>
layui.config(
{ base: './ayq/modules/' }).use(['layer', 'formDesigner'], function () {
var $ = layui.jquery;
var formDesigner = layui.formDesigner;
var data = [];
var jobId = GetQueryString("job_id");
if (jobId != null && jobId != "") {
window.localStorage.setItem('job_id', jobId);
$.ajax({
url: "/QingLong/collect/getJobBasic?job_id=" + jobId,
async: false,
type: 'GET',
dataType: "json",
success: function (res) {
data = JSON.parse(res.form_json);
}
});
} else {
localStorage.removeItem('job_id');
localStorage.removeItem('form_json');
}
formDesigner.render({
data: data,
elem: '#formdesigner'
});
//阻止body的drag冒泡问题
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
};
});
} else {
localStorage.removeItem('job_id');
localStorage.removeItem('form_json');
function GetQueryString(name, istop) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (typeof (istop) != "undefined") r = top.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
formDesigner.render({
data: data,
elem: '#formdesigner'
});
});
function GetQueryString(name, istop) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (typeof (istop) != "undefined") r = top.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
</script>
</script>
</body>

Write Preview
Loading…
Cancel
Save