report template

web/maintain/report/js/rpt_tpl_band.js

@@ -0,0 +1,248 @@
+'use strict'
+
+let bandTreeOprObj = {
+    treeObj : null,
+    currentNode: null,
+    innerCounter: 1,
+    reportCfg: null,
+    canTrickEvent: false,
+    iniTree: function(rptTpl) {
+        var me = this;
+        let bandList = rptTpl[JV.NODE_BAND_COLLECTION];
+        me.buildTreeData(bandList);
+        me.treeObj = $.fn.zTree.init($("#band_tree_reversed"), bandSetting, bandList);
+        me.treeObj.expandAll(true);
+    },
+    buildTreeData: function(bandList){
+        let rst = [], startIdx = 1;
+        //zTreeHelper.createTree(result, setting, "rptTplTree", me);
+        let private_setBandId = function (parentBand) {
+            if (parentBand[JV.BAND_PROP_SUB_BANDS]) {
+                for (let band of parentBand[JV.BAND_PROP_SUB_BANDS]) {
+                    band.ID = startIdx;
+                    band.ParentID = parentBand.ID;
+                    startIdx++;
+                    private_setBandId(band);
+                }
+            }
+        }
+        for (let band of bandList) {
+            band.ID = startIdx;
+            band.ParentID = -1;
+            startIdx++;
+            private_setBandId(band);
+        }
+
+        return rst;
+    },
+    getReportTplCfg: function() {
+        let me = this, params = {};
+        params.userId = userID;
+        CommonAjax.postEx("report_tpl_api/getUserRptCfg", params, 20000, true, function(result){
+                me.reportCfg = result;
+                me.refreshRptCfgs();
+            }, null, null
+        );
+    },
+    refreshRptCfgs: function () {
+        let me = this;
+        if (me.reportCfg) {
+            me.reportCfg.borderArr = [];
+            for (let style of me.reportCfg.styles) {
+                me.reportCfg.borderArr.push(style.ID);
+                $("#borderStyles").append("<option value='" + style.ID + "'>" + style.CfgDispName + "</option>");
+            }
+        }
+        let pf = $("#pageFrequency");
+        pf.append("<option value='" + JV.PAGE_STATUS[0] + "'>每页</option>");
+        pf.append("<option value='" + JV.PAGE_STATUS[1] + "'>首页</option>");
+        pf.append("<option value='" + JV.PAGE_STATUS[2] + "'>尾页</option>");
+        pf.append("<option value='" + JV.PAGE_STATUS[3] + "'>章首页</option>");
+        pf.append("<option value='" + JV.PAGE_STATUS[4] + "'>章尾页</option>");
+        pf.append("<option value='" + JV.PAGE_STATUS[5] + "'>分组</option>");
+        pf.append("<option value='" + JV.PAGE_STATUS[6] + "'>交叉行尾页</option>");
+        pf.append("<option value='" + JV.PAGE_STATUS[7] + "'>交叉列尾页</option>");
+        let ba = $("#bandAlignment");
+        ba.append("<option value='" + JV.LAYOUT[0] + "'>上</option>");
+        ba.append("<option value='" + JV.LAYOUT[1] + "'>下</option>");
+        ba.append("<option value='" + JV.LAYOUT[2] + "'>左</option>");
+        ba.append("<option value='" + JV.LAYOUT[3] + "'>右</option>");
+        ba.append("<option value='" + JV.LAYOUT[4] + "'>填充</option>");
+    },
+    createBandFromNode: function(node) {
+        let me = this, rst = {};
+        rst[JV.BAND_PROP_ALIGNMENT] = node[JV.BAND_PROP_ALIGNMENT];
+        rst[JV.BAND_PROP_DISPLAY_TYPE] = node[JV.BAND_PROP_DISPLAY_TYPE];
+        let posIdx = JV.LAYOUT.indexOf(node[JV.BAND_PROP_ALIGNMENT])
+        switch(posIdx) {
+            case 0:
+            case 1:
+                rst[JV.BAND_PROP_HEIGHT] = node[JV.BAND_PROP_HEIGHT];
+                break;
+            case 2:
+            case 3:
+                rst[JV.BAND_PROP_WIDTH] = node[JV.BAND_PROP_WIDTH];
+                break;
+        }
+        rst[JV.PROP_NAME] = node[JV.PROP_NAME];
+        rst[JV.PROP_CONTROL] = node[JV.PROP_CONTROL];
+        rst[JV.PROP_STYLE] = node[JV.PROP_STYLE];
+        if (node[JV.BAND_PROP_MERGE_BORDER] != undefined) {
+            rst[JV.BAND_PROP_MERGE_BORDER] = node[JV.BAND_PROP_MERGE_BORDER];
+        } else {
+            rst[JV.BAND_PROP_MERGE_BORDER] = 'F';
+        }
+        if (node[JV.BAND_PROP_SUB_BANDS]) {
+            rst[JV.BAND_PROP_SUB_BANDS] = [];
+            for (let subNode of node[JV.BAND_PROP_SUB_BANDS]) {
+                rst[JV.BAND_PROP_SUB_BANDS].push(me.createBandFromNode(subNode));
+            }
+        }
+        return rst;
+    },
+    createDftBand: function () {
+        let me = this, rst = {};
+        rst[JV.BAND_PROP_ALIGNMENT] = 'Top';
+        rst[JV.BAND_PROP_DISPLAY_TYPE] = 'EveryPage';
+        rst[JV.BAND_PROP_HEIGHT] = '3';
+        rst[JV.PROP_NAME] = 'newBand_' + me.innerCounter;
+        me.innerCounter++;
+        rst[JV.PROP_CONTROL] = 'Default';
+        rst[JV.PROP_STYLE] = 'Default_None';
+        rst[JV.BAND_PROP_MERGE_BORDER] = 'F';
+        return rst;
+    },
+    addRootBand: function (rptTpl) {
+        let me = this;
+        if (rptTpl) {
+            let newBand = me.createDftBand();
+            let newNodes = [], isSilent = false;
+            newNodes.push(newBand);
+            if (me.treeObj) {
+                me.treeObj.addNodes(null, -1, newNodes, isSilent);
+            } else {
+                me.treeObj = $.fn.zTree.init($("#band_tree_reversed"), bandSetting, newNodes);
+            }
+        }
+    },
+    addSubBand: function (rptTpl) {
+        let me = this;
+        if (rptTpl && me.currentNode != null) {
+            let newBand = me.createDftBand();
+            let newNodes = [], isSilent = false;
+            newNodes.push(newBand);
+            me.treeObj.addNodes(me.currentNode, -1, newNodes, isSilent);
+        }
+    },
+    moveDownBand: function (rptTpl) {
+        let me = bandTreeOprObj;
+        if (rptTpl && me.currentNode && me.currentNode.getNextNode()) {
+            let nextNode = me.currentNode.getNextNode();
+            me.treeObj.moveNode(nextNode, me.currentNode, "next", true);
+        }
+    },
+    moveUpBand: function (rptTpl) {
+        let me = bandTreeOprObj;
+        if (rptTpl && me.currentNode && me.currentNode.getPreNode()) {
+            let preNode = me.currentNode.getPreNode();
+            me.treeObj.moveNode(preNode, me.currentNode, "prev", true);
+        }
+    },
+    onClick: function(event,treeId,treeNode) {
+        let me = bandTreeOprObj;
+        me.currentNode = treeNode;
+        me.canTrickEvent = false;
+        //then refresh the band tab properties
+        //边框样式borderStyles
+        $("#borderStyles ").get(0).selectedIndex = me.reportCfg.borderArr.indexOf(treeNode[JV.PROP_STYLE]);
+        //边框合并
+        $("#mergeBandBorder").get(0).checked = stringUtil.convertStrToBoolean(treeNode[JV.BAND_PROP_MERGE_BORDER]);
+        //位置
+        let posIdx = JV.LAYOUT.indexOf(treeNode[JV.BAND_PROP_ALIGNMENT])
+        $("#bandAlignment").get(0).selectedIndex = posIdx;
+        //高与宽
+        me.setupWidthHeightByPosition(posIdx);
+        //频率
+        $("#pageFrequency").get(0).selectedIndex = JV.PAGE_STATUS.indexOf(treeNode[JV.BAND_PROP_DISPLAY_TYPE])
+        //
+        me.canTrickEvent = true;
+    },
+    setupWidthHeightByPosition: function (posIdx) {
+        let me = this, treeNode = me.currentNode;
+        switch(posIdx) {
+            case 0:
+            case 1:
+                $("#bandHeight").get(0).disabled = false;
+                $("#bandHeight").get(0).value = treeNode[JV.BAND_PROP_HEIGHT];
+                $("#bandWidth").get(0).disabled = true;
+                $("#bandWidth").get(0).value = "";
+                break;
+            case 2:
+            case 3:
+                $("#bandHeight").get(0).disabled = true;
+                $("#bandHeight").get(0).value = "";
+                $("#bandWidth").get(0).disabled = false;
+                $("#bandWidth").get(0).value = treeNode[JV.BAND_PROP_WIDTH];
+                break;
+            default:
+                $("#bandHeight").get(0).disabled = true;
+                $("#bandHeight").get(0).value = "";
+                $("#bandWidth").get(0).disabled = true;
+                $("#bandWidth").get(0).value = "";
+                break;
+        }
+    },
+    bandStyleChange: function (dom) {
+        let me = this;
+        if (me.currentNode) {
+            me.currentNode[JV.PROP_STYLE] = me.reportCfg.borderArr[dom.selectedIndex];
+        }
+    },
+    bandAlignmentChange: function (dom) {
+        let me = this;
+        if (me.currentNode) {
+            let posIdx = dom.selectedIndex;
+            me.currentNode[JV.BAND_PROP_ALIGNMENT] = JV.LAYOUT[posIdx];
+            me.setupWidthHeightByPosition(posIdx);
+        }
+    },
+    bandHeightWidthChange: function (dom) {
+        let me = this, treeNode = me.currentNode;
+        if (me.currentNode) {
+            let posIdx = $("#bandAlignment").get(0).selectedIndex;
+            switch(posIdx) {
+                case 0:
+                case 1:
+                    treeNode[JV.BAND_PROP_HEIGHT] = dom.value;
+                    break;
+                case 2:
+                case 3:
+                    treeNode[JV.BAND_PROP_WIDTH] = dom.value;
+                    break;
+            }
+        }
+    },
+    bandShowFrequencyChange: function (dom) {
+        let me = this;
+        if (me.currentNode) {
+            me.currentNode[JV.BAND_PROP_DISPLAY_TYPE] = JV.PAGE_STATUS[dom.selectedIndex];
+        }
+    },
+    bandBorderMergeChange: function (dom) {
+        let me = this;
+        if (me.currentNode) {
+            me.currentNode[JV.BAND_PROP_MERGE_BORDER] = dom.checked?'T':'F';
+        }
+    },
+    extractBands: function (rptTpl) {
+        let me = this;
+        if (rptTpl) {
+            let newBandList = [];
+            for (let node of me.treeObj.getNodes()) {
+                newBandList.push(me.createBandFromNode(node));
+            }
+            rptTpl[JV.NODE_BAND_COLLECTION] = newBandList;
+        }
+    }
+
+};

