Calculation/app/view/report/index.ejs

<% include ../tender/tender_sub_menu.ejs %>
<div class="panel-content">
    <div class="panel-title">
        <div class="title-main d-flex">
            <% include ../tender/tender_sub_mini_menu.ejs %>
            <div>
                <div class="d-inline-block">
                    <div class="dropdown">
                        <button class="btn btn-sm btn-light dropdown-toggle text-primary" type="button" id="btnCurrentStage" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="optionSelectableStages"></div>
                    </div>
                </div>
                <div class="d-inline-block">
                    <ul class="nav nav-pills m-0">
                        <li class="nav-item mr-1"><a href="#man-c" data-toggle="modal" data-target="#man-c" class=" btn btn-outline-primary btn-sm"><i class="fa fa-cog"></i> 通用报表</a></li>
                        <li class="nav-item"><a href="#add-c" data-toggle="modal" data-target="#add-c" class=" btn btn-outline-primary btn-sm"><i class="fa fa-plus"></i> 定制报表</a></li>
                    </ul>
                </div>
            </div>
            <div>
            </div>
        </div>
    </div>
    <div class="content-wrap">
        <div class="c-header p-0"></div>
        <div class="c-body">
            <div class="row">
                <div class="col-auto pr-0" id="tree-view" style="width: 17%">
                    <div class="sjs-height-1">
                        <div class="text-center"></div>
                        <ul id="rptTplTree" class="ztree"></ul>
                    </div>
                </div>
                <div class="col-auto" id="main-view" style="width: 83%">
                    <div class="resize-x" id="right-spr" r-Type="width" div1="#tree-view" div2="#main-view" title="调整大小" a-type="percent"><!--调整左右高度条--></div>
                    <div class="toolsbar-f d-flex justify-content-between">
                        <div class="print-toolsbar">
                            <div class="panel">
                                <div class="panel-body" id="print_div">
                                    <button class="btn btn-outline-primary btn-sm" type="button" onclick="rptPrintHelper.preview()">
                                        <i class="fa fa-print"></i><br>
                                        打印 <span id="checkCountPrint" class="badge badge-primary">0</span>
                                    </button>
                                </div>
                            </div>
                            <div class="panel">
                                <div class="panel-body" id="export_div">
                                    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="rptControlObj.checkAndGetExcel()"><i class="fa fa-file-excel-o"></i> Excel <span class="badge badge-secondary">0</span></button>
                                        <button type="button" class="btn btn-outline-primary btn-sm" id="show_excel_output_cfg" data-toggle="modal" data-target="#export_excel" style="display:none"></button>
                                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="rptControlObj.getPDFEx()"><i class="fa fa-file-pdf-o"></i> PDF <span class="badge badge-primary">0</span></button>
                                    </div>
                                </div>
                                <div class="panel-foot text-muted">
                                    导出报表
                                </div>
                            </div>
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                                        <div class="btn-group" role="group">
                                            <button id="btnRptOrientation" type="button" class="btn btn-outline-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">纵向</button>
                                            <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                                <a class="dropdown-item" id="hrefRptOrientation" style="cursor:pointer" onclick="zTreeOprObj.changeOrientation(this)">横向</a>
                                            </div>
                                        </div>
                                        <div class="btn-group" role="group">
                                            <button id="btnRptPageSize"  type="button" class="btn btn-outline-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">A4</button>
                                            <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                                <a class="dropdown-item" id="hrefRptPageSize" style="cursor:pointer" onclick="zTreeOprObj.changePageSize(this)">A3</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel-foot text-muted">
                                    预览设置
                                </div>
                            </div>
                            <!--
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="缩小" onclick="zTreeOprObj.scaleReport(-0.25)">-</button>
                                        <button id="btnNormalScale" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="重置默认大小" onclick="zTreeOprObj.scaleReport(0)">100%</button>
                                        <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="放大" onclick="zTreeOprObj.scaleReport(0.25)">+</button>
                                    </div>
                                </div>
                                <div class="panel-foot text-muted">
                                    缩放
                                </div>
                            </div>
                            -->
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                                        <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#paper" onclick="zTreeOprObj.renderRptCfg(CUST_CFG)"><i class="fa fa-file-o"></i> 纸张</button>
                                        <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#format" onclick="zTreeOprObj.renderRptCfg(CUST_CFG)"><i class="fa fa-bold"></i> 格式</button>
                                    </div>
                                </div>
                                <div class="panel-foot text-muted">
                                    报表设置
                                </div>
                            </div>
                            <div class="panel" id="pnl_eSignature">
                                <div class="panel-body">
                                    <button class="btn btn-outline-primary btn-sm" type="button" data-toggle="modal" data-target="#eSignature" onclick="rptSignatureHelper.resetESignature(zTreeOprObj.currentRptPageRst)">
                                        <i class="fa fa-pencil"></i><br>
                                        电子签名
                                    </button>
                                </div>
                            </div>
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="input-group input-group-sm">
                                        <div class="input-group-prepend">
                                            <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="上一页" onclick="rptControlObj.prePage(this)"><i class="fa fa-chevron-left"></i></button>
                                        </div>
                                        <input class="form-control form-control-sm" id="rpt_page_num" value="1/10" onKeydown="rptControlObj.onKeydown(event, this)" style="width:60px" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="输入页码按回车键，快速跳转">
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="下一页" onclick="rptControlObj.nextPage(this)"><i class="fa fa-chevron-right"></i></button>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel-foot text-muted">
                                    翻页
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="baobiao-close-side">
                        <a href="javascript:void(0)" title="收起侧栏" onclick="collapseRptTreeMenu(this)"><i class="fa fa-chevron-left"></i></a>
                        <!-- <a href="#" title="展开侧栏"><i class="fa fa-chevron-right"></i></a> -->
                    </div>
                    <div class="sjs-height-4">
                        <div class="print-view form-view">
                            <div class="pageContainer">
                                <canvas id="rptCanvas" height="820" width="920"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/public/js/sub_menu.js"></script>
