Calculation/app/view/report/rpt_format_setup.ejs

<% if (stg_id === -1) {%>
    <% include ../tender/tender_sub_menu.ejs %>
<% } else if (stg_id === -100) { %>
    <% include ../payment_safe/sub_menu.ejs %>
<% } else if (stg_id === -200) { %>
    <% include ../budget/sub_menu.ejs %>
<% } else if ([-300, -301, -302, -303].includes(stg_id)) { %>
    <% include ../tender/tender_sub_menu.ejs %>
<% } else if ([-600].includes(stg_id)) { %>
    <% include ../contract/sub_menu.ejs %>
<% } else { %>
    <% include ../stage/stage_sub_menu.ejs %>
<% } %>
<div class="panel-content">
    <div class="panel-title">
        <div class="title-main">
            <h2>报表设置</h2>
        </div>
    </div>
    <div class="content-wrap">
        <div class="c-header p-0"></div>
        <div class="c-body">
            <div class="sjs-height-0 row">
                <div class="col-auto pr-0" id="format-tree-view" style="width: 20%">
                    <!-- <div class="d-inline-block">
                        <div class="dropdown">
                        <button class="btn btn-sm btn-light dropdown-toggle text-primary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 显示层级</button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" name="showLevel" tag="1" href="javascript: void(0);">第一层</a>
                            <a class="dropdown-item" name="showLevel" tag="2" href="javascript: void(0);">第二层</a>
                            <a class="dropdown-item" name="showLevel" tag="3" href="javascript: void(0);">第三层</a>
                            <a class="dropdown-item" name="showLevel" tag="4" href="javascript: void(0);">第四层</a>
                            <a class="dropdown-item" name="showLevel" tag="last" href="javascript: void(0);">最底层</a>
                        </div>
                        </div>
                    </div>
                    <div class="d-inline-block  ml-auto">
                        <div id="xmj-search">                                
                            <div class="ml-2">
                            <div class="input-group input-group-sm">
                                <input type="text" class="form-control" placeholder="输入名称查找" id="pos-keyword">
                                <div class="input-group-append">
                                    <span class="input-group-text" id="pos-search-hint">结果：0</span>
                                </div>
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary" type="button" title="上一个" id="search-pre-pos"><i class="fa fa-angle-double-left"></i></button>
                                    <button class="btn btn-outline-secondary" type="button" title="下一个" id="search-next-pos"><i class="fa fa-angle-double-right"></i></button>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div> -->
                    <div class="sjs-height-1" style="overflow: auto">
                        <div class="text-center"></div>
                        <ul id="rptFormatSetupTplTree" class="ztree"></ul>
                    </div>
                </div>
                <div class="col-auto" id="format-main-view" style="width: 80%">
                    <nav class="nav nav-tabs m-3" role="tablist">
                        <a class="nav-item nav-link active" data-toggle="tab" data-target="#format-setup-edit" href="#format-setup-edit" role="tab" aria-selected="true">修改报表模板</a>
                        <% if (isAdmin) {%>
                        <a class="nav-item nav-link" data-toggle="tab" data-target="#format-setup-private" href="#format-setup-private" role="tab" aria-selected="false">报表私有化</a>
                        <% } %>
                    </nav>
                    <div class="tab-content m-3">
                        <div id="format-setup-edit" class="tab-pane active">
                            <div class="d-inline-block">
                                <ul class="nav nav-pills m-0">
                                    <li class="nav-item mr-1"><a onclick="reportFormatSetupObj.preview()" data-toggle="modal" data-target="#setup_view-bb" class=" btn btn-light btn-sm text-primary">预览报表</a></li>
                                    <li class="nav-item mr-1"><a onclick="reportFormatSetupObj.previewSign()" data-toggle="modal" data-target="#view-sign" class=" btn btn-light btn-sm  text-primary">预览电子签名</a></li>
                                    <li class="nav-item"><button onclick="$('#show_confirm_format_setup').trigger('click')" class="btn btn-outline-primary btn-sm">更新报表模板</button></li>
                                    <li class="nav-item"><a id="show_confirm_format_setup" href="#" class=" btn btn-sm btn-primary" data-toggle="modal" data-target="#updaterp" style="display:none"></a></li>
                                </ul>
                            </div>
                            <div class="mt-3">
                                <label class="form-text alert alert-danger">请先点击「预览报表/预览电子签名」，确定修改无误后，再点击「更新报表模板」（一旦更新无法撤销）。</label>
                            </div>
                            <div class="sjs-height-0">
                                <div class="row">
                                    <div class="col-9">
                                        <div class="card mb-3" id="rpt_header_parent_div">
                                            <div class="card-header d-flex justify-content-between" id="rpt_header_div">
                                                <div>表眉</div>
                                                <div><a href="" class="btn btn-sm btn-light text-primary">新增行</a></div>
                                            </div>
                                            <div class="card-body" id="rpt_header_table_div"></div>
                                        </div>
                                        <div class="card mb-3">
                                            <div class="card-header d-flex justify-content-between" id="rpt_footer_div">
                                                <div>表脚</div>
                                                <div><a href="" class="btn btn-sm btn-light text-primary">新增行</a></div>
                                            </div>
                                            <div class="card-body" id="rpt_footer_table_div"></div>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="card mb-3">
                                            <div class="card-header d-flex justify-content-between">
                                                <div>表标题</div>
                                            </div>
                                            <div class="card-body">
                                                <div class="form-group">
                                                    <input class="form-control form-control-sm" id="rpt_title_input" placeholder="" type="text">
                                                </div>
                                            </div>                                                
                                        </div>
                                        <div class="card mb-3">
                                            <div class="card-header d-flex justify-content-between">
                                                <div>电子签名</div>
                                            </div>
                                            <div class="card-body">
                                                <ul class="list-unstyled" id="signature_ul_list">
                                                    <li class="pl-3"><a href="#" onclick="reportFormatSetupObj.onAddSignature(this)"><i class="fa fa-plus"></i> 添加新签字人</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="format-setup-private" class="tab-pane">
                            <div class="sjs-height-0 row" style="height: 479px;">
                                <div class="col">
                                    <div class="d-flex">
                                        <div class="d-inline-block dropdown ">
                                            <button class="btn btn-outline-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                添加用户
                                            </button>
                                            <div class="dropdown-menu" id="format-setup-add-user" aria-labelledby="dropdownMenuButton" style="width:220px">
												<!-- <div class="mb-2 p-2"><input class="form-control form-control-sm" placeholder="姓名/手机 检索"></div> -->
												<dl class="list-unstyled book-list">
                                                    <% accountGroup.forEach((group, idx) => { %>
                                                        <dt><a href="javascript: void(0);" class="acc-btn" data-groupid="<%- idx %>" data-type="hide"><i class="fa fa-plus-square"></i></a> <%- group.groupName %></dt>
                                                        <div class="dd-content" data-toggleid="<%- idx %>">
                                                            <% group.groupList.forEach(item => { %>
                                                                <dd class="border-bottom p-2 mb-0 user-item" data-id="<%- item.id %>" >
                                                                    <p class="mb-0 d-flex"><span class="text-primary"><%- item.name %></span><span
                                                                                class="ml-auto"><%- item.mobile %></span>
                                                                        <span class="selected-mark text-success ml-2" style="display:none;"><i class="fa fa-check"></i></span>
                                                                    </p>
                                                                    <span class="text-muted"><%- item.role %></span>
                                                                </dd>
                                                            <% });%>
                                                        </div>
                                                    <% }) %>
												</dl>
											</div>
                                        </div>
                                    </div>
                                    <div class="col-6 pl-0">
                                        <table class="table table-hover table-bordered table-sm mt-3">
                                            <thead>
                                                <tr>
                                                <th class="text-center" width="25%">用户</th>
                                                <th class="text-center" width="35%">职位/角色</th>
                                                <th class="text-center" width="25%">添加时间</th>
                                                <th class="text-center" width="15%">操作</th>
                                                </tr>  
                                            </thead>
                                            <tbody class="text-center"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </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 type="text/javascript">  autoFlashHeight();</script>
