From 286f7fa538a6d255b947d234e895cba1f692dd88 Mon Sep 17 00:00:00 2001 From: weizhiqiang <598748873@qq.com> Date: Sun, 21 Apr 2024 20:48:55 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8A=A5=E8=A1=A8=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E6=9C=AA=E5=9B=9E=E6=98=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../template/assets/report/css/ruler.css | 8 +- .../assets/report/js/skyeyeReportDesigner.js | 205 +++++++++++++++-- .../assets/report/json/skyeyeEditor.json | 7 + .../js/pageReportDesign/pageReportDesign.js | 5 +- .../js/pageReportDesign/simpleTableDesign.js | 215 ++++++++++++++++++ .../js/reportDataFrom/reportDataFromWrite.js | 33 +-- .../template/js/reportPage/reportPageShow.js | 86 +++++++ .../pageReportDesign/pageReportDesign.html | 14 +- .../pageReportDesign/simpleTableDesign.html | 59 +++++ .../template/assets/lib/layui/custom.js | 2 +- .../lib/layui/customer/skyeye/dsFormUtil.js | 6 +- 11 files changed, 579 insertions(+), 61 deletions(-) create mode 100644 report/src/main/resources/template/js/pageReportDesign/simpleTableDesign.js create mode 100644 report/src/main/resources/template/tpl/pageReportDesign/simpleTableDesign.html diff --git a/report/src/main/resources/template/assets/report/css/ruler.css b/report/src/main/resources/template/assets/report/css/ruler.css index 48f7de45e..7e3e81fa6 100644 --- a/report/src/main/resources/template/assets/report/css/ruler.css +++ b/report/src/main/resources/template/assets/report/css/ruler.css @@ -304,11 +304,17 @@ body { cursor: e-resize; } -.echarts-box{ +.echarts-box { width: 100%; height: 100%; } +.table-box { + width: 100%; + height: 100%; + position: absolute; +} + .word-box{ width: 100%; height: 100%; diff --git a/report/src/main/resources/template/assets/report/js/skyeyeReportDesigner.js b/report/src/main/resources/template/assets/report/js/skyeyeReportDesigner.js index 81a28dde1..d90e48642 100644 --- a/report/src/main/resources/template/assets/report/js/skyeyeReportDesigner.js +++ b/report/src/main/resources/template/assets/report/js/skyeyeReportDesigner.js @@ -4,6 +4,9 @@ var form; var inPageEcharts = {}; var inPageEchartsObject = {}; +// 已经添加上的echarts图表 +var inPageTable = {}; + // 已经添加上的文字模型 var inPageWordMation = {}; @@ -127,6 +130,9 @@ layui.define(["jquery", 'form', 'element'], function(exports) { str = f.getBgImageHtml(item, str); } else if(item.id == 'wordModel') { str = f.getWordModelHtml(item, str); + } else if(item.id == 'tableModel') { + // todo 待定 + str = f.getTableModelHtml(item, str); } else { str = f.getEchartsHtml(item, str); } @@ -204,6 +210,21 @@ layui.define(["jquery", 'form', 'element'], function(exports) { return str; }, + // 标题按钮--表格模型获取html + getTableModelHtml: function(item, str) { + str = f.getCommonParentHeader(str, item); + $.each(item.children, function (j, bean) { + str += '' + + '' + + '' + bean.name + '' + + ''; + }); + str += '' + + '' + + ''; + return str; + }, + // 标题按钮--背景图片模型获取html getBgImageHtml: function(item, str) { str = f.getCommonParentHeader(str, item); @@ -245,10 +266,66 @@ layui.define(["jquery", 'form', 'element'], function(exports) { f.addNewWordModel(modelId, wordStyleMation); }); + // 表格模型点击事件 + skyeyeHeader.find(".tableModel").click(function () { + var modelId = $(this).attr("rowId"); + f.addNewTableModel(modelId, null); + }); + + }, + + // 加载表格模型 + addNewTableModel: function(modelId, tableMation) { + // 获取boxId + var boxId = modelId + getRandomValueToString(); + // 获取表格图表id + var tableId = f.getTableBox(boxId, modelId); + // 加入页面属性 + var table = !isNull(tableMation) ? tableMation : { + attr: { + "custom.dataBaseMation": { "value": "", "edit": 1, "remark": "数据来源", "name": "数据来源", "editorType": "99", "editorChooseValue": "", "typeName": "数据源"}, + "custom.move.x": { "value": "0", "edit": 1, "remark": "鼠标拖动距离左侧的像素", "name": "X坐标", "editorType": "98", "editorChooseValue": "", "typeName": "坐标"}, + "custom.move.y": { "value": "0", "edit": 1, "remark": "鼠标拖动距离顶部的像素", "name": "Y坐标", "editorType": "98", "editorChooseValue": "", "typeName": "坐标"}, + "custom.tableColumn": { "defaultValue": [], "edit": 1, "remark": "数据表格的信息", "name": "表格配置", "editorType": "101", "editorChooseValue": "", "typeName": "数据源"}, + }, + tableColumnList: [], + isPage: 1 + } + + table["tableId"] = tableId + + // 加载表格 + dsFormTableUtil.initDynamicTable(tableId, table); + + inPageTable[boxId] = $.extend(true, {}, table); + return boxId; + }, + + getTableBox: function (boxId, modelId) { + var box = f.createBox(boxId, modelId, null); + + var tableBoxId = "table" + boxId; + var tableBox = document.createElement("div"); + // 为div设置类名 + tableBox.className = "table-box"; + tableBox.id = "label-" + tableBoxId; + tableBox.onmousedown = ee => { + var id = $("#" + tableBoxId).parent().attr("id"); + f.setMoveEvent(ee, $("#" + id)); + // 阻止事件冒泡（针对父元素的move） + ee.stopPropagation(); + }; + box.appendChild(tableBox); + + var table = document.createElement("table"); + table.id = tableBoxId; + box.appendChild(table); + + return tableBoxId; }, // 加载echarts模型 - addNewModel: function(modelId, echartsMation){ + addNewModel: function(modelId, echartsMation) { if (!f.isNull(echartsMation)) { var option = getEchartsOptions(echartsMation); // 获取boxId @@ -285,7 +362,7 @@ layui.define(["jquery", 'form', 'element'], function(exports) { }, // 根据id获取echarts信息 - getEchartsMationById: function(id){ + getEchartsMationById: function(id) { var echartsMation; $.each(params.headerMenuJson, function(i, item) { if (!f.isNull(item.children) && item.id == 'echartsModel') { @@ -297,7 +374,7 @@ layui.define(["jquery", 'form', 'element'], function(exports) { }, // 根据id获取文字模型的style信息 - getWordStyleMationById: function(id){ + getWordStyleMationById: function(id) { var wordMation; $.each(params.headerMenuJson, function(i, item) { if (!f.isNull(item.children) && item.id == 'wordModel') { @@ -308,7 +385,7 @@ layui.define(["jquery", 'form', 'element'], function(exports) { return wordMation; }, - getEchartsBox: function (boxId, modelId){ + getEchartsBox: function (boxId, modelId) { var echartsId = "echarts" + boxId; var echartsBox = document.createElement("div"); // 为div设置类名 @@ -325,7 +402,7 @@ layui.define(["jquery", 'form', 'element'], function(exports) { return echartsId; }, - getWordBox: function (boxId, modelId, styleStr, wordStyleMation){ + getWordBox: function (boxId, modelId, styleStr, wordStyleMation) { var wordId = "word" + boxId; var wordBox = document.createElement("font"); // 为div设置类名 @@ -344,7 +421,7 @@ layui.define(["jquery", 'form', 'element'], function(exports) { return wordId; }, - setDesignAttr: function(wordStyleMation){ + setDesignAttr: function(wordStyleMation) { var otherStyle = { width: wordStyleMation.defaultWidth + 'px', height: wordStyleMation.defaultHeight + 'px' @@ -352,7 +429,7 @@ layui.define(["jquery", 'form', 'element'], function(exports) { return otherStyle; }, - createBox: function(id, modelId, otherStyle){ + createBox: function(id, modelId, otherStyle) { f.removeEchartsEditMation(); // 创建一个div var div = document.createElement("div"); @@ -364,7 +441,7 @@ layui.define(["jquery", 'form', 'element'], function(exports) { div.style.top = "0px"; div.style.left = "0px"; if (!f.isNull(otherStyle)) { - $.each(otherStyle, function (key, value){ + $.each(otherStyle, function (key, value) { div.style[key] = value; }); } @@ -456,7 +533,7 @@ layui.define(["jquery", 'form', 'element'], function(exports) { return div; }, - setMoveEvent: function (ee, box){ + setMoveEvent: function (ee, box) { // 获取事件对象 var ee = ee || window.event; var maxLeft = skyeyeReportContent.width() - box.width(); @@ -489,7 +566,7 @@ layui.define(["jquery", 'form', 'element'], function(exports) { * @param y 鼠标按下时，鼠标相对于元素的y坐标 * @returns {number|number} */ - getTop: function (e, y){ + getTop: function (e, y) { var top = e.clientY - y - 104; top = top < 0 ? 0 : top; var chooseEcharts = skyeyeReportContent.find(".active").eq(0); @@ -508,7 +585,7 @@ layui.define(["jquery", 'form', 'element'], function(exports) { * @param maxLeft 允许的最大左边距 * @returns {number|number} */ - getLeft: function (e, x, maxLeft){ + getLeft: function (e, x, maxLeft) { var left = e.clientX - x - 44; left = left < 0 ? 0 : left; left = left > maxLeft ? maxLeft : left; @@ -569,7 +646,7 @@ layui.define(["jquery", 'form', 'element'], function(exports) { // 不触发‘移除所有图表的编辑信息’的事件的对象的class--颜色选择器 var notTriggerRemove = ["layui-colorpicker-main"]; // 图表点击事件 - $("body").on('click', ".echarts-box, .word-box", function (e) { + $("body").on('click', ".echarts-box, .word-box, .table-box", function (e) { f.setChooseReportItem($(this)); e.stopPropagation(); }); @@ -578,11 +655,12 @@ layui.define(["jquery", 'form', 'element'], function(exports) { $("body").on('click', skyeyeReportContent, function (e) { var pass = true; $.each(notTriggerRemove, function (i, item) { - if ($(e.target).parents("." + item).length > 0 || $(e.target).attr('class').indexOf(item) != -1) { + if ($(e.target).parents("." + item).length > 0 + || (!isNull($(e.target).attr('class')) && $(e.target).attr('class').indexOf(item) != -1)) { pass = false; } }); - if(pass){ + if (pass) { f.removeEchartsEditMation(); } }); @@ -606,6 +684,7 @@ layui.define(["jquery", 'form', 'element'], function(exports) { $("body").on('click', "#save", function (e) { var eachartsList = f.getEchartsListToSave(); var wordMationList = f.getWordMationListToSave(); + var tableMationList = f.getTableListToSave(); var bgImage = skyeyeReportContent.css("backgroundImage").replace('url(', '').replace(')', ''); if (isNull(bgImage) || bgImage == 'none' || bgImage.indexOf('none') > -1) { @@ -616,15 +695,18 @@ layui.define(["jquery", 'form', 'element'], function(exports) { contentHeight: skyeyeReportContent.height(), bgImage: bgImage, modelList: eachartsList, - wordMationList: wordMationList + wordMationList: wordMationList, + tableMationList: tableMationList }; AjaxPostUtil.request({url: sysMainMation.reportBasePath + "editReportPageContentById", params: {id: id, content: encodeURIComponent(JSON.stringify(params))}, type: 'json', method: "POST", callback: function(json) { winui.window.msg(systemLanguage["com.skyeye.successfulOperation"][languageType], {icon: 1, time: 2000}); }}); }); + + f.loadHandlebar(); }, - getEchartsListToSave: function (){ + getEchartsListToSave: function () { var eachartsList = new Array(); $.each(skyeyeReportContent.find(".kuang"), function(i, item) { if ($(item).find(".echarts-box").length > 0) { @@ -641,7 +723,24 @@ layui.define(["jquery", 'form', 'element'], function(exports) { return eachartsList; }, - getWordMationListToSave: function (){ + getTableListToSave: function () { + var tableList = new Array(); + $.each(skyeyeReportContent.find(".kuang"), function(i, item) { + if ($(item).find(".table-box").length > 0) { + var boxId = $(item).data("boxId"); + var etableMation = inPageTable[boxId]; + tableList.push({ + modelId: $(item).data("modelId"), + attrMation: etableMation, + width: $(item).width(), + height: $(item).height() + }); + } + }); + return tableList; + }, + + getWordMationListToSave: function () { var wordMationList = new Array(); $.each(skyeyeReportContent.find(".kuang"), function(i, item) { if ($(item).find(".word-box").length > 0) { @@ -659,7 +758,7 @@ layui.define(["jquery", 'form', 'element'], function(exports) { }, // 设置选中项 - setChooseReportItem: function(_this){ + setChooseReportItem: function(_this) { if (!_this.parent().hasClass("active")) { f.removeEchartsEditMation(); // 被选中项 @@ -670,14 +769,14 @@ layui.define(["jquery", 'form', 'element'], function(exports) { }, // 移除所有图表的编辑信息 - removeEchartsEditMation: function(){ + removeEchartsEditMation: function() { $(".dian").hide(); $(".kuang").removeClass("active"); $("#showForm").parent().remove(); }, // 加载echarts报表编辑器 - loadEchartsEditor: function (){ + loadEchartsEditor: function () { var chooseObject = skyeyeReportContent.find(".active").eq(0); var boxId = chooseObject.data("boxId"); var objectMation = getDataChooseMation(boxId); @@ -737,8 +836,22 @@ layui.define(["jquery", 'form', 'element'], function(exports) { } }, + loadHandlebar: function () { + // 加载json对象 + Handlebars.registerHelper('json', function(context, type) { + if (!isNull(context)) { + return JSON.stringify(context); + } + if (type == 'array') { + return JSON.stringify([]); + } else { + return JSON.stringify({}); + } + }); + }, + // 加载编辑器‘详情’类型的展示 - loadEchartsEditorISDetail: function (key, val, boxId, indexNumber, typeName){ + loadEchartsEditorISDetail: function (key, val, boxId, indexNumber, typeName) { var formItem = editorType["100"]; var data = f.getFormItemData(key, val, boxId, indexNumber); var html = getDataUseHandlebars('{{#bean}}' + formItem.html + '{{/bean}}', data); @@ -795,6 +908,9 @@ layui.define(["jquery", 'form', 'element'], function(exports) { value = JSON.stringify(value); } } + if (val.editorType == '101') { + value = JSON.stringify(value); + } return { "bean": { modelKey: key, @@ -811,7 +927,7 @@ layui.define(["jquery", 'form', 'element'], function(exports) { }, // 添加一个新的form表单 - addNewFormBox: function(){ + addNewFormBox: function() { var editForm = '
' + '
' + ' 属性' + @@ -822,14 +938,14 @@ layui.define(["jquery", 'form', 'element'], function(exports) { }, // 加载编辑器类型 - initEditorType: function (){ + initEditorType: function () { $.getJSON("../../assets/report/json/skyeyeEditor.json", function (data) { editorType = data; }); }, // reportContent的八个角 - getEightCape: function(){ + getEightCape: function() { var capeResult = '
' + '
' + '
' + @@ -841,11 +957,13 @@ layui.define(["jquery", 'form', 'element'], function(exports) { return capeResult; }, - initData: function(){ + initData: function() { var widthScale = getScale(params.initData.contentWidth, skyeyeReportContent.width()); var heightScale = getScale(params.initData.contentHeight, skyeyeReportContent.height()); // 初始化echarts模型 f.initEchartsData(widthScale, heightScale); + // 初始化table模型 + f.initTableData(widthScale, heightScale); // 初始化文字模型 f.initWordMationData(widthScale, heightScale); // 初始化背景 @@ -879,6 +997,25 @@ layui.define(["jquery", 'form', 'element'], function(exports) { } }, + initTableData: function(widthScale, heightScale) { + var tableMationList = params.initData.tableMationList; + if (!f.isNull(tableMationList)) { + $.each(tableMationList, function (i, item) { + var leftNum = multiplication(item.attrMation.attr["custom.move.x"].defaultValue, widthScale); + var topNum = multiplication(item.attrMation.attr["custom.move.y"].defaultValue, heightScale); + item.attrMation.attr["custom.move.x"].defaultValue = leftNum; + item.attrMation.attr["custom.move.y"].defaultValue = topNum; + var boxId = f.addNewTableModel(item.modelId, item.attrMation); + $("#" + boxId).css({ + left: leftNum + "px", + top: topNum + "px", + width: multiplication(item.width, widthScale), + height: multiplication(item.height, heightScale) + }); + }); + } + }, + initWordMationData: function(widthScale, heightScale) { var wordMationList = params.initData.wordMationList; if (!f.isNull(wordMationList)) { @@ -999,6 +1136,8 @@ function dataValueChange(value, _this) { resetChartsModel(boxId); } else if(_chooseMation.menuType == 'wordModel') { resetWordModel(boxId); + } else if(_chooseMation.menuType == 'tableModel') { + resetTableModel(boxId); } afterRunBack(controlType, value); @@ -1021,6 +1160,13 @@ function resetWordModel(boxId) { $("#" + boxId).find(".word-box").attr("style", styleStr); } +function resetTableModel(boxId) { + var tableMation = inPageTable[boxId] + tableMation.tableColumnList = tableMation.attr['custom.tableColumn'].defaultValue + // 加载表格 + dsFormTableUtil.initDynamicTable(tableMation.tableId, tableMation); +} + function getDataChooseMation(boxId) { var _object = inPageEcharts[boxId]; if (!isNull(_object)) { @@ -1032,6 +1178,12 @@ function getDataChooseMation(boxId) { _object.menuType = 'wordModel'; } } + if (isNull(_object)) { + _object = inPageTable[boxId]; + if (!isNull(_object)) { + _object.menuType = 'tableModel'; + } + } return _object; } @@ -1094,6 +1246,9 @@ function getEchartsOptions(echartsMation) { // 获取文字模型样式信息 function getWordStyleStr(propertyList) { var styleStr = ""; + if (isNull(propertyList)) { + return styleStr; + } $.each(propertyList, function (index, item) { if (!isNull(item.propertyMation)) { if (item.propertyMation.attrCode.indexOf("custom.") < 0) { diff --git a/report/src/main/resources/template/assets/report/json/skyeyeEditor.json b/report/src/main/resources/template/assets/report/json/skyeyeEditor.json index d4414fa12..ad5b812b8 100644 --- a/report/src/main/resources/template/assets/report/json/skyeyeEditor.json +++ b/report/src/main/resources/template/assets/report/json/skyeyeEditor.json @@ -61,5 +61,12 @@ "html": "
{{{context}}}
", "js": "", "showValueTemplate": "" + }, + "101": { + "key": "tableColumnChoose", + "name": "表格配置", + "html": "
", + "js": "var tableDataList = {{{json context 'array'}}}; $('body').on('click', '#choose{{boxId}}{{indexNumber}}', function (e) {localStorage.setItem('{{boxId}}', tableDataList); _openNewWindows({url:'../../tpl/pageReportDesign/simpleTableDesign.html?boxId=' + '{{boxId}}', title:'表格配置',pageId:'tableColumnChoose',area:['90vw','90vh'],callBack:function (refreshCode){if(refreshCode=='0'){dataValueChange(tableColumnList, $('#choose{{boxId}}{{indexNumber}}')); } else if (refreshCode=='-9999'){winui.window.msg(systemLanguage['com.skyeye.operationFailed'][languageType],{icon:2,time:2000});}}});});", + "showValueTemplate": "" } } \ No newline at end of file diff --git a/report/src/main/resources/template/js/pageReportDesign/pageReportDesign.js b/report/src/main/resources/template/js/pageReportDesign/pageReportDesign.js index 6da8a5b17..e25da1c68 100644 --- a/report/src/main/resources/template/js/pageReportDesign/pageReportDesign.js +++ b/report/src/main/resources/template/js/pageReportDesign/pageReportDesign.js @@ -63,12 +63,11 @@ layui.config({ }, { "icon": " fa fa-table fa-fw", "title": "表格", + "id": "tableModel", "children": [{ + "id": "customSimpleTable", "icon": " fa fa-table fa-fw", "name": "简单表格", - }, { - "icon": " fa fa-list-alt fa-fw", - "name": "复杂表格", }] }, { "icon": " fa fa-area-chart fa-fw", diff --git a/report/src/main/resources/template/js/pageReportDesign/simpleTableDesign.js b/report/src/main/resources/template/js/pageReportDesign/simpleTableDesign.js new file mode 100644 index 000000000..de64e0327 --- /dev/null +++ b/report/src/main/resources/template/js/pageReportDesign/simpleTableDesign.js @@ -0,0 +1,215 @@ + +layui.config({ + base: basePath, + version: skyeyeVersion +}).extend({ + window: 'js/winui.window' +}).define(['window', 'jquery', 'winui', 'form', 'soulTable', 'table'].concat(dsFormUtil.mastHaveImport), function (exports) { + winui.renderColor(); + var index = parent.layer.getFrameIndex(window.name); + var $ = layui.$, + form = layui.form, + table = layui.table, + soulTable = layui.soulTable; + var rowNum = 1; + + var boxId = GetUrlParam("boxId"); + // 默认表格数据 + var tableDataList = JSON.parse(isNull(localStorage.getItem(boxId)) ? '[]' : localStorage.getItem(boxId)) + localStorage.removeItem(boxId); + tableDataList.forEach(data => { + data.id = rowNum + rowNum++ + }) + + var alignmentData = skyeyeClassEnumUtil.getEnumDataListByClassName("alignment"); + var fixedTypeData = skyeyeClassEnumUtil.getEnumDataListByClassName("fixedType"); + var whetherEnumData = skyeyeClassEnumUtil.getEnumDataListByClassName("whetherEnum"); + + var jsEditorMap = {}; + table.render({ + id: 'messageTable', + elem: '#messageTable', + method: 'get', + data: tableDataList, + even: true, + page: false, + limit: 100, + rowDrag: { + trigger: '.drag-row', + done: function(obj) {} + }, + cols: [[ + { type: 'checkbox', align: 'center' }, + { field: 'test', title: '', align: 'left', width: 40, templet: function (d) {return '';}}, + { field: 'attrKey', title: '属性*', align: 'left', width: 200, templet: function (d) { + return ``; + }}, + { field: 'name', title: '列名*', align: 'left', width: 200, templet: function (d) { + return ``; + }}, + { field: 'align', title: '对齐方式*', align: 'left', width: 120, templet: function (d) { + var _html = ``; + return _html; + }}, + { field: 'fixed', title: '固定位置', align: 'left', width: 120, templet: function (d) { + var _html = ``; + return _html; + }}, + { field: 'hide', title: '默认隐藏', align: 'left', width: 120, templet: function (d) { + var _html = ``; + return _html; + }}, + { field: 'width', title: '宽度(px)*', align: 'left', width: 120, templet: function (d) { + return ``; + }}, + { field: 'templetBox', title: '脚本', align: 'left', width: 700, templet: function (d) { + return ``; + }}, + ]], + done: function(json) { + matchingLanguage(); + if ($(`div[lay-id='messageTable']`).find('.place-holder').length == 0) { + $(`div[lay-id='messageTable']`).find('.layui-table-body').append('
'); + } + soulTable.render(this); + + jsEditorMap = {}; + $.each($(".templateClass"), function (i, item) { + var id = $(item).attr('cus-id'); + var tableData = getInPoingArr(tableDataList, 'id', id); + var jsEditor = CodeMirror.fromTextArea(document.getElementById("templet" + id), codeUtil.getConfig('text/javascript')); + if (!isNull(tableData.templet)) { + jsEditor.setValue(tableData.templet); + } + jsEditorMap[id] = jsEditor; + }); + + } + }); + + form.on('select(tableSelect)', function(data) { + var id = data.elem.id; + buildData($(`#${id}`)); + }); + $("body").on("input", ".tableInput", function () { + buildData($(this)); + }); + $("body").on("change", ".tableInput", function () { + buildData($(this)); + }); + + function buildData(_this) { + var id = _this.attr('cus-id'); + var key = _this.attr('id').replace(id, ''); + $.each(tableDataList, function (j, item) { + if (item.id == id) { + item[key] = _this.val(); + } + }); + } + + matchingLanguage(); + form.render(); + form.on('submit(formWriteBean)', function (data) { + if (winui.verifyForm(data.elem)) { + if (table.cache.messageTable.length == 0) { + winui.window.msg('请选择表格属性.', {icon: 2, time: 2000}); + return false; + } + tableDataList = [].concat(table.cache.messageTable); + resetData(tableDataList); + $.each(tableDataList, function (i, item) { + item.orderBy = i + 1; + item.templet = jsEditorMap[item.id].getValue(); + item.id = null; + delete item["attrDefinition"]; + }); + parent.tableColumnList = tableDataList; + parent.layer.close(index); + parent.refreshCode = '0'; + } + return false; + }); + + $("body").on("click", "#addRow", function() { + addRow(); + }); + + $("body").on("click", "#deleteRow", function() { + deleteRow(); + }); + + // 新增行 + function addRow() { + tableDataList = [].concat(table.cache.messageTable); + resetData(tableDataList); + tableDataList.push({id: rowNum}); + table.reloadData("messageTable", {data: tableDataList}); + rowNum++; + } + + // 删除行 + function deleteRow() { + tableDataList = [].concat(table.cache.messageTable); + resetData(tableDataList); + var check_box = table.checkStatus('messageTable').data; + for (var i = 0; i < check_box.length; i++){ + var list = []; + $.each(tableDataList, function(j, item) { + if(item.id != check_box[i].id){ + list.push(item); + } + }); + tableDataList = [].concat(list); + } + table.reloadData("messageTable", {data: tableDataList}); + } + + function resetData(tableDataList) { + $.each(tableDataList, function (i, item) { + item.templet = jsEditorMap[item.id].getValue(); + item.align = $(`#align${item.id}`).val(); + item.hide = $(`#hide${item.id}`).val(); + }); + } + + $("body").on("click", "#cancle", function() { + parent.layer.close(index); + }); +}); \ No newline at end of file diff --git a/report/src/main/resources/template/js/reportDataFrom/reportDataFromWrite.js b/report/src/main/resources/template/js/reportDataFrom/reportDataFromWrite.js index ac205081f..bbc0d49f2 100644 --- a/report/src/main/resources/template/js/reportDataFrom/reportDataFromWrite.js +++ b/report/src/main/resources/template/js/reportDataFrom/reportDataFromWrite.js @@ -159,7 +159,7 @@ layui.config({ return tableData; } - function getRestRequestHeaderData(){ + function getRestRequestHeaderData() { var tableData = new Array(); var rowTr = $("#restHeaderTable tr"); $.each(rowTr, function(i, item) { @@ -351,10 +351,10 @@ layui.config({ params = { requestUrl: $("#restUrl").val(), requestMethod: $("#restMethod").val(), - requestHeader: getRestRequestHeaderDataToResolution(), + requestHeader: getRestRequestHeaderData(), requestBody: restRequestBodyContent.getValue() }; - } else if (dataFromType == 4){ + } else if (dataFromType == 4) { // SQL数据源 if (isNull($("#dataBaseId").val())) { winui.window.msg('请选择数据库', {icon: 2, time: 2000}); @@ -372,28 +372,17 @@ layui.config({ return params; } - function getRestRequestHeaderDataToResolution(){ - var tableData = new Array(); - var rowTr = $("#restHeaderTable tr"); - $.each(rowTr, function(i, item) { - //获取行编号 - var rowNum = $(item).attr("trcusid").replace("tr", ""); - tableData[$("#headerKey" + rowNum).val()] = $("#headerValue" + rowNum).val(); - }); - return JSON.stringify(tableData); - } - function getDataByDataFromType(dataFromType, json){ - if (dataFromType == 1){ + if (dataFromType == 1) { // XML数据源 return json.bean.nodeArray; - } else if (dataFromType == 2){ + } else if (dataFromType == 2) { // JSON数据源 return json.bean.nodeArray; - } else if (dataFromType == 3){ + } else if (dataFromType == 3) { // Rest接口数据源 return json.bean.nodeArray; - } else if (dataFromType == 4){ + } else if (dataFromType == 4) { // SQL数据源 return json.rows; } @@ -410,13 +399,13 @@ layui.config({ $.each(data, function (i, item) { addAnalysisRow(); $("#key" + (rowNum - 1)).val(item); - if (dataFromType == 1){ + if (dataFromType == 1) { // XML数据源 - } else if (dataFromType == 2){ + } else if (dataFromType == 2) { // JSON数据源 - } else if (dataFromType == 3){ + } else if (dataFromType == 3) { // Rest接口数据源 - } else if (dataFromType == 4){ + } else if (dataFromType == 4) { // SQL数据源 $("#key" + (rowNum - 1)).val(item.name); $("#dataType" + (rowNum - 1)).val(item.dataType); diff --git a/report/src/main/resources/template/js/reportPage/reportPageShow.js b/report/src/main/resources/template/js/reportPage/reportPageShow.js index 2270fc0cc..efd93e2f7 100644 --- a/report/src/main/resources/template/js/reportPage/reportPageShow.js +++ b/report/src/main/resources/template/js/reportPage/reportPageShow.js @@ -26,6 +26,7 @@ layui.config({ initEchartsData(widthScale, heightScale); initWordMationData(widthScale, heightScale); + initTableMationData(widthScale, heightScale); if (!isNull(initData.bgImage)){ content.css({ @@ -79,6 +80,26 @@ layui.config({ } } + function initTableMationData(widthScale, heightScale) { + var tableMationList = initData.tableMationList; + if (!isNull(tableMationList)) { + $.each(tableMationList, function (i, item) { + var leftNum = multiplication(item.attrMation.attr["custom.move.x"].defaultValue, widthScale); + var topNum = multiplication(item.attrMation.attr["custom.move.y"].defaultValue, heightScale); + item.attrMation.attr["custom.move.x"].defaultValue = leftNum; + item.attrMation.attr["custom.move.y"].defaultValue = topNum; + item.attrMation.attr = getTableDataFromRest(item.attrMation.attr); + var boxId = addNewTableModel(item.modelId, item.attrMation); + $("#" + boxId).css({ + left: leftNum + "px", + top: topNum + "px", + width: multiplication(item.width, widthScale), + height: multiplication(item.height, heightScale) + }); + }); + } + } + function getContentStr(str) { if (!isNull(str)) { str = str.replace(/%/g, '%25'); @@ -123,6 +144,32 @@ layui.config({ return attr; } + function getTableDataFromRest(attr) { + if (isNull(attr['custom.tableColumn'].defaultValue)) { + return attr; + } + var fromId = attr['custom.dataBaseMation'].defaultValue.id; + var needGetData = {}; + attr['custom.tableColumn'].defaultValue.forEach(item => { + needGetData[item.attrKey] = ''; + }); + if (isNull(fromId) || needGetData.length == 0) { + return attr; + } + var params = { + id: fromId, + needGetDataStr: JSON.stringify(needGetData), + inputParams: JSON.stringify({ + page: 1, + limit: 15 + }) + }; + AjaxPostUtil.request({url: sysMainMation.reportBasePath + "queryReportDataFromMationById", params: params, type: 'json', method: "POST", callback: function(json) { + attr["valueList"] = json.rows + }, async: false}); + return attr; + } + function addNewModel(modelId, echartsMation) { if (!isNull(echartsMation)) { var option = getEchartsOptions(echartsMation); @@ -144,6 +191,22 @@ layui.config({ return ""; } + // 加载表格模型 + function addNewTableModel(modelId, tableMation) { + // 获取boxId + var boxId = modelId + getRandomValueToString(); + // 获取表格图表id + var tableId = getTableBox(boxId, modelId); + // 加入页面属性 + tableMation["tableId"] = tableId + + // 加载表格 + dsFormTableUtil.initDynamicTable(tableId, tableMation); + + inPageTable[boxId] = $.extend(true, {}, tableMation); + return boxId; + } + // 加载文字模型 function addNewWordModel(modelId, wordStyleMation) { var styleStr = getWordStyleStr(wordStyleMation.wordModelAttrList); @@ -168,6 +231,29 @@ layui.config({ return echartsId; } + function getTableBox(boxId, modelId) { + var box = createBox(boxId, modelId, null); + + var tableBoxId = "table" + boxId; + var tableBox = document.createElement("div"); + // 为div设置类名 + tableBox.className = "table-box"; + tableBox.id = "label-" + tableBoxId; + tableBox.onmousedown = ee => { + var id = $("#" + tableBoxId).parent().attr("id"); + f.setMoveEvent(ee, $("#" + id)); + // 阻止事件冒泡（针对父元素的move） + ee.stopPropagation(); + }; + box.appendChild(tableBox); + + var table = document.createElement("table"); + table.id = tableBoxId; + box.appendChild(table); + + return tableBoxId; + } + function getWordBox(boxId, modelId, styleStr, wordStyleMation) { var wordId = "word" + boxId; var wordBox = document.createElement("font"); diff --git a/report/src/main/resources/template/tpl/pageReportDesign/pageReportDesign.html b/report/src/main/resources/template/tpl/pageReportDesign/pageReportDesign.html index 6bbfbc278..9505ad822 100644 --- a/report/src/main/resources/template/tpl/pageReportDesign/pageReportDesign.html +++ b/report/src/main/resources/template/tpl/pageReportDesign/pageReportDesign.html @@ -11,11 +11,11 @@ - - - - - + + + + + \ No newline at end of file diff --git a/report/src/main/resources/template/tpl/pageReportDesign/simpleTableDesign.html b/report/src/main/resources/template/tpl/pageReportDesign/simpleTableDesign.html new file mode 100644 index 000000000..c88c74dc8 --- /dev/null +++ b/report/src/main/resources/template/tpl/pageReportDesign/simpleTableDesign.html @@ -0,0 +1,59 @@ + + + + + + + + + + + +
+
+
+ +
+
+ 拖拽表格行可修改顺序。 +
+
+ + +
+ + +
+
+
+
+
+ + +
+
+
+
+ + + + + \ No newline at end of file diff --git a/web/src/main/resources/template/assets/lib/layui/custom.js b/web/src/main/resources/template/assets/lib/layui/custom.js index 05ad737a0..dad663f1b 100644 --- a/web/src/main/resources/template/assets/lib/layui/custom.js +++ b/web/src/main/resources/template/assets/lib/layui/custom.js @@ -35,7 +35,7 @@ var customerJS = { //系统基础信息 var sysMainMation = {}; // 系统基础信息json -if(isNull(localStorage.getItem("sysMainMation"))){ +if (isNull(localStorage.getItem("sysMainMation"))) { jsGetJsonFile("../../configRation.json", function(data) { sysMainMation = data; localStorage.setItem("sysMainMation", JSON.stringify(sysMainMation)); diff --git a/web/src/main/resources/template/assets/lib/layui/customer/skyeye/dsFormUtil.js b/web/src/main/resources/template/assets/lib/layui/customer/skyeye/dsFormUtil.js index b292fd8c4..0116d896d 100644 --- a/web/src/main/resources/template/assets/lib/layui/customer/skyeye/dsFormUtil.js +++ b/web/src/main/resources/template/assets/lib/layui/customer/skyeye/dsFormUtil.js @@ -791,11 +791,13 @@ var dsFormTableUtil = { } var url = ""; - eval('url = ' + api.serviceStr + ' + "' + api.api + '"'); + if (!isNull(api)) { + eval('url = ' + api.serviceStr + ' + "' + api.api + '"'); + } table.render({ id: id, elem: `#${id}`, - method: api.method, + method: api?.method, url: url, where: dsFormTableUtil.getTableParams(), toolbar: true, -- GitLab