web/maintain/report/js/rpt_tpl_calculation.js

@@ -0,0 +1,31 @@
+/**
+ * Created by Tony on 2017/7/7.
+ */
+
+let calculationTreeOprObj = {
+    treeObj : null,
+    iniTree: function(rptTpl) {
+        var me = this;
+        // let fieldMapList = me.buildTreeData(rptTpl);
+        // me.treeObj = $.fn.zTree.init($("#field_map_tree_reversed"), fieldMapSetting, fieldMapList);
+        // me.treeObj.expandAll(true);
+    },
+    buildTreeData: function (rptTpl) {
+    },
+    onClick: function () {
+        //
+    },
+    onBeforeRemove: function(treeId, treeNode){
+    },
+    beforeRename: function(treeId, treeNode, newName, isCancel) {
+    },
+    onRemove: function () {
+        //
+    },
+    onRename: function () {
+        //
+    },
+    extractCalculation: function (rptTpl) {
+        //
+    }
+}

web/maintain/report/js/rpt_tpl_field_cfg.js

@@ -0,0 +1,31 @@
+/**
+ * Created by Tony on 2017/7/7.
+ */
+
+let tabFieldCfgTreeOprObj = {
+    treeObj : null,
+    iniTree: function(rptTpl) {
+        var me = this;
+        // let fieldMapList = me.buildTreeData(rptTpl);
+        // me.treeObj = $.fn.zTree.init($("#field_map_tree_reversed"), fieldMapSetting, fieldMapList);
+        // me.treeObj.expandAll(true);
+    },
+    buildTreeData: function (rptTpl) {
+    },
+    onClick: function () {
+        //
+    },
+    onBeforeRemove: function(treeId, treeNode){
+    },
+    beforeRename: function(treeId, treeNode, newName, isCancel) {
+    },
+    onRemove: function () {
+        //
+    },
+    onRename: function () {
+        //
+    },
+    extractTabFields: function (rptTpl) {
+        //
+    }
+}

