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

@@ -1,61 +1,32 @@
-<div class="inner-content">
+<c-common-table cardTitle="文章管理"
-    <nz-card nzTitle="文章管理" nzSize="small" [nzExtra]="reload">
+                #commonTableComponent
-        <nz-table #table [nzData]="pageList.list"
+                [data]="headData"
-                  [nzTotal]="pageList.total"
+                [request]="request"
-                  [(nzPageIndex)]="page"
+                [template]="{
-                  [nzPageSize]="pageSize"
+                    original:{temp:original,param:{true:'原创',false:'转载'}},
-                  [nzLoading]="loading"
+                    readingNumber:{temp:readingNumber},
-                  [nzScroll]="{x:'1100px'}"
+                    likeCount:{temp:likeCount},
-                  (nzPageIndexChange)="getArticle()"
+                    dislikeCount:{temp:dislikeCount},
-                  nzFrontPagination="false"
+                    open:{temp:open}
-                  nzTableLayout="fixed">
+                }">
-            <thead>
+</c-common-table>
-            <th>标题</th>
-            <th>发布日期</th>
-            <th>更新日期</th>
-            <th>文章类型</th>
-            <th>阅读量</th>
-            <th>👍赞</th>
-            <th>👎踩</th>
-            <th>是否可见</th>
-            <th>操作</th>
-            </thead>
-            <tbody>
-            <tr *ngFor="let data of table.data">
-                <td nz-typography nzEllipsis="true" [nzTooltipTitle]="data.title" nzTooltipPlacement="right"
-                    nz-tooltip>{{data.title}}</td>
-                <td>{{data.publishDateFormat}}</td>
-                <td>{{data.updateDateFormat}}</td>
-                <td>
-                    <nz-tag nzColor="green" *ngIf="data.original">原创</nz-tag>
-                    <nz-tag nzColor="#ff5500" *ngIf="!data.original">转载</nz-tag>
-                </td>
-                <td>
-                    <nz-tag [nzColor]="'purple'">{{data.readingNumber}}</nz-tag>
-                </td>
-                <td>
-                    <nz-tag [nzColor]="'blue'">{{data.likeCount}}</nz-tag>
-                </td>
-                <td>
-                    <nz-tag [nzColor]="'magenta'">{{data.dislikeCount}}</nz-tag>
-                </td>
-                <td><input type="checkbox" [checked]="data.open" disabled></td>
-                <td>
-                    <a routerLink="/write" [queryParams]="{id:data.id}" class="edit-opr">编辑</a>
-                    <nz-divider nzType="vertical"></nz-divider>
-                    <a [routerLink]="'/article'+data.id" class="show-opr">查看</a>
-                    <nz-divider nzType="vertical"></nz-divider>
-                    <a nz-popconfirm nzPopconfirmTitle="确定要删除这篇文章吗?" nzOkText="删除" nzCancelText="点错了"
-                       (nzOnConfirm)="deleteArticle(data.id)" class="del-opr">删除</a>
-                </td>
-            </tr>
-            </tbody>
 
-            <ng-template #reload>
+<ng-template let-value="value" let-originValue="originValue" #original>
-                <a (click)="getArticle()" title="刷新"><i nz-icon nzType="reload" nzTheme="outline"></i></a>
+    <nz-tag [nzColor]="originValue?'green':'#ff5500'">{{value}}</nz-tag>
-            </ng-template>
+</ng-template>
-        </nz-table>
-    </nz-card>
-</div>
 
+<ng-template let-value="value" #readingNumber>
+    <nz-tag nzColor="purple">{{value}}</nz-tag>
+</ng-template>
 
+<ng-template let-value="value" #likeCount>
+    <nz-tag nzColor="blue">{{value}}</nz-tag>
+</ng-template>
+
+<ng-template let-value="value" #dislikeCount>
+    <nz-tag nzColor="magenta">{{value}}</nz-tag>
+</ng-template>
+
+<ng-template #open let-value="value">
+    <label nz-checkbox nzDisabled [ngModel]="value"></label>
+</ng-template>

src/app/view/admin/admin-article/admin-article.component.less

@@ -1,3 +0,0 @@
-td {
-  max-width: 200px;
-}

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

@@ -1,49 +1,70 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {NzMessageService} from 'ng-zorro-antd';
 import {ApiService} from '../../../api/api.service';
-import {PageList} from '../../../class/HttpReqAndResp';
+import {RequestObj} from '../../../class/HttpReqAndResp';
 import {Article} from '../../../class/Article';
 import {Title} from '@angular/platform-browser';
