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

@@ -1,40 +1,16 @@
-<div class="inner-content">
-    <nz-card nzTitle="用户管理" nzSize="small" [nzExtra]="reload">
-        <nz-table #table [nzData]="pageList.list" [nzTotal]="pageList.total" [(nzPageIndex)]="pageIndex"
-                  [nzPageSize]="pageSize" [nzLoading]="loading" [nzScroll]="{x:'800px'}"
-                  (nzPageIndexChange)="getUser()" nzFrontPagination="false">
-            <thead>
-            <th>邮箱</th>
-            <th>昵称</th>
-            <th>角色</th>
-            <th>邮箱验证状态</th>
-            <th>操作</th>
-            </thead>
-            <tbody>
-            <tr *ngFor="let data of table.data">
-                <td>{{data.email}}</td>
-                <td>{{data.displayName}}</td>
-                <td>
-                    <nz-tag [nzColor]="'blue'" *ngIf="data.role == 'admin'">{{data.role}}</nz-tag>
-                    <nz-tag [nzColor]="'purple'" *ngIf="data.role == 'user'">{{data.role}}</nz-tag>
-                </td>
-                <td>
-                    <nz-tag [nzColor]="'green'" *ngIf="data.emailStatus">已验证</nz-tag>
-                    <nz-tag [nzColor]="'red'" *ngIf="!data.emailStatus">未验证</nz-tag>
-                </td>
-                <td>
-                    <a (click)="showModal(true, data)" class="edit-opr">编辑</a>
-                    <nz-divider nzType="vertical"></nz-divider>
-                    <a (click)="showModal(false, data)" class="show-opr">查看</a>
-                    <nz-divider nzType="vertical"></nz-divider>
-                    <a nz-popconfirm nzPopconfirmTitle="确定要删除这个用户吗?" nzOkText="删除" nzCancelText="点错了"
-                       (nzOnConfirm)="deleteUser(data.id)" class="del-opr">删除</a>
-                </td>
-            </tr>
-            </tbody>
-        </nz-table>
-    </nz-card>
-</div>
+<common-table [headData]="headData"
+              [request]="request"
+              [template]="{role:{temp:role},emailStatus:{temp:emailStatus,param:{true:'已验证',false:'未验证'}}}"
+>
+</common-table>
+<ng-template let-value="value" #role>
+    <nz-tag [nzColor]="'blue'" *ngIf="value == 'admin'">{{value}}</nz-tag>
+    <nz-tag [nzColor]="'purple'" *ngIf="value == 'user'">{{value}}</nz-tag>
+</ng-template>
+<ng-template let-value="value" let-originValue="originValue" #emailStatus>
+    <nz-tag [nzColor]="'green'" *ngIf="originValue !='false'">{{value}}</nz-tag>
+    <nz-tag [nzColor]="'red'" *ngIf="originValue !='true'">{{value}}</nz-tag>
+</ng-template>
 
 <nz-modal [(nzVisible)]="modalData.visible" [nzClosable]="true" [nzTitle]="modalData.title"
           (nzOnCancel)="modalData.visible = false" (nzOnOk)="modalConfirm()"
@@ -115,8 +91,3 @@
     </ng-template>
 
 </nz-modal>
-
-
-<ng-template #reload>
-    <a (click)="getUser()" title="刷新"><i nz-icon nzType="reload" nzTheme="outline"></i></a>
-</ng-template>

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

@@ -2,15 +2,15 @@ import {Component, OnInit} from '@angular/core';
 import {NzMessageService} from 'ng-zorro-antd';
 import {Title} from '@angular/platform-browser';
 import {FormControl, FormGroup} from '@angular/forms';
-import {PageList} from '../../../class/HttpReqAndResp';
+import {RequestObj} from '../../../class/HttpReqAndResp';
 import {ApiService} from '../../../api/api.service';
 import {User} from '../../../class/User';
 import {GlobalUserService} from '../../../services/global-user.service';
+import {Data} from '../components/common-table/data';
 
 @Component({
     selector: 'app-admin-user',
-    templateUrl: './admin-user.component.html',
-    styleUrls: ['./admin-user.component.less']
+    templateUrl: './admin-user.component.html'
 })
 export class AdminUserComponent implements OnInit {
 
@@ -32,12 +32,7 @@ export class AdminUserComponent implements OnInit {
         })
     }
 
