report template set up (font/border/control)

public/web/rpt_value_define.js

@@ -213,8 +213,8 @@ const JV = {
     LAYOUT_FULFILL: 4,
 
     OUTPUT_ALIGN: {
-        H: ["Left", "Center", "Right"],
-        V: ["Top", "Center", "Bottom"]
+        H: ["left", "center", "right"],
+        V: ["top", "center", "bottom"]
     },
 
     CAL_TYPE:["percentage","abstract"],

web/maintain/report/js/rpt_tpl_cfg_helper.js

@@ -27,9 +27,11 @@ let rpt_tpl_cfg_helper = {
                     me.reportCfg.fontArr.push(font.ID);
                     $("#elementFonts").append("<option value='" + font.ID + "'>" + font.CfgDispName + "</option>");
                 } else {
-                    me.reportCfg.fontArr.push("dummy font");
+                    // me.reportCfg.fontArr.push("dummy font");
                 }
             }
+            me.reportCfg.fontArr.push('自定义');
+            $("#elementFonts").append("<option value='自定义'>自定义</option>");
             me.reportCfg.controlArr = [];
             for (let control of me.reportCfg.ctrls) {
                 if (control.CfgDispName) {
@@ -40,7 +42,6 @@ let rpt_tpl_cfg_helper = {
                 }
             }
         }
-        //elementFonts
         let pf = $("#pageFrequency");
         pf.append("<option value='" + JV.PAGE_STATUS[0] + "'>每页</option>");
         pf.append("<option value='" + JV.PAGE_STATUS[1] + "'>首页</option>");