web/maintain/report/js/rpt_tpl_field_map.js

@@ -0,0 +1,61 @@
+'use strict'
+
+let fieldMapTreeOprObj = {
+    treeObj : null,
+    iniTree: function(rptTpl) {
+        var me = this;
+        let fieldMapList = me.buildTreeData(rptTpl);
+        me.treeObj = $.fn.zTree.init($("#field_map_tree_reversed"), fieldMapSetting, fieldMapList);
+        me.treeObj.expandAll(true);
+    },
+    buildTreeData: function (rptTpl) {
+        let rst = [];
+        let private_setSubFields = function (parent, fieldList) {
+            for (let field of fieldList) {
+                parent.items.push(field);
+            }
+        }
+
+        if (rptTpl[JV.NODE_FIELD_MAP][JV.NODE_DISCRETE_FIELDS]) {
+            rst.push({Name: JV.NODE_DISCRETE_FIELDS, items: [], isParent: true});
+            private_setSubFields(rst[rst.length - 1], rptTpl[JV.NODE_FIELD_MAP][JV.NODE_DISCRETE_FIELDS])
+        }
+        if (rptTpl[JV.NODE_FIELD_MAP][JV.NODE_MASTER_FIELDS]) {
+            rst.push({Name: JV.NODE_MASTER_FIELDS, items: [], isParent: true});
+            private_setSubFields(rst[rst.length - 1], rptTpl[JV.NODE_FIELD_MAP][JV.NODE_MASTER_FIELDS])
+        }
+        if (rptTpl[JV.NODE_FIELD_MAP][JV.NODE_DETAIL_FIELDS]) {
+            rst.push({Name: JV.NODE_DETAIL_FIELDS, items: [], isParent: true});
+            private_setSubFields(rst[rst.length - 1], rptTpl[JV.NODE_FIELD_MAP][JV.NODE_DETAIL_FIELDS])
+        }
+
+        return rst;
+    },
+    onClick: function () {
+        //
+    },
+    onBeforeRemove: function(treeId, treeNode){
+        if (treeNode.level === 0) {
+            return false;
+        }
+        return true;
+    },
+    beforeRename: function(treeId, treeNode, newName, isCancel) {
+        if (isCancel) {
+            return true;
+        }
+        if (treeNode.level === 0) {
+            return false;
+        }
+        return true;
+    },
+    onRemove: function () {
+        //
+    },
+    onRename: function () {
+        //
+    },
+    extractFieldMaps: function (rptTpl) {
+        //
+    }
+};

web/maintain/report/js/rpt_tpl_helper.js