<script type="text/javascript" src="/public/report/js/rpt_public.js"></script>
<script type="text/javascript" src="/public/js/ztree_common.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/report/js/rpt_format_setup.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/rpt_move_signature.js"></script>
<script type="text/javascript" src="/public/report/js/jpc_output.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">
    const SCREEN_DPI = [];
    const rpt_format_setting = {
        view: {
            selectedMulti: false
        },
        check: {
            enable: true
        },
        data: {
            keep: {
                parent:true,
                leaf:true
            },
            key: {
                children: "items",
                title: "title",
                isHidden: "hidden"
            },
            simpleData: {
                enable: true,
                rootPId: -1
            }
        },
        callback: {
            onCheck: reportFormatSetupObj.onCheck,
            onClick: reportFormatSetupObj.onClick
        }
    };

    let TOP_TREE_NODES = <%- rpt_tpl_data %>;
    const CUST_TREE_NODES = <%- cust_tpl_data %>;
    const ALL_COMMON_TREE_NODES = [];
    const ALL_INDIVI_TREE_NODES = <%- all_indivi_tpl_data %>;
    const FOLDER_SEPERATER = '->';
    const PAGE_SHOW = {closeWatermark: 0, closeExportPdf: 0, closeExportExcel: 0, showArchive: 0, closeShowAllCustomized: 0, isTextSignature: 0, closeArchiveSignature: 0};
    let CURRENT_SELECTED_BIZ_TYPE = 'stage';
    //
    for (let item of TOP_TREE_NODES) {
        if (item.name === '通用报表') {
            item.name = '推荐报表';
            item.items = '[]'; // 推荐报表不能调
        }
    }
    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);
            }
        }
    }
    for (let item of ALL_COMMON_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 ALL_INDIVI_TREE_NODES) {
        // item.items = JSON.parse(item.items);
        if (item.items && item.items.length > 0) {
            for (let dtlItem of item.items) {
                chkAndSetNode(dtlItem);
            }
        }
    }

    // 初始化报表模板数
    buildTplTree();

    // 初始化报表树 备注：这里不用考虑过滤了，把全部的定制报表显示即可
    // filterReportsByType(ALL_COMMON_TREE_NODES, ALL_INDIVI_TREE_NODES, CURRENT_SELECTED_BIZ_TYPE, TOP_TREE_NODES, CUST_TREE_NODES);
    getReportTemplateTree();
    refreshNodes();

    <% if (isAdmin) {%>
    // 初始化 报表私有化 用户
    $('body').on('click', '#format-setup-add-user .book-list dt', function () {
        const idx = $(this).find('.acc-btn').attr('data-groupid');
        const type = $(this).find('.acc-btn').attr('data-type');
        if (type === 'hide') {
            $(this).parent().find(`div[data-toggleid="${idx}"]`).show(() => {
                $(this).children().find('i').removeClass('fa-plus-square').addClass('fa-minus-square-o');
                $(this).find('.acc-btn').attr('data-type', 'show');

            })
        } else {
            $(this).parent().find(`div[data-toggleid="${idx}"]`).hide(() => {
                $(this).children().find('i').removeClass('fa-minus-square-o').addClass('fa-plus-square');
                $(this).find('.acc-btn').attr('data-type', 'hide');
            })
        }
        return false;
    });    
    // format-setup-add-user
    $('body').on('click', '#format-setup-add-user dl dd', function (e) {
        console.log(e);
    });
    function iniPrivateReport() {
        //
    }
    <% } %>

    function updateSelectedMarks(forcedType = null) { 
        let currentUserListSelector = '';
        let selectedIdsArray = []; 
        let currentType = forcedType; 
        if (!currentType) {
            const $activeTabPane = $('.tab-pane.active');
            const activeTabId = $activeTabPane.attr('id');
            switch(activeTabId) {
                case 'guest': currentType = 'tourist'; break;
                case 'tzpro': currentType = 'schedule'; break;
                case 'htgl': currentType = 'contract'; break;
                case 'sgrz': currentType = 'construction'; break;
                case 'zlgl': currentType = 'quality'; break;
                case 'zlxj': currentType = 'inspection'; break;
                default: currentType = null;
            }
        }

        if (currentType && selectedUserIdsByType.hasOwnProperty(currentType)) {
            switch(currentType) {
                case 'tourist': currentUserListSelector = '#tourist-users'; break;
                case 'schedule': currentUserListSelector = '#schedule-users'; break;
                case 'contract': currentUserListSelector = '#contract-users'; break;
                case 'construction': currentUserListSelector = '#construction-users'; break;
                case 'quality': currentUserListSelector = '#quality-users'; break;
                case 'inspection': currentUserListSelector = '#inspection-users'; break;
            }
            selectedIdsArray = selectedUserIdsByType[currentType];
        } else {
            $('.user-item').find('.selected-mark').hide();
            $('.user-item').removeClass('bg-light');
            return;
        }
        if ($('#add_user_dropdownMenu2 .book-list').length > 0) {
            $('.user-item').each(function() {
                const userIdStr = $(this).data('id');
                const userId = parseInt(userIdStr, 10);
                const $mark = $(this).find('.selected-mark');
                if (!isNaN(userId) && selectedIdsArray.includes(userId)) {
                    $mark.show();
                    $(this).addClass('bg-light');
                } else {
                    $mark.hide();
                    $(this).removeClass('bg-light');
                }
            });
        }
    }

    function buildTplTree() {
        if (TOP_TREE_NODES.length > 0) {
            //1. 整理模板树 (原始状态的TOP_TREE_NODES包含了推荐报表与定制表，需要分割)
            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.unshift(TOP_TREE_NODES[tnIdx]);
                    TOP_TREE_NODES.splice(tnIdx, 1);
                }
            }
            if (TOP_TREE_NODES.length > 0) {
                // 1.1 移除未被选择的模板
                filterUnchkTplTreeNode(TOP_TREE_NODES[0], CUST_TREE_NODES.common);
                TOP_TREE_NODES.unshift(individualNode); //定制在前，且不用过滤
                // if (CUST_TREE_NODES.customize && CUST_TREE_NODES.customize.length > 0) {
                //     // 优先过滤用户选择
                //     filterUnchkTplTreeNode(TOP_TREE_NODES[0], CUST_TREE_NODES.customize);
                // } else if (PAGE_SHOW['closeShowAllCustomized'] === 1) {
                //     // 如果没有用户选择 且 关闭显示所有定制表
                //     filterUnchkTplTreeNode(TOP_TREE_NODES[0], []);
                // }
            }
            //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.unshift(ORG_TOP_TREE_NODES[tnIdx]);
                    ORG_TOP_TREE_NODES.splice(tnIdx, 1);
                }
            }
            //ORG_TOP_TREE_NODES.push(individualNode);
            ORG_TOP_TREE_NODES.unshift(individualNodeOrg);
        }
    }

    function getReportTemplateTree() {
        const _chkIfShouldFilter = function(rptItem, currentRptType = 'normal') {
            let rst = (!(rptItem.released) && rptItem.nodeType === 2 || rptItem.hidden); //未发布判断 或 故意隐藏
            if (!rst) {
                // !!!因判断逻辑调整，所有报表类型的判断是在目录级别，不单独判断报表了 XXX
                // 预付款、材料调差等业务是需要以下的的判断的，上面的情况后经过仔细检查，属于报表模板数据问题，先忽略
                // 根据当前业务类型判断及检测其他非同类报表，如动态决算类型、支付审批类型
                switch(currentRptType) {
                    case 'normal':
                        if (rptItem.flags) {
                            if (rptItem.flags.dynamicType || rptItem.flags.payAuditType) {
                                if (rptItem.flags.dynamicType && rptItem.flags.dynamicType !== 'N/A') {
                                    rst = true;
                                    break;
                                }
                                if (rptItem.flags.payAuditType && rptItem.flags.payAuditType !== 'N/A') {
                                    rst = true;
                                    break;
                                }
                            }
                        }
                        // 检测：预付款
                        if (CURRENT_SELECTED_BIZ_TYPE === 'change_prepay' && rptItem.nodeType === 2) {
                            rst = true;
                            if (rptItem.flags && rptItem.flags.rptTplType) {
                                if (current_advance_id > 0) {
                                    rst = !((rptItem.flags.rptTplType || '') === getAdvanceType());
                                }
                            }
                        }
                        break;
                    case 'juesuan':
                        break;
                    case 'zhifushenpi':
                        break;
                    default:
                        break;
                }
            }
            return rst;
        };
        const private_remove_hide_item = function (items, nlv) {
            if (items && items.length > 0) {
                for (let i = items.length - 1; i >= 0; i--) {
                    if (_chkIfShouldFilter(items[i])) {
                        items.splice(i, 1);
                    } else {
                        if (items[i].items && items[i].items.length > 0) {
                            private_remove_hide_item(items[i].items, nlv + 1);
                            if (items[i].items.length === 0 && nlv > 0) {
                                items.splice(i, 1);
                            }
                        }
                    }
                }
            }
        };
        const _changeSourceType = function(items, newType = 1) {
            if (items && items.length > 0) {
                for (let i = items.length - 1; i >= 0; i--) {
                    items[i].source_type = newType;
                    if (items[i].items && items[i].items.length > 0) {
                        _changeSourceType(items[i].items);
                    }
                }
            }
        };
        let nodeLv = 0;
        private_remove_hide_item(TOP_TREE_NODES, nodeLv);
        zTreeHelper.createTreeDirectly(TOP_TREE_NODES, rpt_format_setting, "rptFormatSetupTplTree", reportFormatSetupObj);
    }

    function refreshNodes() {
        let me = reportFormatSetupObj;
        const _set_archive_icon = function (tplNode) {
            if (!tplNode.isParent) {
                tplNode.icon = "/public/css/ztree/img/diy/11.png"; // 躺枪，ico_docu已换成其他图标，调整的代价大，在这里调整
            }
        };
        let private_setupIsParent = function(node){
            node.isParent = (node.nodeType === RT.NodeType.NODE || node.level === 0);
            _set_archive_icon(node);
            if (node.items && node.items.length) {
                for (let i = 0; i < node.items.length; i++) {
                    private_setupIsParent(node.items[i]);
                }
            }
        };
        let topNodes = me.treeObj.getNodes();
        for (let i = 0; i < topNodes.length; i++) {
            private_setupIsParent(topNodes[i]);
        }
        me.treeObj.refresh();
    }

</script>