@@ -56,26 +57,148 @@ let rpt_tpl_cfg_helper = {
         ba.append("<option value='" + JV.LAYOUT[2] + "'>左</option>");
         ba.append("<option value='" + JV.LAYOUT[3] + "'>右</option>");
         ba.append("<option value='" + JV.LAYOUT[4] + "'>填充</option>");
+        let ha = $("#elementAlignmentHorizon");
+        ha.append("<option value='" + JV.OUTPUT_ALIGN.H[0] + "'>左</option>");
+        ha.append("<option value='" + JV.OUTPUT_ALIGN.H[1] + "'>中</option>");
+        ha.append("<option value='" + JV.OUTPUT_ALIGN.H[2] + "'>右</option>");
+        let va = $("#elementAlignmentVertical");
+        va.append("<option value='" + JV.OUTPUT_ALIGN.V[0] + "'>上</option>");
+        va.append("<option value='" + JV.OUTPUT_ALIGN.V[1] + "'>中</option>");
+        va.append("<option value='" + JV.OUTPUT_ALIGN.V[2] + "'>下</option>");
     },
     checkAndSetSelectedNodeCfg: function (treeNode) {
+        let me = rpt_tpl_cfg_helper;
         if (treeNode[JV.PROP_AREA]) {
             $("#element_font")[0].style.display = "";
             $("#element_border")[0].style.display = "";
             $("#element_control")[0].style.display = "";
+            //setup font
+            let fontDom = $("#elementFonts").get(0);
+            fontDom.removeAttribute("disabled")
+            let fontAttr = treeNode[JV.PROP_FONT];
+            if (typeof treeNode[JV.PROP_FONT] !== "string") {
+                fontAttr = "自定义";
+            }
+            let idx = me.reportCfg.fontArr.indexOf(fontAttr);
+            fontDom.selectedIndex = idx;
+            me.fontChange(fontDom);
+            //setup border
+            let borderDom = $("#elementBorders").get(0);
+            let borderAttr = treeNode[JV.PROP_STYLE];
+            idx = me.reportCfg.borderArr.indexOf(borderAttr);
+            borderDom.selectedIndex = idx;
+            me.borderChange(borderDom);
+            //setup control
+            let ctrlDom = $("#elementControls").get(0);
+            let ctrlAttr = treeNode[JV.PROP_CONTROL];
+            idx = me.reportCfg.controlArr.indexOf(ctrlAttr);
+            ctrlDom.selectedIndex = idx;
+            me.controlChange(ctrlDom);
         } else {
+            $("#elementFonts").get(0).disabled = "disabled" ;
             $("#element_font")[0].style.display = "none";
             $("#element_border")[0].style.display = "none";
             $("#element_control")[0].style.display = "none";
         }
     },
     fontChange: function(dom) {
-        //
+        let me = rpt_tpl_cfg_helper, fontAttr = dom.value;
+        //dataInfoMapTreeOprObj.currentNode
+        if (fontAttr === "自定义") {
+            fontAttr = dataInfoMapTreeOprObj.currentNode[JV.PROP_FONT];
+            if (typeof fontAttr === "string") {
+                fontAttr = {};
+                fontAttr[JV.FONT_PROPS[0]] = "宋体";
+                fontAttr[JV.FONT_PROPS[1]] = 12;
+                fontAttr[JV.FONT_PROPS[2]] = "BLACK";
+                fontAttr[JV.FONT_PROPS[3]] = "F"; //bold
+                fontAttr[JV.FONT_PROPS[4]] = "F"; //italic
+                fontAttr[JV.FONT_PROPS[5]] = "F"; //underline
+                fontAttr[JV.FONT_PROPS[6]] = "F"; //strikeout
+                fontAttr[JV.FONT_PROPS[7]] = 0;   //angle
+                dataInfoMapTreeOprObj.currentNode[JV.PROP_FONT] = fontAttr;
+            }
+        } else {
+            dataInfoMapTreeOprObj.currentNode[JV.PROP_FONT] = fontAttr;
+        }
+        me.private_setup_font(fontAttr);
+    },
+    private_setup_font: function(fontAttr) {
+        let me = rpt_tpl_cfg_helper;
+        if (typeof fontAttr === "string" && fontAttr !== "自定义") {
+            $("#eleFontName").get(0).disabled = "disabled" ;
+            $("#eleFontSize").get(0).disabled = "disabled" ;
+            $("#eleFontBold").get(0).disabled = "disabled" ;
+            $("#eleFontItalic").get(0).disabled = "disabled" ;
+            $("#eleFontUnderline").get(0).disabled = "disabled" ;
+            let idx = me.reportCfg.fontArr.indexOf(fontAttr);
+            $("#elementFonts").get(0).selectedIndex = idx;
+            let font = me.reportCfg.fonts[idx];
+            $("#eleFontName").get(0).value = font.Name;
+            $("#eleFontSize").get(0).value = parseInt(font.FontHeight);
+            $("#eleFontBold").get(0).checked = stringUtil.convertStrToBoolean(font.FontBold);
+            $("#eleFontItalic").get(0).checked = stringUtil.convertStrToBoolean(font.FontItalic);
+            $("#eleFontUnderline").get(0).checked = stringUtil.convertStrToBoolean(font.FontUnderline);
+        } else {
+            //$("#elementFonts").get(0).selectedIndex = idx;
+            $("#eleFontName").get(0).removeAttribute("disabled");
+            $("#eleFontSize").get(0).removeAttribute("disabled");
+            $("#eleFontBold").get(0).removeAttribute("disabled");
+            $("#eleFontItalic").get(0).removeAttribute("disabled");
+            $("#eleFontUnderline").get(0).removeAttribute("disabled");
+            $("#eleFontName").get(0).value = fontAttr.Name;
+            $("#eleFontSize").get(0).value = parseInt(fontAttr.FontHeight);
+            $("#eleFontBold").get(0).checked = stringUtil.convertStrToBoolean(fontAttr.FontBold);
+            $("#eleFontItalic").get(0).checked = stringUtil.convertStrToBoolean(fontAttr.FontItalic);
+            $("#eleFontUnderline").get(0).checked = stringUtil.convertStrToBoolean(fontAttr.FontUnderline);
+        }
+    },
+    fontNameChange: function(dom){
+        let font = dataInfoMapTreeOprObj.currentNode[JV.PROP_FONT];
+        font[JV.FONT_PROPS[0]] = dom.value;
+    },
+    fontSizeChange: function(dom) {
+        let font = dataInfoMapTreeOprObj.currentNode[JV.PROP_FONT];
+        font[JV.FONT_PROPS[1]] = dom.value;
+    },
+    fontBoldChange: function(dom) {
+        let font = dataInfoMapTreeOprObj.currentNode[JV.PROP_FONT];
+        font[JV.FONT_PROPS[3]] = dom.checked?'T':'F';
+    },
+    fontItalicChange: function(dom) {
+        let font = dataInfoMapTreeOprObj.currentNode[JV.PROP_FONT];
+        font[JV.FONT_PROPS[4]] = dom.checked?'T':'F';
+    },
+    fontUnderlineChange: function(dom) {
+        let font = dataInfoMapTreeOprObj.currentNode[JV.PROP_FONT];
+        font[JV.FONT_PROPS[5]] = dom.checked?'T':'F';
     },
     borderChange: function(dom) {
-        //
+        if (dataInfoMapTreeOprObj.currentNode) {
+            let me = this, borderAttr = dom.value;
+            let idx = me.reportCfg.borderArr.indexOf(borderAttr);
+            let border = me.reportCfg.styles[idx];
+            dataInfoMapTreeOprObj.currentNode[JV.PROP_STYLE] = borderAttr;
+
+            $("#eleBorderLeft").get(0).value = border[JV.PROP_BORDER_STYLE][JV.IDX_LEFT][JV.PROP_LINE_WEIGHT];
+            $("#eleBorderRight").get(0).value = border[JV.PROP_BORDER_STYLE][JV.IDX_RIGHT][JV.PROP_LINE_WEIGHT];
+            $("#eleBorderTop").get(0).value = border[JV.PROP_BORDER_STYLE][JV.IDX_TOP][JV.PROP_LINE_WEIGHT];
+            $("#eleBorderBottom").get(0).value = border[JV.PROP_BORDER_STYLE][JV.IDX_BOTTOM][JV.PROP_LINE_WEIGHT];
+        }
     },
     controlChange: function(dom) {
-        //
+        if (dataInfoMapTreeOprObj.currentNode) {
+            let me = this, ctrlAttr = dom.value;
+            let idx = me.reportCfg.controlArr.indexOf(ctrlAttr);
+            let ctrl = me.reportCfg.ctrls[idx];
+            dataInfoMapTreeOprObj.currentNode[JV.PROP_CONTROL] = ctrlAttr;
+
+            $("#elementAlignmentHorizon").get(0).selectedIndex = JV.OUTPUT_ALIGN.H.indexOf(ctrl[JV.CONTROL_PROPS[2]]);
+            $("#elementAlignmentVertical").get(0).selectedIndex = JV.OUTPUT_ALIGN.V.indexOf(ctrl[JV.CONTROL_PROPS[3]]);
+            $("#eleShrink").get(0).checked = stringUtil.convertStrToBoolean(ctrl[JV.CONTROL_PROPS[0]]);
+            $("#eleShowZero").get(0).checked = stringUtil.convertStrToBoolean(ctrl[JV.CONTROL_PROPS[1]]);
+            $("#eleAutoWrap").get(0).checked = stringUtil.convertStrToBoolean(ctrl[JV.CONTROL_PROPS[4]]);
+        }
     },
     changeAlignment: function(dom, type) {
         if (type === "horizon") {

web/maintain/report/rpt_tpl_detail.html

@@ -179,29 +179,29 @@
                         <div class="row" id="element_font">
                             <div class="form-group col-md-3">
                                 <label>字体选择</label>
-                                <select class="form-control" id="elementFonts" onchange="rpt_tpl_cfg_helper.fontChange(this)"></select>
+                                <select class="form-control" id="elementFonts" onchange="rpt_tpl_cfg_helper.fontChange(this)" disabled></select>
                             </div>
-                            <div class="form-group col-md-2">
+                            <div class="form-group col-md-3">
                                 <label>字体名称</label>
-                                <input class="form-control" id="eleFontName" value="" disabled>
+                                <input class="form-control" id="eleFontName" value="" onchange="rpt_tpl_cfg_helper.fontNameChange(this)" disabled>
                             </div>
                             <div class="form-group col-md-2">
                                 <label>字体大小</label>
-                                <input class="form-control input-sm" id="eleFontSize" type="number" value="12" step="1" min="6" max="56" disabled>
+                                <input class="form-control input-sm" id="eleFontSize" type="number" value="12" step="1" min="6" max="56" onchange="rpt_tpl_cfg_helper.fontSizeChange(this)" disabled>
                             </div>
-                            <div class="form-group col-md-5">
+                            <div class="form-group col-md-4">
                                 <label></label>
                                 <div class="form-check">
                                     <label class="form-check-label">
-                                        <input type="checkbox" class="form-check-input" id="eleFontBold" onchange="" disabled>
+                                        <input type="checkbox" class="form-check-input" id="eleFontBold" onchange="rpt_tpl_cfg_helper.fontBoldChange(this)" disabled>
                                         粗体
                                     </label>&nbsp&nbsp
                                     <label class="form-check-label">
-                                        <input type="checkbox" class="form-check-input" id="eleFontItalic" onchange="" disabled>
+                                        <input type="checkbox" class="form-check-input" id="eleFontItalic" onchange="rpt_tpl_cfg_helper.fontItalicChange(this)" disabled>
                                         斜体
                                     </label>&nbsp&nbsp
                                     <label class="form-check-label">
-                                        <input type="checkbox" class="form-check-input" id="eleFontUnderline" onchange="" disabled>
+                                        <input type="checkbox" class="form-check-input" id="eleFontUnderline" onchange="rpt_tpl_cfg_helper.fontUnderlineChange(this)" disabled>
                                         下划线
                                     </label>
                                 </div>
@@ -214,19 +214,19 @@
                             </div>
                             <div class="form-group col-md-2">
                                 <label>左边</label>
-                                <input class="form-control input-sm" id="eleBorderLeft" type="number" value="1" step="1" min="0" max="3" disabled>
+                                <input class="form-control input-sm" id="eleBorderLeft" type="number" value="0" step="1" min="0" max="3" disabled>
                             </div>
                             <div class="form-group col-md-2">
                                 <label>右边</label>
-                                <input class="form-control input-sm" id="eleBorderRight" type="number" value="1" step="1" min="0" max="3" disabled>
+                                <input class="form-control input-sm" id="eleBorderRight" type="number" value="0" step="1" min="0" max="3" disabled>
                             </div>
                             <div class="form-group col-md-2">
                                 <label>上边</label>
-                                <input class="form-control input-sm" id="eleBorderTop" type="number" value="1" step="1" min="0" max="3" disabled>
+                                <input class="form-control input-sm" id="eleBorderTop" type="number" value="0" step="1" min="0" max="3" disabled>
                             </div>
                             <div class="form-group col-md-2">
                                 <label>下边</label>
-                                <input class="form-control input-sm" id="eleBorderBottom" type="number" value="1" step="1" min="0" max="3" disabled>
+                                <input class="form-control input-sm" id="eleBorderBottom" type="number" value="0" step="1" min="0" max="3" disabled>
                             </div>
                         </div>
                         <div class="row" id="element_control">