@@ -36,6 +36,50 @@ let tplHelper = {
         if (zTreeOprObj.currentNode && zTreeOprObj.currentNode.nodeType == RT.NodeType.TEMPLATE) {
             //
         }
+    },
+
+    refreshTplView: function (rptTpl) {
+        if (rptTpl) {
+            //1. 模板信息
+            $("#rptTplName")[0].value = rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MAIN_INFO_RPT_NAME];
+            $("#rptTplPageSize")[0].selectedIndex = JV.PAGES_SIZE_STR.indexOf(rptTpl[JV.NODE_MAIN_INFO][JV.NODE_PAGE_INFO][JV.PROP_PAGE_SIZE]);
+            if (rptTpl[JV.NODE_MAIN_INFO][JV.NODE_PAGE_INFO][JV.PROP_ORIENTATION] === JV.ORIENTATION_PORTRAIT ||
+                rptTpl[JV.NODE_MAIN_INFO][JV.NODE_PAGE_INFO][JV.PROP_ORIENTATION] === JV.ORIENTATION_PORTRAIT_CHN) {
+                $("#rptTplPageOrientation")[0].selectedIndex = 1;
+            } else {
+                $("#rptTplPageOrientation")[0].selectedIndex = 0;
+            }
+            if (rptTpl[JV.NODE_FLOW_INFO]) {
+                $("#multiColCnt")[0].style.display = "";
+            } else {
+                $("#multiColCnt")[0].style.display = "none";
+            }
+            $("#rptTplMarginLeft")[0].value = rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MARGINS][JV.PROP_LEFT];
+            $("#rptTplMarginRight")[0].value = rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MARGINS][JV.PROP_RIGHT];
+            $("#rptTplMarginTop")[0].value = rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MARGINS][JV.PROP_TOP];
+            $("#rptTplMarginBottom")[0].value = rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MARGINS][JV.PROP_BOTTOM];
+            //2. 模板布局
+            bandTreeOprObj.iniTree(rptTpl);
+            //3. 指标映射
+            fieldMapTreeOprObj.iniTree(rptTpl);
+            //4. 指标摆放
+            //5. 计算式
+        }
+    },
+    reCombineRptTpl: function () {
+        if (zTreeOprObj.currentNode && zTreeOprObj.currentNode.nodeType == RT.NodeType.TEMPLATE && zTreeOprObj.currentNode.rptTpl != null) {
+            let rptTpl = zTreeOprObj.currentNode.rptTpl;
+            //1. 模板信息
+            zTreeOprObj.extractMainInfo(rptTpl);
+            //2. 模板布局
+            bandTreeOprObj.extractBands(rptTpl);
+            //3. 指标映射
+            fieldMapTreeOprObj.extractFieldMaps(rptTpl);
+            //4. 指标摆放
+            tabFieldCfgTreeOprObj.extractTabFields(rptTpl);
+            //5. 计算式
+            calculationTreeOprObj.extractCalculation(rptTpl);
+        }
     }
 
 }

web/maintain/report/js/rpt_tpl_main.js

@@ -2,7 +2,6 @@
 
 let rptTplObj = {
     iniPage: function() {
-        let me = this
         zTreeOprObj.getReportTemplateTree(RT.GrpType.CONSTRUCT);
         bandTreeOprObj.getReportTplCfg();
         preview_util.drawBorder($("#tplCanvas")[0]);
@@ -267,6 +266,14 @@ let zTreeOprObj = {
         let me = zTreeOprObj, nodes = [];
         nodes.push(me.createNodeFromZTreeNode(treeNode));
         me.updateNodes(nodes);
+        if (treeNode.nodeType == RT.NodeType.TEMPLATE && treeNode.refId >= 0) {
+            if (treeNode.rptTpl != null) {
+                treeNode.rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MAIN_INFO_RPT_NAME] = treeNode.name;
+                $("#rptTplName")[0].value = treeNode.rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MAIN_INFO_RPT_NAME];
+            } else {
+                me.onClick(e, treeId, treeNode);
+            }
+        }
     },
     onClick: function(event,treeId,treeNode) {
         let me = zTreeOprObj;
@@ -311,11 +318,13 @@ let zTreeOprObj = {
                 params.rptTplId = me.currentNode.refId;
                 CommonAjax.postEx("report_tpl_api/getRefRptTpl", params, 20000, true, function(result){
                         me.currentNode.rptTpl = result;
-                        me.refreshTplView(me.currentNode.rptTpl);
+                        me.currentNode.rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MAIN_INFO_RPT_NAME] = me.currentNode.name;
+                        tplHelper.refreshTplView(me.currentNode.rptTpl);
                     }, null, null
                 );
             } else {
-                me.refreshTplView(me.currentNode.rptTpl);
+                me.currentNode.rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MAIN_INFO_RPT_NAME] = me.currentNode.name;
+                tplHelper.refreshTplView(me.currentNode.rptTpl);
             }
         }
     },
@@ -326,279 +335,21 @@ let zTreeOprObj = {
         }
         return rst;
     },
