Calculation/app/view/contract/col_set.ejs

<!--弹出列设置-->
<style>
    #col-set .selected-contract-cols table {
        margin-bottom: 0;
        border-collapse: separate;
        border-spacing: 0;
        border: 0;
    }
    #col-set .selected-contract-cols .table-bordered th,
    #col-set .selected-contract-cols .table-bordered td {
        border: 0;
        border-right: 1px solid #dee2e6;
        border-bottom: 1px solid #dee2e6;
    }
    #col-set .selected-contract-cols .table-bordered th:last-child,
    #col-set .selected-contract-cols .table-bordered td:last-child {
        border-right: 0;
    }
    #col-set .selected-contract-cols tbody tr:last-child td {
        border-bottom: 0;
    }
    #col-set .selected-contract-cols thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: #f8f9fa;
    }
    #copy-contract-col-set { z-index: 1060; }
    #copy-contract-col-set .copy-target-list { max-height: 420px; overflow-y: auto; }
    #copy-contract-col-set .copy-target-row { min-height: 34px; }
</style>
<div class="modal fade" id="col-set" data-backdrop="static">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">列设置</h5></div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="font-weight-bold mb-2">可添加的合同属性</div>
                        <div class="contract-col-options border rounded p-2" style="height: 520px; overflow-y: scroll; scrollbar-gutter: stable;">
                            <% const columnGroups = [
                                { name: '合同详情', items: contractColumnOptions.detail },
                                { name: '附加属性', items: contractColumnOptions.attribute },
                            ]; %>
                            <% for (const group of columnGroups) { %>
                                <div class="contract-col-group mb-3">
                                    <div class="bg-light font-weight-bold px-2 py-1 mb-1"><%- group.name %></div>
                                    <% if (group.items.length === 0) { %><div class="text-muted px-2 py-1">暂无可用属性</div><% } %>
                                    <% for (const item of group.items) { %>
                                        <div class="contract-col-option d-flex align-items-center justify-content-between px-2 py-1"
                                             data-field="<%- item.field %>" data-name="<%- item.name %>" data-source="<%- item.source %>">
                                            <span><%- item.name %></span>
                                            <button type="button" class="btn btn-sm btn-outline-primary add-contract-col">添加</button>
                                        </div>
                                    <% } %>
                                </div>
                            <% } %>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="font-weight-bold mb-2">已选择的列</div>
                        <div class="selected-contract-cols table-responsive border rounded" style="height: 520px; overflow-y: scroll; scrollbar-gutter: stable;">
                            <table class="table table-hover table-bordered mb-0">
                                <thead><tr><th width="150px" class="text-center">列名</th><th width="60px" class="text-center">显示</th><th width="150px" class="text-center">别名</th><th width="170px" class="text-center">操作</th></tr></thead>
                                <tbody class="text-center">
                                <% for (const cs of colSet) { %>
                                    <tr code="<%- cs.field %>" data-name="<%- cs.name %>" data-source="<%- cs.source || 'base' %>" data-removable="<%- cs.removable ? 1 : 0 %>">
                                        <td><%- cs.name %><% if (cs.hint) { %><i class="fa fa-question-circle text-primary ml-1" data-placement="bottom" data-toggle="tooltip" data-original-title="<%- cs.hint %>"></i><% } %></td>
                                        <td><div class="form-check form-check-inline"><input class="form-check-input col-show" type="checkbox" <% if (cs.show) { %>checked<% } %>></div></td>
                                        <% if (cs.fixed.indexOf('alias') >= 0) { %><td class="disabled">-</td><% } else { %><td><input type="text" class="form-control form-control-sm col-alias" value="<%- cs.alias %>"></td><% } %>
                                        <td class="text-nowrap">
                                            <a href="javascript:;" class="move-up text-primary mr-2">上移</a>
                                            <a href="javascript:;" class="move-down text-primary mr-2">下移</a>
                                            <% if (cs.removable) { %><a href="javascript:;" class="remove-contract-col text-danger">移除</a><% } %>
                                        </td>
                                    </tr>
                                <% } %>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <form class="modal-footer justify-content-between" action="/sp/<%- ctx.subProject.id %>/contract/<%- ctx.contractOptions.tid ? 'tender/'+ctx.contractOptions.tid + '/' : '' %>col-set" method="post" onsubmit="return onSetCol();">
                <input type="hidden" name="_csrf_j" value="<%= ctx.csrf %>"><input type="hidden" name="col_set" value=""><input type="hidden" name="type" value="<%- ctx.contract_type %>"><input type="hidden" name="col_type" value="info">
                <button type="button" class="btn btn-outline-primary btn-sm" id="open-copy-contract-col-set">设置至其他<%- contractColCopyScope === 'tender' ? '标段' : '项目' %></button>
                <div><button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button><button type="submit" class="btn btn-primary btn-sm ml-1" id="add-bd-ok">确定修改</button></div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="copy-contract-col-set" data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">设置至其他<%- contractColCopyScope === 'tender' ? '标段' : '项目' %></h5></div>
            <div class="modal-body">
                <div class="alert alert-warning py-2">将当前“<%- ctx.contract_type === contractConst.type.income ? '收入合同' : '支出合同' %>”列设置复制到勾选的<%- contractColCopyScope === 'tender' ? '标段' : '子项目' %>。</div>
                <div class="border rounded copy-target-list">
                    <% if (!contractColCopyTargets.some(item => !item.is_folder && !item.current)) { %><div class="text-muted p-3">暂无其他可设置的<%- contractColCopyScope === 'tender' ? '标段' : '子项目' %></div><% } %>
                    <% for (const target of contractColCopyTargets) { %>
                        <div class="copy-target-row d-flex align-items-center border-bottom px-2"
                             style="padding-left: <%- 12 + ((target.tree_level || 1) - 1) * 24 %>px !important;">
                            <% if (target.is_folder) { %>
                                <i class="fa fa-folder-o text-warning mr-2"></i><span><%- target.name %></span>
                            <% } else { %>
                                <label class="mb-0 w-100">
                                    <input type="checkbox" class="copy-contract-col-target mr-2" value="<%- target.id %>" <%- target.current ? 'disabled' : '' %>>
                                    <i class="fa <%- contractColCopyScope === 'tender' ? 'fa-flag-o' : 'fa-file-o' %> text-muted mr-1"></i><%- target.name %><% if (target.current) { %><span class="text-muted ml-2">（当前）</span><% } %>
                                </label>
                            <% } %>
                        </div>
                    <% } %>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary btn-sm" id="copy-contract-col-set-ok">确认复制</button>
            </div>
        </div>
    </div>
