From 47cead7dae82b8d10e6f25dc0c2011a9a5bbd38e Mon Sep 17 00:00:00 2001 From: wanggeng <450292408@qq.com> Date: Tue, 15 Mar 2022 23:12:46 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=E4=BA=86=E5=A4=8D=E6=9D=82?= =?UTF-8?q?=E7=9A=84=E7=BB=84=E4=BB=B6=EF=BC=8C=E8=B0=83=E6=95=B4=E4=BA=86?= =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E4=BB=A3=E7=A0=81=EF=BC=8C=E5=A4=84=E7=90=86?= =?UTF-8?q?=E4=BA=86=E8=A1=A8=E5=8D=95=E8=AE=BE=E8=AE=A1=E5=99=A8=E5=8F=91?= =?UTF-8?q?=E7=8E=B0=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/report/FormReportController.java | 2 +- .../form/enums/design/FormFieldTypeEnum.java | 2 +- .../design/impl/FormDesignServiceImpl.java | 2 +- .../service/report/IFormReportService.java | 2 +- .../report/impl/FormReportServiceImpl.java | 19 +- .../mapper/form-report/form-report-mapper.xml | 4 +- .../modules/components/checkbox.js | 24 + .../form-design/modules/components/date.js | 40 +- .../modules/components/uploadImage.js | 13 +- .../form-design/modules/formDesigner.js | 574 +++++++++++------- .../static/form-design/modules/formField.js | 6 +- 11 files changed, 452 insertions(+), 236 deletions(-) diff --git a/module-form/src/main/java/ink/wgink/module/form/controller/api/report/FormReportController.java b/module-form/src/main/java/ink/wgink/module/form/controller/api/report/FormReportController.java index 7e3a68de..99ebd04f 100644 --- a/module-form/src/main/java/ink/wgink/module/form/controller/api/report/FormReportController.java +++ b/module-form/src/main/java/ink/wgink/module/form/controller/api/report/FormReportController.java @@ -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 params) { checkParams(params); - formReportService.update(uid, params); + formReportService.update(formCode, formVersion, uid, params); return new SuccessResult(); } diff --git a/module-form/src/main/java/ink/wgink/module/form/enums/design/FormFieldTypeEnum.java b/module-form/src/main/java/ink/wgink/module/form/enums/design/FormFieldTypeEnum.java index b42ae5f1..ea1d8997 100644 --- a/module-form/src/main/java/ink/wgink/module/form/enums/design/FormFieldTypeEnum.java +++ b/module-form/src/main/java/ink/wgink/module/form/enums/design/FormFieldTypeEnum.java @@ -27,7 +27,7 @@ public enum FormFieldTypeEnum { DATE("date", "日期"), RATE("rate", "评分"), CAROUSEL("carousel", "轮播图"), - IMAGE("image", "上传图片"), + UPLOAD_IMAGE("uploadImage", "上传图片"), FILE("file", "上传文件"), TEXTAREA("textarea", "多行文本"), EDITOR("editor", "编辑器"), diff --git a/module-form/src/main/java/ink/wgink/module/form/service/design/impl/FormDesignServiceImpl.java b/module-form/src/main/java/ink/wgink/module/form/service/design/impl/FormDesignServiceImpl.java index 70146baa..1ace5d1d 100644 --- a/module-form/src/main/java/ink/wgink/module/form/service/design/impl/FormDesignServiceImpl.java +++ b/module-form/src/main/java/ink/wgink/module/form/service/design/impl/FormDesignServiceImpl.java @@ -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)"; diff --git a/module-form/src/main/java/ink/wgink/module/form/service/report/IFormReportService.java b/module-form/src/main/java/ink/wgink/module/form/service/report/IFormReportService.java index 1955efe1..39d5bf93 100644 --- a/module-form/src/main/java/ink/wgink/module/form/service/report/IFormReportService.java +++ b/module-form/src/main/java/ink/wgink/module/form/service/report/IFormReportService.java @@ -19,7 +19,7 @@ public interface IFormReportService { void remove(String formCode, Integer formVersion, List uids); - void update(String uid, Map params); + void update(String formCode, Integer formVersion, String uid, Map params); Map get(String formCode, Integer formVersion, String uid); diff --git a/module-form/src/main/java/ink/wgink/module/form/service/report/impl/FormReportServiceImpl.java b/module-form/src/main/java/ink/wgink/module/form/service/report/impl/FormReportServiceImpl.java index 6a3e79d1..61a2eb2a 100644 --- a/module-form/src/main/java/ink/wgink/module/form/service/report/impl/FormReportServiceImpl.java +++ b/module-form/src/main/java/ink/wgink/module/form/service/report/impl/FormReportServiceImpl.java @@ -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 params) { - List kvList = new ArrayList<>(); + public void update(String formCode, Integer formVersion, String uid, Map params) { + List> kvList = new ArrayList<>(); for (Map.Entry 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 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 diff --git a/module-form/src/main/resources/mybatis/mapper/form-report/form-report-mapper.xml b/module-form/src/main/resources/mybatis/mapper/form-report/form-report-mapper.xml index 1a4504b0..a8f0645c 100644 --- a/module-form/src/main/resources/mybatis/mapper/form-report/form-report-mapper.xml +++ b/module-form/src/main/resources/mybatis/mapper/form-report/form-report-mapper.xml @@ -35,8 +35,8 @@ UPDATE df_${formCode}_v${formVersion} SET - - ${kvList[${index}][0]} = #{kvList[${index}][1]} + + ${item[0]} = '${item[1]}' WHERE uid = #{uid} diff --git a/module-form/src/main/resources/static/form-design/modules/components/checkbox.js b/module-form/src/main/resources/static/form-design/modules/components/checkbox.js index 1f3673a3..fbbcf984 100644 --- a/module-form/src/main/resources/static/form-design/modules/components/checkbox.js +++ b/module-form/src/main/resources/static/form-design/modules/components/checkbox.js @@ -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'), + } + } } diff --git a/module-form/src/main/resources/static/form-design/modules/components/date.js b/module-form/src/main/resources/static/form-design/modules/components/date.js index e7cbe3ac..6f95ed62 100644 --- a/module-form/src/main/resources/static/form-design/modules/components/date.js +++ b/module-form/src/main/resources/static/form-design/modules/components/date.js @@ -20,7 +20,7 @@ layui.define(['jquery', 'laydate', 'formUtils'], function(exports) { var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth); _html += '
'.format(json.width, json.labelWidth); - _html += ''.format(json.tag + json.id, _disabledClass, _disabledStyle, _required); + _html += ''.format(json.id, json.tag, _disabledClass, _disabledStyle, _required); _html += '
'; _html += '
'; 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 = ''.format(json.tag + json.id, _disabledClass, _disabledStyle, _required); + var _html = ''.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: '', + } } }; 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 445d8c6c..e45dfdfe 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 @@ -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: [], + } } }; 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 c08accc8..d6df0210 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 @@ -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 = [ + '', + ' ', + ' ', + ' ${formName}', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + '', + ].join('\n'); + return TP_HEADER_CODE; + } + + /** + * app header 代码 + * @returns {string} + */ + function getAppPageHeaderCode() { + var TP_HEADER_CODE = [ + '', + ' ', + ' ', + ' ${formName}', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + '', + ].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 = [ '
', '
', '
', '
', _htmlelem.html(), - '
', + '
', '
', '
', ' ', @@ -1246,24 +1292,13 @@ layui.config({ ' ', '
', ].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 = [ '', '', - '', - ' ', - ' ', - ' ${formName}', - ' ', - ' ', - ' ', - ' ', - ' ', - ' ', - ' ', - '', + getPageHeaderCode(), '', TP_FORM_CODE, '', @@ -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 = [ '
', '
', '
', ' ', _htmlelem.html(), - '
', + '
', '
', '
', ' ', @@ -1386,24 +1419,13 @@ layui.config({ ' ', '
', ].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 = [ '', '', - '', - ' ', - ' ', - ' ${formName}', - ' ', - ' ', - ' ', - ' ', - ' ', - ' ', - ' ', - '', + getPageHeaderCode(), '', TP_FORM_CODE, '', @@ -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 = [ '
', '
', '
', ' ', _htmlelem.html(), - '
', - '
', - '
', - ' ', - ' ', - '
', - '
', - '
', ' ' + '
', '
', @@ -1526,24 +1555,13 @@ layui.config({ ' ', '
', ].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 = [ '', '', - '', - ' ', - ' ', - ' ${formName}', - ' ', - ' ', - ' ', - ' ', - ' ', - ' ', - ' ', - '', + getPageHeaderCode(), '', TP_FORM_CODE, '', @@ -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;', - ' });', ' });', '', '', @@ -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 = [ '
', '
', '
', '
', _htmlelem.html(), - '
', + '
', '
', '
', ' ', @@ -1666,24 +1677,13 @@ layui.config({ ' ', '
', ].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 = [ '', '', - '', - ' ', - ' ', - ' ${formName}', - ' ', - ' ', - ' ', - ' ', - ' ', - ' ', - ' ', - '', + getPageHeaderCode(), '', TP_FORM_CODE, '', @@ -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 = [ '
', '
', '
', ' ', _htmlelem.html(), - '
', + '
', '
', '
', ' ', @@ -1806,24 +1813,13 @@ layui.config({ ' ', '
', ].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 = [ '', '', - '', - ' ', - ' ', - ' ${formName}', - ' ', - ' ', - ' ', - ' ', - ' ', - ' ', - ' ', - '', + getPageHeaderCode(), '', TP_FORM_CODE, '', @@ -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 = [ '
', '
', '
', ' ', _htmlelem.html(), - '
', - '
', - '
', - ' ', - ' ', - '
', - '
', - '
', ' ' + '
', '
', @@ -1946,24 +1963,13 @@ layui.config({ ' ', '
', ].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 = [ '', '', - '', - ' ', - ' ', - ' ${formName}', - ' ', - ' ', - ' ', - ' ', - ' ', - ' ', - ' ', - '', + getPageHeaderCode(), '', TP_FORM_CODE, '', @@ -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;', - ' });', ' });', '', '', @@ -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 = $('
'); 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 = $([""', ',""+ file.name +""', ',""+ (file.size/1014).toFixed(1) +"kb"', ',"
"', ',"","","",""', ',""].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(', '\'
', '
\'+ res.data.title+\'
', '
\'', ');', '}', '});'].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 +'();'); + // } }); }; /* 重新渲染设计区*/ 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 4dc878ee..f23063ee 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 @@ -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);