Calculation/app/view/setting/limit.ejs

<div class="panel-content">
    <div class="panel-title fluid">
        <div class="title-main  d-flex justify-content-between">
            <div>联动计量检查配置</div>
        </div>
    </div>
    <div class="content-wrap">
        <div class="c-body">
            <div class="sjs-height-0 row">
                <div class="col-2">
                    <div class="d-flex flex-row">
                        <form class="ml-2 p-2" method="POST" action="/setting/limit/save">
                            <input type="hidden" name="_csrf_j2" value="<%= ctx.csrf %>" />
                            <button class="btn btn-sm btn-light text-primary"><i class="fa fa-plus" aria-hidden="true" type="submit"></i> 新增配置</button>
                        </form>
                    </div>
                    <div>
                        <dl class="list-group">
                            <% for (const limit of limitList) { %>
                            <dd class="list-group-item <%- (limit.limit_id === curLimit.limit_id ? 'bg-warning' : '')%>">
                                <div class="d-flex justify-content-between align-items-center table-file" limitId="<%- limit.limit_id %>">
                                    <div><%- limit.name %>%></div>
                                    <div class="btn-group-table" style="display: none;">
                                        <a href="javascript: void(0);" class="mr-1" data-toggle="tooltip" data-placement="bottom" data-original-title="编辑" name="renameLimit"><i class="fa fa-pencil fa-fw"></i></a>
                                        <a href="javascript: void(0);" class="mr-1" data-toggle="tooltip" data-placement="bottom" data-original-title="删除" name="delLimit"><i class="fa fa-trash-o fa-fw text-danger"></i></a>
                                    </div>
                                </div>
                            </dd>
                            <% } %>
                        </dl>
                    </div>
                </div>
                <div class="col-10">
                    <div class="d-flex flex-row">
                        <div class="p-2">
                            <button class="btn btn-sm btn-light text-primary"><i class="fa fa-plus" aria-hidden="true" type="submit"></i> 新增判断</button>
                        </div>
                    </div>
                    <div>
                        <table class="table table-sm table-bordered">
                            <tr class="text-center"><th>序号</th><th>允许计量</th><th>条件</th><th>计量下限</th><th>计量上限</th><th>超限提示</th></tr>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div stype="display: none">
        <form id="hiddenForm" action="" method="POST">
            <input type="hidden" name="_csrf_j2" value="<%= ctx.csrf %>" />
            <input type="hidden" id="extra" name="" value="">
        </form>
    </div>
</div>
<script>
    const limitList = JSON.parse('<%- JSON.stringify(limitList) %>');
    const limitOptions = JSON.parse('<%- JSON.stringify(limitOptions) %>');
    $('.table-file').click(function(e) {
        if (this.getAttribute('renaming') === '1') return;
        if (e.target.tagName === 'A' || e.target.tagName === 'I' || e.target.tagName === 'INPUT') return;
        window.location.href = '/setting/limit?id=' +  this.getAttribute('limitId');
    });
    $('body').on('mouseenter', ".table-file", function(){
        $(this).children(".btn-group-table").css("display","block");
    });
    $('body').on('mouseleave', ".table-file", function(){
        $(this).children(".btn-group-table").css("display","none");
    });

    const hiddenSubmit = function(action, extraName, extraValue) {
        $('#hiddenForm').attr('action', action);
        if (extraName) {
            $('#extra').attr('name', extraName);
            $('#extra').val(extraValue);
        };
        $('#hiddenForm').submit();
    };
    $('body').on('click', 'a[name=renameLimit]', function(e){
        $(this).parents('.table-file').attr('renaming', '1');
        $(`#${this.getAttribute('aria-describedby')}`).remove();
        const limitId = $(this).parents('.table-file').attr('limitId');
        const limit = limitList.find(x => { return x.limit_id === limitId; });
        if (!limit) return;

        const html = [];
        html.push(`<div><input type="text" class="form-control form-control-sm" style="width: 160px" value="${limit.name}"/></div>`);
        html.push('<div class="btn-group-table" style="display: none;">',
            `<a href="javascript: void(0)" name="renameOk" class="mr-1"><i class="fa fa-check fa-fw"></i></a>`,
            `<a href="javascript: void(0)" class="mr-1" name="renameCancel"><i class="fa fa-remove fa-fw text-danger"></i></a>`, '</div>');
        $(`.table-file[limitId=${limitId}]`).html(html.join(''));
        e.stopPropagation();
    });
    $('body').on('click', 'a[name=renameOk]', function(){
        const limitId = $(this).parents('.table-file').attr('limitId');
        const newName = $(this).parents('.table-file').find('input').val();
        hiddenSubmit('/setting/limit/save?id='+limitId, 'name', newName);
        $(this).parents('.table-file').attr('renaming', '0');
    });
    $('body').on('click', 'a[name=renameCancel]', function() {
        $(this).parents('.table-file').attr('renaming', '0');
        const limitId = $(this).parents('.table-file').attr('limitId');
        const limit = limitList.find(x => { return x.limit_id === limitId; });
        if (!limit) return;

        const html = [];
        html.push(`<div>${limit.name}</div>`);
        html.push('<div class="btn-group-table" style="display: none;">',
            '<a href="javascript: void(0);" class="mr-1" data-toggle="tooltip" data-placement="bottom" data-original-title="编辑" name="renameLimit"><i class="fa fa-pencil fa-fw"></i></a>',
            '<a href="javascript: void(0);" class="mr-1" data-toggle="tooltip" data-placement="bottom" data-original-title="删除" name="delLimit"><i class="fa fa-trash-o fa-fw text-danger"></i></a>',
            '</div>');
        $(`.table-file[limitId=${limitId}]`).html(html.join(''));
    });
    $('body').on('click', 'a[name=delLimit]', function(e){
        e.stopPropagation();
        const limitId = $(this).parents('.table-file').attr('limitId');
        hiddenSubmit('/setting/limit/del?id='+limitId);
    });
    $(document).ready(() => {
        autoFlashHeight();
    });
</script>