友链管理

index/src/app/view/admin/admin-comment/admin-comment.component.ts

@@ -43,7 +43,7 @@ export class AdminCommentComponent implements OnInit {
             },
             error: err => {
                 this.loading = false;
-                this.messageService.success(err.msg);
+                this.messageService.error(err.msg);
             },
             complete: () => this.loading = false
         })

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

@@ -1 +1,62 @@
-<p>admin-link works!</p>
+<div class="inner-content">
+    <nz-card nzTitle="友链管理" nzSize="small">
+        <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"
+                  (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>
+
+<nz-modal [(nzVisible)]="modalVisible" [nzTitle]="modalTitle" (nzOnOk)="modalConfirm()"
+          (nzOnCancel)="modalVisible = false" [nzClosable]="true" [nzOkDisabled]="!formGroup.valid">
+    <form nz-form [formGroup]="formGroup">
+        <nz-form-item>
+            <nz-form-label nzRequired>网站名称</nz-form-label>
+            <nz-form-control nzErrorTip="网站名称不可为空">
+                <input nz-input formControlName="name">
+            </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+            <nz-form-label nzRequired>网站链接</nz-form-label>
+            <nz-form-control [nzErrorTip]="nameErrTip">
+                <input nz-input formControlName="url">
+                <ng-template #nameErrTip>
+                    <div *ngIf="formGroup.controls.url.hasError('required')">网站链接不可为空</div>
+                    <div *ngIf="formGroup.controls.url.hasError('pattern')">网站链接格式不正确</div>
+                    <div></div>
+                </ng-template>
+            </nz-form-control>
+        </nz-form-item>
+        <nz-form-item>
+            <nz-form-label nzRequired>是否公开</nz-form-label>
+            <nz-form-control nzErrorTip="不可为空">
+                <nz-select nzPlaceHolder="请选择" formControlName="open" [nzAllowClear]="true">
+                    <nz-option [nzValue]="true" nzLabel="公开"></nz-option>
+                    <nz-option [nzValue]="false" nzLabel="不公开"></nz-option>
+                </nz-select>
+            </nz-form-control>
+        </nz-form-item>
+    </form>
+</nz-modal>

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

@@ -1,4 +1,10 @@
 import {Component, OnInit} from '@angular/core';
+import {PageList, 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";
 
 @Component({
     selector: 'app-admin-link',
@@ -7,9 +13,79 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AdminLinkComponent implements OnInit {
 
-  constructor() { }
+    constructor(private apiService: ApiService, private messageService: NzMessageService) {
+        this.formGroup = new FormGroup({
+            id: new FormControl(null),
+            name: new FormControl(null, [Validators.required]),
+            url: new FormControl(null, [Validators.required, Validators.pattern(/^(https:\/\/|http:\/\/|)([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/)]),
+            open: new FormControl(null, [Validators.required]),
+            oper: new FormControl(null)
+        })
+    }
+
+    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,
+    })
 
     ngOnInit(): void {
+        this.getLinks();
     }
 
+    delete(id: number) {
+        this.apiService.deleteLink(id).subscribe({
+            next: data => {
+                this.messageService.success('删除成功');
+                this.getLinks();
+            },
+            error: () => {
+                this.loading = false;
+                this.messageService.error('删除失败');
+            },
+            complete: () => this.loading = false,
+        })
+    }
+
+    showEdit(data: Link) {
+        this.modalVisible = true;
+        this.modalTitle = '编辑友链信息';
+        this.formGroup.patchValue(data);
+        this.formGroup.controls.oper.setValue('edit')
+    }
+
+    modalConfirm() {
+        this.modalVisible = false;
+        const linkReq: Link = new Link();
+        linkReq.name = this.formGroup.value.name;
+        linkReq.url = this.formGroup.value.url;
+        linkReq.open = this.formGroup.value.open;
+        const oper = this.formGroup.value.oper;
+        let observable: Observable<Response<Link>>;
+        if (oper === 'edit') {
+            linkReq.id = this.formGroup.value.id;
+            observable = this.apiService.updateLink(linkReq);
+        } else if (oper === 'add') {
+            observable = this.apiService.createLink(linkReq);
+        }
+        observable.subscribe({
+            next: data => this.messageService.success('操作成功'),
+            error: err => this.messageService.success('操作失败,', err.msg),
+            complete: () => this.getLinks()
+        })
+    }
+
+    addLink() {
+        this.modalVisible = true;
+        this.modalTitle = '新增友链信息';
+        this.formGroup.controls.oper.setValue('add')
+    }
 }

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

@@ -2,6 +2,16 @@ 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, NzInputModule,
+    NzModalModule,
+    NzPopconfirmModule, NzSelectModule,
+    NzTableModule
+} from "ng-zorro-antd";
+import {ReactiveFormsModule} from "@angular/forms";
 
 
 @NgModule({
@@ -10,7 +20,17 @@ import {AdminLinkComponent} from './admin-link.component';
     ],
     imports: [
         CommonModule,
-        RouterModule.forChild([{path: '', component: AdminLinkComponent}])
+        RouterModule.forChild([{path: '', component: AdminLinkComponent}]),
+        NzCardModule,
+        NzTableModule,
+        NzDividerModule,
+        NzPopconfirmModule,
+        NzModalModule,
+        NzFormModule,
+        ReactiveFormsModule,
+        NzInputModule,
+        NzSelectModule,
+        NzButtonModule
     ]
 })
 export class AdminLinkModule {