在 public/assets/js/backend/history.js 中添加遗漏号码弹窗相关代码。
**位置 1:在 Controller.index() 函数内,Table.api.bindevent(table) 调用之后,添加按钮事件绑定:**
在 `Table.api.bindevent(table);` 这一行之后添加:
```javascript
// 遗漏号码按钮事件
$(document).off('click', '.btn-missingnum').on('click', '.btn-missingnum', function () {
Controller.api.showMissingNumDialog();
});
```
使用 `off().on()` 防止重复绑定(FastAdmin 在 tab 切换时可能重复初始化)。
**位置 2:在 Controller.api 对象中添加三个新方法(在 bindevent 方法之前):**
```javascript
/**
* 显示遗漏号码分析弹窗
*/
showMissingNumDialog: function () {
var html = '' +
'
' +
' ' +
' ' +
' ' +
'
' +
'
' +
'
';
Layer.open({
type: 1,
title: __('Missing Number Analysis'),
area: ['650px', '550px'],
content: html,
shadeClose: true,
success: function (layero, index) {
// 绑定查询按钮事件
$('#btn-missing-query', layero).on('click', function () {
var periods = parseInt($('#missing-periods', layero).val()) || 10;
Controller.api.queryMissingNum(periods, layero);
});
}
});
},
/**
* 查询遗漏号码
*/
queryMissingNum: function (periods, layero) {
// 确保颜色映射已加载
if (!Controller.api.colorMapLoaded) {
Controller.api.loadColorMap(function () {
Controller.api._doQueryMissingNum(periods, layero);
});
} else {
Controller.api._doQueryMissingNum(periods, layero);
}
},
/**
* 执行遗漏号码查询(内部方法)
*/
_doQueryMissingNum: function (periods, layero) {
$('#missing-result', layero).html(' ' + __('Loading') + '
');
$.ajax({
url: 'history/missingNum',
type: 'GET',
data: { periods: periods },
dataType: 'json',
success: function (ret) {
if (ret.code == 1) {
Controller.api.renderMissingNum(ret.data, periods, layero);
} else {
$('#missing-result', layero).html('' + (ret.msg || __('Query failed')) + '
');
}
},
error: function () {
$('#missing-result', layero).html('' + __('Query failed') + '
');
}
});
},
/**
* 渲染遗漏号码结果
*/
renderMissingNum: function (data, periods, layero) {
if (!data || data.length === 0) {
$('#missing-result', layero).html('' + __('No missing numbers found') + '
');
return;
}
var html = '';
for (var i = 0; i < data.length; i++) {
var color = Controller.api.getColorByNum(data[i].num);
html += '
' +
'
' + data[i].num + '' +
'
' + __('Missing') + ' ' + data[i].omit + ' ' + __('periods') + '
' +
'
';
}
html += '
';
$('#missing-result', layero).html(html);
},
```
关键实现细节:
- 弹窗 HTML 使用 Bootstrap 3 form-group 和 form-control 样式
- 输入框 type="number",默认值 10,min=1,max=100,宽度 120px 内联显示
- 查询按钮在输入框右侧,margin-left:10px
- 结果区域 id="missing-result",初始为空
- Layer.open 使用 type:1(page 类型),area: ['650px', '550px'],shadeClose:true(点击遮罩关闭)
- success 回调中绑定查询按钮事件,使用 layero 作为上下文选择器根(`$('#btn-missing-query', layero)`)
- queryMissingNum 先检查 colorMapLoaded,未加载则先调用 loadColorMap
- AJAX 使用标准 $.ajax,url 为 'history/missingNum',type 为 'GET'
- 响应判断 `ret.code == 1`(FastAdmin 成功标志)
- 加载状态显示 spinner + 文字
- 渲染时使用 flex 布局(display:flex; flex-wrap:wrap; gap:12px)展示球网格
- 每个球 48x48px,圆角 50%,白色文字,背景色来自 getColorByNum()
- 球下方显示"遗漏 X 期"文字,12px 灰色字体
- 所有文本使用 __('key') 获取 i18n
- 空结果时显示 alert-info 提示
不要修改现有的 Controller.index、Controller.add、Controller.edit 方法签名。只在 index 函数内追加按钮事件绑定,在 api 对象内追加新方法。