-    refreshTplView: function (rptTpl) {
-        let me = zTreeOprObj;
-        if (rptTpl) {
-            //1. 模板信息
-            $("#rptTplName")[0].value = rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MAIN_INFO_RPT_NAME];
-            $("#rptTplPageSize")[0].selectedIndex = JV.PAGES_SIZE_STR.indexOf(rptTpl[JV.NODE_MAIN_INFO][JV.NODE_PAGE_INFO][JV.PROP_PAGE_SIZE]);
-            if (rptTpl[JV.NODE_MAIN_INFO][JV.NODE_PAGE_INFO][JV.PROP_ORIENTATION] === JV.ORIENTATION_PORTRAIT ||
-                rptTpl[JV.NODE_MAIN_INFO][JV.NODE_PAGE_INFO][JV.PROP_ORIENTATION] === JV.ORIENTATION_PORTRAIT_CHN) {
-                $("#rptTplPageOrientation")[0].selectedIndex = 1;
-            } else {
-                $("#rptTplPageOrientation")[0].selectedIndex = 0;
-            }
-            $("#rptTplMarginLeft")[0].value = rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MARGINS][JV.PROP_LEFT];
-            $("#rptTplMarginRight")[0].value = rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MARGINS][JV.PROP_RIGHT];
-            $("#rptTplMarginTop")[0].value = rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MARGINS][JV.PROP_TOP];
-            $("#rptTplMarginBottom")[0].value = rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MARGINS][JV.PROP_BOTTOM];
-            //2. 模板布局
-            bandTreeOprObj.iniTree(rptTpl);
-            //3. 指标映射
-            fieldMapTreeOprObj.iniTree(rptTpl);
-            //4. 指标摆放
-            //5. 计算式
-        }
-    },
-    previewRptTpl: function (rptTpl) {
-        let me = zTreeOprObj;
-        if (rptTpl) {
-            //
-        }
-    }
-};
-
-let bandTreeOprObj = {
-    treeObj : null,
-    currentNode: null,
-    innerCounter: 1,
-    reportCfg: null,
-    canTrickEvent: false,
-    iniTree: function(rptTpl) {
-        var me = this;
-        let bandList = rptTpl[JV.NODE_BAND_COLLECTION];
-        me.buildTreeData(bandList);
-        me.treeObj = $.fn.zTree.init($("#band_tree_reversed"), bandSetting, bandList);
-        me.treeObj.expandAll(true);
-    },
-    buildTreeData: function(bandList){
-        let rst = [], startIdx = 1;
-        //zTreeHelper.createTree(result, setting, "rptTplTree", me);
-        let private_setBandId = function (parentBand) {
-            if (parentBand[JV.BAND_PROP_SUB_BANDS]) {
-                for (let band of parentBand[JV.BAND_PROP_SUB_BANDS]) {
-                    band.ID = startIdx;
-                    band.ParentID = parentBand.ID;
-                    startIdx++;
-                    private_setBandId(band);
-                }
-            }
-        }
-        for (let band of bandList) {
-            band.ID = startIdx;
-            band.ParentID = -1;
-            startIdx++;
-            private_setBandId(band);
-        }
-
-        return rst;
-    },
-    getReportTplCfg: function() {
-        let me = this, params = {};
-        params.userId = userID;
-        CommonAjax.postEx("report_tpl_api/getUserRptCfg", params, 20000, true, function(result){
-                me.reportCfg = result;
-                me.refreshRptCfgs();
-            }, null, null
-        );
-    },
-    refreshRptCfgs: function () {
-        let me = this;
-        if (me.reportCfg) {
-            me.reportCfg.borderArr = [];
-            for (let style of me.reportCfg.styles) {
-                me.reportCfg.borderArr.push(style.ID);
-                $("#borderStyles").append("<option value='" + style.ID + "'>" + style.CfgDispName + "</option>");
-            }
-        }
-        let pf = $("#pageFrequency");
-        pf.append("<option value='" + JV.PAGE_STATUS[0] + "'>每页</option>");
-        pf.append("<option value='" + JV.PAGE_STATUS[1] + "'>首页</option>");
-        pf.append("<option value='" + JV.PAGE_STATUS[2] + "'>尾页</option>");
-        pf.append("<option value='" + JV.PAGE_STATUS[3] + "'>章首页</option>");
-        pf.append("<option value='" + JV.PAGE_STATUS[4] + "'>章尾页</option>");
-        pf.append("<option value='" + JV.PAGE_STATUS[5] + "'>分组</option>");
-        pf.append("<option value='" + JV.PAGE_STATUS[6] + "'>交叉行尾页</option>");
-        pf.append("<option value='" + JV.PAGE_STATUS[7] + "'>交叉列尾页</option>");
-        let ba = $("#bandAlignment");
-        ba.append("<option value='" + JV.LAYOUT[0] + "'>上</option>");
-        ba.append("<option value='" + JV.LAYOUT[1] + "'>下</option>");
-        ba.append("<option value='" + JV.LAYOUT[2] + "'>左</option>");
-        ba.append("<option value='" + JV.LAYOUT[3] + "'>右</option>");
-        ba.append("<option value='" + JV.LAYOUT[4] + "'>填充</option>");
-    },
-    extractBands: function (rptTpl) {
-        let me = this;
-        if (rptTpl) {
-            let newBandList = [];
-            for (let node of me.treeObj.getNodes()) {
-                newBandList.push(me.createBandFromNode(node));
-            }
-            rptTpl[JV.NODE_BAND_COLLECTION] = newBandList;
-        }
-        return rst;
-    },
-    createBandFromNode: function(node) {
-        let me = this, rst = {};
-        rst[JV.BAND_PROP_ALIGNMENT] = node[JV.BAND_PROP_ALIGNMENT];
-        rst[JV.BAND_PROP_DISPLAY_TYPE] = node[JV.BAND_PROP_DISPLAY_TYPE];
-        rst[JV.BAND_PROP_HEIGHT] = node[JV.BAND_PROP_HEIGHT];
-        rst[JV.PROP_NAME] = node[JV.PROP_NAME];
-        rst[JV.PROP_CONTROL] = node[JV.PROP_CONTROL];
-        rst[JV.PROP_STYLE] = node[JV.PROP_STYLE];
-        if (node[JV.BAND_PROP_SUB_BANDS]) {
-            rst[JV.BAND_PROP_SUB_BANDS] = [];
-            for (let subNode of node[JV.BAND_PROP_SUB_BANDS]) {
-                rst[JV.BAND_PROP_SUB_BANDS].push(me.createBandFromNode(subNode));
-            }
-        }
-        return rst;
-    },
-    createDftBand: function () {
-        let me = this, rst = {};
-        rst[JV.BAND_PROP_ALIGNMENT] = 'Top';
-        rst[JV.BAND_PROP_DISPLAY_TYPE] = 'EveryPage';
-        rst[JV.BAND_PROP_HEIGHT] = '3';
-        rst[JV.PROP_NAME] = 'newBand_' + me.innerCounter;
-        me.innerCounter++;
-        rst[JV.PROP_CONTROL] = 'Default';
-        rst[JV.PROP_STYLE] = 'Default_None';
-        return rst;
-    },
-    addRootBand: function (rptTpl) {
-        let me = this;
-        if (rptTpl) {
-            let newBand = me.createDftBand();
-            let newNodes = [], isSilent = false;
-            newNodes.push(newBand);
-            if (me.treeObj) {
-                me.treeObj.addNodes(null, -1, newNodes, isSilent);
-            } else {
-                me.treeObj = $.fn.zTree.init($("#band_tree_reversed"), bandSetting, newNodes);
-            }
-        }
-    },
-    addSubBand: function (rptTpl) {
-        let me = this;
-        if (rptTpl && me.currentNode != null) {
-            let newBand = me.createDftBand();
-            let newNodes = [], isSilent = false;
-            newNodes.push(newBand);
-            me.treeObj.addNodes(me.currentNode, -1, newNodes, isSilent);
-        }
-    },
-    moveDownBand: function (rptTpl) {
-        let me = bandTreeOprObj;
-        if (rptTpl && me.currentNode && me.currentNode.getNextNode()) {
-            let nextNode = me.currentNode.getNextNode();
-            me.treeObj.moveNode(nextNode, me.currentNode, "next", true);
-        }
-    },
-    moveUpBand: function (rptTpl) {
-        let me = bandTreeOprObj;
-        if (rptTpl && me.currentNode && me.currentNode.getPreNode()) {
-            let preNode = me.currentNode.getPreNode();
-            me.treeObj.moveNode(preNode, me.currentNode, "prev", true);
-        }
-    },
-    onClick: function(event,treeId,treeNode) {
-        let me = bandTreeOprObj;
-        me.currentNode = treeNode;
-        me.canTrickEvent = false;
-        //then refresh the band tab properties
-        //边框样式borderStyles
-        $("#borderStyles ").get(0).selectedIndex = me.reportCfg.borderArr.indexOf(treeNode[JV.PROP_STYLE]);
-        //边框合并
-        $("#mergeBandBorder").get(0).checked = stringUtil.convertStrToBoolean(treeNode[JV.BAND_PROP_MERGE_BORDER]);
-        //位置
-        let posIdx = JV.LAYOUT.indexOf(treeNode[JV.BAND_PROP_ALIGNMENT])
-        $("#bandAlignment").get(0).selectedIndex = posIdx;
-        //高宽
-        switch(posIdx) {
-            case 0:
-            case 1:
-                $("#bandHeight").get(0).disabled = false;
-                $("#bandHeight").get(0).value = treeNode[JV.BAND_PROP_HEIGHT];
-                $("#bandWidth").get(0).disabled = true;
-                $("#bandWidth").get(0).value = "";
-                break;
-            case 2:
-            case 3:
-                $("#bandHeight").get(0).disabled = true;
-                $("#bandHeight").get(0).value = "";
-                $("#bandWidth").get(0).disabled = false;
-                $("#bandWidth").get(0).value = treeNode[JV.BAND_PROP_WIDTH];
-                break;
-            default:
-                $("#bandHeight").get(0).disabled = true;
-                $("#bandHeight").get(0).value = "";
-                $("#bandWidth").get(0).disabled = true;
-                $("#bandWidth").get(0).value = "";
-                break;
-        }
-        //频率
-        $("#pageFrequency").get(0).selectedIndex = JV.PAGE_STATUS.indexOf(treeNode[JV.BAND_PROP_DISPLAY_TYPE])
-        //
-        me.canTrickEvent = true;
-    },
-    bandStyleChange: function (e) {
-        //alert('You changed the band style to: ' + e.selectedOptions[0].text + '(' + e.selectedOptions[0].value + ')');
-    }
-};
-
-let fieldMapTreeOprObj = {
-    treeObj : null,
-    iniTree: function(rptTpl) {
-        var me = this;
-        let fieldMapList = me.buildTreeData(rptTpl);
-        me.treeObj = $.fn.zTree.init($("#field_map_tree_reversed"), fieldMapSetting, fieldMapList);
-        me.treeObj.expandAll(true);
-    },
-    buildTreeData: function (rptTpl) {
-        let rst = [];
-        let private_setSubFields = function (parent, fieldList) {
-            for (let field of fieldList) {
-                parent.items.push(field);
-            }
-        }
-
-        if (rptTpl[JV.NODE_FIELD_MAP][JV.NODE_DISCRETE_FIELDS]) {
-            rst.push({Name: JV.NODE_DISCRETE_FIELDS, items: [], isParent: true});
-            private_setSubFields(rst[rst.length - 1], rptTpl[JV.NODE_FIELD_MAP][JV.NODE_DISCRETE_FIELDS])
-        }
-        if (rptTpl[JV.NODE_FIELD_MAP][JV.NODE_MASTER_FIELDS]) {
-            rst.push({Name: JV.NODE_MASTER_FIELDS, items: [], isParent: true});
-            private_setSubFields(rst[rst.length - 1], rptTpl[JV.NODE_FIELD_MAP][JV.NODE_MASTER_FIELDS])
-        }
-        if (rptTpl[JV.NODE_FIELD_MAP][JV.NODE_DETAIL_FIELDS]) {
-            rst.push({Name: JV.NODE_DETAIL_FIELDS, items: [], isParent: true});
-            private_setSubFields(rst[rst.length - 1], rptTpl[JV.NODE_FIELD_MAP][JV.NODE_DETAIL_FIELDS])
-        }
-
-        return rst;
-    },
-    onClick: function () {
-        //
-    },
-    onBeforeRemove: function(treeId, treeNode){
-        if (treeNode.level === 0) {
-            return false;
-        }
-        return true;
-    },
-    beforeRename: function(treeId, treeNode, newName, isCancel) {
-        if (isCancel) {
-            return true;
-        }
-        if (treeNode.level === 0) {
-            return false;
-        }
-        return true;
-    },
-    onRemove: function () {
-        //
-    },
-    onRename: function () {
-        //
+    extractMainInfo: function (rptTpl) {
+        //模板信息
+        rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MAIN_INFO_RPT_NAME] = $("#rptTplName")[0].value;
+        rptTpl[JV.NODE_MAIN_INFO][JV.NODE_PAGE_INFO][JV.PROP_PAGE_SIZE] = JV.PAGES_SIZE_STR[$("#rptTplPageSize")[0].selectedIndex];
+        if ($("#rptTplPageOrientation")[0].selectedIndex == 1) {
+            rptTpl[JV.NODE_MAIN_INFO][JV.NODE_PAGE_INFO][JV.PROP_ORIENTATION] = JV.ORIENTATION_PORTRAIT;
+        } else {
+            rptTpl[JV.NODE_MAIN_INFO][JV.NODE_PAGE_INFO][JV.PROP_ORIENTATION] = JV.ORIENTATION_LANDSCAPE;
+        }
+        if (rptTpl[JV.NODE_FLOW_INFO]) {
+            rptTpl[JV.NODE_FLOW_INFO][JV.PROP_MULTI_COLUMN] = parseInt($("#rptTplMultiCols")[0].value);
+        }
+        rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MARGINS][JV.PROP_LEFT] = $("#rptTplMarginLeft")[0].value;
+        rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MARGINS][JV.PROP_RIGHT] = $("#rptTplMarginRight")[0].value;
+        rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MARGINS][JV.PROP_TOP] = $("#rptTplMarginTop")[0].value;
+        rptTpl[JV.NODE_MAIN_INFO][JV.NODE_MARGINS][JV.PROP_BOTTOM] = $("#rptTplMarginBottom")[0].value;
     }
 };

