src/app/view/admin/admin-visitor/admin-visitor.component.html

@@ -1,27 +1,4 @@
-<div class="inner-content">
+<common-table [request]="request" [headData]="headData" cardTitle="访客信息管理">
-    <nz-card nzTitle="访客信息管理" nzSize="small" [nzExtra]="reload">
+
-        <nz-table #table [nzData]="pageList.list" [nzTotal]="pageList.total" [(nzPageIndex)]="pageIndex"
+</common-table>
-                  [nzPageSize]="pageSize" [nzLoading]="loading" [nzScroll]="{x:'800px'}"
+
-                  (nzPageIndexChange)="getVisitors()" nzFrontPagination="false">
-            <thead>
-            <th>ip地址</th>
-            <th>访问日期</th>
-            <th>浏览器类型</th>
-            <th>浏览器版本</th>
-            <th>系统</th>
-            </thead>
-            <tbody>
-            <tr *ngFor="let data of table.data">
-                <td>{{data.ip}}</td>
-                <td>{{data.date}}</td>
-                <td>{{data.browserName}}</td>
-                <td>{{data.browserVersion}}</td>
-                <td>{{data.osname}}</td>
-            </tr>
-            </tbody>
-        </nz-table>
-    </nz-card>
-</div>
-<ng-template #reload>
-    <a (click)="getVisitors()" title="刷新"><i nz-icon nzType="reload" nzTheme="outline"></i></a>
-</ng-template>

src/app/view/admin/admin-visitor/admin-visitor.component.ts

@@ -1,34 +1,48 @@
 import {Component, OnInit} from '@angular/core';
 import {Title} from '@angular/platform-browser';
 import {ApiService} from '../../../api/api.service';
-import {PageList} from '../../../class/HttpReqAndResp';
+import {RequestObj} from '../../../class/HttpReqAndResp';
 import {Visitor} from '../../../class/Visitor';
+import {Data} from '../components/common-table/data';
 
 @Component({
     selector: 'app-admin-visitor',
-    templateUrl: './admin-visitor.component.html',
+    templateUrl: './admin-visitor.component.html'
-    styleUrls: ['./admin-visitor.component.less']
 })
 export class AdminVisitorComponent implements OnInit {
 
     constructor(private apiService: ApiService, private title: Title) {
     }
 
-    pageIndex: number = 1;
+    headData: Data<Visitor>[];
-    pageSize: number = 10;
+    request: RequestObj
-
-    pageList: PageList<Visitor> = new PageList<Visitor>();
-
-    loading: boolean = true;
 
+    /***
+     * browserName: "Chrome 8"
+     browserVersion: "83.0.4103.116"
+     date: "2020-07-11 09:30:13"
+     id: 3131
+     ip: "127.0.0.1"
+     osname: "Windows 10"
+     */
     ngOnInit(): void {
         this.title.setTitle('小海博客 | 访客信息管理')
-        this.getVisitors();
+        this.request = {
+            path: '/admin/visitor/page',
+            method: 'GET',
+            queryParam: {
+                count: 1,
+                page: 10,
+                showLocation: location
+            }
+        }
+        this.headData = [
+            {fieldValue: 'id', title: '主键', show: false, primaryKey: true},
+            {fieldValue: 'date', title: '主键', show: true},
+            {fieldValue: 'browserName', title: '主键', show: true},
+            {fieldValue: 'ip', title: '主键', show: true},
+            {fieldValue: 'browserVersion', title: '主键', show: true},
+            {fieldValue: 'osname', title: '主键', show: true}
+        ]
     }
-
-    getVisitors = () => this.apiService.adminVisitors(false, this.pageSize, this.pageIndex).subscribe({
-        next: data => this.pageList = data.result,
-        complete: () => this.loading = false,
-        error: err => this.loading = false
-    })
 }

src/app/view/admin/admin-visitor/admin-visitor.module.ts

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
 import {AdminVisitorComponent} from './admin-visitor.component';
-import {NzButtonModule, NzCardModule, NzDividerModule, NzIconModule, NzTableModule} from 'ng-zorro-antd';
+import {CommonTableModule} from '../components/common-table/common-table.module';
 
 
 @NgModule({
@@ -12,11 +12,7 @@ import {NzButtonModule, NzCardModule, NzDividerModule, NzIconModule, NzTableModu
     imports: [
         CommonModule,
         RouterModule.forChild([{path: '', component: AdminVisitorComponent}]),
-        NzCardModule,
+        CommonTableModule
-        NzTableModule,
-        NzButtonModule,
-        NzDividerModule,
-        NzIconModule
     ]
 })
 export class AdminVisitorModule {