feat(dashboard): 尾号筛选改为可新增多行

- 点击新增按钮添加尾号下拉选择
- 支持添加多个尾号,任一选中即屏蔽
- 支持删除单个尾号行
- 重置清空所有尾号
This commit is contained in:
2026-04-28 19:42:51 +08:00
parent 5f4c4acfaa
commit 96091670f8
+41 -12
View File
@@ -749,15 +749,11 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
'<div style="margin-bottom:15px;display:flex;gap:15px;align-items:center;flex-wrap:wrap;">' + '<div style="margin-bottom:15px;display:flex;gap:15px;align-items:center;flex-wrap:wrap;">' +
' <div class="form-group" style="margin:0;">' + ' <div class="form-group" style="margin:0;">' +
' <label>尾号筛选:</label>' + ' <label>尾号筛选:</label>' +
' <select id="nf-tail" class="form-control" style="width:100px;display:inline-block;">' + ' <button class="btn btn-xs btn-primary btn-nf-add-tail"><i class="fa fa-plus"></i> 新增</button>' +
' <option value="">全部</option>';
for (var t = 0; t <= 9; t++) {
html += '<option value="' + t + '">' + t + '</option>';
}
html += ' </select>' +
' </div>' + ' </div>' +
' <button class="btn btn-default btn-nf-reset" style="margin-left:auto;"><i class="fa fa-refresh"></i> 重置</button>' + ' <button class="btn btn-default btn-nf-reset" style="margin-left:auto;"><i class="fa fa-refresh"></i> 重置</button>' +
'</div>' + '</div>' +
'<div id="nf-tail-list" style="margin-bottom:15px;display:flex;flex-wrap:wrap;gap:6px;"></div>' +
'<div style="margin-bottom:15px;">' + '<div style="margin-bottom:15px;">' +
' <label style="margin-right:10px;">生肖:</label>' + ' <label style="margin-right:10px;">生肖:</label>' +
' <div id="nf-zodiac" style="display:inline-flex;gap:6px;flex-wrap:wrap;">' + ' <div id="nf-zodiac" style="display:inline-flex;gap:6px;flex-wrap:wrap;">' +
@@ -801,8 +797,18 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
// 渲染号码网格 // 渲染号码网格
Controller.api.renderNumberFilterGrid(layero); Controller.api.renderNumberFilterGrid(layero);
// 尾号下拉选择 // 新增尾号
$('#nf-tail', layero).on('change', function () { $('.btn-nf-add-tail', layero).on('click', function () {
Controller.api.addTailRow(layero, 0);
Controller.api.applyNumberFilters(layero);
});
// 尾号输入 & 删除事件委托
$('#nf-tail-list', layero).on('input change', '.nf-tail-select', function () {
Controller.api.applyNumberFilters(layero);
});
$('#nf-tail-list', layero).on('click', '.nf-tail-del', function () {
$(this).closest('.nf-tail-row').remove();
Controller.api.applyNumberFilters(layero); Controller.api.applyNumberFilters(layero);
}); });
@@ -846,7 +852,7 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
// 重置按钮 // 重置按钮
$('.btn-nf-reset', layero).on('click', function () { $('.btn-nf-reset', layero).on('click', function () {
$('#nf-tail', layero).val(''); $('#nf-tail-list', layero).html('');
$('.nf-zodiac', layero).removeClass('btn-gray').addClass('btn-default'); $('.nf-zodiac', layero).removeClass('btn-gray').addClass('btn-default');
$('.nf-color-btn', layero).removeClass('btn-gray').addClass('btn-default'); $('.nf-color-btn', layero).removeClass('btn-gray').addClass('btn-default');
$('#nf-range-list', layero).html(''); $('#nf-range-list', layero).html('');
@@ -856,6 +862,22 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
}); });
}, },
/**
* 新增一行尾号筛选
*/
addTailRow: function (layero, value) {
var rowId = 'nf-tail-' + Date.now() + Math.random().toString(36).substr(2, 5);
var opts = '<option value="">尾号</option>';
for (var t = 0; t <= 9; t++) {
opts += '<option value="' + t + '"' + (t === value ? ' selected' : '') + '>' + t + '</option>';
}
var html = '<div class="nf-tail-row" id="' + rowId + '" style="display:inline-flex;align-items:center;gap:4px;">' +
' <select class="form-control nf-tail-select" style="width:80px;display:inline-block;">' + opts + '</select>' +
' <button class="btn btn-xs btn-danger nf-tail-del"><i class="fa fa-times"></i></button>' +
'</div>';
$('#nf-tail-list', layero).append(html);
},
/** /**
* 新增一行区间筛选 * 新增一行区间筛选
*/ */
@@ -899,7 +921,14 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
* 应用筛号器过滤条件 * 应用筛号器过滤条件
*/ */
applyNumberFilters: function (layero) { applyNumberFilters: function (layero) {
var tailVal = $('#nf-tail', layero).val(); // 收集所有选中的尾号
var excludedTails = [];
$('.nf-tail-select', layero).each(function () {
var val = $(this).val();
if (val !== '' && excludedTails.indexOf(parseInt(val)) === -1) {
excludedTails.push(parseInt(val));
}
});
// 收集被点击(置灰)的生肖 // 收集被点击(置灰)的生肖
var excludedZodiacs = []; var excludedZodiacs = [];
$('.nf-zodiac.btn-gray', layero).each(function () { $('.nf-zodiac.btn-gray', layero).each(function () {
@@ -929,8 +958,8 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefin
var hidden = false; var hidden = false;
// 尾号筛选:选择了具体尾号则屏蔽该尾号 // 尾号筛选:选中多个尾号,任一命中即屏蔽
if (tailVal !== '' && parseInt(tailVal) === tail) { if (excludedTails.length > 0 && excludedTails.indexOf(tail) !== -1) {
hidden = true; hidden = true;
} }
// 区间筛选:在区间=白名单(OR)、排除区间=黑名单(OR) // 区间筛选:在区间=白名单(OR)、排除区间=黑名单(OR)