<script src="/public/js/div_resizer.js"></script>
<script>
    $.subMenu({
        menu: '#sub-menu', miniMenu: '#sub-mini-menu', miniMenuList: '#mini-menu-list',
        toMenu: '#to-menu', toMiniMenu: '#to-mini-menu',
        key: 'menu.1.0.0',
        miniHint: '#sub-mini-hint', hintKey: 'menu.hint.1.0.1',
        callback: function (info) {
            if (info.mini) {
                $('.panel-title').addClass('fluid');
                $('#sub-menu').removeClass('panel-sidebar');
            } else {
                $('.panel-title').removeClass('fluid');
                $('#sub-menu').addClass('panel-sidebar');
            }
            autoFlashHeight();
        }
    });
    $.divResizer({
        select: '#right-spr',
        callback: function () {
            autoFlashHeight();
        }
    });
</script>

<script type="text/javascript">  autoFlashHeight();</script>
<script type="text/javascript" src="/public/jspdf/jspdf.min.js"></script>
<script src="/public/js/datepicker/datepicker.min.js"></script>
<script src="/public/js/datepicker/datepicker.zh.js"></script>

<!-- zTree -->
<script type="text/javascript" src="/public/js/ztree/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/public/js/ztree/jquery.ztree.excheck.js"></script>

<!--
-->
<script type="text/javascript" src="/public/js/rpt_tpl_def.js"></script>
<script type="text/javascript" src="/public/js/common_ajax.js"></script>
<script type="text/javascript" src="/public/js/treeDataHelper.js"></script>
<script type="text/javascript" src="/public/js/string_util_light.js"></script>
<script type="text/javascript" src="/public/js/ztree_common.js"></script>
<script type="text/javascript" src="/public/js/storageUtil.js"></script>

<script type="text/javascript" src="/public/report/js/rpt_main.js"></script>
<script type="text/javascript" src="/public/report/js/rpt_cfg_const.js"></script>
<script type="text/javascript" src="/public/report/js/jpc_output_value_define.js"></script>
<script type="text/javascript" src="/public/report/js/jpc_output.js"></script>
<script type="text/javascript" src="/public/report/js/rpt_print.js"></script>
<script type="text/javascript" src="/public/report/js/rpt_signature.js"></script>
<script type="text/javascript" src="/public/report/js/rpt_jspdf.js"></script>