</div>
<script>
const $colSetModal = $('#col-set');
const $colSetTbody = $colSetModal.find('tbody');
const _initialColSetTbodyHtml = $colSetTbody.html();
const _initialColOptionsHtml = $colSetModal.find('.contract-col-options').html();

function syncContractColOptions() {
    const selected = {};
    $colSetTbody.find('tr').each(function () { selected[$(this).attr('code')] = true; });
    $colSetModal.find('.contract-col-option').each(function () {
        const $option = $(this);
        if (selected[$option.data('field')]) {
            $option.removeClass('d-flex').addClass('d-none');
        } else {
            $option.removeClass('d-none').addClass('d-flex');
        }
    });
}
function updateMoveButtons() {
    const $rows = $colSetTbody.find('tr');
    $rows.each(function(index) {
        $(this).find('.move-up').toggle(index > 0);
        $(this).find('.move-down').toggle(index < $rows.length - 1);
    });
}
function makeContractColRow(field, name, source) {
    const $row = $('<tr>').attr({ code: field, 'data-name': name, 'data-source': source, 'data-removable': '1' });
    $('<td>').text(name).appendTo($row);
    $('<td>').append($('<div class="form-check form-check-inline">').append($('<input class="form-check-input col-show" type="checkbox" checked>'))).appendTo($row);
    $('<td class="disabled">').text('-').appendTo($row);
    $('<td class="text-nowrap">').append(
        $('<a href="javascript:;" class="move-up text-primary mr-2">').text('上移'),
        $('<a href="javascript:;" class="move-down text-primary mr-2">').text('下移'),
        $('<a href="javascript:;" class="remove-contract-col text-danger">').text('移除')
    ).appendTo($row);
    return $row;
}
$colSetModal.on('shown.bs.modal', function() { syncContractColOptions(); updateMoveButtons(); });
$colSetModal.on('hidden.bs.modal', function() {
    $colSetTbody.html(_initialColSetTbodyHtml);
    $colSetModal.find('.contract-col-options').html(_initialColOptionsHtml);
    syncContractColOptions(); updateMoveButtons();
});
$colSetModal.on('click', '.add-contract-col', function() {
    const $option = $(this).closest('.contract-col-option');
    const field = $option.data('field');
    if ($colSetTbody.find('tr[code="' + field + '"]').length) return;
    $colSetTbody.append(makeContractColRow(field, $option.data('name'), $option.data('source')));
    syncContractColOptions(); updateMoveButtons();
});
$colSetTbody.on('click', '.remove-contract-col', function(e) { e.preventDefault(); $(this).closest('tr').remove(); syncContractColOptions(); updateMoveButtons(); });
$colSetTbody.on('click', '.move-up', function(e) { e.preventDefault(); const $row = $(this).closest('tr'), $prev = $row.prev('tr'); if ($prev.length) $row.insertBefore($prev); updateMoveButtons(); });
$colSetTbody.on('click', '.move-down', function(e) { e.preventDefault(); const $row = $(this).closest('tr'), $next = $row.next('tr'); if ($next.length) $row.insertAfter($next); updateMoveButtons(); });
syncContractColOptions(); updateMoveButtons();
function onSetCol() {
    const colSet = getCurrentContractColSet();
    $colSetModal.find('input[name=col_set]').val(JSON.stringify(colSet));
    return true;
}
function getCurrentContractColSet() {
    const colSet = [];
    $colSetTbody.find('tr').each(function() {
        const $row = $(this), $alias = $row.find('.col-alias');
        colSet.push({ field: $row.attr('code'), show: Number($row.find('.col-show').is(':checked')), alias: $alias.length ? $alias.val().trim() : '' });
    });
    return colSet;
}
$('#open-copy-contract-col-set').on('click', function() {
    $('#copy-contract-col-set').find('.copy-contract-col-target').prop('checked', false);
    $('#copy-contract-col-set').modal('show');
});
$('#copy-contract-col-set').on('shown.bs.modal', function() {
    const $backdrops = $('.modal-backdrop');
    $backdrops.last().css('z-index', 1055);
});
$('#copy-contract-col-set').on('hidden.bs.modal', function() {
    if ($colSetModal.hasClass('show')) $('body').addClass('modal-open');
});
$('#copy-contract-col-set-ok').on('click', function() {
    const targetIds = $('#copy-contract-col-set .copy-contract-col-target:checked').map(function() { return this.value; }).get();
    if (!targetIds.length) { toastr.warning('请选择需要设置的<%- contractColCopyScope === 'tender' ? '标段' : '子项目' %>'); return; }
    const url = '/sp/<%- ctx.subProject.id %>/contract/<%- ctx.contractOptions.tid ? 'tender/' + ctx.contractOptions.tid + '/' : '' %>col-set/copy';
    postData(url, {
        type: <%- ctx.contract_type %>,
        col_set: getCurrentContractColSet(),
        target_ids: targetIds,
    }, function(data, msg) {
        $('#copy-contract-col-set').modal('hide');
        toastr.success(msg || ('已设置至' + data.count + '个目标'));
    });
});
</script>