|
|
@@ -1,162 +1,213 @@
|
|
|
<!--弹出列设置-->
|
|
|
+<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" role="document">
|
|
|
+ <div class="modal-dialog modal-xl" role="document">
|
|
|
<div class="modal-content">
|
|
|
- <div class="modal-header">
|
|
|
- <h5 class="modal-title">列设置</h5>
|
|
|
+ <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">
|
|
|
- <table class="table table-hover table-bordered">
|
|
|
- <thead><tr><th width="150px" class="text-center">列名</th><th width="50px" class="text-center">显示</th><th width="150px" class="text-center">别名</th><th width="80px" class="text-center">操作</th></tr></thead>
|
|
|
- <tbody class="text-center">
|
|
|
- <% for (const cs of colSet) { %>
|
|
|
- <tr code="<%- cs.field %>">
|
|
|
- <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>
|
|
|
- <% if (cs.fixed.indexOf('show') >= 0 ) { %>
|
|
|
- <td>
|
|
|
- <div class="form-check form-check-inline">
|
|
|
- <input class="form-check-input" type="checkbox" id="inlineCheckbox-<%- cs.code %>" checked="" disabled="">
|
|
|
- <label class="form-check-label" for="inlineCheckbox-<%- cs.code %>"></label>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- <% } else { %>
|
|
|
- <td>
|
|
|
- <div class="form-check form-check-inline">
|
|
|
- <input class="form-check-input" type="checkbox" id="inlineCheckbox-<%- cs.code %>" <% if (cs.show) { %> checked <% } %> >
|
|
|
- <label class="form-check-label" for="inlineCheckbox-<%- cs.code %>"></label>
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- <% } %>
|
|
|
- <% if (cs.fixed.indexOf('alias') >= 0) { %>
|
|
|
- <td class="disabled">-</td>
|
|
|
- <% } else {%>
|
|
|
- <td><input type="text" class="form-control form-control-sm" value="<%- cs.alias %>"></td>
|
|
|
- <% } %>
|
|
|
- <td>
|
|
|
- <% if (!cs.gd) { %>
|
|
|
- <a href="javascript:;" class="move-up text-primary mr-2" style="text-decoration: none;">上移</a>
|
|
|
- <a href="javascript:;" class="move-down text-primary" style="text-decoration: none;">下移</a>
|
|
|
- <% } %>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <% } %>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
+ <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>
|
|
|
- <form class="modal-footer" 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">
|
|
|
+ <div class="modal-footer">
|
|
|
<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
|
|
|
- <button type="submit" class="btn btn-primary btn-sm" id="add-bd-ok">确定修改</button>
|
|
|
- </form>
|
|
|
+ <button type="button" class="btn btn-primary btn-sm" id="copy-contract-col-set-ok">确认复制</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script>
|
|
|
-// 立即获取表格 tbody 并绑定事件(确保脚本加载时即可初始化)
|
|
|
-const $tbody = $('#col-set').find('.modal-body table tbody');
|
|
|
-
|
|
|
-// 保存初始 HTML,在关闭时恢复(保证再次打开时为初始状态)
|
|
|
-const _initialColSetTbodyHtml = $tbody.html();
|
|
|
-
|
|
|
-// 更新上下移链接显示状态
|
|
|
-function updateMoveButtons() {
|
|
|
- const $movableRows = $tbody.find('tr').filter(function() {
|
|
|
- return $(this).find('.move-up, .move-down').length > 0;
|
|
|
- });
|
|
|
- const totalRows = $movableRows.length;
|
|
|
-
|
|
|
- $movableRows.each(function(index) {
|
|
|
- const $row = $(this);
|
|
|
- const $upLink = $row.find('.move-up');
|
|
|
- const $downLink = $row.find('.move-down');
|
|
|
-
|
|
|
- if (totalRows === 1) {
|
|
|
- $upLink.hide();
|
|
|
- $downLink.hide();
|
|
|
- } else if (index === 0) {
|
|
|
- $upLink.hide();
|
|
|
- $downLink.show();
|
|
|
- } else if (index === totalRows - 1) {
|
|
|
- $upLink.show();
|
|
|
- $downLink.hide();
|
|
|
+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 {
|
|
|
- $upLink.show();
|
|
|
- $downLink.show();
|
|
|
+ $option.removeClass('d-none').addClass('d-flex');
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
-
|
|
|
-// 立即初始化链接状态(页面渲染完成后就计算显示)
|
|
|
-updateMoveButtons();
|
|
|
-
|
|
|
-// 若模态框打开后表格有异步或动态变更,打开时再次校验状态
|
|
|
-$('#col-set').on('shown.bs.modal', function() {
|
|
|
- updateMoveButtons();
|
|
|
-});
|
|
|
-
|
|
|
-// 模态框隐藏时恢复到初始内容并重新绑定必要状态
|
|
|
-$('#col-set').on('hidden.bs.modal', function() {
|
|
|
- // 恢复初始 tbody 内容
|
|
|
- $tbody.html(_initialColSetTbodyHtml);
|
|
|
- // 重新计算按钮显示状态
|
|
|
- updateMoveButtons();
|
|
|
-});
|
|
|
-
|
|
|
-// 事件委托:从一开始就绑定上/下移事件
|
|
|
-$tbody.on('click', '.move-up', function(e) {
|
|
|
- e.preventDefault();
|
|
|
- const $currentRow = $(this).closest('tr');
|
|
|
- const $prevRow = $currentRow.prev('tr');
|
|
|
-
|
|
|
- if ($prevRow.find('.move-up, .move-down').length) {
|
|
|
- $currentRow.insertBefore($prevRow);
|
|
|
- updateMoveButtons();
|
|
|
- }
|
|
|
+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();
|
|
|
});
|
|
|
-
|
|
|
-$tbody.on('click', '.move-down', function(e) {
|
|
|
- e.preventDefault();
|
|
|
- const $currentRow = $(this).closest('tr');
|
|
|
- const $nextRow = $currentRow.next('tr');
|
|
|
-
|
|
|
- if ($nextRow.find('.move-up, .move-down').length) {
|
|
|
- $currentRow.insertAfter($nextRow);
|
|
|
- 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 $tbody = $('#col-set').find('.modal-body table tbody');
|
|
|
- const $currentRows = $tbody.find('tr');
|
|
|
+ const colSet = getCurrentContractColSet();
|
|
|
+ $colSetModal.find('input[name=col_set]').val(JSON.stringify(colSet));
|
|
|
+ return true;
|
|
|
+}
|
|
|
+function getCurrentContractColSet() {
|
|
|
const colSet = [];
|
|
|
-
|
|
|
- $currentRows.each(function() {
|
|
|
- const $row = $(this);
|
|
|
- let alias = '';
|
|
|
- const $aliasInput = $row.find('input[type="text"]');
|
|
|
- if ($aliasInput.length) {
|
|
|
- alias = $aliasInput.val().trim();
|
|
|
- }
|
|
|
-
|
|
|
- // 仅组装数据库需要的3个字段
|
|
|
- const rowData = {
|
|
|
- field: $row.attr('code'), // 字段标识(必填)
|
|
|
- show: Number($row.find('.form-check-input').is(':checked')), // 是否显示(必填)
|
|
|
- alias: alias // 别名(必填,固定列保存"-")
|
|
|
- };
|
|
|
-
|
|
|
- colSet.push(rowData); // 所有行按顺序存入数组,顺序=表格排序
|
|
|
+ $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() : '' });
|
|
|
});
|
|
|
-
|
|
|
- $('input[name=col_set]').val(JSON.stringify(colSet));
|
|
|
- return true;
|
|
|
+ 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>
|