web/maintain/report/js/rpt_tpl_preview_util.js

@@ -6,6 +6,15 @@
 let preview_util = {
     offsetX: 0,
     offsetY: 0,
+    clearCanvas: function (canvas) {
+        if (canvas) {
+            let ctx = canvas.getContext("2d");
+            ctx.save();
+            ctx.fillStyle="white";
+            ctx.clearRect(0,0, canvas.width, canvas.height);
+            ctx.restore();
+        }
+    },
     drawBorder: function (canvas) {
         let me = this;
         if (canvas) {
@@ -34,13 +43,15 @@ let preview_util = {
 
         if (!(rptTpl)) return;
 
+        me.clearCanvas(canvas);
+
         let ctx = canvas.getContext("2d");
         let pageSize = rptTpl[JV.NODE_MAIN_INFO][JV.NODE_PAGE_INFO][JV.PROP_PAGE_SIZE];
         let sizeIdx = JV.PAGES_SIZE_STR.indexOf(pageSize);
         if (sizeIdx >= 0) {
-            size = JV.PAGES_SIZE[sizeIdx];
+            size = JV.PAGES_SIZE[sizeIdx].concat([]);
         } else {
-            size = JV.PAGES_SIZE[0];
+            size = JV.PAGES_SIZE[0].concat([]);
         }
         if (rptTpl[JV.NODE_MAIN_INFO][JV.NODE_PAGE_INFO][JV.PROP_ORIENTATION] === JV.ORIENTATION_LANDSCAPE || rptTpl[JV.NODE_MAIN_INFO][JV.NODE_PAGE_INFO][JV.PROP_ORIENTATION] === JV.ORIENTATION_LANDSCAPE_CHN) {
             let ts = size[0];
@@ -146,6 +157,7 @@ let preview_util = {
         for (let band of rptTpl[JV.NODE_BAND_COLLECTION]) {
             if (!(band[JV.PROP_CALCULATION])) band[JV.PROP_CALCULATION] = JV.CAL_TYPE_ABSTRACT;
             let area = private_setupBandArea(band, orgArea);
+            //bandTreeOprObj.reportCfg.styles
             private_showBand(band, area, false, false);
         }
         if (bandTreeOprObj.currentNode) {

web/maintain/report/rpt_tpl_main.html

@@ -84,7 +84,7 @@
                                                     <div class="p-3">
                                                         <div class="form-group">
                                                             <label>报表名称</label>
-                                                            <input class="form-control" id="rptTplName" placeholder="输入报表名称">
+                                                            <input class="form-control" id="rptTplName" value="" disabled>
                                                         </div>
                                                         <div class="form-group">
                                                             <label>页面</label>
@@ -105,7 +105,7 @@
                                                                 <select class="form-control input-sm" id="rptTplUnit"><option>厘米</option></select>
                                                             </div>
                                                         </div>
-                                                        <div class="form-group">
+                                                        <div class="form-group" id="multiColCnt">
                                                             <label>显示调整</label>
                                                             <div class="row">
                                                                 <div class="input-group col-6">
@@ -125,7 +125,7 @@
                                                             </div>
                                                             <div class="input-group col-6">
                                                                 <div class="input-group-addon">空行显示</div>
-                                                                <select class="form-control input-sm"><option>提上</option></select>
+                                                                <select class="form-control input-sm"><option>显示</option></select>
                                                             </div>
                                                         </div>
                                                         <div class="form-group">
@@ -133,22 +133,22 @@
                                                             <div class="row">
                                                                 <div class="input-group col-6">
                                                                     <div class="input-group-addon">左</div>
-                                                                    <input class="form-control input-sm" id="rptTplMarginLeft" type="number" value="0.8" step="0.1">
+                                                                    <input class="form-control input-sm" id="rptTplMarginLeft" type="number" value="0.8" step="0.1" min="0">
                                                                 </div>
                                                                 <div class="input-group col-6">
                                                                     <div class="input-group-addon">右</div>
-                                                                    <input class="form-control input-sm" id="rptTplMarginRight" type="number" value="0.8" step="0.1">
+                                                                    <input class="form-control input-sm" id="rptTplMarginRight" type="number" value="0.8" step="0.1" min="0">
                                                                 </div>
                                                             </div>
                                                         </div>
                                                         <div class="form-group row">
                                                             <div class="input-group col-6">
                                                                 <div class="input-group-addon">上</div>
-                                                                <input class="form-control input-sm" id="rptTplMarginTop" type="number" value="0.8" step="0.1">
+                                                                <input class="form-control input-sm" id="rptTplMarginTop" type="number" value="0.8" step="0.1" min="0">
                                                             </div>
                                                             <div class="input-group col-6">
                                                                 <div class="input-group-addon">下</div>
-                                                                <input class="form-control input-sm" id="rptTplMarginBottom" type="number" value="0.8" step="0.1">
+                                                                <input class="form-control input-sm" id="rptTplMarginBottom" type="number" value="0.8" step="0.1" min="0">
                                                             </div>
                                                         </div>
                                                     </div>
@@ -167,41 +167,35 @@
                                                         <div class="ztree-warp">
                                                             <ul id="band_tree_reversed" class="ztree"></ul>
                                                         </div>
-                                                        <div class="form-group" style="display: none">
-                                                            <label>Band名称</label>
-                                                            <input class="form-control" placeholder="输入Band名称">
-                                                            <small class="form-text text-muted">提示文字文字</small>
-                                                        </div>
                                                         <div class="form-group">
                                                             <label>边框样式</label>
                                                             <select class="form-control" id="borderStyles" onchange="bandTreeOprObj.bandStyleChange(this)"></select>
                                                         </div>
                                                         <div class="form-group">
                                                             <label>位置</label>
-                                                            <select class="form-control" id="bandAlignment"></select>
+                                                            <select class="form-control" id="bandAlignment" onchange="bandTreeOprObj.bandAlignmentChange(this)"></select>
                                                         </div>
 
                                                         <div class="row">
                                                             <div class="form-group col-md-6">
                                                                 <label>高度</label>
-                                                                <input class="form-control mr-2" id="bandHeight" type="number" step="0.1" disabled>
+                                                                <input class="form-control mr-2" id="bandHeight" type="number" step="0.1" disabled onchange="bandTreeOprObj.bandHeightWidthChange(this)">
                                                             </div>
                                                             <div class="form-group col-md-6">
                                                                 <label>宽度</label>
-                                                                <input class="form-control mr-2" id="bandWidth"  type="number" step="0.1" disabled>
+                                                                <input class="form-control mr-2" id="bandWidth"  type="number" step="0.1" disabled onchange="bandTreeOprObj.bandHeightWidthChange(this)">
                                                             </div>
                                                         </div>
 
                                                         <div class="form-group">
                                                             <label>出现频率</label>
-                                                            <select class="form-control" id="pageFrequency"></select>
+                                                            <select class="form-control" id="pageFrequency" onchange="bandTreeOprObj.bandShowFrequencyChange(this)"></select>
                                                         </div>
                                                         <div class="form-group">
-                                                            <label>边框合并</label>
                                                             <div class="form-check">
                                                                 <label class="form-check-label">
-                                                                    <input type="checkbox" class="form-check-input" id="mergeBandBorder">
-                                                                    合并
+                                                                    <input type="checkbox" class="form-check-input" id="mergeBandBorder" onchange="bandTreeOprObj.bandBorderMergeChange(this)">
+                                                                    边框合并
                                                                 </label>
                                                             </div>
                                                         </div>
@@ -217,12 +211,8 @@
                                                         </div>
                                                         <div class="row">
                                                             <div class="form-group col-md-6">
-                                                                <label class="col-form-label">名称</label>
-                                                                <input class="form-control">
-                                                            </div>
-                                                            <div class="form-group col-md-6">
                                                                 <label class="col-form-label">数据类型</label>
-                                                                <select class="form-control"><option>String</option><option>Number</option><option>Date</option><option>Img etc</option></select>
+                                                                <select class="form-control" id="fieldDataTypeSelection"><option>String</option><option>Number</option><option>Date</option><option>Img etc</option></select>
                                                             </div>
                                                         </div>
                                                         <div class="form-group">
@@ -285,7 +275,7 @@
                                     <div class="main-data-h" style="position:relative">
                                         <div class="sub-button p-2">
                                             <button class="btn btn-primary" onclick="preview_util.preview($('#tplCanvas')[0], zTreeOprObj.getRefTpl()) ">预览</button>
-                                            <button class="btn btn-primary">保存</button>
+                                            <button class="btn btn-primary" onclick="tplHelper.reCombineRptTpl()">保存</button>
                                             <button class="btn btn-secondary">保存并发布</button>
                                             <button class="btn btn-danger">删除模板</button>
                                         </div>
@@ -345,6 +335,10 @@
     <script src="/lib/bootstrap/bootstrap.min.js"></script>
     <script src="/web/maintain/report/js/global.js"></script>
     <script src="/web/maintain/report/js/rpt_tpl_main.js"></script>
+    <script src="/web/maintain/report/js/rpt_tpl_band.js"></script>
+    <script src="/web/maintain/report/js/rpt_tpl_field_map.js"></script>
+    <script src="/web/maintain/report/js/rpt_tpl_field_cfg.js"></script>
+    <script src="/web/maintain/report/js/rpt_tpl_calculation.js"></script>
     <script src="/web/maintain/report/js/rpt_tpl_helper.js"></script>
     <script src="/web/maintain/report/js/cfg_const.js"></script>
     <script src="/web/maintain/report/js/rpt_tpl_preview_util.js"></script>