feat(dashboard): 区间改为可新增多行,支持同时在区间和排除区间

- 点击新增按钮添加一行区间筛选
- 每行可切换在区间/排除区间模式
- 多个区间同时生效:在区间=白名单(任一命中即可)、排除区间=黑名单(任一命中即屏蔽)
- 支持删除单行区间
- 重置按钮清空所有区间
This commit is contained in:
2026-04-28 19:34:20 +08:00
parent b14bebb143
commit 5f4c4acfaa
+75 -27
View File
@@ -785,12 +785,9 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
'</div>' +
'<div style="margin-bottom:15px;">' +
' <label style="margin-right:10px;">区间:</label>' +
' <button class="btn btn-xs btn-info nf-range-mode" id="nf-range-mode-include" data-mode="include">在区间</button>' +
' <button class="btn btn-xs btn-default nf-range-mode" id="nf-range-mode-exclude" data-mode="exclude">排除区间</button>' +
' <input type="number" id="nf-range-min" class="form-control" value="1" min="1" max="49" style="width:70px;display:inline-block;">' +
' <span style="margin:0 5px;">—</span>' +
' <input type="number" id="nf-range-max" class="form-control" value="49" min="1" max="49" style="width:70px;display:inline-block;">' +
' <button class="btn btn-xs btn-primary btn-nf-add-range"><i class="fa fa-plus"></i> 新增</button>' +
'</div>' +
'<div id="nf-range-list" style="margin-bottom:15px;"></div>' +
'<div id="nf-numbers" style="display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;"></div>' +
'</div>';
@@ -823,15 +820,27 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
Controller.api.applyNumberFilters(layero);
});
// 区间模式切换
$('.nf-range-mode', layero).on('click', function () {
$('.nf-range-mode', layero).removeClass('btn-info').addClass('btn-default');
$(this).removeClass('btn-default').addClass('btn-info');
// 新增区间
$('.btn-nf-add-range', layero).on('click', function () {
Controller.api.addRangeRow(layero, 1, 49, 'include');
Controller.api.applyNumberFilters(layero);
});
// 区间输入
$('#nf-range-min, #nf-range-max', layero).on('input', function () {
// 区间输入 & 删除事件委托
$('#nf-range-list', layero).on('input change', '.nf-range-min, .nf-range-max', function () {
Controller.api.applyNumberFilters(layero);
});
$('#nf-range-list', layero).on('click', '.nf-range-mode', function () {
var $btn = $(this);
if ($btn.hasClass('btn-info')) {
$btn.removeClass('btn-info').addClass('btn-default');
} else {
$btn.removeClass('btn-default').addClass('btn-info');
}
Controller.api.applyNumberFilters(layero);
});
$('#nf-range-list', layero).on('click', '.nf-range-del', function () {
$(this).closest('.nf-range-row').remove();
Controller.api.applyNumberFilters(layero);
});
@@ -840,16 +849,30 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
$('#nf-tail', layero).val('');
$('.nf-zodiac', layero).removeClass('btn-gray').addClass('btn-default');
$('.nf-color-btn', layero).removeClass('btn-gray').addClass('btn-default');
$('#nf-range-min', layero).val(1);
$('#nf-range-max', layero).val(49);
$('.nf-range-mode', layero).removeClass('btn-info').addClass('btn-default');
$('#nf-range-mode-include', layero).removeClass('btn-default').addClass('btn-info');
$('#nf-range-list', layero).html('');
Controller.api.applyNumberFilters(layero);
});
}
});
},
/**
* 新增一行区间筛选
*/
addRangeRow: function (layero, min, max, mode) {
var rowId = 'nf-range-' + Date.now();
var isInclude = mode === 'include';
var html = '<div class="nf-range-row" id="' + rowId + '" style="display:flex;align-items:center;gap:6px;margin-bottom:6px;">' +
' <span style="font-size:12px;color:#999;white-space:nowrap;">' + (isInclude ? '在区间' : '排除') + '</span>' +
' <input type="number" class="form-control nf-range-min" value="' + min + '" min="1" max="49" style="width:65px;display:inline-block;">' +
' <span style="margin:0 3px;">—</span>' +
' <input type="number" class="form-control nf-range-max" value="' + max + '" min="1" max="49" style="width:65px;display:inline-block;">' +
' <button class="btn btn-xs ' + (isInclude ? 'btn-info' : 'btn-default') + ' nf-range-mode" data-mode="' + mode + '">' + (isInclude ? '在区间' : '排除区间') + '</button>' +
' <button class="btn btn-xs btn-danger nf-range-del"><i class="fa fa-times"></i></button>' +
'</div>';
$('#nf-range-list', layero).append(html);
},
/**
* 渲染筛号器号码网格
*/
@@ -887,10 +910,15 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
$('.nf-color-btn.btn-gray', layero).each(function () {
excludedColors.push($(this).data('color'));
});
// 区间筛选
var rangeMin = parseInt($('#nf-range-min', layero).val()) || 1;
var rangeMax = parseInt($('#nf-range-max', layero).val()) || 49;
var rangeMode = $('#nf-range-mode-include', layero).hasClass('btn-info') ? 'include' : 'exclude';
// 收集所有区间
var ranges = [];
$('.nf-range-row', layero).each(function () {
var $row = $(this);
var min = parseInt($row.find('.nf-range-min').val()) || 1;
var max = parseInt($row.find('.nf-range-max').val()) || 49;
var mode = $row.find('.nf-range-mode').hasClass('btn-info') ? 'include' : 'exclude';
ranges.push({min: min, max: max, mode: mode});
});
$('.nf-number', layero).each(function () {
var $num = $(this);
@@ -905,16 +933,36 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
if (tailVal !== '' && parseInt(tailVal) === tail) {
hidden = true;
}
// 区间筛选
if (rangeMode === 'include') {
// 在区间模式:不在区间内则屏蔽
if (num < rangeMin || num > rangeMax) {
// 区间筛选:在区间=白名单(OR)、排除区间=黑名单(OR)
if (!hidden) {
var includeRanges = [];
var excludeRanges = [];
for (var r = 0; r < ranges.length; r++) {
if (ranges[r].mode === 'include') {
includeRanges.push(ranges[r]);
} else {
excludeRanges.push(ranges[r]);
}
}
// 黑名单:任一排除区间命中则屏蔽
for (var r = 0; r < excludeRanges.length; r++) {
if (num >= excludeRanges[r].min && num <= excludeRanges[r].max) {
hidden = true;
break;
}
}
// 白名单:有在区间规则时,号码不在任一区间则屏蔽
if (!hidden && includeRanges.length > 0) {
var inAnyInclude = false;
for (var r = 0; r < includeRanges.length; r++) {
if (num >= includeRanges[r].min && num <= includeRanges[r].max) {
inAnyInclude = true;
break;
}
}
if (!inAnyInclude) {
hidden = true;
}
} else {
// 排除区间模式:在区间内则屏蔽
if (num >= rangeMin && num <= rangeMax) {
hidden = true;
}
}
// 排除的生肖