Skip to content

S
Skyeye

doc_wei / Skyeye

通知 1172
Star 154
Fork 127
S
Skyeye
提交 286f7fa5 编写于 作者: doc_wei's avatar doc_wei
浏览文件
操作

feat: 报表新增表格组件，数据未回显

上级 9a2da9c1
隐藏空白更改
内联 并排
Showing with 579 addition and 61 deletion
report/src/main/resources/template/assets/report/css/ruler.css
浏览文件 @ 286f7fa5
......@@ -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%;
......
report/src/main/resources/template/assets/report/js/skyeyeReportDesigner.js
浏览文件 @ 286f7fa5
......@@ -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 += '<a class="li tableModel layui-col-xs3" href="javascript:void(0);" rowId="' + bean.id + '" title="' + bean.name + '">' +
'<i class="icon' + bean.icon + '"></i>' +
'<span class="text">' + bean.name + '</span>' +
'</a>';
});
str += '</div>' +
'</div>' +
'</div>';
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 = '<div class="form-box">' +
'<fieldset class="layui-elem-field layui-field-title">' +
' <legend>属性</legend>' +
......@@ -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 = '<div class="cape cape_left1"></div>' +
'<div class="cape cape_left1_top"></div>' +
'<div class="cape cape_right1"></div>' +
......@@ -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) {
......
report/src/main/resources/template/assets/report/json/skyeyeEditor.json
浏览文件 @ 286f7fa5
......@@ -61,5 +61,12 @@
"html": "<div class='layui-form-item {{defaultWidth}}'><label class='layui-form-label'><i class='layui-icon layui-icon-tips' lay-tips='{{remark}}'></i>{{labelContent}}：</label><div class='layui-input-block ver-center'>{{{context}}}</div></div>",
"js": "",
"showValueTemplate": ""
},
"101": {
"key": "tableColumnChoose",
"name": "表格配置",
"html": "<div class='layui-form-item {{defaultWidth}}' controlType='tableColumnChoose' modelKey='{{modelKey}}' boxId='{{boxId}}'><label class='layui-form-label'><i class='layui-icon layui-icon-tips' lay-tips='{{remark}}'></i>{{labelContent}}：</label><div class='layui-input-block'><button id='choose{{boxId}}{{indexNumber}}' type='button' class='winui-toolbtn'>配置</button></div></div>",
"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
report/src/main/resources/template/js/pageReportDesign/pageReportDesign.js
浏览文件 @ 286f7fa5
......@@ -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",
......
report/src/main/resources/template/js/pageReportDesign/simpleTableDesign.js 0 → 100644
浏览文件 @ 286f7fa5
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 '<i class="fa fa-arrows drag-row" />';}},
{ field: 'attrKey', title: '属性<i class="red">*</i>', align: 'left', width: 200, templet: function (d) {
return `<input type="text" id="attrKey${d.id}" placeholder="请填写属性" cus-id="${d.id}" class="layui-input tableInput" win-verify="required" ` +
`value="` + (isNull(d.attrKey) ? "" : d.attrKey) + `"/>`;
}},
{ field: 'name', title: '列名<i class="red">*</i>', align: 'left', width: 200, templet: function (d) {
return `<input type="text" id="name${d.id}" placeholder="请填写列名" cus-id="${d.id}" class="layui-input tableInput" win-verify="required" ` +
`value="` + (isNull(d.name) ? "" : d.name) + `"/>`;
}},
{ field: 'align', title: '对齐方式<i class="red">*</i>', align: 'left', width: 120, templet: function (d) {
var _html = `<select lay-filter="tableSelect" lay-search="" id="align${d.id}" cus-id="${d.id}" win-verify="required"><option value="">请选择</option>`;
$.each(alignmentData.rows, function (i, item) {
if (item.id == d.align) {
_html += `<option value="${item.id}" selected="selected">${item.name}</option>`;
} else {
if (i == 0) {
_html += `<option value="${item.id}" selected="selected">${item.name}</option>`;
} else {
_html += `<option value="${item.id}">${item.name}</option>`;
}
}
});
_html += `</select>`;
return _html;
}},
{ field: 'fixed', title: '固定位置', align: 'left', width: 120, templet: function (d) {
var _html = `<select lay-filter="tableSelect" lay-search="" id="fixed${d.id}" cus-id="${d.id}"><option value="">请选择</option>`;
$.each(fixedTypeData.rows, function (i, item) {
if (item.id == d.fixed) {
_html += `<option value="${item.id}" selected="selected">${item.name}</option>`;
} else {
_html += `<option value="${item.id}">${item.name}</option>`;
}
});
_html += `</select>`;
return _html;
}},
{ field: 'hide', title: '默认隐藏', align: 'left', width: 120, templet: function (d) {
var _html = `<select lay-filter="tableSelect" lay-search="" id="hide${d.id}" cus-id="${d.id}"><option value="">请选择</option>`;
$.each(whetherEnumData.rows, function (i, item) {
if (item.id == d.hide) {
_html += `<option value="${item.id}" selected="selected">${item.name}</option>`;
} else {
if (i == 1) {
_html += `<option value="${item.id}" selected="selected">${item.name}</option>`;
} else {
_html += `<option value="${item.id}">${item.name}</option>`;
}
}
});
_html += `</select>`;
return _html;
}},
{ field: 'width', title: '宽度(px)<i class="red">*</i>', align: 'left', width: 120, templet: function (d) {
return `<input type="text" id="width${d.id}" placeholder="请填写宽度" cus-id="${d.id}" class="layui-input tableInput" win-verify="required|number" ` +
`value="` + (isNull(d.width) ? "" : d.width) + `"/>`;
}},
{ field: 'templetBox', title: '脚本', align: 'left', width: 700, templet: function (d) {
return `<textarea id="templet${d.id}" placeholder="请填写脚本" cus-id="${d.id}" class="tableInput templateClass"></textarea>`;
}},
]],
done: function(json) {
matchingLanguage();
if ($(`div[lay-id='messageTable']`).find('.place-holder').length == 0) {
$(`div[lay-id='messageTable']`).find('.layui-table-body').append('<div class="place-holder"></div>');
}
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
report/src/main/resources/template/js/reportDataFrom/reportDataFromWrite.js
浏览文件 @ 286f7fa5
......@@ -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);
......
report/src/main/resources/template/js/reportPage/reportPageShow.js
浏览文件 @ 286f7fa5
......@@ -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");
......
report/src/main/resources/template/tpl/pageReportDesign/pageReportDesign.html
浏览文件 @ 286f7fa5
......@@ -11,11 +11,11 @@
</body>
<script src="../../assets/lib/layui/layui.js"></script>
<script src="../../assets/lib/layui/custom.js"></script>
<script type="text/javascript" src="../../assets/report/js/loadboxresize.js"></script>
<script type="text/javascript" src="../../assets/report/js/skyeyeReportDesigner.js"></script>
<script type="text/javascript">
layui.config({base: '../../js/pageReportDesign/'}).use('pageReportDesign');
</script>
<script src="../../assets/lib/layui/layui.js"></script>
<script src="../../assets/lib/layui/custom.js"></script>
<script type="text/javascript" src="../../assets/report/js/loadboxresize.js"></script>
<script type="text/javascript" src="../../assets/report/js/skyeyeReportDesigner.js"></script>
<script type="text/javascript">
layui.config({base: '../../js/pageReportDesign/'}).use('pageReportDesign');
</script>
</html>
\ No newline at end of file
report/src/main/resources/template/tpl/pageReportDesign/simpleTableDesign.html 0 → 100644
浏览文件 @ 286f7fa5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
<link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
<link href="../../assets/lib/layui/css/codemirror.css" rel="stylesheet" />
<style>
.layui-table-cell {
height: auto;
text-overflow: inherit;
overflow: visible;
white-space: normal;
word-wrap: break-word;
}
.layui-table-cell .layui-anim {
height: 180px;
}
.place-holder {
height: 200px;
}
</style>
</head>
<body>
<div style="margin:0 auto; padding:20px;">
<form class="layui-form" action="" id="showForm" autocomplete="off">
<div class="layui-form-item layui-col-xs12">
<label class="layui-form-label">表格属性<i class="red">*</i></label>
<div class="layui-input-block">
<div class="winui-tip alert-info">
拖拽表格行可修改顺序。
</div>
<div class="winui-tool" style="text-align: left;">
<button id="addRow" class="winui-toolbtn" type="button"><i class="fa fa-plus" aria-hidden="true"></i>新增行</button>
<button id="deleteRow" class="winui-toolbtn" type="button"><i class="fa fa-trash-o" aria-hidden="true"></i>删除行</button>
</div>
<table class="layui-table" id="messageTable">
</table>
</div>
</div>
<div class="layui-form-item layui-col-xs12">
<div class="layui-input-block">
<button class="winui-btn" id="cancle"><language showName="com.skyeye.cancel"></language></button>
<button class="winui-btn" lay-submit lay-filter="formWriteBean"><language showName="com.skyeye.save"></language></button>
</div>
</div>
</form>
</div>
<script src="../../assets/lib/layui/layui.js"></script>
<script src="../../assets/lib/layui/custom.js"></script>
<script type="text/javascript">
layui.config({base: '../../js/pageReportDesign/'}).use('simpleTableDesign');
</script>
</body>
</html>
\ No newline at end of file
web/src/main/resources/template/assets/lib/layui/custom.js
浏览文件 @ 286f7fa5
......@@ -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));
......
web/src/main/resources/template/assets/lib/layui/customer/skyeye/dsFormUtil.js
浏览文件 @ 286f7fa5
......@@ -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,
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或