前端报表设置

test/unit/reports/test_rpt_test_template.js

@@ -30,7 +30,8 @@ let demoPrjId = - 1;
 // let demoRptId = 275; //测试模板-流水式
 // let demoRptId = 337; //19表
 // let demoRptId = 361; //封1
-let demoRptId = 279; //表04
+// let demoRptId = 279; //表04
+let demoRptId = 261; //封3
 let pagesize = "A4";
 //288: 11-2表(新)
 //279: 04
@@ -81,7 +82,7 @@ test('测试 - 测试模板啦: ', function (t) {
                     let maxPages = printCom.totalPages;
                     let pageRst = printCom.outputAsSimpleJSONPageArray(rptTpl, tplData, 1, maxPages, defProperties);
                     if (pageRst) {
-                        // fsUtil.writeObjToFile(pageRst, "D:/GitHome/ConstructionCost/tmp/testBuiltPageResult_测试模板.jsp");
+                        fsUtil.writeObjToFile(pageRst, "D:/GitHome/ConstructionCost/tmp/testBuiltPageResult_测试模板.jsp");
                     } else {
                         console.log("oh! no pages were created!");
                     }

web/building_saas/report/html/rpt_content_format.html

@@ -8,87 +8,7 @@
                 </button>
             </div>
             <div class="modal-body">
-                <div class="row mb-1">
-                    <div class="col-3">
-                        表标题
-                    </div>
-                    <div class="col-3">
-                        <input class="form-control input-sm" id="fontName_title" value="宋体" onchange="rptControlObj.changeFontMain('表标题', 'Name', this)" onkeyup="rptControlObj.changeFontMain('表标题', 'Name', this)">
-                    </div>
-                    <div class="col-3">
-                        <input class="form-control input-sm" id="fontHeight_title" type="number" value="30" step="1" min="6" max="66" onchange="rptControlObj.changeFontMain('表标题', 'FontHeight', this)" onkeyup="rptControlObj.changeFontMain('表标题', 'FontHeight', this)">
-                    </div>
-                    <div class="col-3">
-                        <a id="font_bold_title" class="btn btn-sm btn-outline-secondary" title="加粗" onclick="rptControlObj.changeFontAdhoc('表标题', 'FontBold', this)"><i class="fa fa-bold"></i></a>
-                        <a id="font_italic_title" class="btn btn-sm btn-outline-secondary" title="斜体" onclick="rptControlObj.changeFontAdhoc('表标题', 'FontItalic', this)"><i class="fa fa-italic"></i></a>
-                        <a id="font_underline_title" class="btn btn-sm btn-outline-secondary" title="下划线" onclick="rptControlObj.changeFontAdhoc('表标题', 'FontUnderline', this)"><i class="fa fa-underline"></i></a>
-                    </div>
-                </div>
-                <div class="row mb-1">
-                    <div class="col-3">
-                        表栏
-                    </div>
-                    <div class="col-3">
-                        <input class="form-control input-sm" id="fontName_column" value="宋体" onchange="rptControlObj.changeFontMain('列标题', 'Name', this)" onkeyup="rptControlObj.changeFontMain('列标题', 'Name', this)">
-                    </div>
-                    <div class="col-3">
-                        <input class="form-control input-sm" id="fontHeight_column" type="number" value="10" step="1" min="6" max="66" onchange="rptControlObj.changeFontMain('列标题', 'FontHeight', this)" onkeyup="rptControlObj.changeFontMain('列标题', 'FontHeight', this)">
-                    </div>
-                    <div class="col-3">
-                        <a id="font_bold_column" class="btn btn-sm btn-outline-secondary active" title="加粗" onclick="rptControlObj.changeFontAdhoc('列标题', 'FontBold', this)"><i class="fa fa-bold"></i></a>
-                        <a id="font_italic_column" class="btn btn-sm btn-outline-secondary" title="斜体" onclick="rptControlObj.changeFontAdhoc('列标题', 'FontItalic', this)"><i class="fa fa-italic"></i></a>
-                        <a id="font_underline_column" class="btn btn-sm btn-outline-secondary" title="下划线" onclick="rptControlObj.changeFontAdhoc('列标题', 'FontUnderline', this)"><i class="fa fa-underline"></i></a>
-                    </div>
-                </div>
-                <div class="row mb-1">
-                    <div class="col-3">
-                        表正文
-                    </div>
-                    <div class="col-3">
-                        <input class="form-control input-sm" id="fontName_content" value="宋体" onchange="rptControlObj.changeFontMain('正文内容', 'Name', this)" onkeyup="rptControlObj.changeFontMain('正文内容', 'Name', this)">
-                    </div>
-                    <div class="col-3">
-                        <input class="form-control input-sm" id="fontHeight_content" type="number" value="10" step="1" min="6" max="66" onchange="rptControlObj.changeFontMain('正文内容', 'FontHeight', this)" onkeyup="rptControlObj.changeFontMain('正文内容', 'FontHeight', this)">
-                    </div>
-                    <div class="col-3">
-                        <a id="font_bold_content" class="btn btn-sm btn-outline-secondary" title="加粗" onclick="rptControlObj.changeFontAdhoc('正文内容', 'FontBold', this)"><i class="fa fa-bold"></i></a>
-                        <a id="font_italic_content" class="btn btn-sm btn-outline-secondary active" title="斜体" onclick="rptControlObj.changeFontAdhoc('正文内容', 'FontItalic', this)"><i class="fa fa-italic"></i></a>
-                        <a id="font_underline_content" class="btn btn-sm btn-outline-secondary" title="下划线" onclick="rptControlObj.changeFontAdhoc('正文内容', 'FontUnderline', this)"><i class="fa fa-underline"></i></a>
-                    </div>
-                </div>
-                <div class="row mb-1">
-                    <div class="col-3">
-                        表合计
-                    </div>
-                    <div class="col-3">
-                        <input class="form-control input-sm" id="fontName_summary" value="宋体" onchange="rptControlObj.changeFontMain('合计', 'Name', this)" onkeyup="rptControlObj.changeFontMain('合计', 'Name', this)">
-                    </div>
-                    <div class="col-3">
-                        <input class="form-control input-sm" id="fontHeight_summary" type="number" value="10" step="1" min="6" max="66" onchange="rptControlObj.changeFontMain('合计', 'FontHeight', this)" onkeyup="rptControlObj.changeFontMain('合计', 'FontHeight', this)">
-                    </div>
-                    <div class="col-3">
-                        <a id="font_bold_summary" class="btn btn-sm btn-outline-secondary" title="加粗" onclick="rptControlObj.changeFontAdhoc('合计', 'FontBold', this)"><i class="fa fa-bold"></i></a>
-                        <a id="font_italic_summary" class="btn btn-sm btn-outline-secondary" title="斜体" onclick="rptControlObj.changeFontAdhoc('合计', 'FontItalic', this)"><i class="fa fa-italic"></i></a>
-                        <a id="font_underline_summary" class="btn btn-sm btn-outline-secondary active" title="下划线" onclick="rptControlObj.changeFontAdhoc('合计', 'FontUnderline', this)"><i class="fa fa-underline"></i></a>
-                    </div>
-                </div>
-                <div class="row mb-1">
-                    <div class="col-3">
-                        表眉表脚
-                    </div>
-                    <div class="col-3">
-                        <input class="form-control input-sm" id="fontName_header_footer" value="宋体" onchange="rptControlObj.changeFontMain('表眉/表脚', 'Name', this)" onkeyup="rptControlObj.changeFontMain('表眉/表脚', 'Name', this)">
-                    </div>
-                    <div class="col-3">
-                        <input class="form-control input-sm" id="fontHeight_header_footer" type="number" value="10" step="1" min="6" max="66" onchange="rptControlObj.changeFontMain('表眉/表脚', 'FontHeight', this)" onkeyup="rptControlObj.changeFontMain('表眉/表脚', 'FontHeight', this)">
-                    </div>
-                    <div class="col-3">
-                        <a id="font_bold_header_footer" class="btn btn-sm btn-outline-secondary" title="加粗" onclick="rptControlObj.changeFontAdhoc('表眉/表脚', 'FontBold', this)"><i class="fa fa-bold"></i></a>
-                        <a id="font_italic_header_footer" class="btn btn-sm btn-outline-secondary" title="斜体" onclick="rptControlObj.changeFontAdhoc('表眉/表脚', 'FontItalic', this)"><i class="fa fa-italic"></i></a>
-                        <a id="font_underline_header_footer" class="btn btn-sm btn-outline-secondary" title="下划线" onclick="rptControlObj.changeFontAdhoc('表眉/表脚', 'FontUnderline', this)"><i class="fa fa-underline"></i></a>
-                    </div>
-                </div>
-                <div class="row mb-1"></div>
+                <div class="row mb-1" id="font_cfg_blank_flag"></div>
                 <div class="row mb-1">
                     <div class="col-4">
                         <div class="form-check">

web/building_saas/report/js/rpt_main.js

@@ -8,6 +8,8 @@ const NEXT_PAGE_OFFSET = 160;
 const FIRST_PAGE_OFFSET = 50;
 const LAST_PAGE_OFFSET = 60;
 
+let fontSuffixMapObj = {"表标题": "title", "列标题": "column", "正文内容": "content", "合计": "summary", "表眉/表脚": "header_footer"};
+
 let rptTplObj = {
     hasInitialized: false,
     iniPage: function() {
@@ -93,6 +95,7 @@ let zTreeOprObj = {
                 if (result) {
                     me.defReportPageCfg = result[0];
                     me.reportPageCfg = result[1];
+                    me.iniFontCfgDom(me.reportPageCfg);
                     me.renderRptCfg(result[1]);
                 } else {
                     me.reportPageCfg = null;
@@ -101,25 +104,45 @@ let zTreeOprObj = {
             }, null, null
         );
     },
+    iniFontCfgDom: function (cfg) {
+        for (let font of cfg.fonts) {
+            let domArrs = [];
+            let fontPropSuffix = fontSuffixMapObj[font.CfgDispName];
+            domArrs.push("<div class='row mb-1'>");
+            //1. label
+            domArrs.push("<div class='col-3'>" + font.CfgDispName + "</div>");
+            //2. font name
+            domArrs.push("<div class='col-3'>");
+            domArrs.push("<select class='form-control input-sm' id='fontName_" + fontPropSuffix + "' onchange='rptControlObj.changeFontMain(\"" + font.CfgDispName + "\", \"Name\", this)'>");
+            domArrs.push("<option>宋体</option><option>楷体</option><option>黑体</option><option>Arial</option>");
+            domArrs.push("</select>");
+            domArrs.push("</div>");
+            //3. font height
+            domArrs.push("<div class='col-3'>");
+            domArrs.push("<input class='form-control input-sm' id='fontHeight_" + fontPropSuffix + "' type='number' value='30' step='1' min='6' max='66' " +
+                "onchange='rptControlObj.changeFontMain(\"" + font.CfgDispName + "\", \"FontHeight\", this)' " +
+                "onkeyup='rptControlObj.changeFontMain(\"" + font.CfgDispName + "\", \"FontHeight\", this)'>");
+            domArrs.push("</div>");
+            //4. font bold italic underline
+            domArrs.push("<div class='col-3'>");
+            domArrs.push("<a id='font_bold_" + fontPropSuffix + "' class='btn btn-sm btn-outline-secondary' title='加粗' onclick='rptControlObj.changeFontAdhoc(\"" + font.CfgDispName + "\", \"FontBold\", this)'><i class='fa fa-bold'></i></a>");
+            domArrs.push("<a id='font_italic_" + fontPropSuffix + "' class='btn btn-sm btn-outline-secondary' title='斜体' onclick='rptControlObj.changeFontAdhoc(\"" + font.CfgDispName + "\", \"FontItalic\", this)'><i class='fa fa-italic'></i></a>");
+            domArrs.push("<a id='font_underline_" + fontPropSuffix + "' class='btn btn-sm btn-outline-secondary' title='下划线' onclick='rptControlObj.changeFontAdhoc(\"" + font.CfgDispName + "\", \"FontUnderline\", this)'><i class='fa fa-underline'></i></a>");
+            domArrs.push("</div>");
+            //
+            domArrs.push("</div>");
+            $(domArrs.join("")).insertBefore($("#font_cfg_blank_flag"));
+        }
+    },
     renderRptCfg: function (cfg) {
         $("#elementMargin_Left").get(0).value = cfg.margins.Left;
         $("#elementMargin_Right").get(0).value = cfg.margins.Right;
         $("#elementMargin_Top").get(0).value = cfg.margins.Top;
         $("#elementMargin_Bottom").get(0).value = cfg.margins.Bottom;
 
+        let fontSuffixMapObj = {"表标题": "title", "列标题": "column", "正文内容": "content", "合计": "summary", "表眉/表脚": "header_footer"};
         for (let font of cfg.fonts) {
-            let fontPropSuffix = "title";
-            if (font.CfgDispName === "表标题") {
-                fontPropSuffix = "title";
-            } else if (font.CfgDispName === "列标题") {
-                fontPropSuffix = "column";
-            } else if (font.CfgDispName === "正文内容") {
-                fontPropSuffix = "content";
-            } else if (font.CfgDispName === "合计") {
-                fontPropSuffix = "summary";
-            } else if (font.CfgDispName === "表眉/表脚") {
-                fontPropSuffix = "header_footer";
-            }
+            let fontPropSuffix = fontSuffixMapObj[font.CfgDispName];
             document.getElementById("fontName_" + fontPropSuffix).value = font.Name;
             document.getElementById("fontHeight_" + fontPropSuffix).value = font.FontHeight;
             document.getElementById("font_bold_" + fontPropSuffix).className = (font.FontBold === "T")?"btn btn-sm btn-outline-secondary active":"btn btn-sm btn-outline-secondary";
@@ -136,19 +159,9 @@ let zTreeOprObj = {
         cfg.margins.Top = $("#elementMargin_Top").get(0).value;
         cfg.margins.Bottom = $("#elementMargin_Bottom").get(0).value;
 
+        let fontSuffixMapObj = {"表标题": "title", "列标题": "column", "正文内容": "content", "合计": "summary", "表眉/表脚": "header_footer"};
         for (let font of cfg.fonts) {
-            let fontPropSuffix = "title";
-            if (font.CfgDispName === "表标题") {
-                fontPropSuffix = "title";
-            } else if (font.CfgDispName === "列标题") {
-                fontPropSuffix = "column";
-            } else if (font.CfgDispName === "正文内容") {
-                fontPropSuffix = "content";
-            } else if (font.CfgDispName === "合计") {
-                fontPropSuffix = "summary";
-            } else if (font.CfgDispName === "表眉/表脚") {
-                fontPropSuffix = "header_footer";
-            }
+            let fontPropSuffix = fontSuffixMapObj[font.CfgDispName];
             font.Name = document.getElementById("fontName_" + fontPropSuffix).value;
             font.FontHeight = document.getElementById("fontHeight_" + fontPropSuffix).value;
             font.FontBold = (document.getElementById("font_bold_" + fontPropSuffix).className === "btn btn-sm btn-outline-secondary active")?"T":"F";