<script type="text/javascript">
    const TOP_TREE_NODES = <%- rpt_tpl_data %>;
    let CUST_CFG = <%- cust_cfg %>;
    CUST_CFG = JSON.parse(CUST_CFG[0].cfg_content);
    const PROJECT_ID = <%- project_id %>;
    const TENDER_ID = <%- tender_id %>;
    const TENDER_NAME = '<%- tender_name %>';
    const STAGE_ID = <%- stg_id %>;
    const STAGE_ORDER = <%- stg_order %>;
    const CUR_ORDER = <%- cur_order %>;
    const STAGE_TIMES = <%- stg_times %>;
    const STAGE_LIST = <%- stage_list %>;
    const PRJ_ACCOUNT_LIST = <%- prj_account_list %>;
    const ROLE_LIST = <%- role_list %>;
    const STAGE_STATUS = <%- stg_status %>;
    let STAGE_AUDIT = [];
    let ROLE_REL_LIST = [];
    let CURRENT_ROLE_REL_ID = -1;
    let current_stage_order = -1;
    let current_stage_id = -1;
    let current_stage_times = -1;
    let current_stage_status = -1;

    if (STAGE_ORDER > 0) {
        current_stage_order = STAGE_ORDER;
        current_stage_id = STAGE_ID;
        current_stage_times = STAGE_TIMES;
        current_stage_status = STAGE_STATUS;
    } else if (STAGE_LIST.length > 0) {
        current_stage_order = STAGE_LIST[STAGE_LIST.length - 1].order;
        current_stage_id = STAGE_LIST[STAGE_LIST.length - 1].id;
        current_stage_times = STAGE_LIST[STAGE_LIST.length - 1].times;
        current_stage_status = STAGE_LIST[STAGE_LIST.length - 1].status;
    }

    buildStageSelection();
    setupSignature();

    const ORG_TOP_TREE_NODES = JSON.parse(JSON.stringify(TOP_TREE_NODES));
    for (let item of TOP_TREE_NODES) {
        item.items = JSON.parse(item.items);
        if (item.items && item.items.length > 0) {
            for (let dtlItem of item.items) {
                chkAndSetNode(dtlItem);
            }
        }
    }
    for (let item of ORG_TOP_TREE_NODES) {
        item.items = JSON.parse(item.items);
        if (item.items && item.items.length > 0) {
            for (let dtlItem of item.items) {
                chkAndSetNode(dtlItem);
            }
        }
    }
    buildTplTree();

    function chkAndSetNode(parentItem) {
        if (parentItem.nodeType === 1) {
            parentItem.isParent = true;
        }
        if (parentItem.items) {
            for (let dtlItem of parentItem.items) {
                chkAndSetNode(dtlItem);
            }
        }
    }

    const SCREEN_DPI = [];
    function getScreenDPI() {
        if (SCREEN_DPI.length === 0) {
            if (window.screen.deviceXDPI != undefined) {
                SCREEN_DPI.push(window.screen.deviceXDPI);
                SCREEN_DPI.push(window.screen.deviceYDPI);
            } else {
                let tmpNode = document.createElement("DIV");
                tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
                document.body.appendChild(tmpNode);
                SCREEN_DPI.push(parseInt(tmpNode.offsetWidth));
                SCREEN_DPI.push(parseInt(tmpNode.offsetHeight));
                tmpNode.parentNode.removeChild(tmpNode);
            }
        }
        return SCREEN_DPI;
    }

    function buildTplTree() {
        if (TOP_TREE_NODES.length > 0) {
            //1. 整理模板树
            const individualNode = {id: 99999, name: '定制报表', pid: -1, rpt_type: 0, items: [], isParent: true};
            for (let tnIdx = TOP_TREE_NODES.length - 1; tnIdx >= 0; tnIdx--) {
                if (TOP_TREE_NODES[tnIdx].pid !== -1) {
                    TOP_TREE_NODES[tnIdx].isParent = true;
                    TOP_TREE_NODES[tnIdx].nodeType = 1;
                    individualNode.items.push(TOP_TREE_NODES[tnIdx]);
                    TOP_TREE_NODES.splice(tnIdx, 1);
                }
            }
            TOP_TREE_NODES.push(individualNode);
            //2. 原始的模板树(恢复用)
            const individualNodeOrg = {id: 99999, name: '定制报表', pid: -1, rpt_type: 0, items: [], isParent: true};
            for (let tnIdx = ORG_TOP_TREE_NODES.length - 1; tnIdx >= 0; tnIdx--) {
                if (ORG_TOP_TREE_NODES[tnIdx].pid !== -1) {
                    ORG_TOP_TREE_NODES[tnIdx].isParent = true;
                    ORG_TOP_TREE_NODES[tnIdx].nodeType = 1;
                    individualNodeOrg.items.push(ORG_TOP_TREE_NODES[tnIdx]);
                    ORG_TOP_TREE_NODES.splice(tnIdx, 1);
                }
            }
            ORG_TOP_TREE_NODES.push(individualNode);
        }
    }

    function buildStageSelection() {
        if (STAGE_LIST.length === 0) {
            $("#optionSelectableStages")[0].style.display = 'none';
        } else {
            $("#optionSelectableStages")[0].style.display = '';
            $("#btnCurrentStage")[0].innerText = '第' + current_stage_order + '期';
            $("#optionSelectableStages").empty();
            if (STAGE_LIST.length > 0) {
                for (let i = STAGE_LIST.length; i > 0; i--) {
                    if (parseInt(STAGE_LIST[i - 1].order) !== current_stage_order) {
                        const str = '<a class="dropdown-item" style="cursor:pointer" onclick="changeCurrentStage(this)" stg_id = "' + STAGE_LIST[i - 1].id + '" stg_order="' + STAGE_LIST[i - 1].order + '">第' + STAGE_LIST[i - 1].order + '期</a>';
                        $("#optionSelectableStages").append(str);
                    }
                }
            }
        }
    }

    function changeCurrentStage(ele) {
        // alert('you are selecting: ' + ele.innerText);
        current_stage_order = parseInt(ele.attributes.stg_order.value);
        current_stage_id = parseInt(ele.attributes.stg_id.value);
        // 调整当前stage times
        for (let i = STAGE_LIST.length; i > 0; i--) {
            if (parseInt(STAGE_LIST[i - 1].order) === current_stage_order) {
                current_stage_times = STAGE_LIST[i - 1].times;
                current_stage_status = STAGE_LIST[i - 1].status;
                break;
            }
        }
        buildStageSelection();
        setupSignature();
        //还有必要触发报表刷新！
        zTreeOprObj.onClick(null, null, zTreeOprObj.currentNode);
    }

    function setupSignature() {
        if (current_stage_status === 3) {
            $('#pnl_eSignature')[0].style.display = '';
        } else {
            $('#pnl_eSignature')[0].style.display = 'none';
        }
    }

    function setupDateFormat() {
        Date.prototype.Format = function (fmt) {
            let o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (let k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        };
    }

    function collapseRptTreeMenu(dom) {
        const parentDom = $(dom).parent().parent();
        const brotherDom = parentDom.prev();
        const nextDom = $(dom).children();
        const left = $('#tree-view'), right = $('#main-view'), parent = left.parent();
        if (dom.title === '收起侧栏') {
            dom.title = '展开侧栏';
            brotherDom[0].style = 'display:none';
            left.hide();
            right.css('width', '100%');
            nextDom[0].className = 'fa fa-chevron-right';
        } else {
            dom.title = '收起侧栏';
            left.show();
            const percent = 100 - left.outerWidth() /parent.width() * 100;
            right.css('width', percent + '%');
            brotherDom[0].style = 'display:';
            nextDom[0].className = 'fa fa-chevron-left';
        }
    }

    setupDateFormat();
    rptTplObj.iniPage();
</script>