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

@@ -1,36 +1,18 @@
-<div class="inner-content">
-    <nz-card nzTitle="友链管理" nzSize="small" [nzExtra]="reload">
-        <button nz-button (click)="addLink()" style="margin-bottom: 15px">新增</button>
-        <nz-table #table [nzData]="pageList.list" [nzTotal]="pageList.total" [(nzPageIndex)]="pageIndex"
-                  [nzPageSize]="pageSize" [nzLoading]="loading"  [nzScroll]="{x:'1200px'}"
-                  (nzPageIndexChange)="getLinks()" nzFrontPagination="false">
-            <thead>
-            <th>友链名称</th>
-            <th>友链地址</th>
-            <th>是否可见</th>
-            <th>操作</th>
-            </thead>
-            <tbody>
-            <tr *ngFor="let data of table.data">
-                <td>{{data.name}}</td>
-                <td><a [href]="data.url" target="_blank">{{data.url}}</a></td>
-                <td>
-                    <input type="checkbox" disabled [checked]="data.open">
-                </td>
-                <td>
-                    <a (click)="showEdit(data)" class="edit-opr">编辑</a>
-                    <nz-divider nzType="vertical"></nz-divider>
-                    <a nz-popconfirm nzPopconfirmTitle="确定要删除这条友链吗?" nzOkText="删除" nzCancelText="点错了"
-                       (nzOnConfirm)="delete(data.id)" class="del-opr">删除</a>
-                </td>
-            </tr>
-            </tbody>
-        </nz-table>
-    </nz-card>
-</div>
+<common-table #commonTableComponent
+              cardTitle="友链管理"
+              [request]="request"
+              [headData]="headData"
+              [template]="{open:{temp:open,param:{true:'可见',false:'不可见'}},delete:{temp:deleteTemp,param:{true:'已删除',false:'未删除'}}}"
+>
+</common-table>
 
-<ng-template #reload>
-    <a (click)="getLinks()" title="刷新"><i nz-icon nzType="reload" nzTheme="outline"></i></a>
+<ng-template #open let-value="value">
+    <label nz-checkbox nzDisabled [ngModel]="value"></label>
+</ng-template>
+
+<ng-template let-value="value" let-originValue="originValue" #deleteTemp>
+    <nz-tag [nzColor]="'blue'" *ngIf="originValue=='false'">{{value}}</nz-tag>
+    <nz-tag [nzColor]="'#ff5500'" *ngIf="originValue!='false'">{{value}}</nz-tag>
 </ng-template>
 
 <nz-modal [(nzVisible)]="modalVisible" [nzTitle]="modalTitle" (nzOnOk)="modalConfirm()"

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

@@ -1,16 +1,17 @@
-import {Component, OnInit} from '@angular/core';
-import {PageList, Response} from '../../../class/HttpReqAndResp';
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {RequestObj, Response} from '../../../class/HttpReqAndResp';
 import {Link} from '../../../class/Link';
 import {ApiService} from '../../../api/api.service';
 import {NzMessageService} from 'ng-zorro-antd';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {Title} from '@angular/platform-browser';
+import {CommonTableComponent} from '../components/common-table/common-table.component';
+import {Data} from '../components/common-table/data';
 
 @Component({
     selector: 'app-admin-link',
-    templateUrl: './admin-link.component.html',
-    styleUrls: ['./admin-link.component.less']
+    templateUrl: './admin-link.component.html'
 })
 export class AdminLinkComponent implements OnInit {
 
@@ -25,35 +26,51 @@ export class AdminLinkComponent implements OnInit {
         })
     }
 
-    pageList: PageList<Link> = new PageList<Link>();
-    loading: boolean = true;
-    pageIndex: number = 1;
-    pageSize: number = 10;
+
     modalVisible: boolean = false;
     modalTitle: string = '';
     formGroup: FormGroup;
-
-    getLinks = () => this.apiService.adminLinks(this.pageSize, this.pageIndex).subscribe({
-        next: data => this.pageList = data.result,
-        error: () => this.loading = false,
-        complete: () => this.loading = false,
-    })
+    request: RequestObj;
+    @ViewChild('commonTableComponent') commonTableComponent: CommonTableComponent<Link>
+    headData: Data<Link>[];
 
     ngOnInit(): void {
-        this.getLinks();
+        this.request = {
+            path: '/admin/links',
+            method: 'GET',
+            queryParam: {
+                count: 10,
+                page: 1
+            }
+        }
+        this.headData = [
+            {title: '主键', fieldValue: 'id', show: false, primaryKey: true},
+            {title: '友链名称', fieldValue: 'name', show: true},
+            {title: '友链地址', fieldValue: 'url', show: true},
+            {title: '是否可见', fieldValue: 'open', show: true},
+            {title: '描述', fieldValue: 'desc', show: false},
+            {title: '图标', fieldValue: 'iconPath', show: false},
+            {title: '状态', fieldValue: 'delete', show: true},
+            {
+                title: '操作', fieldValue: '', show: true, isActionColumns: true, action: [
+                    {name: '访问', click: (data) => window.open(data.url)},
+                    {name: '编辑', click: (data) => this.showEdit(data)},
+                    {name: '删除', color: 'red', needConfirm: true, click: (data) => this.delete(data.id)},
+                ]
+            },
+        ];
     }
 
     delete(id: number) {
         this.apiService.deleteLink(id).subscribe({
             next: data => {
                 this.messageService.success('删除成功');
-                this.getLinks();
+                this.commonTableComponent.getData();
             },
             error: () => {
-                this.loading = false;
                 this.messageService.error('删除失败');
             },
-            complete: () => this.loading = false,
+            complete: () => null,
         })
     }
 
@@ -84,7 +101,7 @@ export class AdminLinkComponent implements OnInit {
         observable.subscribe({
             next: data => this.messageService.success('操作成功'),
             error: err => this.messageService.error('操作失败,' + err.msg),
-            complete: () => this.getLinks()
+            complete: () => this.commonTableComponent.getData()
         })
     }
 

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

@@ -2,16 +2,9 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
 import {AdminLinkComponent} from './admin-link.component';
-import {
-    NzButtonModule,
-    NzCardModule,
-    NzDividerModule,
-    NzFormModule, NzIconModule, NzInputModule,
-    NzModalModule,
-    NzPopconfirmModule, NzSelectModule,
-    NzTableModule
-} from 'ng-zorro-antd';
-import {ReactiveFormsModule} from '@angular/forms';
+import {CommonTableModule} from '../components/common-table/common-table.module';
+import {NzCheckboxModule, NzFormModule, NzInputModule, NzModalModule, NzSelectModule, NzTagModule} from 'ng-zorro-antd';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 
 
 @NgModule({
@@ -21,17 +14,16 @@ import {ReactiveFormsModule} from '@angular/forms';
     imports: [
         CommonModule,
         RouterModule.forChild([{path: '', component: AdminLinkComponent}]),
-        NzCardModule,
-        NzTableModule,
-        NzDividerModule,
-        NzPopconfirmModule,
+        CommonTableModule,
+        NzCheckboxModule,
         NzModalModule,
+        FormsModule,
         NzFormModule,
         ReactiveFormsModule,
         NzInputModule,
         NzSelectModule,
-        NzButtonModule,
-        NzIconModule
+        NzTagModule,
+
     ]
 })
 export class AdminLinkModule {