+import {Data} from '../components/common-table/data';
+import {CommonTableComponent} from '../components/common-table/common-table.component';
+import {Router} from '@angular/router';
 
 @Component({
     selector: 'app-admin-article',
-    templateUrl: './admin-article.component.html',
+    templateUrl: './admin-article.component.html'
-    styleUrls: ['./admin-article.component.less']
 })
 export class AdminArticleComponent implements OnInit {
 
-    constructor(private apiService: ApiService, private nzMessage: NzMessageService, private title: Title) {
+    constructor(private apiService: ApiService, private nzMessage: NzMessageService, private title: Title,
+                private router: Router) {
+        this.request = {
+            path: '/admin/articles',
+            method: 'GET',
+            queryParam: {
+                page: 1,
+                count: 10
+            }
+        }
     }
 
-    page: number = 1;
+    request: RequestObj;
-    pageSize: number = 10;
+    headData: Data<Article>[]
-
+    @ViewChild('commonTableComponent') private commonTableComponent: CommonTableComponent<Article>
-    pageList: PageList<Article> = new PageList<Article>();
-
-    loading: boolean = true;
 
     ngOnInit(): void {
         this.title.setTitle('小海博客 | 文章管理')
-        this.getArticle();
+        this.headData = [
+            {fieldName: '主键', fieldValue: 'id', show: false, primaryKey: true},
+            {fieldName: '标题', fieldValue: 'title', show: true},
+            {fieldName: '分类', fieldValue: 'category', show: true},
+            {fieldName: '文章类型', fieldValue: 'original', show: true},
+            {fieldName: '阅读量', fieldValue: 'readingNumber', show: true},
+            {fieldName: '👍数', fieldValue: 'likeCount', show: true},
+            {fieldName: '👎数', fieldValue: 'dislikeCount', show: true},
+            {fieldName: '发布日期', fieldValue: 'publishDateFormat', show: true},
+            {fieldName: '更新日期', fieldValue: 'updateDateFormat', show: true},
+            {fieldName: '状态', fieldValue: 'open', show: true},
+            {fieldName: '简介', fieldValue: 'summary', show: false},
+            {fieldName: '作者', fieldValue: 'author.displayName', show: false},
+            {fieldName: '标签数', fieldValue: 'tags.length', show: false},
+            {
+                fieldName: '操作', fieldValue: '', show: true, isActionColumns: true,
+                action: [
+                    {name: '查看', click: (d) => this.router.navigateByUrl(`/article/${d.id}`)},
+                    {name: '删除', color: '#ff0000', needConfirm: true, click: (d) => this.deleteArticle(d)},
+                    {name: '编辑', color: '#2db7f5', click: (d) => this.router.navigateByUrl(`/write?id=${d.id}`)},
+                ]
+            }
+        ]
     }
 
-    getArticle = () => this.apiService.adminArticles(this.page, this.pageSize).subscribe({
+    deleteArticle(article: Article) {
-        next: data => this.pageList = data.result,
+        this.apiService.deleteArticle(article.id).subscribe({
-        complete: () => this.loading = false,
-        error: err => this.loading = false
-    })
-
-    deleteArticle(id) {
-        this.loading = true;
-        this.apiService.deleteArticle(id).subscribe({
             next: data => {
                 this.nzMessage.success('删除成功')
-                this.loading = false;
+                this.commonTableComponent.getData();
-                this.getArticle();
             },
             error: err => {
                 this.nzMessage.error(err.msg)
-                this.loading = false
             }
         })
     }

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

@@ -2,14 +2,9 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
 import {AdminArticleComponent} from './admin-article.component';
-import {
+import {CommonTableModule} from '../components/common-table/common-table.module';
-    NzCardModule,
+import {FormsModule} from '@angular/forms';
-    NzDividerModule, NzIconModule,
+import {NzCheckboxModule, NzTagModule} from 'ng-zorro-antd';
-    NzPopconfirmModule,
-    NzTableModule, NzTagModule,
-    NzToolTipModule,
-    NzTypographyModule
-} from 'ng-zorro-antd';
 
 @NgModule({
     declarations: [
@@ -18,14 +13,10 @@ import {
     imports: [
         CommonModule,
         RouterModule.forChild([{path: '', component: AdminArticleComponent}]),
-        NzTableModule,
+        CommonTableModule,
-        NzTypographyModule,
+        FormsModule,
-        NzToolTipModule,
-        NzCardModule,
-        NzDividerModule,
-        NzPopconfirmModule,
         NzTagModule,
-        NzIconModule,
+        NzCheckboxModule,
     ]
 })
 export class AdminArticleModule {