更新内容管理

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

@@ -1,35 +1,8 @@
-<div class="inner-content">
-    <nz-card nzTitle="更新内容管理" nzSize="small" [nzExtra]="reload">
-        <button nz-button (click)="showModal()" style="margin-bottom: 15px;">新增</button>
-        <nz-table #table [nzData]="pageList.list" [nzTotal]="pageList.total" [(nzPageIndex)]="pageIndex"
-                  [nzPageSize]="pageSize" [nzLoading]="loading" [nzScroll]="{x:'800px'}"
-                  (nzPageIndexChange)="getUpdateInfo()" nzFrontPagination="false">
-            <thead>
-            <th>更新内容</th>
-            <th>更新日期</th>
-            <th>操作</th>
-            </thead>
-            <tbody>
-            <tr *ngFor="let data of table.data">
-                <td nz-typography nzEllipsis="true" [nzTooltipTitle]="data.info" nzTooltipPlacement="top"
-                    nz-tooltip>{{data.info}}</td>
-                <td>{{data.time}}</td>
-                <td>
-                    <a (click)="showModal(data)" class="edit-opr">编辑</a>
-                    <nz-divider nzType="vertical"></nz-divider>
-                    <a nz-popconfirm nzPopconfirmTitle="确定要删除这个更新吗?" nzOkText="删除" nzCancelText="点错了"
-                       (nzOnConfirm)="deleteUpdateInfo(data.id)" class="del-opr">删除</a>
-                </td>
-            </tr>
-            </tbody>
-        </nz-table>
-    </nz-card>
-</div>
+<common-table [request]="request" [headData]="headData" cardTitle="更新管理">
+    <button nz-button (click)="showModal()">新增</button>
+</common-table>
 
 <nz-modal [(nzVisible)]="modalData.visible" [nzClosable]="true" (nzOnCancel)="modalData.visible = false"
           (nzOnOk)="confirm()" [nzTitle]="modalData.title">
     <textarea nz-input [(ngModel)]="modalData.content" [nzAutosize]="{ minRows: 2, maxRows: 8 }"></textarea>
 </nz-modal>
-<ng-template #reload>
-    <a (click)="getUpdateInfo()" title="刷新"><i nz-icon nzType="reload" nzTheme="outline"></i></a>
-</ng-template>

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

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

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

@@ -3,13 +3,13 @@ import {NzMessageService} from 'ng-zorro-antd';
 import {Title} from '@angular/platform-browser';
 import {Observable} from 'rxjs';
 import {ApiService} from '../../../api/api.service';
-import {PageList, Response} from '../../../class/HttpReqAndResp';
+import {PageList, RequestObj, Response} from '../../../class/HttpReqAndResp';
 import {UpdateInfo} from '../../../class/UpdateInfo';
+import {Data} from '../components/common-table/data';
 
 @Component({
     selector: 'app-admin-update',
-    templateUrl: './admin-update.component.html',
-    styleUrls: ['./admin-update.component.less']
+    templateUrl: './admin-update.component.html'
 })
 export class AdminUpdateComponent implements OnInit {
 
@@ -17,49 +17,47 @@ export class AdminUpdateComponent implements OnInit {
     constructor(private apiService: ApiService, private nzMessage: NzMessageService, private title: Title) {
     }
 
-    pageIndex: number = 1;
-    pageSize: number = 10;
-
-    pageList: PageList<UpdateInfo> = new PageList();
-
-    loading: boolean = true;
-
     modalData = {
         visible: false,
         content: null,
         id: null,
         title: null
     };
+    headData: Data<UpdateInfo>[];
+    request: RequestObj;
 
     ngOnInit(): void {
         this.title.setTitle('小海博客 | 更新信息管理')
-        this.getUpdateInfo();
+        this.headData = [
+            {fieldValue: 'id', show: false, title: '主键', primaryKey: true},
+            {fieldValue: 'info', show: true, title: '更新内容'},
+            {fieldValue: 'time', show: true, title: '更新日期'},
+            {
+                fieldValue: '', show: true, title: '操作', isActionColumns: true, action: [
+                    {name: '编辑', click: data => this.showModal(data)},
+                    {name: '删除', color: 'red', needConfirm: true, click: data => this.deleteUpdateInfo(data.id)}
+                ]
+            }
+        ];
+        this.request = {
+            path: '/webUpdate/pages',
+            method: 'GET',
+            queryParam: {
+                count: 1,
+                page: 10,
+            }
+        }
     }
 
-    getUpdateInfo = () => this.apiService.webUpdatePage(this.pageSize, this.pageIndex).subscribe({
-        next: data => this.pageList = data.result,
-        complete: () => this.loading = false,
-        error: err => this.loading = false
-    })
-
 
     deleteUpdateInfo(id) {
-        this.loading = true;
         this.apiService.deleteWebUpdateInfo(id).subscribe({
-            next: data => {
-                this.nzMessage.success('删除成功')
-                this.loading = false;
-                this.getUpdateInfo();
-            },
-            error: err => {
-                this.nzMessage.error(err.msg)
-                this.loading = false
-            }
+            next: data => this.nzMessage.success('删除成功'),
+            error: err => this.nzMessage.error(err.msg)
         })
     }
 
     confirm() {
-        this.loading = true;
         this.modalData.visible = false;
         let observable: Observable<Response<UpdateInfo>>
         if (this.modalData.id) {
@@ -68,17 +66,9 @@ export class AdminUpdateComponent implements OnInit {
             observable = this.apiService.createWebUpdateInfo(this.modalData.content)
         }
         observable.subscribe({
-            next: data => {
-                this.nzMessage.success('操作成功')
-                this.loading = false;
-                this.getUpdateInfo();
-            },
-            error: err => {
-                this.nzMessage.error(err.msg)
-                this.loading = false
-            }
+            next: data => this.nzMessage.success('操作成功'),
+            error: err => this.nzMessage.error(err.msg)
         })
-        console.log(this.modalData);
     }
 
     showModal(data?: UpdateInfo) {

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

@@ -2,16 +2,10 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {RouterModule} from '@angular/router';
 import {AdminUpdateComponent} from './admin-update.component';
-import {
-    NzButtonModule,
-    NzCardModule,
-    NzDividerModule, NzIconModule, NzInputModule, NzModalModule,
-    NzPopconfirmModule,
-    NzTableModule,
-    NzToolTipModule,
-    NzTypographyModule
-} from 'ng-zorro-antd';
+
 import {FormsModule} from '@angular/forms';
+import {CommonTableModule} from '../components/common-table/common-table.module';
+import {NzButtonModule, NzInputModule, NzModalModule} from 'ng-zorro-antd';
 
 
 @NgModule({
@@ -21,17 +15,11 @@ import {FormsModule} from '@angular/forms';
     imports: [
         CommonModule,
         RouterModule.forChild([{path: '', component: AdminUpdateComponent}]),
-        NzCardModule,
-        NzTableModule,
-        NzTypographyModule,
-        NzToolTipModule,
-        NzDividerModule,
-        NzPopconfirmModule,
-        NzModalModule,
         FormsModule,
-        NzButtonModule,
+        CommonTableModule,
+        NzModalModule,
         NzInputModule,
-        NzIconModule
+        NzButtonModule
     ]
 })
 export class AdminUpdateModule {