report, both FE/BE

modules/reports/controllers/rpt_tpl_controller.js

@@ -20,7 +20,7 @@ module.exports = {
             grpType = params.grpType,
             userId = params.userId,
             tplType = params.tplType;
-        var filter = {"grpType": grpType, "$or": [{"isDeleted": null}, {"isDeleted": false} ]};
+        let filter = {"grpType": grpType, "$or": [{"isDeleted": null}, {"isDeleted": false} ]};
         if (userId) {
             filter.userId = userId;
         }
@@ -36,7 +36,7 @@ module.exports = {
     updateTreeNodes: function(req, res) {
         let params = JSON.parse(req.body.params),
             nodes = params.nodes;
-        var functions = [];
+        let functions = [];
         for (let node of nodes) {
             functions.push((function(doc) {
                 return function(cb) {
@@ -53,8 +53,8 @@ module.exports = {
             nodeIds = params.nodeIds,
             preNodeId = params.preNodeId,
             preNodeNextId = params.preNodeNextId;
-        var functions = [];
-        if (preNodeId != -1) {
+        let functions = [];
+        if (preNodeId !== -1) {
             functions.push((function(nodeId, nextId) {
                 return function(cb) {
                     TreeNodeModel.update({ID: nodeId}, {"NextSiblingID": nextId}, cb);
@@ -78,7 +78,7 @@ module.exports = {
             nodeData = params.rawNodeData;
         counter.counterDAO.getIDAfterCount(counter.moduleName.report, 1, function(err, result){
             nodeData.ID = result.value.sequence_value;
-            var node = new TreeNodeModel(nodeData);
+            let node = new TreeNodeModel(nodeData);
             node.save(function (err, result) {
                 if (err) {
                     callback(req,res, "树节点错误！", "", null);

modules/reports/util/rpt_util.js

@@ -23,5 +23,31 @@ module.exports = {
         rst.styles = admin_cfg.borders;
         admin_cfg = null;
         return rst;
+    },
+    setReportCacheByUser: function (userId) {
+        let me = this;
+        Rpt_Cfg_Mdl.find({userId: userId}, '-_id', function(err, templates){
+            if(templates.length){
+                cache.setCache(RPT_CFG_GRP, userId + '_cfg',templates[0]);
+            } else {
+                me.setReportDefaultCache();
+            }
+        })
+    },
+    getReportCacheByUser: function (userId) {
+        let me = this,
+            rst = {ctrls: null, fonts: null, styles: null},
+            user_cfg = cache.getCache(RPT_CFG_GRP,userId + '_cfg');
+        ;
+        if (!(user_cfg)) {
+            rst = null;
+            rst = me.getReportDefaultCache();
+        } else {
+            rst.ctrls = user_cfg.formats;
+            rst.fonts = user_cfg.fonts;
+            rst.styles = user_cfg.borders;
+            user_cfg = null;
+        }
+        return rst;
     }
 }

web/maintain/report/css/main.css

@@ -213,6 +213,7 @@ body {
     }
 }
 .bottom-content {
+    height: 370px;
     overflow: hidden;
 }
 .bottom-content .tab-content .main-data-bottom{
@@ -269,10 +270,22 @@ body {
     max-height: 200px;
     overflow:auto;
 }
-.main-data-bottom,.main-data{
-    overflow: auto;
+.main-data-top,.main-data-bottom,.main-data,.main-data-h{
+  overflow: auto;
 }
-.main-data-top{
-    max-height: 300px;
-    overflow:auto;
+.modal-fixed-height {
+    height:400px;
+    overflow-y:auto;
+}
+.form-view {
+    border-left:1px solid #ccc;
+}
+.ztree-warp {
+  height:200px;
+  overflow: auto;
+}
+.sub-button{
+  position:sticky;
+  bottom:0;
+  left:0
 }

web/maintain/report/js/global.js

@@ -5,12 +5,8 @@ function autoFlashHeight(){
     var toolsBar = $(".tools-bar").height();
     $(".content").height($(window).height()-headerHeight);
     $(".main-side").height($(window).height()-headerHeight-2);
-    $(".fluid-content").height($(window).height()-headerHeight-1);
-    $(".side-content").height($(window).height()-headerHeight );
-    $(".poj-list").height($(window).height()-headerHeight);
-    $(".form-list").height($(window).height()-headerHeight-50 );
-    $(".main-data-top").height($(window).height()-headerHeight-toolsBar-bottomContentHeight-2);
-    $(".main-data").height($(window).height()-headerHeight);
+    $(".main-data").height($(window).height()-headerHeight-toolsBar-1);
+    $(".main-data-h").height($(window).height()-headerHeight-1);
 };
 $(window).resize(autoFlashHeight);
 /*全局自适应高度结束*/

web/maintain/report/rpt_tpl_main.html

@@ -52,63 +52,244 @@
                         <ul id="rptTplTree" class="ztree"></ul>
                     </div>
                 </div>
-                <div class="main-content col-lg-10 p-0">
+                <div class="main-content col-lg-9 p-0">
                     <div class="container-fluid">
                         <div class="row">
-                            <div class="main-side col-lg-5 p-0">
+                            <!-- 报表设置 -->
+                            <div class="col-lg-4 p-0">
                                 <div class="main-data-top">
-                                    <!-- 右标签 -->
                                     <ul class="nav nav-tabs tools-bar" role="tablist">
                                         <li class="nav-item">
-                                            <a class="nav-link active" data-toggle="tab" href="#rpttplinfo" role="tab">模板信息</a>
+                                            <a class="nav-link p-1 active" data-toggle="tab" href="#rpttplinfo" role="tab">模板信息</a>
                                         </li>
                                         <li class="nav-item">
-                                            <a class="nav-link" data-toggle="tab" href="#rpttpllayout" role="tab">模板布局</a>
+                                            <a class="nav-link p-1" data-toggle="tab" href="#rpttpllayout" role="tab">模板布局</a>
                                         </li>
                                         <li class="nav-item">
-                                            <a class="nav-link" data-toggle="tab" href="#rpttplfieldmap" role="tab">指标映射</a>
+                                            <a class="nav-link p-1" data-toggle="tab" href="#rpttplfieldmap" role="tab">指标映射</a>
                                         </li>
                                         <li class="nav-item">
-                                            <a class="nav-link" data-toggle="tab" href="#rpttplformula" role="tab">计算式</a>
+                                            <a class="nav-link p-1" data-toggle="tab" href="#rpttplfieldlocation" role="tab">指标摆放</a>
+                                        </li>
+                                        <li class="nav-item">
+                                            <a class="nav-link p-1" data-toggle="tab" href="#rpttplformula" role="tab">计算式</a>
                                         </li>
                                     </ul>
                                     <div class="tab-content">
+                                        <!--模板信息-->
                                         <div class="tab-pane active" id="rpttplinfo" role="tabpanel">
-                                            <div class="container-fluid">
-                                                <label class="form-check-label"><input class="form-check-input" name="optionsRadios" value="option1" checked="" type="radio"> 流水式表</label>
-                                                <label class="form-check-label"><input class="form-check-input" name="optionsRadios" value="option1" type="radio"> 账单式表</label>
-                                                <label class="form-check-label"><input class="form-check-input" name="optionsRadios" value="option1" type="radio"> 交叉表</label>
-                                                <label class="form-check-label">  </label>
-                                                <a onclick="alert('You are going to confirm the report template type!')" class="btn btn-secondary btn-sm">确认</a>
+                                            <div class="main-data">
+                                                <div class="p-3">
+                                                    <div class="form-group">
+                                                        <label>报表名称</label>
+                                                        <input class="form-control" placeholder="输入报表名称">
+                                                    </div>
+                                                    <div class="form-group">
+                                                        <label>页面</label>
+                                                        <div class="row">
+                                                            <div class="input-group col-6">
+                                                                <div class="input-group-addon">纸张</div>
+                                                                <select class="form-control input-sm"><option>A3</option><option>A4</option></select>
+                                                            </div>
+                                                            <div class="input-group col-6">
+                                                                <div class="input-group-addon">方向</div>
+                                                                <select class="form-control input-sm"><option>横向</option><option>竖向</option></select>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="form-group row">
+                                                        <div class="input-group col-6">
+                                                            <div class="input-group-addon">单位</div>
+                                                            <select class="form-control input-sm"><option>CM</option></select>
+                                                        </div>
+                                                    </div>
+                                                    <div class="form-group">
+                                                        <label>显示调整</label>
+                                                        <div class="row">
+                                                            <div class="input-group col-6">
+                                                                <div class="input-group-addon">分栏</div>
+                                                                <select class="form-control input-sm"><option>1</option><option>2</option></select>
+                                                            </div>
+                                                            <div class="input-group col-6">
+                                                                <div class="input-group-addon">缩放</div>
+                                                                <input class="form-control input-sm" type="number" step="1">
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="form-group row">
+                                                        <div class="input-group col-6">
+                                                            <div class="input-group-addon">空行提上</div>
+                                                            <select class="form-control input-sm"><option>提上</option></select>
+                                                        </div>
+                                                        <div class="input-group col-6">
+                                                            <div class="input-group-addon">空行显示</div>
+                                                            <select class="form-control input-sm"><option>提上</option></select>
+                                                        </div>
+                                                    </div>
+                                                    <div class="form-group">
+                                                        <label>页边距</label>
+                                                        <div class="row">
+                                                            <div class="input-group col-6">
+                                                                <div class="input-group-addon">左</div>
+                                                                <input class="form-control input-sm" type="number" step="1">
+                                                            </div>
+                                                            <div class="input-group col-6">
+                                                                <div class="input-group-addon">右</div>
+                                                                <input class="form-control input-sm" type="number" step="1">
+                                                            </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" type="number" step="1">
+                                                        </div>
+                                                        <div class="input-group col-6">
+                                                            <div class="input-group-addon">下</div>
+                                                            <input class="form-control input-sm" type="number" step="1">
+                                                        </div>
+                                                    </div>
+                                                </div>
                                             </div>
-                                            <div class="container-fluid">
-                                                <div class="input-group">
-                                                    <div class="row">
-                                                        <div class="input-group-addon">报表名称</div>
-                                                        <input type="text" class="form-control" placeholder="报表名称">
+                                        </div>
+                                        <!--模板布局-->
+                                        <div class="tab-pane" id="rpttpllayout" role="tabpanel">
+                                            <div class="main-data">
+                                                <div class="p-3">
+                                                    <div class="ztree-warp">
+                                                        ztree 保留空间
+                                                    </div>
+                                                    <div class="form-group">
+                                                        <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"><option> </option></select>
+                                                    </div>
+                                                    <div class="form-group">
+                                                        <label>高度</label>
+                                                        <div class=" form-inline">
+                                                            <input class="form-control mr-2" disabled>
+                                                            <div class="form-check">
+                                                                <label class="form-check-label">
+                                                                    <input class="form-check-input" type="checkbox" checked> 自动填充
+                                                                </label>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="form-group">
+                                                        <label>宽度</label>
+                                                        <div class=" form-inline">
+                                                            <input class="form-control mr-2" placeholder="">
+                                                            <div class="form-check">
+                                                                <label class="form-check-label">
+                                                                    <input class="form-check-input" type="checkbox"> 自动填充
+                                                                </label>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="form-group">
+                                                        <label>出现频率</label>
+                                                        <select class="form-control"><option>每页</option><option>首页</option><option>尾页</option><option>章首页</option><option>章尾页</option><option>分组</option><option>交叉行尾页</option><option>交叉列尾页</option></select>
+                                                    </div>
+                                                    <div class="form-group">
+                                                        <label>位置</label>
+                                                        <select class="form-control"><option>上</option><option>下</option><option>左</option><option>右</option><option>填充</option></select>
+                                                    </div>
+                                                    <div class="form-group">
+                                                        <label>边框合并</label>
+                                                        <div class="form-check">
+                                                            <label class="form-check-label">
+                                                                <input type="checkbox" class="form-check-input">
+                                                                合并
+                                                            </label>
+                                                        </div>
                                                     </div>
                                                 </div>
-                                                <div class="input-group">
+                                            </div>
+                                        </div>
+                                        <!--指标映射-->
+                                        <div class="tab-pane" id="rpttplfieldmap" role="tabpanel">
+                                            <div class="main-data">
+                                                <div class="p-3">
+                                                    <div class="ztree-warp">
+                                                        ztree 保留空间
+                                                    </div>
                                                     <div class="row">
-                                                        <div class="input-group-addon">度量单位</div>
-                                                        <select class="form-control input-sm">
-                                                            <option>厘米</option>
-                                                            <option>英寸</option>
-                                                            <option>像素</option>
-                                                        </select>
+                                                        <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>
+                                                        </div>
+                                                    </div>
+                                                    <div class="form-group">
+                                                        <label>映射指标</label>
+                                                        <div class="input-group">
+                                                            <div class="input-group-addon">类型</div>
+                                                            <select class="form-control input-sm"><option>离散</option><option>主数据</option><option>从数据</option></select>
+                                                        </div>
+                                                    </div>
+                                                    <div class="form-group">
+                                                        <select class="form-control" size="5"></select>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <!--指标摆放-->
+                                        <div class="tab-pane" id="rpttplfieldlocation" role="tabpanel">
+                                            <div class="main-data">
+                                                <div class="p-3">
+                                                    <div class="ztree-warp">
+                                                        ztree 保留空间
+                                                    </div>
+                                                    <div class="form-group">
+                                                        <label>所属Band</label>
+                                                        <select class="form-control"><option> </option></select>
+                                                    </div>
+                                                    <div class="form-group">
+                                                        <label>显示行高度</label>
+                                                        <select class="form-control"><option> </option></select>
+                                                        <small class="form-text text-muted">用于 流水行/交叉行</small>
+                                                    </div>
+                                                    <div class="form-group">
+                                                        <label>显示列宽度</label>
+                                                        <select class="form-control"><option> </option></select>
+                                                        <small class="form-text text-muted">用于 交叉列</small>
+                                                    </div>
+                                                    <div class="ztree-warp">
+                                                        ztree 保留空间
+                                                    </div>
+                                                    <div class="form-group">
+                                                        <label>映射指标</label>
+                                                        <select class="form-control"><option> </option></select>
                                                     </div>
                                                 </div>
                                             </div>
                                         </div>
+                                        <!--计算式-->
+                                        <div class="tab-pane" id="rpttplformula" role="tabpanel">
+                                            <div class="main-data">
+                                                <div class="p-3">
+                                                    计算式
+                                                </div>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
-                            <div class="main-content col-lg-6 p-0">
-                                <div class="bottom-content">
-                                    <!--
-                                    -->
-                                    <h5>报表预览</h5>
-                                    <canvas id="preview_cvs"></canvas>
+                            <!-- 报表预览 -->
+                            <div class="form-view col-lg-8 p-0">
+                                <div class="main-data-h" style="position:relative">
+                                    <div class="sub-button p-2">
+                                        <button class="btn btn-primary">保存</button>
+                                        <button class="btn btn-secondary">保存并发布</button>
+                                        <button class="btn btn-danger">删除模板</button>
+                                    </div>
                                 </div>
                             </div>
                         </div>