IndexSystem/app/view/template/index.ejs

<div class="panel-sidebar">
    <div class="panel-title">
        <div class="title-bar">
            <h2 class="">项目节 <a href="#upload" data-toggle="modal" data-target="#upload" class="pull-right mr-3" title="导入项目节"><i class="fa fa-upload"></i></a></h2>

        </div>
    </div>
    <div class="scrollbar-auto">
        <div class="nav-box">
            <ul id="templateNode" class="ztree"></ul>
        </div>
    </div>
</div>
<div class="panel-content">
    <div class="panel-title">
        <div class="title-main d-flex justify-content-between">
            <div>
                <div class="btn-group">
                    <%= selectNode.code %> <%= selectNode.name %>
                </div>
                <div class="btn-group ml-3">
                    <input id="nodeMatchCode" data-toggle="tooltip" data-placement="bottom" title="<%- selectNode.match_type ? nodeConst.matchTypeStr[selectNode.match_type] : '' %>" type="text" class="m-0 form-control form-control-sm" placeholder="填写绑定的分项节点" value="<%= selectNode.match_key%>" org-value="<%= selectNode.match_key%>">
                </div>
                <a href="javascript:void(0)" data-toggle="popover"  data-content="默认都以分项编号为绑定依据，预留费用请输入分项名称。"><i class="fa fa-question-circle"></i></a>
            </div>
            <div>
                <a href="#add-index" data-toggle="modal" data-target="#add-index" class="btn btn-primary btn-sm pull-right">添加指标</a>
            </div>
        </div>
    </div>
    <div class="content-wrap">
        <div class="c-body">
            <div class="sjs-height-1">
                <table class="table table-bordered">
                    <tr>
                        <th>指标编号</th>
                        <th>指标名称</th>
                        <th colspan="2">指标单位</th>
                        <th>计算规则</th>
                        <th>设置规则</th>
                    </tr>
                    <% for (const index of selectIndex) { %>
                    <tr index_id="<%= index.id %>">
                        <td><%= index.code %></td>
                        <td><%= index.name %></td>
                        <td><%= index.unit1 %></td>
                        <td><%= index.unit2 %></td>
                        <td name="rule"><%= index.rule %></td>
                        <td name="parse_rule"><%= index.parse_rule %><a name="setRule" href="#set-count" data-toggle="modal" data-target="#set-count" value="<%- index.calc_rule %>"><i class="fa fa-cog"></i></a></td>
                    </tr>
                    <% } %>
                </table>
                <div class="container-fluid">
                    <legend class="mt-5">参数设置</legend>
                    <div class="row">
                        <div class="col-6">
                            <div class="card">
                                <div class="card-body">
                                    <h6 class="card-title"><b><%= selectNode.code %> <%= selectNode.name %></b> 参数</h6>
                                    <table class="table table-sm table-bordered table-hover">
                                        <tr><th>参数名称</th><th>绑定分项<br><small class="text-muted">（为空则在指标库填写具体值）</small></th></tr>
                                        <% for (const n of nodeParams) { %>
                                        <tr>
                                            <td code="<%= n.code %>"><%= n.name %></td>
                                            <td>
                                                <% if (n.match_type !== paramConst.matchType.node_default) { %>
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" value="<%= n.match_num %>">
                                                           <% if (n.match_num) { %>
                                                            <%- paramConst.matchNumStr[n.match_num] %>
                                                            <% } else { %>
                                                            为空
                                                            <% } %>
                                                        </button>
                                                        <div class="dropdown-menu">
                                                            <% for (const mn in paramConst.matchNumStr) { %>
                                                            <a class="dropdown-item" href="javascript: void(0)" name="paramMatchNum" value="<%- mn %>"><%- paramConst.matchNumStr[mn] %></a>
                                                            <% } %>
                                                        </div>
                                                    </div>
                                                    <input name="paramMatchCode" type="text" class="form-control" aria-label="Text input with dropdown button" value="<%- n.match_key %>" org-value="<%- n.match_key %>">
                                                </div>
                                                <% } else { %>
                                                <small class="text-muted">(自动绑定)</small>
                                                <% } %>
                                            </td>
                                        </tr>
                                        <% } %>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="card border-danger">
                                <div class="card-body">
                                    <h6 class="card-title text-center">全局参数 </h6>
                                    <table class="table table-sm table-bordered table-hover">
                                        <tr><th colspan="2" class="text-center"><b class="text-danger">*全局参数影响所有指标，谨慎修改</b></th></tr>
                                        <tr><th>参数名称</th><th>绑定分项<br><small class="text-muted">（为空则在指标库填写具体值）</small></th></tr>
                                        <% for (const p of globalParams) { %>
                                        <tr>
                                            <td code="<%= p.code %>"><%= p.name %></td>
                                            <td>
                                                <% if (p.match_type !== paramConst.matchType.fixed_id) { %>
                                                <div class="input-group input-group-sm">
                                                    <div class="input-group-prepend">
                                                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" value="<%= p.match_num %>">
                                                            <% if (p.match_num) { %>
                                                                <%- paramConst.matchNumStr[p.match_num] %>
                                                            <% } else { %>
                                                                为空
                                                            <% } %>
                                                        </button>
                                                        <div class="dropdown-menu">
                                                            <% for (const mn in paramConst.matchNumStr) { %>
                                                            <a class="dropdown-item" href="javascript: void(0)" name="paramMatchNum" value="<%- mn %>"><%- paramConst.matchNumStr[mn] %></a>
                                                            <% } %>
                                                        </div>
                                                    </div>
                                                    <input name="paramMatchCode" type="text" class="form-control" aria-label="Text input with dropdown button">
                                                </div>
                                                <% } else { %>
                                                <small class="text-muted">(自动绑定)</small>
                                                <% } %>
                                            </td>
                                        </tr>
                                        <% } %>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    const treeSetting = {
        treeId: 'template',
        view: {showIcon: false},
        data: {
            key: {
                name: 'text',
            }
        }
    };
    const selectNode = '<%- selectNode.node_id %>';
    const treeNode = '<%- nodes %>';

    $(document).ready(function(){
        const loadText = function (arr) {
            for (const a of arr) {
                a.text = a.code + ' ' + a.name;
                if (a.match_key) {
                    a.text = a.text + ' (' + a.match_key + ')';
                }
                if (a.children && a.children.length > 0) {
                    loadText(a.children);
                }
            }
        }
        const treeNodeData = treeNode !== '' ? JSON.parse(treeNode) : [];
        loadText(treeNodeData);
        const treeObj = $.fn.zTree.init($("#templateNode"), treeSetting, treeNodeData);
        const node = treeObj.getNodeByParam('node_id', selectNode);
        treeObj.selectNode(node);
    });
</script>
<script type="text/javascript">
    $('#nodeMatchCode').tooltip('show')
</script>