Calculation/app/view/sp_setting/data_range_modal.ejs

<style>
    #data-range-modal .data-range-column { height: 360px; overflow-y: auto; }
    #data-range-modal .data-range-node { min-height: 30px; line-height: 30px; white-space: nowrap; }
    #data-range-modal .data-range-node:hover { background: #f5f7fa; }
    #data-range-modal .data-range-toggle { display: inline-block; width: 18px; text-align: center; cursor: pointer; }
    #data-range-modal .data-range-toggle.empty { cursor: default; }
    #data-range-modal .data-range-children.collapsed { display: none; }
    #data-range-modal .data-range-selected-item { border-bottom: 1px solid #eee; padding: 6px 8px; }
    #open-data-range-modal { height: auto; min-height: calc(1.5em + .75rem + 2px); cursor: pointer; }
    #open-data-range-modal .data-range-value-list { flex: 1; min-width: 0; margin: -2px 0; }
    #open-data-range-modal .data-range-value-item {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        margin: 2px 6px 2px 0;
        padding: 1px 6px;
        border: 1px solid #b8c1cc;
        border-radius: 3px;
        background: #fff;
        line-height: 22px;
    }
    #open-data-range-modal .data-range-value-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #open-data-range-modal .remove-main-data-range { margin-left: 7px; color: #909399; }
    #open-data-range-modal .remove-main-data-range:hover { color: #f56c6c; }
    #open-data-range-modal > .fa-caret-down { flex: 0 0 auto; margin-left: 8px !important; }
</style>

<div class="modal fade" id="data-range-modal" data-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">选择范围</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row no-gutters border">
                    <div class="col-6 border-right">
                        <div class="px-2 py-2 border-bottom">已选择：<span id="data-range-selected-count">0</span>项</div>
                        <div class="p-1 border-bottom">
                            <div class="input-group input-group-sm">
                                <input type="text" class="form-control" id="data-range-keyword" placeholder="请输入关键字">
                                <div class="input-group-append">
                                    <button class="btn btn-outline-secondary" type="button" id="data-range-search"><i class="fa fa-search"></i></button>
                                </div>
                            </div>
                        </div>
                        <div class="data-range-column py-1" id="data-range-tree"></div>
                    </div>
                    <div class="col-6">
                        <div class="px-2 py-2 border-bottom">
                            单位类型：<span id="selected-unit-type-count">0</span>
                            <span class="ml-2">单位：<span id="selected-unit-count">0</span></span>
                            <span class="ml-2">用户：<span id="selected-user-count">0</span></span>
                        </div>
                        <div class="data-range-column" id="data-range-selected-list"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-sm btn-primary" id="save-data-range">确定</button>
            </div>
        </div>
    </div>
</div>

<script>
    $('#data-range-modal').appendTo('body');
</script>