diff --git a/module-form/src/main/java/ink/wgink/module/form/template/page/app/app-form-save.ftl b/module-form/src/main/java/ink/wgink/module/form/template/page/app/app-form-save.ftl index 6d34bd4b..94842395 100644 --- a/module-form/src/main/java/ink/wgink/module/form/template/page/app/app-form-save.ftl +++ b/module-form/src/main/java/ink/wgink/module/form/template/page/app/app-form-save.ftl @@ -47,18 +47,105 @@ 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 dialog = layui.dialog; + var restAjax = layui.restajax; + var 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 initUploadImage(fileName, fileExplain, maxCount) { + maxCount = maxCount ? parseInt(maxCount) : 9 + maxCount = maxCount < 0 ? 9 : maxCount; + var id = '#' + fileName; + var boxId = '#' + fileName + 'FileBox'; + var uploadClass = '.' + fileName + '-upload'; + var removeClass = '.' + fileName + '-remove'; + + function initImage(callback) { + var fileIds = $(id).val(); + var fileIdArray = fileIds.split(','); + var html = ''; + for (var i = 0, fileId; fileId = fileIdArray[i++];) { + var img = [ + '
', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + '
' + ].join('\n'); + html += img; + } + if (fileIdArray.length < maxCount) { + var upload = [ + '
', + ' ', + ' ', + ' ', + '
' + ].join('\n'); + html += upload; + } + $(boxId).empty(); + $(boxId).append(html); + callback ? callback() : ''; + }; + + // 添加点击时间 + function addClick() { + $(document).on('click', uploadClass, function () { + var name = this.dataset.name; + var explain = this.dataset.explain; + top.dialog.file({ + type: 'image', + title: '【' + explain + '】图片上传', + width: '400px', + height: '420px', + maxFileCount: '1', + onClose: function () { + var uploadFileArray = top.dialog.dialogData.uploadFileArray; + if (typeof (uploadFileArray) != 'undefined' && uploadFileArray.length > 0) { + var files = $('#' + name).val(); + for (var j = 0, file = uploadFileArray[j]; file = uploadFileArray[j++];) { + if (files.length > 0) { + files += ','; + } + files += file.data; + } + $('#'+ name).val(files); + initImage(function () { + viewerObj[name].update(); + }); + } + } + }); + }) + + $(document).on('click', removeClass, 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); + } + $('#' + name).val(files); + initImage(function () { + viewerObj[name].update(); + }); + }); + } + + // 初始化 + initImage(function () { + viewerObj[fileName] = new Viewer(document.getElementById(fileName + 'FileBox'), {navbar: false}); }); + addClick(); } // 初始化文件列表', @@ -85,6 +172,8 @@ }); } + + ${initSaveFunctions} // 初始化内容 diff --git a/module-form/src/main/java/ink/wgink/module/form/template/page/app/app-form-update.ftl b/module-form/src/main/java/ink/wgink/module/form/template/page/app/app-form-update.ftl index 6d34bd4b..17a93745 100644 --- a/module-form/src/main/java/ink/wgink/module/form/template/page/app/app-form-update.ftl +++ b/module-form/src/main/java/ink/wgink/module/form/template/page/app/app-form-update.ftl @@ -47,9 +47,9 @@ 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 dialog = layui.dialog; + var restAjax = layui.restajax; + var dataMessage = layui.datamessage; var viewerObj = {}; // 刷新下载模板', diff --git a/module-form/src/main/java/ink/wgink/module/form/template/page/web/form-save.ftl b/module-form/src/main/java/ink/wgink/module/form/template/page/web/form-save.ftl new file mode 100644 index 00000000..cf922dff --- /dev/null +++ b/module-form/src/main/java/ink/wgink/module/form/template/page/web/form-save.ftl @@ -0,0 +1,117 @@ + + +', + + + ${formName} + + + + + + + + + +
+
+
', +
+ ${formFieldHtml} +
+
+
+ + +
+
+
+
+
+
+ , + , +
+ + + + + \ No newline at end of file diff --git a/module-form/src/main/java/ink/wgink/module/form/template/page/web/form-update.ftl b/module-form/src/main/java/ink/wgink/module/form/template/page/web/form-update.ftl new file mode 100644 index 00000000..87c1ebef --- /dev/null +++ b/module-form/src/main/java/ink/wgink/module/form/template/page/web/form-update.ftl @@ -0,0 +1,222 @@ + + +', + + + ${formName} + + + + + + + + + +
+
+
', +
+ ${formFieldHtml} +
+
+
+ + +
+
+
+
+
+
+ , + , +
+ + + + + \ No newline at end of file diff --git a/module-form/src/main/resources/static/form-design/modules/components/uploadImage.js b/module-form/src/main/resources/static/form-design/modules/components/uploadImage.js index e45dfdfe..9f0e9425 100644 --- a/module-form/src/main/resources/static/form-design/modules/components/uploadImage.js +++ b/module-form/src/main/resources/static/form-design/modules/components/uploadImage.js @@ -8,6 +8,35 @@ layui.define(['jquery', 'upload', 'dialog', 'restajax', 'formUtils'], function(e var viewerObj = {}; + var HTML_ARRAY = [ + '
', + ' ', + '
', + ' ', + '
', + '
', + '
' + ]; + + // 初始化图片图片上传 + function initUploadImage(fileName, fileExplain) { + var boxId = '#' + fileName + 'FileBox'; + function initImage(callback) { + var upload = [ + '
', + ' ', + ' ', + ' ', + '
' + ].join('\n'); + $(boxId).empty(); + $(boxId).append(upload); + callback ? callback() : ''; + }; + // 初始化 + initImage(function () {}); + } + var uploadImage = { /** * 根据json对象生成html对象 @@ -18,36 +47,14 @@ layui.define(['jquery', 'upload', 'dialog', 'restajax', 'formUtils'], function(e if (selected === undefined) { selected = false; } - var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); - _html += ' '.format(json.label); - _html += '
'; - _html += ' '.format(json.id);; - _html += '
'.format(json.id); - _html += ' '; - _html += '
'; - _html += '
'; + + var _html = HTML_ARRAY[0].format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += HTML_ARRAY[1].format(json.label); + _html += HTML_ARRAY[2]; + _html += HTML_ARRAY[3].format(json.id); + _html += HTML_ARRAY[4].format(json.id); + _html += HTML_ARRAY[5]; + _html += HTML_ARRAY[6]; return _html; }, update: function (json) { @@ -75,52 +82,7 @@ layui.define(['jquery', 'upload', 'dialog', 'restajax', 'formUtils'], function(e $('#columnProperty').append(_html); }, componentRender: function(item) { - var files = $('#'+ item.id +'File').val(); - utils.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; - utils.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); - } - utils.initFileList(name, files, function(fileName) { - viewerObj[fileName].update(); - initUpload(); - }); - }); + initUploadImage(item.id, item.label); }, code: { html: [], diff --git a/module-form/src/main/resources/static/form-design/modules/formDesigner.js b/module-form/src/main/resources/static/form-design/modules/formDesigner.js index c0ac8326..8571e832 100644 --- a/module-form/src/main/resources/static/form-design/modules/formDesigner.js +++ b/module-form/src/main/resources/static/form-design/modules/formDesigner.js @@ -2072,6 +2072,82 @@ layui.config({ return TP_HTML_CODE; } + /* 生成 Html 代码 */ + function getHtml(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); + } + + }); + }; + + Class.prototype.getFieldDom = function(dataList, dom) { + $.each(dataList, function (index, item) { + var elem = $(that.components[item.tag].render(item, false)); + dom.append(elem); + if (item.tag === 'grid') { + that.getGridDom(item.columns, elem); + } + }); + } + + /** + * 获取网格的HTML + * @param listData + * @param dom + */ + Class.prototype.getGridDom = function(listData, dom) { + $.each(listData, function (index, item) { + var colElem = dom.find('.column'+ index); + if (item.list.length > 0) { + that.getFieldDom(item.list, colElem); + } + }); + } + + /** + * 查询字段列表 + * @param fieldData + */ + Class.prototype.listField = function(fieldData) { + var fieldArray = []; + $.each(fieldData, function (index, item) { + var elem = $(that.components[item.tag].render(item, false)); + fieldArray.push({ + data: item, + elem: elem + }); + if (item.tag === 'grid') { + that.getGridDom(item.columns, elem); + } + }); + return fieldArray; + } + $('#save').on('click', function () { var formName = $('#formName').val(); if (!formName) { @@ -2089,18 +2165,20 @@ layui.config({ return; } + var fieldHtmlArray = that.listField(options.data); + $.each(fieldHtmlArray, function(index, item) { + console.log(item.elem.html()) + }) + console.log(fieldHtmlArray); + + 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 fieldArray = []; - - that.generateFieldHtml(options.data, fieldArray); - - return; - var _htmlelem = $('
'); that.generateHtml(options.data, _htmlelem); diff --git a/module-form/src/main/resources/static/form-design/modules/formField.js b/module-form/src/main/resources/static/form-design/modules/formField.js index f23063ee..cb15bb78 100644 --- a/module-form/src/main/resources/static/form-design/modules/formField.js +++ b/module-form/src/main/resources/static/form-design/modules/formField.js @@ -435,7 +435,7 @@ layui.define(['layer'], function (exports) { }, c4: { name: "上传组件", - list: [/*'uploadImage', 'uploadFile'*/] + list: ['uploadImage'/*, 'uploadFile'*/] }, c5: { name: "扩展组件",