-    pageIndex: number = 1;
-    pageSize: number = 10;
-
-    pageList: PageList<User> = new PageList<User>();
     user: User;
-    loading: boolean = true;
     modalData = {
         visible: false,
         title: null,
@@ -46,29 +41,44 @@ export class AdminUserComponent implements OnInit {
     }
     formGroup: FormGroup;
 
+    headData: Data<User>[];
+    request: RequestObj;
+
     ngOnInit(): void {
         this.title.setTitle('小海博客 | 用户管理')
-        this.getUser();
+        this.request = {
+            path: '/admin/users',
+            method: 'GET',
+            queryParam: {
+                count: 1,
+                page: 10
+            }
+        };
+        this.headData = [
+            {fieldValue: 'id', title: '主键', primaryKey: true, show: false},
+            {fieldValue: 'email', title: '邮箱', show: true},
+            {fieldValue: 'displayName', title: '昵称', show: true},
+            {fieldValue: 'role', title: '角色', show: true},
+            {fieldValue: 'emailStatus', title: '邮箱验证状态', show: true},
+            {fieldValue: 'desc', title: '描述', show: false},
+            {fieldValue: 'avatarImgUrl', title: '头像', show: false},
+            {fieldValue: 'recentlyLandedDate', title: '最近登录日期', show: false},
+            {
+                fieldValue: '', title: '操作', show: true, isActionColumns: true,
+                action: [
+                    {name: '查看', click: data => this.showModal(false, data)},
+                    {name: '编辑', color: 'blue', click: data => this.showModal(true, data)},
+                    {name: '删除', color: 'red', needConfirm: true, click: data => this.deleteUser(data.id)}
+                ]
+            },
+        ];
     }
 
-    getUser = () => this.apiService.adminUsers(this.pageSize, this.pageIndex).subscribe({
-        next: data => this.pageList = data.result,
-        complete: () => this.loading = false,
-        error: err => this.loading = false
-    })
 
     deleteUser(id) {
-        this.loading = true;
         this.apiService.deleteUser(id).subscribe({
-            next: data => {
-                this.messageService.success('删除成功')
-                this.loading = false;
-                this.getUser();
-            },
-            error: err => {
-                this.messageService.error(err.msg)
-                this.loading = false
-            }
+            next: data => this.messageService.success('删除成功'),
+            error: err => this.messageService.error(err.msg)
         })
     }
 
@@ -84,7 +94,6 @@ export class AdminUserComponent implements OnInit {
         this.modalData.visible = false
         this.apiService.adminUpdateUser(this.formGroup.value).subscribe({
             next: data => {
-                this.getUser();
                 this.messageService.success('修改用户信息成功');
                 this.userService.refreshUserInfo();
             }

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

@@ -2,16 +2,17 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
 import {AdminUserComponent} from './admin-user.component';
+import {ReactiveFormsModule} from '@angular/forms';
+import {CommonTableModule} from '../components/common-table/common-table.module';
 import {
     NzButtonModule,
-    NzCardModule,
-    NzDividerModule, NzFormModule, NzIconModule, NzInputModule,
-    NzModalModule,
-    NzPopconfirmModule, NzRadioModule, NzSelectModule,
-    NzTableModule,
-    NzTagModule
+    NzFormModule,
+    NzGridModule,
+    NzIconModule,
+    NzInputModule, NzModalModule,
+    NzRadioModule,
+    NzSelectModule, NzTagModule
 } from 'ng-zorro-antd';
-import {ReactiveFormsModule} from '@angular/forms';
 
 
 @NgModule({
@@ -21,19 +22,17 @@ import {ReactiveFormsModule} from '@angular/forms';
     imports: [
         CommonModule,
         RouterModule.forChild([{path: '', component: AdminUserComponent}]),
-        NzCardModule,
-        NzTableModule,
-        NzPopconfirmModule,
-        NzDividerModule,
-        NzTagModule,
-        NzModalModule,
-        NzButtonModule,
-        NzFormModule,
         ReactiveFormsModule,
+        CommonTableModule,
+        NzGridModule,
+        NzButtonModule,
         NzInputModule,
-        NzSelectModule,
+        NzIconModule,
         NzRadioModule,
-        NzIconModule
+        NzSelectModule,
+        NzFormModule,
+        NzModalModule,
+        NzTagModule
 
     ]
 })