|
|
@@ -1,56 +1,48 @@
|
|
1
|
|
-import { Component, OnInit, ChangeDetectorRef, AfterViewInit, OnDestroy, ViewChild, ElementRef, Renderer2 } from '@angular/core';
|
|
|
1
|
+import { Component, OnInit, ChangeDetectorRef, AfterViewInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
|
|
2
|
2
|
import { CommonModule } from '@angular/common';
|
|
3
|
3
|
import { MatCard, MatCardContent } from '@angular/material/card';
|
|
4
|
4
|
|
|
5
|
5
|
import { HttpErrorResponse } from '@angular/common/http';
|
|
6
|
|
-import { StickyHeaderComponent } from 'base-core';
|
|
|
6
|
+import { StickyHeaderComponent, TabulatorTableComponent } from 'base-core';
|
|
7
|
7
|
import { ConfigMeta } from '../../models/config-meta.model';
|
|
8
|
8
|
import { ConfigMetaService } from '../../services/config-meta.service';
|
|
9
|
|
-import { AgGridAngular } from 'ag-grid-angular';
|
|
10
|
|
-import { ColDef, GridReadyEvent, PaginationChangedEvent, GridApi, IDatasource, IGetRowsParams, ModuleRegistry } from 'ag-grid-community';
|
|
11
|
|
-import { InfiniteRowModelModule, PaginationModule, RowSelectionModule } from 'ag-grid-community';
|
|
12
|
9
|
import { ConfigMetaQueryRequest, PaginatedQueryResult } from '../../models/config-meta.model';
|
|
13
|
10
|
|
|
14
|
|
-// 注册 AG Grid 模块
|
|
15
|
|
-ModuleRegistry.registerModules([
|
|
16
|
|
- InfiniteRowModelModule,
|
|
17
|
|
- PaginationModule,
|
|
18
|
|
- RowSelectionModule
|
|
19
|
|
-]);
|
|
20
|
|
-
|
|
21
|
11
|
@Component({
|
|
22
|
12
|
selector: 'app-service-register-config',
|
|
23
|
|
- imports: [CommonModule, MatCard, MatCardContent, StickyHeaderComponent, AgGridAngular],
|
|
|
13
|
+ imports: [CommonModule, MatCard, MatCardContent, StickyHeaderComponent, TabulatorTableComponent],
|
|
24
|
14
|
templateUrl: './service-register-config.component.html',
|
|
25
|
15
|
styleUrl: './service-register-config.component.scss'
|
|
26
|
16
|
})
|
|
27
|
17
|
export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
28
|
18
|
title = '注册服务配置';
|
|
29
|
19
|
hintText = '点击"注册"按钮将同步所有配置元信息到数据库，并显示配置列表。';
|
|
30
|
|
-
|
|
31
|
|
- // AG Grid 配置
|
|
32
|
|
- columnDefs: ColDef[] = [
|
|
33
|
|
- { field: 'id', headerName: 'ID', width: 120 },
|
|
34
|
|
- { field: 'configName', headerName: '配置名称', width: 150 },
|
|
35
|
|
- { field: 'fieldName', headerName: '字段名', width: 150 },
|
|
36
|
|
- { field: 'fieldType', headerName: '字段类型', width: 120 },
|
|
37
|
|
- { field: 'yamlName', headerName: 'YAML名称', width: 150 },
|
|
38
|
|
- { field: 'fieldDesc', headerName: '字段描述', width: 200 },
|
|
39
|
|
- { field: 'creator', headerName: '创建者', width: 120 },
|
|
40
|
|
- { field: 'createdAt', headerName: '创建时间', width: 180 }
|
|
|
20
|
+
|
|
|
21
|
+ // Tabulator 配置
|
|
|
22
|
+ tabulatorColumns: any[] = [
|
|
|
23
|
+ { title: 'ID', field: 'id', width: 120, sorter: 'string' },
|
|
|
24
|
+ { title: '配置名称', field: 'configName', width: 150, sorter: 'string' },
|
|
|
25
|
+ { title: '字段名', field: 'fieldName', width: 150, sorter: 'string' },
|
|
|
26
|
+ { title: '字段类型', field: 'fieldType', width: 120, sorter: 'string' },
|
|
|
27
|
+ { title: 'YAML名称', field: 'yamlName', width: 150, sorter: 'string' },
|
|
|
28
|
+ { title: '字段描述', field: 'fieldDesc', width: 200, sorter: 'string' },
|
|
|
29
|
+ { title: '创建者', field: 'creator', width: 120, sorter: 'string' },
|
|
|
30
|
+ { title: '创建时间', field: 'createdAt', width: 180, sorter: 'datetime' }
|
|
41
|
31
|
];
|
|
42
|
|
- rowData: any[] = [];
|
|
43
|
|
- datasource: IDatasource | undefined = undefined;
|
|
44
|
|
- configMetaList: ConfigMeta[] = [];
|
|
|
32
|
+
|
|
|
33
|
+ configMetaList: ConfigMeta[] = [];
|
|
45
|
34
|
|
|
46
|
|
- // 分页配置
|
|
47
|
|
- paginationPageSize = 100;
|
|
|
35
|
+ // 分页配置
|
|
|
36
|
+ paginationPageSize = 100;
|
|
48
|
37
|
currentPage = 1;
|
|
49
|
38
|
totalRecords = 0;
|
|
50
|
|
- gridApi: GridApi | null = null;
|
|
|
39
|
+
|
|
|
40
|
+ // Tabulator 数据
|
|
|
41
|
+ tableData: any[] = [];
|
|
51
|
42
|
|
|
52
|
43
|
loading = false;
|
|
53
|
44
|
registering = false;
|
|
|
45
|
+ errorMessage: string | null = null;
|
|
54
|
46
|
|
|
55
|
47
|
// 注意：滚动状态现在由 sticky-header 组件自动检测管理
|
|
56
|
48
|
// 使用 [autoDetect]="true" 启用自动滚动检测
|
|
|
@@ -67,23 +59,37 @@ export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit, On
|
|
67
|
59
|
pageSize: 10
|
|
68
|
60
|
};
|
|
69
|
61
|
|
|
70
|
|
- @ViewChild(AgGridAngular) agGrid!: AgGridAngular;
|
|
|
62
|
+ @ViewChild('tabulator') tabulator!: TabulatorTableComponent;
|
|
71
|
63
|
@ViewChild('matCard', { read: ElementRef }) matCardRef!: ElementRef;
|
|
72
|
64
|
|
|
73
|
65
|
constructor(
|
|
74
|
66
|
private configMetaService: ConfigMetaService,
|
|
75
|
67
|
private cdRef: ChangeDetectorRef,
|
|
76
|
|
- private elementRef: ElementRef,
|
|
77
|
|
- private renderer: Renderer2
|
|
|
68
|
+ private elementRef: ElementRef
|
|
78
|
69
|
) {}
|
|
79
|
70
|
|
|
80
|
|
- ngOnInit() {
|
|
81
|
|
- console.log('ServiceRegisterConfigComponent initialized');
|
|
82
|
|
- }
|
|
|
71
|
+ ngOnInit() {
|
|
|
72
|
+ console.log('ServiceRegisterConfigComponent initialized');
|
|
|
73
|
+
|
|
|
74
|
+ // 默认使用API数据，可通过调试信息切换为模拟数据
|
|
|
75
|
+ this.debugInfo.useMockData = false;
|
|
|
76
|
+ this.updateDataConfig();
|
|
|
77
|
+
|
|
|
78
|
+ // 加载数据
|
|
|
79
|
+ this.loadData();
|
|
|
80
|
+
|
|
|
81
|
+ console.log('初始化完成，配置状态:', {
|
|
|
82
|
+ useMockData: this.debugInfo.useMockData,
|
|
|
83
|
+ tableDataLength: this.tableData.length,
|
|
|
84
|
+ paginationMode: 'local'
|
|
|
85
|
+ });
|
|
|
86
|
+ }
|
|
83
|
87
|
|
|
84
|
|
- loadData(page: number = 1) {
|
|
85
|
|
- this.loading = true;
|
|
86
|
|
- this.currentPage = page;
|
|
|
88
|
+ /**
|
|
|
89
|
+ * 加载数据（使用config-meta.service.ts）
|
|
|
90
|
+ */
|
|
|
91
|
+ loadData(page: number = 1): void {
|
|
|
92
|
+ console.log(`加载第${page}页数据，页大小: ${this.paginationPageSize}`);
|
|
87
|
93
|
|
|
88
|
94
|
// 构建查询请求
|
|
89
|
95
|
const request: ConfigMetaQueryRequest = {
|
|
|
@@ -91,26 +97,18 @@ export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit, On
|
|
91
|
97
|
pageSize: this.paginationPageSize
|
|
92
|
98
|
};
|
|
93
|
99
|
|
|
94
|
|
- console.log(`加载第${page}页数据，页大小: ${this.paginationPageSize}`);
|
|
|
100
|
+ this.loading = true;
|
|
95
|
101
|
|
|
96
|
102
|
this.configMetaService.listConfigMetaPaginated(request).subscribe({
|
|
97
|
|
- next: (result: PaginatedQueryResult<ConfigMeta[]>) => {
|
|
98
|
|
- this.loading = false;
|
|
99
|
|
-
|
|
100
|
|
- if (result.success && result.data) {
|
|
101
|
|
- this.rowData = result.data;
|
|
|
103
|
+ next: (result: PaginatedQueryResult<ConfigMeta[]>) => {
|
|
|
104
|
+ this.loading = false;
|
|
|
105
|
+ this.errorMessage = null;
|
|
|
106
|
+
|
|
|
107
|
+ if (result.success && result.data) {
|
|
|
108
|
+ this.tableData = result.data;
|
|
102
|
109
|
this.configMetaList = result.data;
|
|
103
|
110
|
this.totalRecords = result.totalCount || result.data.length;
|
|
104
|
111
|
|
|
105
|
|
- // 更新AG Grid分页总记录数
|
|
106
|
|
- if (this.gridApi) {
|
|
107
|
|
- // 设置总记录数，使分页控件显示正确的总页数
|
|
108
|
|
- this.gridApi.setGridOption('pagination', {
|
|
109
|
|
- total: this.totalRecords,
|
|
110
|
|
- pageSize: this.paginationPageSize
|
|
111
|
|
- } as any);
|
|
112
|
|
- }
|
|
113
|
|
-
|
|
114
|
112
|
// 更新调试信息
|
|
115
|
113
|
this.debugInfo.dataSource = 'API数据';
|
|
116
|
114
|
this.debugInfo.recordCount = this.totalRecords;
|
|
|
@@ -123,178 +121,139 @@ export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit, On
|
|
123
|
121
|
this.debugInfo.pageSize = this.paginationPageSize;
|
|
124
|
122
|
|
|
125
|
123
|
console.log(`数据加载成功: ${result.data.length}条记录，总计: ${this.totalRecords}`);
|
|
|
124
|
+ console.log('数据示例:', result.data.slice(0, 3)); // 打印前3条数据
|
|
126
|
125
|
} else {
|
|
127
|
126
|
console.error('数据加载失败:', result);
|
|
|
127
|
+ // 如果API失败，切换到模拟数据用于调试
|
|
|
128
|
+ this.debugInfo.useMockData = true;
|
|
|
129
|
+ this.updateDataConfig();
|
|
128
|
130
|
}
|
|
129
|
131
|
|
|
130
|
132
|
this.cdRef.detectChanges();
|
|
131
|
133
|
},
|
|
132
|
|
- error: (error: HttpErrorResponse) => {
|
|
133
|
|
- this.loading = false;
|
|
134
|
|
- console.error('加载数据时出错:', error);
|
|
135
|
|
- this.cdRef.detectChanges();
|
|
136
|
|
- }
|
|
|
134
|
+ error: (error: HttpErrorResponse) => {
|
|
|
135
|
+ this.loading = false;
|
|
|
136
|
+ console.error('加载数据时出错:', error);
|
|
|
137
|
+ console.error('错误详情:', error.error);
|
|
|
138
|
+
|
|
|
139
|
+ // 设置错误消息
|
|
|
140
|
+ this.errorMessage = `加载数据失败: ${error.status} ${error.statusText}`;
|
|
|
141
|
+
|
|
|
142
|
+ // API调用失败，切换到模拟数据
|
|
|
143
|
+ this.debugInfo.useMockData = true;
|
|
|
144
|
+ this.updateDataConfig();
|
|
|
145
|
+
|
|
|
146
|
+ this.cdRef.detectChanges();
|
|
|
147
|
+ }
|
|
137
|
148
|
});
|
|
138
|
149
|
}
|
|
139
|
150
|
|
|
140
|
|
- private generateMockData(page: number, pageSize: number): { data: any[], totalCount: number } {
|
|
141
|
|
- const totalMockCount = 200;
|
|
142
|
|
- const startIndex = page * pageSize;
|
|
143
|
|
- const endIndex = Math.min(startIndex + pageSize, totalMockCount);
|
|
|
151
|
+ /**
|
|
|
152
|
+ * 生成模拟数据（用于调试）
|
|
|
153
|
+ */
|
|
|
154
|
+ private generateMockData(): ConfigMeta[] {
|
|
|
155
|
+ const mockData: ConfigMeta[] = [];
|
|
|
156
|
+ const configs = ['app', 'database', 'redis', 'logger', 'cache'];
|
|
|
157
|
+ const fieldTypes = ['string', 'int', 'bool', 'config', 'array'];
|
|
|
158
|
+
|
|
|
159
|
+ for (let i = 1; i <= 200; i++) {
|
|
|
160
|
+ const configIndex = i % configs.length;
|
|
|
161
|
+ mockData.push({
|
|
|
162
|
+ id: `config-${i}`,
|
|
|
163
|
+ configName: configs[configIndex],
|
|
|
164
|
+ fieldName: `field_${i}`,
|
|
|
165
|
+ fieldType: fieldTypes[i % fieldTypes.length],
|
|
|
166
|
+ yamlName: `yaml.field.${i}`,
|
|
|
167
|
+ fieldDesc: `这是第 ${i} 个配置字段的描述`,
|
|
|
168
|
+ creator: `user_${(i % 5) + 1}`,
|
|
|
169
|
+ createdAt: new Date(Date.now() - i * 86400000).toISOString()
|
|
|
170
|
+ });
|
|
|
171
|
+ }
|
|
|
172
|
+ return mockData;
|
|
|
173
|
+ }
|
|
|
174
|
+
|
|
|
175
|
+ /**
|
|
|
176
|
+ * Tabulator事件处理器
|
|
|
177
|
+ */
|
|
|
178
|
+
|
|
|
179
|
+ onDataLoading(event: any): void {
|
|
|
180
|
+ console.log('数据加载中:', event);
|
|
|
181
|
+ this.loading = true;
|
|
|
182
|
+ this.cdRef.detectChanges();
|
|
|
183
|
+ }
|
|
|
184
|
+
|
|
|
185
|
+ onDataLoaded(event: any): void {
|
|
|
186
|
+ console.log('数据加载完成:', event);
|
|
|
187
|
+ this.loading = false;
|
|
|
188
|
+
|
|
|
189
|
+ // 提取实际数据
|
|
|
190
|
+ let data: any[] = [];
|
|
|
191
|
+ let totalCount = 0;
|
|
|
192
|
+ let lastPage = 0;
|
|
|
193
|
+
|
|
|
194
|
+ if (this.debugInfo.useMockData) {
|
|
|
195
|
+ // 模拟数据模式下，event是数据数组
|
|
|
196
|
+ data = Array.isArray(event) ? event : [];
|
|
|
197
|
+ totalCount = data.length;
|
|
|
198
|
+ this.totalRecords = totalCount;
|
|
144
|
199
|
|
|
145
|
|
- const mockData = [];
|
|
146
|
|
- for (let i = startIndex; i < endIndex; i++) {
|
|
147
|
|
- mockData.push({
|
|
148
|
|
- id: i + 1,
|
|
149
|
|
- configName: `配置${i + 1}`,
|
|
150
|
|
- fieldName: `field_${i + 1}`,
|
|
151
|
|
- fieldType: i % 3 === 0 ? 'string' : i % 3 === 1 ? 'number' : 'boolean',
|
|
152
|
|
- yamlName: `yaml_${i + 1}`,
|
|
153
|
|
- fieldDesc: `这是第${i + 1}个配置字段的描述`,
|
|
154
|
|
- creator: `用户${(i % 5) + 1}`,
|
|
155
|
|
- createdAt: new Date(Date.now() - i * 86400000).toISOString()
|
|
156
|
|
- });
|
|
|
200
|
+ // 更新调试信息
|
|
|
201
|
+ this.debugInfo.dataSource = '模拟数据';
|
|
|
202
|
+ this.debugInfo.recordCount = totalCount;
|
|
|
203
|
+ this.debugInfo.lastUpdated = new Date().toISOString();
|
|
|
204
|
+ this.debugInfo.registerUrl = '模拟数据 - 无API调用';
|
|
|
205
|
+ this.debugInfo.listUrl = '模拟数据 - 无API调用';
|
|
|
206
|
+ this.debugInfo.totalPages = Math.ceil(totalCount / this.paginationPageSize);
|
|
|
207
|
+ } else {
|
|
|
208
|
+ // 远程数据模式下，event是Tabulator格式 { last_page, data }
|
|
|
209
|
+ if (event && typeof event === 'object') {
|
|
|
210
|
+ if ('data' in event) {
|
|
|
211
|
+ data = Array.isArray(event.data) ? event.data : [];
|
|
|
212
|
+ }
|
|
|
213
|
+ if ('last_page' in event) {
|
|
|
214
|
+ lastPage = event.last_page;
|
|
|
215
|
+ totalCount = lastPage * this.paginationPageSize;
|
|
|
216
|
+ this.totalRecords = totalCount;
|
|
|
217
|
+ this.debugInfo.totalPages = lastPage;
|
|
|
218
|
+ }
|
|
157
|
219
|
}
|
|
158
|
220
|
|
|
159
|
|
- return {
|
|
160
|
|
- data: mockData,
|
|
161
|
|
- totalCount: totalMockCount
|
|
162
|
|
- };
|
|
|
221
|
+ // 更新调试信息
|
|
|
222
|
+ this.debugInfo.dataSource = 'API数据';
|
|
|
223
|
+ this.debugInfo.recordCount = totalCount;
|
|
|
224
|
+ this.debugInfo.lastUpdated = new Date().toISOString();
|
|
|
225
|
+ this.debugInfo.useMockData = false;
|
|
|
226
|
+ this.debugInfo.registerUrl = this.configMetaService.getInitUrl();
|
|
|
227
|
+ this.debugInfo.listUrl = this.configMetaService.getListUrl();
|
|
163
|
228
|
}
|
|
|
229
|
+
|
|
|
230
|
+ // 更新配置列表
|
|
|
231
|
+ this.configMetaList = data;
|
|
|
232
|
+ console.log(`数据加载完成: ${data.length}条记录，总计: ${totalCount}条`);
|
|
|
233
|
+
|
|
|
234
|
+ this.cdRef.detectChanges();
|
|
|
235
|
+ }
|
|
164
|
236
|
|
|
165
|
|
- createInfiniteDatasource(): IDatasource {
|
|
166
|
|
- return {
|
|
167
|
|
- getRows: (params: IGetRowsParams) => {
|
|
168
|
|
- const pageSize = this.paginationPageSize;
|
|
169
|
|
- const startRow = params.startRow;
|
|
170
|
|
- const page = Math.floor(startRow / pageSize);
|
|
171
|
|
-
|
|
172
|
|
- console.log(`Infinite row model: startRow=${startRow}, endRow=${params.endRow}, page=${page}, pageSize=${pageSize}`);
|
|
173
|
|
-
|
|
174
|
|
- // 使用模拟数据或真实API
|
|
175
|
|
- if (this.debugInfo.useMockData) {
|
|
176
|
|
- this.loading = true;
|
|
177
|
|
- setTimeout(() => {
|
|
178
|
|
- const mockResult = this.generateMockData(page, pageSize);
|
|
179
|
|
- const rowData = mockResult.data;
|
|
180
|
|
- const totalCount = mockResult.totalCount;
|
|
181
|
|
-
|
|
182
|
|
- const lastRow = totalCount > 0 ? totalCount : -1;
|
|
183
|
|
- params.successCallback(rowData, lastRow);
|
|
184
|
|
-
|
|
185
|
|
- // 更新调试信息
|
|
186
|
|
- this.debugInfo.dataSource = '模拟数据';
|
|
187
|
|
- this.debugInfo.recordCount = totalCount;
|
|
188
|
|
- this.debugInfo.lastUpdated = new Date().toISOString();
|
|
189
|
|
- this.debugInfo.registerUrl = '模拟数据 - 无API调用';
|
|
190
|
|
- this.debugInfo.listUrl = '模拟数据 - 无API调用';
|
|
191
|
|
- this.debugInfo.currentPage = page + 1;
|
|
192
|
|
- this.debugInfo.totalPages = Math.ceil(totalCount / pageSize);
|
|
193
|
|
- this.debugInfo.pageSize = pageSize;
|
|
194
|
|
-
|
|
195
|
|
- console.log(`模拟数据加载成功: ${rowData.length}条记录，总计: ${totalCount}`);
|
|
196
|
|
-
|
|
197
|
|
- // 更新组件状态
|
|
198
|
|
- this.totalRecords = totalCount;
|
|
199
|
|
- this.rowData = rowData;
|
|
200
|
|
- this.configMetaList = rowData;
|
|
201
|
|
- this.loading = false;
|
|
202
|
|
- this.cdRef.detectChanges();
|
|
203
|
|
- }, 100);
|
|
204
|
|
- } else {
|
|
205
|
|
- const request: ConfigMetaQueryRequest = {
|
|
206
|
|
- page: page,
|
|
207
|
|
- pageSize: pageSize
|
|
208
|
|
- };
|
|
209
|
|
-
|
|
210
|
|
- this.loading = true;
|
|
211
|
|
- this.configMetaService.listConfigMetaPaginated(request).subscribe({
|
|
212
|
|
- next: (result: PaginatedQueryResult<ConfigMeta[]>) => {
|
|
213
|
|
- this.loading = false;
|
|
214
|
|
- if (result.success && result.data) {
|
|
215
|
|
- const rowData = result.data;
|
|
216
|
|
- const totalCount = result.totalCount || 0;
|
|
217
|
|
-
|
|
218
|
|
- // 成功回调，提供行数据及总行数
|
|
219
|
|
- // 对于无限行模型，需要传递 rowCount（总行数）以便网格知道何时停止加载
|
|
220
|
|
- const lastRow = totalCount > 0 ? totalCount : -1;
|
|
221
|
|
- params.successCallback(rowData, lastRow);
|
|
222
|
|
-
|
|
223
|
|
- // 更新调试信息
|
|
224
|
|
- this.debugInfo.dataSource = 'API数据';
|
|
225
|
|
- this.debugInfo.recordCount = totalCount;
|
|
226
|
|
- this.debugInfo.lastUpdated = new Date().toISOString();
|
|
227
|
|
- this.debugInfo.useMockData = false;
|
|
228
|
|
- this.debugInfo.registerUrl = this.configMetaService.getInitUrl();
|
|
229
|
|
- this.debugInfo.listUrl = this.configMetaService.getListUrl();
|
|
230
|
|
- this.debugInfo.currentPage = page + 1;
|
|
231
|
|
- this.debugInfo.totalPages = Math.ceil(totalCount / pageSize);
|
|
232
|
|
- this.debugInfo.pageSize = pageSize;
|
|
233
|
|
-
|
|
234
|
|
- console.log(`无限行模型数据加载成功: ${rowData.length}条记录，总计: ${totalCount}`);
|
|
235
|
|
-
|
|
236
|
|
- // 更新组件状态
|
|
237
|
|
- this.totalRecords = totalCount;
|
|
238
|
|
- this.rowData = rowData;
|
|
239
|
|
- this.configMetaList = rowData;
|
|
240
|
|
- } else {
|
|
241
|
|
- console.error('无限行模型数据加载失败:', result);
|
|
242
|
|
- params.failCallback();
|
|
243
|
|
- }
|
|
244
|
|
- this.cdRef.detectChanges();
|
|
245
|
|
- },
|
|
246
|
|
- error: (error: HttpErrorResponse) => {
|
|
247
|
|
- this.loading = false;
|
|
248
|
|
- console.error('无限行模型加载数据时出错:', error);
|
|
249
|
|
- params.failCallback();
|
|
250
|
|
- this.cdRef.detectChanges();
|
|
251
|
|
- }
|
|
252
|
|
- });
|
|
253
|
|
- }
|
|
254
|
|
- },
|
|
255
|
|
- rowCount: undefined // 初始时不知道总行数，将在第一次加载后由successCallback提供
|
|
256
|
|
- };
|
|
257
|
|
- }
|
|
|
237
|
+ onDataLoadError(error: any): void {
|
|
|
238
|
+ console.error('数据加载错误:', error);
|
|
|
239
|
+ this.loading = false;
|
|
|
240
|
+ this.cdRef.detectChanges();
|
|
|
241
|
+ }
|
|
258
|
242
|
|
|
259
|
|
- onGridReady(params: GridReadyEvent) {
|
|
260
|
|
- this.gridApi = params.api;
|
|
261
|
|
- console.log('AG Grid ready, API initialized - setting infinite row model datasource');
|
|
262
|
|
-
|
|
263
|
|
- // 创建并设置无限行模型数据源
|
|
264
|
|
- this.datasource = this.createInfiniteDatasource();
|
|
265
|
|
-
|
|
266
|
|
- // 通过API设置数据源（确保网格使用它）
|
|
267
|
|
- params.api.setGridOption('datasource', this.datasource);
|
|
268
|
|
-
|
|
269
|
|
- // 添加分页事件监听器以更新调试信息
|
|
270
|
|
- params.api.addEventListener('paginationChanged', this.onPaginationChanged.bind(this));
|
|
271
|
|
-
|
|
272
|
|
- // 网格滚动监听器暂时禁用，使用窗口滚动
|
|
273
|
|
- // const gridElement = this.agGrid?.nativeElement;
|
|
274
|
|
- // if (gridElement) {
|
|
275
|
|
- // this.gridScrollListener = this.renderer.listen(
|
|
276
|
|
- // gridElement,
|
|
277
|
|
- // 'scroll',
|
|
278
|
|
- // this.handleScroll.bind(this)
|
|
279
|
|
- // );
|
|
280
|
|
- // console.log('网格滚动监听器已添加');
|
|
281
|
|
- // }
|
|
282
|
|
- }
|
|
283
|
|
-
|
|
284
|
|
- onPaginationChanged(event: PaginationChangedEvent) {
|
|
285
|
|
- if (!this.gridApi || event.newPage === undefined || typeof event.newPage !== 'number') {
|
|
286
|
|
- return;
|
|
287
|
|
- }
|
|
288
|
|
-
|
|
289
|
|
- const newPage = event.newPage + 1; // AG Grid页码从0开始，转换为从1开始
|
|
290
|
|
- if (newPage !== this.currentPage) {
|
|
291
|
|
- console.log(`分页改变: 从第${this.currentPage}页到第${newPage}页`);
|
|
292
|
|
- this.currentPage = newPage;
|
|
293
|
|
-
|
|
294
|
|
- // 更新调试信息中的当前页码
|
|
295
|
|
- this.debugInfo.currentPage = newPage;
|
|
296
|
|
- }
|
|
297
|
|
- }
|
|
|
243
|
+ onPageLoaded(page: number): void {
|
|
|
244
|
+ console.log('页面加载:', page);
|
|
|
245
|
+ this.currentPage = page;
|
|
|
246
|
+ this.debugInfo.currentPage = page;
|
|
|
247
|
+ this.cdRef.detectChanges();
|
|
|
248
|
+ }
|
|
|
249
|
+
|
|
|
250
|
+ onRowClick(event: any): void {
|
|
|
251
|
+ console.log('行点击:', event);
|
|
|
252
|
+ }
|
|
|
253
|
+
|
|
|
254
|
+ onRowSelected(event: any): void {
|
|
|
255
|
+ console.log('行选中:', event);
|
|
|
256
|
+ }
|
|
298
|
257
|
|
|
299
|
258
|
|
|
300
|
259
|
|
|
|
@@ -310,9 +269,29 @@ export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit, On
|
|
310
|
269
|
console.log('ServiceRegisterConfigComponent view initialized');
|
|
311
|
270
|
// 注意：滚动检测现在由 sticky-header 组件自动处理
|
|
312
|
271
|
// 通过 [autoDetect]="true" 启用
|
|
|
272
|
+ }
|
|
|
273
|
+
|
|
|
274
|
+ /**
|
|
|
275
|
+ * 根据模拟数据状态更新数据配置
|
|
|
276
|
+ */
|
|
|
277
|
+ private updateDataConfig(): void {
|
|
|
278
|
+ console.log('更新数据配置，当前useMockData:', this.debugInfo.useMockData);
|
|
313
|
279
|
|
|
314
|
|
- // 启用模拟数据用于测试滚动效果
|
|
315
|
|
- this.debugInfo.useMockData = true;
|
|
|
280
|
+ if (this.debugInfo.useMockData) {
|
|
|
281
|
+ // 使用模拟数据，设置静态数据
|
|
|
282
|
+ this.tableData = this.generateMockData();
|
|
|
283
|
+ console.log('使用模拟数据:', {
|
|
|
284
|
+ dataLength: this.tableData.length,
|
|
|
285
|
+ paginationMode: 'local'
|
|
|
286
|
+ });
|
|
|
287
|
+ } else {
|
|
|
288
|
+ // 使用真实API，清空静态数据，将通过loadData()加载
|
|
|
289
|
+ this.tableData = [];
|
|
|
290
|
+ console.log('使用API数据:', {
|
|
|
291
|
+ dataLength: this.tableData.length,
|
|
|
292
|
+ paginationMode: 'remote'
|
|
|
293
|
+ });
|
|
|
294
|
+ }
|
|
316
|
295
|
}
|
|
317
|
296
|
|
|
318
|
297
|
|
|
|
@@ -331,21 +310,18 @@ export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit, On
|
|
331
|
310
|
this.configMetaService.initConfigMeta().subscribe({
|
|
332
|
311
|
next: (result: any) => {
|
|
333
|
312
|
this.registering = false;
|
|
|
313
|
+ this.errorMessage = null;
|
|
334
|
314
|
if (result.success) {
|
|
335
|
315
|
console.log('注册完成:', result.data);
|
|
336
|
|
- // 重新加载数据 - 刷新无限行模型缓存
|
|
337
|
|
- if (this.gridApi) {
|
|
338
|
|
- // 回到第一页
|
|
339
|
|
- this.gridApi.paginationGoToFirstPage();
|
|
340
|
|
- // 刷新缓存，强制重新加载数据
|
|
341
|
|
- this.gridApi.refreshInfiniteCache();
|
|
342
|
|
-
|
|
343
|
|
- // 重置当前页码
|
|
344
|
|
- this.currentPage = 1;
|
|
345
|
|
- this.debugInfo.currentPage = 1;
|
|
346
|
|
-
|
|
347
|
|
- console.log('无限行模型缓存已刷新，回到第一页');
|
|
348
|
|
- }
|
|
|
316
|
+
|
|
|
317
|
+ // 注册后切换到真实API数据
|
|
|
318
|
+ this.debugInfo.useMockData = false;
|
|
|
319
|
+ this.updateDataConfig();
|
|
|
320
|
+
|
|
|
321
|
+ // 重新加载数据
|
|
|
322
|
+ this.loadData(1);
|
|
|
323
|
+
|
|
|
324
|
+ console.log('注册成功，数据已重新加载');
|
|
349
|
325
|
} else {
|
|
350
|
326
|
console.error('注册失败:', result);
|
|
351
|
327
|
}
|
|
|
@@ -353,6 +329,7 @@ export class ServiceRegisterConfigComponent implements OnInit, AfterViewInit, On
|
|
353
|
329
|
error: (error: HttpErrorResponse) => {
|
|
354
|
330
|
this.registering = false;
|
|
355
|
331
|
console.error('注册时出错:', error);
|
|
|
332
|
+ this.errorMessage = `注册失败: ${error.status} ${error.statusText}`;
|
|
356
|
333
|
}
|
|
357
|
334
|
});
|
|
358
|
335
|
}
|
